/* ─────────────────────────────────────────────────────────────────
 * Learning Path — Vertical Node Map (DirE style)
 * All CSS variables scoped to .lp-wrap to avoid global collisions.
 * ───────────────────────────────────────────────────────────────── */

.lp-wrap {
    --lp-border:         #E2E8F0;
    --lp-text-primary:   #0F172A;
    --lp-text-secondary: #475569;
    --lp-text-muted:     #94A3B8;
    --lp-surface:        #F8FAFC;
    --lp-neutral-100:    #F1F5F9;
    --lp-neutral-300:    #CBD5E1;
    --lp-accent-50:      #EFF6FF;
    --lp-accent-200:     #BFDBFE;
    --lp-accent-500:     #3B82F6;
    --lp-accent-600:     #2563EB;
    --lp-accent-700:     #1D4ED8;
    --lp-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --lp-font-display:   'Poppins', 'Inter', -apple-system, sans-serif;

    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);
}

/* ── Shared button ─────────────────────────────────────────────── */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: transform 150ms, filter 150ms, opacity 150ms;
    white-space: nowrap;
}
.lp-btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.lp-btn:active:not(:disabled) { transform: translateY(0); }
.lp-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.lp-btn.primary {
    background: linear-gradient(180deg, #2563EB, #1D4ED8);
    color: #fff;
    box-shadow: 0 0 0 1px #1E40AF, 0 4px 0 #1E40AF, 0 8px 16px rgba(37,99,235,0.3);
}
.lp-btn.primary:active:not(:disabled) {
    box-shadow: 0 0 0 1px #1E40AF, 0 2px 0 #1E40AF, 0 4px 8px rgba(37,99,235,0.3);
}
.lp-btn.ghost {
    background: var(--lp-surface);
    color: var(--lp-text-secondary);
    border: 1px solid var(--lp-border);
}

/* ── Utility ───────────────────────────────────────────────────── */
.lp-crumb-active { color: var(--lp-text-primary) !important; font-weight: 600 !important; }
.lp-screen-actions {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.lp-empty-card {
    padding: 24px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    color: var(--lp-text-muted);
    font-size: 14px;
}
.lp-explain {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}
.lp-explain-correct { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; }
.lp-explain-wrong   { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }

/* ═══════════════════════════════════════════════════════════════════
   LANDING PAGE — 4 module cards
═══════════════════════════════════════════════════════════════════ */

.modulesLanding {
    flex: 1;
    overflow-y: auto;
    padding: 48px 28px 80px;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(96,165,250,0.10), transparent 60%),
        radial-gradient(1200px 600px at -10% 80%, rgba(244,114,182,0.10), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);
}
.modulesLanding-inner {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
}

.modulesLanding-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: end;
    margin-bottom: 32px;
}
.modulesLanding-head .eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: #2563EB;
    margin-bottom: 10px;
}
.modulesLanding-head h1 {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: 36px; font-weight: 600; letter-spacing: -0.028em;
    line-height: 1.15;
    color: var(--lp-text-primary);
}
.modulesLanding-head .sub {
    margin: 12px 0 0;
    font-size: 15px; color: var(--lp-text-secondary);
    line-height: 1.55;
    max-width: 720px;
}

.modulesLanding-overall {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 16px;
    min-width: 240px;
    box-shadow: 0 1px 0 #fff inset, 0 6px 18px -12px rgba(15,23,42,0.18);
}
.modulesLanding-overall .ringWrap {
    position: relative; width: 54px; height: 54px; flex: 0 0 auto;
}
.modulesLanding-overall .ringWrap .pct {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap; line-height: 1;
    font-family: var(--lp-font-display);
    font-size: 12px; font-weight: 700; color: #047857;
}
.modulesLanding-overall .lbl {
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--lp-text-muted);
    margin-bottom: 4px;
}
.modulesLanding-overall .stat {
    font-family: var(--lp-font-display);
    font-size: 18px; font-weight: 700;
    color: var(--lp-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.modulesLanding-overall .stat span {
    font-weight: 500; color: var(--lp-text-muted); font-size: 14px;
}

/* Module cards grid — explicit 4 columns at desktop widths so the row fills the
   container regardless of how the parent flex layout resolves widths.
   minmax(0,1fr) prevents grid items from being sized to intrinsic content width. */
.modulesRow {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px;
    align-items: stretch;
}
@media (max-width: 1100px) { .modulesRow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .modulesRow { grid-template-columns: 1fr; } }
/* Mobile (<=767, matching coursedashboard's isMobileView): single-column,
   tighter gap — the compact .lp-mcard cards render here instead of .moduleCard.
   Also dial down the header type/spacing so the cards aren't pushed off-screen. */
@media (max-width: 767px) {
    .lp-wrap .modulesRow { grid-template-columns: 1fr; gap: 12px; }
    .lp-wrap .modulesLanding { padding: 20px 16px 60px; }
    .lp-wrap .modulesLanding-head { gap: 14px; margin-bottom: 18px; }
    .lp-wrap .modulesLanding-head .eyebrow { font-size: 10px; margin-bottom: 6px; }
    .lp-wrap .modulesLanding-head h1 { font-size: 23px; line-height: 1.12; }
    .lp-wrap .modulesLanding-head .sub { font-size: 12.5px; line-height: 1.45; margin-top: 8px; }
    .lp-wrap .modulesLanding-overall { padding: 11px 13px; min-width: 0; gap: 11px; }
}

/* ── Compact mobile module card (AE) — only rendered when isMobileView ───────
   Gradient header (icon + module tag + title + %) over a white body with a slim
   bar, stats, current-milestone chip and a full-width Continue button. Scoped
   classes (.lp-mcard*) — no overlap with the desktop .moduleCard styles. */
.lp-wrap .lp-mcard {
    display: block; width: 100%; margin: 0; padding: 0;
    text-align: left; font: inherit; cursor: pointer;
    background: #fff; border: 1px solid var(--lp-border); border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.45);
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease;
}
.lp-wrap .lp-mcard:active { transform: translateY(1px); }

.lp-mc-head {
    position: relative; display: flex; align-items: center; gap: 11px;
    padding: 13px 15px; color: #fff; overflow: hidden;
}
.lp-mc-head::after {
    content: ''; position: absolute; top: -46px; right: -34px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.38), transparent 70%);
    pointer-events: none;
}
.lp-mcard.tone-sky   .lp-mc-head { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.lp-mcard.tone-amber .lp-mc-head { background: linear-gradient(135deg, #D97706, #B45309); }
.lp-mcard.tone-mint  .lp-mc-head { background: linear-gradient(135deg, #059669, #047857); }
.lp-mcard.tone-rose  .lp-mc-head { background: linear-gradient(135deg, #DB2777, #BE185D); }

.lp-mc-ic {
    width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
    background: rgba(255,255,255,0.22); display: grid; place-items: center;
    position: relative; z-index: 1; color: #fff;
}
.lp-mc-ic svg { width: 22px; height: 22px; }
.lp-mc-tt { flex: 1; min-width: 0; position: relative; z-index: 1; display: flex; flex-direction: column; }
.lp-mc-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.lp-mc-title {
    font-size: 16px; font-weight: 700; line-height: 1.12; letter-spacing: -0.01em;
    margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-mc-pct { font-size: 18px; font-weight: 800; position: relative; z-index: 1; }

.lp-mc-body { padding: 13px 15px 14px; }
.lp-mc-bar { height: 6px; border-radius: 999px; background: #E2E8F0; overflow: hidden; margin-bottom: 11px; }
.lp-mc-bar > span { display: block; height: 100%; border-radius: 999px; }
.lp-mcard.tone-sky   .lp-mc-bar > span { background: linear-gradient(90deg, #60A5FA, #1D4ED8); }
.lp-mcard.tone-amber .lp-mc-bar > span { background: linear-gradient(90deg, #FBBF24, #B45309); }
.lp-mcard.tone-mint  .lp-mc-bar > span { background: linear-gradient(90deg, #34D399, #047857); }
.lp-mcard.tone-rose  .lp-mc-bar > span { background: linear-gradient(90deg, #F472B6, #9D174D); }

.lp-mc-stats { display: flex; gap: 14px; font-size: 11.5px; color: var(--lp-text-muted); margin-bottom: 11px; }
.lp-mc-stats span { display: inline-flex; align-items: center; gap: 5px; }
.lp-mc-stats b { color: var(--lp-text-primary); font-weight: 700; }

.lp-mc-cur {
    display: flex; align-items: center; gap: 9px;
    background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-radius: 11px; padding: 8px 10px; margin-bottom: 13px;
}
.lp-mc-pin {
    width: 24px; height: 24px; border-radius: 8px; flex: 0 0 auto;
    color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.lp-mcard.tone-sky   .lp-mc-pin { background: linear-gradient(135deg, #60A5FA, #1D4ED8); }
.lp-mcard.tone-amber .lp-mc-pin { background: linear-gradient(135deg, #FBBF24, #B45309); }
.lp-mcard.tone-mint  .lp-mc-pin { background: linear-gradient(135deg, #34D399, #047857); }
.lp-mcard.tone-rose  .lp-mc-pin { background: linear-gradient(135deg, #F472B6, #9D174D); }
.lp-mc-curtxt { min-width: 0; display: flex; flex-direction: column; }
.lp-mc-curlbl { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-text-muted); line-height: 1.3; }
.lp-mc-curnm { font-size: 12.5px; font-weight: 600; color: var(--lp-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lp-mc-cta {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; color: #fff; font-weight: 700; font-size: 13.5px;
    border-radius: 12px; padding: 11px;
}
.lp-mcard.tone-sky   .lp-mc-cta { background: linear-gradient(180deg, #2563EB, #1D4ED8); box-shadow: 0 4px 0 #1E40AF; }
.lp-mcard.tone-amber .lp-mc-cta { background: linear-gradient(180deg, #D97706, #B45309); box-shadow: 0 4px 0 #92400E; }
.lp-mcard.tone-mint  .lp-mc-cta { background: linear-gradient(180deg, #059669, #047857); box-shadow: 0 4px 0 #065F46; }
.lp-mcard.tone-rose  .lp-mc-cta { background: linear-gradient(180deg, #DB2777, #BE185D); box-shadow: 0 4px 0 #9D174D; }

/* Card
   NOTE: scoped via .lp-wrap to win specificity over the global `.moduleCard`
   rule in /css/mgs-moderation.css which caps moduleCard at max-width: 125px
   and adds margin-right: 24px. Without this scoping, the learning-path cards
   would be clamped to 125px wide. */
.lp-wrap .moduleCard {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 24px;
    padding: 24px 24px 22px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    overflow: hidden;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    min-height: 500px;
    transition: transform 220ms var(--lp-ease-spring), box-shadow 220ms ease, border-color 200ms;
    box-shadow: 0 1px 0 #fff inset, 0 12px 28px -22px rgba(15,23,42,0.22);
}
.moduleCard:hover {
    transform: translateY(-4px);
    border-color: rgba(15,23,42,0.18);
    box-shadow: 0 1px 0 #fff inset, 0 28px 56px -22px rgba(15,23,42,0.30);
}
.moduleCard:active { transform: translateY(-1px); }

.moduleCard .glyph {
    position: absolute; top: -50px; right: -50px;
    width: 200px; height: 200px;
    border-radius: 50%;
    filter: blur(3px);
    opacity: 0.30;
    pointer-events: none;
}
.moduleCard.tone-sky   .glyph { background: radial-gradient(circle at 30% 30%, #60A5FA 0%, #2563EB 60%, transparent 70%); }
.moduleCard.tone-amber .glyph { background: radial-gradient(circle at 30% 30%, #FBBF24 0%, #D97706 60%, transparent 70%); }
.moduleCard.tone-mint  .glyph { background: radial-gradient(circle at 30% 30%, #34D399 0%, #059669 60%, transparent 70%); }
.moduleCard.tone-rose  .glyph { background: radial-gradient(circle at 30% 30%, #F472B6 0%, #BE185D 60%, transparent 70%); }

.moduleCard .top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
    position: relative; z-index: 1;
}
.moduleCard .card-main {
    flex: 1;
    display: flex; flex-direction: column;
    position: relative; z-index: 1;
}
.moduleCard .iconTile {
    width: 60px; height: 60px;
    border-radius: 18px;
    display: grid; place-items: center;
    color: #fff;
    box-shadow: 0 6px 16px -6px currentColor;
}
.moduleCard .iconTile svg { width: 28px; height: 28px; }
.moduleCard.tone-sky   .iconTile { background: linear-gradient(135deg, #60A5FA, #1D4ED8); }
.moduleCard.tone-amber .iconTile { background: linear-gradient(135deg, #FBBF24, #B45309); }
.moduleCard.tone-mint  .iconTile { background: linear-gradient(135deg, #34D399, #047857); }
.moduleCard.tone-rose  .iconTile { background: linear-gradient(135deg, #F472B6, #9D174D); }

.moduleCard .tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-text-muted);
    white-space: nowrap;
}

.moduleCard h3 {
    margin: 0 0 5px;
    font-family: var(--lp-font-display);
    font-size: 28px; font-weight: 600; letter-spacing: -0.030em;
    line-height: 1.1;
    color: var(--lp-text-primary);
    position: relative; z-index: 1;
}
.moduleCard .blurb {
    font-size: 13.5px; line-height: 1.55;
    color: var(--lp-text-secondary);
    margin: 0 0 20px;
    min-height: 44px;
    position: relative; z-index: 1;
}

.moduleCard .progressRow {
    display: grid; grid-template-columns: 1fr auto;
    gap: 10px; align-items: baseline;
    margin-top: auto;   /* push progress+stats block to bottom of card-main */
    margin-bottom: 10px;
    position: relative; z-index: 1;
}
.moduleCard .progressRow .lbl {
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--lp-text-muted);
}
.moduleCard .progressRow .pct {
    font-family: var(--lp-font-display);
    font-size: 26px; font-weight: 700; letter-spacing: -0.025em;
    color: var(--lp-text-primary);
    font-variant-numeric: tabular-nums;
}
.moduleCard .bar {
    height: 6px;
    background: var(--lp-neutral-100);
    border-radius: 999px; overflow: hidden;
    margin-bottom: 14px;
    position: relative; z-index: 1;
}
.moduleCard .bar > span { display: block; height: 100%; border-radius: 999px; }
.moduleCard.tone-sky   .bar > span { background: linear-gradient(90deg, #60A5FA, #1D4ED8); }
.moduleCard.tone-amber .bar > span { background: linear-gradient(90deg, #FBBF24, #B45309); }
.moduleCard.tone-mint  .bar > span { background: linear-gradient(90deg, #34D399, #047857); }
.moduleCard.tone-rose  .bar > span { background: linear-gradient(90deg, #F472B6, #9D174D); }

.moduleCard .stats {
    display: flex; align-items: center; gap: 14px;
    font-size: 12px; color: var(--lp-text-muted);
    margin-bottom: 14px;
    position: relative; z-index: 1;
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap;
}
.moduleCard .stats > span { display: inline-flex; align-items: center; gap: 5px; }
.moduleCard .stats b { color: var(--lp-text-primary); font-weight: 600; }

.moduleCard .currentRow {
    display: grid; grid-template-columns: auto 1fr;
    gap: 12px; align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    margin-top: 12px;   /* progressRow margin-top:auto already anchors the block */
    margin-bottom: 16px;
    position: relative; z-index: 1;
}
.moduleCard .currentRow .pin {
    width: 26px; height: 26px;
    border-radius: 8px;
    display: grid; place-items: center;
    color: #fff;
    font-family: var(--lp-font-display);
    font-size: 11.5px; font-weight: 700;
}
.moduleCard.tone-sky   .currentRow .pin { background: linear-gradient(135deg, #60A5FA, #1D4ED8); }
.moduleCard.tone-amber .currentRow .pin { background: linear-gradient(135deg, #FBBF24, #B45309); }
.moduleCard.tone-mint  .currentRow .pin { background: linear-gradient(135deg, #34D399, #047857); }
.moduleCard.tone-rose  .currentRow .pin { background: linear-gradient(135deg, #F472B6, #9D174D); }
.moduleCard .currentRow .lbl {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--lp-text-muted); line-height: 1;
}
.moduleCard .currentRow .ttl {
    font-size: 13px; font-weight: 600;
    color: var(--lp-text-primary); line-height: 1.3; margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.moduleCard .cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    padding: 13px 16px;
    border-radius: 14px; border: 0;
    cursor: pointer; font: inherit;
    font-weight: 600; font-size: 13px;
    color: #fff;
    position: relative; z-index: 1;
    transition: transform 150ms, filter 150ms;
}
.moduleCard.tone-sky   .cta { background: linear-gradient(180deg, #2563EB, #1D4ED8); box-shadow: 0 0 0 1px #1E40AF, 0 4px 0 #1E40AF; }
.moduleCard.tone-amber .cta { background: linear-gradient(180deg, #D97706, #B45309); box-shadow: 0 0 0 1px #92400E, 0 4px 0 #92400E; }
.moduleCard.tone-mint  .cta { background: linear-gradient(180deg, #059669, #047857); box-shadow: 0 0 0 1px #065F46, 0 4px 0 #065F46; }
.moduleCard.tone-rose  .cta { background: linear-gradient(180deg, #DB2777, #BE185D); box-shadow: 0 0 0 1px #9D174D, 0 4px 0 #9D174D; }
.moduleCard:hover .cta { filter: brightness(1.05); }

/* ═══════════════════════════════════════════════════════════════════
   DETAIL WRAPPER
═══════════════════════════════════════════════════════════════════ */

.lp-detail-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Module switcher */
.modSwitcher {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 24px;
    background: #fff;
    border-bottom: 1px solid var(--lp-border);
    flex-shrink: 0;
    z-index: 5;
}
.modSwitcher .back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px 7px 9px;
    border-radius: 999px;
    border: 1px solid var(--lp-border);
    background: #fff;
    color: var(--lp-text-primary);
    cursor: pointer; font: inherit; font-weight: 500; font-size: 12.5px;
    transition: background 150ms;
    white-space: nowrap;
}
.modSwitcher .back:hover { background: var(--lp-surface); }
.modSwitcher .sep { width: 1px; height: 22px; background: var(--lp-border); flex-shrink: 0; }
.modSwitcher .chips {
    display: flex; gap: 6px;
    flex: 1; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
}
.modSwitcher .chips::-webkit-scrollbar { display: none; }
.modSwitcher .chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 500;
    color: var(--lp-text-secondary);
    transition: background 150ms, color 150ms, border-color 150ms;
    white-space: nowrap;
}
.modSwitcher .chip:hover { background: var(--lp-surface); color: var(--lp-text-primary); }
.modSwitcher .chip .dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: grid; place-items: center; color: #fff;
}
.modSwitcher .chip.tone-sky   .dot { background: linear-gradient(135deg, #60A5FA, #1D4ED8); }
.modSwitcher .chip.tone-amber .dot { background: linear-gradient(135deg, #FBBF24, #B45309); }
.modSwitcher .chip.tone-mint  .dot { background: linear-gradient(135deg, #34D399, #047857); }
.modSwitcher .chip.tone-rose  .dot { background: linear-gradient(135deg, #F472B6, #9D174D); }
.modSwitcher .chip .pctMini {
    font-size: 10.5px; color: var(--lp-text-muted); font-variant-numeric: tabular-nums;
}
.modSwitcher .chip.active {
    background: linear-gradient(180deg, #1973E8, #1150C4);
    color: #fff;
    border-color: #1150C4;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 0 0 2px rgba(25, 115, 232, 0.18);
}
.modSwitcher .chip.active:hover {
    background: linear-gradient(180deg, #1973E8, #1150C4);
    color: #fff;
}
.modSwitcher .chip.active .pctMini { color: rgba(255, 255, 255, 0.85); }
.modSwitcher .chip.active .dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }

/* ═══════════════════════════════════════════════════════════════════
   DirE SHELL — left rail + right stage
═══════════════════════════════════════════════════════════════════ */

.dirE-shell {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: 1fr;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── LEFT RAIL ──────────────────────────────────────────────────── */
.dirE-rail {
    background: #fff;
    border-right: 1px solid var(--lp-border);
    overflow-y: auto;
    display: flex; flex-direction: column;
}

.dirE-rail-head {
    padding: 22px 22px 16px;
    border-bottom: 1px solid var(--lp-border);
}
.dirE-rail-head .eyebrow {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--lp-text-muted); margin-bottom: 6px;
}
.dirE-rail-head h2 {
    margin: 0 0 14px;
    font-family: var(--lp-font-display);
    font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3;
    color: var(--lp-text-primary);
}
.dirE-rail-head .ring-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    border: 1px solid #A7F3D0;
    border-radius: 14px;
}
.dirE-rail-head .ring-svg { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.dirE-rail-head .ring-svg svg { display: block; }
.dirE-rail-head .ring-svg .pct {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--lp-font-display); font-size: 13px; font-weight: 700;
    color: #047857; line-height: 1;
}
.dirE-rail-head .ring-row > div:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dirE-rail-head .ring-row .lbl {
    font-size: 10px; color: #047857; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; line-height: 1;
}
.dirE-rail-head .ring-row .stat {
    font-family: var(--lp-font-display); font-size: 15px; font-weight: 700;
    color: #064E3B; font-variant-numeric: tabular-nums; line-height: 1.2;
}

.dirE-rail-list { padding: 8px 8px 24px; flex: 1; }
.dirE-rail-group { margin-bottom: 2px; }

.dirE-rail-item {
    width: 100%;
    display: grid; grid-template-columns: 44px 1fr 16px;
    gap: 12px; align-items: center;
    padding: 10px 12px;
    background: transparent; border: 0;
    border-radius: 12px; cursor: pointer; text-align: left; font: inherit;
    margin-bottom: 4px; transition: background 150ms;
}
.dirE-rail-item:hover { background: var(--lp-surface); }
.dirE-rail-item.active {
    background: var(--lp-accent-50);
    outline: 1px solid var(--lp-accent-200);
}

.dirE-rail-disc {
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--lp-font-display); font-weight: 700; font-size: 16px;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #F1F5F9, #E2E8F0);
    color: var(--lp-text-secondary);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.06), 0 4px 8px rgba(15,23,42,0.06);
}
.dirE-rail-item.complete .dirE-rail-disc {
    background: linear-gradient(180deg, #34D399, #059669); color: #fff;
    box-shadow: 0 0 0 1px #047857, 0 4px 8px rgba(16,185,129,0.35);
}
.dirE-rail-item.current .dirE-rail-disc {
    background: linear-gradient(180deg, #60A5FA, #1D4ED8); color: #fff;
    box-shadow: 0 0 0 1px #1E40AF, 0 4px 8px rgba(37,99,235,0.35);
}

.dirE-rail-item .body { min-width: 0; }
.dirE-rail-item .body .ttl {
    font-size: 13px; font-weight: 600; color: var(--lp-text-primary);
    line-height: 1.3; margin-bottom: 4px;
}
.dirE-rail-item .body .meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--lp-text-muted); font-variant-numeric: tabular-nums;
}
.dirE-rail-item .body .b {
    flex: 1; height: 4px; background: var(--lp-neutral-100);
    border-radius: 999px; overflow: hidden;
}
.dirE-rail-item .body .b > span { display: block; height: 100%; background: var(--lp-neutral-300); }
.dirE-rail-item.complete .body .b > span { background: linear-gradient(90deg, #34D399, #10B981); }
.dirE-rail-item.current  .body .b > span { background: linear-gradient(90deg, #60A5FA, #1D4ED8); }

.dirE-rail-item .chev {
    display: flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; color: var(--lp-text-muted);
    transition: transform 200ms ease;
}
.dirE-rail-item .chev.open { transform: rotate(180deg); color: var(--lp-text-primary); }

/* Rail children */
.dirE-rail-children {
    list-style: none; margin: 0 0 6px 22px;
    padding: 4px 0 6px 14px;
    border-left: 1.5px dashed var(--lp-border);
    display: flex; flex-direction: column; gap: 2px;
}
.dirE-rail-child {
    width: 100%; display: grid; grid-template-columns: 22px 22px 1fr;
    gap: 8px; align-items: center;
    padding: 7px 10px 7px 6px;
    background: transparent; border: 0; border-radius: 8px;
    cursor: pointer; text-align: left; font: inherit;
    color: var(--lp-text-secondary); transition: background 120ms;
}
.dirE-rail-child:hover:not(:disabled) { background: var(--lp-surface); }
.dirE-rail-child:disabled { cursor: not-allowed; opacity: 0.6; }
.dirE-rail-child .ord {
    font-size: 10px; font-weight: 700; color: var(--lp-text-muted);
    font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.dirE-rail-child .tic {
    width: 22px; height: 22px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid;
}
.dirE-rail-child .ttl {
    font-size: 12.5px; font-weight: 500; line-height: 1.35;
    color: var(--lp-text-primary);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.dirE-rail-child.t-concept   .tic { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.dirE-rail-child.t-resource  .tic { background: #E0E7FF; color: #3730A3; border-color: #C7D2FE; }
.dirE-rail-child.t-challenge .tic { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.dirE-rail-child.done .tic    { background: #D1FAE5; color: #047857; border-color: #6EE7B7; }
.dirE-rail-child.current      { background: #EFF6FF; }
.dirE-rail-child.current .tic { background: #DBEAFE; color: #1D4ED8; border-color: #93C5FD; }
.dirE-rail-child.locked .tic  { background: #F1F5F9; color: var(--lp-text-muted); border-color: var(--lp-border); }
.dirE-rail-child.locked .ttl  { color: var(--lp-text-muted); }

.dirE-rail-foot { padding: 12px 16px; border-top: 1px solid var(--lp-border); }

/* ── RIGHT STAGE ─────────────────────────────────────────────────── */
.dirE-stage {
    position: relative;
    min-height: 0;
    overflow-y: auto;
    padding: 36px 24px 120px;
}
.dirE-stage::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(15,23,42,0.06) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    pointer-events: none;
}

.dirE-stage-inner {
    position: relative; max-width: 600px; margin: 0 auto;
}

/* Stage head */
.dirE-stagehead {
    text-align: center; margin-bottom: 14px;
    position: relative; z-index: 1;
}
.dirE-stagehead h1 {
    font-family: var(--lp-font-display);
    font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
    margin: 0 0 6px; color: var(--lp-text-primary);
}
.dirE-stagehead p { margin: 0; font-size: 13px; color: var(--lp-text-muted); }

/* Section banner */
.dirE-section {
    position: relative; margin: 28px 0 20px;
    padding: 18px 22px;
    display: grid; grid-template-columns: 56px 1fr auto;
    gap: 16px; align-items: center;
    border-radius: 18px; color: #fff;
    box-shadow: 0 14px 36px -12px rgba(15,23,42,0.25), inset 0 -3px 0 rgba(0,0,0,0.18);
}
.dirE-section:first-child { margin-top: 0; }
.dirE-section.tone-1 { background: linear-gradient(135deg, #16A34A, #15803D); }
.dirE-section.tone-2 { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.dirE-section.tone-3 { background: linear-gradient(135deg, #9333EA, #7E22CE); }
.dirE-section.tone-4 { background: linear-gradient(135deg, #EA580C, #C2410C); }
/* Locked sections keep their tone gradient but appear dimmed with a dashed badge border */
.dirE-section.locked { opacity: 0.62; }
.dirE-section.locked .badge { border-style: dashed; }

.dirE-section .badge {
    width: 56px; height: 56px; border-radius: 14px;
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
    display: grid; place-items: center;
    font-family: var(--lp-font-display); font-size: 22px; font-weight: 700;
    backdrop-filter: blur(4px);
}
.dirE-section .badge svg { width: 24px; height: 24px; }
.dirE-section .body .eyebrow {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; opacity: 0.8;
}
.dirE-section .body .ttl {
    font-family: var(--lp-font-display); font-size: 22px; font-weight: 700;
    letter-spacing: -0.02em; margin-top: 2px;
}
.dirE-section .body .sub {
    font-size: 12.5px; opacity: 0.85; margin-top: 4px; line-height: 1.45;
}
.dirE-section .pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25);
    font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px);
}
.dirE-section .pill svg { width: 12px; height: 12px; }

/* Path container */
.dirE-path {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 24px 0 20px;
    position: relative;
}

/* Connector SVG */
.dirE-connectors { position: absolute; pointer-events: none; z-index: 0; }

/* Medallion step */
.dirE-step {
    position: relative; z-index: 1;
    width: 100%; display: flex; justify-content: center;
}

/* Medallion */
.dirE-medal-wrap {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
}
.dirE-medal {
    width: 96px; height: 96px;
    border: 0; cursor: pointer;
    display: grid; place-items: center;
    position: relative;
    transition: transform 150ms ease, filter 150ms ease;
    background: transparent;
    color: var(--lp-text-secondary);
    font: inherit; padding: 0;
}
.dirE-medal::before {
    content: '';
    position: absolute; inset: 0;
    background: #F1F5F9; border: 1.5px solid #CBD5E1;
    border-radius: 50%; z-index: 0;
}
.dirE-medal > * { position: relative; z-index: 1; }
.dirE-medal:hover:not(.locked) { transform: translateY(-1px); filter: brightness(0.98); }
.dirE-medal:active:not(.locked) { transform: translateY(0); filter: brightness(0.95); }
.dirE-medal svg.icon,
.dirE-medal .icon-wrap svg { width: 38px; height: 38px; }

.dirE-medal .order-mini {
    position: absolute; bottom: -6px; right: -2px;
    background: #fff; color: var(--lp-text-muted);
    border: 1px solid var(--lp-border);
    font-family: var(--lp-font-display);
    font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 999px; z-index: 2;
}

/* Type fills */
.dirE-medal.t-concept::before  { background: #FEF3C7; border-color: #FCD34D; }
.dirE-medal.t-concept          { color: #92400E; }
.dirE-medal.t-resource::before { background: #E0E7FF; border-color: #A5B4FC; }
.dirE-medal.t-resource         { color: #3730A3; }
.dirE-medal.t-challenge {
    width: 116px; height: 116px; color: #fff;
}
.dirE-medal.t-challenge::before {
    background: linear-gradient(180deg, #DC2626, #991B1B);
    border-color: #7F1D1D; border-width: 2px;
}
.dirE-medal.t-challenge svg.icon,
.dirE-medal.t-challenge .icon-wrap svg { width: 46px; height: 46px; }
.dirE-medal.t-challenge::after {
    content: '';
    position: absolute; inset: -8px;
    border-radius: 50%; border: 2px dashed #FCA5A5;
    opacity: 0.7; pointer-events: none;
}

/* States */
.dirE-medal.complete::before { background: #10B981; border-color: #059669; }
.dirE-medal.complete         { color: #fff; }
/* Locked medals: show type color dimmed + dashed border so the lock icon reads on colour */
.dirE-medal.locked::before   { opacity: 0.45; border-style: dashed; }
.dirE-medal.locked           { cursor: not-allowed; }

.dirE-medal.current { animation: lpMedalBob 2.4s ease-in-out infinite; }
/* Solid accent halo so the current medallion clearly stands out from the
   grey/locked and green/complete nodes around it. */
.dirE-medal.current::before {
    box-shadow: 0 0 0 4px #fff, 0 0 0 7px #1973E8;
}
.dirE-medal.current::after {
    content: '';
    position: absolute; inset: -10px;
    border-radius: 50%; border: 3px solid #1973E8;
    opacity: 0.55; pointer-events: none;
    animation: lpMedalRing 1.8s ease-out infinite;
}
@keyframes lpMedalBob {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@keyframes lpMedalRing {
    0%   { transform: scale(0.95); opacity: 0.6; }
    100% { transform: scale(1.22); opacity: 0; }
}

.dirE-medal-status {
    position: absolute; top: -6px; right: -6px;
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff; color: var(--lp-text-muted);
    display: grid; place-items: center;
    border: 1.5px solid var(--lp-border); z-index: 2;
}
.dirE-medal-status.current { background: #F59E0B; color: #fff; border-color: #D97706; }

/* Caption */
.dirE-medal-cap {
    margin-top: 14px; text-align: center; max-width: 200px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.dirE-medal-cap .type-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px 3px 6px; border-radius: 999px; border: 1px solid; line-height: 1;
    margin-bottom: 2px;
}
.dirE-medal-cap .type-chip-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px;
}
.dirE-medal-cap .type-chip.t-concept   { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.dirE-medal-cap .type-chip.t-resource  { background: #E0E7FF; color: #3730A3; border-color: #C7D2FE; }
.dirE-medal-cap .type-chip.t-challenge { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.dirE-medal-cap .ttl {
    font-size: 13px; font-weight: 600; color: var(--lp-text-primary); line-height: 1.3;
    /* Sit above the connector branch (z-index 0) and paint an opaque backing so
       the green path is covered wherever the label text is — the text overlays
       the branch instead of the branch cutting through the text. */
    position: relative; z-index: 2;
    background: #fff;
    padding: 2px 8px;
    border-radius: 7px;
    box-shadow: 0 0 0 4px #fff;
}
.dirE-medal-cap .meta {
    font-size: 11px; color: var(--lp-text-muted);
    margin-top: 3px; display: inline-flex; gap: 4px; align-items: center;
    position: relative; z-index: 2;
    background: #fff; padding: 1px 7px; border-radius: 999px;
}
/* "Start here" pill — unmistakable marker for the current node to attempt. */
.dirE-cap-current {
    position: relative; z-index: 3;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #1973E8, #1150C4);
    padding: 4px 11px; border-radius: 999px; line-height: 1;
    margin-bottom: 6px;
    box-shadow: 0 6px 14px -4px rgba(25, 115, 232, 0.65);
    animation: lpCurrentPulse 1.8s ease-in-out infinite;
}
@keyframes lpCurrentPulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 6px 14px -4px rgba(25, 115, 232, 0.55); }
    50%      { transform: scale(1.06); box-shadow: 0 8px 20px -4px rgba(25, 115, 232, 0.85); }
}

/* End-of-path pin */
.dirE-end { margin: 30px auto 0; text-align: center; position: relative; z-index: 1; }
.dirE-end .pin {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(180deg, #FBBF24, #D97706); color: #fff;
    display: grid; place-items: center; margin: 0 auto;
    box-shadow: 0 0 0 6px #fff, 0 0 0 7px #B45309, 0 6px 0 #B45309, 0 12px 28px -6px rgba(217,119,6,0.4);
}
.dirE-end .lbl {
    margin-top: 14px;
    font-family: var(--lp-font-display); font-size: 16px; font-weight: 600;
    color: var(--lp-text-secondary); letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════
   SCREEN ROUTER — full-pane concept / resource / challenge views
═══════════════════════════════════════════════════════════════════ */

.dirE-screen {
    position: relative; max-width: 880px;
    margin: 0 auto; padding: 24px 32px 80px; z-index: 1;
}

/* Breadcrumb */
.dirE-crumb {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 18px; font-size: 13px; color: var(--lp-text-muted);
}
.dirE-crumb .crumb-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px 7px 8px; border-radius: 999px;
    border: 1px solid var(--lp-border); background: #fff;
    color: var(--lp-text-primary); cursor: pointer; font: inherit; font-weight: 500;
    transition: background 150ms;
}
.dirE-crumb .crumb-btn:hover { background: var(--lp-surface); }
.dirE-crumb .crumb-sep { color: var(--lp-neutral-300); }
.dirE-crumb .crumb-here {
    font-weight: 500; color: var(--lp-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Screen header card */
.dirE-screen-head {
    background: #fff; border: 1px solid var(--lp-border);
    border-radius: 18px; padding: 22px 26px; margin-bottom: 20px;
    box-shadow: 0 1px 0 #fff inset, 0 8px 22px -14px rgba(15,23,42,0.18);
    position: relative; overflow: hidden;
}
.dirE-screen-head::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
}
.dirE-screen-head.t-concept::before   { background: linear-gradient(90deg, #60A5FA, #2563EB); }
.dirE-screen-head.t-resource::before  { background: linear-gradient(90deg, #FB923C, #EA580C); }
.dirE-screen-head.t-challenge::before { background: linear-gradient(90deg, #E879F9, #A21CAF); }

.dirE-screen-head .top {
    display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
}
.dirE-screen-head .ic {
    width: 48px; height: 48px; border-radius: 14px;
    display: grid; place-items: center; flex-shrink: 0;
}
.dirE-screen-head.t-concept .ic   { background: #DBEAFE; color: #1D4ED8; }
.dirE-screen-head.t-resource .ic  { background: #FFEDD5; color: #C2410C; }
.dirE-screen-head.t-challenge .ic { background: #FAE8FF; color: #86198F; }
.dirE-screen-head .head-tag {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--lp-text-muted);
}
.dirE-screen-head h2 {
    margin: 0; font-family: var(--lp-font-display);
    font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1.2; color: var(--lp-text-primary);
}
.dirE-screen-head .desc {
    font-size: 14px; color: var(--lp-text-secondary);
    line-height: 1.55; margin: 10px 0 0;
}
.dirE-screen-head .meta-row {
    display: flex; flex-wrap: wrap; gap: 16px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--lp-border);
    font-size: 12px; color: var(--lp-text-muted);
}
.dirE-screen-head .meta-row > span { display: inline-flex; align-items: center; gap: 6px; }
.dirE-screen-head .meta-row b { color: var(--lp-text-primary); font-weight: 600; }

/* Concept screen — resource card list */
.dirE-concept-list { display: flex; flex-direction: column; gap: 12px; }
.dirE-res-card {
    display: grid; grid-template-columns: 56px 1fr auto;
    gap: 16px; align-items: center;
    padding: 16px 20px; background: #fff;
    border: 1px solid var(--lp-border); border-radius: 14px;
    cursor: pointer; text-align: left; font: inherit;
    transition: transform 150ms, box-shadow 200ms, border-color 200ms;
    width: 100%;
}
.dirE-res-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -16px rgba(15,23,42,0.18);
    border-color: var(--lp-accent-200);
}
.dirE-res-card .num {
    width: 56px; height: 56px; border-radius: 14px;
    display: grid; place-items: center;
    font-family: var(--lp-font-display); font-size: 18px; font-weight: 700;
    color: #fff; position: relative;
    background: linear-gradient(180deg, #94A3B8, #64748B);
}
.dirE-res-card.video .num    { background: linear-gradient(180deg, #FB923C, #EA580C); }
.dirE-res-card.reading .num  { background: linear-gradient(180deg, #60A5FA, #2563EB); }
.dirE-res-card.practice .num { background: linear-gradient(180deg, #F472B6, #BE185D); }
.dirE-res-card.audio .num    { background: linear-gradient(180deg, #A78BFA, #7C3AED); }
.dirE-res-card.complete .num { background: linear-gradient(180deg, #34D399, #059669); }

.dirE-res-card .num .kind-mini {
    position: absolute; bottom: -6px; right: -6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; color: var(--lp-text-secondary);
    display: grid; place-items: center;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.1);
}
.dirE-res-card .body { min-width: 0; }
.dirE-res-card .body .kind {
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--lp-text-muted); margin-bottom: 4px;
}
.dirE-res-card.video .body .kind    { color: #C2410C; }
.dirE-res-card.reading .body .kind  { color: #1D4ED8; }
.dirE-res-card.practice .body .kind { color: #BE185D; }
.dirE-res-card.audio .body .kind    { color: #7C3AED; }
.dirE-res-card .body .ttl {
    font-size: 15px; font-weight: 600; color: var(--lp-text-primary); line-height: 1.3;
}
.dirE-res-card .body .sub { font-size: 12.5px; color: var(--lp-text-muted); margin-top: 4px; }
.dirE-res-card .arrow {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--lp-surface); display: grid; place-items: center;
    color: var(--lp-text-secondary); flex-shrink: 0;
    transition: background 150ms, color 150ms;
}
.dirE-res-card:hover .arrow { background: var(--lp-accent-50); color: var(--lp-accent-600); }
.dirE-res-card.complete .arrow { background: #D1FAE5; color: #047857; }
.dirE-res-card.locked {
    cursor: default;
    opacity: 0.55;
    pointer-events: none;
}
.dirE-res-card.locked .num {
    background: linear-gradient(180deg, #CBD5E1, #94A3B8);
}

/* Resource screen body */
.dirE-resource-body {
    background: #fff; border: 1px solid var(--lp-border);
    border-radius: 18px; overflow: hidden;
}
.dirE-video {
    position: relative; background: #0F172A;
    aspect-ratio: 16 / 9; display: grid; place-items: center;
    background-image:
        radial-gradient(circle at 30% 30%, rgba(96,165,250,0.18), transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(168,85,247,0.18), transparent 50%);
}
.dirE-video .play-shell {
    width: 92px; height: 92px; border-radius: 50%;
    background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.3);
    display: grid; place-items: center; cursor: pointer;
    backdrop-filter: blur(10px); transition: transform 200ms;
}
.dirE-video .play-shell:hover { transform: scale(1.05); }
.dirE-video .v-overlay {
    position: absolute; bottom: 16px; left: 16px;
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: rgba(255,255,255,0.85);
}
.dirE-video .v-overlay .live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #EF4444;
    box-shadow: 0 0 0 4px rgba(239,68,68,0.2);
}
.dirE-video .v-controls {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6)); color: #fff;
}
.dirE-video .v-controls .scrub {
    flex: 1; height: 4px; background: rgba(255,255,255,0.25);
    border-radius: 999px; overflow: hidden;
}
.dirE-video .v-controls .scrub > span {
    display: block; height: 100%; width: 0%;
    background: linear-gradient(90deg, #60A5FA, #818CF8);
}
.dirE-video .v-controls .time { font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: 0.85; }

.dirE-reading {
    padding: 32px 36px; font-size: 15px; line-height: 1.65;
    color: var(--lp-text-secondary);
}
.dirE-reading h3 {
    margin: 0 0 12px; font-family: var(--lp-font-display);
    font-size: 20px; font-weight: 600; color: var(--lp-text-primary); letter-spacing: -0.015em;
}
.dirE-reading p { margin: 0 0 14px; }
.dirE-reading .callout {
    margin: 18px 0; padding: 14px 16px;
    border-left: 3px solid var(--lp-accent-500);
    background: var(--lp-accent-50);
    border-radius: 0 8px 8px 0; font-size: 14px; color: var(--lp-text-primary);
}

.dirE-resource-actions {
    display: flex; gap: 10px; padding: 16px 24px;
    border-top: 1px solid var(--lp-border);
    background: var(--lp-surface);
}
.dirE-resource-actions .spacer { flex: 1; }

/* Challenge screen */
.dirE-challenge {
    background: #fff; border: 1px solid var(--lp-border);
    border-radius: 18px; overflow: hidden;
}
.dirE-challenge-head {
    padding: 20px 24px;
    background: linear-gradient(135deg, #FAF5FF, #F5F3FF);
    border-bottom: 1px solid var(--lp-border);
    display: grid; grid-template-columns: 1fr auto;
    gap: 16px; align-items: center;
}
.dirE-challenge-head .label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: #86198F; margin-bottom: 4px;
}
.dirE-challenge-head .progress {
    font-family: var(--lp-font-display); font-size: 18px; font-weight: 600;
    color: var(--lp-text-primary); font-variant-numeric: tabular-nums;
}
.dirE-challenge-head .pass {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    background: #fff; border: 1px solid #E9D5FF;
    font-size: 12px; font-weight: 600; color: #86198F;
}

.dirE-challenge-bar { height: 6px; background: var(--lp-neutral-100); }
.dirE-challenge-bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, #A855F7, #7E22CE);
    transition: width 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dirE-challenge-q { padding: 28px 32px; }
.dirE-challenge-q .q-num {
    font-family: var(--lp-font-display); font-size: 11px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--lp-text-muted); margin-bottom: 8px;
}
.dirE-challenge-q .q-text {
    font-family: var(--lp-font-display); font-size: 22px; font-weight: 600;
    color: var(--lp-text-primary); line-height: 1.35; letter-spacing: -0.015em;
    margin-bottom: 20px;
}
.dirE-challenge-q .q-snippet {
    margin: 0 0 22px; padding: 14px 16px;
    background: #1E293B; border-radius: 10px;
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 13px; color: #E2E8F0; line-height: 1.5;
    white-space: pre-wrap;
}

.dirE-choices { display: flex; flex-direction: column; gap: 10px; }
.dirE-choice {
    display: grid; grid-template-columns: 32px 1fr 28px;
    gap: 14px; align-items: center;
    padding: 14px 16px; background: #fff;
    border: 2px solid var(--lp-border); border-radius: 12px;
    cursor: pointer; text-align: left; font: inherit;
    transition: border-color 150ms, background 150ms, transform 100ms;
}
.dirE-choice:hover:not(.locked) {
    border-color: var(--lp-neutral-300); background: var(--lp-surface);
}
.dirE-choice:active:not(.locked) { transform: translateY(1px); }
.dirE-choice .letter {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--lp-font-display); font-size: 13px; font-weight: 700;
    background: var(--lp-neutral-100); color: var(--lp-text-secondary);
}
.dirE-choice .lbl { font-size: 14px; line-height: 1.4; color: var(--lp-text-primary); }
.dirE-choice .check-slot {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; color: transparent;
}
.dirE-choice.selected { border-color: var(--lp-accent-500); background: var(--lp-accent-50); }
.dirE-choice.selected .letter { background: var(--lp-accent-500); color: #fff; }
.dirE-choice.correct  { border-color: #10B981; background: #ECFDF5; }
.dirE-choice.correct .letter  { background: #10B981; color: #fff; }
.dirE-choice.correct .check-slot { color: #047857; }
.dirE-choice.wrong    { border-color: #EF4444; background: #FEF2F2; }
.dirE-choice.wrong .letter    { background: #EF4444; color: #fff; }
.dirE-choice.wrong .check-slot { color: #B91C1C; }
.dirE-choice.locked { cursor: default; }
.dirE-choice .check-slot svg { width: 18px; height: 18px; }

.dirE-challenge-actions {
    padding: 16px 24px; border-top: 1px solid var(--lp-border);
    background: var(--lp-surface);
    display: grid; grid-template-columns: 1fr auto;
    gap: 16px; align-items: center;
}
.dirE-challenge-actions .feedback {
    font-size: 13px; display: flex; align-items: center; gap: 8px;
}
.dirE-challenge-actions .feedback.good { color: #047857; font-weight: 600; }
.dirE-challenge-actions .feedback.bad  { color: #B91C1C; font-weight: 600; }
.dirE-challenge-actions .feedback.hidden { visibility: hidden; }

/* Result screens */
.dirE-result { padding: 40px 36px; text-align: center; }
.dirE-result .badge {
    width: 90px; height: 90px; border-radius: 50%;
    display: grid; place-items: center;
    margin: 0 auto 18px; color: #fff;
    box-shadow: 0 0 0 6px #fff, 0 0 0 7px currentColor;
}
.dirE-result.pass .badge { background: linear-gradient(180deg, #34D399, #059669); color: #047857; }
.dirE-result.fail .badge { background: linear-gradient(180deg, #FB923C, #EA580C); color: #C2410C; }
.dirE-result h3 {
    margin: 0 0 6px; font-family: var(--lp-font-display);
    font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--lp-text-primary);
}
.dirE-result .score {
    font-family: var(--lp-font-display); font-size: 56px; font-weight: 700;
    color: var(--lp-text-primary); line-height: 1; margin: 14px 0 4px;
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.dirE-result .scoresub { font-size: 13px; color: var(--lp-text-muted); margin-bottom: 20px; }
.dirE-result .blurb {
    font-size: 14px; color: var(--lp-text-secondary);
    max-width: 460px; margin: 0 auto 24px; line-height: 1.5;
}
.dirE-result .acts { display: flex; gap: 10px; justify-content: center; }

/* ── Remedial resource list (fail state) ───────────────────────── */
.lp-remedial-list {
    width: 100%; max-width: 520px;
    margin: 0 auto 24px;
    display: flex; flex-direction: column; gap: 8px;
    text-align: left;
}
.lp-remedial-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: 10px;
}
.lp-remedial-item--clickable {
    cursor: pointer;
}
.lp-remedial-item--clickable:hover {
    border-color: var(--lp-accent);
    background: var(--lp-hover, var(--lp-surface));
}
.rem-kind {
    flex-shrink: 0;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--lp-text-muted);
    background: var(--lp-bg);
    border: 1px solid var(--lp-border);
    border-radius: 5px;
    padding: 2px 6px;
}
.rem-title {
    flex: 1;
    font-size: 13px; font-weight: 500;
    color: var(--lp-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rem-length {
    flex-shrink: 0;
    font-size: 12px; color: var(--lp-text-muted);
}
.rem-done {
    flex-shrink: 0;
    color: #16a34a;
}
.lp-btn.sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 7px;
}

/* Remedial resources shown as player-launch cards inside the challenge fail panel */
.lp-remedial-card {
    margin-bottom: 0;
}
.lp-remedial-card.complete .lp-player-launch-icon {
    background: #D1FAE5;
    color: #047857;
}
.lp-remedial-card.locked {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}
.lp-remedial-card.locked .lp-player-launch-icon {
    background: #F1F5F9;
    color: #94A3B8;
}
.lp-remedial-done-badge {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #D1FAE5;
    color: #047857;
    display: flex; align-items: center; justify-content: center;
}
.lp-remedial-lock-badge {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #F1F5F9;
    color: #94A3B8;
    display: flex; align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   ACTIVITY PLAYER DIALOG
   md-dialog hosting the URP iframe (opened from _launchPlayerDialog).
═══════════════════════════════════════════════════════════════════ */
md-dialog.lp-resource-dialog {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    padding: 0;
    background: #000;
    border-radius: 0;
}
md-dialog.lp-resource-dialog .lp-resource-frame-wrap {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
}
md-dialog.lp-resource-dialog #resourcePlayerFrame {
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
}

/* Kept for legacy reference — old overlay rules unused after the
   $mdDialog refactor. Safe to remove in a follow-up cleanup. */
.lp-player-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background: #000;
}
.lp-player-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: #0F172A;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.lp-player-close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms;
}
.lp-player-close:hover { background: rgba(255,255,255,0.08); }
.lp-player-title {
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lp-player-frame {
    flex: 1 1 auto;
    width: 100%;
    border: none;
    background: #000;
}

/* Question-preview dialog (resourceTypeId 15) — own clean chrome so the close
   button never overlaps the player content. Rendered at document.body (outside
   .lp-wrap), so uses literal colours, not --lp-* vars. */
.lp-qpreview-dialog {
    width: 96vw; max-width: 1400px;
    height: 94vh; max-height: 940px;
    border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.5);
}
.lp-qpreview-bar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: flex-end;
    height: 48px; padding: 0 10px;
    background: #fff; border-bottom: 1px solid #E2E8F0;
}
.lp-qpreview-close {
    width: 34px; height: 34px; border: none; border-radius: 9px; padding: 0;
    cursor: pointer; display: grid; place-items: center;
    background: #F1F5F9; color: #475569;
    transition: background 120ms ease, color 120ms ease;
}
.lp-qpreview-close:hover { background: #E2E8F0; color: #0F172A; }
.lp-qpreview-content {
    flex: 1 1 auto; padding: 0 !important; margin: 0; overflow: hidden;
}
.lp-qpreview-frame {
    flex: 1 1 auto; width: 100%; height: 100%; border: 0; display: block; background: #fff;
}
@media (max-width: 767px) {
    .lp-qpreview-dialog { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESOURCE LAUNCH CARD
═══════════════════════════════════════════════════════════════════ */
.lp-player-launch {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: 18px;
    margin-bottom: 24px;
}
.lp-player-launch-icon {
    width: 72px; height: 72px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--lp-neutral-100);
    color: var(--lp-text-muted);
}
.lp-player-launch.video .lp-player-launch-icon { background: #EFF6FF; color: #2563EB; }
.lp-player-launch.audio .lp-player-launch-icon { background: #FFF7ED; color: #EA580C; }
.lp-player-launch.pdf   .lp-player-launch-icon { background: #FEF2F2; color: #DC2626; }
.lp-player-launch.practice .lp-player-launch-icon { background: #F0FDF4; color: #16A34A; }

.lp-player-launch-meta { flex: 1; min-width: 0; }
.lp-player-launch-kind {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lp-text-muted);
    margin-bottom: 4px;
}
.lp-player-launch-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--lp-text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}
.lp-player-launch-dur {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--lp-text-muted);
}
.lp-player-launch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #2563EB, #1D4ED8);
    box-shadow: 0 0 0 1px #1E40AF, 0 4px 0 #1E40AF;
    flex-shrink: 0;
    transition: filter 150ms, transform 120ms;
}
.lp-player-launch-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.lp-player-launch-btn:active { transform: translateY(1px); box-shadow: 0 0 0 1px #1E40AF; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
    .dirE-shell { grid-template-columns: 1fr; }
    .dirE-rail { display: none; }
    .modulesLanding-head { grid-template-columns: 1fr; }
    .dirE-screen { padding: 16px 16px 60px; }
    .dirE-challenge-q { padding: 20px 20px; }
}
@media (max-width: 600px) {
    .modSwitcher { padding: 8px 12px; }
    .dirE-section { grid-template-columns: 44px 1fr; }
    .dirE-section .pill { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   MILESTONE CELEBRATION
   - Path light surge on the just-completed milestone's complete-overlay
   - Section-cleared card slides in from the bottom-right
═══════════════════════════════════════════════════════════════════ */

@keyframes lp-path-pulse {
    0%   { filter: drop-shadow(0 0 0 rgba(34, 197, 94, 0));   stroke-width: 4; }
    25%  { filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.85)); stroke-width: 6; }
    65%  { filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.55));  stroke-width: 5; }
    100% { filter: drop-shadow(0 0 0 rgba(34, 197, 94, 0));   stroke-width: 4; }
}
.dirE-connectors path.is-pulsing {
    animation: lp-path-pulse 1.2s ease-out 1;
}

@keyframes lp-celebration-pop {
    0%   { transform: scale(0.82) translateY(24px); opacity: 0; }
    60%  { transform: scale(1.03) translateY(0);    opacity: 1; }
    100% { transform: scale(1)    translateY(0);    opacity: 1; }
}
@keyframes lp-celebration-fade { from { opacity: 0; } to { opacity: 1; } }

/* Full-viewport celebration overlay (centered, blocking) */
.lp-celebration-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    font-family: 'Outfit', 'Inter', sans-serif;
}
.lp-celebration-backdrop {
    position: absolute; inset: 0; z-index: 0;
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    animation: lp-celebration-fade 220ms ease 1;
}

/* The ~half-screen appreciation card */
.lp-celebration-modal {
    position: relative; z-index: 2;
    width: min(560px, 92vw);
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.55), 0 4px 14px rgba(15, 23, 42, 0.12);
    padding: 40px 36px 30px;
    text-align: center;
    animation: lp-celebration-pop 440ms var(--lp-ease-spring) 1;
}
.lp-celebration-trophy {
    width: 84px; height: 84px; margin: 0 auto 18px;
    display: grid; place-items: center; border-radius: 50%;
    color: #B45309;
    background: linear-gradient(135deg, #FEF3C7, #FCD34D);
    box-shadow: 0 10px 24px -8px rgba(180, 83, 9, 0.55);
}
.lp-celebration-sub {
    margin: 0 0 16px; font-size: 14px; color: var(--lp-text-secondary); line-height: 1.5;
}
.lp-celebration-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--lp-text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lp-celebration-close:hover { background: var(--lp-surface); color: var(--lp-text-primary); }

.lp-celebration-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #059669;
    margin-bottom: 10px;
}
.lp-celebration-title {
    margin: 0 0 6px;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--lp-text-primary);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.lp-celebration-stats {
    font-size: 13px;
    color: var(--lp-text-secondary);
    margin-bottom: 22px;
    font-variant-numeric: tabular-nums;
}
.lp-celebration-actions {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    flex-wrap: wrap;
}
.lp-celebration-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg, #1973E8, #1150C4);
    color: #fff;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 0 0 1px #1150C4 inset;
    transition: filter 120ms ease;
}
.lp-celebration-cta:hover { filter: brightness(1.05); }
.lp-celebration-cta:active { filter: brightness(0.97); }

@media (max-width: 720px) {
    .lp-celebration-modal { padding: 32px 22px 24px; border-radius: 18px; }
    .lp-celebration-title { font-size: 22px; }
    .lp-celebration-actions { flex-direction: column-reverse; }
    .lp-celebration-actions .lp-btn.ghost,
    .lp-celebration-actions .lp-celebration-cta { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   MILESTONE CELEBRATION — $mdDialog popup (replaces the inline card).
   The inline card is now hidden (vm.celebration.visible stays false);
   only the SVG path-pulse uses vm.celebration. Dialog is centered and
   blocking so visibility is bulletproof.
═══════════════════════════════════════════════════════════════════ */

md-dialog.lp-celebration-dialog {
    width: 50vw;
    min-width: 480px;
    max-width: 720px;
    border-radius: 16px;
    overflow: hidden;
    font-family: 'Outfit', 'Inter', sans-serif;
    background: #fff;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.32), 0 4px 12px rgba(15, 23, 42, 0.10);
    /* keep the dialog above the confetti rain (which lives outside md-dialog) */
    z-index: 2;
}
md-dialog.lp-celebration-dialog .lp-cel-content {
    position: relative;
    padding: 64px 36px 16px;
    text-align: center;
}
md-dialog.lp-celebration-dialog .lp-cel-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--lp-text-muted, #6b7280);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
md-dialog.lp-celebration-dialog .lp-cel-close:hover {
    background: var(--lp-surface, #f3f4f6);
    color: var(--lp-text-primary, #111827);
}
md-dialog.lp-celebration-dialog .lp-cel-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #059669;
    margin-bottom: 14px;
}
md-dialog.lp-celebration-dialog .lp-cel-title {
    margin: 0 0 14px;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--lp-text-primary, #111827);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
md-dialog.lp-celebration-dialog .lp-cel-stats {
    font-size: 14px;
    color: var(--lp-text-secondary, #4b5563);
    font-variant-numeric: tabular-nums;
}
md-dialog.lp-celebration-dialog .lp-cel-actions {
    padding: 16px 28px 28px;
    display: flex;
    justify-content: center;
    gap: 12px;
}
md-dialog.lp-celebration-dialog .lp-cel-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(180deg, #1973E8, #1150C4);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    transition: filter 120ms ease;
}
md-dialog.lp-celebration-dialog .lp-cel-cta:hover { filter: brightness(1.05); }
md-dialog.lp-celebration-dialog .lp-cel-cta:active { filter: brightness(0.97); }
md-dialog.lp-celebration-dialog .lp-cel-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--lp-border, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    color: var(--lp-text-secondary, #4b5563);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
}
md-dialog.lp-celebration-dialog .lp-cel-ghost:hover {
    background: var(--lp-surface, #f3f4f6);
    color: var(--lp-text-primary, #111827);
}

/* ═══════════════════════════════════════════════════════════════════
   MILESTONE CELEBRATION — confetti rain + cracker burst.
   Pure CSS keyframes, no JS runtime cost. Animations run once and
   then idle (forwards) — pieces stay off-screen / faded out.
═══════════════════════════════════════════════════════════════════ */

/* Full-viewport confetti rain. Lives OUTSIDE md-dialog so it covers the
   whole screen while the dialog sits over the top. pointer-events:none
   so it never blocks clicks on the dialog or backdrop. */
.lp-cel-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    /* Sits above the dimmed backdrop (z-index 0) and below the modal card
       (z-index 2) within the celebration overlay's stacking context. */
    z-index: 1;
}
.lp-cel-piece {
    position: absolute;
    top: -8%;
    border-radius: 2px;
    opacity: 0;
    transform: translateY(0) rotate(var(--lp-cel-start-rot, 0deg));
    animation-name: lp-cel-fall;
    animation-timing-function: cubic-bezier(0.16, 0.6, 0.5, 1);
    animation-fill-mode: forwards;
}
@keyframes lp-cel-fall {
    0%   { opacity: 0; transform: translateY(0)      rotate(var(--lp-cel-start-rot, 0deg)); }
    10%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(108vh)  rotate(var(--lp-cel-end-rot, 720deg)); }
}

/* Cracker burst — 12 short lines emanating from above the title.
   Each line scales out from 0 to ~110px and fades. Single burst. */
md-dialog.lp-celebration-dialog .lp-cel-burst {
    position: absolute;
    top: 22px;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}
md-dialog.lp-celebration-dialog .lp-cel-burst-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 28px;
    border-radius: 2px;
    transform-origin: 50% 0;
    opacity: 0;
    animation: lp-cel-burst-line 700ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes lp-cel-burst-line {
    0%   { opacity: 0; transform: rotate(var(--burst-angle, 0deg)) translateY(0)    scaleY(0.2); }
    40%  { opacity: 1; transform: rotate(var(--burst-angle, 0deg)) translateY(-40px) scaleY(1); }
    100% { opacity: 0; transform: rotate(var(--burst-angle, 0deg)) translateY(-72px) scaleY(0.4); }
}

/* Reduced-motion accessibility — skip the animations. */
@media (prefers-reduced-motion: reduce) {
    .lp-cel-piece, md-dialog.lp-celebration-dialog .lp-cel-burst-line {
        animation: none;
        opacity: 0;
    }
}