/* ============================================================
   TaskModule CSS — هم‌شکل با بقیه‌ی ماژول‌ها. پیشوند tm-.
   ============================================================ */

.task-module {
  --tm-c-bg: #f5f5f3;
  --tm-c-surface: #ffffff;
  --tm-c-border: rgba(0,0,0,0.08);
  --tm-c-border-strong: rgba(0,0,0,0.14);
  --tm-c-text: #1a1a18;
  --tm-c-text-2: #5a5a56;
  --tm-c-text-3: #9a9994;
  --tm-c-accent: #2563eb;
  --tm-c-accent-bg: #eff6ff;
  --tm-c-accent-text: #1d4ed8;
  --tm-c-accent-border: #bfdbfe;
  --tm-c-success: #16a34a;
  --tm-c-success-bg: #f0fdf4;
  --tm-c-success-text: #15803d;
  --tm-c-success-border: #bbf7d0;
  --tm-c-warning: #d97706;
  --tm-c-warning-bg: #fffbeb;
  --tm-c-warning-text: #b45309;
  --tm-c-warning-border: #fde68a;
  --tm-c-danger: #dc2626;
  --tm-c-danger-bg: #fef2f2;
  --tm-c-danger-text: #b91c1c;
  --tm-c-danger-border: #fecaca;
  --tm-radius-sm: 6px;
  --tm-radius: 10px;
  --tm-radius-lg: 14px;
  --tm-transition: 0.15s ease;

  font-family: 'Vazirmatn', system-ui, sans-serif;
  color: var(--tm-c-text);
  font-size: 13px;
  line-height: 1.5;
  position: relative;
}

[data-theme="dark"] .task-module {
  --tm-c-bg: #15161a;
  --tm-c-surface: #1c1d22;
  --tm-c-border: rgba(255,255,255,0.08);
  --tm-c-border-strong: rgba(255,255,255,0.14);
  --tm-c-text: #f1f1ef;
  --tm-c-text-2: #b3b3ad;
  --tm-c-text-3: #76766f;
  --tm-c-accent-bg: rgba(37,99,235,0.14);
  --tm-c-success-bg: rgba(22,163,74,0.14);
  --tm-c-warning-bg: rgba(217,119,6,0.14);
  --tm-c-danger-bg: rgba(220,38,38,0.14);
}

.task-module * { box-sizing: border-box; }

/* ── Page header ── */
.tm-page-hdr { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.tm-page-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.tm-page-desc { font-size: 13px; color: var(--tm-c-text-3); margin-top: 3px; }

/* ── Buttons ── */
.tm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 34px; border-radius: var(--tm-radius-sm); border: 1px solid var(--tm-c-border-strong); background: var(--tm-c-surface); color: var(--tm-c-text); font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background var(--tm-transition), border-color var(--tm-transition); white-space: nowrap; }
.tm-btn:hover { background: var(--tm-c-bg); }
.tm-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.tm-btn i { font-size: 14px; }
.tm-btn-primary { background: var(--tm-c-accent); border-color: var(--tm-c-accent); color: #fff; }
.tm-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* ── Card / table ── */
.tm-card { background: var(--tm-c-surface); border: 1px solid var(--tm-c-border); border-radius: var(--tm-radius-lg); overflow: hidden; }
.tm-tbl-wrap { overflow-x: auto; }
table.tm-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
table.tm-tbl th { text-align: right; padding: 10px 14px; color: var(--tm-c-text-3); font-weight: 600; font-size: 11px; border-bottom: 1px solid var(--tm-c-border); background: var(--tm-c-bg); }
table.tm-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--tm-c-border); vertical-align: middle; }
table.tm-tbl tr:hover td { background: var(--tm-c-bg); }
.tm-mono { font-family: 'Courier New', monospace; }
td.tm-row-actions { white-space: nowrap; }
.tm-row-act-btn { width: 27px; height: 27px; border: 1px solid var(--tm-c-border); background: var(--tm-c-surface); border-radius: var(--tm-radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--tm-c-text-2); cursor: pointer; margin-inline-start: 4px; }
.tm-row-act-btn:hover { background: var(--tm-c-accent-bg); border-color: var(--tm-c-accent-border); color: var(--tm-c-accent); }
.tm-row-act-btn.danger:hover { background: var(--tm-c-danger-bg); border-color: var(--tm-c-danger-border); color: var(--tm-c-danger); }

/* ── Badge ── */
.tm-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--tm-c-accent-bg); color: var(--tm-c-accent-text); border: 1px solid var(--tm-c-accent-border); }
.tm-b-warning { background: var(--tm-c-warning-bg); color: var(--tm-c-warning-text); border-color: var(--tm-c-warning-border); }

/* ── Toolbar / search / filter ── */
.tm-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--tm-c-border); flex-wrap: wrap; }
.tm-search-box { display: flex; align-items: center; gap: 8px; background: var(--tm-c-bg); border: 1px solid var(--tm-c-border); border-radius: var(--tm-radius-sm); padding: 0 10px; height: 34px; flex: 1; min-width: 180px; }
.tm-search-box input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 12.5px; color: var(--tm-c-text); width: 100%; height: 100%; }
.tm-filter-select { height: 34px; border: 1px solid var(--tm-c-border-strong); border-radius: var(--tm-radius-sm); padding: 0 10px; font-size: 12px; background: var(--tm-c-surface); color: var(--tm-c-text); font-family: inherit; }

/* ── Form ── */
.tm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tm-field { display: flex; flex-direction: column; gap: 5px; }
.tm-field-check { display: flex; align-items: center; font-size: 13px; font-weight: 500; color: var(--tm-c-text); cursor: pointer; margin-top: 22px; }
.tm-field label { font-size: 11px; font-weight: 600; color: var(--tm-c-text-2); }
.tm-field input, .tm-field select, .tm-field textarea { border: 1px solid var(--tm-c-border-strong); border-radius: var(--tm-radius-sm); padding: 8px 11px; font-size: 13px; background: var(--tm-c-surface); color: var(--tm-c-text); font-family: inherit; outline: none; }
.tm-field input:focus, .tm-field select:focus { border-color: var(--tm-c-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.tm-form-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--tm-c-border); }
.tm-persian-date-input { width: 100%; height: 36px; border: 1px solid var(--tm-c-border-strong); border-radius: var(--tm-radius-sm); padding: 0 11px; font-size: 13px; font-family: inherit; }

/* ── Chapter picker (dual list) ── */
.tm-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tm-picker-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tm-picker-col-title { font-size: 11px; font-weight: 600; color: var(--tm-c-text-2); }
.tm-picker-toolbar { margin-bottom: 4px; }
.tm-picker-list { border: 1px solid var(--tm-c-border); border-radius: var(--tm-radius); max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.tm-picker-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--tm-radius-sm); cursor: pointer; }
.tm-picker-item:hover { background: var(--tm-c-bg); }
.tm-picker-item.selected { background: var(--tm-c-accent-bg); }
.tm-picker-item i { font-size: 16px; color: var(--tm-c-text-3); flex-shrink: 0; }
.tm-picker-item.selected i { color: var(--tm-c-accent); }
.tm-picker-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tm-picker-item-info strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-picker-item-info span { font-size: 10.5px; color: var(--tm-c-text-3); }

/* ── Modal ── */
.tm-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,15,14,0.5); z-index: 10000; align-items: center; justify-content: center; padding: 20px; }
.tm-modal-backdrop.open { display: flex; }
.tm-modal-box { width: 100%; max-width: 680px; background: var(--tm-c-surface); border-radius: var(--tm-radius-lg); border: 1px solid var(--tm-c-border); box-shadow: 0 24px 64px rgba(0,0,0,0.32); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.tm-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--tm-c-border); }
.tm-modal-title { font-size: 14px; font-weight: 600; }
.tm-modal-close { width: 30px; height: 30px; border: none; background: var(--tm-c-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--tm-c-text-2); cursor: pointer; }
.tm-modal-close:hover { background: var(--tm-c-border); }
.tm-modal-body { padding: 20px; overflow-y: auto; }
.tm-modal-actions { display: flex; gap: 8px; margin-top: 20px; }
.tm-modal-actions .tm-btn { flex: 1; justify-content: center; }
.tm-confirm-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--tm-c-danger-bg); color: var(--tm-c-danger); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 26px; }
.tm-confirm-text { text-align: center; font-size: 13px; color: var(--tm-c-text-2); line-height: 1.7; }

/* ── Toast ── */
.tm-toast-wrap { position: fixed; bottom: 24px; left: 24px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
.tm-toast { display: flex; align-items: center; gap: 10px; background: var(--tm-c-text); color: #fff; padding: 12px 16px; border-radius: var(--tm-radius); font-size: 13px; font-weight: 500; cursor: pointer; }

/* ── Loading / empty ── */
.tm-loading { display: flex; justify-content: center; padding: 30px 0; }
.tm-spinner { width: 14px; height: 14px; border: 2px solid var(--tm-c-border-strong); border-top-color: var(--tm-c-text-2); border-radius: 50%; display: inline-block; animation: tmSpin 0.7s linear infinite; }
.tm-spinner.large { width: 26px; height: 26px; border-width: 3px; }
@keyframes tmSpin { to { transform: rotate(360deg); } }
.tm-empty { text-align: center; padding: 30px 20px; color: var(--tm-c-text-3); }
.tm-empty i { font-size: 28px; margin-bottom: 8px; display: block; opacity: 0.4; }

/* ══════════════════════════════════════════
   زیرفاز ۲: ویزارد برنامه‌ریزی، فهرست تسک دانش‌آموز، تقویم
   ══════════════════════════════════════════ */

/* ── View toggle (فهرست تسک) ── */
.tm-view-toggle { display: flex; border: 1px solid var(--tm-c-border-strong); border-radius: 20px; overflow: hidden; }
.tm-view-toggle button { border: none; background: var(--tm-c-surface); padding: 8px 16px; font-size: 12px; cursor: pointer; font-family: inherit; color: var(--tm-c-text-2); }
.tm-view-toggle button.active { background: var(--tm-c-accent); color: #fff; }

/* ── Wizard ── */
.tm-wizard-card { max-width: 640px; margin: 0 auto; background: var(--tm-c-surface); border: 1px solid var(--tm-c-border); border-radius: var(--tm-radius-lg); padding: 24px; }
.tm-wizard-timeline { display: flex; justify-content: space-between; margin-bottom: 28px; gap: 6px; }
.tm-wizard-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; text-align: center; opacity: 0.5; }
.tm-wizard-step.active, .tm-wizard-step.done { opacity: 1; }
.tm-wizard-step-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--tm-c-bg); border: 2px solid var(--tm-c-border-strong); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--tm-c-text-3); }
.tm-wizard-step.active .tm-wizard-step-circle { background: var(--tm-c-accent); border-color: var(--tm-c-accent); color: #fff; }
.tm-wizard-step.done .tm-wizard-step-circle { background: var(--tm-c-success); border-color: var(--tm-c-success); color: #fff; }
.tm-wizard-step-text { display: flex; flex-direction: column; }
.tm-wizard-step-text strong { font-size: 10.5px; }
.tm-wizard-step-text span { font-size: 9.5px; color: var(--tm-c-text-3); }

.tm-wizard-step-panel { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tm-wizard-img { max-width: 220px; width: 100%; border-radius: var(--tm-radius); }
.tm-wizard-step-body p { font-size: 13px; color: var(--tm-c-text-2); line-height: 1.9; }
.tm-wizard-quote { font-size: 13px; color: var(--tm-c-text-2); font-weight: 600; }
.tm-wizard-quote.success { color: var(--tm-c-success-text); }

/* ── Progress ring ── */
.tm-progress-ring { position: relative; width: 160px; height: 160px; margin: 8px auto; }
.tm-progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tm-ring-bg { fill: none; stroke: var(--tm-c-bg); stroke-width: 10; }
.tm-ring-fg { fill: none; stroke: var(--tm-c-accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; }
.tm-ring-value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tm-ring-value strong { font-size: 22px; font-weight: 700; }
.tm-ring-value span { font-size: 11px; color: var(--tm-c-text-3); }

/* ── Upload zone (CSV import) ── */
.tm-upload-zone { border: 1.5px dashed var(--tm-c-border-strong); border-radius: var(--tm-radius-lg); padding: 32px 16px; text-align: center; color: var(--tm-c-text-3); cursor: pointer; transition: border-color var(--tm-transition), background var(--tm-transition); }
.tm-upload-zone:hover, .tm-upload-zone.drag { border-color: var(--tm-c-accent); background: var(--tm-c-accent-bg); color: var(--tm-c-accent-text); }
.tm-upload-zone i { font-size: 30px; display: block; margin-bottom: 10px; }
.tm-upload-zone .tm-uz-sub { font-size: 11px; margin-top: 4px; }

/* ── Calendar ── */
#tmCalendar { max-width: 900px; margin: 0 auto; }
.fc { direction: rtl; font-family: 'Vazirmatn', sans-serif; }

@media (max-width: 720px) {
  .tm-form-grid, .tm-picker-grid { grid-template-columns: 1fr; }
  .tm-modal-backdrop { padding: 0; align-items: flex-end; }
  .tm-modal-box { max-width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
  td.tm-row-actions { display: flex !important; gap: 6px; }
  .tm-toast-wrap { bottom: 12px; left: 12px; right: 12px; }
  .tm-toast { width: 100%; }
}

/* ---------- برنامه‌ریزی روزانه: نمای کارتی روزانه + پنجره‌ی عملیات تسک ----------
   (۴ سپتامبر ۲۰۲۶، طبق درخواست صریح کاربر): «راهی برای فهمیدن اینکه کدام تسک انجام شده وجود
   ندارد» — قبلاً یک جدول تخت بود؛ الان هر روز یک کارت جدا، هر تسک یک ردیف کارتیِ کلیک‌پذیر که
   با کلیک، یک پنجره‌ی عملیات (لینک به جزوه/سوال/ویدیوی همان مبحث + رزرو معلم + تغییر وضعیت)
   باز می‌شود. */
.tm-day-card { background: var(--tm-c-surface); border: 1px solid var(--tm-c-border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.tm-day-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; background: var(--tm-c-bg); border-bottom: 1px solid var(--tm-c-border); }
.tm-day-hdr-title { font-size: 13px; font-weight: 800; }
.tm-day-hdr-count { font-size: 10.5px; font-weight: 700; color: var(--tm-c-text-2); background: var(--tm-c-surface); border: 1px solid var(--tm-c-border-strong); border-radius: 20px; padding: 3px 10px; }

.tm-task-card { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--tm-c-border); cursor: pointer; transition: background var(--tm-transition); }
.tm-task-card:last-child { border-bottom: none; }
.tm-task-card:hover { background: var(--tm-c-bg); }
.tm-task-status-icon { font-size: 22px; flex: none; }
.tm-task-card-main { flex: 1; min-width: 0; }
.tm-task-card-title { font-size: 13.5px; font-weight: 700; }
.tm-task-card-sub { font-size: 11px; color: var(--tm-c-text-3); margin-top: 2px; }
.tm-task-card-time { font-size: 11px; color: var(--tm-c-text-3); flex: none; white-space: nowrap; }
.tm-task-card-chevron { color: var(--tm-c-text-3); flex: none; font-size: 16px; }
.tm-task-card.done .tm-task-card-title { text-decoration: line-through; color: var(--tm-c-text-3); }

/* پنجره‌ی عملیات: شبکه‌ای از دکمه‌های بزرگ با آیکون + عنوان روشن — نه یک منوی متنی فشرده */
.tm-action-sheet-hdr { font-size: 12.5px; color: var(--tm-c-text-2); margin-bottom: 14px; }
.tm-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tm-action-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; border: 1px solid var(--tm-c-border-strong); border-radius: 14px; background: var(--tm-c-surface); cursor: pointer; font-family: inherit; transition: all var(--tm-transition); }
.tm-action-btn:hover { border-color: var(--tm-c-accent); background: var(--tm-c-accent-bg); }
.tm-action-btn i { font-size: 26px; color: var(--tm-c-accent); }
.tm-action-btn span { font-size: 12px; font-weight: 700; color: var(--tm-c-text); }
.tm-action-btn.success i { color: var(--tm-c-success); }
.tm-action-btn.success:hover { border-color: var(--tm-c-success); background: var(--tm-c-success-bg); }
.tm-action-btn.warning i { color: var(--tm-c-warning); }
.tm-action-btn.warning:hover { border-color: var(--tm-c-warning); background: var(--tm-c-warning-bg); }
.tm-action-btn:disabled { opacity: .45; cursor: not-allowed; }
.tm-action-btn:disabled:hover { border-color: var(--tm-c-border-strong); background: var(--tm-c-surface); }

/* 🆕 اضافه‌شده (۶ سپتامبر ۲۰۲۶، طبق درخواست صریح کاربر: امکان کنسل‌کردن تسک با ذکر دلیل). */
.tm-action-btn.danger i { color: var(--tm-c-danger, #dc2626); }
.tm-action-btn.danger:hover { border-color: var(--tm-c-danger, #dc2626); background: var(--tm-c-danger-bg, #fef2f2); }
.tm-cancelled-banner {
    display: flex; align-items: flex-start; gap: 10px; background: var(--tm-c-danger-bg, #fef2f2);
    border: 1px solid var(--tm-c-danger, #dc2626); border-radius: var(--tm-radius); padding: 10px 12px;
    margin-bottom: 14px; font-size: 12px; color: var(--tm-c-danger, #dc2626);
}
.tm-cancelled-banner i { font-size: 18px; margin-top: 2px; }
.tm-cancelled-reason { margin-top: 3px; color: var(--tm-c-text-2); font-size: 11.5px; }

/* 🆕 اضافه‌شده (۹ سپتامبر ۲۰۲۶، طبقِ درخواستِ صریحِ کاربر: «دکمه‌ی پخش برایِ ویدئویِ
   کلاسِ آنلاین، با کنترل‌هایِ کاملِ پخش»). */
.tm-video-player-wrap { margin-top: 14px; border-radius: var(--tm-radius); overflow: hidden; border: 1px solid var(--tm-c-border-strong); background: #000; }
.tm-video-player-hdr { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--tm-c-surface); font-size: 12px; font-weight: 700; color: var(--tm-c-text); }
.tm-video-player-close { border: none; background: transparent; color: var(--tm-c-text-3); cursor: pointer; font-size: 16px; padding: 2px; display: flex; }
.tm-video-player-close:hover { color: var(--tm-c-danger, #dc2626); }
.tm-video-player { display: block; width: 100%; max-height: 60vh; background: #000; }

.tm-cancel-form { display: flex; flex-direction: column; gap: 10px; }
.tm-cancel-form label { font-size: 12px; font-weight: 600; color: var(--tm-c-text-2); }
.tm-cancel-form textarea {
    width: 100%; border: 1px solid var(--tm-c-border-strong); border-radius: var(--tm-radius-sm);
    padding: 8px 10px; font-family: inherit; font-size: 12.5px; resize: vertical;
}
.tm-cancel-form textarea:focus { outline: none; border-color: var(--tm-c-accent); }
.tm-cancel-hint { font-size: 10.5px; color: var(--tm-c-text-3); }

/* 🆕 اضافه‌شده (طبق درخواستِ صریحِ کاربر): ردیفِ دکمه‌های شکلکیِ امتیازِ رضایت. */
.tm-rating-row { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; }
.tm-rating-btn {
    flex: 1;
    padding: 8px 0;
    border-radius: 10px;
    border: 1px solid var(--tm-c-border, #e5e7eb);
    background: #fff;
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}
.tm-rating-btn:hover:not(:disabled) { transform: translateY(-2px); }
.tm-rating-btn:disabled { opacity: .6; cursor: not-allowed; }
.tm-rating-btn.selected { border-color: #6366f1; background: #eef2ff; }
.tm-cancel-actions { display: flex; gap: 8px; }
.tm-cancel-actions .tm-action-btn { flex: 1; padding: 12px 10px; }
.tm-cancel-actions-col { flex-direction: column; }

/* 🆕 اضافه‌شده (۶ سپتامبر ۲۰۲۶، طبق درخواست تکمیلیِ کاربر: پرسیدنِ «آیا مایل به انجام در زمان
   دیگری هستید؟» بعد از کنسل‌کردن یک تسک). */
.tm-reschedule-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 4px 0 6px; }
.tm-reschedule-ask > i { font-size: 30px; color: var(--tm-c-accent); }
.tm-reschedule-ask p { font-size: 12.5px; color: var(--tm-c-text-2); line-height: 1.8; margin: 0; }
.tm-reschedule-ask .tm-cancel-actions { width: 100%; margin-top: 6px; }
.tm-reschedule-done { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 10px 0; }
.tm-reschedule-done > i { font-size: 34px; color: var(--tm-c-success); }
.tm-reschedule-done p { font-size: 12.5px; color: var(--tm-c-text); line-height: 1.8; margin: 0; }
.tm-reschedule-done .tm-action-btn { width: 100%; padding: 12px 10px; }

/* 🆕 نشانگر «کنسل‌شده» روی خودِ ردیف/سلولِ تسک در فهرست روزانه و جدول هفتگی. */
.sh-task-row.cancelled, .sh-slot-task.cancelled { opacity: 0.6; }
.sh-task-cancelled-badge {
    display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700;
    color: var(--tm-c-danger, #dc2626); background: var(--tm-c-danger-bg, #fef2f2);
    border-radius: 20px; padding: 1px 6px; margin-inline-start: 6px;
}

/* 🆕 (Update 14) — استایلِ فهرستِ مشترکِ تسک‌هایِ روز (StudentDailyTaskList). قبلاً فقط در <style>ِ
   StudentHomePage.razor بود؛ چون همین فهرست حالا در DailyReport هم استفاده می‌شود، این‌جا (سراسری) هم
   تعریف شد. مقادیر عیناً همان‌اند. */
.sh-day-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.sh-empty { text-align: center; color: var(--tm-c-text-3, #6b7280); padding: 30px 10px; font-size: 12.5px; }
.sh-task-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid var(--tm-c-border, #e5e7eb); border-radius: var(--tm-radius, 10px); cursor: pointer;
    transition: background .15s, border-color .15s;
}
.sh-task-row:hover { background: var(--tm-c-accent-bg, #eef2ff); border-color: var(--tm-c-accent-border, #c7d2fe); }
.sh-task-row img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.sh-task-title { flex: 1; font-size: 13px; font-weight: 600; }
.sh-task-time { font-size: 11px; color: var(--tm-c-text-3, #6b7280); font-family: 'Courier New', monospace; white-space: nowrap; }
.sh-task-row.class-session { border-color: #c7b8f5; background: #f6f2ff; }
.sh-task-row.class-session:hover { background: #ece3fd; }
.sh-task-cancelled-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--av-fail, #dc2626); margin-inline-start: 6px; }
@media (max-width: 480px) {
    .sh-task-row { gap: 8px; padding: 8px 10px; }
    .sh-task-time { font-size: 10px; }
}

/* 🆕 (Update 18) — ورودِ نرمِ «Bottom Sheet» از پایین رویِ موبایل، مشترک برایِ همه‌ی مودال‌هایِ tm-modal
   (تغییرِ وضعیتِ تسک و سازنده‌ی فرمول) — تا هر دو دقیقاً یکسان رفتار کنند. prefers-reduced-motion رعایت می‌شود. */
@keyframes tmSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (max-width: 720px) {
  .tm-modal-backdrop.open .tm-modal-box { animation: tmSheetUp .26s cubic-bezier(.2,.8,.2,1); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .tm-modal-box::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--tm-c-border-strong, #d1d5db); margin: 8px auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-modal-backdrop.open .tm-modal-box { animation: none; }
}

/* ───────────── 🆕 (Update 27 — بند ۱) «افزودنِ تسک»: اولویت‌دهیِ شخصی ───────────── */
.spd { display: flex; flex-direction: column; gap: 14px; font-size: 13px; }
.spd-loading { padding: 24px; text-align: center; color: var(--tm-c-text-3); }
.spd-loading.small { padding: 10px; }
.spd-spin { display: inline-block; animation: spdSpin .8s linear infinite; }
@keyframes spdSpin { to { transform: rotate(360deg); } }
.spd-step { display: flex; flex-direction: column; gap: 8px; }
.spd-step-hdr { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.spd-no { width: 22px; height: 22px; border-radius: 50%; background: var(--tm-c-accent); color: #fff; display: grid; place-items: center; font-size: 11px; flex-shrink: 0; }
.spd-muted { color: var(--tm-c-text-3); font-weight: 400; font-size: 11.5px; }
.spd-select { width: 100%; padding: 9px 12px; border: 1px solid var(--tm-c-border-strong); border-radius: 10px; font: inherit; background: var(--tm-c-surface); }
.spd-tree { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; padding-inline-end: 4px; }
.spd-chapter { border: 1px solid var(--tm-c-border); border-radius: 10px; background: var(--tm-c-surface); }
.spd-chapter > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none; }
.spd-chapter > summary::-webkit-details-marker { display: none; }
.spd-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.spd-topics { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.spd-topic { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--tm-c-border-strong); cursor: pointer; font-size: 12px; transition: background .15s, border-color .15s; }
.spd-topic.on { background: var(--tm-c-accent-bg); border-color: var(--tm-c-accent-border); color: var(--tm-c-accent-text); }
.spd-topic input { accent-color: var(--tm-c-accent); }
.spd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.spd-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 62px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--tm-c-border-strong); background: var(--tm-c-surface); font: inherit; font-size: 12px; cursor: pointer; }
.spd-chip small { font-size: 10px; color: var(--tm-c-text-3); }
.spd-chip.on { background: var(--tm-c-accent); border-color: var(--tm-c-accent); color: #fff; }
.spd-chip.on small { color: rgba(255,255,255,.8); }
.spd-date { display: flex; align-items: center; gap: 10px; }
.spd-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.spd-seg-btn { display: flex; flex-direction: column; gap: 4px; text-align: start; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--tm-c-border-strong); background: var(--tm-c-surface); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.spd-seg-btn small { font-size: 10.5px; line-height: 1.6; color: var(--tm-c-text-3); }
.spd-seg-btn.on.important { border-color: #f59e0b; background: #fffbeb; }
.spd-seg-btn.on.veryimportant { border-color: #ea580c; background: #fff7ed; }
.spd-seg-btn.on.critical { border-color: #dc2626; background: #fef2f2; }
.spd-row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 18px; }
.spd-stepper { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--tm-c-border-strong); border-radius: 10px; padding: 3px; }
.spd-stepper button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--tm-c-bg); cursor: pointer; }
.spd-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.spd-stepper span { min-width: 34px; text-align: center; font-weight: 800; font-size: 15px; }
.spd-hint { font-size: 11.5px; color: var(--tm-c-text-2); padding-bottom: 8px; }
.spd-alert { display: flex; gap: 6px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--tm-c-accent-bg); color: var(--tm-c-accent-text); font-size: 12.5px; line-height: 1.8; }
.spd-alert.small { padding: 6px 10px; font-size: 11.5px; }
.spd-alert.warn { background: var(--tm-c-warning-bg); color: var(--tm-c-warning-text); }
.spd-alert.error { background: var(--tm-c-danger-bg); color: var(--tm-c-danger-text); }
.spd-preview { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--tm-c-border-strong); padding-top: 12px; }
.spd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.spd-kpis > div { background: var(--tm-c-bg); border-radius: 10px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.spd-kpis b { font-size: 17px; }
.spd-kpis small { font-size: 10.5px; color: var(--tm-c-text-3); }
.spd-kpis .warn b { color: var(--tm-c-warning); }
.spd-kpis .ok b { color: var(--tm-c-success); }
.spd-days { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.spd-day { border: 1px solid var(--tm-c-border); border-radius: 10px; padding: 6px 10px; }
.spd-day-hdr { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.spd-day-hdr small { color: var(--tm-c-text-3); font-weight: 400; margin-inline-start: 6px; }
.spd-item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.spd-time { font-family: 'Courier New', monospace; color: var(--tm-c-text-2); direction: ltr; }
.spd-topic-name { flex: 1; }
.spd-tag { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--tm-c-bg); }
.spd-tag.engine { background: #fff7ed; color: #9a3412; }
.spd-tag.routine { background: #ede9fe; color: #5b21b6; }
.spd-actions { display: flex; gap: 8px; position: sticky; bottom: 0; background: var(--tm-c-surface); padding-top: 8px; }
.spd-actions .tm-action-btn { flex: 1; justify-content: center; }
/* فهرستِ برنامه‌هایِ دستیِ فعال در تبِ هفتگی */
.sh-prio-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.sh-prio-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--tm-c-border); border-inline-start: 3px solid #f59e0b; border-radius: 10px; font-size: 12px; background: var(--tm-c-surface); }
.sh-prio-row .grow { flex: 1; }
.sh-week-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
    .spd-seg { grid-template-columns: 1fr; }
    .spd-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .spd-spin { animation: none; } }

/* 🆕 (Update 31 — D1) برچسبِ سلول‌هایِ قفلِ آزمون/روتین در جدولِ هفتگی: نامِ دقیقِ آزمون + موسسه.
   متنِ بلند در عرضِ سلول کوتاه (…) می‌شود؛ متنِ کامل در Tooltip (title) همان سلول است. */
.sh-ov-label {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.5;
}
.av-st-exam .sh-ov-label { font-weight: 700; }
.sh-slot-cell .sh-ov-label, .upm-slot-cell .sh-ov-label { flex: 1 1 auto; }

/* ══════════ 🆕 (Update 31) مودالِ تسک: ردیفِ اصلی، محتوا با نشانِ وضعیت، نمایشگر، تست‌هایِ مبحثی، آزمونک ══════════ */
.tm-modal-box.wide { max-width: 980px; }
@media (max-width: 640px) {
    .tm-modal-backdrop { padding: 0; align-items: flex-end; }
    .tm-modal-box, .tm-modal-box.wide { max-width: 100%; max-height: 94vh; border-radius: 18px 18px 0 0; }
    .tm-modal-body { padding: 14px; }
}
.tm-primary-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tm-primary-actions .tm-action-btn { padding: 14px 6px; font-size: 13px; font-weight: 600; }
.tm-action-btn.repeat i { color: #7c3aed; }
.tm-action-btn.repeat:hover:not(:disabled) { border-color: #7c3aed; background: #f5f3ff; }
.tm-action-btn:disabled { opacity: .5; cursor: not-allowed; }
.tm-action-btn:focus-visible, .tm-res-btn:focus-visible { outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 2px; }

.tm-section-label { margin: 16px 0 8px; font-size: 11.5px; font-weight: 700; color: var(--tm-c-text-3, #8a8a86); letter-spacing: .2px; }
.tm-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tm-res-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 76px; padding: 12px 6px; border: 1px solid var(--tm-c-border-strong); border-radius: 14px; background: var(--tm-c-surface);
    color: var(--tm-c-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.tm-res-btn i { font-size: 20px; color: var(--tm-c-accent); }
.tm-res-btn:hover { border-color: var(--tm-c-accent-border); background: var(--tm-c-accent-bg); }
.tm-res-btn:active { transform: scale(.98); }
.tm-res-btn.quiz { background: linear-gradient(135deg, #f5f3ff, #eef2ff); border-color: #ddd6fe; }
.tm-res-btn.quiz i { color: #7c3aed; }
.tm-res-btn.quiz:hover { border-color: #a78bfa; }
/* نشانِ دایره‌ایِ وضعیت در گوشه‌ی دکمه */
.tm-res-dot { position: absolute; top: 8px; inset-inline-start: 8px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--tm-c-surface); }
.tm-res-dot.yes { background: #16a34a; box-shadow: 0 0 0 2px var(--tm-c-surface), 0 0 0 4px rgba(22, 163, 74, .18); }
.tm-res-dot.no { background: #dc2626; box-shadow: 0 0 0 2px var(--tm-c-surface), 0 0 0 4px rgba(220, 38, 38, .15); }
.tm-res-dot.loading { background: #9ca3af; animation: tm-dot-pulse 1s ease-in-out infinite; }
@keyframes tm-dot-pulse { 50% { opacity: .35; } }
@media (max-width: 420px) {
    .tm-primary-actions .tm-action-btn span, .tm-res-btn span { font-size: 11.5px; }
    .tm-resource-grid { gap: 6px; }
}

.tm-info-sheet { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin: 8px 0 14px; border-radius: 12px; background: var(--tm-c-bg); font-size: 13px; line-height: 1.9; }
.tm-info-sheet > i { font-size: 22px; color: var(--tm-c-accent); margin-top: 2px; }
.tm-info-sheet p { margin: 0; }
.tm-repeat-steps { margin: 6px 0 0; padding-inline-start: 18px; font-size: 12.5px; color: var(--tm-c-text-2, #555); }

/* ── نمایشگرِ محتوا ── */
.trv { display: flex; flex-direction: column; gap: 10px; }
.trv-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trv-back { border: none; background: var(--tm-c-bg); border-radius: 10px; padding: 7px 12px; font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.trv-back:hover { background: var(--tm-c-border); }
.trv-chips { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: thin; padding-bottom: 2px; }
.trv-chip { flex: none; max-width: 240px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--tm-c-border-strong); background: var(--tm-c-surface); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.trv-chip.on { border-color: var(--tm-c-accent); background: var(--tm-c-accent-bg); color: var(--tm-c-accent-text); font-weight: 700; }
.trv-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trv-chip-tag { font-size: 10px; padding: 1px 6px; border-radius: 999px; }
.trv-chip-tag.topic { background: #dcfce7; color: #15803d; }
.trv-chip-tag.chapter { background: #e0e7ff; color: #3730a3; }
.trv-stage { position: relative; border: 1px solid var(--tm-c-border-strong); border-radius: 14px; overflow: hidden; background: #f3f4f6; min-height: 240px; }
.trv-stage.video { background: #000; }
.trv-frame { display: block; width: 100%; height: min(70vh, 720px); border: 0; background: #fff; }
.trv-img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; object-fit: contain; }
.trv-video { display: block; width: 100%; max-height: 70vh; }
.trv-download { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
    border-radius: 999px; background: rgba(17, 24, 39, .82); color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25); backdrop-filter: blur(6px); transition: background .15s, transform .1s; }
.trv-download:hover { background: #2563eb; color: #fff; }
.trv-download:active { transform: scale(.97); }
.trv-download:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.trv-open { position: absolute; bottom: 10px; left: 10px; z-index: 2; font-size: 11.5px; background: rgba(255, 255, 255, .92); color: #1d4ed8; padding: 5px 10px; border-radius: 999px; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.trv-caption { font-size: 12.5px; color: var(--tm-c-text-2, #555); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trv-muted { color: var(--tm-c-text-3, #999); }
.trv-loading { display: flex; align-items: center; justify-content: center; gap: 8px; height: 260px; color: #e5e7eb; }
.trv-spin, .tmq-spin { animation: tm-spin 1s linear infinite; display: inline-block; }
@keyframes tm-spin { to { transform: rotate(360deg); } }
.trv-filecard { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; text-align: center; background: var(--tm-c-surface); }
.trv-filecard > i { font-size: 48px; color: var(--tm-c-accent); }
.trv-filecard-name { font-weight: 700; }
.trv-filecard-hint { font-size: 12px; color: var(--tm-c-text-3, #999); max-width: 420px; }
.trv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 10px; background: var(--tm-c-accent); color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; }

/* ── تست‌هایِ مبحثی: انتخابِ سطح ── */
.tqp-intro { margin: 10px 0; font-size: 13px; font-weight: 600; }
.tqp-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tqp-level { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; border-radius: 14px; border: 2px solid transparent; font: inherit; cursor: pointer; transition: transform .1s, box-shadow .15s; }
.tqp-level:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.tqp-level i { font-size: 28px; }
.tqp-level-title { font-size: 15px; font-weight: 800; }
.tqp-level-hint { font-size: 11px; opacity: .8; }
.tqp-count { margin-top: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.7); }
.tqp-level.lvl-1 { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.tqp-level.lvl-2 { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.tqp-level.lvl-3 { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.tqp-level.empty { filter: grayscale(.8); opacity: .6; }
.tqp-notice { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--tm-c-warning-bg); color: var(--tm-c-warning-text); font-size: 12.5px; display: flex; gap: 6px; align-items: center; }

/* ── آزمونک ── */
.tmq { outline: none; }
.tmq-intro { text-align: center; }
.tmq-intro-icon { width: 64px; height: 64px; margin: 4px auto 10px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #fff; background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.tmq-intro h3 { margin: 0 0 10px; font-size: 16px; }
.tmq-points { list-style: none; margin: 0 0 16px; padding: 12px 14px; text-align: right; background: var(--tm-c-bg); border-radius: 12px; font-size: 13px; line-height: 2.1; }
.tmq-points i { color: #7c3aed; margin-inline-end: 6px; }
.tmq-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.tmq-actions.spread { justify-content: space-between; }
.tmq-btn { min-height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--tm-c-border-strong); background: var(--tm-c-surface); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tmq-btn.primary { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.tmq-btn:disabled { opacity: .5; cursor: not-allowed; }
.tmq-btn:focus-visible, .tmq-option:focus-visible { outline: 3px solid rgba(124, 58, 237, .35); outline-offset: 2px; }
.tmq-center { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 10px; text-align: center; font-size: 13.5px; }
.tmq-empty i { font-size: 40px; color: var(--tm-c-text-3, #999); }
.tmq-progress { display: flex; gap: 6px; margin-bottom: 8px; }
.tmq-progress span { flex: 1; height: 6px; border-radius: 999px; background: var(--tm-c-border-strong); }
.tmq-progress span.done { background: #a78bfa; }
.tmq-progress span.now { background: #7c3aed; }
.tmq-counter { font-size: 12px; color: var(--tm-c-text-3, #999); margin-bottom: 8px; }
.tmq-question { font-size: 15px; line-height: 2; font-weight: 600; margin-bottom: 14px; }
.tmq-question.small { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.tmq-options { display: grid; gap: 8px; }
.tmq-option { display: flex; align-items: center; gap: 10px; width: 100%; text-align: right; padding: 12px; border-radius: 12px; border: 2px solid var(--tm-c-border-strong); background: var(--tm-c-surface); font: inherit; font-size: 13.5px; cursor: pointer; transition: border-color .12s, background .12s; }
.tmq-option:hover { border-color: #c4b5fd; }
.tmq-option.on { border-color: #7c3aed; background: #f5f3ff; }
.tmq-key { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--tm-c-bg); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.tmq-option.on .tmq-key { background: #7c3aed; color: #fff; }
.tmq-hint { margin-top: 8px; font-size: 12px; color: var(--tm-c-warning-text); text-align: center; }
.tmq-result { text-align: center; margin-bottom: 12px; }
.tmq-score { width: 130px; height: 130px; margin: 0 auto; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 8px solid; }
.tmq-score.high { border-color: #16a34a; color: #15803d; }
.tmq-score.mid { border-color: #d97706; color: #b45309; }
.tmq-score.low { border-color: #dc2626; color: #b91c1c; }
.tmq-score-num { font-size: 28px; font-weight: 900; }
.tmq-score-sub { font-size: 11px; color: var(--tm-c-text-2, #555); }
.tmq-verdict { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; }
.tmq-review { display: grid; gap: 8px; max-height: 42vh; overflow: auto; }
.tmq-review-item { border: 1px solid var(--tm-c-border-strong); border-radius: 12px; padding: 8px 12px; }
.tmq-review-item summary { cursor: pointer; font-size: 13px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.tmq-review-item.ok summary i { color: #16a34a; }
.tmq-review-item.bad summary i { color: #dc2626; }
.tmq-review-body { padding-top: 8px; font-size: 12.5px; line-height: 1.9; }
.tmq-ans { padding: 6px 10px; border-radius: 8px; margin-top: 6px; }
.tmq-ans.ok { background: #f0fdf4; }
.tmq-ans.bad { background: #fef2f2; }
.tmq-explain { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--tm-c-bg); }
@media (max-width: 520px) {
    .tqp-levels { grid-template-columns: 1fr; }
    .tqp-level { flex-direction: row; justify-content: space-between; padding: 12px 14px; }
    .tmq-actions.spread .tmq-btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .tm-res-dot.loading, .trv-spin, .tmq-spin { animation: none; }
    .tqp-level:hover { transform: none; }
}

/* ══ 🆕 Update 33 — سؤال‌ها / پاسخ‌ها در نمایشگرِ محتوایِ تسک ══ */
.trv-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: var(--tm-c-bg); border-radius: 14px; margin-bottom: 10px; }
.trv-role { border: 1px solid transparent; background: transparent; border-radius: 10px; min-height: 40px; font: inherit; font-size: 13px; font-weight: 700; color: var(--tm-c-text-2, #555);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: background .15s, color .15s; }
.trv-role:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 1px; }
.trv-role.on { background: var(--tm-c-surface, #fff); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.trv-role.q.on { color: #4338ca; border-color: #c7d2fe; }
.trv-role.a.on { color: #047857; border-color: #a7f3d0; }
.trv-role-n { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.06); font-size: 11px; display: inline-grid; place-items: center; }
.trv-role-badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-inline-end: 4px; }
.trv-role-badge.q { background: #eef2ff; color: #4338ca; }
.trv-role-badge.a { background: #ecfdf5; color: #047857; }
.trv-jump { margin-inline-start: auto; border: 1px solid; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; background: #fff; }
.trv-jump.a { color: #047857; border-color: #a7f3d0; }
.trv-jump.q { color: #4338ca; border-color: #c7d2fe; }
.trv-empty { padding: 28px 12px; text-align: center; color: var(--tm-c-text-3, #888); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trv-empty .ti { font-size: 28px; }

/* 🆕 (Update 80) «سوالات و پاسخنامه»: مجموعه‌سؤال کنارِ پاسخ‌نامه‌ی خودش */
.tqa { display: flex; flex-direction: column; gap: 10px; }
.tqa-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tqa-sum { font-size: 12px; color: var(--tm-c-text-3, #64748b); }
.tqa-sets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x proximity; }
.tqa-set { flex: 0 0 auto; min-width: 170px; max-width: 240px; text-align: start; border: 1px solid var(--tm-c-border, #e2e8f0); background: var(--tm-c-surface, #fff); border-radius: 12px; padding: 8px 10px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 4px; scroll-snap-align: start; color: inherit; }
.tqa-set:hover { border-color: #a5b4fc; }
.tqa-set.on { border-color: #4338ca; box-shadow: 0 0 0 2px rgba(67,56,202,.15); }
.tqa-set:focus-visible, .tqa-seg button:focus-visible { outline: 2px solid #4338ca; outline-offset: 2px; }
.tqa-set-title { font-weight: 700; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tqa-set-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11px; }
.tqa-has { color: #047857; display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.tqa-no { color: #94a3b8; }
.tqa-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tqa-seg { display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 3px; gap: 2px; }
.tqa-seg button { border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; color: #475569; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; }
.tqa-seg button.on.q { background: #fff; color: #4338ca; box-shadow: 0 1px 2px rgba(15,23,42,.1); }
.tqa-seg button.on.a, .tqa-seg button.on.both { background: #fff; color: #047857; box-shadow: 0 1px 2px rgba(15,23,42,.1); }
.tqa-seg button:disabled { opacity: .45; cursor: not-allowed; }
.tqa-hint { font-size: 12px; color: #94a3b8; }
.tqa-stage-cap { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.tqa-gate { text-align: center; padding: 34px 16px; border: 1.5px dashed #a7f3d0; border-radius: 14px; background: #f0fdf4; color: #065f46; }
.tqa-gate i { font-size: 30px; }
.tqa-gate p { margin: 8px auto 14px; max-width: 42ch; font-size: 13px; }
.tqa-both { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 860px) { .tqa-both { grid-template-columns: 1fr; } .tqa-seg button.both { display: none; } }

/* 🆕 (Update 82) نمایشگرِ PDFِ درون‌کادر (PDF.js) */
.pdfv { display: flex; flex-direction: column; background: #e9edf3; }
.pdfv-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; background: #fff; border-bottom: 1px solid var(--tm-c-border, #e2e8f0); flex-wrap: wrap; }
.pdfv-group { display: inline-flex; align-items: center; gap: 2px; }
.pdfv-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: #334155; font-size: 18px; cursor: pointer; text-decoration: none; }
.pdfv-btn:hover { background: #f1f5f9; }
.pdfv-btn:focus-visible, .pdfv-scroll:focus-visible { outline: 2px solid #4338ca; outline-offset: -2px; }
.pdfv-zoom { min-width: 46px; text-align: center; font-size: 12px; font-weight: 700; color: #475569; font-variant-numeric: tabular-nums; }
.pdfv-page { font-size: 12px; color: #64748b; white-space: nowrap; }
.pdfv-scroll { position: relative; height: min(70vh, 720px); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.pdfv-pages { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 8px 16px; width: max-content; min-width: 100%; box-sizing: border-box; }
.pdfv-sheet { position: relative; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .18); border-radius: 2px; overflow: hidden; }
.pdfv-sheet:not(.ready)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f8fafc, #eef2f7, #f8fafc); background-size: 200% 100%; animation: pdfv-sh 1.2s infinite; }
.pdfv-sheet.stale canvas { filter: blur(.4px); }
/* canvas باید LTR باشد: متنِ PDF با جایگاهِ دقیقِ هر گلیف رسم می‌شود؛ ارثِ direction:rtl چیدمانِ حروف را به‌هم می‌ریخت */
.pdfv-pages { direction: ltr; }
.pdfv-pages canvas { display: block; direction: ltr; }
.pdfv-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; font-size: 13px; color: #475569; }
.pdfv-status[hidden] { display: none; }
.pdfv-status.err { color: #b42318; background: #fff; }
.pdfv-dl { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; background: #4338ca; color: #fff; text-decoration: none; font-weight: 700; }
/* «بزرگ‌کردنِ کادر»: بلندتر، بدونِ تکیه بر Fullscreen API (در WebViewِ اپ هم کار می‌کند) */
.pdfv.pdfv-expanded .pdfv-scroll { height: calc(100dvh - 150px); }
@keyframes pdfv-sh { to { background-position: -200% 0; } }
@media (max-width: 560px) { .pdfv-scroll { height: 62vh; } .pdfv-btn { width: 34px; height: 34px; } .pdfv-page { order: 3; width: 100%; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .pdfv-sheet:not(.ready)::after { animation: none; } }