/* LVL V1.14.1 — Mobile UX + Plan Identity + Auth Feedback */
.notification-bell{width:19px;height:19px;display:grid;place-items:center}
.notification-bell svg{width:19px;height:19px;fill:none;stroke:#d7d9e4;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.notification-bell svg .accent{stroke:#a653ff}
.notification-btn:hover .notification-bell svg{stroke:#fff}

.sidebar-plan-card{grid-template-columns:38px 1fr;align-items:start;gap:10px;padding:13px;background:radial-gradient(circle at 18% 0,rgba(135,56,235,.17),transparent 42%),linear-gradient(145deg,rgba(81,22,145,.16),rgba(18,16,28,.78))}
.sidebar-plan-icon{width:38px;height:38px;border-radius:11px;font-size:10px;letter-spacing:-.04em}
.sidebar-plan-copy{min-width:0}.sidebar-plan-copy .eyebrow{font-size:7px}.sidebar-plan-copy strong{font-size:14px;margin-top:3px;color:#f4efff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-plan-copy small{font-size:8px;line-height:1.4;margin-top:3px}
.sidebar-plan-meta{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.sidebar-plan-meta>span{font-size:8px;color:#9d91b7;line-height:1.35}.sidebar-plan-meta .premium-btn{padding:7px 10px;white-space:nowrap}
.sidebar-plan-card[data-plan-kind="full"]{border-color:rgba(72,199,146,.28);background:radial-gradient(circle at 18% 0,rgba(72,199,146,.12),transparent 42%),linear-gradient(145deg,rgba(17,65,49,.18),rgba(18,16,28,.78))}
.sidebar-plan-card[data-plan-kind="paid"]{border-color:rgba(166,83,255,.34)}

/* Auth feedback is now impossible to miss. */
.auth-feedback{display:none;min-height:0!important;margin:16px 0 0!important;padding:14px 15px!important;border:1px solid #353044!important;border-radius:14px!important;background:linear-gradient(145deg,#14131d,#101018)!important;color:#d8d5e2!important;font-size:12px!important;font-weight:720;line-height:1.5;box-shadow:0 12px 34px rgba(0,0,0,.22)}
.auth-feedback:not(:empty){display:block}.auth-feedback:not(:empty)::before{content:'●';display:inline-block;margin-right:9px;color:#9d5cff;font-size:9px;vertical-align:2px}
.auth-feedback.success{border-color:rgba(73,201,154,.38)!important;background:linear-gradient(145deg,rgba(25,62,50,.42),#101018)!important;color:#baf0dc!important}.auth-feedback.success::before{content:'✓';color:#65d8ad;font-size:13px;vertical-align:0}
.auth-feedback.error{border-color:rgba(255,103,125,.4)!important;background:linear-gradient(145deg,rgba(74,27,37,.45),#101018)!important;color:#ffc0ca!important}.auth-feedback.error::before{content:'!';color:#ff8295;font-size:13px;vertical-align:0}
.auth-form-head p{font-size:13px!important;line-height:1.55}.auth-form-head strong{color:#cbb8ff}

/* Course state has one source of truth: AccessService. Hide legacy commercial badge. */
.catalog-badge.premium{display:none!important}
.catalog-card-actions .btn{background:#151821!important;border-color:#303548!important;color:#e7e8ef!important;box-shadow:none!important}
.catalog-card-actions .btn.primary{background:linear-gradient(135deg,#8938ef,#6927d8)!important;border-color:rgba(158,81,255,.42)!important;color:#fff!important}
.catalog-card-actions .btn:disabled{background:#151821!important;color:#777f91!important;border-color:#292e3c!important;opacity:.72!important}
.access-card-locked .catalog-card-actions .btn:not(.journey-btn){background:#12151d!important;color:#b8bdca!important;border-color:#2c3140!important}

@media(max-width:850px){
  .sidebar-premium.sidebar-plan-card{display:grid}
}

@media(max-width:620px){
  .main-content{padding-inline:12px}
  /* Overview: 2-column compact dashboard instead of three tall stacked cards. */
  .home-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .home-kpi-card{min-height:142px!important;padding:14px!important;border-radius:15px!important}
  .home-kpi-card .kpi-copy h3{font-size:16px!important;line-height:1.15;margin:7px 0 8px}
  .home-kpi-card .eyebrow{font-size:8px}
  .plan-card .clipboard-visual,.level-card .hex-level{display:none!important}
  .step-track{margin-top:12px}.step-track i{width:25px;height:25px;font-size:9px}.step-track i:not(:last-child):after{width:13px;left:24px}
  .plan-card .step-track i:nth-child(n+4){display:none}.plan-card .kpi-copy>small{display:none}
  .level-card .level-rank{font-size:8px;padding:4px 7px}.level-card .xp-line{font-size:9px;margin:10px 0 6px}.level-card .progress{width:100%;height:5px}.level-card .kpi-copy>small{font-size:8px;margin-top:8px}
  .streak-home-card{grid-column:1/-1!important;min-height:108px!important}.streak-home-card .kpi-copy{display:grid;grid-template-columns:1fr auto;grid-template-areas:'label week' 'title week' 'copy week';align-items:center;gap:0 10px}.streak-home-card .eyebrow{grid-area:label}.streak-home-card h3{grid-area:title;font-size:20px!important;margin:5px 0}.streak-home-card p{grid-area:copy;margin:0!important;font-size:9px!important}.streak-home-card .week-dots{grid-area:week;margin:0!important;gap:4px}.streak-home-card .week-dots span{font-size:6px;gap:3px}.streak-home-card .week-dots i{width:20px;height:20px;font-size:8px}

  /* Catalog and home courses stay two-up on phones. */
  .course-grid,.large-grid,.catalog-grid,.home-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .visual-course-card{border-radius:15px!important;min-width:0!important}
  .course-cover{height:76px!important;padding:9px!important}.course-cover .course-icon{width:34px!important;height:34px!important;border-radius:9px!important;font-size:11px!important}.cover-badge{right:7px!important;bottom:7px!important;padding:4px 6px!important;font-size:6px!important}
  .course-body{padding:10px!important}.catalog-badges{gap:4px!important;margin-bottom:5px!important}.catalog-badge,.access-badge{font-size:6px!important;padding:3px 5px!important}
  .visual-course-card .course-meta{font-size:6px!important;gap:5px}.visual-course-card .course-meta span:last-child{text-align:right}
  .visual-course-card h4{font-size:13px!important;line-height:1.18;margin:5px 0 4px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .visual-course-card p{font-size:8px!important;line-height:1.4!important;min-height:34px!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .catalog-card-actions{grid-template-columns:1fr 30px!important;gap:6px!important;margin-top:9px!important}.catalog-card-actions .btn{min-width:0;padding:7px 5px!important;font-size:7px!important;line-height:1.15}.catalog-card-actions .journey-btn{width:30px!important;height:30px!important;padding:0!important}
  .catalog-card-actions:has(.access-unlock-inline) .access-unlock-inline{grid-column:1/-1;font-size:7px!important}
  .course-progress-caption{font-size:7px}.visual-course-card .progress{margin-top:8px!important;height:4px!important}
  .next-lesson{margin-top:8px!important}.next-lesson small{font-size:6px!important}.next-lesson strong{font-size:7px!important}.next-lesson button{width:26px!important;height:26px!important;font-size:15px!important}
  .home-course-empty{grid-column:1/-1}

  .catalog-hero{padding:20px!important;border-radius:18px!important}.catalog-hero h2{font-size:29px!important}.catalog-hero p{font-size:12px!important;line-height:1.55!important}.catalog-toolbar{gap:10px!important}.catalog-search{min-height:48px}.catalog-result-head{margin-top:20px}
  .auth-card{padding:20px!important}.auth-feedback{font-size:12px!important;padding:13px 14px!important}
}

@media(max-width:380px){
  .visual-course-card p{display:none}.catalog-badges .catalog-badge:not(.access-badge){display:none}.course-cover{height:70px!important}.course-body{padding:9px!important}
  .streak-home-card .week-dots span:nth-child(-n+2){display:none}
}


/* Approved course icons render as neon assets across cards and learning chrome. */
.course-cover .course-icon img,.course-visual-icon img,.lesson-course-icon img,.course-performance-icon img,.mini-course-icon img{display:block;width:76%;height:76%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(166,83,255,.18))}
.course-cover .course-icon img,.course-visual-icon img{width:80%;height:80%}

@media(max-width:760px){
  /* Challenges + achievements must stay 2x2 on mobile. */
  .challenge-grid-v16,.achievement-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .challenge-card-v16,.achievement-card-v16{padding:14px!important;border-radius:15px!important;min-height:0!important}
  .challenge-card-v16 h3{font-size:15px!important;line-height:1.15!important;margin:12px 0 6px!important}
  .achievement-card-v16 h3{font-size:13px!important;line-height:1.2!important}
  .challenge-card-v16 p,.achievement-card-v16 p{font-size:8px!important;line-height:1.45!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .challenge-progress{padding-top:12px!important}
  .challenge-progress-line{font-size:7px!important}
  .challenge-reward{margin-top:10px!important;gap:6px!important;align-items:flex-end!important;flex-wrap:wrap!important}
  .challenge-reward strong{font-size:9px!important}
  .challenge-reward .btn{padding:7px 9px!important;font-size:8px!important}
  .achievement-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .achievement-summary-grid>div{padding:11px!important}

  /* Stats page keeps compact 2x2 blocks on mobile. */
  .learning-pulse{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding:16px!important}
  .learning-pulse>div:first-child{grid-column:1/-1}
  .pulse-ring{justify-self:start!important}
  .pulse-factors{grid-column:1/-1!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pulse-factor:last-child{grid-column:1/-1}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stat-card{padding:14px!important;border-radius:15px!important}
  .stat-card span{font-size:10px!important}
  .stat-card strong{font-size:22px!important;margin:6px 0!important}
  .stat-card small{font-size:9px!important;line-height:1.4!important}
  .stats-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stats-detail-grid.stats-history-grid{grid-template-columns:1fr!important}
  .mastery-buckets{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .mastery-buckets>div:last-child{grid-column:1/-1}

  /* Level Path rewards also stay two-up when available. */
  .level-path-rewards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:620px){
  .challenge-grid-v16,.achievement-gallery,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:380px){
  .challenge-grid-v16,.achievement-gallery,.stats-grid,.pulse-factors,.level-path-rewards{grid-template-columns:1fr!important}
}


/* =========================================================
   LVL V1.14.2A — ACTUAL VISUAL APPLY FIX
   Versioned asset to force mobile browsers/CDN to fetch it.
   ========================================================= */

/* Approved course artwork: bind directly to the real rendered card IDs.
   This does not depend on app.js patches and therefore works with protected app.1105.js. */
.visual-course-card[data-course-id] .course-icon{
  overflow:hidden!important;
  font-size:0!important;
  color:transparent!important;
  background-color:#111521!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  border:1px solid rgba(255,255,255,.08)!important;
}

/* The previous 1.14.2 had a <=380px fallback to one column.
   User explicitly wants 2x2 even on normal phone widths, so these rules override it. */
@media(max-width:760px){
  .challenge-grid-v16,
  .achievement-gallery,
  .stats-grid,
  .level-path-track{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  /* Level Path: actual phase cards in 2x2, not only the tiny reward chips. */
  .level-path-track:before{display:none!important}
  .level-path-phase{display:block!important;min-width:0!important}
  .level-path-node{width:31px!important;height:31px!important;border-radius:10px!important;margin:0 0 7px 3px!important}
  .level-path-node span{font-size:10px!important}
  .level-path-phase-body{padding:11px!important;border-radius:14px!important;min-height:155px!important}
  .level-path-phase-top{display:block!important}
  .level-path-phase-top h4{font-size:13px!important;line-height:1.15!important;margin:3px 0 6px!important}
  .level-path-status{display:inline-block!important;font-size:6px!important;padding:4px 6px!important;margin-bottom:5px!important}
  .level-path-phase-body>p{font-size:7px!important;line-height:1.4!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0 8px!important}
  .level-path-lessons{font-size:7px!important}
  .level-path-rewards{grid-template-columns:1fr!important;gap:6px!important;margin-top:8px!important}
  .level-path-reward{grid-template-columns:34px 1fr!important;gap:7px!important;min-height:52px!important;padding:7px!important;border-radius:10px!important}
  .level-path-reward .journey-asset-image{width:34px!important;height:34px!important}
  .level-path-reward .journey-asset-placeholder{width:32px!important;height:32px!important}
  .level-path-reward small{font-size:6px!important}.level-path-reward strong{font-size:8px!important}.level-path-reward span{font-size:6px!important}

  /* Challenges compact enough to genuinely fit two across. */
  .challenge-card-v16{padding:12px!important;border-radius:14px!important;min-height:205px!important}
  .challenge-card-v16 h3{font-size:14px!important;line-height:1.16!important;margin:11px 0 6px!important}
  .challenge-card-v16 p{font-size:7.5px!important;line-height:1.42!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .challenge-type,.challenge-state{font-size:6px!important}.challenge-state{padding:4px 5px!important}
  .challenge-progress{padding-top:11px!important}.challenge-progress-line{font-size:7px!important}
  .challenge-reward{gap:5px!important;align-items:flex-end!important;flex-wrap:wrap!important;margin-top:9px!important}
  .challenge-reward strong{font-size:9px!important}.challenge-reward .btn{padding:6px 8px!important;font-size:7px!important}

  /* General achievements: 2x2 all the way down. */
  .achievement-card-v16{padding:12px!important;border-radius:14px!important;min-height:170px!important;gap:7px!important}
  .achievement-medal{width:38px!important;height:38px!important;border-radius:11px!important;font-size:16px!important}
  .achievement-card-v16 h3{font-size:12px!important;line-height:1.16!important}
  .achievement-card-v16 p{font-size:7px!important;line-height:1.4!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .achievement-footer{font-size:6px!important}.achievement-progress-mini{margin-top:6px!important}
  .achievement-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .achievement-summary-grid>div{padding:10px!important}.achievement-summary-grid strong{font-size:17px!important}

  /* Statistics: the page's compact metric surfaces are also 2x2. */
  .stats-grid{gap:10px!important}
  .stat-card{padding:12px!important;border-radius:14px!important;min-width:0!important}
  .stat-card span{font-size:9px!important}.stat-card strong{font-size:20px!important;margin:5px 0!important}.stat-card small{font-size:7.5px!important;line-height:1.35!important}
  .learning-pulse{grid-template-columns:minmax(0,1fr) 82px!important;gap:10px!important;padding:14px!important}
  .learning-pulse>div:first-child{min-width:0!important}
  .learning-pulse h3{font-size:15px!important}.learning-pulse p{font-size:7.5px!important;line-height:1.4!important}
  .pulse-ring{width:76px!important;height:76px!important;justify-self:end!important}.pulse-ring span{font-size:22px!important}
  .pulse-factors{grid-column:1/-1!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .pulse-factor{padding:9px!important}.pulse-factor span{font-size:6px!important}.pulse-factor strong{font-size:12px!important}
  .pulse-factor:last-child{grid-column:1/-1}
  .stats-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stats-detail-grid.stats-history-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stats-detail-grid>.panel{min-width:0!important;padding:12px!important}
  .stats-detail-grid .panel-head h3{font-size:12px!important}.stats-detail-grid .panel-head small{font-size:7px!important}
  .course-performance-row{padding:9px!important;gap:8px!important}.course-performance-icon{width:30px!important;height:30px!important}
  .course-performance-main strong{font-size:9px!important}.course-performance-main small{font-size:7px!important}
  .course-performance-metrics{grid-template-columns:1fr!important;gap:4px!important}.course-performance-metrics span{font-size:7px!important;padding:5px!important}.course-performance-metrics b{font-size:9px!important}
  .session-row{grid-template-columns:26px 1fr!important;gap:7px!important}.session-kind{width:26px!important;height:26px!important}.session-row strong{font-size:9px!important}.session-row small,.session-row>span:last-child{font-size:7px!important}
  .mastery-buckets{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.mastery-buckets>div{padding:10px!important}.mastery-buckets>div:last-child{grid-column:1/-1}.mastery-buckets span{font-size:7px!important}.mastery-buckets strong{font-size:19px!important}
}

/* Critical: keep 2x2 even on the ~360 CSS-pixel viewport used by many Android phones. */
@media(max-width:380px){
  .challenge-grid-v16,
  .achievement-gallery,
  .stats-grid,
  .level-path-track,
  .stats-detail-grid,
  .stats-detail-grid.stats-history-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .challenge-card-v16,.achievement-card-v16,.level-path-phase-body{padding:10px!important}
  .challenge-card-v16 h3{font-size:13px!important}.achievement-card-v16 h3,.level-path-phase-top h4{font-size:11px!important}
}


/* =========================================================
   LVL V1.14.2B — COURSE BACKGROUND ARTWORK
   Cartoonized thematic cover art for each course card.
   The artwork sits behind the icon/badge with slightly reduced visual strength.
   ========================================================= */
.visual-course-card[data-course-id] .course-cover{
  isolation:isolate;
}

.visual-course-card[data-course-id] .course-cover::before{
  background:
    linear-gradient(180deg, rgba(7,10,16,.18) 0%, rgba(7,10,16,.36) 48%, rgba(7,10,16,.62) 100%),
    linear-gradient(90deg, rgba(7,10,16,.42) 0%, rgba(7,10,16,.14) 28%, rgba(7,10,16,.14) 72%, rgba(7,10,16,.42) 100%),
    var(--lvl-course-bg) var(--lvl-course-bg-position, center center) / cover no-repeat,
    radial-gradient(circle at 75% 15%, color-mix(in srgb,var(--accent) 34%,transparent),transparent 40%),
    linear-gradient(135deg, color-mix(in srgb,var(--accent) 18%,#11131b), #0c0f16) !important;
}

.visual-course-card[data-course-id] .cover-pattern{
  z-index:1;
  opacity:.12!important;
}

.visual-course-card[data-course-id] .cover-pattern::after{
  display:none!important;
}

.visual-course-card[data-course-id] .course-icon,
.visual-course-card[data-course-id] .cover-badge{
  z-index:2;
}

.visual-course-card[data-course-id="html"]{--lvl-course-bg:url("assets/course-backgrounds/html-v1142b.webp");--lvl-course-bg-position:center center;}
.visual-course-card[data-course-id="js"]{--lvl-course-bg:url("assets/course-backgrounds/js-v1142b.webp");--lvl-course-bg-position:center center;}
.visual-course-card[data-course-id="math"]{--lvl-course-bg:url("assets/course-backgrounds/math-v1142b.webp");--lvl-course-bg-position:center center;}
.visual-course-card[data-course-id="nl-basic"]{--lvl-course-bg:url("assets/course-backgrounds/nl-basic-v1142b.webp");--lvl-course-bg-position:center center;}
.visual-course-card[data-course-id="nl-basic-pro"]{--lvl-course-bg:url("assets/course-backgrounds/nl-basic-pro-v1142b.webp");--lvl-course-bg-position:center center;}
.visual-course-card[data-course-id="nl-intermediate"]{--lvl-course-bg:url("assets/course-backgrounds/nl-intermediate-v1142b.webp");--lvl-course-bg-position:center center;}
.visual-course-card[data-course-id="nl-intermediate-pro"]{--lvl-course-bg:url("assets/course-backgrounds/nl-intermediate-pro-v1142b.webp");--lvl-course-bg-position:center center;}
.visual-course-card[data-course-id="nl-advanced"]{--lvl-course-bg:url("assets/course-backgrounds/nl-advanced-v1142b.webp");--lvl-course-bg-position:center center;}
.visual-course-card[data-course-id="nl-advanced-pro"]{--lvl-course-bg:url("assets/course-backgrounds/nl-advanced-pro-v1142b.webp");--lvl-course-bg-position:center center;}


/* =========================================================
   LVL V1.15.2 — ICONS PRESENT ON FIRST PAINT
   Course branding is real <img> markup from the first render.
   No click/re-render is required to replace text placeholders.
   ========================================================= */
.visual-course-card[data-course-id] .course-icon{
  background-image:none!important;
  overflow:hidden!important;
  font-size:0!important;
  color:transparent!important;
}
.course-icon img,.course-visual-icon img,.lesson-course-icon img,.course-performance-icon img,.mini-course-icon img{
  display:block!important;
  object-fit:contain!important;
  max-width:100%!important;
  max-height:100%!important;
}
.course-icon img[data-course-icon="nl-intermediate-pro"],
.course-visual-icon img[data-course-icon="nl-intermediate-pro"],
.lesson-course-icon img[data-course-icon="nl-intermediate-pro"],
.course-performance-icon img[data-course-icon="nl-intermediate-pro"],
.mini-course-icon img[data-course-icon="nl-intermediate-pro"]{
  filter:hue-rotate(-18deg) saturate(1.12) drop-shadow(0 8px 18px rgba(83,142,255,.18))!important;
}
.course-icon img[data-course-icon="nl-advanced-pro"],
.course-visual-icon img[data-course-icon="nl-advanced-pro"],
.lesson-course-icon img[data-course-icon="nl-advanced-pro"],
.course-performance-icon img[data-course-icon="nl-advanced-pro"],
.mini-course-icon img[data-course-icon="nl-advanced-pro"]{
  filter:saturate(1.18) brightness(1.06) drop-shadow(0 8px 18px rgba(73,201,154,.18))!important;
}