/* =========================================================
   Masar — app screens (catalogue, course, lesson, dashboard, auth)
   Extends the tokens defined in style.css
   ========================================================= */

/* The login CTA lives in the mobile menu below the nav breakpoint,
   otherwise it overflows the pill on small screens. */
.nav-login { display: none; }
@media (min-width: 960px) { .nav-login { display: inline-flex; } }

.page-head { padding-top: 8.5rem; padding-bottom: 2.5rem; }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 0.8rem; }

.crumbs { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--text-dimmer); margin-bottom: 1.2rem; flex-wrap: wrap; }
.crumbs a { transition: color 0.3s var(--ease); }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { opacity: 0.5; }
html[dir="rtl"] .crumbs .sep { transform: scaleX(-1); display: inline-block; }

/* ---------- Toolbar: search + filters ---------- */
.toolbar { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.search-box { position: relative; display: flex; align-items: center; }
.search-box svg { position: absolute; inset-inline-start: 1.1rem; width: 17px; height: 17px; color: var(--text-dimmer); pointer-events: none; }
.search-box input {
  width: 100%; padding: 0.95rem 1.2rem; padding-inline-start: 3rem;
  border-radius: 999px; background: var(--card-solid);
  border: 1px solid var(--border); color: var(--text);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.search-box input::placeholder { color: var(--text-dimmer); }
.search-box input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.14); }

.filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filter-label { font-size: 0.72rem; font-weight: 800; color: var(--text-dimmer); text-transform: uppercase; letter-spacing: 0.12em; margin-inline-end: 0.3rem; }
html[dir="rtl"] .filter-label { letter-spacing: 0; }
.chip {
  padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
  background: var(--card); border: 1px solid var(--border); color: var(--text-dim);
  transition: all 0.4s var(--ease); cursor: pointer;
}
.chip:hover { border-color: var(--border-hover); color: var(--text); }
.chip.active { background: var(--grad-primary); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -10px rgba(var(--accent-rgb),0.6); }

.result-count { font-size: 0.85rem; color: var(--text-dimmer); margin-bottom: 1.4rem; }

/* ---------- Course grid + card ---------- */
.course-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 640px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .course-grid { grid-template-columns: repeat(3, 1fr); } }

.course-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.course-card-link { display: block; height: 100%; transition: transform 0.5s var(--ease); }
.course-card-link:hover { transform: translateY(-4px); }
.course-thumb {
  aspect-ratio: 16/9; border-radius: calc(var(--radius-lg) - 0.4rem) calc(var(--radius-lg) - 0.4rem) 0 0;
  display: flex; align-items: center; justify-content: center; font-size: 2.6rem;
  position: relative; overflow: hidden;
}
.course-thumb.blue   { background: linear-gradient(140deg, rgba(var(--accent-rgb),0.28), rgba(var(--accent-rgb),0.06)); }
.course-thumb.purple { background: linear-gradient(140deg, rgba(var(--accent-rgb),0.28), rgba(var(--accent-rgb),0.06)); }
.course-thumb.amber  { background: linear-gradient(140deg, rgba(var(--warm-rgb),0.28), rgba(var(--warm-rgb),0.06)); }
.course-badge {
  position: absolute; top: 0.8rem; inset-inline-start: 0.8rem;
  padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.66rem; font-weight: 800;
  background: var(--card-solid); border: 1px solid var(--border-strong);
}
.course-badge.bestseller { color: var(--amber-soft); }
.course-badge.new { color: #34d399; }
.course-body { padding: 1.3rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.course-meta-top { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--text-dimmer); font-weight: 700; }
.course-body h3 { font-size: 1.02rem; line-height: 1.35; }
.course-body p { font-size: 0.85rem; color: var(--text-dim); flex: 1; }
.course-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding-top: 0.9rem; border-top: 1px solid var(--border); margin-top: auto; }
.course-rating { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; }
.course-rating .star { color: var(--amber); }
.course-rating small { color: var(--text-dimmer); font-weight: 600; }
.course-price { font-size: 1rem; font-weight: 800; }
.course-price small { font-size: 0.72rem; color: var(--text-dimmer); font-weight: 600; }
.course-progress-strip { padding: 0 1.3rem 1.1rem; }
.course-progress-strip .progress-track { margin-top: 0.5rem; }
.course-progress-strip .pct { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-dimmer); font-weight: 700; }

.empty-state { text-align: center; padding: 4rem 1rem; color: var(--text-dimmer); }
.empty-state .big { font-size: 2.4rem; margin-bottom: 0.8rem; }

/* ---------- Course detail ---------- */
.course-hero { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 980px) { .course-hero { grid-template-columns: 1.55fr 1fr; gap: 2.5rem; } }
.course-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin-bottom: 1rem; }
.course-stats-row { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.4rem; font-size: 0.85rem; color: var(--text-dim); }
.course-stats-row div { display: flex; align-items: center; gap: 0.45rem; }
.course-stats-row svg { width: 15px; height: 15px; color: var(--blue-soft); }

.enroll-card { position: relative; }
@media (min-width: 980px) { .enroll-card { position: sticky; top: 6.5rem; } }
.enroll-inner { padding: 1.6rem; }
.enroll-price { font-size: 2.2rem; font-weight: 800; }
.enroll-price small { font-size: 0.9rem; color: var(--text-dimmer); font-weight: 600; }
.enroll-inner .btn { width: 100%; justify-content: center; margin-top: 1.2rem; }
.enroll-list { display: grid; gap: 0.6rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.enroll-list li { display: flex; gap: 0.6rem; align-items: center; font-size: 0.84rem; color: var(--text-dim); }
.enroll-list svg { width: 15px; height: 15px; color: var(--blue-soft); flex-shrink: 0; }

.outcome-grid { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
@media (min-width: 700px) { .outcome-grid { grid-template-columns: 1fr 1fr; } }
.outcome-grid li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem; color: var(--text-dim); }
.outcome-grid svg { width: 17px; height: 17px; color: #34d399; flex-shrink: 0; margin-top: 0.18rem; }

/* Curriculum */
.unit-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.unit-title { font-weight: 800; font-size: 0.96rem; }
.unit-meta { font-size: 0.74rem; color: var(--text-dimmer); font-weight: 600; margin-top: 0.2rem; }
.lesson-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.75rem 1.5rem; font-size: 0.87rem; color: var(--text-dim);
  border-top: 1px solid var(--border); transition: background 0.3s var(--ease);
}
.lesson-row:hover { background: var(--card); color: var(--text); }
.lesson-row .l-icon { width: 1.6rem; height: 1.6rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; background: var(--surface); flex-shrink: 0; }
.lesson-row .l-icon svg { width: 12px; height: 12px; }
.lesson-row .l-title { flex: 1; }
.lesson-row .l-min { font-size: 0.75rem; color: var(--text-dimmer); font-weight: 700; }
.lesson-row.done .l-icon { background: rgba(52,211,153,0.16); color: #34d399; }
.type-quiz { color: var(--purple); }
.type-project { color: var(--amber-soft); }

/* ---------- Lesson player ---------- */
.player-wrap { padding-top: 6.2rem; padding-bottom: 3rem; }
.player-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
@media (min-width: 1040px) { .player-grid { grid-template-columns: 1fr 340px; gap: 1.6rem; } }

.stage {
  aspect-ratio: 16/9; border-radius: var(--radius-md);
  background: linear-gradient(150deg, #131a3d, #080b1c);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; border: 1px solid var(--border);
}
:root[data-theme="light"] .stage { background: linear-gradient(150deg, #e8ecf8, #f7f9fe); }
.stage-play {
  width: 4.6rem; height: 4.6rem; border-radius: 50%;
  background: var(--grad-primary); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 40px -14px rgba(var(--accent-rgb),0.7);
  transition: transform 0.5s var(--ease);
}
.stage-play:hover { transform: scale(1.07); }
.stage-play svg { width: 22px; height: 22px; color: #fff; margin-inline-start: 3px; }
html[dir="rtl"] .stage-play svg { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: 3px; }
.stage-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--blue-soft); opacity: 0.16; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.stage.is-playing .stage-bg { opacity: 0.3; transform: scale(1.06); }
.stage.is-playing .stage-play { opacity: 0; pointer-events: none; }
.stage.is-playing:hover .stage-play { opacity: 1; pointer-events: auto; }
.stage-play { transition: transform 0.5s var(--ease), opacity 0.4s var(--ease); position: relative; z-index: 2; }
.stage-badge {
  position: absolute; top: 0.9rem; inset-inline-start: 0.9rem; z-index: 2;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); background: var(--card-solid);
  padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--border);
}
html[dir="rtl"] .stage-badge { letter-spacing: 0; }

/* Player transport */
.player-controls { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.9rem; padding: 0.65rem 0.9rem; border-radius: 999px; background: var(--card-solid); border: 1px solid var(--border); }
.pc-btn { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text); flex-shrink: 0; transition: background 0.35s var(--ease); }
.pc-btn:hover { background: var(--border-strong); }
.pc-time { font-size: 0.75rem; font-weight: 700; color: var(--text-dimmer); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 2.6rem; text-align: center; }
.pc-track { position: relative; flex: 1; height: 6px; border-radius: 999px; background: var(--border-strong); cursor: pointer; touch-action: none; }
.pc-fill { height: 100%; border-radius: 999px; background: var(--grad-primary); width: 0%; }
.pc-knob { position: absolute; top: 50%; inset-inline-start: 0; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(var(--shadow-color),0.5); transform: translate(-50%, -50%); pointer-events: none; }
html[dir="rtl"] .pc-knob { transform: translate(50%, -50%); }

.player-unit { font-size: 0.74rem; color: var(--text-dimmer); font-weight: 700; margin-bottom: 0.25rem; }
.prog-line { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 700; color: var(--text-dimmer); margin-top: 1.2rem; }
.player-nav { display: flex; justify-content: space-between; gap: 0.8rem; margin-top: 2.2rem; flex-wrap: wrap; }

.meta-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.meta-chips span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border-radius: 999px; background: var(--card); border: 1px solid var(--border); font-size: 0.78rem; font-weight: 600; color: var(--text-dim); }
.meta-chips svg { color: var(--blue-soft); }

.ai-scope { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.22); font-size: 0.78rem; color: var(--text-dim); margin-bottom: 1rem; }
.ai-scope svg { color: var(--blue-soft); flex-shrink: 0; }
.ai-log .bubble.ai { line-height: 1.65; }
.ai-log .bubble.ai em { color: var(--text); font-style: italic; }
.ai-log .bubble.ai strong { color: var(--text); }

.note-box { width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius-md); background: var(--card-solid); border: 1px solid var(--border); color: var(--text); font: inherit; resize: vertical; }
.note-box:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.14); }
.note-hint { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--text-dimmer); margin-top: 0.5rem; }
.note-hint svg { color: #34d399; }

/* ---------- Reviews ---------- */
.stars-pick { gap: 0.3rem; }
.stars-pick span { cursor: pointer; }

/* ---------- Lesson bookmarks ---------- */
.bm-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 1.6rem; margin-bottom: 0.7rem; }
.bm-head h4 { font-size: 0.92rem; }
.bm-list { display: flex; flex-direction: column; gap: 0.5rem; }
.bm-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--border); }
.bm-row .btn { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.bm-input { flex: 1; min-width: 0; background: none; border: none; color: var(--text); font: inherit; font-size: 0.85rem; padding: 0.3rem 0.2rem; }
.bm-input:focus { outline: none; }

.side-head { display: flex; align-items: center; gap: 0.5rem; padding: 1.1rem 1.1rem 0.4rem; font-weight: 800; font-size: 0.95rem; }
.side-head svg { color: var(--blue-soft); }

.ico { flex-shrink: 0; vertical-align: middle; }

.player-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; flex-wrap: wrap; }
.player-bar h1 { font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
.player-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border); margin-top: 1.8rem; overflow-x: auto; }
.tab {
  padding: 0.8rem 1.1rem; font-size: 0.87rem; font-weight: 700; color: var(--text-dimmer);
  border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.35s var(--ease);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--blue); }
.tab-panel { display: none; padding-top: 1.6rem; }
.tab-panel.active { display: block; }
.tab-panel p { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 0.9rem; }
.tab-panel h4 { margin-bottom: 0.7rem; font-size: 1rem; }

.res-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--border); margin-bottom: 0.6rem; font-size: 0.88rem; }
.res-row svg { width: 16px; height: 16px; color: var(--blue-soft); flex-shrink: 0; }
.res-row .grow { flex: 1; }
.res-row small { color: var(--text-dimmer); font-size: 0.74rem; }

/* Curriculum sidebar */
.side-curriculum { max-height: 70vh; overflow-y: auto; }
.side-unit-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dimmer); padding: 1rem 1.1rem 0.5rem; }
html[dir="rtl"] .side-unit-title { letter-spacing: 0; }
.side-lesson {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  padding: 0.7rem 1.1rem; font-size: 0.83rem; color: var(--text-dim);
  text-align: start; transition: background 0.3s var(--ease); cursor: pointer;
}
.side-lesson:hover { background: var(--card); }
.side-lesson.current { background: rgba(var(--accent-rgb),0.12); color: var(--text); font-weight: 700; box-shadow: inset 2px 0 0 var(--blue); }
html[dir="rtl"] .side-lesson.current { box-shadow: inset -2px 0 0 var(--blue); }
.side-check {
  width: 1.15rem; height: 1.15rem; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--border-hover); display: flex; align-items: center; justify-content: center;
  transition: all 0.35s var(--ease);
}
.side-check svg { width: 9px; height: 9px; opacity: 0; }
.side-lesson.done .side-check { background: #34d399; border-color: #34d399; }
.side-lesson.done .side-check svg { opacity: 1; color: #05231a; }
.side-lesson .s-min { font-size: 0.72rem; color: var(--text-dimmer); font-weight: 600; }

/* AI panel inside lesson */
.ai-panel { display: flex; flex-direction: column; gap: 0.8rem; }
.ai-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ai-quick button {
  padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: var(--card); border: 1px solid var(--border); color: var(--text-dim);
  transition: all 0.35s var(--ease);
}
.ai-quick button:hover { border-color: var(--blue); color: var(--text); }
.ai-log { display: flex; flex-direction: column; gap: 0.7rem; min-height: 120px; }
.ai-form { display: flex; gap: 0.6rem; }
.ai-form input {
  flex: 1; padding: 0.8rem 1.1rem; border-radius: 999px;
  background: var(--card-solid); border: 1px solid var(--border); color: var(--text);
}
.ai-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.14); }
.ai-form button { width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--grad-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-form button svg { width: 16px; height: 16px; color: #fff; }
html[dir="rtl"] .ai-form button svg { transform: scaleX(-1); }

/* ---------- Dashboard ---------- */
.dash-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 2rem; }
.dash-hello h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 0.35rem; }
.dash-hello p { color: var(--text-dim); font-size: 0.92rem; }

.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin-bottom: 2.4rem; }
@media (min-width: 860px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.kpi { padding: 1.3rem; }
.kpi .k-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dimmer); font-weight: 800; margin-bottom: 0.5rem; }
.kpi .k-label svg { color: var(--blue-soft); flex-shrink: 0; }
html[dir="rtl"] .kpi .k-label { letter-spacing: 0; }
.kpi .k-value { font-size: 1.75rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
.kpi .k-value svg { color: var(--amber); }
.badge-ico { display: flex; justify-content: center; margin-bottom: 0.5rem; color: var(--amber); }
.course-rating .star, .course-stats-row .star { color: var(--amber); }
.stars svg, .testi-stars svg { width: 14px; height: 14px; color: var(--amber); }
.stars, .testi-stars { display: flex; gap: 0.15rem; }
.streak-num, .badge-count { display: flex; align-items: center; gap: 0.5rem; }
.streak-num svg { color: var(--amber); }
.badge-count svg { color: var(--amber); }
.cert-seal svg, .gami-name svg { color: currentColor; }
.gami-name { display: flex; align-items: center; gap: 0.4rem; }
.gami-name svg { color: var(--amber); width: 16px; height: 16px; }
.badge-row .b svg { color: var(--amber-soft); width: 18px; height: 18px; }

.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.section-title h2 { font-size: 1.25rem; }
.section-title a { font-size: 0.84rem; color: var(--blue-soft); font-weight: 700; }

.continue-row { display: flex; align-items: center; gap: 1.1rem; padding: 1.3rem; flex-wrap: wrap; }
.continue-icon { width: 3.4rem; height: 3.4rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; }
.continue-body { flex: 1; min-width: 180px; }
.continue-body h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.continue-body .next { font-size: 0.8rem; color: var(--text-dimmer); }

.task-list { display: grid; gap: 0.6rem; }
.task-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.95rem 1.2rem; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--border); font-size: 0.89rem; }
.task-item .t-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.task-item .grow { flex: 1; }
.task-item .t-tag { font-size: 0.7rem; font-weight: 800; padding: 0.2rem 0.6rem; border-radius: 999px; }

/* ---------- Auth ---------- */
.auth-wrap { min-height: 100dvh; display: grid; grid-template-columns: 1fr; align-items: center; padding: 7rem 0 3rem; }
@media (min-width: 940px) { .auth-wrap { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.auth-card { padding: 2rem; }
.auth-card h1 { font-size: 1.7rem; margin-bottom: 0.5rem; }
.auth-card > p { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1.8rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.45rem; color: var(--text-dim); }
.field input {
  width: 100%; padding: 0.85rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--card-solid); border: 1px solid var(--border); color: var(--text);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.14); }
.field input.invalid { border-color: #fb7185; box-shadow: 0 0 0 4px rgba(251,113,133,0.12); }
.field .err { font-size: 0.76rem; color: #fb7185; margin-top: 0.4rem; display: none; }
.field .err.show { display: block; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 0.5rem; }
.auth-divider { display: flex; align-items: center; gap: 0.8rem; margin: 1.2rem 0; color: var(--text-dimmer); font-size: 0.8rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-alt { text-align: center; font-size: 0.85rem; color: var(--text-dimmer); margin-top: 1.4rem; }
.auth-alt a { color: var(--blue-soft); font-weight: 700; }
.auth-aside { display: none; }
@media (min-width: 940px) { .auth-aside { display: block; } }
.auth-aside h2 { font-size: 1.9rem; margin-bottom: 1rem; }
.auth-aside .cred-list { margin-top: 1.6rem; }
.form-note { padding: 0.85rem 1.1rem; border-radius: var(--radius-sm); background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.25); font-size: 0.8rem; color: var(--text-dim); margin-bottom: 1.4rem; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 1.5rem; inset-inline-start: 50%;
  transform: translate(-50%, 1.5rem); opacity: 0; pointer-events: none;
  background: var(--card-solid); border: 1px solid var(--border-strong);
  padding: 0.85rem 1.4rem; border-radius: 999px; font-size: 0.86rem; font-weight: 700;
  box-shadow: 0 18px 40px -18px rgba(var(--shadow-color), 0.7); z-index: 60;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
html[dir="rtl"] .toast { transform: translate(50%, 1.5rem); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
html[dir="rtl"] .toast.show { transform: translate(50%, 0); }

/* Real uploaded video takes over the stage from the simulated preview */
.stage #realVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: none; z-index: 3; }
.stage.has-real #realVideo { display: block; }
.stage.has-real .stage-bg,
.stage.has-real .stage-play { display: none; }
.stage.has-real .stage-badge { z-index: 4; }

/* ---------- Demo credentials panel on the login page ---------- */
.demo-box { border-radius: var(--radius-md); background: rgba(var(--accent-rgb),0.07); border: 1px solid rgba(var(--accent-rgb),0.22); padding: 1rem 1.1rem; margin-bottom: 1.5rem; }
.demo-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 800; color: var(--text); margin-bottom: 0.8rem; }
.demo-head svg { color: var(--blue-soft); flex-shrink: 0; }
.demo-list { display: grid; gap: 0.4rem; }
.demo-row {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm);
  background: var(--card-solid); border: 1px solid var(--border);
  text-align: start; transition: all 0.3s var(--ease); cursor: pointer;
}
.demo-row:hover { border-color: var(--blue); transform: translateY(-1px); }
.demo-row code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.78rem; color: var(--text); background: var(--surface);
  padding: 0.15rem 0.45rem; border-radius: 0.35rem; direction: ltr;
}
.demo-role { font-size: 0.66rem; font-weight: 800; padding: 0.18rem 0.5rem; border-radius: 999px; white-space: nowrap; min-width: 4.4rem; text-align: center; }
.demo-role.student { background: rgba(var(--accent-rgb),0.16); color: var(--blue-soft); }
.demo-role.teacher { background: rgba(52,211,153,0.16); color: #34d399; }
.demo-role.admin { background: rgba(var(--accent-rgb),0.18); color: var(--purple); }
.demo-go { margin-inline-start: auto; color: var(--text-dimmer); display: flex; }
.demo-row:hover .demo-go { color: var(--blue-soft); }
.demo-note { font-size: 0.72rem; color: var(--text-dimmer); margin-top: 0.7rem; line-height: 1.5; }

/* Assistant grounded in the teacher's own material */
.ai-scope.grounded { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.28); }
.ai-scope.grounded svg { color: #34d399; }
.ai-points { margin: 0.6rem 0 0.4rem; padding-inline-start: 1.1rem; }
.ai-points li { margin-bottom: 0.35rem; color: var(--text-dim); }
.ai-src { font-size: 0.72rem; color: #34d399; font-weight: 700; }

/* ---------- Account ---------- */
.acc-avatar { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--grad-primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; flex-shrink: 0; }

/* ---------- Checkout ---------- */
.buy-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
@media (min-width: 900px) { .buy-grid { grid-template-columns: 1.3fr 1fr; } }
.pay-methods { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pay-m { display: flex; align-items: center; gap: 0.45rem; padding: 0.65rem 1rem; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--border); color: var(--text-dim);
  font-size: 0.84rem; font-weight: 700; transition: all 0.35s var(--ease); }
.pay-m:hover { border-color: var(--border-hover); color: var(--text); }
.pay-m.active { background: rgba(var(--accent-rgb),0.12); border-color: var(--blue); color: var(--text); }

/* ---------- Assignments (student view) ---------- */
.asg-card { padding: 1.2rem; border-radius: var(--radius-md); background: var(--card-solid);
  border: 1px solid var(--border); margin-bottom: 0.9rem; }
.asg-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  flex-wrap: wrap; margin-bottom: 0.4rem; }
.asg-head strong { font-size: 0.95rem; }
.asg-brief { color: var(--text-dim); font-size: 0.89rem; line-height: 1.65; margin: 0.6rem 0; }
.asg-form { margin-top: 0.9rem; }

/* ---------- Live comments ---------- */
.cmt-list { display: flex; flex-direction: column; gap: 0.7rem; max-height: 260px; overflow-y: auto; }
.cmt-row { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm); background: var(--card); }
.cmt-row.unread { background: rgba(var(--accent-rgb),0.1); }
.cmt-av { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--grad-primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; flex-shrink: 0; }
.cmt-form { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.cmt-form input { flex: 1; padding: 0.65rem 1rem; border-radius: 999px; background: var(--card-solid);
  border: 1px solid var(--border); color: var(--text); }
.cmt-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.14); }

/* Free-preview banner on locked courses */
.preview-bar { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.8rem 1.1rem; border-radius: var(--radius-md); margin-bottom: 1.2rem;
  background: rgba(var(--warm-rgb),0.1); border: 1px solid rgba(var(--warm-rgb),0.28);
  font-size: 0.86rem; color: var(--text-dim); }
.preview-bar svg { color: var(--amber-soft); flex-shrink: 0; }
.preview-bar .btn { margin-inline-start: auto; }

/* Escalate to the instructor */
.ask-teacher { margin-top: 0.9rem; padding: 0.8rem 1rem; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--border); }
.ask-teacher summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  font-size: 0.85rem; font-weight: 700; color: var(--text-dim); list-style: none; }
.ask-teacher summary::-webkit-details-marker { display: none; }
.ask-teacher summary:hover { color: var(--text); }
.ask-teacher summary svg { color: var(--blue-soft); }
.ask-teacher .qmeta { margin: 0.6rem 0 0.5rem; }

/* ---------- Course hub (enrolled view) ---------- */
.hub-head { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.hub-ico { width: 4rem; height: 4rem; border-radius: 1.1rem; aspect-ratio: auto; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; }
.hub-title { flex: 1; min-width: 220px; }
.hub-title h1 { font-size: clamp(1.35rem, 3vw, 1.9rem); margin-bottom: 0.3rem; }

.hub-progress { padding: 1.1rem 1.3rem; border-radius: var(--radius-md);
  background: var(--card-solid); border: 1px solid var(--border); margin-bottom: 1.4rem; }
.hub-prog-top { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.84rem; color: var(--text-dim); margin-bottom: 0.5rem; }
.hub-prog-top strong { font-size: 1.05rem; color: var(--text); }

.hub-tabs { margin-top: 0; margin-bottom: 1.6rem; }
.hub-tabs .tab { display: inline-flex; align-items: center; gap: 0.45rem; }
.hub-tabs .tab svg { opacity: 0.8; }
.hub-tabs .tab em { font-style: normal; font-size: 0.68rem; font-weight: 800;
  padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--surface); color: var(--text-dimmer); }
.hub-tabs .tab.active em { background: rgba(var(--accent-rgb),0.18); color: var(--blue-soft); }

.hub-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
@media (min-width: 900px) { .hub-grid { grid-template-columns: 1.4fr 1fr; } }

.glance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.glance > div { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem;
  border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--border); }
.glance span { color: var(--blue-soft); }
.glance b { font-size: 1.25rem; font-weight: 800; }
.glance small { font-size: 0.72rem; color: var(--text-dimmer); }

/* Locked rows on the sales view */
.lesson-row.locked { opacity: 0.75; cursor: default; }
.lesson-row.locked .l-icon { color: var(--text-dimmer); }
.l-free { font-size: 0.7rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 999px;
  background: rgba(52,211,153,0.16); color: #34d399; white-space: nowrap; }

/* ---------- Student live room ---------- */
.live-room { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
@media (min-width: 1040px) { .live-room { grid-template-columns: 1fr 330px; } }
.live-room .stage-live { aspect-ratio: 16/9; }
.live-room #feed { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #05070f; display: none; }
.live-room .stage-live.has-cam #feed { display: block; }

/* Ask bar — a question box that sits right under the live video, so a
   student never has to hunt for the side chat (or scroll past it on a
   narrow screen) to reach the instructor. */
.ask-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.9rem;
  padding: 0.4rem;
  padding-inline-start: 0.95rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ask-bar:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.ask-bar-ico { display: flex; flex: none; color: var(--muted); }
.ask-bar input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font: inherit;
}
.ask-bar .btn { flex: none; border-radius: 999px; }
.ask-hint { margin: 0.5rem 0.4rem 0; }

@media (max-width: 520px) {
  .ask-bar { flex-wrap: wrap; border-radius: 1rem; padding-inline-start: 0.9rem; }
  .ask-bar input { flex-basis: 100%; order: 1; }
  .ask-bar-ico { display: none; }
  .ask-bar .btn { order: 2; margin-inline-start: auto; }
}

/* The embedded live room fills the stage; Jitsi renders into the iframe.
   The stage must establish the containing block, otherwise inset:0 walks
   up to the page wrapper and the iframe spills past the stage. */
.stage-live { position: relative; }
.room-frame { position: absolute; inset: 0; display: none; overflow: hidden; }
.room-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.stage-live.in-room .room-frame,
.stage-live.is-live .room-frame { display: block; }
.stage-live.in-room video,
.stage-live.is-live #feed { display: none; }

/* A 16/9 slice is too short for the Jitsi UI (tiles + toolbar) on a
   laptop, and much too short on a phone. */
.stage-live.in-room, .stage-live.is-live { min-height: 440px; }
@media (max-width: 640px) {
  .stage-live.in-room, .stage-live.is-live { min-height: 320px; }
}

.invite-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
  padding: 0.6rem 0.9rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.8rem;
}
.invite-row input {
  flex: 1;
  min-width: 12rem;
  padding: 0.45rem 0.7rem;
  background: var(--card-solid);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  direction: ltr;
  text-align: left;
}

/* Shown only when the conference has not actually connected — a denied
   camera prompt otherwise looks exactly like a broken page. */
.room-state {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.85rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.6;
}

.room-actions {
  display: flex; align-items: center; gap: 0.7rem;
  flex-wrap: wrap; margin-top: 0.7rem;
}
.room-actions .qmeta { flex: 1; min-width: 14rem; }

/* ---- Live class lobby ---- */
.class-card {
  padding: 1.3rem 1.4rem 1.2rem;
  border-radius: var(--radius-md, 20px);
  background: var(--card);
  border: 1px solid var(--border);
}
.class-card.is-live { border-color: color-mix(in srgb, #ef4444 45%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 10%, transparent); }
.class-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.class-card h1 { font-size: 1.35rem; margin: 0.15rem 0 0; }
.join-block { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1.1rem 0 0.6rem; }
.join-meta { display: flex; flex-direction: column; gap: 0.25rem; }
.join-warn { color: var(--amber); display: inline-flex; align-items: center; gap: 0.35rem; }
.btn-lg { padding: 0.9rem 1.5rem; font-size: 1rem; }
.meet-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.meet-row input {
  flex: 1; min-width: 14rem; padding: 0.55rem 0.8rem;
  background: var(--card-solid); border: 1px solid var(--border); border-radius: 0.6rem;
  color: var(--text); font: inherit; font-size: 0.86rem; direction: ltr; text-align: left;
}
.chat-state {
  margin-inline-start: auto; font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.55rem;
  border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted);
}
.chat-state.online { background: color-mix(in srgb, #22c55e 18%, transparent); color: #16a34a; }
.chat-state.offline, .chat-state.unsupported { background: color-mix(in srgb, #ef4444 16%, transparent); color: #dc2626; }
.chat-row.from-teacher .chat-who { color: var(--blue); }
.up-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.up-tools .qmeta { flex-basis: 100%; }

/* ---- Lesson assistant: notes, quiz, status ---- */
.ai-scope { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ai-badge { margin-inline-start: auto; font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.ai-badge.live { background: color-mix(in srgb, #22c55e 18%, transparent); color: #16a34a; }
.ai-badge.local { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.ai-notes h4 { margin: 0.2rem 0 0.3rem; font-size: 0.98rem; }
.ai-notes h5 { margin: 0.8rem 0 0.25rem; font-size: 0.86rem; color: var(--blue); }
.ai-notes .ai-points { margin-top: 0.2rem; }
.ai-notes dl { margin: 0.3rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.7rem; }
.ai-notes dt { font-weight: 700; color: var(--text); }
.ai-notes dd { margin: 0; color: var(--text-dim); }
.ai-remember { margin-top: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 0.7rem; background: color-mix(in srgb, var(--blue) 10%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); }
.ai-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
.ai-quiz .qz { padding: 0.8rem 0; border-top: 1px solid var(--border); }
.ai-quiz .qz:first-of-type { border-top: 0; padding-top: 0.2rem; }
.ai-quiz .qz-q { font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.ai-quiz .qz-opts { display: grid; gap: 0.4rem; }
.ai-quiz .qz-opt { text-align: start; padding: 0.55rem 0.8rem; border-radius: 0.6rem; border: 1px solid var(--border); background: var(--card-solid); color: var(--text); font: inherit; cursor: pointer; }
.ai-quiz .qz-opt:hover { border-color: var(--blue); }
.ai-quiz .qz-opt.right { border-color: #22c55e; background: color-mix(in srgb, #22c55e 14%, transparent); }
.ai-quiz .qz-opt.wrong { border-color: #ef4444; background: color-mix(in srgb, #ef4444 12%, transparent); }
.ai-quiz .qz-why { margin-top: 0.5rem; font-size: 0.84rem; color: var(--text-dim); }
.ai-quiz .qz-score { margin-top: 0.8rem; font-weight: 700; }
.ai-log .bubble.ai p { margin: 0 0 0.5rem; }
.ai-log .bubble.ai p:last-child { margin-bottom: 0; }

/* ---------- AI Tutor (ai-tutor.html) ---------- */
.tutor-page { display: flex; flex-direction: column; min-height: calc(100dvh - 10rem); }
.tutor-head { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 1.2rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.tutor-head-ico {
  width: 2.9rem; height: 2.9rem; border-radius: 1rem; flex-shrink: 0;
  background: var(--grad-primary); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -12px var(--blue);
}
.tutor-head-text { flex: 1; min-width: 0; }
.tutor-head-text h2 { font-size: 1.2rem; margin: 0 0 0.15rem; }
.tutor-head-text .qmeta { margin: 0; }
#tutorNewChat { flex-shrink: 0; }

.tutor-log { display: flex; flex-direction: column; gap: 1.1rem; flex: 1; min-height: 40vh; padding-bottom: 1rem; }

.tutor-msg { display: flex; gap: 0.7rem; max-width: 100%; }
.tutor-msg.user { flex-direction: row-reverse; }
.tutor-avatar {
  width: 2.1rem; height: 2.1rem; border-radius: 0.7rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800;
}
.tutor-avatar.ai { background: var(--grad-primary); color: #fff; }
.tutor-avatar.user { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.tutor-msg-col { display: flex; flex-direction: column; gap: 0.3rem; max-width: min(74ch, 82%); }
.tutor-msg.user .tutor-msg-col { align-items: flex-end; }
.tutor-msg-meta { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.72rem; color: var(--text-dimmer); padding-inline: 0.2rem; }
.tutor-msg-name { font-weight: 700; color: var(--text-dim); }
.tutor-bubble {
  padding: 0.85rem 1.1rem; border-radius: 1.1rem; font-size: 0.9rem; line-height: 1.7;
  animation: bubble-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.tutor-msg.ai .tutor-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 0.3rem; }
html[dir="rtl"] .tutor-msg.ai .tutor-bubble { border-bottom-left-radius: 1.1rem; border-bottom-right-radius: 0.3rem; }
.tutor-msg.user .tutor-bubble { background: var(--grad-primary); color: #fff; border-bottom-right-radius: 0.3rem; }
html[dir="rtl"] .tutor-msg.user .tutor-bubble { border-bottom-right-radius: 1.1rem; border-bottom-left-radius: 0.3rem; }
.tutor-bubble p { margin: 0 0 0.55rem; }
.tutor-bubble p:last-child { margin-bottom: 0; }
.tutor-bubble .ai-points { margin: 0.3rem 0; padding-inline-start: 1.2rem; }

.tutor-composer-wrap {
  position: sticky; bottom: 0.9rem; z-index: 5; margin-top: 1rem;
  padding: 0.9rem; border-radius: var(--radius-lg, 1.4rem);
  background: var(--card-solid); border: 1px solid var(--border); box-shadow: var(--premium-shadow, var(--shadow-2));
}
.tutor-quick { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.tutor-chip {
  padding: 0.45rem 0.85rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  background: var(--card); border: 1px solid var(--border); color: var(--text-dim);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.tutor-chip:hover { border-color: var(--blue); color: var(--text); }
.tutor-composer { display: flex; align-items: flex-end; gap: 0.6rem; }
.tutor-composer textarea {
  flex: 1; resize: none; max-height: 160px; min-height: 2.6rem; padding: 0.7rem 1rem;
  border-radius: 1rem; background: var(--card); border: 1px solid var(--border); color: var(--text);
  font: inherit; font-size: 0.92rem; line-height: 1.5;
}
.tutor-composer textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.14); }
.tutor-composer textarea:disabled { opacity: 0.6; }
.tutor-send {
  width: 2.9rem; height: 2.9rem; border-radius: 50%; flex-shrink: 0;
  background: var(--grad-primary); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -10px var(--blue); transition: transform 0.2s ease, opacity 0.2s ease;
}
.tutor-send svg { color: #fff; }
html[dir="rtl"] .tutor-send svg { transform: scaleX(-1); }
.tutor-send:hover:not(:disabled) { transform: translateY(-1px); }
.tutor-send:disabled { opacity: 0.55; }

@media (max-width: 1023px) {
  .tutor-composer-wrap { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .tutor-head { gap: 0.6rem; }
  .tutor-head-text h2 { font-size: 1.05rem; }
  .tutor-head-text .qmeta { font-size: 0.76rem; }
  #tutorNewChat span { display: none; }
  .tutor-msg-col { max-width: 88%; }
  .tutor-quick { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.2rem; }
  .tutor-chip { white-space: nowrap; }
}

.badge-locked { opacity: 0.38; filter: grayscale(1); }
a.task-item { text-decoration: none; color: inherit; }

.up-progress { flex-basis: 100%; display: flex; align-items: center; gap: 0.6rem; margin-top: 0.3rem; }
.up-progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--border-strong); overflow: hidden; }
.up-progress-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--grad-primary, linear-gradient(90deg, var(--blue), var(--purple))); transition: width 0.3s ease; }
.up-tools .tselect { padding: 0.45rem 0.6rem; font-size: 0.78rem; }

/* the student's own questions and the instructor's replies, on the lesson page */
.my-q-head { font-size: 0.78rem; font-weight: 700; color: var(--text-dimmer); display: flex; align-items: center; gap: 0.35rem; margin: 0.6rem 0 0.4rem; }
.my-q { padding: 0.7rem 0.9rem; border-radius: 0.8rem; background: var(--card); border: 1px solid var(--border); margin-bottom: 0.5rem; }
.my-q.answered { border-color: color-mix(in srgb, #34d399 40%, var(--border)); }
.my-q-text { font-size: 0.88rem; color: var(--text); }
.my-q-reply { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); font-size: 0.88rem; color: var(--text-dim); line-height: 1.6; }
.my-q-label { display: inline-block; font-size: 0.68rem; font-weight: 800; color: #34d399; margin-inline-end: 0.4rem; }


/* Grid children may never force the column wider than the screen
   (a scrolling tab strip has a wide min-content size otherwise). */
.player-grid > *, .live-room > *, .hub-grid > *, .buy-grid > *, .course-hero > *, .auth-wrap > *, .kpi-grid > * { min-width: 0; }
.tabs { flex-wrap: nowrap; }
@media (max-width: 640px) {
  .player-wrap { padding-top: 5.4rem; }
  .player-bar { flex-direction: column; align-items: stretch; }
  .player-actions .btn { flex: 1; justify-content: center; }
  .player-nav .btn { flex: 1; justify-content: center; }
}