/* LVL V1.26.9 — COURSE VISUAL SYSTEM
   One visual source. Compact = mark. Large = cover. No post-render brand swapping.
*/

/* Hide only the course grid during the very first JS paint. This converts the old
   visible icon/background swap into one stable first render. */
html.lvl-cv-booting:not(.lvl-cv-first-render-ready) #homeCourseGrid{visibility:hidden!important}

[data-lvl-visual-key]{
  --lvl-cv-primary:#7a5cff;
  --lvl-cv-secondary:#48a5ff;
  --lvl-cv-rgb:122,92,255;
}
[data-lvl-visual-key] .progress span,
[data-lvl-visual-key] .course-progress span,
[data-lvl-visual-key] .lvl-v-mini-progress i{
  background:linear-gradient(90deg,var(--lvl-cv-primary),var(--lvl-cv-secondary))!important;
  box-shadow:0 0 10px rgba(var(--lvl-cv-rgb),.24)!important;
}

/* ---------- canonical mark ---------- */
.lvl-cv-mark-picture{display:block;width:100%;height:100%;margin:0!important;padding:0!important}
.lvl-cv-mark-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;margin:0!important;padding:0!important;border:0!important}

/* ---------- HOME / large course cards ---------- */
#view-home #homeCourseGrid .lvl-cv-home-card{
  border-color:rgba(var(--lvl-cv-rgb),.32)!important;
  background:#0b1018!important;
  box-shadow:0 14px 34px rgba(0,0,0,.18),0 0 24px rgba(var(--lvl-cv-rgb),.035)!important;
}
#view-home #homeCourseGrid .lvl-cv-home-card .course-cover,
.lvl-cv-catalog-source .course-cover,
.lvl-cv-featured-card .course-cover{
  position:relative!important;isolation:isolate!important;overflow:hidden!important;
  background-color:#08101b!important;
  background-image:
    linear-gradient(180deg,rgba(4,7,13,.02) 0%,rgba(4,7,13,.12) 46%,rgba(4,7,13,.60) 100%),
    var(--lvl-cv-cover)!important;
  background-size:100% 100%,cover!important;
  background-position:center,left center!important;
  background-repeat:no-repeat!important;
}
#view-home #homeCourseGrid .lvl-cv-home-card .course-cover::before,
.lvl-cv-catalog-source .course-cover::before,
.lvl-cv-featured-card .course-cover::before{display:none!important}
#view-home #homeCourseGrid .lvl-cv-home-card .cover-pattern,
.lvl-cv-catalog-source .cover-pattern,
.lvl-cv-featured-card .cover-pattern{display:none!important}
#view-home #homeCourseGrid .lvl-cv-home-card .course-cover::after,
.lvl-cv-catalog-source .course-cover::after,
.lvl-cv-featured-card .course-cover::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,10,18,.03) 0%,rgba(6,10,18,.08) 50%,rgba(6,10,18,.20) 100%)!important;
}
#view-home #homeCourseGrid .lvl-cv-home-card .course-cover>* ,
.lvl-cv-catalog-source .course-cover>*,
.lvl-cv-featured-card .course-cover>*{position:relative;z-index:2}
#view-home #homeCourseGrid .lvl-cv-home-card .course-cover{height:132px!important}
#view-home #homeCourseGrid .lvl-cv-home-card .lvl-cv-mark-slot,
.lvl-cv-catalog-source .lvl-cv-mark-slot,
.lvl-cv-featured-card .lvl-cv-mark-slot{
  position:absolute!important;left:12px!important;top:12px!important;right:auto!important;bottom:auto!important;
  width:58px!important;height:58px!important;margin:0!important;padding:0!important;
  border-radius:16px!important;overflow:hidden!important;
  background:rgba(7,11,20,.72)!important;border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.36),0 0 20px rgba(var(--lvl-cv-rgb),.16)!important;
  backdrop-filter:blur(10px)!important;
}
#view-home #homeCourseGrid .lvl-cv-home-card .cover-badge,
.lvl-cv-catalog-source .cover-badge,
.lvl-cv-featured-card .cover-badge{
  top:12px!important;right:12px!important;bottom:auto!important;left:auto!important;
  max-width:calc(100% - 88px)!important;
  border-color:rgba(var(--lvl-cv-rgb),.30)!important;
  background:rgba(6,10,18,.72)!important;
}
#view-home #homeCourseGrid .lvl-cv-home-card .course-body{background:linear-gradient(180deg,#0d131d,#0a0f17)!important}

/* ---------- CATALOG compact rows: MARK only, never cover ---------- */
#view-courses .lvl-v-course-row.lvl-cv-compact-row,
#view-catalog .lvl-v-course-row.lvl-cv-compact-row,
#view-course-catalog .lvl-v-course-row.lvl-cv-compact-row{
  position:relative!important;overflow:hidden!important;isolation:isolate!important;
  grid-template-columns:118px minmax(0,1fr) 112px!important;
  min-height:118px!important;border-radius:20px!important;
  border-color:rgba(var(--lvl-cv-rgb),.31)!important;
  background:
    radial-gradient(150px 120px at 58px 50%,rgba(var(--lvl-cv-rgb),.19),transparent 72%),
    linear-gradient(90deg,rgba(var(--lvl-cv-rgb),.09),#0a1019 42%,#080d15 100%)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.15)!important;
}
#view-courses .lvl-v-course-row.lvl-cv-compact-row::before,
#view-catalog .lvl-v-course-row.lvl-cv-compact-row::before,
#view-course-catalog .lvl-v-course-row.lvl-cv-compact-row::before{
  content:"";position:absolute;left:80px;top:-40px;width:180px;height:180px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--lvl-cv-rgb),.12),transparent 68%);
}
.lvl-cv-compact-row>*{position:relative;z-index:1}
.lvl-cv-compact-row .lvl-v-course-thumb.lvl-cv-compact-mark{
  width:118px!important;height:118px!important;min-width:118px!important;min-height:118px!important;
  display:grid!important;place-items:center!important;overflow:visible!important;clip-path:none!important;
  background:none!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
}
.lvl-cv-compact-row .lvl-v-course-logo-safe{
  width:104px!important;height:104px!important;display:grid!important;place-items:center!important;position:relative!important;
  border:0!important;background:transparent!important;border-radius:0!important;overflow:visible!important;
}
.lvl-cv-compact-row .lvl-v-course-logo-safe-fallback{display:none!important}
.lvl-cv-compact-row .lvl-v-course-logo-safe img{
  width:104px!important;height:104px!important;max-width:none!important;max-height:none!important;
  display:block!important;object-fit:contain!important;border-radius:18px!important;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.30)) drop-shadow(0 0 18px rgba(var(--lvl-cv-rgb),.16))!important;
}
.lvl-cv-compact-row .lvl-v-course-copy small{color:var(--lvl-cv-primary)!important}
.lvl-cv-compact-row .lvl-v-course-tail em,
.lvl-cv-compact-row .lvl-v-list-open,
.lvl-cv-compact-row .lvl-v-list-main-action{border-color:rgba(var(--lvl-cv-rgb),.32)!important}

/* ---------- COURSE DETAIL / true large artwork ---------- */
#courseDetail .lvl-cv-detail .lvl-cv-detail-hero{
  position:relative!important;isolation:isolate!important;overflow:hidden!important;
  border-color:rgba(var(--lvl-cv-rgb),.30)!important;
  background-color:#0a0f18!important;
  background-image:
    linear-gradient(90deg,rgba(7,10,17,.95) 0%,rgba(7,10,17,.89) 43%,rgba(7,10,17,.52) 72%,rgba(7,10,17,.24) 100%),
    var(--lvl-cv-cover)!important;
  background-size:100% 100%,cover!important;background-position:center,left center!important;background-repeat:no-repeat!important;
}
#courseDetail .lvl-cv-detail .lvl-cv-detail-hero::after{
  content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;border:0!important;border-radius:0!important;
  width:auto!important;height:auto!important;right:auto!important;bottom:auto!important;box-shadow:none!important;
  background:linear-gradient(180deg,rgba(5,8,14,.03),rgba(5,8,14,.22))!important;
}
#courseDetail .lvl-cv-detail .course-detail-copy,
#courseDetail .lvl-cv-detail .lvl-cv-detail-brand{position:relative!important;z-index:2!important}
#courseDetail .lvl-cv-detail .lvl-cv-detail-brand{
  align-self:end!important;min-height:188px!important;
  background:linear-gradient(180deg,rgba(8,12,20,.30),rgba(8,12,20,.76))!important;
  border-color:rgba(var(--lvl-cv-rgb),.28)!important;
  backdrop-filter:blur(8px)!important;
}
#courseDetail .lvl-cv-detail .lvl-cv-detail-brand::before{display:none!important}
#courseDetail .lvl-cv-detail .course-visual-icon.lvl-cv-mark-slot{
  width:84px!important;height:84px!important;border-radius:22px!important;padding:0!important;overflow:hidden!important;
  background:rgba(7,11,19,.58)!important;border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.34),0 0 26px rgba(var(--lvl-cv-rgb),.16)!important;
}
#courseDetail .lvl-cv-detail .course-detail-tags span{border-color:rgba(var(--lvl-cv-rgb),.22)!important}
#courseDetail .lvl-cv-detail .course-detail-actions .primary{box-shadow:0 10px 30px rgba(var(--lvl-cv-rgb),.18)!important}

/* ---------- compact secondary surfaces ---------- */
.lvl-cv-compact-host{display:grid!important;place-items:center!important;overflow:hidden!important;border-radius:12px!important;background:#0b111a!important;border:1px solid rgba(var(--lvl-cv-rgb),.18)!important}
.lvl-cv-compact-host .lvl-cv-mark-picture{width:100%!important;height:100%!important}

@media(max-width:760px){
  #view-home #homeCourseGrid .lvl-cv-home-card .course-cover{height:138px!important}
  #courseDetail .lvl-cv-detail .lvl-cv-detail-hero{
    background-image:
      linear-gradient(180deg,rgba(7,10,17,.50) 0%,rgba(7,10,17,.74) 40%,rgba(7,10,17,.96) 78%,rgba(7,10,17,.99) 100%),
      var(--lvl-cv-cover)!important;
    background-position:center,left center!important;
  }
  #courseDetail .lvl-cv-detail .lvl-cv-detail-brand{min-height:150px!important}
}
@media(max-width:520px){
  #view-courses .lvl-v-course-row.lvl-cv-compact-row,
  #view-catalog .lvl-v-course-row.lvl-cv-compact-row,
  #view-course-catalog .lvl-v-course-row.lvl-cv-compact-row{
    grid-template-columns:108px minmax(0,1fr) 100px!important;min-height:112px!important;
  }
  .lvl-cv-compact-row .lvl-v-course-thumb.lvl-cv-compact-mark{width:108px!important;height:112px!important;min-width:108px!important;min-height:112px!important}
  .lvl-cv-compact-row .lvl-v-course-logo-safe,.lvl-cv-compact-row .lvl-v-course-logo-safe img{width:96px!important;height:96px!important}
  #view-home #homeCourseGrid .lvl-cv-home-card .lvl-cv-mark-slot{width:52px!important;height:52px!important;border-radius:15px!important}
}

/* ---------- V1.27.0 cleanup: deterministic marks + compact detail hero ---------- */
/* Primary visible mark is now a direct WEBP IMG; do not let legacy icon CSS hide/resize it. */
#view-home #homeCourseGrid .lvl-cv-home-card .lvl-cv-mark-slot > .lvl-cv-direct-mark,
.lvl-cv-catalog-source .lvl-cv-mark-slot > .lvl-cv-direct-mark,
.lvl-cv-featured-card .lvl-cv-mark-slot > .lvl-cv-direct-mark,
.lvl-cv-compact-row .lvl-v-course-logo-safe > .lvl-cv-direct-mark,
.lvl-cv-compact-host > .lvl-cv-direct-mark,
.lesson-course-icon > .lvl-cv-direct-mark,
.mini-course-icon > .lvl-cv-direct-mark,
.course-performance-icon > .lvl-cv-direct-mark{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  object-fit:cover!important;
  object-position:center!important;
  border:0!important;
  border-radius:inherit!important;
  background:transparent!important;
  filter:none!important;
  transform:none!important;
}

#view-home #homeCourseGrid .lvl-cv-home-card .lvl-cv-mark-slot{
  background:rgba(7,11,20,.42)!important;
  border-color:rgba(var(--lvl-cv-rgb),.24)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.26),0 0 18px rgba(var(--lvl-cv-rgb),.13)!important;
}

/* Course detail: the cover is the visual identity. Remove the duplicate mark/title block. */
#courseDetail .lvl-cv-detail .lvl-cv-detail-hero{
  grid-template-columns:minmax(0,1fr)!important;
  min-height:0!important;
  gap:0!important;
  padding:24px!important;
}
#courseDetail .lvl-cv-detail .course-detail-copy{
  width:100%!important;
  max-width:none!important;
}
#courseDetail .lvl-cv-detail .lvl-cv-detail-brand,
#courseDetail .lvl-cv-detail .course-visual-card{
  display:none!important;
}
#courseDetail .lvl-cv-detail .course-detail-actions{
  margin-top:16px!important;
}
#courseDetail .lvl-cv-detail .course-detail-stats{
  margin-top:14px!important;
}
@media(max-width:760px){
  #courseDetail .lvl-cv-detail .lvl-cv-detail-hero{
    min-height:0!important;
    padding:18px!important;
  }
  #courseDetail .lvl-cv-detail .course-detail-actions{margin-top:14px!important}
  #courseDetail .lvl-cv-detail .course-detail-stats{margin-top:12px!important;gap:8px!important}
}

/* ---------- V1.27.1 persistence + quieter artwork ---------- */
/* The mark slot owns a CSS fallback as well as the IMG. If a navigation/re-render
   drops or fails the child IMG, the canonical mark remains painted immediately. */
#view-home #homeCourseGrid .lvl-cv-home-card .lvl-cv-mark-slot,
.lvl-cv-catalog-source .lvl-cv-mark-slot,
.lvl-cv-featured-card .lvl-cv-mark-slot{
  background-color:rgba(7,11,20,.46)!important;
  background-image:var(--lvl-cv-mark)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
#view-home #homeCourseGrid .lvl-cv-home-card .lvl-cv-mark-slot:empty,
.lvl-cv-catalog-source .lvl-cv-mark-slot:empty,
.lvl-cv-featured-card .lvl-cv-mark-slot:empty{
  background-image:var(--lvl-cv-mark)!important;
}

/* Reduce cover dominance without dimming text/logo: dark translucent layer sits
   only above the artwork and below UI content. */
#view-home #homeCourseGrid .lvl-cv-home-card .course-cover::before,
.lvl-cv-catalog-source .course-cover::before,
.lvl-cv-featured-card .course-cover::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:rgba(4,8,15,.34)!important;
}
#view-home #homeCourseGrid .lvl-cv-home-card .course-cover::after,
.lvl-cv-catalog-source .course-cover::after,
.lvl-cv-featured-card .course-cover::after{
  z-index:1!important;
  background:linear-gradient(180deg,rgba(4,8,15,.03) 0%,rgba(4,8,15,.10) 46%,rgba(4,8,15,.36) 100%)!important;
}
#view-home #homeCourseGrid .lvl-cv-home-card .course-cover>* ,
.lvl-cv-catalog-source .course-cover>*,
.lvl-cv-featured-card .course-cover>*{z-index:2!important}

/* Same quieter treatment on course detail hero. */
#courseDetail .lvl-cv-detail .lvl-cv-detail-hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:rgba(4,8,15,.28)!important;
}
#courseDetail .lvl-cv-detail .lvl-cv-detail-hero::after{
  z-index:1!important;
  background:linear-gradient(180deg,rgba(5,8,14,.05),rgba(5,8,14,.32))!important;
}
#courseDetail .lvl-cv-detail .course-detail-copy{z-index:2!important}

@media(max-width:760px){
  #view-home #homeCourseGrid .lvl-cv-home-card .course-cover::before{background:rgba(4,8,15,.38)!important}
  #courseDetail .lvl-cv-detail .lvl-cv-detail-hero::before{background:rgba(4,8,15,.36)!important}
}
/* LVL V1.27.8 — canonical course mark owner + no-flicker guard */
#view-home #homeCourseGrid .lvl-cv-home-card .lvl-cv-mark-slot,
.lvl-cv-catalog-source .lvl-cv-mark-slot,
.lvl-cv-featured-card .lvl-cv-mark-slot{
  background-color:rgba(7,11,20,.46)!important;
  background-image:var(--lvl-cv-mark)!important;
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;
  opacity:1!important;visibility:visible!important;
  animation:none!important;transition:none!important;
}
#view-home #homeCourseGrid .lvl-cv-home-card .lvl-cv-mark-slot > .lvl-cv-direct-mark,
.lvl-cv-catalog-source .lvl-cv-mark-slot > .lvl-cv-direct-mark,
.lvl-cv-featured-card .lvl-cv-mark-slot > .lvl-cv-direct-mark,
.lvl-cv-compact-host > .lvl-cv-direct-mark,
.lvl-cv-compact-row .lvl-v-course-logo-safe > .lvl-cv-direct-mark,
.lesson-course-icon > .lvl-cv-direct-mark,.mini-course-icon > .lvl-cv-direct-mark,.course-performance-icon > .lvl-cv-direct-mark{
  display:block!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:0!important;opacity:1!important;visibility:visible!important;object-fit:cover!important;object-position:center!important;border:0!important;border-radius:inherit!important;
  background:transparent!important;filter:none!important;transform:none!important;animation:none!important;transition:none!important;
}
/* Explicitly neutralize legacy V1.16.1 icon CSS only on canonical visual cards. */
.visual-course-card.lvl-cv-home-card[data-course-id] .course-icon{background-image:var(--lvl-cv-mark)!important;background-size:cover!important;background-position:center!important}
.visual-course-card.lvl-cv-home-card[data-course-id] .course-icon img{opacity:1!important;visibility:visible!important}
/* Quieter cover preserved from 1271, without dimming UI text/logo. */
#view-home #homeCourseGrid .lvl-cv-home-card .course-cover::before,.lvl-cv-catalog-source .course-cover::before,.lvl-cv-featured-card .course-cover::before{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;background:rgba(4,8,15,.32)!important;
}
#view-home #homeCourseGrid .lvl-cv-home-card .course-cover>* ,.lvl-cv-catalog-source .course-cover>*,.lvl-cv-featured-card .course-cover>*{z-index:2!important}
/* Detail cleanup from 1270 remains authoritative even if an older app renderer still emits the duplicate block. */
#courseDetail .lvl-cv-detail .lvl-cv-detail-brand{display:none!important}
#courseDetail .lvl-cv-detail .lvl-cv-detail-hero{grid-template-columns:minmax(0,1fr)!important;min-height:0!important;gap:0!important}
#courseDetail .lvl-cv-detail .lvl-cv-detail-hero::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;background:rgba(4,8,15,.28)!important}
#courseDetail .lvl-cv-detail .course-detail-copy{z-index:2!important}