/* =========================================================
   CDU CODES
   main.css
   Global Design System
   ========================================================= */

:root {

    --bg: #070b0f;
    --bg-soft: #0a1015;
    --surface: #0d141b;
    --surface-2: #111a22;
    --surface-3: #16212a;

    --border: #1c2a35;
    --border-light: #263743;

    --primary: #00e6a0;
    --primary-dark: #00b981;
    --primary-soft: rgba(0, 230, 160, 0.10);
    --primary-glow: rgba(0, 230, 160, 0.20);

    --text: #f1f5f9;
    --text-soft: #cbd5e1;
    --muted: #81909f;

    --easy: #00e6a0;
    --medium: #ffc857;
    --hard: #ff6575;

    --danger: #ff5364;
    --warning: #ffc857;
    --success: #00e6a0;

    --radius-sm: 7px;
    --radius: 11px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    --shadow:
        0 10px 35px rgba(0, 0, 0, 0.25);

    --transition:
        160ms ease;

    --max-width: 1280px;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(0, 230, 160, 0.045),
            transparent 30%
        ),
        var(--bg);

    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.6;

    overflow-x: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


img {
    max-width: 100%;
    display: block;
}


::selection {
    background: var(--primary);
    color: #00130d;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}


::-webkit-scrollbar-track {
    background: var(--bg);
}


::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    height: 68px;

    display: flex;
    align-items: center;

    padding: 0 30px;

    background: rgba(7, 11, 15, 0.88);

    border-bottom: 1px solid var(--border);

    backdrop-filter: blur(18px);
}


.brand {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.4px;

    color: var(--text);
}


.brand-mark {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    color: var(--primary);

    border: 1px solid var(--primary);

    border-radius: 8px;

    font-size: 13px;
    font-weight: 900;

    box-shadow:
        0 0 18px rgba(0, 230, 160, 0.12);
}


.nav-links {
    margin-left: auto;

    display: flex;
    align-items: center;
    gap: 5px;
}


.nav-links a {
    padding: 8px 13px;

    color: var(--muted);

    border-radius: 7px;

    font-size: 14px;
    font-weight: 600;

    transition: var(--transition);
}


.nav-links a:hover {
    color: var(--text);
    background: var(--surface);
}


.nav-links .admin-link {
    color: var(--primary);
}


.nav-links .nav-button {
    color: #00130d;
    background: var(--primary);

    margin-left: 5px;
}


.nav-links .nav-button:hover {
    background: #18f2ad;
    color: #00130d;
}


.theme-toggle {
    width: 36px;
    height: 36px;

    margin-left: 12px;

    display: grid;
    place-items: center;

    background: var(--surface);

    color: var(--muted);

    border: 1px solid var(--border);
    border-radius: 8px;

    transition: var(--transition);
}


.theme-toggle:hover {
    color: var(--primary);
    border-color: var(--primary);
}


/* =========================================================
   MAIN
   ========================================================= */

main {
    width: 100%;
}


.footer {
    max-width: var(--max-width);

    margin: 80px auto 0;
    padding: 28px 30px;

    display: flex;
    justify-content: space-between;

    color: var(--muted);

    border-top: 1px solid var(--border);

    font-size: 13px;
}


.footer strong {
    color: var(--text);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 18px;

    border: 1px solid transparent;
    border-radius: var(--radius);

    font-size: 14px;
    font-weight: 700;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}


.btn:hover {
    transform: translateY(-1px);
}


.btn-primary {
    color: #00130d;
    background: var(--primary);
}


.btn-primary:hover {
    background: #19f2ad;

    box-shadow:
        0 7px 25px rgba(0, 230, 160, 0.15);
}


.btn-secondary {
    color: var(--text-soft);
    background: var(--surface);

    border-color: var(--border);
}


.btn-secondary:hover {
    color: var(--text);
    border-color: var(--border-light);
    background: var(--surface-2);
}


.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    max-width: var(--max-width);

    min-height: 650px;

    margin: auto;
    padding: 90px 30px;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 70px;
}


.hero-badge {
    display: inline-flex;

    padding: 6px 11px;

    color: var(--primary);

    background: var(--primary-soft);

    border: 1px solid rgba(0, 230, 160, 0.18);

    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;

    margin-bottom: 20px;
}


.hero h1 {
    max-width: 700px;

    font-size: clamp(48px, 6vw, 76px);

    line-height: 1.02;

    letter-spacing: -4px;

    margin-bottom: 24px;
}


.hero h1 span {
    display: block;
    color: var(--primary);
}


.hero p {
    max-width: 590px;

    color: var(--muted);

    font-size: 18px;

    line-height: 1.7;

    margin-bottom: 32px;
}


.hero-actions {
    display: flex;
    gap: 12px;
}


.hero-code {
    display: flex;
    justify-content: center;
}


.code-window {
    width: 100%;
    max-width: 530px;

    overflow: hidden;

    background: #090f14;

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.4),
        0 0 70px rgba(0, 230, 160, 0.04);
}


.code-header {
    height: 42px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 0 15px;

    background: var(--surface);

    border-bottom: 1px solid var(--border);
}


.code-header span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--border-light);
}


.code-window pre {
    padding: 28px;

    overflow-x: auto;

    font-family:
        "JetBrains Mono",
        "Fira Code",
        Consolas,
        monospace;

    font-size: 14px;

    line-height: 1.9;
}


.code-comment {
    color: #607483;
}


.code-keyword {
    color: var(--primary);
}


.code-string {
    color: #d7ba7d;
}


/* =========================================================
   SECTION
   ========================================================= */

.features,
.cta-section {
    max-width: var(--max-width);

    margin: auto;

    padding: 90px 30px;
}


.section-heading {
    margin-bottom: 40px;
}


.section-heading > span,
.section-label {
    color: var(--primary);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.section-heading h2 {
    margin-top: 8px;

    font-size: 32px;

    letter-spacing: -1.2px;
}


.feature-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


.feature-card {
    padding: 28px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    transition: var(--transition);
}


.feature-card:hover {
    transform: translateY(-4px);

    border-color:
        rgba(0, 230, 160, 0.3);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.22);
}


.feature-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    margin-bottom: 20px;

    background: var(--primary-soft);

    border: 1px solid rgba(0, 230, 160, 0.16);

    border-radius: 10px;

    font-size: 20px;
}


.feature-card h3 {
    margin-bottom: 9px;

    font-size: 17px;
}


.feature-card p {
    color: var(--muted);

    font-size: 14px;
}


.cta-section {
    margin-top: 40px;

    text-align: center;

    border-top: 1px solid var(--border);
}


.cta-section h2 {
    font-size: 35px;

    margin-bottom: 10px;
}


.cta-section p {
    color: var(--muted);

    margin-bottom: 24px;
}


/* =========================================================
   LEARNING PAGE
   ========================================================= */

.learning-page {
    display: grid;

    grid-template-columns: 270px 1fr;

    min-height:
        calc(100vh - 68px);
}


.learning-sidebar {
    position: sticky;
    top: 68px;

    height:
        calc(100vh - 68px);

    overflow-y: auto;
    overflow: visible;
    padding: 25px 18px;

    background: #090f14;

    border-right: 1px solid var(--border);
}


.course-title {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 8px 8px 22px;

    border-bottom: 1px solid var(--border);
}


.course-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    background: var(--primary-soft);

    border-radius: 9px;
}


.course-title strong {
    display: block;

    font-size: 15px;
}


.course-title span {
    display: block;

    color: var(--muted);

    font-size: 11px;
}


.course-progress {
    padding: 20px 8px;
}


.progress-header {
    display: flex;
    justify-content: space-between;

    color: var(--muted);

    font-size: 11px;

    margin-bottom: 8px;
}


.progress-header strong {
    color: var(--primary);
}


.progress-track {
    height: 5px;

    overflow: hidden;

    background: #18232b;

    border-radius: 999px;
}


.progress-fill {
    height: 100%;

    background: var(--primary);

    border-radius: inherit;

    transition: width 400ms ease;
}


.lesson-list {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.lesson {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 9px 10px;

    color: var(--muted);

    border-radius: 7px;

    font-size: 13px;

    transition: var(--transition);
}


.lesson:hover {
    color: var(--text);

    background: var(--surface);
}


.lesson.active {
    color: var(--primary);

    background: var(--primary-soft);

    box-shadow:
        inset 2px 0 0 var(--primary);
}


.lesson.completed .lesson-number {
    color: var(--primary);
}


.lesson-number {
    min-width: 22px;

    color: #4d6170;

    font-family: monospace;

    font-size: 11px;
}


.lesson-content {
    max-width: 900px;

    width: 100%;

    margin: auto;

    padding: 60px 45px;
}


.lesson-header {
    padding-bottom: 30px;

    margin-bottom: 35px;

    border-bottom: 1px solid var(--border);
}


.lesson-header h1 {
    margin: 8px 0;

    font-size: 38px;

    letter-spacing: -1.5px;
}


.lesson-header p {
    color: var(--muted);
}


.lesson-body {
    color: var(--text-soft);
}


.lesson-body h2 {
    color: var(--text);

    margin: 32px 0 12px;

    font-size: 22px;
}


.lesson-body p {
    color: var(--muted);

    line-height: 1.8;
}


.lesson-code {
    position: relative;

    margin: 20px 0;

    overflow: hidden;

    background: #080d12;

    border: 1px solid var(--border);

    border-radius: var(--radius);
}


.lesson-code pre {
    padding: 22px;

    overflow-x: auto;

    font-family:
        "JetBrains Mono",
        Consolas,
        monospace;

    font-size: 14px;
}


.copy-code {
    position: absolute;

    top: 10px;
    right: 10px;

    padding: 5px 9px;

    color: var(--muted);

    background: var(--surface-2);

    border: 1px solid var(--border);

    border-radius: 6px;

    font-size: 11px;
}


.copy-code:hover {
    color: var(--primary);
}


.lesson-actions {
    margin-top: 35px;
}


.lesson-navigation {
    display: flex;
    justify-content: space-between;

    margin-top: 45px;

    padding-top: 25px;

    border-top: 1px solid var(--border);
}


/* =========================================================
   PROFILE
   ========================================================= */

.profile-page {
    max-width: 1120px;

    margin: auto;

    padding: 60px 30px;
}


.profile-header {
    display: flex;
    align-items: center;

    gap: 22px;

    padding-bottom: 30px;

    border-bottom: 1px solid var(--border);
}


.profile-avatar {
    width: 76px;
    height: 76px;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--primary-soft),
            var(--surface-2)
        );

    border: 1px solid rgba(0, 230, 160, 0.3);

    border-radius: 50%;

    color: var(--primary);

    font-size: 28px;
    font-weight: 800;
}


.profile-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.profile-info {
    flex: 1;
}


.profile-info h1 {
    margin: 2px 0;

    font-size: 28px;
}


.profile-info p {
    color: var(--muted);

    font-size: 13px;
}


.profile-stats {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 14px;

    margin: 25px 0;
}


.stat-card {
    padding: 20px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

}


.stat-card span {
    display: block;

    color: var(--muted);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}


.stat-card strong {
    display: block;

    margin-top: 5px;

    font-size: 26px;
}


.profile-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 18px;
}


.profile-card {
    padding: 25px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);
}


.profile-card .progress-track {
    margin: 18px 0;
}


.profile-card p {
    color: var(--muted);

    font-size: 13px;

    margin-bottom: 18px;
}


.card-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 18px;
}


.card-heading h2 {
    font-size: 17px;
}


.card-heading span {
    color: var(--primary);

    font-weight: 700;
}


.difficulty-stats {
    display: flex;

    justify-content: space-between;

    gap: 10px;
}


.difficulty-stats > div {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 7px;

    padding: 15px;

    background: var(--bg-soft);

    border-radius: 8px;
}


.difficulty-stats strong {
    font-size: 22px;
}


/* =========================================================
   DIFFICULTY
   ========================================================= */

.difficulty {
    display: inline-flex;

    align-items: center;

    padding: 4px 9px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 800;
}


.difficulty.easy {
    color: var(--easy);
    background: rgba(0, 230, 160, 0.09);
}


.difficulty.medium {
    color: var(--medium);
    background: rgba(255, 200, 87, 0.09);
}


.difficulty.hard {
    color: var(--hard);
    background: rgba(255, 101, 117, 0.09);
}


/* =========================================================
   FORMS
   ========================================================= */

.form-group {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin-bottom: 18px;
}


.form-group label {
    color: var(--text-soft);

    font-size: 13px;

    font-weight: 600;
}


.form-group input,
.form-group textarea,
.form-group select,
select {
    width: 100%;

    color: var(--text);

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 8px;

    outline: none;

    transition: var(--transition);
}


.form-group input,
.form-group select,
select {
    height: 44px;

    padding: 0 13px;
}


.form-group textarea {
    padding: 12px 13px;

    resize: vertical;

    line-height: 1.6;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #4e606d;
}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
select:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(0, 230, 160, 0.07);
}


/* =========================================================
   ERROR PAGE
   ========================================================= */

.error-page {
    min-height: 65vh;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 40px;
}


.error-code {
    color: var(--primary);

    font-family: monospace;

    font-size: clamp(80px, 15vw, 170px);

    font-weight: 900;

    line-height: 1;

    text-shadow:
        0 0 50px rgba(0, 230, 160, 0.12);
}


.error-page h1 {
    margin: 15px 0 7px;

    font-size: 28px;
}


.error-page p {
    color: var(--muted);

    margin-bottom: 25px;
}


/* =========================================================
   FLASH
   ========================================================= */

.flash-container {
    position: fixed;

    top: 80px;
    right: 25px;

    z-index: 3000;

    display: flex;
    flex-direction: column;

    gap: 8px;
}


.flash {
    min-width: 260px;

    padding: 12px 15px;

    background: var(--surface-2);

    border: 1px solid var(--border);

    border-left: 3px solid var(--primary);

    border-radius: 8px;

    color: var(--text);

    font-size: 13px;

    box-shadow: var(--shadow);
}


.flash-error {
    border-left-color: var(--danger);
}


.flash-warning {
    border-left-color: var(--warning);
}


.flash-success {
    border-left-color: var(--success);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .hero {
        grid-template-columns: 1fr;

        padding-top: 60px;

        gap: 40px;
    }


    .feature-grid {
        grid-template-columns: 1fr;
    }


    .learning-page {
        grid-template-columns: 1fr;
    }


    .learning-sidebar {
        position: relative;

        top: 0;

        height: auto;

        border-right: none;
        border-bottom: 1px solid var(--border);
    }


    .lesson-list {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);
    }


    .profile-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

    .navbar {
        padding: 0 15px;
    }


    .nav-links a:not(.nav-button) {
        display: none;
    }


    .hero {
        padding: 55px 20px;
    }


    .hero h1 {
        font-size: 45px;

        letter-spacing: -2.5px;
    }


    .features,
    .cta-section {
        padding: 60px 20px;
    }


    .lesson-content {
        padding: 40px 20px;
    }


    .lesson-list {
        grid-template-columns: 1fr;
    }


    .profile-page {
        padding: 40px 20px;
    }


    .profile-header {
        align-items: flex-start;

        flex-wrap: wrap;
    }


    .profile-stats,
    .profile-grid {
        grid-template-columns: 1fr;
    }


    .footer {
        margin-top: 50px;

        padding: 25px 20px;

        flex-direction: column;

        gap: 8px;
    }

}

/* =========================================================
   GLOBAL WINDOW CHROME
   ========================================================= */
.window-chrome {
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 5000;
    display: flex;
    gap: 7px;
    pointer-events: none;
}
.window-dot { width: 9px; height: 9px; border-radius: 50%; display:block; box-shadow: 0 0 10px rgba(255,255,255,.05); }
.window-dot-red { background:#ff5f57; box-shadow:0 0 10px rgba(255,95,87,.35); }
.window-dot-yellow { background:#ffbd2e; box-shadow:0 0 10px rgba(255,189,46,.3); }
.window-dot-green { background:#28c840; box-shadow:0 0 10px rgba(40,200,64,.3); }

.live-dot { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--primary); box-shadow:0 0 10px var(--primary); animation: livePulse 1.5s infinite; }
@keyframes livePulse { 0%,100%{opacity:.45;transform:scale(.8)} 50%{opacity:1;transform:scale(1.15)} }

.confetti-canvas { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:9999; }


/* =========================================================
   LIVE LESSON PROBLEMS + DIFFICULTY
   ========================================================= */
.lesson { position:relative; }
.lesson-name { min-width:0; flex:1; }
.lesson-difficulty { padding:2px 6px; border-radius:999px; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; border:1px solid transparent; }
.lesson-difficulty.easy { color:var(--easy); background:rgba(0,230,160,.07); border-color:rgba(0,230,160,.12); }
.lesson-difficulty.medium { color:var(--medium); background:rgba(255,200,87,.07); border-color:rgba(255,200,87,.12); }
.lesson-difficulty.hard { color:var(--hard); background:rgba(255,101,117,.07); border-color:rgba(255,101,117,.12); }
.lesson-problem-count { min-width:16px; color:var(--primary); font-size:9px; font-weight:800; text-align:right; }
.live-problems-panel { margin:18px 2px 0; padding-top:16px; border-top:1px solid var(--border); }
.live-panel-heading { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.7px; }
.live-panel-heading .is-live { color:var(--primary); }
.lesson-problems { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.problem-panel-empty { padding:12px 8px; color:#526473; font-size:10px; line-height:1.5; }
.live-problem-card { display:flex; align-items:center; gap:8px; padding:9px; border:1px solid var(--border); border-radius:8px; background:rgba(13,20,27,.75); transition:all .2s ease; animation:problemIn .35s ease both; }
.live-problem-card:hover { transform:translateX(3px); border-color:rgba(0,230,160,.35); background:var(--surface-2); }
.live-problem-icon { width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:var(--primary-soft);color:var(--primary); }
.live-problem-main { min-width:0; flex:1; }
.live-problem-main strong { display:block; color:var(--text-soft); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-problem-main small { color:var(--muted); font-size:8px; text-transform:capitalize; }
.live-problem-arrow { color:var(--muted); }
@keyframes problemIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }

/* =========================================================
   CduCodes v2 UI fixes: traffic lights, light theme, live learning
   ========================================================= */
:root { --editor-line-height:21.45px; --editor-bg:#080d12; --editor-gutter:#080e13; }

.code-header { justify-content:flex-start; }
.code-header .traffic-lights { display:flex; align-items:center; gap:7px; }
.code-header .traffic-dot { width:9px; height:9px; border-radius:50%; display:block; }
.code-header .traffic-dot.red { background:#ff5f57; box-shadow:0 0 9px rgba(255,95,87,.35); }
.code-header .traffic-dot.yellow { background:#ffbd2e; box-shadow:0 0 9px rgba(255,189,46,.30); }
.code-header .traffic-dot.green { background:#28c840; box-shadow:0 0 9px rgba(40,200,64,.30); }

body.light-theme {
    --bg:#f4f7f9;
    --bg-soft:#eaf0f3;
    --surface:#ffffff;
    --surface-2:#f1f5f7;
    --surface-3:#e5edf1;
    --border:#d5e0e6;
    --border-light:#c2d0d8;
    --text:#15212b;
    --text-soft:#40515f;
    --muted:#687986;
    --editor-bg:#f8fafb;
    --editor-gutter:#edf2f5;
    background:radial-gradient(circle at 20% 0%,rgba(0,160,115,.09),transparent 30%),var(--bg);
}
body.light-theme .navbar { background:rgba(255,255,255,.88); }
body.light-theme .code-window,
body.light-theme .coding-workspace,
body.light-theme .lesson-code,
body.light-theme .example-box,
body.light-theme .constraints-box { background:var(--surface); }
body.light-theme .editor-container,
body.light-theme .output-panel { background:var(--editor-bg); }
body.light-theme #output { color:#415360; }
body.light-theme .syntax-highlight { color:#24333e; }
body.light-theme .line-numbers { color:#778793; }
body.light-theme .lesson-code pre { background:var(--editor-bg); }

.learning-page { min-height:calc(100vh - 68px); }
.lesson-completion-status { margin-top:24px; padding:13px 15px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--muted); font-size:12px; }
.lesson-completion-status.complete { color:var(--primary); border-color:rgba(0,230,160,.3); background:rgba(0,230,160,.05); }
.lesson-progress { min-width:32px; color:var(--primary); font-size:9px; font-weight:800; text-align:right; }
.lesson.completed { border-left-color:var(--primary); }
.lesson.completed .lesson-number { color:var(--primary); }
.live-problem-card.solved { border-color:rgba(0,230,160,.25); }
.live-problem-card.solved .live-problem-icon { color:var(--primary); }

/* The home code window owns its traffic lights; never render a global floating chrome. */
.window-chrome { display:none !important; }

@media (max-width:850px) {
    .learning-page { display:block; }
    .learning-sidebar { position:relative !important; width:100% !important; min-height:0 !important; }
}

/* =========================================================
   CduCodes — CURRICULUM / CATEGORIES / LEARNING SIDEBAR
   Optimized single-source implementation

   Important:
   - .new-lesson-tag is positioned independently.
   - NEW lessons reserve BOTH vertical and horizontal space.
   - No badge can overlap the lesson number/title.
   - Same badge component works on categories + learning sidebar.
   ========================================================= */

/* -----------------------------
   CATEGORY / COURSE PAGE
   ----------------------------- */

.categories-page{
    width:min(980px,calc(100% - 36px));
    margin:auto;
    padding:70px 0 100px;
}

.categories-heading{
    max-width:700px;
    margin-bottom:32px;
    animation:pageIn .45s ease both;
}

.categories-heading h1{
    margin:8px 0 10px;
    font-size:clamp(34px,5vw,52px);
    line-height:1.05;
    letter-spacing:-2px;
}

.categories-heading p{
    color:var(--muted);
    font-size:15px;
}

.category-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.category-card{
    position:relative;
    overflow:visible;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    animation:cardIn .45s ease both;
    transition:
        transform var(--motion,220ms) cubic-bezier(.2,.8,.2,1),
        border-color var(--motion,220ms) ease,
        box-shadow var(--motion,220ms) ease,
        background-color var(--motion,220ms) ease;
}

.category-card:hover{
    transform:translateY(-3px);
    border-color:var(--border-light);
    box-shadow:0 16px 42px rgba(0,0,0,.16);
}

.category-card.open{
    border-color:rgba(0,230,160,.30);
    box-shadow:0 14px 45px rgba(0,0,0,.16);
}

.category-toggle{
    width:100%;
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px 20px;
    color:var(--text);
    background:transparent;
    border:0;
    border-radius:inherit;
    text-align:left;
}

.category-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    background:var(--primary-soft);
    border:1px solid rgba(0,230,160,.16);
    border-radius:11px;
    font-size:22px;
}

.category-info{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
}

.category-info strong{
    font-size:16px;
}

.category-info small{
    margin-top:2px;
    color:var(--muted);
    font-size:11px;
}

.category-arrow{
    flex:0 0 auto;
    color:var(--muted);
    font-size:22px;
    transition:transform .3s ease,color .3s ease;
}

.category-card.open .category-arrow{
    color:var(--primary);
    transform:rotate(180deg);
}

.category-lessons{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    transition:grid-template-rows .35s ease,opacity .25s ease;
}

.category-card.open .category-lessons{
    grid-template-rows:1fr;
    opacity:1;
}

.category-lessons-inner{
    min-height:0;
    overflow:hidden;
    padding:0 12px;
}

.category-card.open .category-lessons-inner{
    padding-bottom:12px;
}

.category-loading{
    padding:15px 12px;
    color:var(--muted);
    border-top:1px solid var(--border);
    font-size:12px;
}

.category-loading.error{
    color:var(--hard);
}

/* -----------------------------
   CATEGORY LESSON ROW
   ----------------------------- */

.category-lesson{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:12px;
    border-top:1px solid var(--border);
    border-radius:9px;
    overflow:visible;
    animation:lessonIn .3s ease both;
    transition:
        background-color .2s ease,
        transform .2s ease,
        border-color .2s ease;
}

.category-lesson:hover{
    background:var(--surface-2);
    transform:translateX(4px);
}

.category-lesson-number{
    position:relative;
    z-index:2;
    flex:0 0 28px;
    color:#5e7482;
    font:700 11px/1 monospace;
}

.category-lesson-title{
    position:relative;
    z-index:2;
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
}

.category-lesson-title strong{
    color:var(--text-soft);
    font-size:12px;
}

.category-lesson-title small{
    overflow:hidden;
    color:var(--muted);
    font-size:10px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.category-lesson-check{
    position:relative;
    z-index:2;
    flex:0 0 24px;
    color:var(--muted);
    text-align:center;
    font-weight:900;
}

.category-lesson.completed .category-lesson-check,
.category-lesson.completed .category-lesson-title strong{
    color:var(--primary);
}

/*
   NEW category lesson:
   The badge gets a dedicated top strip AND the content gets
   a left inset. This is what prevents NEW from sitting over 01/02/03.
*/
.category-lesson.is-new{
    min-height:58px;
    padding:30px 12px 12px 52px;
    border-color:rgba(245,196,81,.20);
}

.category-lesson.is-new .category-lesson-number,
.category-lesson.is-new .category-lesson-title,
.category-lesson.is-new .category-lesson-check{
    z-index:2;
}

/* -----------------------------
   LEARNING PAGE
   ----------------------------- */

.learning-page{
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    min-height:calc(100vh - 68px);
}

.learning-sidebar{
    position:sticky;
    top:68px;
    height:calc(100vh - 68px);
    overflow-x:hidden;
    overflow-y:auto;
    padding:25px 18px;
    background:#090f14;
    border-right:1px solid var(--border);
    scrollbar-width:thin;
}

.course-title{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 8px 22px;
    border-bottom:1px solid var(--border);
}

.course-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    background:var(--primary-soft);
    border-radius:9px;
}

.course-title strong{
    display:block;
    font-size:15px;
}

.course-title span{
    display:block;
    color:var(--muted);
    font-size:11px;
}

.course-progress{
    padding:20px 8px;
}

.progress-header{
    display:flex;
    justify-content:space-between;
    margin-bottom:8px;
    color:var(--muted);
    font-size:11px;
}

.progress-header strong{
    color:var(--primary);
}

.progress-track{
    height:5px;
    overflow:hidden;
    background:#18232b;
    border-radius:999px;
}

.progress-fill{
    height:100%;
    background:var(--primary);
    border-radius:inherit;
    transition:width 400ms ease;
}

.lesson-list{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.lesson{
    position:relative;
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    padding:9px 10px;
    color:var(--muted);
    border-radius:8px;
    font-size:12px;
    overflow:visible;
    transition:
        background-color var(--motion-fast,140ms) ease,
        color var(--motion-fast,140ms) ease,
        transform var(--motion-fast,140ms) ease;
}

.lesson:hover{
    color:var(--text);
    background:var(--surface);
    transform:translateX(2px);
}

.lesson.active{
    color:var(--primary);
    background:var(--primary-soft);
    box-shadow:inset 2px 0 0 var(--primary);
}

.lesson.completed .lesson-number,
.lesson.completed .lesson-check{
    color:var(--primary);
}

.lesson-number{
    position:relative;
    z-index:2;
    flex:0 0 22px;
    color:#4d6170;
    font:700 11px/1 monospace;
}

.lesson-name{
    position:relative;
    z-index:2;
    min-width:0;
    flex:1;
    overflow:hidden;
    padding-left:0;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.lesson-check{
    position:relative;
    z-index:2;
    flex:0 0 13px;
    color:var(--muted);
    text-align:right;
    font-size:11px;
}

.lesson-difficulty{
    position:relative;
    z-index:2;
    flex:0 0 auto;
    padding:2px 6px;
    border:1px solid transparent;
    border-radius:999px;
    font-size:8px;
    font-weight:800;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.lesson-difficulty.easy{
    color:var(--easy);
    background:rgba(0,230,160,.07);
    border-color:rgba(0,230,160,.12);
}

.lesson-difficulty.medium{
    color:var(--medium);
    background:rgba(255,200,87,.07);
    border-color:rgba(255,200,87,.12);
}

.lesson-difficulty.hard{
    color:var(--hard);
    background:rgba(255,101,117,.07);
    border-color:rgba(255,101,117,.12);
}

/*
   NEW sidebar lesson:
   - top strip = badge area
   - left inset = badge-safe number/content area
   - no negative margins, transforms or absolute offsets on content
*/
.learning-sidebar .lesson.is-new{
    min-height:48px;
    padding:25px 10px 9px 48px;
}

/* -----------------------------
   SHARED NEW BADGE
   ----------------------------- */

.new-lesson-tag{
    position:absolute;
    top: 20%;
    left: 34px;
    z-index:20;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:42px;
    height:18px;
    padding:0 8px;

    color:#5b21b6;
    background:linear-gradient(
        135deg,
        #fff0b8 0%,
        #f5c451 50%,
        #ffd978 100%
    );

    border:1px solid rgba(255,214,102,.95);
    border-radius:4px 4px 4px 0;

    font-size:8px;
    font-weight:950;
    letter-spacing:1px;
    line-height:1;
    text-transform:uppercase;
    white-space:nowrap;

    pointer-events:none;
}

.new-lesson-tag::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(
        110deg,
        transparent 18%,
        rgba(255,255,255,.82) 46%,
        transparent 72%
    );
    transform:translateX(-135%);
    animation:newLessonShine 2.7s ease-in-out infinite;
    pointer-events:none;
}

.new-lesson-tag::after{
    content:"";
    position:absolute;
    left:3px;
    right:3px;
    bottom:1px;
    height:1px;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(124,58,237,.75),
        transparent
    );
    opacity:.75;
    animation:newLessonAccent 1.8s ease-in-out infinite;
}

/* -----------------------------
   SIDEBAR SYNC
   ----------------------------- */

.sidebar-sync{
    display:flex;
    align-items:center;
    gap:6px;
    margin:18px 3px 0;
    padding-top:15px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:8px;
    font-weight:800;
    letter-spacing:.8px;
}

.sidebar-sync i{
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 10px rgba(0,230,160,.45);
}

.sidebar-sync small{
    margin-left:auto;
    font-size:8px;
}

.sidebar-sync small.is-live{
    color:var(--primary);
}

/* -----------------------------
   LESSON CONTENT
   ----------------------------- */

.lesson-content{
    width:100%;
    max-width:960px;
    margin:auto;
    padding:60px 45px 85px;
}

.lesson-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding-bottom:30px;
    margin-bottom:32px;
    border-bottom:1px solid var(--border);
}

.lesson-header h1{
    margin:8px 0;
    font-size:clamp(34px,4vw,48px);
    letter-spacing:-1.7px;
}

.lesson-header p{
    max-width:760px;
    color:var(--muted);
    font-size:14px;
}

.lesson-label{
    color:var(--text);
    font-size:12px;
    font-weight:800;
}

.lesson-body{
    color:var(--text-soft);
    line-height:1.8;
}

.lesson-rich-content{
    color:var(--text-soft);
    font-size:15px;
    line-height:1.85;
}

.lesson-rich-content > :first-child{
    margin-top:0;
}

.lesson-rich-content h1,
.lesson-rich-content h2,
.lesson-rich-content h3,
.lesson-rich-content h4{
    color:var(--text);
    line-height:1.25;
    letter-spacing:-.35px;
}

.lesson-rich-content h1{
    margin:34px 0 13px;
    font-size:30px;
}

.lesson-rich-content h2,
.lesson-example-block h2{
    margin:28px 0 12px;
    color:var(--text);
    font-size:21px;
}

.lesson-rich-content h3{
    margin:22px 0 8px;
    font-size:17px;
}

.lesson-rich-content p{
    margin:0 0 17px;
    color:var(--text-soft);
}

.lesson-rich-content strong{
    color:var(--text);
    font-weight:800;
}

.lesson-rich-content em{
    color:var(--text-soft);
}

.lesson-rich-content a{
    color:var(--primary);
    text-decoration:underline;
    text-underline-offset:3px;
}

.lesson-rich-content ul,
.lesson-rich-content ol{
    margin:12px 0 20px;
    padding-left:25px;
    color:var(--text-soft);
}

.lesson-rich-content li{
    margin:5px 0;
    padding-left:4px;
}

.lesson-rich-content blockquote{
    margin:18px 0;
    padding:13px 16px;
    color:var(--text-soft);
    background:var(--primary-soft);
    border-left:3px solid var(--primary);
    border-radius:0 9px 9px 0;
}

.lesson-rich-content hr{
    margin:28px 0;
    border:0;
    border-top:1px solid var(--border);
}

.lesson-rich-content code,
.lesson-rich-content pre{
    font-family:"JetBrains Mono","Fira Code",Consolas,monospace;
}

.lesson-rich-content :not(pre) > code{
    padding:2px 6px;
    color:var(--primary);
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:5px;
    font-size:.9em;
}

.lesson-rich-content pre{
    margin:18px 0 24px;
    padding:17px 18px;
    overflow:auto;
    color:var(--text-soft);
    background:var(--editor-bg,#080d12);
    border:1px solid var(--border);
    border-radius:11px;
}

.lesson-code{
    position:relative;
    margin:15px 0 30px;
    overflow:hidden;
    background:var(--editor-bg,#080d12);
    border:1px solid var(--border);
    border-radius:12px;
}

.lesson-code .code-header{
    height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
}

.lesson-code pre{
    margin:0;
    padding:20px;
    overflow:auto;
    color:var(--text-soft);
    font:13px/1.7 "JetBrains Mono","Fira Code",Consolas,monospace;
}

.copy-code{
    padding:5px 9px;
    color:var(--muted);
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:6px;
    font-size:10px;
    transition:var(--transition);
}

.copy-code:hover{
    color:var(--primary);
    border-color:rgba(0,230,160,.35);
}

/* -----------------------------
   PLAYGROUND
   ----------------------------- */

.lesson-playground-block{
    margin-top:38px;
}

.playground-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:14px;
}

.playground-heading h2{
    margin:4px 0;
    font-size:23px;
    letter-spacing:-.6px;
}

.playground-heading p{
    color:var(--muted);
    font-size:12px;
}

.completion-badge{
    padding:6px 10px;
    color:var(--muted);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:999px;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.completion-badge.complete{
    color:var(--primary);
    background:rgba(0,230,160,.06);
    border-color:rgba(0,230,160,.3);
    animation:badgePop .4s ease;
}

.lesson-navigation{
    display:flex;
    justify-content:space-between;
    margin-top:45px;
    padding-top:25px;
    border-top:1px solid var(--border);
}

/* -----------------------------
   ANIMATIONS
   ----------------------------- */

@keyframes pageIn{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:none}
}

@keyframes cardIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:none}
}

@keyframes lessonIn{
    from{opacity:0;transform:translateX(-6px)}
    to{opacity:1;transform:none}
}

@keyframes badgePop{
    0%{transform:scale(.9)}
    60%{transform:scale(1.06)}
    100%{transform:scale(1)}
}

@keyframes newLessonFloat{
    0%,100%{transform:translateY(0) rotate(-1deg)}
    50%{transform:translateY(-2px) rotate(1deg)}
}

@keyframes newLessonGlow{
    0%,100%{
        box-shadow:
            0 4px 14px rgba(245,196,81,.24),
            0 0 7px rgba(139,92,246,.08),
            inset 0 1px 0 rgba(255,255,255,.78);
    }
    50%{
        box-shadow:
            0 7px 22px rgba(245,196,81,.42),
            0 0 13px rgba(139,92,246,.22),
            inset 0 1px 0 rgba(255,255,255,.95);
    }
}

@keyframes newLessonShine{
    0%{transform:translateX(-135%);opacity:0}
    20%{opacity:1}
    55%{transform:translateX(135%);opacity:1}
    100%{transform:translateX(135%);opacity:0}
}

@keyframes newLessonAccent{
    0%,100%{opacity:.35;transform:scaleX(.65)}
    50%{opacity:1;transform:scaleX(1)}
}

/* -----------------------------
   LIGHT THEME
   ----------------------------- */

body.light-theme{
    --text:#10202b;
    --text-soft:#334b5b;
    --muted:#5e7180;
    --border:#ccd9e1;
    --border-light:#b5c6d0;
    --surface:#ffffff;
    --surface-2:#eef3f6;
    --surface-3:#e4edf2;
}

body.light-theme .learning-sidebar{
    background:var(--surface);
}

body.light-theme .hero p,
body.light-theme .lesson-rich-content p,
body.light-theme .lesson-rich-content li{
    color:#405767;
}

body.light-theme .nav-links a{
    color:#526877;
}

body.light-theme .nav-links a:hover{
    color:#10202b;
    background:#edf3f6;
}

body.light-theme .category-info small{
    color:#506675;
}

body.light-theme .code-window,
body.light-theme .lesson-code,
body.light-theme .coding-workspace{
    box-shadow:0 18px 45px rgba(20,40,52,.10);
}

body.light-theme .new-lesson-tag{
    color:#5b21b6;
    background:linear-gradient(
        135deg,
        #ffe89a 0%,
        #f4c04b 55%,
        #ffd875 100%
    );
    border-color:#d8a82f;
    box-shadow:
        0 4px 15px rgba(161,111,0,.18),
        inset 0 1px 0 rgba(255,255,255,.85);
}

/* -----------------------------
   RESPONSIVE
   ----------------------------- */

@media (max-width:850px){
    .learning-page{
        display:block;
    }

    .learning-sidebar{
        position:relative !important;
        top:auto;
        width:100%;
        height:auto;
        max-height:none;
        border-right:0;
        border-bottom:1px solid var(--border);
    }

    .lesson-list{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .lesson-content{
        max-width:none;
        padding:40px 22px 70px;
    }
}

@media (max-width:760px){
    .categories-page{
        width:calc(100% - 24px);
        padding:45px 0 70px;
    }

    .category-toggle{
        padding:15px;
    }

    .lesson-header,
    .playground-heading{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width:600px){
    .categories-page{
        width:calc(100% - 24px);
        padding:42px 0 70px;
    }

    .category-lesson-title small{
        display:none;
    }

    .lesson-list{
        grid-template-columns:1fr;
    }

    .lesson-header h1{
        font-size:34px;
    }
}

@media (max-width:480px){
    .category-lesson{
        gap:8px;
        padding-left:9px;
        padding-right:9px;
    }

    .category-lesson.is-new{
        padding:29px 9px 10px 48px;
    }

    .learning-sidebar .lesson.is-new{
        padding:25px 9px 9px 45px;
    }

    .new-lesson-tag{
        left:7px;
        min-width:34px;
        height:17px;
        padding:0 7px;
        font-size:7px;
    }

    .learning-sidebar .lesson.is-new .new-lesson-tag{
        top: -10px;
        left: -28px;
        transform: rotate(-45deg);
        transform-origin: center;
    }
}

/* -----------------------------
   ACCESSIBILITY / MOTION
   ----------------------------- */

@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

    .new-lesson-tag,
    .new-lesson-tag::before,
    .new-lesson-tag::after{
        animation:none !important;
    }
}

/* -----------------------------
   FINAL UI POLISH
   ----------------------------- */

.nav-tools{
    display:flex;
    align-items:center;
    gap:7px;
}

.sound-toggle{
    font-size:14px;
}

.admin-page,
.categories-page,
.lesson-content{
    animation:pageIn .45s ease both;
}

.btn,
.editor-btn,
.theme-toggle,
.category-toggle,
.lesson,
.admin-card,
.feature-card{
    -webkit-tap-highlight-color:transparent;
}

.btn,
.editor-btn,
.theme-toggle,
.nav-links a,
.lesson-action-menu a,
.lesson-action-menu button{
    transition:
        transform var(--motion-fast,140ms) cubic-bezier(.2,.8,.2,1),
        box-shadow var(--motion-fast,140ms) ease,
        background-color var(--motion-fast,140ms) ease,
        border-color var(--motion-fast,140ms) ease,
        color var(--motion-fast,140ms) ease;
}

.btn:hover,
.editor-btn:hover,
.theme-toggle:hover{
    transform:translateY(-2px);
}

.btn:active,
.editor-btn:active,
.theme-toggle:active,
.nav-links a:active,
.category-toggle:active{
    transform:translateY(2px) scale(.985);
}

.btn-primary{
    box-shadow:0 7px 20px rgba(0,230,160,.10);
}

.btn-primary:hover{
    box-shadow:0 12px 28px rgba(0,230,160,.18);
}

/* =========================================================
   CduCodes 2.5 — STRUCTURED LESSONS + PERSONALIZED DIALOGS
   ========================================================= */
.lesson-structured { display:flex; flex-direction:column; gap:34px; }
.lesson-definition-card, .lesson-examples-section { padding:24px; background:linear-gradient(180deg, rgba(13,20,27,.82), rgba(9,15,20,.72)); border:1px solid var(--border); border-radius:14px; box-shadow:0 16px 42px rgba(0,0,0,.12); }
.lesson-section-kicker { color:var(--primary); font-size:10px; font-weight:900; letter-spacing:1.4px; text-transform:uppercase; }
.lesson-definition-card h2, .lesson-examples-section h2 { margin:7px 0 16px; font-size:22px; letter-spacing:-.5px; }
.lesson-rich-content p { margin:0 0 13px; }
.lesson-rich-content p:last-child { margin-bottom:0; }
.lesson-example-list { display:flex; flex-direction:column; gap:18px; }
.structured-example { padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:12px; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.structured-example:hover { transform:translateY(-2px); border-color:var(--border-light); box-shadow:0 14px 32px rgba(0,0,0,.12); }
.structured-example-heading { display:flex; align-items:center; gap:10px; margin-bottom:17px; }
.structured-example-heading h3 { font-size:17px; margin:0; }
.example-number { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:#00130d; background:var(--primary); font-size:11px; font-weight:900; }
.example-part { margin-top:14px; }
.example-part-label { display:block; margin-bottom:7px; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:1.1px; }
.example-data { margin:0; padding:12px 14px; color:var(--text-soft); background:var(--bg-soft); border:1px solid var(--border); border-radius:8px; white-space:pre-wrap; overflow:auto; font:12px/1.7 "JetBrains Mono","Fira Code",Consolas,monospace; }
.example-explanation p { margin:0; color:var(--muted); font-size:13px; line-height:1.75; }
.structured-example .lesson-code { margin:0; }
.editor-btn.run { min-width:70px; display:inline-flex; align-items:center; gap:7px; justify-content:center; box-shadow:0 0 0 rgba(0,230,160,0); }
.editor-btn.run:hover { box-shadow:0 7px 24px rgba(0,230,160,.16); }
.run-play-icon { font-size:10px; transition:transform .18s ease; }
.editor-btn.run:hover .run-play-icon { transform:translateX(1px) scale(1.08); }

.logout-backdrop { position:fixed; inset:0; z-index:6000; display:grid; place-items:center; padding:20px; background:rgba(1,6,9,.72); backdrop-filter:blur(10px); opacity:0; transition:opacity .18s ease; }
.logout-backdrop[hidden] { display:none; }
.logout-backdrop.is-open { opacity:1; }
.logout-dialog { width:min(430px,100%); padding:28px; background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--border-light); border-radius:18px; box-shadow:0 28px 90px rgba(0,0,0,.42); transform:translateY(18px) scale(.96); opacity:0; transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease; }
.logout-backdrop.is-open .logout-dialog { transform:translateY(0) scale(1); opacity:1; }
.logout-dialog-icon { width:44px; height:44px; display:grid; place-items:center; margin-bottom:14px; color:var(--primary); background:var(--primary-soft); border:1px solid rgba(0,230,160,.2); border-radius:12px; font-size:20px; animation:logoutFloat 2.2s ease-in-out infinite; }
.logout-dialog h2 { margin:6px 0 9px; font-size:24px; letter-spacing:-.7px; }
.logout-dialog h2 span { color:var(--primary); }
.logout-dialog p { color:var(--muted); font-size:12px; line-height:1.7; }
.logout-dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:23px; }
@keyframes logoutFloat { 0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-2deg)} }
body.light-theme .logout-backdrop { background:rgba(15,24,30,.35); }
body.light-theme .lesson-definition-card, body.light-theme .lesson-examples-section { background:var(--surface); }
@media(max-width:650px){ .lesson-definition-card,.lesson-examples-section,.structured-example{padding:17px;} .logout-dialog{padding:22px;} }
@media(prefers-reduced-motion:reduce){ .logout-dialog-icon{animation:none;} .logout-backdrop,.logout-dialog{transition:none;} .structured-example{transition:none;} }


/* =========================================================
   CduCodes v2.6 — lesson content + modal sync polish
   ========================================================= */
.lesson-definition-card,
.lesson-examples-section {
    overflow:hidden;
}

.lesson-definition-card .lesson-rich-content,
.lesson-examples-section .example-part {
    color:var(--text-soft);
}

.example-fallback-text {
    margin:0;
    color:var(--muted);
    line-height:1.8;
}

.structured-example .example-data {
    max-height:180px;
    overflow:auto;
    overscroll-behavior:contain;
}

.logout-backdrop {
    position:fixed !important;
    inset:0 !important;
    display:grid !important;
    place-items:center !important;
    width:100vw;
    height:100vh;
    margin:0 !important;
    padding:20px;
    z-index:10000 !important;
    pointer-events:none;
}

.logout-backdrop[hidden] {
    display:none !important;
}

.logout-backdrop.is-open {
    pointer-events:auto;
}

body.light-theme .lesson-definition-card,
body.light-theme .lesson-examples-section,
body.light-theme .structured-example {
    color:#263f4e;
}

body.light-theme .lesson-section-kicker {
    color:#008f68;
}

body.light-theme .lesson-definition-card h2,
body.light-theme .lesson-examples-section h2,
body.light-theme .structured-example-heading h3 {
    color:#172d3b;
}

body.light-theme .example-part-label {
    color:#5a7180;
}

body.light-theme .example-data {
    color:#294452;
    background:#f5f8fa;
}

/* =========================================================
   CduCodes v2.7 — LeetCode-style public examples
   ========================================================= */
.example-description {
    padding: 11px 13px;
    color: var(--text-soft);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.75;
    white-space: normal;
    overflow-wrap: anywhere;
}
.example-description code {
    padding: 2px 6px;
    color: var(--primary);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
    font-size: .9em;
}
.example-explanation .example-description {
    background: transparent;
    border-color: transparent;
    padding: 0;
    color: var(--muted);
}
body.light-theme .example-description {
    color: #294452;
    background: #f5f8fa;
    border-color: #d6e1e7;
}
body.light-theme .example-description code {
    color: #007e61;
    background: #edf5f2;
    border-color: #cfe0da;
}
body.light-theme .example-explanation .example-description {
    color: #5b7180;
    background: transparent;
    border-color: transparent;
}

/* =========================================================
   V2.8 — VISUAL COURSE SELECTOR
   ========================================================= */
.categories-page { width:min(1180px,calc(100% - 40px)); padding:82px 0 110px; }
.categories-heading h1 { max-width:760px; font-size:clamp(40px,6vw,68px); line-height:.98; letter-spacing:-3px; }
.category-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; perspective:1200px; }
.category-card { min-height:215px; overflow:hidden; border-radius:24px; background:radial-gradient(circle at 82% 10%,rgba(0,230,160,.10),transparent 32%),linear-gradient(145deg,var(--surface),#091017); box-shadow:0 20px 55px rgba(0,0,0,.18); transform-style:preserve-3d; }
.category-card::before { content:""; position:absolute; inset:-60% 30% auto -20%; height:180px; background:radial-gradient(circle,rgba(0,230,160,.15),transparent 65%); filter:blur(10px); pointer-events:none; transition:transform .5s ease; }
.category-card:hover::before { transform:translate(20px,15px); }
.category-card:hover { transform:translateY(-7px) rotateX(1deg); border-color:rgba(0,230,160,.28); box-shadow:0 28px 70px rgba(0,0,0,.28),0 0 35px rgba(0,230,160,.05); }
.category-card.open { border-color:rgba(0,230,160,.34); }
.category-toggle { position:relative; min-height:215px; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:14px; padding:22px; }
.category-icon { width:58px; height:58px; flex:0 0 58px; border-radius:17px; font-size:28px; box-shadow:0 12px 30px rgba(0,230,160,.10),inset 0 1px 0 rgba(255,255,255,.06); transition:transform .35s ease,box-shadow .35s ease; }
.category-card:hover .category-icon { transform:translateY(-3px) rotate(-4deg) scale(1.05); box-shadow:0 18px 35px rgba(0,230,160,.16); }
.category-info { width:100%; }
.category-info strong { font-size:22px; letter-spacing:-.6px; }
.category-info small { font-size:11px; }
.category-info::after { content:"Explore curriculum →"; display:block; margin-top:15px; color:var(--primary); font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; opacity:.75; }
.category-arrow { position:absolute; top:22px; right:22px; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--border-light); border-radius:11px; background:rgba(255,255,255,.025); font-size:17px; }
.category-card.open .category-toggle { min-height:175px; }
.category-lessons-inner { padding:0 14px; }
.category-card.open .category-lessons-inner { padding-bottom:14px; }
.category-loading { border-radius:12px; background:rgba(255,255,255,.02); }
.category-lesson { min-height:56px; margin:5px 0; padding:11px 12px; border:1px solid transparent; border-radius:13px; background:rgba(255,255,255,.018); }
.category-lesson:hover { transform:translateX(3px); border-color:rgba(0,230,160,.14); background:rgba(0,230,160,.045); }
.category-lesson.is-new { min-height:62px; padding:30px 12px 10px 52px; }
@media (max-width:900px) { .category-list { grid-template-columns:1fr; } .category-card,.category-toggle { min-height:175px; } }
@media (max-width:560px) { .categories-page { width:calc(100% - 24px); padding-top:52px; } .categories-heading h1 { font-size:40px; letter-spacing:-2px; } }
.category-live-meta { display:block; margin-top:6px; color:var(--primary); font-size:9px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; opacity:.8; }

/* =========================================================
   V2.9 — PRO COURSE GALLERY
   No dropdowns. Every course is a visual progress card.
   ========================================================= */
.categories-page {
    width: min(1220px, calc(100% - 48px));
    padding: 76px 0 110px;
}

.categories-hero {
    position: relative;
    min-height: 240px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 42px;
    padding: 0 4px;
}

.categories-hero h1 {
    max-width: 800px;
    margin: 12px 0 18px;
    font-size: clamp(46px, 7vw, 82px);
    line-height: .92;
    letter-spacing: -4.5px;
}

.categories-hero h1 span {
    color: transparent;
    background: linear-gradient(100deg, #f4fbf8 0%, #6fffd0 48%, #00e6a0 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.categories-hero p {
    max-width: 670px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.75;
}

.learn-hero-orbit {
    position: relative;
    width: 190px;
    height: 190px;
    flex: 0 0 190px;
    border: 1px solid rgba(0,230,160,.14);
    border-radius: 50%;
    opacity: .9;
    transform: rotate(-14deg);
    box-shadow: 0 0 70px rgba(0,230,160,.05), inset 0 0 50px rgba(0,230,160,.025);
}

.learn-hero-orbit::before,
.learn-hero-orbit::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px dashed rgba(0,230,160,.13);
    border-radius: 50%;
    animation: orbitSpin 12s linear infinite;
}

.learn-hero-orbit::after {
    inset: 42px;
    animation-direction: reverse;
    animation-duration: 8s;
}

.learn-hero-orbit span,
.learn-hero-orbit i {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00e6a0;
    box-shadow: 0 0 18px rgba(0,230,160,.9);
}

.learn-hero-orbit span { top: 17px; left: 78px; }
.learn-hero-orbit i { right: 20px; bottom: 44px; width: 4px; height: 4px; }
.learn-hero-orbit b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #dffcf3;
    font-size: 52px;
    font-weight: 800;
    text-shadow: 0 0 25px rgba(0,230,160,.3);
    transform: rotate(14deg);
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.pro-course-card {
    --progress: 0%;
    --card-delay: 0ms;
    position: relative;
    min-height: 410px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 22px;
    color: inherit;
    text-decoration: none;
    border: 1px solid rgba(139,169,181,.16);
    border-radius: 26px;
    background:
        radial-gradient(circle at 90% 0%, rgba(0,230,160,.12), transparent 32%),
        linear-gradient(145deg, rgba(15,25,32,.98), rgba(7,13,18,.98));
    box-shadow: 0 22px 65px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
    transform: translateY(14px);
    opacity: 0;
    animation: courseCardIn .65s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay: var(--card-delay);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.pro-course-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -95px;
    bottom: -100px;
    border-radius: 50%;
    background: rgba(0,230,160,.09);
    filter: blur(22px);
    transition: transform .5s ease;
    pointer-events: none;
}

.pro-course-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0,230,160,.34);
    box-shadow: 0 30px 80px rgba(0,0,0,.32), 0 0 45px rgba(0,230,160,.06), inset 0 1px 0 rgba(255,255,255,.06);
}

.pro-course-card:hover::after { transform: scale(1.5); }

.course-card-glow {
    position: absolute;
    top: -100px;
    left: -90px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(0,230,160,.08);
    filter: blur(35px);
    transition: transform .5s ease;
    pointer-events: none;
}

.pro-course-card:hover .course-card-glow { transform: translate(35px, 30px); }

.course-card-topline,
.course-card-title-row,
.course-progress-meta,
.course-progress-bottom,
.course-card-footer {
    position: relative;
    z-index: 2;
}

.course-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.course-card-index {
    color: rgba(184,210,219,.5);
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 10px;
    letter-spacing: 1px;
}

.course-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #00e6a0;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.course-status-dot::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
    animation: liveBlink 1.8s ease-in-out infinite;
}

.course-status-dot.mastered { color: #b8ffe9; }
.course-status-dot.mastered::before { animation: none; }

.course-card-icon {
    position: relative;
    z-index: 2;
    width: 70px;
    height: 70px;
    margin: 30px 0 20px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0,230,160,.24);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(0,230,160,.13), rgba(0,230,160,.035));
    font-size: 34px;
    box-shadow: 0 16px 38px rgba(0,230,160,.10), inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}

.pro-course-card:hover .course-card-icon {
    transform: translateY(-5px) rotate(-4deg) scale(1.06);
    box-shadow: 0 20px 45px rgba(0,230,160,.18), 0 0 25px rgba(0,230,160,.08);
}

.course-card-content { position: relative; z-index: 2; }
.course-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.course-card-title-row h2 { margin: 0 0 5px; font-size: 25px; letter-spacing: -.8px; }
.course-card-title-row span:not(.course-card-arrow) { color: var(--text-muted); font-size: 10px; }
.course-card-content > p { min-height: 42px; margin: 14px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.65; }
.course-card-arrow { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border: 1px solid rgba(139,169,181,.16); border-radius: 12px; color: #bfffe9; font-size: 18px; transition: transform .3s ease, background .3s ease; }
.pro-course-card:hover .course-card-arrow { transform: translate(3px,-3px); background: rgba(0,230,160,.08); }

.course-card-progress {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding-top: 26px;
}

.course-progress-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.course-progress-meta span { color: rgba(190,213,221,.58); font-size: 8px; font-weight: 900; letter-spacing: 1.2px; }
.course-progress-meta strong { color: #00e6a0; font-size: 13px; }
.course-progress-track { position: relative; height: 7px; overflow: visible; border-radius: 999px; background: rgba(128,157,168,.13); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
.course-progress-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #00a77b, #00e6a0, #8affdb); box-shadow: 0 0 16px rgba(0,230,160,.32); transition: width 1s cubic-bezier(.16,1,.3,1); }
.course-progress-spark { position: absolute; top: 50%; width: 10px; height: 10px; margin-left: -5px; margin-top: -5px; border-radius: 50%; background: #d9fff3; box-shadow: 0 0 0 3px rgba(0,230,160,.13), 0 0 16px rgba(0,230,160,.8); transition: left 1s cubic-bezier(.16,1,.3,1); }
.course-progress-bottom { display: flex; justify-content: space-between; margin-top: 9px; color: rgba(177,202,211,.52); font-size: 9px; }
.course-progress-bottom b { color: #dcebe8; font-weight: 800; }

.course-card-footer { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: #aefde0; font-size: 9px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.course-card-line { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(0,230,160,.25), transparent); }
.course-card-enter { color: rgba(174,253,224,.45); font-size: 8px; }

.course-load-failed .course-progress-fill { background: rgba(128,157,168,.3); box-shadow: none; }
.course-load-failed .course-progress-spark { display: none; }

@keyframes courseCardIn { to { opacity: 1; transform: translateY(0); } }
@keyframes liveBlink { 0%,100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

body.light-theme .pro-course-card {
    background: linear-gradient(145deg, #ffffff, #f4f8f8);
    border-color: #d9e5e4;
    box-shadow: 0 18px 50px rgba(23,55,63,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
body.light-theme .categories-hero h1 span { background: linear-gradient(100deg,#17282d,#008d6e 65%,#00a87c); -webkit-background-clip:text; background-clip:text; }
body.light-theme .course-card-content > p,
body.light-theme .course-progress-bottom { color: #60767d; }
body.light-theme .course-progress-track { background: #dfe9e8; }
body.light-theme .course-card-title-row span:not(.course-card-arrow) { color: #6c8188; }

@media (max-width: 1050px) {
    .course-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .learn-hero-orbit { width: 150px; height: 150px; flex-basis: 150px; }
}
@media (max-width: 720px) {
    .categories-page { width: min(100% - 28px, 620px); padding-top: 48px; }
    .categories-hero { min-height: 0; margin-bottom: 30px; }
    .categories-hero h1 { font-size: 48px; letter-spacing: -2.7px; }
    .learn-hero-orbit { display: none; }
    .course-grid { grid-template-columns: 1fr; }
    .pro-course-card { min-height: 390px; }
}

/* =========================================================
   CDU CODES — V3.2 COURSE CONSTELLATION
   BIG • SHARP • GEOMETRIC • LIVE STATS
   No cards. No dropdowns. Stats stay INSIDE the shape.
   ========================================================= */

.course-constellation {
    position: relative;
    width: min(1380px, calc(100vw - 70px));
    min-height: 680px;
    margin: 0 auto;
    padding: 70px 20px 110px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 55px;
    align-items: start;
    overflow: visible;
}

/* Subtle technical background — deliberately crisp, not blurry. */
.constellation-lines {
    position: absolute;
    inset: 4% 0 8%;
    pointer-events: none;
    opacity: .42;
    background:
        linear-gradient(24deg, transparent 49.85%, rgba(0,230,160,.075) 50%, transparent 50.15%),
        linear-gradient(156deg, transparent 49.85%, rgba(0,230,160,.05) 50%, transparent 50.15%),
        radial-gradient(circle at 50% 42%, rgba(0,230,160,.055), transparent 46%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%);
}

.course-node {
    --progress-angle: 0deg;
    --node-delay: 0ms;

    position: relative;
    min-width: 0;
    min-height: 520px;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: inherit;
    text-decoration: none;

    opacity: 0;
    transform: translateY(24px);
    animation: cduNodeIn .72s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay: var(--node-delay);

    transition: transform .35s cubic-bezier(.16,1,.3,1);
}

.course-node:hover {
    transform: translateY(-10px);
}

/* =========================================================
   BIG GEOMETRIC SHAPE
   ========================================================= */

.node-shape {
    position: relative;
    flex: 0 0 auto;

    width: 286px;
    height: 286px;

    display: grid;
    place-items: center;

    isolation: isolate;
    overflow: visible;

    clip-path: polygon(
        50% 0%,
        78% 7%,
        94% 25%,
        100% 50%,
        94% 75%,
        78% 93%,
        50% 100%,
        22% 93%,
        6% 75%,
        0% 50%,
        6% 25%,
        22% 7%
    );

    /* Crisp progress perimeter. */
    background:
        conic-gradient(
            from -90deg,
            #00e6a0 0deg,
            #8dffe0 var(--progress-angle),
            rgba(93,125,137,.16) calc(var(--progress-angle) + .8deg),
            rgba(93,125,137,.16) 360deg
        );

    filter:
        drop-shadow(0 22px 30px rgba(0,0,0,.34))
        drop-shadow(0 0 12px rgba(0,230,160,.09));

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        filter .45s ease;
}

/* Solid inner face. */
.node-shape::before {
    content: "";
    position: absolute;
    inset: 7px;

    clip-path: inherit;

    background:
        linear-gradient(145deg, rgba(16,37,43,.98), rgba(5,13,18,.99));

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 -20px 45px rgba(0,0,0,.20);

    z-index: -2;
}

/* Inner technical frame. */
.node-shape::after {
    content: "";
    position: absolute;
    inset: 20px;

    clip-path: inherit;

    border: 1px solid rgba(168,255,235,.13);

    transform: rotate(15deg) scale(.94);

    z-index: -1;
}

/* Progress ring outside the main geometry. */
.node-progress-ring {
    position: absolute;
    inset: -13px;

    border-radius: 50%;

    background:
        conic-gradient(
            from -90deg,
            rgba(0,230,160,.95) var(--progress-angle),
            transparent var(--progress-angle)
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 79%,
            #000 80% 82%,
            transparent 83%
        );
    mask:
        radial-gradient(
            circle,
            transparent 79%,
            #000 80% 82%,
            transparent 83%
        );

    filter: drop-shadow(0 0 7px rgba(0,230,160,.40));

    opacity: .95;

    transition:
        background 1s cubic-bezier(.16,1,.3,1);

    pointer-events: none;
}

/* Small, sharp centre glow — not the giant blurry glow from before. */
.node-shape-glow {
    position: absolute;
    width: 72px;
    height: 72px;

    border-radius: 50%;

    background: rgba(0,230,160,.11);

    filter: blur(14px);

    opacity: .7;

    transition:
        transform .4s ease,
        opacity .4s ease;

    pointer-events: none;
}

.course-node:hover .node-shape {
    transform: rotate(2deg) scale(1.045);

    filter:
        drop-shadow(0 28px 40px rgba(0,0,0,.42))
        drop-shadow(0 0 20px rgba(0,230,160,.22));
}

.course-node:hover .node-shape-glow {
    opacity: 1;
    transform: scale(1.22);
}

/* =========================================================
   SHAPE CONTENT / LIVE STATS
   ========================================================= */

.node-center {
    position: relative;
    z-index: 5;

    width: 205px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.node-icon {
    position: relative;
    z-index: 3;

    margin-bottom: 8px;

    font-size: 43px;
    line-height: 1;

    filter: drop-shadow(0 0 10px rgba(0,230,160,.30));

    transition: transform .35s ease;
}

.course-node:hover .node-icon {
    transform: translateY(-3px) scale(1.08);
}

/* BIG percentage. */
.node-center > strong {
    color: #effff9;

    font:
        950 43px/1
        "JetBrains Mono",
        Consolas,
        monospace;

    letter-spacing: -2.5px;

    text-shadow:
        0 0 18px rgba(0,230,160,.16);
}

.node-stat-label {
    margin-top: 7px;

    color: rgba(205,226,231,.56);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}

/* Progress bar inside the shape. */
.node-mini-bar {
    position: relative;

    width: 154px;
    height: 7px;

    margin: 14px auto 14px;

    overflow: visible;

    border-radius: 999px;

    background: rgba(133,163,172,.14);

    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.45);
}

.node-mini-bar > span {
    position: absolute;
    inset: 0 auto 0 0;

    width: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #008b64,
            #00e6a0 55%,
            #baffea
        );

    box-shadow:
        0 0 13px rgba(0,230,160,.48);

    transition:
        width 1s cubic-bezier(.16,1,.3,1);
}

.node-mini-bar > b {
    position: absolute;

    top: 50%;
    left: 0;

    width: 9px;
    height: 9px;

    margin:
        -4.5px
        0
        0
        -4.5px;

    border-radius: 50%;

    background: #effff9;

    box-shadow:
        0 0 0 3px rgba(0,230,160,.13),
        0 0 14px rgba(0,230,160,.85);

    transition:
        left 1s cubic-bezier(.16,1,.3,1);
}

/* DONE / LEFT statistics. */
.node-stats {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 22px;

    min-width: 150px;
}

.node-stats span {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 48px;
}

.node-stats b {
    color: #e1fff5;

    font:
        900 14px/1
        "JetBrains Mono",
        Consolas,
        monospace;
}

.node-stats small {
    margin-top: 5px;

    color: rgba(193,217,224,.48);

    font-size: 7px;
    font-weight: 950;

    letter-spacing: 1.1px;

    text-transform: uppercase;
}

.node-stats i {
    width: 1px;
    height: 28px;

    background: rgba(0,230,160,.22);
}

/* Course number INSIDE the geometry. */
.node-number {
    position: absolute;

    left: 31px;
    bottom: 31px;

    z-index: 6;

    color: rgba(214,255,245,.56);

    font:
        800 11px/1
        "JetBrains Mono",
        Consolas,
        monospace;

    letter-spacing: 1.5px;
}

/* LIVE / MASTERED INSIDE the geometry. */
.node-status {
    position: absolute;

    right: 27px;
    top: 29px;

    z-index: 6;

    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: #00e6a0;

    font-size: 7px;
    font-weight: 950;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}

.node-status em {
    font-style: normal;
}

.node-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: currentColor;

    box-shadow:
        0 0 10px currentColor;

    animation:
        liveBlink 1.8s ease-in-out infinite;
}

.node-status.mastered {
    color: #b9ffe9;
}

.node-status.mastered i {
    animation: none;
}

/* Moving highlight across the shape. */
.node-shape-glint {
    position: absolute;
    inset: 0;

    clip-path: inherit;

    background:
        linear-gradient(
            118deg,
            transparent 34%,
            rgba(255,255,255,.13) 48%,
            transparent 59%
        );

    transform: translateX(-125%);

    animation:
        shapeGlint 5.5s ease-in-out infinite;

    pointer-events: none;

    z-index: 8;
}

/* Orbit rings around the shape. */
.node-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 350px;
    height: 168px;

    border:
        1px dashed
        rgba(0,230,160,.13);

    border-radius: 50%;

    transform:
        translate(-50%,-50%)
        rotate(27deg);

    pointer-events: none;
}

.node-orbit-a {
    animation:
        nodeOrbit 14s linear infinite;
}

.node-orbit-b {
    width: 318px;
    height: 145px;

    transform:
        translate(-50%,-50%)
        rotate(-39deg);

    border-color:
        rgba(140,178,190,.075);

    animation:
        nodeOrbitReverse 18s linear infinite;
}

/* =========================================================
   TEXT BESIDE/UNDER THE SHAPE
   ========================================================= */

.node-copy {
    width: min(310px, 100%);
    min-width: 0;

    padding-top: 22px;

    text-align: center;
}

.node-kicker {
    display: block;

    margin-bottom: 8px;

    color: #00e6a0;

    font-size: 9px;
    font-weight: 950;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}

.node-copy h2 {
    margin: 0;

    font-size:
        clamp(28px, 2.5vw, 38px);

    letter-spacing: -1.7px;

    line-height: 1.02;
}

.node-copy p {
    max-width: 310px;

    margin:
        11px auto 14px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.65;
}

.node-copy-meta {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 13px;

    color: rgba(177,202,211,.48);

    font-size: 8px;
    font-weight: 750;

    letter-spacing: .7px;
}

.node-copy-meta b {
    color: #dcebe8;
}

.node-copy-meta [data-course-sync] {
    color: rgba(0,230,160,.72);

    font-size: 7px;
    letter-spacing: 1px;

    font-weight: 950;
}

.sync-pulse {
    animation:
        syncPulse .55s ease;
}

/* ENTER / CONTINUE */
.node-enter {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-top: 17px;

    color: #aefde0;

    font-size: 9px;
    font-weight: 950;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}

.node-enter b {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border:
        1px solid
        rgba(0,230,160,.25);

    border-radius: 50%;

    font-size: 15px;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.course-node:hover .node-enter b {
    transform:
        translate(4px,-3px)
        rotate(8deg)
        scale(1.05);

    background:
        rgba(0,230,160,.08);

    border-color:
        rgba(0,230,160,.48);
}

/* Failed course data. */
.course-load-failed .node-shape {
    filter:
        grayscale(.35)
        drop-shadow(0 18px 28px rgba(0,0,0,.28));
}

.course-load-failed .node-mini-bar > span {
    background: rgba(128,157,168,.45);
    box-shadow: none;
}

.course-load-failed .node-mini-bar > b {
    display: none;
}

/* =========================================================
   LIGHT THEME
   ========================================================= */

body.light-theme .node-shape::before {
    background:
        linear-gradient(
            145deg,
            #f9fffd,
            #eaf5f3
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -18px 35px rgba(21,80,69,.05);
}

body.light-theme .node-shape::after {
    border-color:
        rgba(0,100,82,.12);
}

body.light-theme .node-center > strong {
    color: #16363b;
    text-shadow: none;
}

body.light-theme .node-stat-label,
body.light-theme .node-stats small,
body.light-theme .node-number {
    color: rgba(38,72,78,.58);
}

body.light-theme .node-stats b {
    color: #29454c;
}

body.light-theme .node-copy p {
    color: #60767d;
}

body.light-theme .node-copy-meta {
    color: #6a7f85;
}

body.light-theme .node-copy-meta b {
    color: #29454c;
}

body.light-theme .node-orbit {
    border-color:
        rgba(0,130,100,.13);
}

body.light-theme .node-mini-bar {
    background:
        rgba(60,91,98,.10);
}

body.light-theme .node-shape-glow {
    opacity: .35;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .course-constellation {
        width: min(1050px, calc(100vw - 40px));
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 65px 35px;
    }

    .node-shape {
        width: 260px;
        height: 260px;
    }

    .node-orbit {
        width: 320px;
        height: 154px;
    }

    .node-orbit-b {
        width: 290px;
        height: 135px;
    }
}

@media (max-width: 760px) {
    .categories-page {
        width: min(100% - 28px, 620px);
        padding-top: 48px;
    }

    .categories-hero {
        min-height: 0;
        margin-bottom: 18px;
    }

    .categories-hero h1 {
        font-size: 48px;
        letter-spacing: -2.7px;
    }

    .learn-hero-orbit {
        display: none;
    }

    .course-constellation {
        width: min(100%, 560px);
        min-height: 0;

        grid-template-columns: 1fr;

        padding:
            35px 0
            70px;

        gap: 72px;
    }

    .course-node {
        min-height: 470px;
    }

    .node-shape {
        width: 270px;
        height: 270px;
    }

    .node-progress-ring {
        inset: -11px;
    }

    .node-center {
        width: 195px;
    }

    .node-center > strong {
        font-size: 40px;
    }

    .node-icon {
        font-size: 40px;
    }

    .node-mini-bar {
        width: 145px;
    }

    .node-orbit {
        width: 330px;
        height: 158px;
    }

    .node-orbit-b {
        width: 298px;
        height: 140px;
    }

    .node-copy h2 {
        font-size: 31px;
    }
}

@media (max-width: 420px) {
    .course-constellation {
        width: 100%;
        padding-left: 4px;
        padding-right: 4px;
    }

    .node-shape {
        width: 245px;
        height: 245px;
    }

    .node-progress-ring {
        inset: -9px;
    }

    .node-orbit {
        width: 295px;
        height: 140px;
    }

    .node-orbit-b {
        width: 270px;
        height: 126px;
    }

    .node-center {
        width: 178px;
    }

    .node-center > strong {
        font-size: 36px;
    }

    .node-mini-bar {
        width: 130px;
    }

    .node-copy {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .course-node,
    .node-orbit-a,
    .node-orbit-b,
    .node-shape,
    .node-shape-glint,
    .node-status i {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   CDU CODES — V3.2 HOTFIX
   FIX: COURSE NODES WERE INVISIBLE
   ========================================================= */

/*
   V3.2 .course-node uses:
       animation: cduNodeIn .72s ... forwards;

   but the keyframes were missing from the stylesheet.
   Without the keyframes, opacity:0 remained active forever,
   which is why the page showed the hero but no courses.
*/
@keyframes cduNodeIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Safety fallback: if animation is disabled/unsupported,
   the course nodes must still remain visible. */
.course-node {
    animation-name: cduNodeIn;
    animation-duration: .72s;
    animation-timing-function: cubic-bezier(.16,1,.3,1);
    animation-fill-mode: forwards;
}

/* Keep reduced-motion accessible while still showing the nodes. */
@media (prefers-reduced-motion: reduce) {
    .course-node {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}


/* =========================================================
   CDU CODES — V3.3 FINAL COURSE CONSTELLATION POLISH
   BIGGER • SHARPER • MORE VISIBLE • LIGHT THEME FIX
   ========================================================= */

/* ---------- course gallery ---------- */

.categories-page {
    width: min(1480px, calc(100% - 48px));
    padding: 78px 0 120px;
}

.categories-hero {
    min-height: 250px;
    margin-bottom: 24px;
}

.categories-hero h1 {
    max-width: 920px;
    font-size: clamp(54px, 7vw, 88px);
    letter-spacing: -5px;
}

.categories-hero p {
    max-width: 760px;
    font-size: 16px;
    color: var(--muted);
}

/* The whole constellation gets more breathing room. */
.course-constellation {
    width: min(1480px, calc(100vw - 48px));
    min-height: 720px;
    padding: 82px 10px 125px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 70px 48px;
}

/* Stronger technical background, but still crisp — no giant blur. */
.constellation-lines {
    inset: 2% -2% 5%;
    opacity: .62;
    background:
        linear-gradient(27deg, transparent 49.82%, rgba(0,230,160,.10) 50%, transparent 50.18%),
        linear-gradient(153deg, transparent 49.82%, rgba(0,230,160,.075) 50%, transparent 50.18%),
        radial-gradient(circle at 50% 40%, rgba(0,230,160,.08), transparent 44%);
    mask-image: radial-gradient(ellipse at center, #000 24%, transparent 82%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 24%, transparent 82%);
}

/* ---------- course node ---------- */

.course-node {
    min-height: 570px;
    animation: cduNodeIn .72s cubic-bezier(.16,1,.3,1) both;
    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        filter .35s ease;
}

.course-node:hover {
    transform: translateY(-12px) scale(1.025);
    filter: brightness(1.08);
}

/* BIGGER hexagon */
.node-shape {
    width: 330px;
    height: 330px;
    filter:
        drop-shadow(0 0 18px rgba(0,230,160,.10))
        drop-shadow(0 24px 42px rgba(0,0,0,.35));
    transition:
        transform .5s cubic-bezier(.16,1,.3,1),
        filter .5s ease;
}

.course-node:hover .node-shape {
    transform: rotate(1deg) scale(1.035);
    filter:
        drop-shadow(0 0 28px rgba(0,230,160,.20))
        drop-shadow(0 30px 55px rgba(0,0,0,.42));
}

/* Make the progress ring noticeably stronger. */
.node-progress-ring {
    inset: -13px;
    filter: drop-shadow(0 0 8px rgba(0,230,160,.18));
}

/* Center content */
.node-center {
    width: 235px;
    gap: 8px;
}

.node-center > strong {
    font-size: 52px;
    line-height: .95;
    letter-spacing: -2px;
    text-shadow: 0 0 24px rgba(0,230,160,.14);
}

.node-icon {
    font-size: 48px;
    filter: drop-shadow(0 0 14px rgba(0,230,160,.28));
}

.node-center > small,
.node-center .node-complete-label {
    font-size: 9px;
    letter-spacing: 1.6px;
}

/* ---------- progress bar ---------- */

.node-mini-bar {
    width: 180px;
    height: 7px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(148,176,184,.13);
    border: 1px solid rgba(0,230,160,.14);
    box-shadow: inset 0 0 10px rgba(0,0,0,.25);
    overflow: hidden;
}

.node-mini-bar > span,
.node-mini-bar-fill {
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #00b981 0%,
            #00e6a0 55%,
            #75ffd4 100%
        );
    box-shadow:
        0 0 10px rgba(0,230,160,.65),
        0 0 24px rgba(0,230,160,.20);
    position: relative;
}

.node-mini-bar > span::after,
.node-mini-bar-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 25%,
        rgba(255,255,255,.75) 50%,
        transparent 75%
    );
    transform: translateX(-120%);
    animation: progressSweep 2.8s ease-in-out infinite;
}

/* ---------- stats BELOW / AROUND the hexagon ---------- */

.node-copy {
    width: min(100%, 390px);
    margin-top: 24px;
    text-align: center;
}

.node-copy h2 {
    margin: 0;
    font-size: 35px;
    line-height: 1;
    letter-spacing: -1.4px;
    font-weight: 900;
    color: #f1fff9;
    text-shadow: 0 2px 18px rgba(0,0,0,.30);
}

.node-copy p {
    max-width: 360px;
    margin: 12px auto 0;
    color: #9db0b7;
    font-size: 14px;
    line-height: 1.65;
}

/* Bigger / clearer "done + left" information. */
.node-stats {
    margin-top: 17px;
    gap: 30px;
    min-width: 210px;
}

.node-stats span {
    min-width: 70px;
}

.node-stats b {
    font-size: 17px;
    color: #e9fff8;
}

.node-stats small {
    margin-top: 6px;
    font-size: 8px;
    letter-spacing: 1.3px;
    color: rgba(193,217,224,.65);
}

.node-stats i {
    height: 34px;
    background: rgba(0,230,160,.30);
    box-shadow: 0 0 12px rgba(0,230,160,.08);
}

/* Course metadata below the stats */
.node-meta,
.node-status-text {
    margin-top: 11px;
    color: rgba(193,217,224,.62);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .8px;
}

/* Keep course number/status readable inside the shape. */
.node-number {
    left: 34px;
    bottom: 34px;
    font-size: 12px;
    color: rgba(214,255,245,.72);
}

.node-status {
    right: 31px;
    top: 31px;
    font-size: 8px;
}

/* ---------- stronger geometric effects ---------- */

.node-shape-glint {
    animation: shapeGlint 4.2s ease-in-out infinite;
}

.node-orbit {
    width: 370px;
    height: 178px;
    opacity: .9;
    transition: transform .5s ease, opacity .5s ease;
}

.node-orbit-b {
    width: 335px;
    height: 154px;
}

.course-node:hover .node-orbit {
    opacity: 1;
}

@keyframes progressSweep {
    0%, 45% {
        transform: translateX(-120%);
    }
    70%, 100% {
        transform: translateX(120%);
    }
}

@keyframes cduNodeIn {
    from {
        opacity: 0;
        transform: translateY(34px) scale(.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---------- DARK THEME ---------- */

body:not(.light-theme) .node-shape {
    background:
        radial-gradient(circle at 35% 25%, rgba(0,255,180,.14), transparent 30%),
        linear-gradient(145deg, #10211f 0%, #071319 48%, #081016 100%);
    border: 1px solid rgba(0,230,160,.32);
}

body:not(.light-theme) .node-copy h2 {
    color: #f3fffb;
}

body:not(.light-theme) .node-copy p {
    color: #9fb4bc;
}

/* =========================================================
   LIGHT THEME — COMPLETE COURSE GALLERY REDESIGN
   ========================================================= */

body.light-theme {
    --bg: #f2f7f7;
    --bg-soft: #e8f0ef;
    --surface: #ffffff;
    --surface-2: #f5f9f8;
    --surface-3: #e6efed;

    --border: #cbdcd8;
    --border-light: #b4cbc5;

    --text: #102027;
    --text-soft: #344c53;
    --muted: #60757b;

    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(0,190,145,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 25%,
            rgba(0,230,160,.07),
            transparent 24%
        ),
        #f2f7f7;
}

/* Navbar */
body.light-theme .navbar {
    background: rgba(255,255,255,.86);
    border-bottom-color: #d4e2df;
    box-shadow: 0 8px 30px rgba(24,62,66,.05);
}

/* Hero */
body.light-theme .categories-hero h1 {
    color: #102027;
}

body.light-theme .categories-hero h1 span {
    background:
        linear-gradient(
            100deg,
            #102027 0%,
            #008d6e 52%,
            #00b982 100%
        );
    -webkit-background-clip: text;
    background-clip: text;
}

body.light-theme .categories-hero p {
    color: #60757b;
}

body.light-theme .learn-hero-orbit {
    border-color: rgba(0,155,120,.22);
    box-shadow:
        0 0 55px rgba(0,170,130,.08),
        inset 0 0 45px rgba(0,170,130,.04);
}

body.light-theme .learn-hero-orbit::before,
body.light-theme .learn-hero-orbit::after {
    border-color: rgba(0,155,120,.20);
}

body.light-theme .learn-hero-orbit b {
    color: #123138;
}

/* Technical lines */
body.light-theme .constellation-lines {
    opacity: .55;
    background:
        linear-gradient(27deg, transparent 49.82%, rgba(0,130,105,.13) 50%, transparent 50.18%),
        linear-gradient(153deg, transparent 49.82%, rgba(0,130,105,.08) 50%, transparent 50.18%),
        radial-gradient(circle at 50% 40%, rgba(0,170,130,.09), transparent 44%);
}

/* Light-mode hexagon */
body.light-theme .node-shape {
    background:
        radial-gradient(circle at 35% 25%, rgba(0,230,160,.18), transparent 31%),
        linear-gradient(145deg, #ffffff 0%, #e9f5f2 48%, #dcebe8 100%);
    border: 1px solid rgba(0,130,105,.30);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -18px 35px rgba(20,80,80,.06);
    filter:
        drop-shadow(0 0 14px rgba(0,150,115,.13))
        drop-shadow(0 20px 32px rgba(35,78,80,.14));
}

body.light-theme .course-node:hover .node-shape {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        inset 0 -18px 35px rgba(20,80,80,.08);
    filter:
        drop-shadow(0 0 24px rgba(0,160,120,.22))
        drop-shadow(0 26px 40px rgba(35,78,80,.18));
}

body.light-theme .node-shape-glint {
    background:
        linear-gradient(
            118deg,
            transparent 34%,
            rgba(255,255,255,.82) 48%,
            transparent 59%
        );
}

/* Light text under the shape */
body.light-theme .node-copy h2 {
    color: #102027;
    text-shadow: none;
}

body.light-theme .node-copy p {
    color: #60757b;
}

body.light-theme .node-stats b {
    color: #16363c;
}

body.light-theme .node-stats small {
    color: #698087;
}

body.light-theme .node-stats i {
    background: rgba(0,130,105,.22);
}

body.light-theme .node-number {
    color: rgba(15,61,65,.65);
}

body.light-theme .node-status {
    color: #008d6e;
}

body.light-theme .node-status.mastered {
    color: #007b62;
}

body.light-theme .node-meta,
body.light-theme .node-status-text {
    color: #71858a;
}

/* Progress track in light mode */
body.light-theme .node-mini-bar {
    background: rgba(42,88,88,.10);
    border-color: rgba(0,130,105,.18);
    box-shadow: inset 0 1px 5px rgba(25,65,65,.10);
}

body.light-theme .node-progress-ring {
    filter: drop-shadow(0 0 7px rgba(0,155,120,.20));
}

/* Orbit visibility */
body.light-theme .node-orbit,
body.light-theme .node-orbit-b {
    border-color: rgba(0,130,105,.16);
}

/* ---------- responsive ---------- */

@media (max-width: 1250px) {
    .course-constellation {
        width: min(1100px, calc(100vw - 40px));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 78px 35px;
    }
}

@media (max-width: 760px) {
    .categories-page {
        width: min(calc(100% - 28px), 620px);
        padding-top: 48px;
    }

    .categories-hero {
        min-height: 0;
        margin-bottom: 20px;
    }

    .categories-hero h1 {
        font-size: 48px;
        letter-spacing: -2.7px;
    }

    .learn-hero-orbit {
        display: none;
    }

    .course-constellation {
        width: 100%;
        min-height: 0;
        grid-template-columns: 1fr;
        padding: 45px 0 80px;
        gap: 82px;
    }

    .course-node {
        min-height: 535px;
    }

    .node-shape {
        width: 300px;
        height: 300px;
    }

    .node-progress-ring {
        inset: -11px;
    }

    .node-center {
        width: 215px;
    }

    .node-center > strong {
        font-size: 47px;
    }

    .node-icon {
        font-size: 44px;
    }

    .node-mini-bar {
        width: 165px;
    }

    .node-copy {
        width: 100%;
    }

    .node-copy h2 {
        font-size: 32px;
    }

    .node-copy p {
        font-size: 13px;
    }

    .node-orbit {
        width: 340px;
        height: 164px;
    }

    .node-orbit-b {
        width: 305px;
        height: 142px;
    }
}

@media (max-width: 420px) {
    .course-constellation {
        padding-left: 3px;
        padding-right: 3px;
    }

    .node-shape {
        width: 270px;
        height: 270px;
    }

    .node-center {
        width: 195px;
    }

    .node-center > strong {
        font-size: 42px;
    }

    .node-mini-bar {
        width: 150px;
    }

    .node-copy h2 {
        font-size: 29px;
    }

    .node-orbit {
        width: 310px;
        height: 148px;
    }

    .node-orbit-b {
        width: 280px;
        height: 130px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .course-node,
    .node-shape,
    .node-shape-glint,
    .node-mini-bar > span::after,
    .node-mini-bar-fill::after,
    .node-status i {
        animation: none !important;
        transition: none !important;
    }

    .course-node {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   CDU CODES — V3.4 FINAL COURSE NODE
   EXACT FIX:
   BIGGER LESSON COUNT + LIVE STATUS + CTA
   HEXAGON BACK TO 286px
   NO OVERLAP / NO TINY TEXT
   ========================================================= */

/* Keep the geometric centerpiece at the intended size. */
.course-node {
    min-height: 555px;
    justify-content: flex-start;
}

.node-shape {
    width: 286px !important;
    height: 286px !important;

    filter:
        drop-shadow(0 0 16px rgba(0,230,160,.10))
        drop-shadow(0 20px 34px rgba(0,0,0,.30));

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        filter .45s ease;
}

.course-node:hover .node-shape {
    transform: translateY(-3px) scale(1.025);
    filter:
        drop-shadow(0 0 24px rgba(0,230,160,.18))
        drop-shadow(0 25px 42px rgba(0,0,0,.36));
}


/* ---------------------------------------------------------
   COURSE TEXT
   --------------------------------------------------------- */

.node-copy {
    width: min(430px, 100%);
    max-width: 430px;
    margin-top: 24px;
    padding: 0;
    text-align: center;
}

.node-kicker {
    margin-bottom: 9px;
    font-size: 10px;
    letter-spacing: 2px;
}

.node-copy h2 {
    margin: 0;
    font-size: clamp(34px, 3vw, 43px) !important;
    line-height: .98;
    letter-spacing: -1.8px;
    font-weight: 950;
}

.node-copy p {
    width: min(100%, 405px);
    max-width: 405px;
    margin: 12px auto 0;

    font-size: 15px !important;
    line-height: 1.65;

    color: #a9bac0;
}


/* ---------------------------------------------------------
   IMPORTANT:
   THIS is the "2 lessons • LIVE • JUST UPDATED" row.
   Target the REAL class used by your current markup.
   --------------------------------------------------------- */

.node-copy-meta {
    width: 100%;
    min-height: 30px;

    margin-top: 17px;
    padding: 0 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 22px;

    flex-wrap: nowrap;
    white-space: nowrap;

    overflow: visible;

    color: #b8cbd0;

    font-size: 13px !important;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: .65px;
}

.node-copy-meta b {
    display: inline-flex;
    align-items: center;

    color: #ecfff9;

    font-size: 14px !important;
    font-weight: 950;

    line-height: 1;
}

.node-copy-meta [data-course-sync] {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-width: max-content;

    color: #00e6a0;

    font-size: 10px !important;
    font-weight: 950;
    letter-spacing: 1.05px;

    line-height: 1;
}

/* Real LIVE dot — separate from the text so it cannot overlap. */
.node-copy-meta [data-course-sync]::before {
    content: "";

    width: 6px;
    height: 6px;

    margin-right: 7px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #00e6a0;

    box-shadow:
        0 0 7px rgba(0,230,160,.9),
        0 0 16px rgba(0,230,160,.35);

    animation: cduLiveDot 1.7s ease-in-out infinite;
}

@keyframes cduLiveDot {
    0%, 100% {
        transform: scale(.75);
        opacity: .65;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}


/* ---------------------------------------------------------
   CTA — REAL CLASS:
   .node-enter, NOT .node-action
   --------------------------------------------------------- */

.node-enter {
    width: auto;
    min-width: 245px;
    min-height: 52px;

    margin-top: 18px;
    padding: 0 8px 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    border: 1px solid rgba(0,230,160,.34);
    border-radius: 999px;

    color: #dffff4;

    background:
        linear-gradient(
            135deg,
            rgba(0,230,160,.13),
            rgba(0,230,160,.035)
        );

    box-shadow:
        0 9px 25px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.07);

    font-size: 13px !important;
    font-weight: 950;
    letter-spacing: 1.15px;
    line-height: 1;

    white-space: nowrap;

    transition:
        transform .3s cubic-bezier(.16,1,.3,1),
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.node-enter b {
    width: 40px !important;
    height: 40px !important;

    flex: 0 0 40px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(0,230,160,.45) !important;
    border-radius: 50%;

    color: #06130f;

    background:
        linear-gradient(
            135deg,
            #9affdf,
            #00e6a0 55%,
            #00b981
        );

    font-size: 20px !important;
    font-weight: 950;

    box-shadow:
        0 0 16px rgba(0,230,160,.30);

    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        box-shadow .3s ease;
}

.course-node:hover .node-enter {
    transform: translateY(-4px) scale(1.025);

    border-color: rgba(0,230,160,.68);

    background:
        linear-gradient(
            135deg,
            rgba(0,230,160,.20),
            rgba(0,230,160,.06)
        );

    box-shadow:
        0 15px 34px rgba(0,0,0,.28),
        0 0 26px rgba(0,230,160,.13);
}

.course-node:hover .node-enter b {
    transform: rotate(8deg) scale(1.12);

    box-shadow:
        0 0 24px rgba(0,230,160,.58);
}


/* ---------------------------------------------------------
   DARK MODE — CRISP TEXT
   --------------------------------------------------------- */

body:not(.light-theme) .node-copy h2 {
    color: #f4fffc;
}

body:not(.light-theme) .node-copy p {
    color: #a7bbc1;
}

body:not(.light-theme) .node-copy-meta {
    color: #b7cbd0;
}

body:not(.light-theme) .node-copy-meta b {
    color: #effff9;
}


/* ---------------------------------------------------------
   LIGHT MODE — HIGH CONTRAST + NO OVERLAP
   --------------------------------------------------------- */

body.light-theme .node-copy h2 {
    color: #102a31 !important;
    text-shadow: none;
}

body.light-theme .node-copy p {
    color: #526b72 !important;
}

body.light-theme .node-copy-meta {
    color: #405a61 !important;
}

body.light-theme .node-copy-meta b {
    color: #142f36 !important;
}

body.light-theme .node-copy-meta [data-course-sync] {
    color: #008d6e !important;
}

body.light-theme .node-copy-meta [data-course-sync]::before {
    background: #009e7a;
    box-shadow:
        0 0 7px rgba(0,158,122,.45),
        0 0 14px rgba(0,158,122,.16);
}

body.light-theme .node-enter {
    color: #10353a;

    background:
        linear-gradient(
            135deg,
            rgba(0,150,115,.11),
            rgba(0,150,115,.035)
        );

    border-color: rgba(0,125,100,.35);

    box-shadow:
        0 10px 25px rgba(28,70,73,.11),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body.light-theme .node-enter b {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #00b98c,
            #008d6e
        );

    border-color: rgba(0,125,100,.45) !important;

    box-shadow:
        0 0 16px rgba(0,145,110,.25);
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1250px) {
    .course-node {
        min-height: 540px;
    }

    .node-shape {
        width: 286px !important;
        height: 286px !important;
    }

    .node-copy {
        width: min(400px, 100%);
    }

    .node-copy-meta {
        gap: 17px;
    }
}

@media (max-width: 760px) {
    .course-node {
        min-height: 530px;
    }

    .node-shape {
        width: 280px !important;
        height: 280px !important;
    }

    .node-copy {
        width: min(390px, 100%);
    }

    .node-copy h2 {
        font-size: 32px !important;
    }

    .node-copy p {
        font-size: 14px !important;
    }

    .node-copy-meta {
        gap: 14px;
        font-size: 12px !important;
    }

    .node-copy-meta b {
        font-size: 13px !important;
    }

    .node-copy-meta [data-course-sync] {
        font-size: 9px !important;
    }

    .node-enter {
        min-width: 225px;
        min-height: 50px;
        font-size: 12px !important;
    }
}

@media (max-width: 420px) {
    .node-shape {
        width: 255px !important;
        height: 255px !important;
    }

    .node-copy-meta {
        gap: 10px;
    }

    .node-copy-meta [data-course-sync] {
        font-size: 8px !important;
        letter-spacing: .75px;
    }

    .node-enter {
        min-width: 210px;
    }
}


/* Accessibility: never let reduced motion hide the course nodes. */
@media (prefers-reduced-motion: reduce) {
    .course-node {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .node-copy-meta [data-course-sync]::before,
    .node-shape-glint {
        animation: none !important;
    }
}


/* =========================================================
   CduCodes v4.0 — LIVE XP / LEVEL FEEDBACK
   ========================================================= */
.profile-xp-progress{margin:0 0 25px;padding:18px 20px;background:linear-gradient(145deg,rgba(0,230,160,.055),rgba(255,255,255,.012));border:1px solid rgba(0,230,160,.16);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.profile-xp-progress-head{display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase}.profile-xp-progress-head strong{color:var(--text);font-size:11px}.profile-xp-progress-head b{color:var(--primary)}
.profile-xp-track{height:8px;margin:13px 0 8px;border-radius:999px;background:rgba(120,160,170,.12);overflow:hidden}.profile-xp-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#00b981,#00f0a8,#7affdf);box-shadow:0 0 16px rgba(0,240,168,.35);transition:width .65s cubic-bezier(.16,1,.3,1)}.profile-xp-progress small{color:var(--muted);font-size:10px}
.xp-reward-toast{position:fixed;right:26px;bottom:26px;z-index:9999;display:flex;align-items:center;gap:12px;padding:14px 17px;border:1px solid rgba(0,240,168,.38);border-radius:16px;background:linear-gradient(145deg,rgba(7,25,25,.97),rgba(5,13,17,.98));box-shadow:0 22px 60px rgba(0,0,0,.45),0 0 35px rgba(0,240,168,.12);opacity:0;transform:translateY(18px) scale(.96);pointer-events:none;transition:opacity .35s ease,transform .35s cubic-bezier(.16,1,.3,1)}.xp-reward-toast.show{opacity:1;transform:translateY(0) scale(1)}.xp-reward-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:rgba(0,240,168,.12);color:#00f0a8;font-size:18px;box-shadow:0 0 20px rgba(0,240,168,.15)}.xp-reward-toast strong{display:block;color:#f3faf9;font-size:16px}.xp-reward-toast small{display:block;margin-top:3px;color:#78919d;font-size:9px;letter-spacing:.4px}
@media(max-width:600px){.xp-reward-toast{left:16px;right:16px;bottom:16px}.profile-xp-progress-head{align-items:flex-start;flex-direction:column;gap:5px}}


/* =========================================================
   v4.3 — CINEMATIC APP LOADER
   ========================================================= */
.cdu-page-loader{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:#03090d;opacity:1;visibility:visible;transition:opacity .55s ease,visibility .55s ease;pointer-events:auto}.cdu-page-loader.is-loaded{opacity:0;visibility:hidden;pointer-events:none}.cdu-loader-core{position:relative;z-index:4;width:74px;height:74px;display:grid;place-items:center;border:1px solid rgba(0,230,163,.5);border-radius:50%;background:radial-gradient(circle,rgba(0,230,163,.15),rgba(3,18,22,.96) 64%);box-shadow:0 0 35px rgba(0,230,163,.15),inset 0 0 22px rgba(0,230,163,.07);animation:loaderCore 1.8s ease-in-out infinite}.cdu-loader-core span{color:#b9ffed;font:950 15px/1 "JetBrains Mono",monospace;text-shadow:0 0 15px rgba(0,230,163,.35)}.cdu-loader-ring{position:absolute;width:150px;height:150px;border:1px solid rgba(0,230,163,.15);border-radius:50%}.loader-ring-a{border-top-color:rgba(0,230,163,.8);animation:loaderSpin 1.4s linear infinite}.loader-ring-b{width:215px;height:215px;border-style:dashed;border-color:rgba(0,230,163,.08);animation:loaderSpinReverse 2.4s linear infinite}.cdu-loader-text{position:absolute;top:calc(50% + 118px);color:#4f7f78;font:900 8px/1 Inter,sans-serif;letter-spacing:2px;animation:loaderText 1.2s ease-in-out infinite}.cdu-page-loader:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,230,163,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(0,230,163,.018) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(circle,black,transparent 70%)}@keyframes loaderCore{0%,100%{transform:scale(.96);box-shadow:0 0 35px rgba(0,230,163,.12),inset 0 0 22px rgba(0,230,163,.06)}50%{transform:scale(1.04);box-shadow:0 0 55px rgba(0,230,163,.28),inset 0 0 30px rgba(0,230,163,.12)}}@keyframes loaderSpin{to{transform:rotate(360deg)}}@keyframes loaderSpinReverse{to{transform:rotate(-360deg)}}@keyframes loaderText{0%,100%{opacity:.45}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.cdu-page-loader,.cdu-loader-core,.cdu-loader-ring,.cdu-loader-text{animation:none!important}.cdu-page-loader{transition:none}}

/* =========================================================
   CduCodes V9.9 — PRODUCT SHELL REDESIGN
   Inspired by the new leaderboard direction:
   airy surfaces, collapsible navigation, premium cards,
   responsive app chrome and light-first readability.
   ========================================================= */

.cdu-authenticated {
    --shell-sidebar: 248px;
    --shell-sidebar-collapsed: 78px;
    --shell-topbar: 78px;
    --shell-bg: #f7fbfa;
    --shell-panel: rgba(255,255,255,.92);
    --shell-panel-strong: #ffffff;
    --shell-border: #dfeae8;
    --shell-text: #162b35;
    --shell-muted: #667c84;
    --shell-accent: #00c99a;
    --shell-accent-soft: rgba(0,201,154,.10);
    background:
        radial-gradient(circle at 68% 4%, rgba(0,201,154,.055), transparent 27%),
        radial-gradient(circle at 8% 80%, rgba(82,141,255,.035), transparent 25%),
        #f7fbfa;
    color: var(--shell-text);
}

.cdu-authenticated .cdu-app-shell {
    min-height: 100vh;
    display: flex;
    background: transparent;
}

.cdu-sidebar {
    width: var(--shell-sidebar);
    flex: 0 0 var(--shell-sidebar);
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    padding: 18px 12px 14px;
    background: rgba(255,255,255,.92);
    border-right: 1px solid var(--shell-border);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    transition: width .24s ease, flex-basis .24s ease, padding .24s ease;
}

.cdu-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 7px 18px;
}

.cdu-brand { min-width: 0; gap: 10px; }
.cdu-brand .brand-mark { box-shadow: none; background: #f0fffa; }
.cdu-brand .brand-word { color: #152934; white-space: nowrap; font-weight: 850; letter-spacing: -.55px; }
.cdu-brand .brand-word span { color: #00a982; }

.cdu-collapse-btn,
.cdu-mobile-menu,
.cdu-top-icon,
.cdu-switch {
    border: 0;
    background: transparent;
    color: inherit;
}

.cdu-collapse-btn {
    margin-left: auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #6d7f86;
    transition: .18s ease;
}
.cdu-collapse-btn:hover { background: #eef8f5; color: #00a982; }

.cdu-sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 0 12px;
}

.cdu-nav-section {
    display: block;
    margin: 17px 11px 7px;
    color: #8a9ba0;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
}
.cdu-nav-section:first-child { margin-top: 4px; }

.cdu-nav-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    margin: 3px 0;
    border-radius: 11px;
    color: #536972;
    font-size: 13px;
    font-weight: 700;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.cdu-nav-item:hover { background: #f1f8f6; color: #12323b; transform: translateX(2px); }
.cdu-nav-item.is-active {
    color: #00a982;
    background: linear-gradient(90deg, #e8fbf5, #f4fcfa);
    box-shadow: inset 3px 0 0 #00c99a;
}
.cdu-nav-icon {
    width: 23px;
    flex: 0 0 23px;
    text-align: center;
    font-size: 17px;
    line-height: 1;
    color: #73858c;
}
.cdu-nav-item.is-active .cdu-nav-icon { color: #00b78a; }

.cdu-sidebar-bottom { padding-top: 10px; }
.cdu-user-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 10px;
    border: 1px solid #e2ece9;
    background: #fff;
    border-radius: 13px;
}
.cdu-user-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #006d58;
    background: linear-gradient(145deg,#dffcf4,#fff);
    border: 2px solid #19cda4;
    font-weight: 900;
    box-shadow: 0 5px 16px rgba(0,177,139,.10);
}
.cdu-user-copy { min-width: 0; }
.cdu-user-copy strong,
.cdu-user-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdu-user-copy strong { color: #18323c; font-size: 12px; }
.cdu-user-copy span { color: #819199; font-size: 10px; margin-top: 2px; }

.cdu-sidebar-theme {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 9px;
    padding: 0 10px;
    border: 1px solid #e2ece9;
    border-radius: 12px;
    color: #5c7078;
    font-size: 12px;
    font-weight: 700;
}
.cdu-theme-symbol { font-size: 16px; }
.cdu-switch { width: 38px; height: 22px; margin-left: auto; padding: 2px; border-radius: 999px; background: #c6d4d7; }
.cdu-switch span { display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.15); transition: transform .18s ease; }
.cdu-switch.is-light { background: #00c99a; }
.cdu-switch.is-light span { transform: translateX(16px); }

.cdu-sidebar-progress { padding: 8px 10px 3px; }
.cdu-progress-line { height: 6px; border-radius: 999px; background: #e6efed; overflow: hidden; }
.cdu-progress-line span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#00b88b,#29dfb3); transition: width .45s ease; }
.cdu-sidebar-progress small { display: block; margin-top: 5px; text-align: right; color: #7d8d93; font-size: 9px; }
.cdu-logout-link { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-top: 5px; padding: 0 11px; color: #7b898f; font-size: 11px; font-weight: 750; border-radius: 10px; }
.cdu-logout-link:hover { background: #fff1f2; color: #c84858; }
.cdu-sidebar-copyright { padding: 12px 10px 0; color: #8b999e; font-size: 9px; line-height: 1.5; }
.cdu-sidebar-copyright span { color: #a3afb3; }

.cdu-app-frame { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cdu-topbar {
    min-height: var(--shell-topbar);
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 28px;
    background: rgba(255,255,255,.76);
    border-bottom: 1px solid rgba(223,234,232,.9);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.cdu-breadcrumb { display: flex; align-items: center; gap: 9px; color: #91a0a5; font-size: 12px; font-weight: 700; }
.cdu-breadcrumb b { color: #c1cccf; }
.cdu-breadcrumb strong { color: #263d47; }
.cdu-topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.cdu-global-search { width: min(290px, 30vw); height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 13px; border: 1px solid #dfe9e7; background: #fff; border-radius: 11px; color: #75878e; }
.cdu-global-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #223943; font-size: 12px; }
.cdu-global-search input::placeholder { color: #9aa9ae; }
.cdu-global-search kbd { min-width: 21px; padding: 2px 5px; border: 1px solid #e0e8e6; border-radius: 6px; color: #8c9a9f; font-size: 9px; background: #f7faf9; }
.cdu-top-icon { position: relative; width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; color: #5c7179; font-size: 18px; }
.cdu-top-icon:hover { background: #eef8f5; color: #00a982; }
.cdu-top-icon i { position: absolute; top: 2px; right: 1px; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: #00b88b; color: #fff; font-size: 8px; font-style: normal; border: 2px solid #fff; }
.cdu-top-icon.trophy { color: #df9a18; font-size: 20px; }
.cdu-top-user { display: flex; align-items: center; gap: 7px; color: #667980; font-size: 11px; font-weight: 750; padding-left: 3px; }
.cdu-top-user .cdu-user-avatar { width: 34px; height: 34px; flex-basis: 34px; }
.cdu-mobile-menu { display: none; width: 40px; height: 40px; border-radius: 10px; color: #587078; font-size: 19px; }
.cdu-mobile-menu:hover { background: #eef8f5; }

.cdu-main { flex: 1; width: 100%; padding: 28px 34px 24px; }
.cdu-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 34px 22px; color: #91a0a5; font-size: 10px; }
.cdu-footer strong { color: #5c7078; }

.cdu-authenticated .flash-container { position: fixed; top: 86px; right: 25px; z-index: 5000; width: min(360px, calc(100vw - 30px)); }
.cdu-authenticated .flash { border: 1px solid #dce9e6; background: rgba(255,255,255,.96); color: #29414b; box-shadow: 0 18px 45px rgba(31,71,78,.12); }

/* Collapsed desktop sidebar */
.cdu-authenticated.sidebar-collapsed .cdu-sidebar { width: var(--shell-sidebar-collapsed); flex-basis: var(--shell-sidebar-collapsed); padding-left: 10px; padding-right: 10px; }
.cdu-authenticated.sidebar-collapsed .cdu-brand .brand-word,
.cdu-authenticated.sidebar-collapsed .cdu-nav-label,
.cdu-authenticated.sidebar-collapsed .cdu-nav-section,
.cdu-authenticated.sidebar-collapsed .cdu-user-copy,
.cdu-authenticated.sidebar-collapsed .cdu-sidebar-progress,
.cdu-authenticated.sidebar-collapsed .cdu-sidebar-copyright,
.cdu-authenticated.sidebar-collapsed .cdu-logout-link .cdu-nav-label { display: none; }
.cdu-authenticated.sidebar-collapsed .cdu-sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.cdu-authenticated.sidebar-collapsed .cdu-collapse-btn { margin-left: 0; }
.cdu-authenticated.sidebar-collapsed .cdu-nav-item { justify-content: center; padding: 0; }
.cdu-authenticated.sidebar-collapsed .cdu-nav-icon { width: auto; flex-basis: auto; }
.cdu-authenticated.sidebar-collapsed .cdu-user-mini { justify-content: center; padding: 8px; }
.cdu-authenticated.sidebar-collapsed .cdu-sidebar-theme { justify-content: center; padding: 0; }
.cdu-authenticated.sidebar-collapsed .cdu-switch { margin-left: 0; }
.cdu-authenticated.sidebar-collapsed .cdu-logout-link { justify-content: center; padding: 0; }

/* Keep existing component pages readable inside the new shell. */
.cdu-authenticated main > section,
.cdu-authenticated main > .container,
.cdu-authenticated main > .page,
.cdu-authenticated main > .content { max-width: 1440px; margin-left: auto; margin-right: auto; }

/* Light theme polish */
.cdu-authenticated.light-theme,
body.cdu-authenticated.light-theme {
    background:
        radial-gradient(circle at 68% 4%, rgba(0,201,154,.07), transparent 28%),
        radial-gradient(circle at 8% 80%, rgba(82,141,255,.045), transparent 26%),
        #f7fbfa;
}
body.cdu-authenticated:not(.light-theme) {
    --shell-bg: #071014;
    --shell-panel: rgba(13,22,27,.94);
    --shell-panel-strong: #101a20;
    --shell-border: #20313a;
    --shell-text: #edf6f5;
    --shell-muted: #879aa1;
    --shell-accent: #00e6a0;
    --shell-accent-soft: rgba(0,230,160,.10);
    background: radial-gradient(circle at 70% 0%,rgba(0,230,160,.045),transparent 28%),#071014;
}
body.cdu-authenticated:not(.light-theme) .cdu-sidebar,
body.cdu-authenticated:not(.light-theme) .cdu-topbar { background: rgba(9,17,22,.94); border-color: #1d2b34; }
body.cdu-authenticated:not(.light-theme) .cdu-brand .brand-word,
body.cdu-authenticated:not(.light-theme) .cdu-breadcrumb strong,
body.cdu-authenticated:not(.light-theme) .cdu-user-copy strong,
body.cdu-authenticated:not(.light-theme) .cdu-top-user,
body.cdu-authenticated:not(.light-theme) .cdu-nav-item:hover { color: #eef7f6; }
body.cdu-authenticated:not(.light-theme) .cdu-nav-item { color: #8ea1a8; }
body.cdu-authenticated:not(.light-theme) .cdu-nav-item:hover { background: #111f25; }
body.cdu-authenticated:not(.light-theme) .cdu-nav-item.is-active { background: rgba(0,230,160,.09); color: #00e6a0; }
body.cdu-authenticated:not(.light-theme) .cdu-user-mini,
body.cdu-authenticated:not(.light-theme) .cdu-sidebar-theme,
body.cdu-authenticated:not(.light-theme) .cdu-global-search { background: #101a20; border-color: #24353e; }
body.cdu-authenticated:not(.light-theme) .cdu-global-search input { color: #eaf5f4; }
body.cdu-authenticated:not(.light-theme) .cdu-footer { color: #71838b; }

@media (max-width: 1100px) {
    .cdu-global-search { width: 220px; }
    .cdu-top-username { display: none; }
}

@media (max-width: 820px) {
    .cdu-sidebar { position: fixed; left: 0; transform: translateX(-102%); box-shadow: 18px 0 50px rgba(18,50,58,.16); transition: transform .24s ease; }
    .cdu-authenticated.sidebar-mobile-open .cdu-sidebar { transform: translateX(0); }
    .cdu-authenticated.sidebar-mobile-open::after { content: ""; position: fixed; inset: 0; z-index: 1050; background: rgba(16,34,39,.22); backdrop-filter: blur(3px); }
    .cdu-mobile-menu { display: grid; place-items: center; }
    .cdu-topbar { padding: 0 16px; }
    .cdu-breadcrumb { display: none; }
    .cdu-global-search { flex: 1; width: auto; }
    .cdu-top-icon.trophy { display: none; }
    .cdu-main { padding: 22px 16px; }
    .cdu-footer { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 560px) {
    .cdu-global-search { max-width: none; }
    .cdu-global-search kbd { display: none; }
    .cdu-top-user { display: none; }
    .cdu-top-icon { width: 35px; }
}

@media (prefers-reduced-motion: reduce) {
    .cdu-sidebar,
    .cdu-nav-item,
    .cdu-switch span,
    .cdu-progress-line span { transition: none !important; }
}

/* =========================================================
   V9.9 FINAL POLISH — FLAT NAV / SEARCH / TOOLTIPS / ACTIONS
   ========================================================= */

.cdu-sidebar-nav { padding-top: 8px; }
.cdu-nav-section { display: none !important; }
.cdu-nav-item { min-height: 50px; margin: 5px 0; font-size: 14px; border: 1px solid transparent; }
.cdu-nav-item:hover { transform: translateX(3px); box-shadow: 0 8px 20px rgba(0,169,130,.08); }
.cdu-nav-item.is-active { box-shadow: inset 4px 0 0 #00c99a, 0 8px 22px rgba(0,169,130,.08); }
.cdu-nav-icon { width: 28px; flex-basis: 28px; font-size: 19px; filter: saturate(1.15); }

.cdu-nav-item[data-tooltip], .cdu-top-icon[data-tooltip], .cdu-top-user[data-tooltip], .cdu-mobile-menu[data-tooltip], .cdu-sidebar-theme[data-tooltip] { position: relative; }
.cdu-nav-item[data-tooltip]::after, .cdu-top-icon[data-tooltip]::after, .cdu-top-user[data-tooltip]::after, .cdu-mobile-menu[data-tooltip]::after, .cdu-sidebar-theme[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .16s ease, transform .16s ease;
    z-index: 5000;
    padding: 7px 9px;
    border-radius: 8px;
    white-space: nowrap;
    background: #102027;
    color: #f7fffd;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    font-size: 11px;
    font-weight: 750;
}
.cdu-nav-item[data-tooltip]::after { left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-3px); }
.cdu-nav-item[data-tooltip]:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.cdu-top-icon[data-tooltip]::after, .cdu-top-user[data-tooltip]::after, .cdu-mobile-menu[data-tooltip]::after { top: calc(100% + 9px); right: 0; }
.cdu-top-icon[data-tooltip]:hover::after, .cdu-top-user[data-tooltip]:hover::after, .cdu-mobile-menu[data-tooltip]:hover::after { opacity: 1; transform: translateY(0); }
.cdu-sidebar-theme[data-tooltip]::after { left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-3px); }
.cdu-sidebar-theme[data-tooltip]:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.cdu-topbar { gap: 18px; }
.cdu-topbar-search-slot { position: absolute; left: 50%; transform: translateX(-50%); width: min(620px, 52vw); z-index: 2; }
.cdu-global-search { width: 100%; height: 48px; padding: 0 13px 0 16px; border-radius: 14px; box-shadow: 0 8px 26px rgba(25,66,70,.06); font-size: 14px; }
.cdu-global-search input { font-size: 14px; }
.cdu-global-search input::placeholder { color: #8b9da2; }
.cdu-global-search:focus-within { border-color: #7edfc8; box-shadow: 0 0 0 4px rgba(0,201,154,.10), 0 12px 30px rgba(25,66,70,.08); }
.cdu-global-search kbd { min-width: 24px; padding: 4px 7px; font-size: 10px; }
.cdu-search-results { position: absolute; top: calc(100% + 9px); left: 0; right: 0; max-height: min(480px, 65vh); overflow: auto; padding: 8px; border: 1px solid #dce8e5; border-radius: 15px; background: rgba(255,255,255,.98); box-shadow: 0 24px 55px rgba(27,65,70,.15); backdrop-filter: blur(18px); }
.cdu-search-result { display: grid; grid-template-columns: 40px minmax(0,1fr) 20px; align-items: center; gap: 11px; padding: 10px; border-radius: 11px; color: #18333d; }
.cdu-search-result:hover, .cdu-search-result:focus-visible { background: #effaf7; outline: none; }
.cdu-search-result-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #f0faf7; border: 1px solid #d9eee8; font-size: 20px; }
.cdu-search-result strong, .cdu-search-result small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cdu-search-result strong { font-size: 13px; }
.cdu-search-result small { margin-top: 2px; color: #788c93; font-size: 11px; }
.cdu-search-result > b { color:#00a982; font-size: 14px; }
.cdu-search-empty { display:flex; align-items:center; gap:12px; padding:20px 14px; color:#6e8288; }
.cdu-search-empty > span { font-size:24px; }
.cdu-search-empty strong, .cdu-search-empty small { display:block; }
.cdu-search-empty small { margin-top:3px; color:#8c9da2; }

.cdu-topbar-tools { position: relative; gap: 7px; }
.cdu-top-icon { width: 43px; height: 43px; border-radius: 12px; font-size: 18px; }
.cdu-top-user { border:0; background:transparent; display:flex; align-items:center; gap:7px; color:#526a73; padding:3px 6px; border-radius:12px; cursor:pointer; font:inherit; }
.cdu-top-user:hover { background:#eef8f5; }
.cdu-top-popover { position:absolute; right:0; top:calc(100% + 10px); width:280px; padding:14px; border:1px solid #dce8e5; border-radius:14px; background:rgba(255,255,255,.98); box-shadow:0 22px 50px rgba(27,65,70,.15); z-index:6000; }
.cdu-top-popover strong { display:block; color:#18333d; font-size:13px; }
.cdu-top-popover p { margin:7px 0 11px; color:#71848b; font-size:11px; line-height:1.5; }
.cdu-top-popover a { display:block; padding:9px 10px; border-radius:9px; color:#4d666f; font-size:12px; font-weight:700; }
.cdu-top-popover a:hover { background:#effaf7; color:#00a982; }

.cdu-authenticated.sidebar-collapsed .cdu-nav-item { min-height: 48px; }
.cdu-authenticated.sidebar-collapsed .cdu-sidebar-theme { min-height: 48px; }
.cdu-authenticated.sidebar-collapsed .cdu-sidebar-theme .cdu-theme-symbol { font-size: 18px; }

body.light-theme .cdu-sidebar { background:rgba(255,255,255,.94); }
body.light-theme .cdu-topbar { background:rgba(255,255,255,.84); }
body.light-theme .cdu-nav-item { color:#4f6670; }
body.light-theme .cdu-nav-item:hover { background:#effaf7; color:#16363e; }
body.light-theme .cdu-nav-item.is-active { color:#008f70; background:linear-gradient(90deg,#e5faf3,#f7fcfb); }
body.light-theme .cdu-search-results, body.light-theme .cdu-top-popover { background:rgba(255,255,255,.99); }

body:not(.light-theme) .cdu-topbar { background:rgba(7,18,23,.88); border-color:#1d3037; }
body:not(.light-theme) .cdu-breadcrumb, body:not(.light-theme) .cdu-top-user { color:#8fa4aa; }
body:not(.light-theme) .cdu-breadcrumb strong { color:#dcebe8; }
body:not(.light-theme) .cdu-global-search { background:#0d1b21; border-color:#273a42; color:#8ea1a7; }
body:not(.light-theme) .cdu-global-search input { color:#e8f5f2; }
body:not(.light-theme) .cdu-global-search kbd { background:#14242a; border-color:#2b3d44; color:#9fb0b4; }
body:not(.light-theme) .cdu-search-results, body:not(.light-theme) .cdu-top-popover { background:#0e1c22; border-color:#293e46; color:#eaf5f2; }
body:not(.light-theme) .cdu-search-result { color:#e7f2f0; }
body:not(.light-theme) .cdu-search-result:hover { background:#14272d; }
body:not(.light-theme) .cdu-search-result-icon { background:#14272d; border-color:#2b4048; }
body:not(.light-theme) .cdu-search-result small, body:not(.light-theme) .cdu-search-empty { color:#8ca0a6; }
body:not(.light-theme) .cdu-top-popover strong { color:#eaf5f2; }
body:not(.light-theme) .cdu-top-popover p, body:not(.light-theme) .cdu-top-popover a { color:#8da2a8; }
body:not(.light-theme) .cdu-top-popover a:hover { background:#14272d; color:#72e5c7; }

@media (max-width: 1050px) {
    .cdu-topbar-search-slot { width:min(500px, 43vw); }
}
@media (max-width: 820px) {
    .cdu-topbar-search-slot { position:static; transform:none; flex:1; width:auto; }
    .cdu-breadcrumb { display:none; }
    .cdu-global-search { height:44px; }
    .cdu-topbar { padding:0 14px; }
    .cdu-top-username { display:none; }
}
@media (max-width: 620px) {
    .cdu-topbar-search-slot { min-width:0; }
    .cdu-topbar-tools > .cdu-top-icon:not(#sound-toggle), .cdu-top-user { display:none; }
    .cdu-global-search input { font-size:13px; }
}

/* =========================================================
   V9.9 OPTIMIZED — VIEWPORT-CENTERED CELEBRATIONS + CONFETTI
   ========================================================= */
.lesson-victory,
.achievement-unlock-overlay,
.cdu-confetti-stage {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
}

.lesson-victory,
.achievement-unlock-overlay {
    display: grid !important;
    place-items: center !important;
}

.lesson-victory .victory-content,
.achievement-unlock-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
}

.cdu-confetti-stage {
    z-index: 100001 !important;
    pointer-events: none !important;
    isolation: isolate;
}

.cdu-confetti-stage i {
    position: absolute;
    left: var(--x);
    top: -8vh;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: hsl(var(--hue) 88% 58%);
    font-size: clamp(11px, 1.2vw, 20px);
    font-style: normal;
    text-shadow: 0 0 12px currentColor;
    opacity: 0;
    transform: translate3d(0,0,0) rotate(0) scale(var(--scale));
    animation: cduConfettiFall var(--duration) cubic-bezier(.16,.8,.22,1) var(--delay) forwards;
}

.cdu-confetti-stage.is-fading { opacity: 0; transition: opacity .5s ease; }

@keyframes cduConfettiFall {
    0% { opacity: 0; transform: translate3d(0,-5vh,0) rotate(0deg) scale(.3); }
    12% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--drift),112vh,0) rotate(720deg) scale(var(--scale)); }
}

/* Light theme makes every viewport celebration readable and soft. */
body.light-theme .lesson-victory .victory-title { color: #15272f !important; text-shadow: 0 4px 24px rgba(30,70,65,.12) !important; }
body.light-theme .lesson-victory .victory-subtitle { color: #526a70 !important; }
body.light-theme .lesson-victory .victory-ribbon { background: radial-gradient(circle at 35% 25%, #fff, #eef9f5 62%, #e3f2ed) !important; }


/* =========================================================
   V9.9.1 — SEARCH TITLE RARITY AURAS
   ========================================================= */
.cdu-search-result-title{position:relative;overflow:hidden;isolation:isolate;}
.cdu-search-result-title::before{content:"";position:absolute;inset:-70%;z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--search-rarity) 16%,transparent),transparent 58%);animation:searchTitleAura 3.2s ease-in-out infinite;pointer-events:none;}
.cdu-search-result-title::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid color-mix(in srgb,var(--search-rarity) 28%,transparent);box-shadow:inset 0 0 25px color-mix(in srgb,var(--search-rarity) 8%,transparent),0 0 22px color-mix(in srgb,var(--search-rarity) 8%,transparent);pointer-events:none;}
.cdu-search-result-title .cdu-search-result-icon{background:color-mix(in srgb,var(--search-rarity) 9%,#fff);border-color:color-mix(in srgb,var(--search-rarity) 30%,#d9eee8);box-shadow:0 0 20px color-mix(in srgb,var(--search-rarity) 18%,transparent);animation:searchTitleIcon 2.1s ease-in-out infinite;}
.cdu-search-result-title.rarity-common{--search-rarity:#20bd70}.cdu-search-result-title.rarity-uncommon{--search-rarity:#3b8cff}.cdu-search-result-title.rarity-rare{--search-rarity:#8b5cf6}.cdu-search-result-title.rarity-legendary{--search-rarity:#e6a51d}.cdu-search-result-title.rarity-mythic{--search-rarity:#e54878}
.cdu-search-result-title.rarity-rare::before{animation-duration:2.5s}.cdu-search-result-title.rarity-legendary::before{animation-duration:2.1s}.cdu-search-result-title.rarity-mythic::before{animation-duration:1.8s}
@keyframes searchTitleAura{0%,100%{transform:scale(.85);opacity:.25}50%{transform:scale(1.1);opacity:.8}}
@keyframes searchTitleIcon{0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}50%{transform:translateY(-3px) rotate(3deg) scale(1.07)}}
body:not(.light-theme) .cdu-search-result-title .cdu-search-result-icon{background:color-mix(in srgb,var(--search-rarity) 10%,#14272d);border-color:color-mix(in srgb,var(--search-rarity) 30%,#2b4048);}
@media(prefers-reduced-motion:reduce){.cdu-search-result-title::before,.cdu-search-result-title .cdu-search-result-icon{animation:none!important;}}

/* =========================================================
   V10.0 — GLOBAL TITLE RARITY SEARCH ENERGY
   Loaded app-wide so title results keep their rarity identity.
   ========================================================= */
.cdu-search-result-title {
    --search-rarity: #22c875;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid color-mix(in srgb,var(--search-rarity) 26%,transparent);
    background: linear-gradient(145deg,color-mix(in srgb,var(--search-rarity) 5%,transparent),transparent);
}
.cdu-search-result-title::before {
    content:"";
    position:absolute;
    inset:-80%;
    z-index:-1;
    background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--search-rarity) 30%,transparent),transparent,color-mix(in srgb,var(--search-rarity) 14%,transparent),transparent);
    filter:blur(12px);
    animation:cduSearchRarityRazor 3.8s linear infinite;
    pointer-events:none;
}
.cdu-search-result-title::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:inset 0 0 24px color-mix(in srgb,var(--search-rarity) 10%,transparent),0 0 18px color-mix(in srgb,var(--search-rarity) 7%,transparent);
    pointer-events:none;
}
.cdu-search-result-title.rarity-common{--search-rarity:#22c875}
.cdu-search-result-title.rarity-uncommon{--search-rarity:#3b8cff}
.cdu-search-result-title.rarity-rare{--search-rarity:#8b5cf6}
.cdu-search-result-title.rarity-legendary{--search-rarity:#e7aa25}
.cdu-search-result-title.rarity-mythic{--search-rarity:#e54878}
.cdu-search-result-title .cdu-search-result-icon {
    position:relative;
    z-index:1;
    background:color-mix(in srgb,var(--search-rarity) 9%,#fff);
    border-color:color-mix(in srgb,var(--search-rarity) 32%,#d9eee8);
    color:var(--search-rarity);
    box-shadow:0 0 22px color-mix(in srgb,var(--search-rarity) 20%,transparent);
    animation:cduSearchRarityIcon 2.1s ease-in-out infinite;
}
@keyframes cduSearchRarityRazor{to{transform:rotate(360deg)}}
@keyframes cduSearchRarityIcon{0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}50%{transform:translateY(-3px) rotate(3deg) scale(1.07)}}
body:not(.light-theme) .cdu-search-result-title .cdu-search-result-icon{background:color-mix(in srgb,var(--search-rarity) 10%,#14272d);border-color:color-mix(in srgb,var(--search-rarity) 32%,#2b4048)}
@media(prefers-reduced-motion:reduce){.cdu-search-result-title::before,.cdu-search-result-title .cdu-search-result-icon{animation:none!important}}

/* =========================================================
   V10.4 — GLOBAL READABILITY PASS
   Larger breadcrumbs, section labels and navigation text.
   ========================================================= */
.cdu-breadcrumb{font-size:14px!important;gap:10px!important}.cdu-breadcrumb span{font-size:13px!important}.cdu-breadcrumb strong{font-size:14px!important;font-weight:900!important}.cdu-nav-label{font-size:14px!important;font-weight:750!important}.cdu-nav-icon{font-size:18px!important}.section-label,.lb-eyebrow{font-size:12px!important;letter-spacing:.14em!important;font-weight:950!important}.cdu-sidebar-copyright,.cdu-sidebar-progress small{font-size:11px!important}.cdu-topbar{min-height:68px!important}.cdu-global-search input{font-size:14px!important}.cdu-top-user,.cdu-top-icon{font-size:15px!important}.cdu-main{font-size:15px}.cdu-footer{font-size:12px!important}

/* V10.6 shared avatar image surfaces */
.cdu-user-avatar{overflow:hidden}.cdu-user-avatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}.cdu-top-user .cdu-user-avatar{overflow:hidden}.cdu-top-user .cdu-user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* =========================================================
   CduCodes PRO PLAN — GLOBAL SIDEBAR BADGE
   ========================================================= */
.cdu-plan-nav-item{position:relative}
.cdu-plan-badge{margin-left:auto;padding:3px 6px;border-radius:999px;background:#e8eeee;color:#71828a;font-size:8px;line-height:1;font-weight:950;letter-spacing:.08em;white-space:nowrap}
.cdu-plan-badge.is-pro{background:rgba(223,63,118,.12);color:#df3f76;box-shadow:0 0 12px rgba(223,63,118,.10)}
body:not(.light-theme) .cdu-plan-badge{background:#172d34;color:#9fb3b8}
body:not(.light-theme) .cdu-plan-badge.is-pro{background:rgba(239,77,134,.14);color:#ff6d9c}

/* V11.2 readability pass */
body{font-size:16px}.cdu-sidebar-nav .cdu-nav-label{font-size:14px!important}.cdu-breadcrumb{font-size:14px!important}.cdu-topbar-search-slot input{font-size:14px!important}.section-label{font-size:11px!important;letter-spacing:.13em}.btn{font-size:14px!important}.cdu-user-copy strong,.cdu-top-username{font-size:14px!important}.cdu-sidebar-bottom small{font-size:11px!important}

/* V11.3 readability pass — keep the CduCodes UI crisp at desktop scale */
.cdu-authenticated{font-size:15px}
.cdu-sidebar .cdu-nav-item{font-size:13px;min-height:46px}.cdu-sidebar .cdu-nav-label{font-size:13px;font-weight:850}
.cdu-topbar,.cdu-breadcrumb,.cdu-top-search input,.cdu-top-username{font-size:13px}
.cdu-breadcrumb{font-weight:800}.cdu-top-search{min-height:44px}.cdu-top-search input{font-weight:650}
.cdu-user-copy strong{font-size:13px}.cdu-user-copy span{font-size:10px}
.cdu-sidebar-bottom .cdu-theme-row,.cdu-sidebar-bottom .cdu-xp-label,.cdu-sidebar-bottom .cdu-logout{font-size:12px}
.cdu-sidebar-bottom .cdu-xp-value{font-size:11px}
.btn,.table-action,.chip,.pro-select{font-size:12px}
.section-label{font-size:10px;letter-spacing:.16em}
body.light-theme{--ui-text-scale:1.04}
@media(max-width:900px){.cdu-nav-item .cdu-nav-label{font-size:12px}.cdu-top-search input{font-size:12px}}

/* CduCodes V13.8 — Light + Dark theme compatible stylesheet */

/* =========================================================
   CDU CODES — FINAL PRO SHOP / SUBSCRIPTION STRIP POLISH
   • Light theme course text = dark/black
   • Slim, healthy horizontal purchase strips
   • Already-purchased course = clean centered ribbon
   • Ribbon stays below course content (no text/icon overlap)
   • Responsive and theme-safe
   ========================================================= */

/* ---------------------------------------------------------
   SHOP COURSE LIST
   --------------------------------------------------------- */

body.light-theme .pro-shop .pro-course-grid,
body:not(.light-theme) .pro-shop .pro-course-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    padding:0!important;
    border-radius:18px!important;
    overflow:hidden!important;
}

body.light-theme .pro-shop .pro-course-grid{
    border:1px solid #cfe3df!important;
    background:#fff!important;
    box-shadow:0 14px 38px rgba(27,71,76,.06)!important;
}

body:not(.light-theme) .pro-shop .pro-course-grid{
    background:#0d171c!important;
    border:1px solid #29464e!important;
}

/* ---------------------------------------------------------
   COURSE STRIPS — SLIM + HEALTHY
   --------------------------------------------------------- */

body.light-theme .pro-shop .pro-course-card,
body:not(.light-theme) .pro-shop .pro-course-card{
    position:relative!important;
    min-height:92px!important;
    height:92px!important;
    box-sizing:border-box!important;

    display:grid!important;
    grid-template-columns:30px 52px minmax(0,1fr) 165px!important;
    align-items:center!important;

    gap:14px!important;
    margin:0!important;
    padding:12px 16px!important;

    border:0!important;
    border-radius:0!important;
    border-bottom:1px solid #29464e!important;

    transform:none!important;
    cursor:pointer!important;

    overflow:hidden!important;
    isolation:isolate!important;
}

body.light-theme .pro-shop .pro-course-card{
    background:#fff!important;
    color:#10171b!important;
    border-bottom-color:#dfeae7!important;
    box-shadow:none!important;
}

body:not(.light-theme) .pro-shop .pro-course-card{
    background:#0d171c!important;
    color:#f1f5f9!important;
}

body.light-theme .pro-shop .pro-course-card:last-child,
body:not(.light-theme) .pro-shop .pro-course-card:last-child{
    border-bottom:0!important;
}

body.light-theme .pro-shop .pro-course-card:hover{
    background:#f7fcfa!important;
    box-shadow:none!important;
    transform:none!important;
}

body:not(.light-theme) .pro-shop .pro-course-card:hover{
    background:#111e24!important;
    box-shadow:none!important;
    transform:none!important;
}

/* Selected course */
body.light-theme .pro-shop .pro-course-card.is-selected{
    background:linear-gradient(90deg,#eafbf6 0%,#fff 72%)!important;
    box-shadow:inset 4px 0 0 #00c99a!important;
}

body:not(.light-theme) .pro-shop .pro-course-card.is-selected{
    background:linear-gradient(90deg,#0d2923 0%,#0d171c 72%)!important;
    box-shadow:inset 4px 0 0 #00c99a!important;
}

/* ---------------------------------------------------------
   LIGHT THEME — COURSE TEXT
   --------------------------------------------------------- */

body.light-theme .pro-shop .pro-course-copy,
body.light-theme .pro-shop .pro-course-copy h3,
body.light-theme .pro-shop .pro-course-copy p,
body.light-theme .pro-shop .pro-course-copy>span,
body.light-theme .pro-shop .pro-course-side strong,
body.light-theme .pro-shop .pro-course-side small{
    color:#10171b!important;
}

body.light-theme .pro-shop .pro-course-copy>span{
    color:#008b6b!important;
    font-size:9px!important;
    font-weight:950!important;
    letter-spacing:.11em!important;
}

body.light-theme .pro-shop .pro-course-copy h3{
    margin:3px 0!important;
    font-size:18px!important;
    line-height:1.1!important;
    letter-spacing:-.02em!important;
}

body.light-theme .pro-shop .pro-course-copy p{
    min-height:0!important;
    margin:0!important;
    color:#52646b!important;
    font-size:10px!important;
    line-height:1.35!important;
}

/* Dark theme course text */
body:not(.light-theme) .pro-shop .pro-course-copy,
body:not(.light-theme) .pro-shop .pro-course-copy h3,
body:not(.light-theme) .pro-shop .pro-course-copy p,
body:not(.light-theme) .pro-shop .pro-course-copy>span,
body:not(.light-theme) .pro-shop .pro-course-side strong,
body:not(.light-theme) .pro-shop .pro-course-side small{
    color:#f1f5f9!important;
}

body:not(.light-theme) .pro-shop .pro-course-copy>span{
    color:#00e6a0!important;
    font-size:9px!important;
    font-weight:950!important;
    letter-spacing:.11em!important;
}

body:not(.light-theme) .pro-shop .pro-course-copy h3{
    margin:3px 0!important;
    font-size:18px!important;
    line-height:1.1!important;
}

body:not(.light-theme) .pro-shop .pro-course-copy p{
    min-height:0!important;
    margin:0!important;
    color:#9fb0b8!important;
    font-size:10px!important;
    line-height:1.35!important;
}

/* ---------------------------------------------------------
   ICON + RADIO
   --------------------------------------------------------- */

body.light-theme .pro-shop .pro-course-icon{
    width:52px!important;
    height:52px!important;
    border-radius:14px!important;
    background:#eef9f6!important;
    border:1px solid #d3e8e2!important;
    color:#17262b!important;
    font-size:25px!important;
}

body:not(.light-theme) .pro-shop .pro-course-icon{
    width:52px!important;
    height:52px!important;
    border-radius:14px!important;
    background:#102a2a!important;
    border:1px solid #28574f!important;
    color:#f1f5f9!important;
    font-size:25px!important;
}

body.light-theme .pro-shop .course-check{
    width:22px!important;
    height:22px!important;
    border:2px solid #aebfbd!important;
    border-radius:50%!important;
    background:#fff!important;
}

body.light-theme .pro-shop .course-check.is-filled{
    border-color:#00c99a!important;
    background:#fff!important;
}

body.light-theme .pro-shop .course-check.is-filled::after{
    content:""!important;
    position:absolute!important;
    inset:4px!important;
    border-radius:50%!important;
    background:#00c99a!important;
}

/* ---------------------------------------------------------
   PRICE + ACTION
   --------------------------------------------------------- */

body.light-theme .pro-shop .pro-course-side,
body:not(.light-theme) .pro-shop .pro-course-side{
    min-width:0!important;
    text-align:right!important;
}

body.light-theme .pro-shop .pro-course-side strong{
    display:block!important;
    color:#10171b!important;
    font-size:16px!important;
    line-height:1.1!important;
    font-weight:950!important;
    white-space:nowrap!important;
}

body.light-theme .pro-shop .pro-course-side small{
    display:block!important;
    margin-top:2px!important;
    color:#687a80!important;
    font-size:8px!important;
}

body.light-theme .pro-shop .pro-course-side>b{
    display:block!important;
    margin-top:4px!important;
    color:#008f70!important;
    font-size:8px!important;
    letter-spacing:.05em!important;
}

body:not(.light-theme) .pro-shop .pro-course-side strong{
    display:block!important;
    color:#f1f5f9!important;
    font-size:16px!important;
    line-height:1.1!important;
    font-weight:950!important;
    white-space:nowrap!important;
}

body:not(.light-theme) .pro-shop .pro-course-side small{
    display:block!important;
    margin-top:2px!important;
    color:#9fb0b8!important;
    font-size:8px!important;
}

body:not(.light-theme) .pro-shop .pro-course-side>b{
    display:block!important;
    margin-top:4px!important;
    color:#00e6a0!important;
    font-size:8px!important;
    letter-spacing:.05em!important;
}

body.light-theme .pro-shop .pro-add-course{
    min-width:72px!important;
    margin-top:5px!important;
    padding:7px 11px!important;
    border:1px solid #9ddfd2!important;
    border-radius:8px!important;
    background:#effcf9!important;
    color:#007e63!important;
    font-size:9px!important;
    font-weight:950!important;
}

body.light-theme .pro-shop .pro-course-card.is-selected .pro-add-course{
    background:#00d6a3!important;
    border-color:#00d6a3!important;
    color:#05251d!important;
}

/* =========================================================
   CDU CODES — COURSE PRO
   FINAL PURCHASED COURSE SYSTEM — V12.5
   =========================================================
   Purchased courses:
   • LEFT + RIGHT green rails
   • FIRST purchased card gets TOP green border
   • LAST purchased card gets BOTTOM green border
   • Consecutive purchased cards connect cleanly
   • Single purchased card gets a complete green outline
   • Compact centered "ALREADY PURCHASED" badge
   • No content translation / no ribbon overlap
   ========================================================= */

/* ---------------------------------------------------------
   PURCHASED CARD — BASE
   --------------------------------------------------------- */

body.light-theme .pro-shop .pro-course-card.is-active,
body:not(.light-theme) .pro-shop .pro-course-card.is-active {

    position: relative !important;
    isolation: isolate !important;

    opacity: 1 !important;

    cursor: not-allowed !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    /* LEFT + RIGHT ONLY */
    border-top: 0 !important;
    border-bottom: 0 !important;

    border-left: 3px solid #00d3a7 !important;
    border-right: 3px solid #00d3a7 !important;

    border-radius: 0 !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   PURCHASED LIGHT SURFACE
   --------------------------------------------------------- */

body.light-theme .pro-shop .pro-course-card.is-active {

    background:
        linear-gradient(
            90deg,
            #f1faf7 0%,
            #ffffff 72%
        ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(0, 201, 149, .10) !important;
}


/* ---------------------------------------------------------
   PURCHASED DARK SURFACE
   --------------------------------------------------------- */

body:not(.light-theme) .pro-shop .pro-course-card.is-active {

    background:
        linear-gradient(
            90deg,
            #0d2923 0%,
            #0d171c 72%
        ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(0, 230, 160, .12),
        0 12px 35px rgba(0, 230, 160, .06) !important;
}


/* ---------------------------------------------------------
   FIRST PURCHASED CARD
   --------------------------------------------------------- */

/*
   This handles both:
   1. The first card in the whole course list
   2. A purchased card immediately following a normal card
*/

.pro-course-card.is-active:first-child,
.pro-course-card:not(.is-active)
+ .pro-course-card.is-active {

    border-top: 3px solid #00d3a7 !important;

    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
}


/* ---------------------------------------------------------
   MIDDLE PURCHASED CARDS
   --------------------------------------------------------- */

.pro-course-card.is-active
+ .pro-course-card.is-active {

    border-top: 0 !important;

    border-radius: 0 !important;
}


/* ---------------------------------------------------------
   LAST PURCHASED CARD
   --------------------------------------------------------- */

.pro-course-card.is-active:not(
    :has(+ .pro-course-card.is-active)
) {

    border-bottom: 3px solid #00d3a7 !important;

    border-bottom-left-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
}


/* ---------------------------------------------------------
   SINGLE PURCHASED CARD
   --------------------------------------------------------- */

.pro-course-card.is-active:first-child:not(
    :has(+ .pro-course-card.is-active)
) {

    border: 3px solid #00d3a7 !important;

    border-radius: 18px !important;
}


/* ---------------------------------------------------------
   PURCHASED BADGE
   --------------------------------------------------------- */

body.light-theme
.pro-shop
.pro-course-card.is-active::before,

body:not(.light-theme)
.pro-shop
.pro-course-card.is-active::before {

    content: "✓  ALREADY PURCHASED" !important;

    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    right: auto !important;
    bottom: auto !important;

    width: max-content !important;

    max-width: calc(100% - 28px) !important;

    transform:
        translate(-50%, -50%) !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 30px !important;

    padding: 7px 17px !important;

    background:
        rgba(0, 201, 149, .035) !important;

    color: #008f70 !important;

    border: 2px solid #00c995 !important;

    border-radius: 7px !important;

    font-family: inherit !important;

    font-size: 10px !important;

    font-weight: 950 !important;

    letter-spacing: .13em !important;

    line-height: 1 !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;

    z-index: 1 !important;

    pointer-events: none !important;

    box-shadow:
        0 0 18px rgba(0, 201, 149, .10),
        inset 0 0 12px rgba(0, 201, 149, .04) !important;
}


/* DARK BADGE */

body:not(.light-theme)
.pro-shop
.pro-course-card.is-active::before {

    background:
        rgba(0, 230, 160, .035) !important;

    color: #00e6a0 !important;

    border-color: #00e6a0 !important;

    box-shadow:
        0 0 20px rgba(0, 230, 160, .12),
        inset 0 0 12px rgba(0, 230, 160, .04) !important;
}


/* ---------------------------------------------------------
   COURSE CONTENT ALWAYS ABOVE BADGE
   --------------------------------------------------------- */

body.light-theme
.pro-shop
.pro-course-card.is-active > *,

body:not(.light-theme)
.pro-shop
.pro-course-card.is-active > * {

    position: relative !important;

    z-index: 2 !important;
}


/* ---------------------------------------------------------
   NEVER MOVE COURSE CONTENT
   --------------------------------------------------------- */

body.light-theme
.pro-shop
.pro-course-card.is-active
.pro-course-copy,

body.light-theme
.pro-shop
.pro-course-card.is-active
.pro-course-side,

body.light-theme
.pro-shop
.pro-course-card.is-active
.pro-course-icon,

body.light-theme
.pro-shop
.pro-course-card.is-active
.pro-course-radio,

body.light-theme
.pro-shop
.pro-course-card.is-active
.course-omr-cell,

body:not(.light-theme)
.pro-shop
.pro-course-card.is-active
.pro-course-copy,

body:not(.light-theme)
.pro-shop
.pro-course-card.is-active
.pro-course-side,

body:not(.light-theme)
.pro-shop
.pro-course-card.is-active
.pro-course-icon,

body:not(.light-theme)
.pro-shop
.pro-course-card.is-active
.pro-course-radio,

body:not(.light-theme)
.pro-shop
.pro-course-card.is-active
.course-omr-cell {

    transform: none !important;
}


/* ---------------------------------------------------------
   PURCHASED CHECK
   --------------------------------------------------------- */

body.light-theme
.pro-shop
.pro-course-card.is-active
.course-check {

    border-color: #78b7aa !important;

    background: #f2f8f6 !important;
}


/* Purchased courses cannot be re-added */

body.light-theme
.pro-shop
.pro-course-card.is-active
.pro-add-course,

body:not(.light-theme)
.pro-shop
.pro-course-card.is-active
.pro-add-course {

    display: none !important;
}


/* Existing active pill, if present */

body.light-theme
.pro-shop
.pro-course-card.is-active
.course-active-pill {

    background: #dff8ef !important;

    color: #007e63 !important;
}


body:not(.light-theme)
.pro-shop
.pro-course-card.is-active
.course-active-pill {

    background: rgba(0, 230, 160, .12) !important;

    color: #00e6a0 !important;
}


/* ---------------------------------------------------------
   PURCHASED HOVER — DO NOT CHANGE GEOMETRY
   --------------------------------------------------------- */

body.light-theme
.pro-shop
.pro-course-card.is-active:hover,

body:not(.light-theme)
.pro-shop
.pro-course-card.is-active:hover {

    transform: none !important;

    cursor: not-allowed !important;
}


/* ---------------------------------------------------------
   MOBILE PURCHASED BADGE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    body.light-theme
    .pro-shop
    .pro-course-card.is-active::before,

    body:not(.light-theme)
    .pro-shop
    .pro-course-card.is-active::before {

        top: 50% !important;

        min-height: 27px !important;

        padding: 6px 12px !important;

        font-size: 8px !important;

        letter-spacing: .10em !important;
    }
}

/* ---------------------------------------------------------
   SHOP HEADINGS
   --------------------------------------------------------- */

body.light-theme .pro-shop,
body.light-theme .pro-shop h1,
body.light-theme .pro-shop h2,
body.light-theme .pro-shop h3{
    color:#10171b!important;
}

body.light-theme .pro-shop .pro-shop-header p,
body.light-theme .pro-shop .pro-shop-heading p{
    color:#5f737a!important;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:760px){

    body.light-theme .pro-shop .pro-course-card,
    body:not(.light-theme) .pro-shop .pro-course-card{
        min-height:96px!important;
        height:auto!important;
        grid-template-columns:28px 48px minmax(0,1fr)!important;
        gap:10px!important;
        padding:12px!important;
    }

    body.light-theme .pro-shop .pro-course-icon,
    body:not(.light-theme) .pro-shop .pro-course-icon{
        width:48px!important;
        height:48px!important;
        font-size:23px!important;
    }

    body.light-theme .pro-shop .pro-course-side,
    body:not(.light-theme) .pro-shop .pro-course-side{
        grid-column:3!important;
        text-align:left!important;
        padding-top:2px!important;
    }

    body.light-theme .pro-shop .pro-course-side strong,
    body:not(.light-theme) .pro-shop .pro-course-side strong{
        display:inline-block!important;
        margin-right:7px!important;
        font-size:15px!important;
    }

    body.light-theme .pro-shop .pro-course-side small,
    body:not(.light-theme) .pro-shop .pro-course-side small{
        display:inline-block!important;
        font-size:8px!important;
    }

    body.light-theme .pro-shop .pro-course-copy h3,
    body:not(.light-theme) .pro-shop .pro-course-copy h3{
        font-size:16px!important;
    }

    body.light-theme .pro-shop .pro-course-card.is-active::before,
    body:not(.light-theme) .pro-shop .pro-course-card.is-active::before{
        top:58%!important;
        height:20px!important;
        font-size:7px!important;
    }
}



/* =========================================================
   CDU CODES — COURSE PRO FINAL GLOBAL SAFETY
   ========================================================= */

.pro-shop .pro-course-card {
    box-sizing: border-box;
}

.pro-shop .pro-course-card.is-active,
.pro-shop .pro-course-card.is-active:hover {
    transform: none !important;
}

.pro-shop .pro-course-grid {
    box-sizing: border-box;
}

.pro-shop .pro-add-course,
.pro-shop .cart-checkout {
    box-sizing: border-box;
}

.pro-shop .pro-course-card.is-active::after {
    pointer-events: none;
}


/* =========================================================
   ACHIEVEMENTS — DARK THEME RECOMMENDATION CARDS
   ========================================================= */

body:not(.light-theme) .recommended-titles .recommendation-card,
body:not(.light-theme) .recommendation-grid .recommendation-card,
body:not(.light-theme) .recommended-for-you .recommendation-card,
body:not(.light-theme) .achievement-recommendations .recommendation-card,
body:not(.light-theme) .titles-recommendations .recommendation-card {

    background:
        linear-gradient(
            145deg,
            #102128 0%,
            #0d1c22 100%
        ) !important;

    border: 1px solid #29434b !important;

    color: #e5f2ef !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 14px 35px rgba(0,0,0,.18) !important;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease !important;
}


/* subtle rarity glow on hover */

body:not(.light-theme)
.recommended-titles
.recommendation-card:hover,

body:not(.light-theme)
.recommendation-grid
.recommendation-card:hover,

body:not(.light-theme)
.recommended-for-you
.recommendation-card:hover,

body:not(.light-theme)
.achievement-recommendations
.recommendation-card:hover,

body:not(.light-theme)
.titles-recommendations
.recommendation-card:hover {

    transform: translateY(-3px) !important;

    border-color:
        color-mix(
            in srgb,
            var(--rarity-color, #00dca8) 45%,
            #29434b
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 18px 42px rgba(0,0,0,.25),
        0 0 24px
        color-mix(
            in srgb,
            var(--rarity-color, #00dca8) 9%,
            transparent
        ) !important;
}


/* achievement title */

body:not(.light-theme)
.recommended-titles
.recommendation-card h3,

body:not(.light-theme)
.recommendation-grid
.recommendation-card h3,

body:not(.light-theme)
.recommended-for-you
.recommendation-card h3,

body:not(.light-theme)
.achievement-recommendations
.recommendation-card h3,

body:not(.light-theme)
.titles-recommendations
.recommendation-card h3 {

    color: #eaf6f3 !important;

    text-shadow:
        0 1px 12px rgba(0,0,0,.18) !important;
}


/* description */

body:not(.light-theme)
.recommended-titles
.recommendation-card p,

body:not(.light-theme)
.recommendation-grid
.recommendation-card p,

body:not(.light-theme)
.recommended-for-you
.recommendation-card p,

body:not(.light-theme)
.achievement-recommendations
.recommendation-card p,

body:not(.light-theme)
.titles-recommendations
.recommendation-card p {

    color: #8ea6ab !important;
}


/* rarity label */

body:not(.light-theme)
.recommended-titles
.recommendation-card > span,

body:not(.light-theme)
.recommendation-grid
.recommendation-card > span,

body:not(.light-theme)
.recommended-for-you
.recommendation-card > span,

body:not(.light-theme)
.achievement-recommendations
.recommendation-card > span,

body:not(.light-theme)
.titles-recommendations
.recommendation-card > span {

    color: var(--rarity-color, #00dca8) !important;

    text-shadow:
        0 0 12px
        color-mix(
            in srgb,
            var(--rarity-color, #00dca8) 25%,
            transparent
        ) !important;
}


/* icon */

body:not(.light-theme)
.recommended-titles
.recommendation-card
.cdu-search-result-icon,

body:not(.light-theme)
.recommendation-grid
.recommendation-card
.cdu-search-result-icon,

body:not(.light-theme)
.recommended-for-you
.recommendation-card
.cdu-search-result-icon,

body:not(.light-theme)
.achievement-recommendations
.recommendation-card
.cdu-search-result-icon,

body:not(.light-theme)
.titles-recommendations
.recommendation-card
.cdu-search-result-icon {

    background:
        color-mix(
            in srgb,
            var(--rarity-color, #00dca8) 9%,
            #102128
        ) !important;

    border-color:
        color-mix(
            in srgb,
            var(--rarity-color, #00dca8) 28%,
            #29434b
        ) !important;
}


/* View button */

body:not(.light-theme)
.recommended-titles
.recommendation-card button,

body:not(.light-theme)
.recommendation-grid
.recommendation-card button,

body:not(.light-theme)
.recommended-for-you
.recommendation-card button,

body:not(.light-theme)
.achievement-recommendations
.recommendation-card button,

body:not(.light-theme)
.titles-recommendations
.recommendation-card button {

    color: #dff8f2 !important;

    background:
        #102a30 !important;

    border: 1px solid #31535a !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}


body:not(.light-theme)
.recommended-titles
.recommendation-card button:hover,

body:not(.light-theme)
.recommendation-grid
.recommendation-card button:hover,

body:not(.light-theme)
.recommended-for-you
.recommendation-card button:hover,

body:not(.light-theme)
.achievement-recommendations
.recommendation-card button:hover,

body:not(.light-theme)
.titles-recommendations
.recommendation-card button:hover {

    color: #ffffff !important;

    background:
        #123a35 !important;

    border-color:
        #00dca8 !important;

    box-shadow:
        0 0 18px rgba(0,220,168,.12) !important;
}