/* ==========================================================================
   KURD AI — فێرگە (Ferga) · Lesson experience design  ·  v6
   Loaded ONLY on /ferga. Purely presentational.
   Aligned with the "Futuristic Glass" v4 token system.
   Page identity: blue → violet → pink → cyan (learning aurora).
   Focus: the READING/LEARNING view — lesson title, rendered content,
   code boxes, example output, challenge, action buttons, quiz, sidebar
   timeline, compiler. The home-view grid/hero keeps its original design.
   v5 added: lesson meta chips bar, inline-code pills, content links/tables,
   code-box language badges + copy button styling, terminal output chrome,
   challenge float/glow, glass prev/next, gradient sidebar levels + rails,
   quiz letter chips + shimmer progress, compiler top hairline + filename pill.
   Graceful fallbacks: reduced-motion / no-JS / kai-perf (content always visible).
   ========================================================================== */

/* ---------- page accent tokens (v4 alignment) ---------- */
:root {
    --kai-frg-a: #2563eb;    /* blue   */
    --kai-frg-b: #7c3aed;    /* violet */
    --kai-frg-c: #ec4899;    /* pink   */
    --kai-frg-d: #06b6d4;    /* cyan   */
}

/* ---------- 1. Learning view entrance + ambient aurora ---------- */
#learning-view { animation: kaiViewIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes kaiViewIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

#lesson-main::before {
    content: "";
    position: absolute;
    top: -12%;
    right: -8%;
    width: 440px;
    height: 440px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.14), transparent 65%);
    filter: blur(44px);
    pointer-events: none;
    animation: kaiAura 12s ease-in-out infinite alternate;
}
.dark #lesson-main::before {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.10), transparent 65%);
}
@keyframes kaiAura { from { opacity: 0.6; transform: translateY(0) scale(1); } to { opacity: 1; transform: translateY(14px) scale(1.08); } }

/* ---------- 2. Reading progress bar (JS injects #kai-progress) ---------- */
#kai-progress {
    position: sticky;
    top: 0;
    height: 3px;
    z-index: 40;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
    flex-shrink: 0;
}
#kai-progress-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 0%;
    background: linear-gradient(90deg, var(--kai-frg-a), var(--kai-frg-b), var(--kai-frg-c), var(--kai-frg-d));
    background-size: 220% auto;
    animation: kaiFlow 6s linear infinite;
    box-shadow: 0 0 14px color-mix(in srgb, var(--kai-frg-b) 80%, transparent);
    transition: width 0.1s linear;
}
@keyframes kaiFlow { to { background-position: 220% center; } }

#lesson-main.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--kai-frg-a), var(--kai-frg-b));
    border-radius: 20px;
}

/* ---------- 3. Lesson title ---------- */
#display-title {
    position: relative;
    padding-bottom: 0.4em;
    background-image: linear-gradient(90deg, var(--kai-frg-a), var(--kai-frg-b) 40%, var(--kai-frg-c) 75%, var(--kai-frg-d));
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: kaiFlow 7s linear infinite;
}
#display-title::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--kai-frg-a), var(--kai-frg-b), var(--kai-frg-c), var(--kai-frg-d));
    background-size: 220% auto;
    animation: kaiFlow 7s linear infinite;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--kai-frg-b) 50%, transparent);
}
#display-title.kai-title-pop { animation: kaiPopIn 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- 4. Rendered lesson content ---------- */
#display-content { line-height: 2; }

#display-content h1, #display-content h2, #display-content h3 {
    background-image: linear-gradient(90deg, var(--kai-frg-a), var(--kai-frg-b), var(--kai-frg-c));
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding-bottom: 0.2em;
}
#display-content p { margin-bottom: 1.1em; }
#display-content p strong, #display-content p b,
#display-content li strong, #display-content li b {
    background-image: linear-gradient(90deg, var(--kai-frg-a), var(--kai-frg-b));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

#display-content ul { list-style: none; padding-right: 0; margin: 0.6em 0 1.2em; }
#display-content ul li { position: relative; padding-right: 1.7em; margin-bottom: 0.55em; }
#display-content ul li::before {
    content: "";
    position: absolute;
    right: 0.1em;
    top: 0.68em;
    width: 0.55em;
    height: 0.55em;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--kai-frg-a), var(--kai-frg-b));
    box-shadow: 0 0 8px color-mix(in srgb, var(--kai-frg-b) 60%, transparent);
}
#display-content ol { margin: 0.6em 0 1.2em; }
#display-content ol li { margin-bottom: 0.5em; }

#display-content blockquote {
    border-right: 3px solid var(--kai-frg-b);
    background: linear-gradient(180deg, color-mix(in srgb, var(--kai-frg-b) 8%, transparent), transparent);
    padding: 0.6em 1em;
    border-radius: 0 12px 12px 0;
    margin: 1em 0;
    color: #6b7280;
}
.dark #display-content blockquote { color: #cbd5e1; }

#display-content pre {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--kai-frg-a) 28%, transparent);
    border-radius: 14px;
    background: #1b1b2f linear-gradient(180deg, color-mix(in srgb, var(--kai-frg-d) 7%, transparent), transparent 40%);
    color: #d4d4ff;
    box-shadow: 0 14px 40px -14px color-mix(in srgb, var(--kai-frg-a) 35%, transparent);
    overflow: hidden;
}
#display-content pre::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--kai-frg-a), var(--kai-frg-b), var(--kai-frg-c));
    opacity: 0.8;
}
#display-content pre code { color: inherit; }

/* read-along reveal (JS adds .kai-reveal, IntersectionObserver adds .kai-on) */
#display-content .kai-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--kai-delay, 0s);
}
#display-content .kai-reveal.kai-on { opacity: 1; transform: none; }

/* ---------- 5. Code boxes ---------- */
#display-code-box .rounded-2xl,
#display-css-code-box .rounded-2xl {
    box-shadow: 0 18px 50px -14px color-mix(in srgb, var(--kai-frg-d) 28%, transparent), 0 0 0 1px color-mix(in srgb, var(--kai-frg-d) 15%, transparent);
}
#display-code.kai-anim > div,
#display-css-code.kai-anim > div {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: var(--kai-delay, 0s);
}
#display-code.kai-anim > div.kai-on,
#display-css-code.kai-anim > div.kai-on {
    opacity: 1;
    transform: none;
}
/* blinking terminal caret after the last code line (JS marks it .kai-last-line) */
#display-code > div.kai-last-line::after,
#display-css-code > div.kai-last-line::after {
    content: "▍";
    margin-right: 2px;
    color: #67d8ff;
    text-shadow: 0 0 8px rgba(103, 216, 255, 0.8);
    animation: kaiCaret 1.1s steps(1) infinite;
}
@keyframes kaiCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- 6. Example output + challenge ---------- */
#example-output-box { animation: kaiPopIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes kaiPopIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
#display-example-output { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.2); }

#challenge-container { position: relative; animation: kaiPopIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
#challenge-container::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(120deg, var(--kai-frg-b), var(--kai-frg-a), var(--kai-frg-c), var(--kai-frg-d), var(--kai-frg-b));
    background-size: 300% 300%;
    animation: kaiBorderFlow 6s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.85;
}
@keyframes kaiBorderFlow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

/* ---------- 7. Action buttons ---------- */
#btn-action {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(90deg, var(--kai-frg-a), var(--kai-frg-b) 50%, var(--kai-frg-c));
    background-size: 220% 100%;
    animation: kaiFlow 5s linear infinite;
    box-shadow: 0 12px 34px -10px color-mix(in srgb, var(--kai-frg-a) 65%, transparent);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#btn-action::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -80%;
    width: 60%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg);
    animation: kaiShine 2.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes kaiShine { 0%, 55% { left: -80%; } 100% { left: 160%; } }
#btn-action:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 46px -12px color-mix(in srgb, var(--kai-frg-b) 80%, transparent); }
#btn-action:disabled { filter: saturate(0.4) brightness(0.9); animation: none; }

#btn-prev { transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; }
#btn-prev:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(148, 163, 184, 0.6); }

#btn-challenge-open { position: relative; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; }
#btn-challenge-open::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(120deg, var(--kai-frg-b), var(--kai-frg-a), var(--kai-frg-c), var(--kai-frg-b));
    background-size: 300% 300%;
    animation: kaiBorderFlow 5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
#btn-challenge-open:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--kai-frg-b) 60%, transparent); }

/* ---------- 8. Quiz ---------- */
#quiz-options .quiz-option {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
#quiz-options .quiz-option:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--kai-frg-a) 35%, transparent); }
#btn-quiz-next {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(90deg, var(--kai-frg-a), var(--kai-frg-b) 50%, var(--kai-frg-c));
    background-size: 220% 100%;
    animation: kaiFlow 5s linear infinite;
    box-shadow: 0 12px 34px -10px color-mix(in srgb, var(--kai-frg-a) 60%, transparent);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#btn-quiz-next:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--kai-frg-b) 80%, transparent); }

/* ---------- 9. Sidebar (timeline) ---------- */
#learning-view aside > div:first-child {
    background-image: linear-gradient(120deg, color-mix(in srgb, var(--kai-frg-a) 10%, transparent), color-mix(in srgb, var(--kai-frg-b) 10%, transparent), color-mix(in srgb, var(--kai-frg-c) 10%, transparent));
}
.timeline-dot { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.timeline-dot.current {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kai-frg-a) 28%, transparent), 0 0 16px color-mix(in srgb, var(--kai-frg-a) 85%, transparent);
    animation: kaiDotPulse 2.2s ease-in-out infinite;
}
@keyframes kaiDotPulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--kai-frg-a) 28%, transparent), 0 0 10px color-mix(in srgb, var(--kai-frg-a) 60%, transparent); }
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--kai-frg-a) 12%, transparent), 0 0 20px color-mix(in srgb, var(--kai-frg-a) 100%, transparent); }
}
.timeline-dot.completed { box-shadow: 0 0 12px rgba(16, 185, 129, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.5); }
#sidebar-content .group:hover .timeline-dot { transform: scale(1.3); }
#sidebar-content button:not(.locked-lesson) { transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
#sidebar-content button:not(.locked-lesson):hover { transform: translateX(-5px); }
#sidebar-content button[class*="bg-blue-50"] {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--kai-frg-a) 18%, transparent), color-mix(in srgb, var(--kai-frg-b) 18%, transparent)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kai-frg-a) 25%, transparent);
}
#sidebar-content .kai-side-row { animation: kaiRowIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--kai-delay, 0s); }
@keyframes kaiRowIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* ---------- 10. Compiler / terminal ---------- */
#compiler-modal > .rounded-2xl {
    border-color: color-mix(in srgb, var(--kai-frg-b) 50%, transparent);
    box-shadow: 0 0 70px -12px color-mix(in srgb, var(--kai-frg-b) 40%, transparent), 0 40px 90px -20px rgba(0, 0, 0, 0.65);
}
#user-code, #user-code-css { caret-color: #67d8ff; }
#code-output::after {
    content: "▍";
    color: #34d399;
    animation: kaiCaret 1.1s steps(1) infinite;
}

/* ---------- 10b. Lesson meta chips (JS injects .kai-lesson-meta above the title) ---------- */
.kai-lesson-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.1rem;
}
.kai-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .85rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: color-mix(in srgb, var(--kai-frg-a) 85%, #0f172a);
    background: color-mix(in srgb, var(--kai-frg-a) 9%, var(--kai-surface, #ffffff));
    border: 1px solid color-mix(in srgb, var(--kai-frg-a) 24%, transparent);
    box-shadow: var(--kai-shadow-1), inset 0 1px 0 rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    animation: kaiChipIn .45s var(--kai-ease) both;
}
html.dark .kai-meta-chip {
    color: #c7d2fe;
    background: rgba(23, 33, 62, .6);
    border-color: rgba(122, 152, 214, .22);
}
@keyframes kaiChipIn { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
.kai-meta-chip svg { width: .95em; height: .95em; }
.kai-meta-chip .kai-dot {
    width: .45em;
    height: .45em;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: kaiBlink 2.4s ease-in-out infinite;
}
@keyframes kaiBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.kai-meta-chip--level { color: color-mix(in srgb, var(--kai-frg-b) 88%, #0f172a); border-color: color-mix(in srgb, var(--kai-frg-b) 32%, transparent); background: color-mix(in srgb, var(--kai-frg-b) 9%, var(--kai-surface, #ffffff)); }
html.dark .kai-meta-chip--level { color: #ddd6fe; }
.kai-meta-chip--xp { color: #b45309; border-color: rgba(245, 158, 11, .4); background: color-mix(in srgb, #f59e0b 10%, var(--kai-surface, #ffffff)); }
html.dark .kai-meta-chip--xp { color: #fbbf24; background: rgba(120, 53, 15, .35); }
.kai-meta-chip--lang { color: color-mix(in srgb, var(--kai-frg-d) 90%, #0f172a); border-color: color-mix(in srgb, var(--kai-frg-d) 38%, transparent); }
html.dark .kai-meta-chip--lang { color: #a5f3fc; }

/* ---------- 10c. Lesson title aurora glow ---------- */
#display-title {
    filter: drop-shadow(0 8px 34px color-mix(in srgb, var(--kai-frg-b) 32%, transparent));
}

/* ---------- 10d. Rendered content polish ---------- */
#display-content :not(pre) > code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .84em;
    font-weight: 700;
    padding: .14em .5em;
    border-radius: 8px;
    color: color-mix(in srgb, var(--kai-frg-b) 92%, #0f172a);
    background: color-mix(in srgb, var(--kai-frg-a) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--kai-frg-b) 22%, transparent);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 8px -3px color-mix(in srgb, var(--kai-frg-b) 40%, transparent);
}
html.dark #display-content :not(pre) > code { color: #e2e8ff; background: rgba(56, 189, 248, .08); }

#display-content a {
    color: var(--kai-frg-d);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--kai-frg-d) 55%, transparent);
    text-underline-offset: .22em;
    text-decoration-thickness: 2px;
    transition: color .25s ease;
}
#display-content a:hover { color: var(--kai-frg-b); }

#display-content hr {
    border: none;
    height: 1px;
    margin: 1.7em 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--kai-frg-b) 50%, transparent), transparent);
}

#display-content table {
    width: 100%;
    margin: 1.1em 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--kai-glass-brd);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--kai-shadow-1);
}
#display-content th, #display-content td { padding: .6em .9em; text-align: start; border-bottom: 1px solid var(--kai-glass-brd); }
#display-content thead th { background: color-mix(in srgb, var(--kai-frg-a) 12%, transparent); font-weight: 800; }

#display-content img { border-radius: 16px; box-shadow: var(--kai-shadow-2); margin: 1.1em 0; }

#display-content blockquote { box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--kai-frg-b) 35%, transparent); }

/* ---------- 10e. Code boxes: chrome + badges + copy ---------- */
#display-code-box .rounded-2xl,
#display-css-code-box .rounded-2xl {
    transition: transform .4s var(--kai-ease), box-shadow .4s var(--kai-ease), border-color .4s var(--kai-ease);
}
#display-code-box .rounded-2xl:hover,
#display-css-code-box .rounded-2xl:hover {
    transform: translateY(-3px);
    box-shadow:
        0 26px 60px -16px color-mix(in srgb, var(--kai-frg-b) 40%, transparent),
        0 0 0 1px color-mix(in srgb, var(--kai-frg-d) 35%, transparent);
}
#display-code-box > .rounded-2xl > div:first-child,
#display-css-code-box > .rounded-2xl > div:first-child {
    position: relative;
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--kai-frg-a) 16%, transparent), color-mix(in srgb, var(--kai-frg-b) 16%, transparent));
}
#display-code-box > .rounded-2xl > div:first-child::after,
#display-css-code-box > .rounded-2xl > div:first-child::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--kai-frg-a), var(--kai-frg-b), var(--kai-frg-c), var(--kai-frg-d));
    background-size: 220% auto;
    animation: kaiFlow 6s linear infinite;
    opacity: .85;
    pointer-events: none;
}
#display-code-box > .rounded-2xl > div:first-child > *,
#display-css-code-box > .rounded-2xl > div:first-child > * { position: relative; z-index: 1; }

.kai-lang-badge {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border-radius: 6px;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #67d8ff;
    background: rgba(103, 216, 255, .10);
    border: 1px solid rgba(103, 216, 255, .28);
    box-shadow: 0 0 12px rgba(103, 216, 255, .12);
}

#display-code div > span.w-6,
#display-css-code div > span.w-6 {
    color: color-mix(in srgb, var(--kai-frg-d) 72%, #94a3b8) !important;
    font-weight: 700;
    text-shadow: 0 0 10px color-mix(in srgb, var(--kai-frg-d) 45%, transparent);
}
#display-code [class*="6a9955"],
#display-css-code [class*="6a9955"] { text-shadow: 0 0 10px rgba(106, 153, 85, .6); }
#display-code .text-gray-400,
#display-css-code .text-gray-400 { color: #a3b3cf !important; }

/* ---------- 10f. Example output (terminal chrome) ---------- */
#example-output-box > div { position: relative; overflow: hidden; box-shadow: 0 14px 44px -14px rgba(16, 185, 129, .35); }
#example-output-box > div::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #34d399, transparent);
    opacity: .8;
    pointer-events: none;
}

/* ---------- 10g. Challenge box: glow + float + glass ---------- */
#challenge-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--kai-frg-b) 16%, transparent), transparent 60%);
    pointer-events: none;
}
#challenge-container > .flex.items-center.gap-3 > div:first-child { animation: kaiChallengeFloat 3.6s ease-in-out infinite; }
@keyframes kaiChallengeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
#challenge-text {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 24px -12px color-mix(in srgb, var(--kai-frg-b) 35%, transparent);
}
html.dark #challenge-text { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
#challenge-attempts-note {
    width: fit-content;
    padding: .3rem .8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--kai-frg-b) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--kai-frg-b) 26%, transparent);
}

/* ---------- 10h. Prev / Next actions ---------- */
#btn-prev {
    border: 1px solid var(--kai-glass-brd);
    box-shadow: var(--kai-shadow-1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
#btn-prev:hover { background-color: var(--kai-surface) !important; }
html.dark #btn-prev:hover { background-color: rgba(255, 255, 255, .08) !important; }

/* ---------- 10i. Sidebar: gradient levels + rails + completed tint ---------- */
#sidebar-content > div.mb-4.px-2 {
    background-image: linear-gradient(90deg, var(--kai-frg-a), var(--kai-frg-b), var(--kai-frg-c));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
html.dark #sidebar-content > div.mb-4.px-2 { filter: drop-shadow(0 0 8px rgba(139, 92, 246, .5)); }
#sidebar-content > div.relative.pl-3 {
    border-image: linear-gradient(180deg, color-mix(in srgb, var(--kai-frg-a) 55%, transparent), color-mix(in srgb, var(--kai-frg-c) 55%, transparent)) 1;
}
@supports (selector(:has(*))) {
    #sidebar-content .group:has(.timeline-dot.completed) button:not(.locked-lesson) {
        background: color-mix(in srgb, #10b981 7%, transparent) !important;
    }
    html.dark #sidebar-content .group:has(.timeline-dot.completed) button:not(.locked-lesson) {
        background: rgba(16, 185, 129, .10) !important;
    }
}

/* ---------- 10j. Quiz: letter chips + shimmer progress + result aurora ---------- */
#quiz-options .quiz-option { position: relative; overflow: hidden; }
#quiz-options .quiz-option::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--kai-frg-a), var(--kai-frg-b));
    opacity: 0;
    transition: opacity .25s ease;
}
#quiz-options .quiz-option:hover::before { opacity: 1; }
#quiz-options .quiz-option:hover { transform: translateY(-3px) scale(1.008); box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--kai-frg-b) 45%, transparent); }
#quiz-options .indicator-circle {
    font-size: .68rem;
    font-weight: 900;
    color: color-mix(in srgb, var(--kai-frg-a) 85%, #0f172a);
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
html.dark #quiz-options .indicator-circle { color: #c7d2fe; }
#quiz-options .quiz-option.option-correct .indicator-circle,
#quiz-options .quiz-option.option-wrong .indicator-circle { color: #fff; }
#quiz-progress-bar {
    background-image: linear-gradient(90deg, var(--kai-frg-a), var(--kai-frg-b), var(--kai-frg-c), var(--kai-frg-d)) !important;
    background-size: 220% auto;
    animation: kaiFlow 3s linear infinite;
    box-shadow: 0 0 12px color-mix(in srgb, var(--kai-frg-b) 60%, transparent);
}
#quiz-counter {
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--kai-frg-a) 16%, transparent), color-mix(in srgb, var(--kai-frg-b) 16%, transparent));
}
#quiz-feedback { animation: kaiPopIn .4s var(--kai-ease) both; }
#quiz-result:not(.hidden) { animation: kaiPopIn .5s var(--kai-ease) both; }

/* ---------- 10k. Compiler: top hairline + filename pill + tabs ---------- */
#compiler-modal > .rounded-2xl { position: relative; }
#compiler-modal > .rounded-2xl::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    z-index: 2;
    background: linear-gradient(90deg, var(--kai-frg-a), var(--kai-frg-b), var(--kai-frg-c), var(--kai-frg-d));
    background-size: 220% auto;
    animation: kaiFlow 6s linear infinite;
    opacity: .9;
    pointer-events: none;
}
#compiler-filename-label {
    padding: .25rem .6rem;
    border-radius: 8px;
    color: #7dd3fc !important;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, .08), 0 0 12px rgba(56, 189, 248, .08);
}
#file-tab-html, #file-tab-css { transition: color .25s ease, background-color .25s ease, box-shadow .25s ease; }
#file-tab-html:hover, #file-tab-css:hover { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--kai-frg-d) 70%, transparent); }
#compiler-challenge-desc { text-shadow: 0 0 14px rgba(168, 85, 247, .3); }

/* ---------- 11. Fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
    #learning-view, #example-output-box, #challenge-container,
    #btn-action, #btn-action::after, #btn-quiz-next, #display-title,
    #btn-challenge-open::before, #challenge-container::after,
    #lesson-main::before, .timeline-dot.current, #kai-progress-fill,
    #sidebar-content .kai-side-row,
    #display-code > div.kai-last-line::after,
    #display-css-code > div.kai-last-line::after,
    #code-output::after { animation: none !important; }
    #display-title, #display-content h1, #display-content h2, #display-content h3,
    #display-content p strong, #display-content p b,
    #display-content li strong, #display-content li b {
        background-image: none;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        color: #111827;
        -webkit-text-fill-color: #111827;
    }
    .dark #display-title, .dark #display-content h1, .dark #display-content h2,
    .dark #display-content h3 { color: #fff; -webkit-text-fill-color: #fff; }
    #display-content .kai-reveal { opacity: 1 !important; transform: none !important; }
    #display-code > div, #display-css-code > div { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   12. Home grid — 3D featured views (categories / langs / ai)
       Scoped by #languages-grid[data-kai-view]. Pure CSS, no images:
       rotating conic rings, flowing top bars, floating icon tiles,
       breathing halos, shimmering progress bars.
       Entrances are TRANSFORM-ONLY (never opacity) — nothing can vanish.
       ========================================================================== */

@property --kai-rot { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes kaiRingRotate { to { --kai-rot: 360deg; } }

@keyframes kaiCardRise { from { transform: translateY(26px); } to { transform: none; } }
@keyframes kaiFloatY { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(2.5deg); } }

#languages-grid[data-kai-view="categories"] > .glass-card,
#languages-grid[data-kai-view="langs"] > .glass-card,
#languages-grid[data-kai-view="ai"] > .ai-topic-card { border-color: transparent; }
#languages-grid[data-kai-view="categories"] > .glass-card:hover,
#languages-grid[data-kai-view="langs"] > .glass-card:hover { border-color: transparent; }

/* ---- rotating conic rings (live on the shared ::after edge layer) ---- */
#languages-grid[data-kai-view="categories"] > .glass-card::after {
    background: conic-gradient(from var(--kai-rot, 0deg),
        rgba(37,99,235,.95), rgba(6,182,212,.9) 25%,
        rgba(124,58,237,.95) 50%, rgba(236,72,153,.9) 75%,
        rgba(37,99,235,.95));
    animation: kaiRingRotate 9s linear infinite;
    padding: 2px;
    opacity: 1;
}
#languages-grid[data-kai-view="langs"] > .glass-card::after {
    background: conic-gradient(from var(--kai-rot, 0deg),
        rgba(59,130,246,.75), rgba(139,92,246,.75) 45%,
        rgba(6,182,212,.75) 75%, rgba(59,130,246,.75));
    animation: kaiRingRotate 14s linear infinite;
    padding: 2px;
    opacity: 1;
}
#languages-grid[data-kai-view="ai"] > .ai-topic-card::after {
    background: conic-gradient(from var(--kai-rot, 0deg),
        rgba(16,185,129,.85), rgba(20,184,166,.85) 40%,
        rgba(6,182,212,.85) 70%, rgba(16,185,129,.85));
    animation: kaiRingRotate 8s linear infinite;
    padding: 2px;
    opacity: 1;
}

/* ---- flowing top accent bars ---- */
#languages-grid[data-kai-view="categories"] > .glass-card > div[class*="absolute top-0"],
#languages-grid[data-kai-view="ai"] > .ai-topic-card > div[class*="absolute top-0"] {
    background-size: 200% auto;
    animation: kaiFlow 4s linear infinite;
}

/* ---- staggered (transform-only) rises ---- */
#languages-grid[data-kai-view="categories"] > .glass-card {
    animation: kaiCardRise .6s var(--kai-ease) backwards,
               kaiCardGlowPulse 4s ease-in-out infinite;
}
#languages-grid[data-kai-view="categories"] > .glass-card:nth-child(1) { --kai-glow-c: 37,99,235;   animation-delay: 0s, 0s; }
#languages-grid[data-kai-view="categories"] > .glass-card:nth-child(2) { --kai-glow-c: 16,185,129; animation-delay: .09s, 0s; }
#languages-grid[data-kai-view="categories"] > .glass-card:nth-child(3) { --kai-glow-c: 244,63,94;  animation-delay: .18s, 0s; }

@keyframes kaiCardGlowPulse {
    0%, 100% { box-shadow: var(--kai-shadow-1), 0 0 34px -10px rgba(var(--kai-glow-c, 37,99,235), .28); }
    50%      { box-shadow: var(--kai-shadow-2), 0 0 58px -8px  rgba(var(--kai-glow-c, 37,99,235), .55); }
}

#languages-grid[data-kai-view="langs"] > .glass-card { animation: kaiCardRise .55s var(--kai-ease) backwards; }
#languages-grid[data-kai-view="langs"] > .glass-card:nth-child(2) { animation-delay: .06s; }
#languages-grid[data-kai-view="langs"] > .glass-card:nth-child(3) { animation-delay: .12s; }
#languages-grid[data-kai-view="langs"] > .glass-card:nth-child(4) { animation-delay: .18s; }
#languages-grid[data-kai-view="langs"] > .glass-card:nth-child(5) { animation-delay: .24s; }
#languages-grid[data-kai-view="langs"] > .glass-card:nth-child(6) { animation-delay: .30s; }
#languages-grid[data-kai-view="langs"] > .glass-card:nth-child(7) { animation-delay: .36s; }
#languages-grid[data-kai-view="langs"] > .glass-card:nth-child(8) { animation-delay: .42s; }
#languages-grid[data-kai-view="langs"] > .glass-card:nth-child(9) { animation-delay: .48s; }

#languages-grid[data-kai-view="ai"] > .ai-topic-card { animation: kaiCardRise .6s var(--kai-ease) backwards; }

/* ---- floating icon tiles + breathing halos ---- */
#languages-grid[data-kai-view="categories"] > .glass-card > div[class*="-space-x-2"] {
    animation: kaiFloatY 5s ease-in-out infinite;
}
#languages-grid[data-kai-view="categories"] > .glass-card > .w-24.h-24 {
    animation: kaiFloatY 5s ease-in-out infinite;
}
#languages-grid[data-kai-view="langs"] > .glass-card > div[class*="w-24 h-24"] {
    animation: kaiTileGlow 3.6s ease-in-out infinite;
}
@keyframes kaiTileGlow {
    0%, 100% { transform: translateY(0) rotate(0deg); box-shadow: 0 0 0 1px rgba(59,130,246,.22), 0 12px 28px -12px rgba(59,130,246,.45); }
    50%      { transform: translateY(-7px) rotate(3deg); box-shadow: 0 0 0 4px rgba(59,130,246,.12), 0 22px 44px -14px rgba(99,102,241,.65); }
}
#languages-grid[data-kai-view="ai"] .ai-topic-card .relative.w-24.h-24 {
    animation: kaiAiIconFloat 4.5s ease-in-out infinite;
}
@keyframes kaiAiIconFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); box-shadow: 0 0 0 4px rgba(255,255,255,.22), 0 18px 44px -14px rgba(16,185,129,.55); }
    50%      { transform: translateY(-9px) rotate(4deg);  box-shadow: 0 0 0 7px rgba(255,255,255,.10), 0 30px 60px -16px rgba(16,185,129,.85); }
}

/* ---- shimmering lesson-progress bars (ai topics) ---- */
#languages-grid[data-kai-view="ai"] .ai-topic-card .h-2 > div {
    background-size: 200% auto;
    animation: kaiFlow 3s linear infinite;
}

/* ---- featured category buttons: shine sweep ---- */
#languages-grid[data-kai-view="categories"] > .glass-card > span[class*="bg-gradient-to-r"] {
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 38px -14px rgba(var(--kai-glow-c, 37,99,235), .55);
}
#languages-grid[data-kai-view="categories"] > .glass-card > span[class*="bg-gradient-to-r"]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -140%;
    width: 55%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-18deg);
    animation: kaiShine 2.8s ease-in-out infinite;
    pointer-events: none;
}

/* ---------- 13. Motion + perf fallbacks for the premium lesson layers ---------- */
@media (prefers-reduced-motion: reduce) {
    .kai-meta-chip,
    .kai-meta-chip .kai-dot,
    #display-code-box > .rounded-2xl > div:first-child::after,
    #display-css-code-box > .rounded-2xl > div:first-child::after,
    #challenge-container > .flex.items-center.gap-3 > div:first-child,
    #quiz-progress-bar,
    #compiler-modal > .rounded-2xl::before { animation: none !important; }
    #sidebar-content > div.mb-4.px-2 {
        background-image: none;
        color: #6b7280;
        -webkit-text-fill-color: #6b7280;
    }
    .dark #sidebar-content > div.mb-4.px-2 {
        color: #9ca3af;
        -webkit-text-fill-color: #9ca3af;
    }
}

html.kai-perf .kai-meta-chip,
html.kai-perf #challenge-text {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html.kai-perf #display-code-box .rounded-2xl:hover,
html.kai-perf #display-css-code-box .rounded-2xl:hover { transform: none; }