/* =========================================================
   Become — 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; }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.page-head-row .lede { margin-bottom: 0; }
@media (max-width: 620px) {
  .page-head-row { flex-direction: column; }
  .page-head-row .btn { width: 100%; justify-content: space-between; }
}

.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(59,130,246,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(59,130,246,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(59,130,246,0.28), rgba(59,130,246,0.06)); }
.course-thumb.purple { background: linear-gradient(140deg, rgba(167,139,250,0.28), rgba(167,139,250,0.06)); }
.course-thumb.amber  { background: linear-gradient(140deg, rgba(245,165,36,0.28), rgba(245,165,36,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: #4a9d8e; }
.course-badge.launch { color: #fff; background: var(--grad-primary); border-color: transparent; }
.course-price { font-size: 1.15rem; }
.course-price s { color: var(--text-dimmer); font-weight: 600; font-size: 0.72em; margin-inline-end: 0.2rem; }
.enroll-price s { color: var(--text-dimmer); font-weight: 600; font-size: 0.5em; margin-inline-end: 0.4rem; }
.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: 3rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
@media (min-width: 768px) { .enroll-price { font-size: 3.4rem; } }
.enroll-price small { font-size: 1rem; color: var(--text-dimmer); font-weight: 700; }
.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(59,130,246,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(59,130,246,0.1); border: 1px solid rgba(59,130,246,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(59,130,246,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; }

.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(59,130,246,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(59,130,246,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; }

/* Horizontal scroller for dashboard project / course rows */
.hscroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.6rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.hscroll > * { scroll-snap-align: start; }
.hscroll::-webkit-scrollbar { height: 6px; }
.hscroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.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 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dimmer); font-weight: 800; margin-bottom: 0.5rem; }
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 (max-width: 939px) { .auth-wrap { min-height: auto; display: block; padding: 6rem 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(59,130,246,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-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(59,130,246,0.1); border: 1px solid rgba(59,130,246,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(59,130,246,0.07); border: 1px solid rgba(59,130,246,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(59,130,246,0.16); color: var(--blue-soft); }
.demo-role.teacher { background: rgba(52,211,153,0.16); color: #34d399; }
.demo-role.admin { background: rgba(167,139,250,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(59,130,246,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(59,130,246,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(59,130,246,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(245,165,36,0.1); border: 1px solid rgba(245,165,36,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(59,130,246,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; }

/* =========================================================
   Mobile bottom navigation — thumb-reachable, fixed
   ========================================================= */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 55;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding: 0.4rem 0.2rem calc(0.4rem + env(safe-area-inset-bottom));
  background: var(--nav-bg);
  backdrop-filter: blur(22px);
  border-top: 1px solid var(--border-strong);
  overflow: hidden;
}
@media (min-width: 960px) { .bottom-nav { display: none; } }
.bottom-nav a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.4rem 0.1rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-dimmer);
  border-radius: var(--radius-sm);
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.bottom-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav a svg { width: 21px; height: 21px; flex-shrink: 0; }
.bottom-nav a.is-active { color: var(--blue-soft); }
.bottom-nav a.is-active svg { color: var(--blue-soft); }
.bottom-nav a:active { background: var(--surface); }
body.has-bottom-nav { padding-bottom: 4.6rem; }
@media (min-width: 960px) { body.has-bottom-nav { padding-bottom: 0; } }

/* =========================================================
   Building-construction progress — the platform's signature meter
   Stages: foundation → structure → walls → facade → handover
   ========================================================= */
.build-progress { display: flex; flex-direction: column; gap: 0.9rem; }
.build-frame {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  height: 92px;
  align-items: end;
}
.build-frame .floor {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  transition: background 0.6s var(--ease-soft), border-color 0.6s var(--ease-soft);
}
.build-frame .floor:nth-child(1) { height: 30%; }
.build-frame .floor:nth-child(2) { height: 50%; }
.build-frame .floor:nth-child(3) { height: 68%; }
.build-frame .floor:nth-child(4) { height: 84%; }
.build-frame .floor:nth-child(5) { height: 100%; }
.build-frame .floor.built {
  background: color-mix(in srgb, var(--blue) 22%, var(--card-solid));
  border-color: var(--blue-soft);
}
.build-frame .floor.built::after {
  content: "";
  position: absolute; inset: 3px;
  background:
    linear-gradient(var(--blue-soft) 1px, transparent 1px) 0 0 / 100% 33.33%,
    linear-gradient(90deg, var(--blue-soft) 1px, transparent 1px) 0 0 / 50% 100%;
  opacity: 0.28;
}
.build-frame .floor.current { border-color: var(--amber); }
.build-baseline { height: 3px; background: var(--border-hover); border-radius: 2px; }
.build-stages { display: flex; justify-content: space-between; gap: 0.3rem; font-size: 0.64rem; font-weight: 700; color: var(--text-dimmer); }
.build-stages span { flex: 1; text-align: center; }
.build-stages span.on { color: var(--blue-soft); }
.build-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.build-caption strong { font-size: 1.05rem; }
.build-caption small { font-size: 0.76rem; color: var(--text-dimmer); }

/* =========================================================
   Projects
   ========================================================= */
.proj-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 640px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .proj-grid { grid-template-columns: repeat(3, 1fr); } }
.proj-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.proj-thumb {
  aspect-ratio: 16 / 10;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(var(--radius-lg) - 0.4rem) calc(var(--radius-lg) - 0.4rem) 0 0;
  background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 24%, var(--card-solid)), var(--card-solid));
  overflow: hidden;
}
.proj-thumb.residential { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 24%, var(--card-solid)), var(--card-solid)); }
.proj-thumb.commercial  { background: linear-gradient(150deg, color-mix(in srgb, var(--amber) 22%, var(--card-solid)), var(--card-solid)); }
.proj-thumb.interior    { background: linear-gradient(150deg, color-mix(in srgb, var(--purple) 26%, var(--card-solid)), var(--card-solid)); }
.proj-thumb.urban       { background: linear-gradient(150deg, color-mix(in srgb, #4a9d8e 24%, var(--card-solid)), var(--card-solid)); }
.proj-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--border-strong) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, var(--border-strong) 1px, transparent 1px) 0 0 / 22px 22px;
  opacity: 0.4;
}
.proj-thumb svg { position: relative; width: 42px; height: 42px; color: var(--text-dim); opacity: 0.9; }
.proj-status {
  position: absolute; top: 0.7rem; inset-inline-start: 0.7rem;
  padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.64rem; font-weight: 800;
  background: var(--card-solid); border: 1px solid var(--border-strong);
}
.proj-status.active { color: var(--blue-soft); }
.proj-status.review { color: var(--amber-soft); }
.proj-status.done { color: #4a9d8e; }
.proj-body { padding: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.proj-body h3 { font-size: 1.02rem; }
.proj-meta { font-size: 0.76rem; color: var(--text-dimmer); font-weight: 700; display: flex; gap: 0.7rem; flex-wrap: wrap; }
.proj-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding-top: 0.8rem; margin-top: auto; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--text-dimmer); font-weight: 700; }
.proj-actions { display: flex; gap: 0.4rem; }
.icon-btn {
  width: 2rem; height: 2rem; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  transition: all 0.3s var(--ease);
}
.icon-btn:hover { border-color: var(--border-hover); color: var(--text); }
.icon-btn svg { width: 14px; height: 14px; }

/* modal for add/edit project */
.modal-back {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
}
.modal-back.open { opacity: 1; pointer-events: auto; }
.modal {
  width: min(100%, 460px); max-height: 90vh; overflow-y: auto;
  background: var(--card-solid); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 1.6rem;
  transform: translateY(12px); transition: transform 0.3s var(--ease);
}
.modal-back.open .modal { transform: translateY(0); }
.modal h3 { font-size: 1.15rem; margin-bottom: 1.2rem; }
.modal .field select, .modal .field input, .modal .field textarea {
  width: 100%; padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text); font: inherit;
}
.modal-actions { display: flex; gap: 0.6rem; margin-top: 0.5rem; }
.modal-actions .btn { flex: 1; justify-content: center; }

/* =========================================================
   Skeleton loading
   ========================================================= */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  animation: sk 1.4s infinite;
}
@keyframes sk { 100% { transform: translateX(100%); } }
.sk-card { height: 260px; }
.sk-line { height: 12px; margin-bottom: 0.6rem; }
.sk-line.short { width: 55%; }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* =========================================================
   Empty states — blueprint illustration
   ========================================================= */
.empty-blueprint {
  width: 120px; height: 96px; margin: 0 auto 1.2rem;
  border: 1.5px dashed var(--border-hover); border-radius: 0.4rem;
  position: relative;
  background:
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 16px 16px;
}
.empty-blueprint::before {
  content: "";
  position: absolute; left: 18%; bottom: 0; width: 40%; height: 55%;
  border: 1.5px solid var(--blue-soft); border-bottom: none;
}
.empty-blueprint::after {
  content: "";
  position: absolute; right: 16%; bottom: 0; width: 26%; height: 78%;
  border: 1.5px solid var(--amber-soft); border-bottom: none;
}