/* ── Coding & Technology World — BWS UI frontend styles ────────────────────────
   No Bootstrap. Child-friendly, bright, creative, interactive.
   Prefixes: lrn-cdng- (landing page)  cdng- (lesson / editor page)
   ──────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
.cdng-hidden { display: none !important; }

/* Breadcrumb (reuses lrn-typ-breadcrumb pattern) */
.cdng-breadcrumb{display:flex;align-items:center;gap:.35rem;font-size:.82rem;flex-wrap:wrap;padding:.75rem 0;color:#9ca3af}
.cdng-breadcrumb a{color:#6b7280;text-decoration:none;font-weight:600;transition:color .15s}
.cdng-breadcrumb a:hover{color:#6366f1}
.cdng-breadcrumb span[aria-current]{color:#1f2937;font-weight:700}
.cdng-breadcrumb span[aria-hidden]{color:#d1d5db;font-size:.9em;user-select:none}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.lrn-cdng-hero{background:linear-gradient(135deg,#eef2ff 0%,#fdf4ff 50%,#fefce8 100%);padding:3rem 0 2rem;text-align:center}
.lrn-cdng-hero-title{font-size:clamp(1.8rem,5vw,2.8rem);font-weight:900;color:#1f2937;margin:0 0 .5rem;line-height:1.1}
.lrn-cdng-hero-title span{color:#6366f1}
.lrn-cdng-hero-sub{font-size:1.05rem;color:#6b7280;max-width:540px;margin:.25rem auto 1.25rem;line-height:1.55}
.lrn-cdng-hero-stats{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-top:.75rem}
.lrn-cdng-hero-stat{display:flex;flex-direction:column;align-items:center}
.lrn-cdng-hero-stat-val{font-size:1.4rem;font-weight:900;color:#6366f1}
.lrn-cdng-hero-stat-lbl{font-size:.72rem;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* Category strip */
.lrn-cdng-cats{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem 0 .6rem;scrollbar-width:thin;scrollbar-color:#a5b4fc #f3f4f6;-webkit-overflow-scrolling:touch}
.lrn-cdng-cats::-webkit-scrollbar{height:4px}
.lrn-cdng-cats::-webkit-scrollbar-thumb{background:#a5b4fc;border-radius:2px}
.lrn-cdng-cat-btn{flex-shrink:0;padding:.38rem 1rem;border-radius:2rem;border:2px solid #e5e7eb;background:#fff;color:#374151;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none;transition:border-color .15s,background .15s,color .15s;font-family:inherit}
.lrn-cdng-cat-btn:hover,.lrn-cdng-cat-btn.active{border-color:#6366f1;background:#6366f1;color:#fff}

/* Lesson card grid */
.lrn-cdng-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.25rem}
.lrn-cdng-card{display:flex;flex-direction:column;text-decoration:none;background:#fff;border-radius:1.25rem;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.07);transition:transform .2s,box-shadow .2s;border:2px solid transparent;position:relative}
.lrn-cdng-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(99,102,241,.15);border-color:#a5b4fc}
.lrn-cdng-card-head{padding:1.1rem 1rem .7rem;display:flex;align-items:flex-start;gap:.7rem}
.lrn-cdng-card-icon{width:44px;height:44px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0}
.lrn-cdng-card-meta{flex:1;min-width:0}
.lrn-cdng-card-cat{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.15rem;opacity:.8}
.lrn-cdng-card-title{font-size:.95rem;font-weight:800;color:#1f2937;margin:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrn-cdng-card-body{padding:0 1rem .75rem;flex:1}
.lrn-cdng-card-desc{font-size:.8rem;color:#6b7280;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 .6rem}
.lrn-cdng-card-badges{display:flex;gap:.3rem;flex-wrap:wrap}
.lrn-cdng-badge{display:inline-flex;align-items:center;gap:.2rem;font-size:.68rem;font-weight:700;border-radius:.3rem;padding:.1rem .4rem;white-space:nowrap}
.lrn-cdng-badge--beginner{background:#d1fae5;color:#065f46}
.lrn-cdng-badge--easy{background:#dcfce7;color:#15803d}
.lrn-cdng-badge--medium{background:#fef3c7;color:#92400e}
.lrn-cdng-badge--hard{background:#fee2e2;color:#991b1b}
.lrn-cdng-badge--expert{background:#fae8ff;color:#7e22ce}
.lrn-cdng-badge--lang{background:#e0e7ff;color:#3730a3}
.lrn-cdng-card-footer{padding:.6rem 1rem .9rem;border-top:1px solid #f3f4f6;display:flex;align-items:center;justify-content:space-between}
.lrn-cdng-card-pts{font-size:.78rem;font-weight:700;color:#6366f1}
.lrn-cdng-card-play{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:800;color:#fff;background:#6366f1;border-radius:2rem;padding:.28rem .85rem;text-decoration:none;transition:background .15s}
.lrn-cdng-card-play:hover{background:#4f46e5}
.lrn-cdng-card-done{position:absolute;top:.5rem;right:.5rem;width:22px;height:22px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff}
.lrn-cdng-card-progress{height:3px;background:#e5e7eb;margin:0 1rem .5rem}
.lrn-cdng-card-progress-fill{height:100%;background:#6366f1;border-radius:1px}

/* Language badge colors */
.lrn-cdng-badge--html{background:#fff7ed;color:#c2410c}
.lrn-cdng-badge--css{background:#fdf2f8;color:#be185d}
.lrn-cdng-badge--js{background:#fffbeb;color:#b45309}
.lrn-cdng-badge--python{background:#f0fdf4;color:#15803d}
.lrn-cdng-badge--php{background:#f5f3ff;color:#6d28d9}
.lrn-cdng-badge--combined{background:#eff6ff;color:#1d4ed8}

/* Empty state */
.lrn-cdng-empty{text-align:center;padding:3rem 1rem;color:#9ca3af}
.lrn-cdng-empty-icon{font-size:3.5rem;display:block;margin-bottom:.75rem}

/* ═══════════════════════════════════════════════════════════════════════════
   LESSON PAGE LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.cdng-lesson-page{display:grid;grid-template-columns:380px 1fr;gap:0;min-height:calc(100vh - 64px)}

/* Content panel (left) */
.cdng-content-panel{background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;overflow-y:auto;max-height:calc(100vh - 64px);position:sticky;top:0}
.cdng-content-inner{padding:1.25rem 1.25rem 2rem;flex:1;overflow-y:auto}

.cdng-lesson-title{font-size:1.2rem;font-weight:900;color:#1f2937;margin:0 0 .6rem;line-height:1.25}
.cdng-intro-text{font-size:.9rem;color:#4b5563;line-height:1.6;margin:0 0 1rem;background:#f0f9ff;border-left:3px solid #6366f1;padding:.6rem .75rem;border-radius:0 .5rem .5rem 0}
.cdng-concept{font-size:.88rem;color:#374151;line-height:1.65;margin-bottom:1rem}
.cdng-concept h2,.cdng-concept h3{font-size:.9rem;font-weight:800;color:#1f2937;margin:.75rem 0 .25rem}
.cdng-concept p{margin:.25rem 0 .6rem}
.cdng-concept code{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:.3rem;padding:.1rem .35rem;font-size:.82rem;font-family:monospace;color:#4f46e5}
.cdng-concept pre{background:#1e1b4b;color:#c7d2fe;border-radius:.5rem;padding:.75rem 1rem;overflow-x:auto;font-size:.83rem;line-height:1.5;margin:.5rem 0}

/* Vocabulary */
.cdng-vocab-section{margin-bottom:1rem}
.cdng-vocab-title{font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;margin:0 0 .5rem}
.cdng-vocab-card{background:#f9fafb;border:1px solid #e5e7eb;border-radius:.75rem;padding:.6rem .75rem .5rem;margin-bottom:.5rem}
.cdng-vocab-term{font-size:.88rem;font-weight:800;color:#1f2937;display:flex;align-items:center;gap:.4rem;margin-bottom:.15rem}
.cdng-vocab-def{font-size:.82rem;color:#6b7280;line-height:1.45;margin:0 0 .3rem}
.cdng-vocab-code{font-size:.78rem;font-family:monospace;background:#ede9fe;color:#5b21b6;border-radius:.3rem;padding:.25rem .5rem;display:inline-block;margin-bottom:.3rem}
.cdng-vocab-speak{border:none;background:none;cursor:pointer;font-size:.85rem;padding:0;opacity:.6;transition:opacity .15s}
.cdng-vocab-speak:hover{opacity:1}

/* Challenge box */
.cdng-challenge-box{background:linear-gradient(135deg,#eff6ff,#fdf4ff);border:2px solid #c7d2fe;border-radius:.75rem;padding:.75rem 1rem;margin-bottom:1rem}
.cdng-challenge-title{font-size:.82rem;font-weight:800;color:#3730a3;margin:0 0 .3rem}
.cdng-challenge-text{font-size:.85rem;color:#374151;margin:0 0 .5rem;line-height:1.55}
.cdng-challenge-status{font-size:.82rem;font-weight:700;padding:.3rem 0;min-height:1.5rem}
.cdng-challenge-status--done{color:#059669}

/* Done button */
.cdng-done-btn{width:100%;padding:.65rem 1rem;border:none;border-radius:.75rem;background:#e5e7eb;color:#9ca3af;font-size:.9rem;font-weight:800;cursor:not-allowed;transition:background .2s,color .2s;font-family:inherit;margin-top:.25rem}
.cdng-done-btn--ready,.cdng-done-btn:not([disabled]){background:#6366f1;color:#fff;cursor:pointer}
.cdng-done-btn:not([disabled]):hover{background:#4f46e5}

/* ═══════════════════════════════════════════════════════════════════════════
   EDITOR PANEL (right)
   ═══════════════════════════════════════════════════════════════════════════ */

.cdng-editor-panel{display:flex;flex-direction:column;height:calc(100vh - 64px);overflow:hidden}

/* Language tabs (combined mode) */
.cdng-lang-tabs{display:flex;gap:2px;padding:.5rem .75rem .25rem;background:#f9fafb;border-bottom:1px solid #e5e7eb}
.cdng-lang-tab{padding:.3rem .8rem;border-radius:.4rem .4rem 0 0;border:none;background:transparent;color:#6b7280;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.cdng-lang-tab.active{background:#fff;color:#6366f1;box-shadow:0 -1px 0 0 #6366f1}

/* Editor toolbar */
.cdng-editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.4rem .75rem;background:#f9fafb;border-bottom:1px solid #e5e7eb;gap:.5rem}
.cdng-lang-pill{font-size:.72rem;font-weight:800;padding:.2rem .55rem;border-radius:.4rem;text-transform:uppercase;letter-spacing:.04em}
.cdng-lang-pill--html{background:#fff7ed;color:#c2410c}
.cdng-lang-pill--css{background:#fdf2f8;color:#be185d}
.cdng-lang-pill--js{background:#fffbeb;color:#b45309}
.cdng-lang-pill--python{background:#f0fdf4;color:#15803d}
.cdng-lang-pill--php{background:#f5f3ff;color:#6d28d9}
.cdng-lang-pill--combined{background:#eff6ff;color:#1d4ed8}
.cdng-toolbar-actions{display:flex;gap:.4rem;align-items:center}
.cdng-auto-hint{font-size:.73rem;color:#9ca3af}
.cdng-run-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .75rem;border:none;border-radius:.5rem;background:#10b981;color:#fff;font-size:.82rem;font-weight:800;cursor:pointer;font-family:inherit;transition:background .15s}
.cdng-run-btn:hover{background:#059669}
.cdng-reset-btn{padding:.3rem .65rem;border:1.5px solid #d1d5db;border-radius:.5rem;background:#fff;color:#6b7280;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s}
.cdng-reset-btn:hover{border-color:#6366f1;color:#6366f1}

/* Code textarea */
.cdng-editor-wrap{flex:1 1 50%;display:flex;flex-direction:column;min-height:0;border-bottom:1px solid #e5e7eb}
.cdng-code-textarea{flex:1;resize:none;border:none;outline:none;padding:.75rem 1rem;font-family:'Fira Code','Fira Mono','Cascadia Code',monospace;font-size:.88rem;line-height:1.65;color:#1e293b;background:#fafbff;tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto}
.cdng-code-textarea::placeholder{color:#cbd5e1;font-style:italic}

/* Preview area */
.cdng-preview-wrap{flex:1 1 50%;display:flex;flex-direction:column;min-height:0}
.cdng-preview-header{padding:.35rem .75rem;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:.73rem;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:.4rem}
.cdng-preview-header::before{content:'●';color:#10b981;font-size:.65rem}
#codePreview{flex:1;width:100%;border:none;background:#fff;min-height:0}
#codeOutput{flex:1;margin:0;padding:.75rem 1rem;font-family:'Fira Code',monospace;font-size:.88rem;line-height:1.65;background:#1e1b4b;color:#c7d2fe;overflow:auto;white-space:pre-wrap;word-break:break-all}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE PANEL TABS
   ═══════════════════════════════════════════════════════════════════════════ */

.cdng-mobile-tabs{display:none;gap:0;border-bottom:2px solid #e5e7eb;background:#fff}
.cdng-mobile-tab{flex:1;padding:.6rem .5rem;border:none;background:transparent;font-size:.82rem;font-weight:700;cursor:pointer;color:#6b7280;font-family:inherit;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}
.cdng-mobile-tab.active{color:#6366f1;border-bottom-color:#6366f1}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPLETION MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.cdng-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9000;padding:1rem}
.cdng-modal-box{background:#fff;border-radius:1.5rem;padding:2rem 1.75rem;text-align:center;max-width:380px;width:100%;box-shadow:0 25px 60px rgba(0,0,0,.18);animation:cdngModalIn .35s cubic-bezier(.34,1.56,.64,1) both}
@keyframes cdngModalIn{from{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:none}}
.cdng-modal-emoji{font-size:3.5rem;margin-bottom:.5rem}
.cdng-modal-title{font-size:1.4rem;font-weight:900;color:#1f2937;margin:0 0 .35rem}
.cdng-modal-pts{font-size:1.6rem;font-weight:900;color:#6366f1;margin-bottom:.75rem}
.cdng-modal-badges{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:.85rem}
.cdng-modal-badge{background:#ede9fe;color:#5b21b6;border-radius:2rem;padding:.25rem .65rem;font-size:.78rem;font-weight:700}
.cdng-modal-actions{display:flex;flex-direction:column;gap:.5rem}
.cdng-modal-btn{padding:.6rem 1.25rem;border-radius:.75rem;font-size:.9rem;font-weight:800;cursor:pointer;border:none;font-family:inherit;transition:background .15s}
.cdng-modal-btn--primary{background:#6366f1;color:#fff}
.cdng-modal-btn--primary:hover{background:#4f46e5}
.cdng-modal-btn--outline{background:#f3f4f6;color:#374151}
.cdng-modal-btn--outline:hover{background:#e5e7eb}

/* ═══════════════════════════════════════════════════════════════════════════
   CONFETTI
   ═══════════════════════════════════════════════════════════════════════════ */

.cdng-confetti{position:fixed;top:-10px;border-radius:2px;pointer-events:none;z-index:9500;animation:cdngConfettiFall linear forwards}
@keyframes cdngConfettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .cdng-lesson-page{grid-template-columns:1fr;height:auto;min-height:100vh}
  .cdng-content-panel{max-height:none;position:static;border-right:none;border-bottom:1px solid #e5e7eb}
  .cdng-editor-panel{height:90vh}
  .cdng-mobile-tabs{display:flex}
}

@media (max-width: 480px) {
  .lrn-cdng-grid{grid-template-columns:1fr}
  .cdng-content-inner{padding:1rem}
  .lrn-cdng-hero{padding:2rem 0 1.5rem}
}