/* ==========================================================
   DARSLAR BO'LIMI — STILLAR (.ls- prefiksi)
   Mavjud CSS o'zgaruvchilarini ishlatadi: dark/light mos.
   ========================================================== */

/* ---------- UMUMIY ---------- */
.ls-section-head {
  margin-bottom: 24px;
}
.ls-section-head h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.ls-section-head p {
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---------- DAVOM ETTIRISH (joriy dars) — yengil, toza karta ---------- */
.ls-continue-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 10px;
}
.ls-continue-head h4 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ls-continue-head span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
}
.ls-continue {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 24px;
  border-radius: 24px;
  margin-bottom: 32px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  color: var(--text);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  animation: lsFadeUp 0.45s var(--bounce) both;
}
.ls-continue::after {
  content: '';
  position: absolute;
  top: -70px;
  right: -50px;
  width: 220px;
  height: 220px;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.ls-continue-info {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.ls-continue-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.ls-continue-course {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 3px;
}
.ls-continue-text h3 {
  font-size: 1.12rem;
  font-weight: 800;
  margin-bottom: 2px;
  line-height: 1.3;
}
.ls-continue-sub {
  color: var(--muted);
  font-size: 0.9rem;
}
.ls-continue-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.ls-continue-meta span {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.ls-continue-meta .ls-continue-xp {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
}
.ls-continue-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-grow: 1;
  max-width: 300px;
  min-width: 180px;
}
.ls-continue-bar {
  flex: 1;
  height: 9px;
  border-radius: 99px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  overflow: hidden;
}
.ls-continue-bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transition: width 0.8s var(--bounce);
}
.ls-continue-pct {
  font-weight: 800;
  font-size: 0.95rem;
  white-space: nowrap;
}
/* Yakunlangan holat — nishonlash kartasi */
.ls-continue.ls-continue-done {
  border-color: color-mix(in srgb, var(--success) 32%, var(--border));
}
.ls-continue.ls-continue-done .ls-continue-icon {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}
.ls-continue.ls-continue-done .ls-continue-text h3 {
  color: var(--success);
}
/* Global smart CTA — pill, gradient (learning app style) */
.btn.ls-btn-continue {
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--secondary) 45%, var(--primary)));
  color: #fff;
  font-weight: 700;
  border: none;
  white-space: nowrap;
  min-height: 42px;
  padding: 10px 22px;
  border-radius: 99px;
  transition: transform 0.25s var(--bounce), box-shadow 0.25s ease, background 0.2s;
}
.btn.ls-btn-continue:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 30%, transparent);
}
.btn.ls-btn-continue:active {
  transform: translateY(0) scale(0.97);
}
.ls-btn-arrow {
  display: inline-block;
  transition: transform 0.25s var(--bounce);
}
.ls-btn-continue:hover .ls-btn-arrow {
  transform: translateX(5px);
}
.ls-course-head-actions .btn:hover .ls-btn-arrow,
.ls-course-card:hover .ls-btn-arrow {
  transform: translateX(400px);
}

/* ---------- KURSLAR — ixcham stacked learning list ---------- */
/* Katta 4-column grid YO'Q: kartalar bir-birining ostida, gorizontal va yumaloq */
.ls-courses-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 880px;
}
.ls-course-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 26px;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.25s var(--bounce), box-shadow 0.25s var(--bounce), border-color 0.25s;
  animation: lsFadeUp 0.5s var(--bounce) both;
  overflow: hidden;
  min-width: 0;
}
.ls-course-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-focus);
  box-shadow: var(--shadow-soft);
}
.ls-course-card:active {
  transform: translateY(-1px) scale(0.995);
}
.ls-course-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ls-color, var(--primary)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ls-color, var(--primary)) 26%, transparent);
  flex-shrink: 0;
}
.ls-course-id {
  flex: 1;
  min-width: 0;
}
.ls-course-id h4 {
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.ls-course-tagline {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ls-course-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
/* O'ng tomon: faqat holat doirasi (✓ yoki mini progress ring + %).
   Alohida tugma YO'Q — butun karta clickable, status pill faqat holat. */
.ls-course-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}
/* ---------- KURS SAHIFASI (darslar ro'yxati) — progress bar (saqlangan) ---------- */
.ls-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  overflow: hidden;
}
.ls-progress-track span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transition: width 0.9s var(--bounce);
}
.ls-progress-pct {
  font-size: 0.85rem;
  font-weight: 700;
  min-width: 42px;
  text-align: right;
}
/* ---------- KURS SAHIFASI (darslar ro'yxati) ---------- */
.ls-course-head {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  margin-bottom: 24px;
  animation: lsFadeUp 0.4s var(--bounce) both;
  overflow: hidden;           /* ichki elementlar radiusli chetlardan chiqmaydi */
  max-width: 100%;
}
.ls-course-head-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  font-size: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ls-color, var(--primary)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ls-color, var(--primary)) 32%, transparent);
  flex-shrink: 0;
}
.ls-course-head-info {
  flex: 1 1 220px;   /* 220px gacha siqiladi, undan keyin wrap — mobil 320px ham xavfsiz */
  min-width: 0;
}
.ls-course-head-info h3 {
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.ls-course-head-info > p {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 12px;
}
.ls-course-head-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.ls-course-back {
  align-self: flex-start;
}
.ls-level-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--primary-soft);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 99px;
  white-space: nowrap;
  justify-content: center;
}
.ls-lessons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* ---------- DARS KARTALARI (holatlar) ---------- */
.ls-lesson-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.22s var(--bounce), border-color 0.22s, box-shadow 0.22s;
  animation: lsFadeUp 0.45s var(--bounce) both;
  overflow: hidden;   /* .ls-state-ico dekor belgisi (bottom:-6px right:-6px) kartadan chiqmaydi */
  min-width: 0;
}
.ls-lesson-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-focus);
  box-shadow: var(--shadow-soft);
}
.ls-lesson-card:active {
  transform: translateY(-1px) scale(0.99);
}
.ls-lesson-num {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
  background: var(--primary-soft);
  color: var(--text);
  border: 1px solid var(--border);
  position: relative;
}
.ls-lesson-num .ls-state-ico {
  position: absolute;
  bottom: -6px;
  right: -6px;
  font-size: 0.75rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.ls-lesson-info {
  flex: 1;
  min-width: 0;
}
.ls-lesson-info h5 {
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ls-lesson-info p {
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ls-lesson-arrow {
  color: var(--muted);
  font-size: 1.05rem;
  transition: transform 0.2s, color 0.2s;
  flex-shrink: 0;
}
.ls-lesson-card:hover .ls-lesson-arrow {
  transform: translateX(4px);
  color: var(--primary);
}

/* HOLAT: qulflangan */
.ls-lesson-card.ls-locked {
  opacity: 0.62;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.ls-lesson-card.ls-locked:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}
.ls-lesson-card.ls-locked:active {
  transform: none;
}
.ls-lesson-card.ls-locked:hover .ls-lesson-arrow {
  transform: none;
  color: var(--muted);
}
.ls-lesson-card.ls-locked .ls-lesson-num {
  background: var(--bg-alt);
}

/* HOLAT: tugallangan */
.ls-lesson-card.ls-completed {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
}
.ls-lesson-card.ls-completed .ls-lesson-num {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.ls-lesson-card.ls-completed .ls-state-ico {
  color: var(--success);
}

/* HOLAT: joriy (keyingi o'rganiladigan) */
.ls-lesson-card.ls-current {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow: var(--glow);
}
.ls-lesson-card.ls-current .ls-lesson-num {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.ls-lesson-card.ls-current .ls-state-ico {
  color: var(--primary);
}
.ls-lesson-card.ls-current::after {
  content: 'Joriy dars';
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  padding: 2px 8px;
  border-radius: 99px;
}
/* ---------- DARS KO'RISH SAHIFASI ---------- */
.ls-viewer-wrap {
  max-width: min(1280px, 100%);   /* desktopda kontent kengroq — ortiqcha bo'sh joy yo'q */
  width: 100%;
  margin: 0 auto;
  animation: lsFadeUp 0.4s var(--bounce) both;
}
.ls-viewer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.ls-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  padding: 9px 16px;
  border-radius: 99px;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.ls-back-btn:hover {
  color: var(--text);
  border-color: var(--border-focus);
  transform: translateX(-3px);
}
.ls-viewer-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.ls-viewer-hero {
  padding: 32px 44px 26px;
  border-bottom: 1px solid var(--border);
  /* Gradient butun hero bo'ylab cho'ziladi — o'ng chetda shaffof "qora zona" qolmaydi */
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--ls-color, var(--primary)) 12%, transparent) 0%,
    color-mix(in srgb, var(--ls-color, var(--primary)) 4%, transparent) 100%);
}
.ls-viewer-hero .ls-viewer-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ls-viewer-crumb .ls-chip {
  background: color-mix(in srgb, var(--ls-color, var(--primary)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ls-color, var(--primary)) 30%, transparent);
  color: var(--text);
  padding: 4px 12px;
  border-radius: 99px;
  font-weight: 600;
}
.ls-viewer-hero h3 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.3;
  overflow-wrap: break-word;
}
.ls-viewer-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--muted);
}
.ls-viewer-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ls-viewer-body {
  padding: 32px 44px;
}
/* Placeholder (kontent hali qo'shilmagan) */
.ls-placeholder {
  text-align: center;
  padding: 40px 20px;
}
.ls-placeholder-ico {
  width: 92px;
  height: 92px;
  margin: 0 auto 20px;
  border-radius: 24px;
  font-size: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  animation: lsFloat 3.2s ease-in-out infinite;
}
.ls-placeholder h4 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.ls-placeholder p {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.6;
}
/* Real kontent bloklari (kelajakdagi content uchun) */
.ls-content-block {
  margin-bottom: 22px;
}
.ls-content-block h5 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ls-content-block p {
  color: var(--text);
  line-height: 1.7;
  font-size: 0.95rem;
  white-space: pre-wrap;
}
.ls-content-code {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.86rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  color: var(--secondary);
}
.ls-content-task {
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: 0.92rem;
  line-height: 1.6;
}
.ls-viewer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 44px;
  border-top: 1px solid var(--border);
}
.ls-complete-note {
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 300px;
}
/* ---------- BILIM DARAJASI MODAL ---------- */
.ls-level-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 2px 2px;
}
.ls-level-modal-body > p.ls-modal-sub {
  color: var(--muted);
  font-size: 0.92rem;
}
.ls-level-option {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  width: 100%;
  padding: 18px;
  border-radius: var(--radius-sm);
  background: var(--card-hover);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s var(--bounce), box-shadow 0.2s;
}
.ls-level-option:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--glow);
}
.ls-level-option.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.ls-level-emoji {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.ls-level-option h5 {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.ls-level-option p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}
.ls-level-option .ls-level-check {
  margin-left: auto;
  color: var(--primary);
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.ls-level-option.selected .ls-level-check {
  opacity: 1;
}
.ls-diagnostic-progress {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  margin: 14px 0 8px;
}
.ls-diagnostic-question {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.45;
  margin-bottom: 14px;
}
.ls-diagnostic-options {
  display: grid;
  gap: 8px;
}
.ls-diagnostic-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.ls-diagnostic-option:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.ls-diagnostic-option > span {
  color: var(--primary);
  font-weight: 800;
  min-width: 22px;
}
.ls-diagnostic-feedback {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.88rem;
}

/* ---------- QULFLANGAN DARS MODAL ---------- */
.ls-locked-body {
  text-align: center;
  padding: 10px 4px;
}
.ls-locked-ico {
  width: 84px;
  height: 84px;
  margin: 0 auto 16px;
  border-radius: 22px;
  font-size: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  animation: lsShake 0.5s ease 0.15s 1;
}
.ls-locked-body h4 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.ls-locked-body p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 14px;
}
.ls-locked-prev {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--primary-soft);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 99px;
  margin-bottom: 4px;
}

/* ---------- SOZLAMALAR MODAL ---------- */
.ls-settings-current {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ls-settings-danger {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}

/* ---------- EMPTY STATE ---------- */
.ls-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.ls-empty .ls-empty-ico {
  font-size: 3rem;
  margin-bottom: 12px;
}
.ls-empty h4 {
  color: var(--text);
  font-weight: 700;
  margin-bottom: 6px;
}
.ls-empty p {
  font-size: 0.9rem;
}

/* ---------- ANIMATSIYALAR ---------- */
@keyframes lsFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes lsFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes lsShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .ls-courses-grid,
  .ls-lessons-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .ls-courses-grid,
  .ls-lessons-grid {
    grid-template-columns: 1fr;
  }
  .ls-continue {
    flex-direction: column;
    align-items: stretch;
  }
  .ls-continue-progress {
    max-width: none;
  }
  .ls-course-head {
    flex-direction: column;
    align-items: stretch;
  }
  .ls-course-head-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ls-viewer-body,
  .ls-viewer-footer {
    padding: 20px 18px;
  }
  .ls-viewer-hero {
    padding: 22px 18px 18px;
  }
}


/* ==========================================================
   UX TAKOMILLASHTIRISHLAR — profil dropdown, sidebar, animatsiyalar
   ========================================================== */

/* ---------- PROFIL DROPDOWN (avatar menyusi) ---------- */
.ux-user-wrap {
  position: relative;
}
.ux-user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 250px;
  background: var(--card);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  z-index: 240;
  /* Yopiq holat — ochilish/yopilish transition orqali (reverse animatsiya) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.25s ease, transform 0.25s var(--bounce), visibility 0.25s;
}
.ux-user-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.ux-user-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}
.ux-user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ux-user-meta strong {
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ux-user-meta span {
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ux-user-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 8px;
}
.ux-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.ux-menu-item:hover {
  background: var(--card-hover);
  transform: translateX(3px);
}
.ux-menu-item:active {
  transform: scale(0.98);
}
.ux-menu-ico {
  width: 24px;
  text-align: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: transform 0.25s var(--bounce);
}
.ux-menu-item:hover .ux-menu-ico {
  transform: scale(1.15);
}
.ux-menu-danger {
  color: var(--danger);
}
.ux-menu-danger:hover {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
/* Chiqish modal matnlari */
.ux-logout-question {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.ux-logout-note {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}
/* .btn-success mavjud emas edi — tugallangan dars tugmasi uchun */
.btn-success {
  background: linear-gradient(135deg, var(--success), #34d399);
  color: #fff;
}
.btn-success:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--success) 35%, transparent);
}
.btn-success:disabled {
  opacity: 0.75;
  cursor: default;
}

/* ---------- SIDEBAR ANIMATSIYALAR (qo'shimcha — mavjud stillar buzilmaydi) ---------- */
.sidebar .nav-item .nav-icon {
  display: inline-block;
  transition: transform 0.25s var(--bounce);
}
.sidebar .nav-item:hover .nav-icon {
  transform: scale(1.18);
}
.sidebar .nav-item.active .nav-icon {
  transform: scale(1.1);
}
/* Active sahifa indikatori — chap tomonda silliq chiziq */
.sidebar .nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.95);
  animation: lsIndicatorIn 0.35s var(--bounce) both;
}
@keyframes lsIndicatorIn {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

/* ---------- PAGE TRANSITION (faqat darslar sahifalari) ---------- */
@keyframes lsPageIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
#page-lessons.active .ls-section-head,
#page-lessons.active .ls-courses-grid,
#page-lessonCourse.active #lsCourseContainer,
#page-lessonView.active #lsLessonContainer {
  animation: lsPageIn 0.5s var(--bounce) both;
}

/* ---------- QULFLANGAN KARTA SHAKE ---------- */
.ls-lesson-card.ls-shake {
  animation: lsShakeCard 0.45s ease;
}
@keyframes lsShakeCard {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* ---------- JORIY DARS — yengil pulse/glow ---------- */
.ls-lesson-card.ls-current .ls-lesson-num {
  animation: lsCurrentPulse 2.8s ease-in-out infinite;
}
@keyframes lsCurrentPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
  50% { box-shadow: 0 0 14px 3px color-mix(in srgb, var(--primary) 32%, transparent); }
}

/* ---------- BILIM DARAJASI BADGE — fade/slide kirish ---------- */
.ls-course-head .ls-level-chip {
  animation: lsChipIn 0.5s var(--bounce) 0.15s both;
}
@keyframes lsChipIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ==========================================================
   DARSLAR 2-BOSQICH TIZIMI — kontent, test, natija
   ========================================================== */

/* ---------- 📚 DARS KONTENTI ---------- */
.ls-content-intro {
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.93rem;
  line-height: 1.65;
  margin-bottom: 22px;
  color: var(--text);
}
.ls-content-section {
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--border);
  animation: lsSectionIn 0.45s var(--bounce) both;
}
.ls-content-section:last-of-type {
  border-bottom: none;
  margin-bottom: 8px;
}
.ls-content-sec-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.12rem;
  font-weight: 800;
  margin-bottom: 14px;
}
.ls-content-sec-title > span:last-child {
  overflow-wrap: break-word;
}
.ls-sec-num {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ls-sec-num.kp {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  color: var(--warning);
}
.ls-content-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  overflow-wrap: break-word;
}
.ls-inline-code {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.84em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 7px;
  color: var(--secondary);
  white-space: nowrap;
}
.ls-content-codeblock {
  margin: 18px 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  max-width: 100%;
}
.ls-code-lang {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--muted);
  padding: 8px 14px;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border-bottom: 1px solid var(--border);
}
.ls-content-code {
  margin: 0;
  padding: 16px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text);
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}
.ls-content-codenote {
  padding: 12px 14px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
  border-top: 1px dashed var(--border);
}
.ls-content-codenote .ls-inline-code {
  color: var(--secondary);
}
.ls-content-result {
  background: color-mix(in srgb, var(--success) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 16px 0;
}
.ls-content-result-label {
  font-weight: 800;
  color: var(--success);
}
.ls-content-note {
  background: color-mix(in srgb, var(--warning) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-top: 16px;
}
.ls-content-keypoints {
  background: var(--card-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-top: 6px;
}
.ls-content-keypoints ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ls-content-keypoints li {
  font-size: 0.9rem;
  line-height: 1.6;
  padding-left: 22px;
  position: relative;
}
.ls-content-keypoints li::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 800;
}
@keyframes lsSectionIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- HOLAT BELGISI (viewer hero) ---------- */
.ls-status-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  white-space: nowrap;
}
.ls-status-badge.reading {
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
.ls-status-badge.ready {
  color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--secondary) 30%, transparent);
}
.ls-status-badge.done {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}

/* ---------- READ FOOTER (CTA) ---------- */
.ls-read-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 44px 26px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.ls-read-hint {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.55;
}
.ls-read-hint.ok {
  color: var(--success);
  font-weight: 600;
}
.ls-btn-test {
  animation: lsPopIn 0.35s var(--bounce) both;
}
.ls-btn-test:hover {
  transform: translateY(-2px) scale(1.02);
}
.ls-btn-test:active {
  transform: scale(0.97);
}
@keyframes lsPopIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
/* ---------- 🧪 TEST UI ---------- */
.ls-quiz-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  max-width: 380px;
}
.ls-quiz-progress .ls-progress-track {
  height: 10px;
}
.ls-quiz-progress-text {
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
}
.ls-quiz-questioncard {
  background: var(--card-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 22px;
}
.ls-anim-quiz {
  animation: lsQuizIn 0.35s var(--bounce) both;
}
@keyframes lsQuizIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.ls-quiz-qnum {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  padding: 3px 12px;
  border-radius: 99px;
  margin-bottom: 12px;
}
.ls-quiz-question {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 18px;
  white-space: pre-line;
}
.ls-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ls-quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1.5px solid var(--border);
  cursor: pointer;
  font-size: 0.93rem;
  color: var(--text);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s var(--bounce);
}
.ls-quiz-option:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: translateX(3px);
}
.ls-quiz-option:active:not(:disabled) {
  transform: scale(0.99);
}
.ls-quiz-option:disabled {
  cursor: default;
}
.ls-opt-letter {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ls-opt-text {
  flex: 1;
  line-height: 1.5;
}
.ls-opt-mark {
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.ls-opt-mark.ok { color: var(--success); }
.ls-opt-mark.bad { color: var(--danger); }
/* To'g'ri javob — yashil feedback */
.ls-quiz-option.ls-opt-correct {
  border-color: color-mix(in srgb, var(--success) 60%, transparent);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  animation: lsCorrectPulse 0.45s ease;
}
.ls-quiz-option.ls-opt-correct .ls-opt-letter {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
@keyframes lsCorrectPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.015); }
  100% { transform: scale(1); }
}
/* Noto'g'ri javob — qizil shake */
.ls-quiz-option.ls-opt-wrong {
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  animation: lsShakeOpt 0.4s ease;
}
.ls-quiz-option.ls-opt-wrong .ls-opt-letter {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
@keyframes lsShakeOpt {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
.ls-quiz-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}
.ls-quiz-hint {
  margin-top: 16px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}
/* ---------- 🏆 NATIJA EKRANI ---------- */
.ls-result-hero {
  text-align: center;
  padding: 34px 30px 28px;
}
.ls-result-hero.pass {
  background: linear-gradient(140deg, color-mix(in srgb, var(--success) 14%, transparent), transparent 70%);
}
.ls-result-hero.fail {
  background: linear-gradient(140deg, color-mix(in srgb, var(--danger) 12%, transparent), transparent 70%);
}
.ls-result-emoji {
  font-size: 3.4rem;
  margin-bottom: 10px;
  animation: lsPopIn 0.5s var(--bounce) both;
}
.ls-result-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin: 14px 0;
}
.ls-result-frac {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--muted);
}
.ls-result-percent {
  font-size: 2.6rem;
  font-weight: 800;
  background: linear-gradient(120deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lsPopIn 0.55s var(--bounce) 0.1s both;
}
.ls-result-badge {
  display: inline-block;
  font-weight: 800;
  font-size: 1rem;
  padding: 8px 22px;
  border-radius: 99px;
  animation: lsPopIn 0.5s var(--bounce) 0.2s both;
}
.ls-result-badge.ok {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
}
.ls-result-badge.bad {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}
.ls-result-note {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}
.ls-reward-chips {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.ls-reward-chip {
  font-weight: 800;
  font-size: 0.95rem;
  padding: 8px 18px;
  border-radius: 99px;
  animation: lsChipPop 0.45s var(--bounce) both;
}
.ls-reward-chip.xp {
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  animation-delay: 0.3s;
}
.ls-reward-chip.coin {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  animation-delay: 0.45s;
}
@keyframes lsChipPop {
  from { opacity: 0; transform: translateY(8px) scale(0.85); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ls-unlock-banner {
  text-align: center;
  font-size: 0.95rem;
  padding: 14px;
  margin: 0 30px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--success) 40%, transparent);
  color: var(--success);
  animation: lsPopIn 0.5s var(--bounce) 0.35s both;
}

/* ---------- 📋 JAVOBLAR TAHLILI ---------- */
.ls-review-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 14px;
}
.ls-review-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--card);
}
.ls-review-item.wrong {
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 5%, transparent);
}
.ls-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.8rem;
  font-weight: 700;
}
.ls-review-head .ok { color: var(--success); }
.ls-review-head .bad { color: var(--danger); }
.ls-review-num {
  color: var(--muted);
}
.ls-review-q {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 8px;
  white-space: pre-line;
}
.ls-review-line {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 4px;
  line-height: 1.5;
}
.ls-review-line.good {
  color: var(--success);
}
.ls-review-expl {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  font-size: 0.87rem;
  line-height: 1.6;
}
.ls-result-actions {
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------- REDUCED MOTION (accessibility) ---------- */
@media (prefers-reduced-motion: reduce) {
  .ls-course-card,
  .ls-lesson-card,
  .ls-continue,
  .ls-course-head,
  .ls-viewer-wrap,
  .ls-section-head,
  .ls-courses-grid,
  #lsCourseContainer,
  #lsLessonContainer,
  .ls-level-chip,
  .ls-level-option,
  .ls-locked-ico,
  .ls-placeholder-ico,
  .ux-user-dropdown,
  .ux-menu-item,
  .ux-menu-ico,
  .ls-btn-arrow,
  .btn.ls-btn-continue,
  .sidebar .nav-item .nav-icon,
  .sidebar .nav-item.active::before,
  .ls-content-section,
  .ls-btn-test,
  .ls-anim-quiz,
  .ls-result-emoji,
  .ls-result-percent,
  .ls-result-badge,
  .ls-reward-chip,
  .ls-unlock-banner,
  .ls-quiz-option {
    animation: none !important;
    transition: none !important;
  }
  .ls-progress-track span,
  .ls-continue-bar span,
  .ls-quiz-progress .ls-progress-track span {
    transition: none !important;
  }
  .confetti-particle {
    display: none !important;
  }
}

/* Testlar bilan mos premium kurs kartalari — faqat Darslar overview sahifasi. */
#page-lessons.active { max-width:1120px; margin:0 auto; padding:18px 16px 32px; }
#page-lessons .ls-section-head { margin:0 0 18px; padding:20px; border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border)); border-radius:20px; background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 16%,var(--card)),var(--card)); }
#page-lessons .ls-section-head h3 { margin:0 0 4px; color:var(--text); } #page-lessons .ls-section-head p { margin:0; color:var(--muted); }
#page-lessons .ls-topics-head { margin:22px 0 12px; color:var(--text); }
#page-lessons .ls-courses-grid { display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:16px; align-items:start; }
#page-lessons .ls-course-card { display:grid; grid-template-columns:1fr auto; grid-template-areas:"icon side" "body side" "meta meta" "progress progress" "action action"; gap:10px; min-width:0; height:252px; box-sizing:border-box; padding:18px; border-radius:24px; color:var(--text); background:radial-gradient(110% 100% at 100% 0%,color-mix(in srgb,var(--ls-color,var(--primary)) 20%,transparent),transparent 58%),var(--card); border:1px solid color-mix(in srgb,var(--ls-color,var(--primary)) 28%,var(--border)); box-shadow:var(--shadow-soft); cursor:pointer; overflow:hidden; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
#page-lessons .ls-course-card:hover { transform:translateY(-3px); border-color:var(--ls-color,var(--primary)); box-shadow:0 14px 28px color-mix(in srgb,var(--ls-color,var(--primary)) 17%,transparent); } #page-lessons .ls-course-card:active { transform:translateY(-1px) scale(.985); }
#page-lessons .ls-course-icon { grid-area:icon; width:54px; height:54px; margin:0; border-radius:17px; background:color-mix(in srgb,var(--ls-color,var(--primary)) 18%,var(--card)); border:1px solid color-mix(in srgb,var(--ls-color,var(--primary)) 45%,transparent); font-size:1.7rem; }
#page-lessons .ls-course-id { grid-area:body; min-width:0; } #page-lessons .ls-course-id h4 { margin:0 0 4px; color:var(--text); font-size:1.08rem; font-weight:800; } #page-lessons .ls-course-tagline { margin:0; color:var(--muted); font-size:.85rem; line-height:1.4; -webkit-line-clamp:2; }
#page-lessons .ls-course-side { grid-area:side; align-self:start; } #page-lessons .ls-course-meta { grid-area:meta; display:flex; align-items:center; gap:8px; margin:0; color:var(--muted); font-size:.78rem; }
#page-lessons .ls-course-progress { grid-area:progress; display:flex; align-items:center; gap:10px; } #page-lessons .ls-course-progress-track { flex:1; height:6px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--muted) 18%,transparent); } #page-lessons .ls-course-progress-track span { display:block; height:100%; border-radius:inherit; background:var(--ls-color,var(--primary)); transition:width .7s cubic-bezier(.22,1,.36,1); } #page-lessons .ls-course-progress b { min-width:31px; color:var(--muted); font-size:.75rem; text-align:right; }
#page-lessons .ls-course-action { grid-area:action; width:100%; min-height:40px; border:1px solid color-mix(in srgb,var(--ls-color,var(--primary)) 60%,transparent); border-radius:12px; background:color-mix(in srgb,var(--ls-color,var(--primary)) 14%,transparent); color:var(--text); font:700 .86rem inherit; pointer-events:none; } #page-lessons .ls-course-action span { margin-left:6px; font-size:1.05rem; }
@media (min-width:620px){#page-lessons .ls-courses-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1180px){#page-lessons .ls-courses-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:380px){#page-lessons.active{padding:12px}#page-lessons .ls-course-card{height:242px;padding:15px;border-radius:20px}#page-lessons .ls-course-icon{width:48px;height:48px}}

/* ---------- MOBIL (320px–430px): overflow yo'q, matn kesilmasin ---------- */
@media (max-width: 480px) {
  .ls-viewer-body {
    padding: 18px 14px;
  }
  .ls-viewer-hero {
    padding: 18px 14px 15px;
  }
  .ls-viewer-footer,
  .ls-read-footer {
    padding: 14px 14px 18px;
  }
  .ls-viewer-hero h3 {
    font-size: 1.22rem;
  }
  .ls-back-btn {
    padding: 8px 13px;
    font-size: 0.82rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ls-content-text {
    font-size: 0.95rem;
  }
  .ls-content-sec-title {
    font-size: 1.02rem;
  }
  .ls-content-code {
    font-size: 0.78rem;
    padding: 12px;
  }
  /* inline `kod` mobil uzunda ham qatorni buzmasin */
  .ls-inline-code {
    white-space: normal;
    word-break: break-word;
  }
  .ls-content-codenote,
  .ls-content-result,
  .ls-content-note {
    padding: 11px 12px;
    font-size: 0.85rem;
  }
  .ls-content-keypoints {
    padding: 13px 14px;
  }
  .ls-quiz-questioncard {
    padding: 16px 14px;
  }
  .ls-quiz-question {
    font-size: 1rem;
    overflow-wrap: break-word;
  }
  .ls-quiz-option {
    font-size: 0.9rem;
    padding: 12px 12px;
  }
  .ls-quiz-option .ls-opt-text {
    overflow-wrap: break-word;
    min-width: 0;
  }
  .ls-complete-note {
    max-width: 100%;
  }
}

/* ---------- TOPBAR: dars sarlavhasi + user actions bir-biriga xalaqit bermasin ---------- */
.topbar {
  gap: 10px;
}
.topbar-left {
  min-width: 0;
  flex: 1 1 auto;
}
.topbar-left h2 {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-right {
  flex-shrink: 0;
}

/* ==========================================================
   LAYOUT / CHEGARA / VIEWPORT TUZATISHLARI (faqat Darslar)
   ROOT CAUSE fix: viewport coverage, clipping, safe-area
   ========================================================== */

/* ---------- 1) Page wrapper'lar viewportni to'liq egallashi ---------- */
#page-lessons,
#page-lessonCourse,
#page-lessonView {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#lsCourseContainer,
#lsLessonContainer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* Grid va kartalar hech qachon containerdan tashqariga chiqmaydi */
.ls-courses-grid,
.ls-lessons-grid,
.ls-cpath {
  max-width: 100%;
}
.ls-courses-grid > *,
.ls-lessons-grid > *,
.ls-cpath > * {
  min-width: 0;
  max-width: 100%;
}

/* ---------- 2) Card/hero radiusli chetlarning mosligi ---------- */
.ls-viewer-hero {
  border-top-left-radius: calc(var(--radius) - 1px);   /* card border 1px */
  border-top-right-radius: calc(var(--radius) - 1px);
}
.ls-viewer-footer,
.ls-read-footer {
  border-bottom-left-radius: calc(var(--radius) - 1px);
  border-bottom-right-radius: calc(var(--radius) - 1px);
}

/* ---------- 3) Mobil brauzer dinamik viewport (100vh bo'sh hududi) ---------- */
@supports (min-height: 100svh) {
  .main {
    min-height: 100svh;   /* Android/iOS toolbarsiz ko'rinadigan balandlik */
  }
}

/* ---------- 4) SAFE AREA (Android / iPhone notch va navigatsiya) ---------- */
.topbar {
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-left: calc(24px + env(safe-area-inset-left, 0px));
  padding-right: calc(24px + env(safe-area-inset-right, 0px));
}
.content {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 480px) {
  .topbar {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right: calc(14px + env(safe-area-inset-right, 0px));
  }
  .content {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- 5) Zaxira: hech qanday dekor viewportga chiqib ketmasin ---------- */
.ls-continue::after,
.ls-course-card::before,
.ls-lesson-card.ls-current::after {
  max-width: 100%;
}
/* Qulf modali, daraja modali — faqat ochilganda ko'rinadi, viewportdan chiqmaydi */
#lessonLockedModal,
#lessonLevelModal,
#lessonSettingsModal {
  overflow-y: auto;
}

/* ====================== MASHQLAR (EXERCISES) — HTML 2-DARS ====================== */
.ls-exercises {
  margin: 26px 0 8px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  box-shadow: var(--glow);
}
.ls-ex-head { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.ls-ex-sub { color: var(--muted); font-weight: 400; font-size: .85rem; }
.ls-ex-tracker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ls-ex-chip {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .82rem;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--muted);
  white-space: nowrap;
}
.ls-ex-chip.done {
  border-color: color-mix(in srgb, var(--success) 50%, transparent);
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}
.ls-ex-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 16px;
}
.ls-ex-card.done { border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.ls-ex-title { font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ls-ex-done-badge { color: var(--success); }
.ls-ex-instruction {
  font-size: .92rem;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.ls-ex-code {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-focus);
  background: var(--bg-alt);
  color: var(--text);
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: .85rem;
  line-height: 1.5;
  tab-size: 2;
  overflow-x: auto;
  white-space: pre;
}
.ls-ex-code:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.ls-ex-code-ro { min-height: auto; resize: none; user-select: text; }
.ls-ex-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ls-ex-actions .btn { min-height: 42px; }
.ls-ex-preview-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.ls-ex-preview-label {
  font-size: .78rem;
  color: var(--muted);
  padding: 6px 10px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.ls-ex-preview { width: 100%; height: 140px; border: none; background: #fff; display: block; }
.ls-ex-feedback {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ls-ex-feedback.ok {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
  color: var(--success);
  font-weight: 600;
}
.ls-ex-feedback.bad {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  color: var(--danger);
}
.ls-ex-count {
  font-weight: 700;
  color: var(--accent, #7dd3fc);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  white-space: nowrap;
}
.ls-ex-status {
  font-size: .85rem;
  color: var(--warning);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--warning) 40%, transparent);
}
.ls-ex-status.ok {
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
}
.ls-ex-hint {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  border: 1px dashed color-mix(in srgb, var(--warning) 35%, transparent);
  font-size: .9rem;
}
.ls-livedemo {
  margin: 14px 0;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
}
.ls-livedemo-head {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: .92rem;
}
@media (max-width: 640px) {
  .ls-livedemo { padding: 10px; }
}
.ls-ex-explain {
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: .9rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .ls-ex-count, .ls-ex-status { font-size: .78rem; padding: 5px 10px; }
}
.ls-read-hint.locked {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

/* 💻 CODINGDA SINAB KO'R tugmasi */
.ls-open-playground {
  margin-top: 10px;
  padding: 10px 16px;
  min-height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--secondary) 50%, transparent);
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
  color: var(--secondary);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .3px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.ls-open-playground:hover {
  background: color-mix(in srgb, var(--secondary) 22%, transparent);
  box-shadow: var(--glow-cyan);
  transform: translateY(-1px);
}
.ls-open-playground:active { transform: translateY(0) scale(.98); }

/* Drag & Drop */
.ls-dnd-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
}
.ls-dnd-chip {
  display: inline-block;
  padding: 8px 12px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--text);
  font-family: Consolas, monospace;
  font-size: .82rem;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform var(--transition), box-shadow var(--transition);
  overflow-wrap: anywhere;
}
.ls-dnd-chip:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.ls-dnd-chip.selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  box-shadow: var(--glow);
}
.ls-dnd-chip:active { cursor: grabbing; }
.ls-dnd-empty { color: var(--muted); font-size: .85rem; }
.ls-dnd-zone {
  margin-top: 12px;
  min-height: 90px;
  padding: 10px;
  border: 2px dashed color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background var(--transition);
}
.ls-dnd-zone.dragover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.ls-dnd-placeholder, .ls-dnd-hint { color: var(--muted); font-size: .85rem; padding: 8px 4px; }
.ls-dnd-order { display: flex; flex-direction: column; gap: 6px; }
.ls-dnd-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  font-family: Consolas, monospace;
  font-size: .82rem;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ls-dnd-num {
  flex: 0 0 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  font-size: .72rem;
}
.ls-dnd-remove {
  margin-left: auto;
  flex: 0 0 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--danger);
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.ls-dnd-remove:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* Drag & Drop — real drag state + touch fallback visuals */
.ls-dnd-chip.dragging { opacity: .45; cursor: grabbing; }
.ls-dnd-chip.selected { outline: 2px solid var(--primary); }
.ls-dnd-slot { transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); min-height: 40px; }
.ls-dnd-slot.over {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  box-shadow: var(--glow);
}
.ls-dnd-slot-empty {
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent);
  background: transparent;
  color: var(--muted);
  min-height: 44px;
}
.ls-dnd-slot-empty.over {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--text);
}
.ls-dnd-slot.just-placed { animation: ls-dnd-pop .25s ease; }
@keyframes ls-dnd-pop {
  from { transform: scale(.97); opacity: .5; }
  to { transform: scale(1); opacity: 1; }
}
.ls-dnd-zone.complete { border-style: solid; border-color: color-mix(in srgb, var(--ok, #22c55e) 45%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .ls-dnd-slot.just-placed { animation: none; }
}
/* 42px+ touch target (mashq tugmalari) */
.ls-ex-actions .btn { min-height: 44px; min-width: 44px; }

/* 2-mashq UX: hint tree, slot hover/correct/wrong, success animation */
.ls-dnd-hint-box {
  flex-basis: 100%;
  margin: 2px 4px 8px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--secondary, #06b6d4) 35%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--secondary, #06b6d4) 7%, transparent);
  font-size: .82rem;
  color: var(--muted);
}
.ls-dnd-hint-tree {
  margin: 6px 0;
  font-family: Consolas, monospace;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
}
.ls-dnd-hint-text code { font-size: .78rem; }
.ls-dnd-slot:hover { border-color: color-mix(in srgb, var(--primary) 60%, transparent); }
.ls-dnd-slot.correct {
  border-color: var(--success, #10b981);
  background: color-mix(in srgb, var(--success, #10b981) 12%, transparent);
}
.ls-dnd-slot.correct .ls-dnd-num { background: var(--success, #10b981); color: #fff; }
.ls-dnd-slot.wrong {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  animation: ls-dnd-wrong .4s ease;
}
.ls-dnd-slot.wrong .ls-dnd-num { background: var(--danger); color: #fff; }
@keyframes ls-dnd-wrong {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.ls-dnd-zone.success {
  border-style: solid;
  border-color: var(--success, #10b981);
  animation: ls-dnd-success .7s ease;
}
@keyframes ls-dnd-success {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success, #10b981) 55%, transparent); }
  60% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--success, #10b981) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-dnd-slot.wrong, .ls-dnd-zone.success { animation: none; }
}

/* ===== 3-DARS: review cards, real image preview, attr demo, motivation ===== */
.ls-review-cards { margin: 14px 0; }
.ls-review-cards-title { font-weight: 700; margin-bottom: 8px; color: var(--text); }
.ls-review-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.ls-review-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-alt);
  animation: ls-fade-up .35s ease both;
}
.ls-review-card code { color: var(--secondary); font-size: .8rem; }
.ls-review-card span { color: var(--muted); font-size: .78rem; }
.ls-img-preview { margin: 12px 0; }
.ls-img-preview-frame {
  width: 100%; min-height: 220px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: #fff;
}
.ls-img-caption { color: var(--muted); font-size: .8rem; padding: 6px 2px; }
.ls-img-failed {
  margin-top: 6px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger); font-size: .82rem;
}
.ls-attr-demo { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 12px; margin: 10px 0; }
.ls-attr-controls { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-alt); }
.ls-attr-row { display: flex; align-items: center; gap: 8px; }
.ls-attr-row span { flex: 0 0 48px; font-family: Consolas, monospace; font-size: .78rem; color: var(--secondary); }
.ls-attr-row input {
  flex: 1; min-width: 0; min-height: 38px; padding: 6px 10px;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-family: Consolas, monospace; font-size: .78rem;
}
.ls-attr-row input:focus { outline: none; border-color: var(--border-focus); }
/* ✨ Attribute Magic toggle rejimi */
.ls-attr-toggle { cursor: pointer; user-select: none; min-height: 40px; padding: 4px 6px; border-radius: 8px; transition: background .2s; }
.ls-attr-toggle:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.ls-attr-toggle input[type="checkbox"] {
  flex: 0 0 auto; width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0;
  accent-color: var(--primary); cursor: pointer;
}
.ls-attr-toggle .ls-attr-toggle-label {
  flex: 1; display: flex; justify-content: space-between; align-items: center;
  font-family: Consolas, monospace; font-size: .8rem; color: var(--text); font-weight: 700;
}
.ls-attr-toggle .ls-attr-state { flex: 0 0 auto; font-size: .72rem; font-weight: 800; }
.ls-alert-demo { margin-left: 8px; }
.ls-attr-preview-wrap { min-width: 0; }
.ls-attr-code {
  font-family: Consolas, monospace; font-size: .75rem; color: var(--secondary);
  padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  white-space: pre; overflow-x: auto; margin-bottom: 8px;
}
.ls-attr-preview { width: 100%; min-height: 240px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #0b0f1d; }
.ls-motivation {
  margin: 18px 0; padding: 18px 20px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), color-mix(in srgb, var(--secondary) 10%, transparent));
  animation: ls-fade-up .4s ease both;
}
.ls-motivation-title { font-weight: 800; font-size: 1rem; margin-bottom: 8px; }
.ls-motivation-text { color: var(--text); font-size: .9rem; line-height: 1.6; }
.ls-return-lesson-btn { margin-bottom: 8px; }
@media (max-width: 640px) {
  .ls-attr-demo { grid-template-columns: 1fr; }
  .ls-review-cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .ls-review-cards-grid { grid-template-columns: 1fr; }
}
@keyframes ls-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ls-review-card, .ls-motivation { animation: none; }
}

/* Kod detektivi */
.ls-ex-options { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.ls-ex-option {
  text-align: left;
  padding: 12px 14px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  font-size: .9rem;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
  overflow-wrap: anywhere;
}
.ls-ex-option:hover { border-color: var(--primary); transform: translateX(2px); }
.ls-ex-option.correct {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
  font-weight: 600;
}
.ls-ex-option.wrong {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* MASTER banner */
.ls-unlock-banner.master {
  border-color: color-mix(in srgb, #f59e0b 55%, transparent);
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  color: #fbbf24;
  box-shadow: 0 0 25px rgba(245, 158, 11, .15);
}

/* Mobil (320–430px) */
@media (max-width: 640px) {
  .ls-exercises { padding: 12px; }
  .ls-ex-card { padding: 12px; }
  .ls-ex-code { font-size: .78rem; min-height: 140px; }
  .ls-ex-preview { height: 120px; }
  .ls-dnd-chip { font-size: .76rem; padding: 8px 10px; }
  .ls-ex-actions .btn { flex: 1 1 auto; }
  .ls-open-playground { width: 100%; }
}



/* ====================== 5-DARS: TriDemo | 7 mini-o'yin | LOYIHA ====================== */

/* --- TriDemo --- */
.ls-td-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.ls-td-tab {
  padding: 10px 18px; min-height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-alt); color: var(--muted); font-weight: 600; font-size: .88rem;
  transition: all var(--transition);
}
.ls-td-tab.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); box-shadow: var(--glow); }
.ls-td-panels { position: relative; }
.ls-td-panel { display: none; }
.ls-td-panel.active { display: block; }
.ls-td-frame { width: 100%; min-height: 260px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }

/* --- Games hub --- */
.ls-games { margin: 22px 0; display: flex; flex-direction: column; gap: 12px; }
.ls-games-title { font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.ls-game-card {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
  padding: 14px 16px; transition: border-color var(--transition), box-shadow var(--transition);
}
.ls-game-card:hover { border-color: var(--border-focus); }
.ls-game-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ls-game-ico { font-size: 1.4rem; }
.ls-game-name { font-weight: 800; }
.ls-game-desc { color: var(--muted); font-size: .84rem; flex: 1 1 160px; }
.ls-game-badge {
  margin-left: auto; font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent); color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent); white-space: nowrap;
}
.ls-game-badge.done { border-color: color-mix(in srgb, var(--success) 50%, transparent); color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
.ls-game-body { margin-top: 12px; }
.ls-game-note { color: var(--muted); font-size: .86rem; margin: 6px 0; }
.ls-game-win {
  padding: 14px; border-radius: var(--radius-sm); text-align: center; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--success) 50%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); margin-bottom: 8px;
}
.ls-game-win.hot { box-shadow: 0 0 25px rgba(245, 158, 11, .25); }

/* --- Bug Hunter --- */
.ls-gh-round { color: var(--muted); font-size: .8rem; margin-bottom: 4px; }
.ls-gh-q { font-weight: 700; margin-bottom: 8px; }
.ls-gh-code {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: .88rem; overflow-x: auto; margin-bottom: 10px;
}
.ls-gh-gaps { display: flex; gap: 8px; flex-wrap: wrap; }
.ls-gh-gap {
  min-height: 44px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px dashed var(--border-focus);
  background: var(--primary-soft); color: var(--text); font-size: .84rem; transition: all var(--transition);
}
.ls-gh-gap:hover { border-color: var(--primary); }
.ls-gh-gap.correct { border-style: solid; border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.ls-gh-gap.wrong { border-color: var(--danger); color: var(--danger); }

/* --- Memory Code --- */
.ls-mem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ls-mem-card {
  min-height: 64px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-alt); color: var(--muted); font-weight: 700; font-size: .82rem;
  display: flex; align-items: center; justify-content: center; padding: 6px; text-align: center;
  transition: all var(--transition); overflow-wrap: anywhere;
}
.ls-mem-card:hover { border-color: var(--border-focus); }
.ls-mem-card.open { border-color: var(--primary); color: var(--text); background: var(--primary-soft); }
.ls-mem-card.matched { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); opacity: .85; }
.ls-mem-card code { font-size: .82rem; }
.ls-mem-fb { margin-top: 10px; }

/* --- Code Runner / 60s / Streak / Duel umumiy savol UI --- */
.ls-run-track { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; overflow-x: auto; padding: 4px 0; }
.ls-run-cell {
  flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border); background: var(--bg-alt); font-size: 1rem;
}
.ls-run-cell.here { border-color: var(--primary); box-shadow: var(--glow); }
.ls-run-cell.finish { border-color: color-mix(in srgb, var(--success) 55%, transparent); }
.ls-run-q { font-weight: 700; margin: 8px 0; }
.ls-run-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ls-run-opt {
  min-height: 48px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-alt); color: var(--text); font-size: .88rem; text-align: left; transition: all var(--transition);
  overflow-wrap: anywhere;
}
.ls-run-opt:hover { border-color: var(--primary); }
.ls-run-fb { margin-top: 10px; min-height: 10px; }

/* --- 60 Seconds --- */
.ls-sixty-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ls-sixty-timer { font-weight: 800; font-size: 1.15rem; color: var(--warning); }
.ls-sixty-score { font-weight: 700; color: var(--success); }

/* --- Streak Fire --- */
.ls-streak-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.ls-streak-flames { font-size: 1.3rem; letter-spacing: 2px; }
.ls-streak-flames.hot { text-shadow: 0 0 18px rgba(245, 158, 11, .8); animation: lsStreakPulse 1s ease-in-out infinite alternate; }
@keyframes lsStreakPulse { from { transform: scale(1); } to { transform: scale(1.12); } }
.ls-streak-count, .ls-streak-best { font-size: .88rem; color: var(--muted); }

/* --- Code Duel --- */
.ls-duel-score { display: flex; align-items: center; justify-content: center; gap: 14px; font-weight: 800; }
.ls-duel-vs { color: var(--danger); font-size: .9rem; }
.ls-duel-round { color: var(--muted); font-size: .82rem; text-align: center; margin: 4px 0 10px; }
.ls-duel-full { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .ls-streak-flames.hot { animation: none; } }

/* --- LOYIHA --- */
.ls-project { margin: 22px 0; }
.ls-project-hero {
  border: 1px solid var(--border-focus); border-radius: var(--radius); padding: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), color-mix(in srgb, var(--secondary) 10%, transparent));
  margin-bottom: 14px;
}
.ls-project-title { font-size: 1.25rem; font-weight: 900; }
.ls-project-sub { color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.ls-project-intro { font-size: .9rem; }
.ls-project-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ls-step-card { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); padding: 12px 14px; }
.ls-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ls-step-num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; flex: 0 0 auto;
}
.ls-step-title { font-weight: 800; }
.ls-step-note { color: var(--muted); font-size: .85rem; margin-bottom: 8px; }
.ls-step-code {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  font-size: .78rem; overflow-x: auto; margin-bottom: 8px; max-height: 220px;
}
.ls-step-code.css { border-left: 3px solid #2965f1; }
.ls-step-code.js { border-left: 3px solid #f7df1e; }
.ls-project-checklist-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); padding: 14px 16px; }
.ls-checklist-title { font-weight: 800; margin-bottom: 10px; }
.ls-project-progress { height: 10px; }
.ls-project-pct { font-weight: 800; color: var(--primary); margin: 6px 0 10px; }
.ls-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.ls-check-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-alt); font-size: .84rem; color: var(--muted);
}
.ls-check-item.done { border-color: color-mix(in srgb, var(--success) 45%, transparent); color: var(--success); }
#lsProjectParty { margin-top: 10px; padding: 10px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--success) 50%, transparent); background: color-mix(in srgb, var(--success) 8%, transparent); color: var(--success); }
.ls-project-congrats p { margin: 4px 0; font-size: .95rem; }
.ls-project-hero-pass { box-shadow: 0 0 35px rgba(16, 185, 129, .18); }

/* --- Mobil 320-430px --- */
@media (max-width: 640px) {
  .ls-td-frame { min-height: 200px; }
  .ls-td-tab { flex: 1 1 100%; }
  .ls-game-head { align-items: flex-start; }
  .ls-game-badge { margin-left: 0; }
  .ls-run-opts { grid-template-columns: 1fr; }
  .ls-run-cell { width: 32px; height: 32px; font-size: .85rem; }
  .ls-mem-grid { grid-template-columns: repeat(3, 1fr); }
  .ls-checklist { grid-template-columns: 1fr; }
  .ls-project-hero { padding: 14px; }
  .ls-step-code { max-height: 180px; font-size: .72rem; }
}
@media (max-width: 380px) {
  .ls-mem-grid { grid-template-columns: repeat(2, 1fr); }
  .ls-run-cell { width: 28px; height: 28px; font-size: .75rem; }
}

/* ====================== 5-DARS: ONE-BY-ONE UNLOCK ====================== */
.ls-games-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ls-games-progress { font-size: .95em; font-weight: 700; background: rgba(99,102,241,.15); color: #6366f1; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.ls-games-bar { height: 8px; border-radius: 999px; background: rgba(148,163,184,.25); overflow: hidden; margin: 8px 0 16px; }
.ls-games-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #22c55e); transition: width .4s ease; }
.ls-game-card.locked { opacity: .6; pointer-events: none; filter: grayscale(.6); }
.ls-game-card.locked .ls-game-body { padding: 0; }
.ls-game-locked-note { padding: 14px 16px; border-radius: 10px; background: rgba(148,163,184,.12); border: 1px dashed rgba(148,163,184,.5); color: #94a3b8; font-weight: 600; text-align: center; }
.ls-game-replay-slot { margin-top: 10px; }
.ls-game-stats { color: var(--muted); font-size: .84rem; font-weight: 600; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ls-game-after { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ls-game-replay-note { margin-top: 8px; font-weight: 700; color: var(--success); font-size: .88rem; }
.ls-game-replay-btn { white-space: nowrap; }

/* ==========================================================
   6-DARS — Tezkor eslatma, Ro'yxat ustasi, Kod detektivi,
   CSS taqqoslash va Rang sehrgari (additiv — boshqa darslarga ta'sir qilmaydi)
   ========================================================== */
.ls-review-quiz { margin: 14px 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.ls-rq-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.ls-rq-progress { display: inline-block; font-size: 12px; font-weight: 600; color: var(--secondary); background: var(--primary-soft); border-radius: 999px; padding: 4px 12px; margin: 8px 0; }
.ls-run-opt.correct { border-color: var(--success) !important; box-shadow: 0 0 12px rgba(16,185,129,.35); }
.ls-run-opt.wrong { border-color: var(--danger) !important; box-shadow: 0 0 12px rgba(239,68,68,.3); }
.ls-wiz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.ls-wiz-label { font-weight: 600; font-size: 13px; color: var(--muted); min-width: 84px; }
.ls-wiz-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-wiz-btn { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-hover); font-size: 14px; font-weight: 600; color: var(--text); transition: var(--transition); }
.ls-wiz-btn.sel { border-color: var(--secondary); box-shadow: var(--glow-cyan); }
.ls-game-body .ls-content-code { margin-top: 10px; overflow-x: auto; max-width: 100%; }
.ls-game-body .ls-open-playground { margin-top: 10px; }
@media (max-width: 430px) {
  .ls-wiz-row { flex-direction: column; align-items: flex-start; }
  .ls-wiz-label { min-width: 0; }
  .ls-td-frame { min-height: 110px; }
}

/* ==========================================================
   7-DARS: Tezkor eslatma (reviewQuiz) + quizgame/csstab/wizard
   Mobile-first: bitta ustun, 100% width, touch-friendly
   ========================================================== */

/* 🔁 Tezkor eslatma */
.ls-review-quiz {
  background: var(--card, #131a2e);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 14px;
  padding: 14px;
  margin: 14px 0;
}
.ls-rq-title { font-weight: 700; font-size: 15px; }
.ls-rq-sub { color: #94a3b8; font-size: 13px; margin: 4px 0 10px; }
.ls-rq-step {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.12);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.ls-rq-q { font-size: 15px; margin-bottom: 10px; }
.ls-rq-opts { display: flex; flex-direction: column; gap: 8px; }
.ls-rq-opts .ls-run-opt { width: 100%; text-align: left; }
.ls-rq-fb { margin-top: 10px; }
.ls-rq-fb:empty { display: none; }

/* 🎮 Quizgame (runner-opt uslubidan foydalanadi) */
.ls-run-q { font-size: 15px; margin-bottom: 10px; }
.ls-run-opts { display: flex; flex-direction: column; gap: 8px; }
.ls-run-opt {
  width: 100%;
  min-height: 48px; /* touch-friendly */
  padding: 10px 14px;
  text-align: left;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(148, 163, 184, 0.06);
  color: inherit;
  font-size: 14px;
  cursor: pointer;
}
.ls-run-opt:hover { border-color: #6366f1; }
.ls-run-fb { margin-top: 10px; }
.ls-run-fb:empty { display: none; }

/* 🎨 CSSsiz / CSS bilan tablari */
.ls-cstab-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ls-cstab {
  flex: 1 1 140px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ls-cstab.active { border-color: #6366f1; background: rgba(99, 102, 241, 0.15); }
.ls-cstab-panels { display: block; }
.ls-cstab-panel { display: none; }
.ls-cstab-panel.active { display: block; }
.ls-cstab-panel .ls-img-preview-frame {
  width: 100%;
  min-height: 120px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: #0b0f1d;
}
.ls-cstab-code {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0b0f1d;
  color: #a5b4fc;
  font-size: 12.5px;
  line-height: 1.55;
  overflow-x: auto; /* code block scroll */
  white-space: pre;
}

/* ✨ Rang sehrgari (wizard) */
.ls-wiz-row { display: flex; flex-direction: column; gap: 12px; }
.ls-wiz-label { font-size: 13px; font-weight: 700; color: #94a3b8; margin-bottom: 6px; }
.ls-wiz-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-wiz-btn {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid rgba(148, 163, 184, 0.3);
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ls-wiz-btn.active { border-color: #6366f1; background: rgba(99, 102, 241, 0.15); }
.ls-wiz-preview { margin-top: 12px; }
.ls-wiz-preview .ls-img-preview-frame {
  width: 100%;
  min-height: 120px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: #0b0f1d;
}

/* Kichik ekranlar — hammasi allaqachon bir ustun; kattaroqlar uchun yaxshilash */
@media (min-width: 720px) {
  .ls-review-quiz, .ls-rq-opts { max-width: 640px; }
  .ls-wiz-row { flex-direction: row; }
  .ls-wiz-group { flex: 1; }
}

/* ==========================================================
   DARSLAR OVERVIEW — REDESIGN (Umumiy progress + Mavzular)
   Faqat #page-lessons (Darslar bosh sahifasi) ko'rinishi.
   Faqat mavjud global o'zgaruvchilar ishlatiladi.
   ========================================================== */

/* ---------- HEADER (qisqa va toza) ---------- */
.ls-section-head h3 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.ls-section-head p {
  font-size: 0.95rem;
  max-width: 640px;
  line-height: 1.5;
}

/* ---------- MAVZULAR SARLAVHASI ---------- */
.ls-topics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 1.08rem;
  font-weight: 800;
  margin: 4px 0 16px;
}
.ls-topics-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- UMUMIY PROGRESS KARTASI (gradient — learning app style) ---------- */
.ls-overall {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 22px 26px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--secondary) 58%, var(--primary)));
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  margin: 0 0 18px;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--primary) 24%, transparent);
  animation: lsFadeUp 0.45s var(--bounce) both;
  overflow: hidden;
  max-width: 100%;
}
.ls-overall-info {
  flex: 1;
  min-width: 200px;
  position: relative;
  z-index: 1;
}
.ls-overall-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 4px;
}
.ls-overall-pct {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.05;
  color: #fff;
  letter-spacing: -0.02em;
}
.ls-overall-pct small {
  font-size: 0.5em;
  margin-left: 2px;
  font-weight: 700;
}
.ls-overall-stats {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
  margin-top: 4px;
}
.ls-overall-stats strong {
  color: #fff;
}
.ls-overall-motive {
  margin-top: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
/* Circular progress ring — markazda % */
.ls-overall-ring-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  z-index: 1;
}
.ls-overall-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
}
.ls-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 8;
}
.ls-ring-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--bounce);
}
.ls-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}
.ls-ring-pct small {
  font-size: 0.68em;
  margin-left: 1px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}
.ls-overall-robot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.ls-overall-robot .mascot {
  --mascot-size: 64px;
}



/* ---------- KARTA HOLAT DOIRASI: ✓ tugallangan | mini progress ring + % ---------- */
.ls-course-state {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ls-course-state svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ls-state-ring-bg {
  fill: none;
  stroke: color-mix(in srgb, var(--ls-color, var(--primary)) 16%, transparent);
  stroke-width: 4.5;
}
.ls-state-ring-fill {
  fill: none;
  stroke: var(--ls-color, var(--primary));
  stroke-width: 4.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s var(--bounce);
}
.ls-state-ring-pct {
  position: relative;
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--text);
}
.ls-state-idle .ls-state-ring-pct {
  color: var(--muted);
}
.ls-state-done {
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--success) 35%, transparent);
  animation: lsStatePop 0.4s var(--bounce) both;
}
@keyframes lsStatePop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------- STATUS BADGE (pill) ---------- */
.ls-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ls-status-done {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.ls-status-active {
  color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
  border-color: color-mix(in srgb, var(--secondary) 30%, transparent);
}
/* Boshlanmagan — neytral status pill (action EMAS) */
.ls-status-idle {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border-color: color-mix(in srgb, var(--muted) 24%, transparent);
}
.ls-course-finished {
  border-color: color-mix(in srgb, var(--success) 32%, transparent);
}

/* ---------- RESPONSIVE ---------- */
/* Tablet: 768–1024 — ixchamroq progress kartasi */
@media (max-width: 1024px) {
  .ls-overall {
    padding: 20px 22px;
    gap: 18px;
  }
  .ls-overall-ring-wrap {
    width: 92px;
    height: 92px;
  }
  .ls-overall-pct {
    font-size: 2rem;
  }
}
/* Kichik ekranlar — 320–640: karta gorizontal qoladi, ixcham va yumaloq */
@media (max-width: 640px) {
  .ls-section-head {
    margin-bottom: 16px;
  }
  .ls-section-head h3 {
    font-size: 1.35rem;
  }
  .ls-overall {
    padding: 18px 16px;
    gap: 14px;
    margin-bottom: 14px;
    border-radius: 24px;
  }
  .ls-overall-ring-wrap {
    width: 80px;
    height: 80px;
  }
  .ls-overall-pct {
    font-size: 1.75rem;
  }
  .ls-overall-info {
    min-width: 0;
    flex-basis: calc(100% - 94px);
  }
  .ls-overall-robot {
    display: none; /* mobil ekranlarda toza ko'rinish */
  }
  /* Joriy dars kartasi — vertikal, tugma to'liq kenglik (mobile app ko'rinishi) */
  .ls-continue {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .ls-continue-progress {
    max-width: none;
    min-width: 0;
  }
  .ls-continue .ls-btn-continue,
  .ls-continue .btn.ls-btn-continue {
    width: 100%;
    justify-content: center;
  }
  .ls-continue-head {
    margin-bottom: 8px;
  }
  .ls-topics-head {
    margin: 0 0 12px;
    font-size: 1rem;
  }
  /* Compact learning card — mobil */
  .ls-course-card {
    gap: 12px;
    padding: 12px 14px;
    border-radius: 22px;
  }
  .ls-course-icon {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    border-radius: 14px;
  }
  .ls-course-id h4 {
    font-size: 1.02rem;
  }
  .ls-course-tagline {
    font-size: 0.8rem;
  }
  .ls-course-side {
    gap: 4px;
  }
  .ls-course-state {
    width: 42px;
    height: 42px;
  }
}

/* Juda tor ekranlar (320–360) — tagline 2 qatorga o'tishi mumkin */
@media (max-width: 360px) {
  .ls-course-tagline {
    -webkit-line-clamp: 2;
  }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .ls-overall,
  .ls-topics-head,
  .ls-state-done {
    animation: none;
  }
  .ls-ring-fill,
  .ls-state-ring-fill {
    transition: none !important;
  }
  .ls-btn-continue {
    transition: none;
  }
}

/* ==========================================================
   COURSE PATH — SNAKE / WINDING LEARNING ROAD (0'dan qurildi)
   ==========================================================
   Eski vertical timeline (.ls-path) va eski journey (.ls-journey)
   BUTUNLAY o'chirildi — hech qanday qoldiq yo'q.
   Architecture:
     .ls-cpath (CoursePath)
       ├─ .ls-cpath-bg     (PathBackground — dekor, pointer-events:none)
       ├─ .ls-cpath-road   (SvgLearningRoad — base + progress Bézier)
       └─ .ls-crow × N     (LessonNode + LessonCard, deterministik zigzag)
   ========================================================== */
.ls-cpath {
  --road-w: 5px;
  position: relative;
  margin: 18px 0 8px;
  padding: 28px 10px 36px;
  border-radius: 32px;
  background:
    radial-gradient(1100px 480px at 12% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 62%),
    radial-gradient(900px 420px at 88% 100%, color-mix(in srgb, var(--secondary) 8%, transparent), transparent 62%),
    var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  overflow-x: clip;
  animation: lsFadeUp 0.45s var(--bounce) both;
}
.ls-cpath,
.ls-cpath > * {
  max-width: 100%;
  min-width: 0;
}

/* ---------- PATH BACKGROUND (dekorativ, pointer-events: none) ---------- */
.ls-cpath-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ls-cpath-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.55;
}
.ls-cpath-blob--a {
  width: 320px; height: 320px;
  left: -100px; top: -90px;
  background: color-mix(in srgb, var(--primary) 13%, transparent);
}
.ls-cpath-blob--b {
  width: 360px; height: 360px;
  right: -120px; bottom: -130px;
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
}
.ls-cpath-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}
.ls-cpath-chip {
  position: absolute;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--primary) 60%, var(--text));
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 10px;
  padding: 4px 9px;
  opacity: 0.8;
}
.ls-cpath-chip--html { top: 26px; right: 5%; transform: rotate(6deg); }
.ls-cpath-chip--css { top: 44%; left: 3%; transform: rotate(-5deg); }
.ls-cpath-chip--js { bottom: 11%; right: 4%; transform: rotate(4deg); }
.ls-cpath-decor {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0.45;
  filter: saturate(0.9);
}
.ls-cpath-decor--laptop { bottom: 16px; left: 3.5%; transform: rotate(-8deg); }

/* ---------- SVG LEARNING ROAD ---------- */
.ls-cpath-road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.ls-croad-base,
.ls-croad-progress {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ls-croad-base {
  stroke: color-mix(in srgb, var(--muted) 32%, transparent);
  stroke-width: var(--road-w);
}
.ls-croad-progress {
  stroke: url(#lsRoadGrad);
  stroke-width: calc(var(--road-w) + 1px);
}

/* ---------- ROW (node + karta, deterministik zigzag) ---------- */
.ls-crow {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, var(--l, 1fr)) 76px minmax(0, var(--r, 1fr));
  align-items: center;
  padding: 22px 0;
  animation: lsFadeUp 0.45s var(--bounce) both;
}

/* ---------- LESSON NODE (circular) ---------- */
.ls-cnode {
  --node-size: 64px;
  grid-row: 1;
  grid-column: 2;
  justify-self: center;
  width: var(--node-size);
  height: var(--node-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  background: var(--card);
  border: 2px solid var(--border-focus);
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s var(--bounce), box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ls-cnode:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--glow);
}
.ls-cnode:active { transform: scale(0.94); }
.ls-cnode:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.ls-cnode-face {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
}

/* HOLAT: ochiq (boshlanmagan) */
.ls-cnode--open {
  background: var(--bg-alt);
  border-color: var(--border);
}
.ls-cnode--open .ls-cnode-face { color: var(--muted); }

/* HOLAT: tugallangan — yashil ✓ */
.ls-cnode--done {
  background: color-mix(in srgb, var(--success) 16%, var(--card));
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
}
.ls-cnode--done .ls-cnode-face { color: var(--success); }

/* HOLAT: qulflangan — kulrang 🔒 */
.ls-cnode--locked {
  background: var(--bg-alt);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 0.8;
}
.ls-cnode--locked .ls-cnode-face {
  font-size: 0.95rem;
  color: var(--muted);
}

/* HOLAT: joriy — blue/purple glow + pulse */
.ls-cnode--current {
  --node-size: 72px;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--secondary)));
  border-color: transparent;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
  animation: lsCNodePulse 2.4s ease-in-out infinite;
}
.ls-cnode--current .ls-cnode-face {
  color: #fff;
  font-size: 1.3rem;
}
@keyframes lsCNodePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 35%, transparent),
                0 8px 24px color-mix(in srgb, var(--primary) 30%, transparent);
  }
  50% {
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--primary) 0%, transparent),
                0 8px 24px color-mix(in srgb, var(--primary) 30%, transparent);
  }
}

/* Qulflangan element shake */
.ls-cnode.ls-shake,
.ls-ccard.ls-shake {
  animation: lsShakeCard 0.45s ease;
}

/* ---------- LESSON CARD (node yonida, chap-o'ng almashinadi) ---------- */
.ls-ccard {
  grid-row: 1;
  grid-column: var(--card-col, 3);
  justify-self: var(--card-just, start);
  width: min(380px, 100%);
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 14px 18px 15px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.18s var(--bounce), box-shadow 0.18s ease, border-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ls-ccard:hover {
  transform: translateY(-3px);
  border-color: var(--border-focus);
  box-shadow: var(--glow);
}
.ls-ccard:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.ls-ccard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.ls-ccard-num {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ls-ccard-status {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ls-ccard-status--current {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.ls-ccard-status--done {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}
.ls-ccard-status--locked {
  color: var(--muted);
  background: var(--bg-alt);
}
.ls-ccard-status--open {
  color: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
}
.ls-ccard-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: normal;
}
.ls-ccard-desc {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ls-ccard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
}
.ls-ccard-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--primary);
}
.ls-ccard-action b { transition: transform 0.18s ease; }
.ls-ccard:hover .ls-ccard-action b { transform: translateX(3px); }
.ls-ccard-action--done { color: var(--success); }

/* Karta holat tirlari */
.ls-ccard--current {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--card)), var(--card));
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.ls-ccard--done {
  background: linear-gradient(135deg, color-mix(in srgb, var(--success) 7%, var(--card)), var(--card));
  border-color: color-mix(in srgb, var(--success) 25%, transparent);
}
.ls-ccard--locked {
  opacity: 0.72;
  cursor: not-allowed;
}
.ls-ccard--locked:hover {
  transform: none;
  box-shadow: var(--shadow-soft);
  border-color: var(--border);
}

/* ---------- RESPONSIVE — MOBIL ALOHIDA LAYOUT (320–640) ---------- */
@media (max-width: 640px) {
  .ls-cpath {
    padding: 18px 6px 28px;
    border-radius: 26px;
  }
  .ls-crow {
    grid-template-columns: minmax(0, var(--lm, 1fr)) 58px minmax(0, var(--rm, 1fr));
    padding: 16px 0;
  }
  .ls-cnode { --node-size: 52px; }
  .ls-cnode--current { --node-size: 58px; }
  .ls-ccard {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: var(--card-align, start);
    width: min(288px, 100%);
    margin-top: 10px;
    padding: 12px 14px 13px;
  }
  .ls-ccard-title { font-size: 0.92rem; }
  .ls-ccard-desc { font-size: 0.76rem; }
  .ls-ccard-action { margin-top: 8px; font-size: 0.76rem; }
  .ls-cpath-chip { font-size: 0.64rem; padding: 3px 7px; }
  .ls-cpath-chip--css { display: none; }
  .ls-cpath-decor--laptop { font-size: 1.2rem; bottom: 10px; }
}

/* Juda tor ekranlar (320–360) */
@media (max-width: 360px) {
  .ls-ccard { width: min(264px, 100%); }
  .ls-cpath-chip--js { display: none; }
  .ls-crow { padding: 13px 0; }
}

/* Keng desktop — yo'l yanada keng yoyiladi (1280+) */
@media (min-width: 1280px) {
  .ls-cpath { padding: 34px 14px 42px; }
  .ls-ccard { width: min(400px, 100%); }
}

/* ---------- REDUCED MOTION (course path) ---------- */
@media (prefers-reduced-motion: reduce) {
  .ls-crow,
  .ls-cnode--current {
    animation: none !important;
  }
  .ls-cnode,
  .ls-ccard {
    transition: none !important;
  }
  .ls-croad-progress {
    transition: none !important;
  }
}


/* ==========================================================
   KURS HERO — REFERENCE COMPOSITION (1:1)
   1) ← Kursga qaytish topbar
   2) HERO: icon + title + tagline + "N / M dars" + progress + %
      | ROBOT + floating code badge'lar | quote kartasi
   3) "Darslar yo'li" sarlavha + subtitle + toolbar
   ========================================================== */
.ls-course-topbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 14px;
  animation: lsFadeUp 0.4s var(--bounce) both;
}
.ls-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.2s var(--bounce), border-color 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.ls-back-btn:hover {
  transform: translateY(-2px);
  border-color: var(--border-focus);
  box-shadow: var(--shadow);
}
.ls-back-btn:active { transform: scale(0.98); }
.ls-back-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- HERO CARD (airy futuristic gradient) ---------- */
.ls-hero {
  position: relative;
  align-items: center;
  gap: 18px;
  padding: 28px 30px;
  border-radius: 32px;
  background: linear-gradient(120deg, #F5F9FF 0%, #FFFFFF 46%, #EAF2FF 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  box-shadow: 0 18px 44px -20px color-mix(in srgb, var(--primary) 26%, transparent);
}
.ls-hero-main {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;
}
.ls-hero .ls-course-head-icon {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  font-size: 2.4rem;
  background: color-mix(in srgb, var(--ls-color, var(--primary)) 12%, #fff);
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--ls-color, var(--primary)) 55%, transparent);
}
.ls-hero .ls-course-head-info h3 {
  font-size: 1.9rem;
  letter-spacing: -0.02em;
}
.ls-hero .ls-course-head-info > p {
  margin-bottom: 14px;
}
.ls-hero-countrow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  animation: lsFadeUp 0.45s var(--bounce) 0.08s both;
}
.ls-hero-count {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.ls-hero-count strong { color: var(--primary); }
.ls-hero-countrow .ls-progress-track { max-width: 220px; }
/* HERO-CONT (2-qism) pastda davom etadi */
.ls-hero-tail-marker { display: none; }

/* ---------- HERO ROBOT + FLOATING BADGES ---------- */
.ls-hero-robot {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px 16px;
  animation: lsHeroRobotIn 0.6s var(--bounce) 0.12s both;
}
@keyframes lsHeroRobotIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ls-hero-robot .mascot { --mascot-size: 150px; }
.ls-hero-badge {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  border-radius: 14px;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--primary) 40%, transparent);
  animation: lsBadgeFloat 3.6s ease-in-out infinite;
  pointer-events: none;
}
.ls-hero-badge--code {
  top: -4px;
  left: 0;
  width: 52px;
  height: 52px;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: 16px;
}
.ls-hero-badge--tag {
  --badge-rot: 6deg;
  top: 0;
  right: 0;
  padding: 5px 10px;
  color: var(--primary);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  transform: rotate(6deg);
  animation-delay: 0.9s;
}
@keyframes lsBadgeFloat {
  0%, 100% { transform: translateY(0) rotate(var(--badge-rot, 0deg)); }
  50% { transform: translateY(-6px) rotate(var(--badge-rot, 0deg)); }
}

/* ---------- HERO QUOTE CARD ---------- */
.ls-hero-quote {
  position: relative;
  flex: 0 1 250px;
  min-width: 0;
  padding: 18px 52px 18px 20px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  animation: lsFadeUp 0.45s var(--bounce) 0.16s both;
}
.ls-hero-quote p { margin: 0; }
.ls-hero-quote-ico {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.45rem;
}

/* ---------- "DARSLAR YO'LI" SARLAVHA + TOOLBAR ---------- */
.ls-road-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 26px 2px 4px;
  animation: lsFadeUp 0.4s var(--bounce) both;
}
.ls-road-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.ls-road-ico { font-size: 1.45rem; line-height: 1.3; }
.ls-road-title h3 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-weight: 800;
}
.ls-road-title p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.ls-road-actions {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------- RESPONSIVE (hero) ---------- */
@media (max-width: 1100px) {
  .ls-hero { flex-wrap: wrap; }
  .ls-hero-robot .mascot { --mascot-size: 120px; }
  .ls-hero-quote { flex: 1 1 220px; }
}
@media (max-width: 767px) {
  .ls-course-topbar { margin-bottom: 10px; }
  .ls-back-btn { padding: 8px 14px; font-size: 0.84rem; border-radius: 12px; }
  .ls-hero {
    padding: 18px 16px;
    border-radius: 22px;
    gap: 10px;
  }
  .ls-hero-main { gap: 12px; }
  .ls-hero .ls-course-head-icon {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    font-size: 1.7rem;
  }
  .ls-hero .ls-course-head-info h3 { font-size: 1.35rem; }
  .ls-hero .ls-course-head-info > p { font-size: 0.86rem; margin-bottom: 10px; }
  .ls-hero-countrow { flex-wrap: wrap; row-gap: 6px; }
  .ls-hero-countrow .ls-progress-track { max-width: none; flex: 1 1 120px; }
  .ls-hero-robot { width: 100%; padding: 6px 0 8px; }
  .ls-hero-robot .mascot { --mascot-size: 96px; }
  .ls-hero-badge--code { width: 40px; height: 40px; font-size: 0.85rem; top: -6px; }
  .ls-hero-badge--tag { font-size: 0.7rem; padding: 4px 8px; }
  .ls-hero-quote { padding: 14px 46px 14px 16px; font-size: 0.86rem; border-radius: 15px; }
  .ls-road-head { margin-top: 18px; gap: 10px; }
  .ls-road-title h3 { font-size: 1.1rem; }
  .ls-road-title p { font-size: 0.84rem; }
}
@media (max-width: 360px) {
  .ls-hero { padding: 16px 13px; }
  .ls-hero-robot .mascot { --mascot-size: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-course-topbar,
  .ls-hero,
  .ls-hero-quote,
  .ls-hero-robot,
  .ls-road-head,
  .ls-hero-countrow,
  .ls-hero-badge {
    animation: none !important;
  }
}

/* Darslar katalogi — Testlar namunasi bilan 1:1 vizual tizim. */
#page-lessons.active { max-width: 1530px; padding: 20px 34px 38px; }
#page-lessons .ls-catalog-hero { position:relative; display:flex; align-items:center; min-height:158px; padding:28px 78px; overflow:hidden; border-radius:28px; background:radial-gradient(500px 210px at 80% 100%,rgba(55,75,255,.48),transparent 65%),linear-gradient(110deg,#102f82,#071b4b 62%,#10297a); border:1px solid rgba(68,121,255,.65); box-shadow:0 16px 36px rgba(0,0,0,.2); }
#page-lessons .ls-catalog-hero::before { content:""; position:absolute; width:300px; height:300px; top:-150px; left:-55px; border-radius:50%; background:rgba(3,16,64,.42); }
#page-lessons .ls-catalog-hero::after { content:""; position:absolute; right:70px; bottom:-18px; width:220px; height:180px; background:url('mascot/it-robot.png') center bottom/contain no-repeat; filter:drop-shadow(0 10px 14px rgba(0,0,0,.28)); }
#page-lessons .ls-catalog-hero h3,#page-lessons .ls-catalog-hero p { position:relative; z-index:1; color:#fff; } #page-lessons .ls-catalog-hero h3 { max-width:680px; margin:0 0 8px; font-size:2rem; } #page-lessons .ls-catalog-hero h3::before { content:"</> O'RGANISH MARKAZI"; display:block; margin-bottom:9px; color:#22d3ee; font-size:.74rem; font-weight:800; letter-spacing:.1em; } #page-lessons .ls-catalog-hero p { color:rgba(211,225,255,.78); font-size:1rem; }
#page-lessons #lsOverallSlot,#page-lessons #lsContinueSlot { display:none; }
#page-lessons .ls-topics-head { margin:18px 0 14px; color:var(--text); }
#page-lessons .ls-courses-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start; }
#page-lessons .ls-course-card { display:grid; grid-template-columns:112px minmax(0,1fr); grid-template-rows:minmax(92px,1fr) 17px 6px 43px; gap:7px 20px; height:214px; padding:18px 26px 16px 18px; border-radius:54px; background:radial-gradient(160px 130px at 99% 98%,color-mix(in srgb,var(--ls-color,var(--primary)) 37%,transparent),transparent 74%),radial-gradient(200px 150px at 0% 0%,color-mix(in srgb,var(--ls-color,var(--primary)) 25%,transparent),transparent 72%),#081c38; border:1px solid color-mix(in srgb,var(--ls-color,var(--primary)) 38%,rgba(148,163,184,.16)); box-shadow:0 12px 24px rgba(0,0,0,.22); }
#page-lessons .ls-course-card::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(132deg,rgba(255,255,255,.06),transparent 39%); }
#page-lessons .ls-course-icon { grid-row:1 / 3; grid-column:1; align-self:start; width:92px; height:92px; border-radius:32px; color:#fff; background:color-mix(in srgb,var(--ls-color,var(--primary)) 37%,#0b1b37); border-color:color-mix(in srgb,var(--ls-color,var(--primary)) 68%,transparent); font-size:3rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 20px color-mix(in srgb,var(--ls-color,var(--primary)) 22%,transparent); }
#page-lessons .ls-course-id { grid-row:1; grid-column:2; align-self:center; } #page-lessons .ls-course-id h4 { color:#f8fbff; font-size:1.12rem; } #page-lessons .ls-course-tagline { color:#a8b9d6; font-size:.88rem; }
#page-lessons .ls-course-side { display:none; } #page-lessons .ls-course-meta { grid-row:2; grid-column:2; color:#93a8cb; font-size:.79rem; } #page-lessons .ls-status { display:none; }
#page-lessons .ls-course-progress { grid-row:3; grid-column:2; margin:0; } #page-lessons .ls-course-progress-track { background:rgba(148,163,184,.22); } #page-lessons .ls-course-progress b { color:#aebfe0; }
#page-lessons .ls-course-action { grid-row:4; grid-column:2; min-height:43px; background:color-mix(in srgb,var(--ls-color,var(--primary)) 19%,transparent); border-color:color-mix(in srgb,var(--ls-color,var(--primary)) 85%,transparent); color:#fff; }
#page-lessons .ls-course-card:hover { transform:translateY(-3px); filter:brightness(1.08); }
[data-theme="light"] #page-lessons .ls-catalog-hero { background:radial-gradient(500px 220px at 80% 100%,#b9ceff,transparent 65%),linear-gradient(110deg,#dceaff,#f8fbff 70%); border-color:#bad0ff; box-shadow:0 14px 30px rgba(30,64,175,.11); } [data-theme="light"] #page-lessons .ls-catalog-hero h3 { color:#10204a; } [data-theme="light"] #page-lessons .ls-catalog-hero h3::before { color:#087eb9; } [data-theme="light"] #page-lessons .ls-catalog-hero p { color:#526684; }
[data-theme="light"] #page-lessons .ls-course-card { background:radial-gradient(170px 130px at 99% 98%,color-mix(in srgb,var(--ls-color,var(--primary)) 15%,transparent),transparent 75%),radial-gradient(180px 150px at 0% 0%,color-mix(in srgb,var(--ls-color,var(--primary)) 12%,transparent),transparent 72%),#fff; border-color:color-mix(in srgb,var(--ls-color,var(--primary)) 28%,#dce4f0); box-shadow:0 8px 18px rgba(15,23,42,.08); } [data-theme="light"] #page-lessons .ls-course-id h4 { color:#17213a; } [data-theme="light"] #page-lessons .ls-course-tagline,[data-theme="light"] #page-lessons .ls-course-meta,[data-theme="light"] #page-lessons .ls-course-progress b { color:#61718b; } [data-theme="light"] #page-lessons .ls-course-action { color:#17213a; }
@media (max-width:1100px){#page-lessons .ls-courses-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:680px){#page-lessons.active{padding:13px 12px 28px}#page-lessons .ls-catalog-hero{min-height:126px;padding:20px 18px;border-radius:22px}#page-lessons .ls-catalog-hero::after{right:0;width:110px;height:112px;opacity:.75}#page-lessons .ls-catalog-hero h3{max-width:calc(100% - 80px);font-size:1.25rem}#page-lessons .ls-catalog-hero p{max-width:calc(100% - 70px);font-size:.78rem}#page-lessons .ls-courses-grid{grid-template-columns:1fr;gap:12px}#page-lessons .ls-course-card{height:194px;border-radius:28px;grid-template-columns:74px minmax(0,1fr);padding:15px}#page-lessons .ls-course-icon{width:62px;height:62px;border-radius:21px;font-size:2rem}#page-lessons .ls-course-action{min-height:38px}}

/* Darslar katalogi: avvalgi vertikal ro'yxat ko'rinishiga qaytarildi. */
#page-lessons.active { max-width:none; margin:0; padding:0; }
#page-lessons #lsOverallSlot,#page-lessons #lsContinueSlot { display:block; }
#page-lessons .ls-section-head { margin-bottom:24px; padding:0; border:0; border-radius:0; background:transparent; }
#page-lessons .ls-section-head h3 { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; margin-bottom:6px; color:var(--text); }
#page-lessons .ls-section-head p { color:var(--muted); font-size:.95rem; max-width:640px; line-height:1.5; }
#page-lessons .ls-topics-head { margin:4px 0 16px; }
#page-lessons .ls-courses-grid { display:flex; grid-template-columns:none; flex-direction:column; gap:12px; width:100%; max-width:none; }
#page-lessons .ls-course-card { position:relative; display:flex; align-self:stretch; flex:0 0 100%; width:100% !important; max-width:none !important; box-sizing:border-box; align-items:center; gap:18px; height:auto; min-height:104px; padding:18px 24px; border-radius:24px; background:linear-gradient(90deg,color-mix(in srgb,var(--ls-color,var(--primary)) 8%,var(--card)),var(--card) 45%); border:1px solid color-mix(in srgb,var(--ls-color,var(--primary)) 28%,var(--border)); box-shadow:0 5px 14px rgba(15,23,42,.05); color:inherit; overflow:hidden; }
#page-lessons .ls-course-card::after { content:""; position:absolute; right:-65px; top:50%; width:190px; height:190px; border-radius:50%; transform:translateY(-50%); background:color-mix(in srgb,var(--ls-color,var(--primary)) 9%,transparent); pointer-events:none; }
#page-lessons .ls-course-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--ls-color,var(--primary)) 55%,var(--border)); box-shadow:0 11px 22px color-mix(in srgb,var(--ls-color,var(--primary)) 12%,transparent); }
#page-lessons .ls-course-icon { width:50px; height:50px; border-radius:16px; font-size:1.5rem; background:color-mix(in srgb,var(--ls-color,var(--primary)) 14%,transparent); border:1px solid color-mix(in srgb,var(--ls-color,var(--primary)) 26%,transparent); box-shadow:none; }
#page-lessons .ls-course-id { position:relative; z-index:1; flex:1; } #page-lessons .ls-course-id h4 { color:var(--text); } #page-lessons .ls-course-tagline { color:var(--muted); }
#page-lessons .ls-course-side { position:relative; z-index:1; display:flex; margin-right:8px; } #page-lessons .ls-course-meta { display:flex; margin:5px 0 0; } #page-lessons .ls-course-progress,#page-lessons .ls-course-action { display:none; }
@media (max-width:560px) { #page-lessons .ls-course-card { min-height:92px; padding:15px; gap:13px; } #page-lessons .ls-course-side { margin-right:0; } }