/* Avoid login-screen flash on refresh when a session is being restored */
        html.booting-session #loginScreen { display: none !important; }
        body {
            font-family: 'Outfit', sans-serif;
            background: #020617;
            color: #f8fafc;
            min-height: 100vh;
            margin: 0;
            overflow-x: hidden;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.06);
        }
        .glass-card-hover:hover {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(16, 185, 129, 0.2);
            transform: translateY(-2px);
        }
        .input-field {
            background-color: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(16, 185, 129, 0.15);
            color: white;
            transition: all 0.3s;
        }
        .input-field:focus {
            border-color: #10b981;
            box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
            outline: none;
        }
        /* Unified custom chevron for all dropdowns (replaces inconsistent native arrow) */
        select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6'/></svg>");
            background-repeat: no-repeat;
            background-position: right 14px center;
            background-size: 14px 14px;
            padding-right: 38px !important;
        }
        select::-ms-expand { display: none; }
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
        ::-webkit-scrollbar-thumb { background: rgba(16, 185, 129, 0.3); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(16, 185, 129, 0.5); }

        /* Terminal effect */
        .terminal-log {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }

        /* ===== UI/UX IMPROVEMENTS ===== */

        /* Tab fade-in animation */
        @keyframes tabFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .tab-content:not(.hidden) {
            animation: tabFadeIn 0.25s ease-out both;
        }

        /* Sidebar active nav indicator */
        .nav-btn-active {
            position: relative;
            color: #34d399 !important;
            background: rgba(16, 185, 129, 0.08) !important;
            border-color: rgba(16, 185, 129, 0.15) !important;
        }
        .nav-btn-active::before {
            content: '';
            position: absolute;
            left: -1px;
            top: 20%;
            height: 60%;
            width: 3px;
            background: #10b981;
            border-radius: 0 3px 3px 0;
        }

        /* Kanban empty drop zone */
        .kanban-empty {
            border: 2px dashed rgba(255,255,255,0.07);
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: rgba(148,163,184,0.4);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            padding: 32px 16px;
            transition: all 0.2s;
        }
        .kanban-col-drag-over .kanban-empty,
        .kanban-col-drag-over {
            border-color: rgba(16, 185, 129, 0.35) !important;
            background: rgba(16, 185, 129, 0.04) !important;
        }
        .kanban-col-drag-over {
            border-radius: 16px;
        }

        /* Postman JSON highlight */
        .json-key   { color: #7dd3fc; }
        .json-str   { color: #86efac; }
        .json-num   { color: #fca5a5; }
        .json-bool  { color: #fbbf24; }
        .json-null  { color: #94a3b8; }

        /* Postman send button spinner */
        @keyframes spin { to { transform: rotate(360deg); } }
        .btn-spinner { animation: spin 0.8s linear infinite; display: inline-block; }

        /* Achievement confetti particle */
        @keyframes confettiFall {
            0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }
        .confetti-particle {
            position: fixed;
            width: 8px; height: 8px;
            border-radius: 2px;
            pointer-events: none;
            z-index: 9999;
            animation: confettiFall linear forwards;
        }

        /* Sandbox toolbar compact icons */
        .sb-toolbar-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            padding: 8px 12px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(15,23,42,0.8);
            color: #94a3b8;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }
        .sb-toolbar-btn:hover {
            color: #fff;
            border-color: rgba(16,185,129,0.4);
            background: rgba(16,185,129,0.07);
        }
        .sb-toolbar-btn svg { width: 18px; height: 18px; }
        .sb-toolbar-badge {
            position: absolute;
            top: -6px; right: -6px;
            font-size: 9px; font-weight: 800;
            height: 18px; width: 18px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            border: 2px solid #020617;
        }

        /* Bug progress mini bar in sidebar */
        #bugProgressBar { transition: width 0.5s cubic-bezier(.4,0,.2,1); }

        /* Micro glow pulse on active nav */
        @keyframes navGlow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
            50%       { box-shadow: 0 0 12px 2px rgba(16,185,129,0.15); }
        }
        .nav-btn-active { animation: navGlow 3s ease-in-out infinite; }

        /* ===== DASHBOARD STYLES ===== */
        .stat-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 20px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            transition: all 0.25s;
        }
        .stat-card:hover {
            border-color: rgba(16,185,129,0.2);
            background: rgba(16,185,129,0.03);
            transform: translateY(-2px);
        }
        .stat-card-value {
            font-size: 2rem;
            font-weight: 800;
            line-height: 1;
            background: linear-gradient(135deg, #34d399, #60a5fa);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .stat-card-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #64748b;
        }

        /* Mission cards */
        .mission-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 16px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            gap: 14px;
            transition: all 0.2s;
        }
        .mission-card:hover { border-color: rgba(16,185,129,0.18); background: rgba(16,185,129,0.02); }
        .mission-card.done { opacity: 0.5; }
        .mission-card.done .mission-title { text-decoration: line-through; }
        .mission-card.active { border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.05); }
        .mission-badge {
            min-width: 36px; height: 36px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 16px;
            background: rgba(15,23,42,0.8);
            border: 1px solid rgba(255,255,255,0.06);
        }
        .mission-xp {
            font-size: 10px; font-weight: 800;
            color: #fbbf24;
            background: rgba(251,191,36,0.08);
            border: 1px solid rgba(251,191,36,0.15);
            padding: 2px 8px;
            border-radius: 20px;
            white-space: nowrap;
        }

        /* Points animation popup */
        @keyframes pointsPop {
            0%   { opacity: 0; transform: translateY(0) scale(0.8); }
            30%  { opacity: 1; transform: translateY(-20px) scale(1.1); }
            70%  { opacity: 1; transform: translateY(-35px) scale(1); }
            100% { opacity: 0; transform: translateY(-50px) scale(0.9); }
        }
        .points-popup {
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            font-size: 16px;
            font-weight: 900;
            color: #fbbf24;
            text-shadow: 0 0 20px rgba(251,191,36,0.6);
            animation: pointsPop 1.8s ease-out forwards;
        }

        /* Streak fire badge */
        .streak-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: linear-gradient(135deg, rgba(251,146,60,0.15), rgba(239,68,68,0.10));
            border: 1px solid rgba(251,146,60,0.25);
            border-radius: 20px;
            padding: 4px 12px;
            font-size: 12px;
            font-weight: 800;
            color: #fb923c;
        }

        /* Sidebar points counter */
        .sidebar-points {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 10px;
            background: rgba(251,191,36,0.05);
            border: 1px solid rgba(251,191,36,0.12);
            border-radius: 12px;
            margin-top: 2px;
        }
        .sidebar-points-val {
            font-size: 15px;
            font-weight: 900;
            color: #fbbf24;
            font-variant-numeric: tabular-nums;
            transition: all 0.4s;
        }

        /* Leaderboard row */
        .lb-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.04);
            background: rgba(255,255,255,0.01);
            transition: all 0.2s;
        }
        .lb-row.me { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.05); }
        .lb-row.top1 { border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.04); }
        .lb-rank { font-size: 12px; font-weight: 900; color: #64748b; min-width: 24px; text-align: center; }
        .lb-row.top1 .lb-rank { color: #fbbf24; }
        .lb-name { font-size: 11px; font-weight: 700; color: #cbd5e1; flex: 1; }
        .lb-pts { font-size: 13px; font-weight: 900; color: #34d399; font-variant-numeric: tabular-nums; }

        /* Bug quality bar */
        .bq-bar-wrap { height: 6px; background: rgba(255,255,255,0.06); border-radius: 6px; overflow: hidden; }
        .bq-bar { height: 100%; border-radius: 6px; transition: width 0.4s cubic-bezier(.4,0,.2,1); }

        /* Next mission card on dashboard */
        .next-mission-card {
            background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(96,165,250,0.05) 100%);
            border: 1px solid rgba(16,185,129,0.2);
            border-radius: 20px;
            padding: 20px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }
        .next-mission-btn {
            background: linear-gradient(135deg, #10b981, #0ea5e9);
            color: white;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 10px 20px;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
        }
        .next-mission-btn:hover { opacity: 0.85; transform: scale(1.04); }

        /* Weekly activity chart bars */
        .week-bar-wrap { display: flex; align-items: flex-end; gap: 4px; height: 50px; }
        .week-bar {
            flex: 1;
            border-radius: 4px 4px 0 0;
            background: rgba(16,185,129,0.15);
            border: 1px solid rgba(16,185,129,0.12);
            transition: all 0.4s;
            min-height: 4px;
        }
        .week-bar.today { background: rgba(16,185,129,0.5); border-color: rgba(16,185,129,0.4); }
        .week-bar-label { font-size: 9px; color: #475569; font-weight: 700; text-align: center; margin-top: 4px; }

        /* Print Report CSS */
        @media print {
            body > *:not(#printReportContainer) { display: none !important; }
            #printReportContainer { display: block !important; }
            .print-section { page-break-inside: avoid; }
        }

        /* ===== STAGE NAVIGATION ===== */
        .stage-group { margin-top: 4px; }
        .stage-label {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px 2px 6px;
            font-size: 9px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.10em;
            color: #475569;
            margin-top: 8px;
            margin-bottom: 2px;
        }
        .stage-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
        .stage-progress-pill {
            margin-left: auto;
            font-size: 8px;
            font-weight: 900;
            padding: 1px 6px;
            border-radius: 20px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.07);
            color: #64748b;
        }
        .stage-progress-pill.complete {
            background: rgba(16,185,129,0.1);
            border-color: rgba(16,185,129,0.2);
            color: #34d399;
        }

        /* ===== SKILL PROGRESS BARS ===== */
        .skill-bar-track { height: 6px; background: rgba(255,255,255,0.05); border-radius: 6px; overflow: hidden; }
        .skill-bar-fill { height: 100%; border-radius: 6px; transition: width 0.8s cubic-bezier(.4,0,.2,1); }

        /* ===== LEARNING PATH TRACK ===== */
        .lp-stage {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 8px;
            flex: 1;
            position: relative;
            cursor: pointer;
        }
        .lp-stage-icon {
            width: 48px; height: 48px;
            border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px;
            border: 2px solid rgba(255,255,255,0.08);
            background: rgba(15,23,42,0.8);
            transition: all 0.3s;
            position: relative;
            z-index: 1;
        }
        .lp-stage.active .lp-stage-icon {
            border-color: #10b981;
            background: rgba(16,185,129,0.12);
            box-shadow: 0 0 20px rgba(16,185,129,0.25);
        }
        .lp-stage.done .lp-stage-icon {
            border-color: rgba(16,185,129,0.4);
            background: rgba(16,185,129,0.08);
        }
        .lp-stage.locked .lp-stage-icon { opacity: 0.4; filter: grayscale(1); }
        .lp-stage-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; }
        .lp-stage.active .lp-stage-label { color: #34d399; }
        .lp-stage.done .lp-stage-label { color: #64748b; }
        .lp-connector { flex: 1; height: 2px; background: rgba(255,255,255,0.06); margin-bottom: 28px; align-self: center; }
        .lp-connector.done { background: rgba(16,185,129,0.3); }
        @keyframes stagePulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
            50% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
        }
        .lp-stage.active .lp-stage-icon { animation: stagePulse 2s ease-in-out infinite; }

        /* ===== TODAY'S TASKS CARD ===== */
        .today-task-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 14px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.05);
            background: rgba(255,255,255,0.01);
            transition: all 0.2s;
        }
        .today-task-item:hover { border-color: rgba(16,185,129,0.15); background: rgba(16,185,129,0.02); }
        .today-task-num {
            width: 20px; height: 20px;
            border-radius: 50%;
            background: rgba(16,185,129,0.1);
            border: 1px solid rgba(16,185,129,0.2);
            color: #34d399;
            font-size: 10px;
            font-weight: 900;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .today-task-go {
            margin-left: auto;
            font-size: 9px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #10b981;
            padding: 4px 10px;
            border: 1px solid rgba(16,185,129,0.2);
            border-radius: 8px;
            background: rgba(16,185,129,0.05);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        .today-task-go:hover { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.35); }

        /* ===== FLOATING MISSION PANEL ===== */
        #floatingMission {
            position: fixed;
            bottom: 90px;
            right: 24px;
            z-index: 999;
            max-width: 300px;
            transition: all 0.3s cubic-bezier(.4,0,.2,1);
        }
        #floatingMission.hidden-panel { opacity: 0; pointer-events: none; transform: translateY(16px); }
        .floating-mission-card {
            background: rgba(10,15,28,0.95);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(16,185,129,0.25);
            border-radius: 18px;
            padding: 14px 16px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(16,185,129,0.08);
        }
        .floating-mission-expanded { display: none; }
        .floating-mission-card.is-expanded .floating-mission-expanded { display: block; }

        /* ===== ONBOARDING TOUR ===== */
        #onboardingOverlay {
            position: fixed;
            inset: 0;
            z-index: 10000;
            background: rgba(2,6,23,0.85);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #onboardingOverlay.hidden { display: none; }
        .onboarding-box {
            background: rgba(15,23,42,0.97);
            border: 1px solid rgba(16,185,129,0.3);
            border-radius: 24px;
            padding: 36px 40px;
            max-width: 480px;
            width: 90%;
            text-align: center;
            box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 40px rgba(16,185,129,0.08);
            position: relative;
        }
        .onboarding-step-dots {
            display: flex;
            gap: 6px;
            justify-content: center;
            margin-top: 24px;
        }
        .onboarding-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            transition: all 0.3s;
        }
        .onboarding-dot.active {
            background: #10b981;
            width: 24px;
            border-radius: 4px;
        }

        /* ===== BUG TASK CARDS (Sandbox) ===== */
        .bug-task-card {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 14px;
            padding: 12px 14px;
            transition: all 0.2s;
            cursor: default;
        }
        .bug-task-card.found {
            border-color: rgba(16,185,129,0.3);
            background: rgba(16,185,129,0.04);
        }
        .bug-task-card:hover { border-color: rgba(255,255,255,0.1); }
        .bug-task-card.found:hover { border-color: rgba(16,185,129,0.4); }
        .bug-difficulty-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

        /* ===== MODULE TASK PANEL ===== */
        .module-tasks-panel {
            background: linear-gradient(135deg, rgba(16,185,129,0.04) 0%, rgba(96,165,250,0.02) 100%);
            border: 1px solid rgba(16,185,129,0.12);
            border-radius: 16px;
            overflow: hidden;
        }
        .module-tasks-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            cursor: pointer;
            user-select: none;
        }
        .module-tasks-header:hover { background: rgba(16,185,129,0.04); }
        .module-tasks-body { border-top: 1px solid rgba(16,185,129,0.08); }
        .module-task-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            font-size: 11px;
        }
        .module-task-item:last-child { border-bottom: none; }
        .module-task-check {
            width: 18px; height: 18px;
            border-radius: 5px;
            border: 1.5px solid rgba(255,255,255,0.15);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .module-task-check.done {
            background: #10b981;
            border-color: #10b981;
        }

        /* ===== BUG WIZARD STEPS ===== */
        .wizard-step-group { display: none; }
        .wizard-step-group.active { display: block; }
        .wizard-progress-bar {
            display: flex;
            gap: 4px;
            margin-bottom: 20px;
        }
        .wizard-progress-step {
            flex: 1;
            height: 4px;
            border-radius: 4px;
            background: rgba(255,255,255,0.07);
            transition: background 0.3s;
        }
        .wizard-progress-step.active { background: #10b981; }
        .wizard-progress-step.done { background: rgba(16,185,129,0.4); }

        /* ===== HELP DRAWER ===== */
        #helpDrawer {
            position: fixed;
            top: 0;
            right: 0;
            height: 100vh;
            width: 320px;
            z-index: 900;
            background: rgba(10,15,28,0.97);
            backdrop-filter: blur(20px);
            border-left: 1px solid rgba(16,185,129,0.15);
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(.4,0,.2,1);
            overflow-y: auto;
            padding: 24px 20px;
        }
        #helpDrawer.open { transform: translateX(0); }

        /* =========================================================
           LIGHT MODE OVERRIDES (Practice Portal)
           ========================================================= */
        body.light-mode {
            background: #f1f5f9 !important;
            color: #0f172a !important;
        }

        /* --- Surfaces: dark slate/black backgrounds -> light --- */
        body.light-mode .bg-slate-950,
        body.light-mode .bg-slate-950\/95,
        body.light-mode .bg-slate-950\/80,
        body.light-mode .bg-slate-950\/70,
        body.light-mode .bg-slate-950\/60,
        body.light-mode .bg-slate-950\/50,
        body.light-mode .bg-slate-950\/45,
        body.light-mode .bg-slate-950\/40,
        body.light-mode .bg-slate-950\/30,
        body.light-mode .bg-slate-950\/20,
        body.light-mode .bg-black,
        body.light-mode .bg-black\/45 {
            background-color: #ffffff !important;
        }
        body.light-mode .bg-slate-900,
        body.light-mode .bg-slate-900\/90,
        body.light-mode .bg-slate-900\/60,
        body.light-mode .bg-slate-900\/50,
        body.light-mode .bg-slate-900\/40,
        body.light-mode .bg-slate-900\/30,
        body.light-mode .bg-slate-900\/10,
        body.light-mode .bg-slate-800,
        body.light-mode .bg-slate-700 {
            background-color: #f1f5f9 !important;
        }
        body.light-mode aside,
        body.light-mode main { background: #f1f5f9 !important; }
        body.light-mode aside { border-color: rgba(0,0,0,0.08) !important; }

        /* --- Borders --- */
        body.light-mode .border-white\/5,
        body.light-mode .border-white\/10 {
            border-color: rgba(0,0,0,0.10) !important;
        }
        body.light-mode .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important; }

        /* --- Text --- */
        body.light-mode .text-white { color: #0f172a !important; }
        body.light-mode .text-slate-200,
        body.light-mode .text-slate-300,
        body.light-mode .text-slate-350,
        body.light-mode .text-slate-355,
        body.light-mode .text-slate-360,
        body.light-mode .text-slate-370,
        body.light-mode .text-slate-380 { color: #1e293b !important; }
        body.light-mode .text-slate-400,
        body.light-mode .text-slate-450,
        body.light-mode .text-slate-500,
        body.light-mode .text-slate-600,
        body.light-mode .text-slate-650 { color: #475569 !important; }

        /* Re-assert white text ONLY on SOLID coloured/gradient buttons (not translucent chips) */
        body.light-mode .bg-gradient-to-r,
        body.light-mode .bg-gradient-to-r *,
        body.light-mode .bg-gradient-to-tr,
        body.light-mode .bg-gradient-to-tr *,
        body.light-mode .bg-emerald-600,
        body.light-mode .bg-emerald-600 *,
        body.light-mode .bg-emerald-500,
        body.light-mode .bg-emerald-500 *,
        body.light-mode .next-mission-btn,
        body.light-mode .next-mission-btn * { color: #ffffff !important; }

        /* Translucent emerald chips/buttons: use darker emerald text for contrast on light bg */
        body.light-mode .text-emerald-400,
        body.light-mode .text-emerald-450,
        body.light-mode .text-emerald-300 { color: #047857 !important; }
        /* But keep white where the surface is a solid emerald/gradient button */
        body.light-mode .bg-emerald-600 .text-emerald-400,
        body.light-mode .bg-emerald-500 .text-emerald-400,
        body.light-mode .bg-gradient-to-r .text-emerald-400 { color: #ffffff !important; }
        /* Darker accent text for readable chips/labels on light surfaces */
        body.light-mode .text-rose-400, body.light-mode .text-rose-450, body.light-mode .text-rose-500 { color: #e11d48 !important; }
        body.light-mode .text-amber-400, body.light-mode .text-amber-300 { color: #b45309 !important; }
        body.light-mode .text-blue-400 { color: #2563eb !important; }
        body.light-mode .text-purple-400 { color: #7c3aed !important; }
        /* keep dark toasts' light text intact (override the above inside them) */
        body.light-mode #bugTrigToast .text-amber-300, body.light-mode #hintToast .text-amber-400 { color: #fbbf24 !important; }

        /* Slack chat panel — LIGHT in light mode, dark in dark mode */
        body.light-mode #slackChatPanel { background-color: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 24px 64px rgba(15,23,42,0.18) !important; }
        body.light-mode #slackChatPanel [class*="bg-slate-9"] { background-color: #f1f5f9 !important; }   /* sidebar + header */
        body.light-mode #slackChatPanel .grow.flex.flex-col { background-color: #ffffff !important; }       /* chat pane */
        body.light-mode #slackChatPanel .text-white,
        body.light-mode #slackChatPanel .text-slate-100,
        body.light-mode #slackChatPanel .text-slate-200 { color: #0f172a !important; }
        body.light-mode #slackChatPanel .text-slate-300 { color: #334155 !important; }
        body.light-mode #slackChatPanel .text-slate-400 { color: #475569 !important; }
        body.light-mode #slackChatPanel .text-slate-500 { color: #64748b !important; }
        body.light-mode #slackChatPanel input { background-color: #ffffff !important; border-color: rgba(0,0,0,0.15) !important; color: #0f172a !important; }
        body.light-mode #slackChatPanel input::placeholder { color: #94a3b8 !important; }
        body.light-mode #slackChatPanel .border-white\/5,
        body.light-mode #slackChatPanel .border-r { border-color: rgba(0,0,0,0.08) !important; }

        /* Slack chat bubbles */
        .slk-bubble { border-radius: 16px; padding: 9px 13px; font-size: 12.5px; line-height: 1.5; font-weight: 500; }
        .slk-team { background: #1e293b; color: #e2e8f0; border-top-left-radius: 4px; }
        body.light-mode #slackChatPanel .slk-team { background: #f1f5f9 !important; color: #1e293b !important; border: 1px solid rgba(0,0,0,0.07) !important; }
        .slk-bot  { background: rgba(16,185,129,0.16); color: #a7f3d0; border: 1px solid rgba(16,185,129,0.30); border-top-left-radius: 4px; }
        body.light-mode #slackChatPanel .slk-bot { background: #ecfdf5 !important; color: #047857 !important; border-color: rgba(16,185,129,0.3) !important; }
        .slk-me   { background: linear-gradient(135deg, #7c3aed, #6366f1); color: #ffffff; border-top-right-radius: 4px; }
        body.light-mode #slackChatPanel .slk-me { color: #ffffff !important; }

        /* --- Inputs --- */
        body.light-mode .input-field,
        body.light-mode input[type="text"],
        body.light-mode input[type="email"],
        body.light-mode input[type="password"],
        body.light-mode select,
        body.light-mode textarea {
            background-color: #ffffff !important;
            border-color: rgba(0,0,0,0.15) !important;
            color: #0f172a !important;
        }
        body.light-mode input::placeholder,
        body.light-mode textarea::placeholder { color: #94a3b8 !important; }

        /* --- Custom components --- */
        body.light-mode .stat-card { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; }
        body.light-mode .stat-card:hover { background: rgba(16,185,129,0.05) !important; }
        body.light-mode .stat-card-label { color: #64748b !important; }

        body.light-mode .mission-card { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; }
        body.light-mode .mission-card.active { background: rgba(16,185,129,0.07) !important; }
        body.light-mode .mission-badge { background: #f1f5f9 !important; border-color: rgba(0,0,0,0.08) !important; }

        body.light-mode .stage-label { color: #64748b !important; }
        body.light-mode .stage-progress-pill { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.08) !important; color: #475569 !important; }

        body.light-mode .lp-stage-icon { background: #ffffff !important; border-color: rgba(0,0,0,0.12) !important; }
        body.light-mode .lp-stage.active .lp-stage-icon { background: rgba(16,185,129,0.1) !important; border-color: #10b981 !important; }
        body.light-mode .lp-stage-label { color: #64748b !important; }
        body.light-mode .lp-connector { background: rgba(0,0,0,0.1) !important; }

        body.light-mode .today-task-item { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; }
        body.light-mode .skill-bar-track { background: rgba(0,0,0,0.08) !important; }

        body.light-mode .bug-task-card { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; }
        body.light-mode .bug-task-card.found { background: rgba(16,185,129,0.06) !important; border-color: rgba(16,185,129,0.3) !important; }

        body.light-mode .module-tasks-panel { background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(96,165,250,0.04)) !important; border-color: rgba(16,185,129,0.2) !important; }
        body.light-mode .module-task-item { border-color: rgba(0,0,0,0.06) !important; }
        body.light-mode .module-task-check { border-color: rgba(0,0,0,0.2) !important; }

        body.light-mode .floating-mission-card { background: rgba(255,255,255,0.97) !important; border-color: rgba(16,185,129,0.3) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; }
        body.light-mode .onboarding-box { background: #ffffff !important; border-color: rgba(16,185,129,0.3) !important; }
        body.light-mode #onboardingOverlay { background: rgba(241,245,249,0.85) !important; }
        body.light-mode #helpDrawer { background: rgba(255,255,255,0.98) !important; border-left-color: rgba(16,185,129,0.2) !important; }

        /* --- Jira ticket modal: cleaner light-mode surfaces --- */
        body.light-mode .jira-modal { background: #ffffff !important; box-shadow: 0 24px 64px rgba(15,23,42,0.18) !important; border-color: rgba(0,0,0,0.08) !important; }
        body.light-mode .jira-topbar { background: #f8fafc !important; border-color: rgba(0,0,0,0.07) !important; }
        body.light-mode .jira-sidebar { background: #f1f5f9 !important; border-color: rgba(0,0,0,0.07) !important; }
        body.light-mode .jira-desc-box { background: #f8fafc !important; border-color: rgba(0,0,0,0.08) !important; }
        body.light-mode .jira-exp-box { background: #eff6ff !important; border-color: rgba(59,130,246,0.30) !important; }
        body.light-mode .jira-act-box { background: #fffbeb !important; border-color: rgba(245,158,11,0.30) !important; }
        body.light-mode #ticketDetailsModal .border-t,
        body.light-mode #ticketDetailsModal .border-b { border-color: rgba(0,0,0,0.07) !important; }
        /* footer subtle bg */
        body.light-mode #ticketDetailsModal .bg-slate-900\/20 { background-color: #f8fafc !important; }
        /* Dark toasts keep dark bg in light mode → re-assert light text inside them */
        body.light-mode #bugTrigToast, body.light-mode #hintToast { background: rgba(15,23,42,0.98) !important; }
        body.light-mode #bugTrigToast .text-slate-300,
        body.light-mode #bugTrigToast .text-slate-400,
        body.light-mode #hintToast .text-slate-300,
        body.light-mode #hintToast .text-slate-200 { color: #cbd5e1 !important; }
        body.light-mode #bugTrigToast b, body.light-mode #hintToast b { color: #ffffff !important; }

        body.light-mode .next-mission-card { background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(96,165,250,0.06)) !important; border-color: rgba(16,185,129,0.25) !important; }
        /* Gradient-clipped student name: darken so it stays readable on light banner */
        body.light-mode #dashboardStudentName {
            background-image: linear-gradient(to right, #047857, #0f766e) !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
        }
        body.light-mode .lb-row { background: #ffffff !important; border-color: rgba(0,0,0,0.06) !important; }
        body.light-mode .lb-name { color: #334155 !important; }
        body.light-mode .sidebar-points { background: rgba(251,191,36,0.08) !important; border-color: rgba(251,191,36,0.25) !important; }

        /* Kanban / terminal / code surfaces stay readable */
        body.light-mode .kanban-empty { border-color: rgba(0,0,0,0.1) !important; color: rgba(0,0,0,0.35) !important; }
        body.light-mode pre,
        body.light-mode .terminal-log { background: #0f172a !important; color: #e2e8f0 !important; }
        body.light-mode pre .text-white,
        body.light-mode pre .text-slate-300,
        body.light-mode .terminal-log .text-white { color: #e2e8f0 !important; }

        /* Scrollbars */
        body.light-mode ::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); }
        body.light-mode ::-webkit-scrollbar-thumb { background: rgba(16,185,129,0.3); }

        /* ===== DevTools panel stays a DARK terminal even in light mode ===== */
        body.light-mode #devtoolsPanel { background-color: #020617 !important; }
        body.light-mode #devtoolsPanel .bg-slate-950,
        body.light-mode #devtoolsPanel .bg-black { background-color: #020617 !important; }
        body.light-mode #devtoolsPanel .bg-slate-900,
        body.light-mode #devtoolsPanel .bg-slate-800 { background-color: #0f172a !important; }
        body.light-mode #devtoolsPanel .text-emerald-400,
        body.light-mode #devtoolsPanel .text-emerald-450,
        body.light-mode #devtoolsPanel .text-emerald-300 { color: #34d399 !important; }
        body.light-mode #devtoolsPanel .text-amber-400,
        body.light-mode #devtoolsPanel .text-amber-300 { color: #fbbf24 !important; }
        body.light-mode #devtoolsPanel .text-rose-400,
        body.light-mode #devtoolsPanel .text-rose-450,
        body.light-mode #devtoolsPanel .text-rose-500 { color: #fb7185 !important; }
        body.light-mode #devtoolsPanel .text-sky-400,
        body.light-mode #devtoolsPanel .text-sky-300,
        body.light-mode #devtoolsPanel .text-sky-300\/80 { color: #7dd3fc !important; }
        body.light-mode #devtoolsPanel .text-slate-200,
        body.light-mode #devtoolsPanel .text-slate-300,
        body.light-mode #devtoolsPanel .text-slate-350 { color: #cbd5e1 !important; }
        body.light-mode #devtoolsPanel .text-slate-400,
        body.light-mode #devtoolsPanel .text-slate-500 { color: #94a3b8 !important; }
        body.light-mode #devtoolsPanel .text-white { color: #ffffff !important; }
        body.light-mode #devtoolsPanel .border-white\/10,
        body.light-mode #devtoolsPanel .border-white\/5 { border-color: rgba(255,255,255,0.08) !important; }

        /* ===== Accessibility: visible keyboard focus ring ===== */
        :focus-visible {
            outline: 2px solid #34d399;
            outline-offset: 2px;
            border-radius: 6px;
        }
        button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
            outline: 2px solid #34d399;
            outline-offset: 2px;
        }

        /* ===== Toasts keep light text on their dark background in light mode ===== */
        body.light-mode #toastContainer .text-emerald-300 { color: #6ee7b7 !important; }
        body.light-mode #toastContainer .text-rose-300 { color: #fda4af !important; }
        body.light-mode #toastContainer .text-amber-300 { color: #fcd34d !important; }
        body.light-mode #toastContainer .text-sky-300 { color: #7dd3fc !important; }

        /* ===== Light mode: sky-tinted info text must stay readable (dark) in content ===== */
        body.light-mode .text-sky-300,
        body.light-mode .text-sky-400 { color: #0369a1 !important; }

        /* ===== Light mode: glass surfaces become solid light (fixes washed-out modals) ===== */
        body.light-mode .glass-card {
            background: rgba(255, 255, 255, 0.92) !important;
            border-color: rgba(15, 23, 42, 0.08) !important;
        }
        body.light-mode .glass-card-hover:hover {
            background: #ffffff !important;
            border-color: rgba(16, 185, 129, 0.35) !important;
        }

        /* ===== Readable body font for long-form content (wiki / knowledge / docs) ===== */
        #wikiContent, #knowledgeContent {
            font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            font-size: 13.5px;
            line-height: 1.75;
            letter-spacing: 0.1px;
        }
        #wikiContent h4, #knowledgeContent h4 { font-size: 14px; letter-spacing: 0; }
        #wikiContent li, #knowledgeContent li { margin-bottom: 5px; }
        #wikiContent code, #knowledgeContent code {
            font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
            font-size: 12px; background: rgba(148,163,184,0.15);
            padding: 1px 5px; border-radius: 5px;
        }