{"id":244,"date":"2026-08-31T09:17:35","date_gmt":"2026-08-31T09:17:35","guid":{"rendered":"https:\/\/massgraduates.com\/?page_id=244"},"modified":"2026-09-01T03:52:01","modified_gmt":"2026-09-01T03:52:01","slug":"cuet-unit-test-launchpad-360","status":"publish","type":"page","link":"https:\/\/massgraduates.com\/index.php\/cuet-unit-test-launchpad-360\/","title":{"rendered":"CUET Unit Test Launchpad 360"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes\">\n    <title>CUET Launchpad 360<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@400;500;600;700;800&amp;family=Inter:wght@400;500;600;700&amp;display=swap\" rel=\"stylesheet\">`\n <div class=\"lp360-motivation\">\n    <style>\n        \/* ============================================================\n           DESIGN SYSTEM \u2013 Mobile-first, fully responsive\n           ============================================================ *\/\n        #lp360-root {\n            --lp-brand: #E85D3A;\n            --lp-brand-light: #FF7A3D;\n            --lp-brand-dark: #C94A2A;\n            --lp-gold: #FFC542;\n            --lp-cyan: #33C3F0;\n            --lp-purple: #8B5CF6;\n            --lp-green: #22C55E;\n            --lp-red: #EF4444;\n            --lp-orange2: #F97316;\n            --lp-teal: #14B8A6;\n            --lp-yellow: #FACC15;\n            --lp-purple2: #A78BFA;\n            --lp-amber: #F59E0B;\n            --lp-gradient-brand: linear-gradient(135deg, #FF4B2B 0%, #FF416C 100%);\n            --lp-gradient-cyan: linear-gradient(135deg, #00C6FF 0%, #0072FF 100%);\n            --lp-gradient-purple: linear-gradient(135deg, #B14BF4 0%, #4A00E0 100%);\n            --lp-gradient-green: linear-gradient(135deg, #11998E 0%, #38EF7D 100%);\n            --lp-gradient-gold: linear-gradient(135deg, #F6D365 0%, #FDA085 100%);\n            --lp-brand-glow: 0 8px 32px rgba(255, 65, 108, 0.4);\n            --lp-gold-glow: 0 8px 32px rgba(253, 160, 133, 0.45);\n            --lp-cyan-glow: 0 8px 32px rgba(0, 198, 255, 0.4);\n            --lp-bg-brand-soft: #271410;\n            --lp-bg-cyan-soft: #082F49;\n            --lp-bg-purple-soft: #2E1065;\n            --lp-bg-green-soft: #022C22;\n            --lp-bg-amber-soft: #451A03;\n            --lp-bg-red-soft: #450A0A;\n            --lp-bg-teal-soft: #134E4A;\n            --lp-cyan-deep: #0072FF;\n            --lp-purple-deep: #7C3AED;\n            --lp-red-deep: #E11D48;\n            --lp-teal-deep: #0F766E;\n            --lp-dark-1: #0d1024;\n            --lp-dark-2: #1b1240;\n            --lp-text-dark: #0b0e1a;\n            --lp-text-gray: #5b6478;\n            --lp-text-gray-light: #8e96a8;\n            --lp-bg-canvas: #f4f6fa;\n            --lp-card-bg: #ffffff;\n            --lp-border-subtle: #e9ecf2;\n            --lp-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);\n            --lp-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.07);\n            --lp-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.09);\n            --lp-radius-lg: 20px;\n            --lp-radius-md: 14px;\n            --lp-radius-sm: 10px;\n            --lp-radius-xs: 6px;\n            --lp-space-1: 4px;\n            --lp-space-2: 8px;\n            --lp-space-3: 12px;\n            --lp-space-4: 16px;\n            --lp-space-5: 20px;\n            --lp-space-6: 24px;\n            --lp-space-7: 32px;\n            --lp-space-8: 40px;\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            color: var(--lp-text-dark);\n            box-sizing: border-box;\n            max-width: 100%;\n        }\n\n        #lp360-root *,\n        #lp360-root *::before,\n        #lp360-root *::after {\n            box-sizing: border-box;\n            max-width: 100%;\n        }\n\n        #lp360-root .lp360-font-display,\n        #lp360-root .lp360-page-title,\n        #lp360-root .lp360-section-title h2,\n        #lp360-root .lp360-gauge-value,\n        #lp360-root .lp360-hero-metric-value,\n        #lp360-root .lp360-time-card-value,\n        #lp360-root .lp360-breakdown-total,\n        #lp360-root .lp360-breakdown-list li b,\n        #lp360-root .lp360-dm-summary-value {\n            font-family: 'Sora', 'Inter', sans-serif;\n        }\n\n        \/* ---- SHELL ---- *\/\n        .lp360-shell {\n            max-width: 1100px;\n            margin: 0 auto;\n            padding: var(--lp-space-4);\n            background: var(--lp-bg-canvas);\n            border-radius: var(--lp-radius-lg);\n            overflow-x: hidden;\n        }\n\n        @media (min-width: 768px) {\n            .lp360-shell {\n                padding: var(--lp-space-6);\n            }\n        }\n\n        \/* ---- HEADER ---- *\/\n        .lp360-page-header {\n            text-align: center;\n            margin-bottom: var(--lp-space-2);\n            position: sticky;\n            top: 0;\n            z-index: 100;\n            background: var(--lp-bg-canvas);\n            padding: var(--lp-space-2) 0;\n        }\n\n        .lp360-page-title {\n            font-size: clamp(24px, 4.5vw, 40px);\n            font-weight: 800;\n            letter-spacing: -0.5px;\n            margin: 0;\n            color: var(--lp-text-dark);\n        }\n\n        .lp360-page-title span {\n            background: linear-gradient(90deg, var(--lp-brand-light), var(--lp-gold));\n            -webkit-background-clip: text;\n            background-clip: text;\n            color: transparent;\n        }\n\n        \/* ---- TABS (responsive wrap) ---- *\/\n        .lp360-tabs {\n            display: flex;\n            justify-content: center;\n            gap: var(--lp-space-1);\n            margin-bottom: var(--lp-space-3);\n            flex-wrap: wrap;\n            position: sticky;\n            top: 60px;\n            z-index: 99;\n            background: var(--lp-bg-canvas);\n            padding: var(--lp-space-1) 0 var(--lp-space-2) 0;\n            border-bottom: 1px solid var(--lp-border-subtle);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-tabs {\n                top: 70px;\n                gap: var(--lp-space-2);\n                padding: var(--lp-space-2) 0 var(--lp-space-3) 0;\n            }\n        }\n\n        @media (min-width: 1024px) {\n            .lp360-tabs {\n                top: 80px;\n                gap: var(--lp-space-2);\n            }\n        }\n\n        .lp360-tab-btn {\n            display: inline-flex;\n            align-items: center;\n            gap: var(--lp-space-1);\n            padding: 6px 12px;\n            border-radius: 999px;\n            border: 1.5px solid var(--lp-border-subtle);\n            background: #fff;\n            color: var(--lp-text-gray);\n            font-weight: 700;\n            font-size: clamp(10px, 1.4vw, 13px);\n            cursor: pointer;\n            transition: all 0.2s ease;\n            white-space: nowrap;\n            font-family: 'Inter', sans-serif;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-tab-btn {\n                padding: 8px 18px;\n                font-size: 13px;\n                gap: var(--lp-space-2);\n            }\n        }\n\n        .lp360-tab-btn .lp360-tab-icon {\n            width: 14px;\n            height: 14px;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-tab-btn .lp360-tab-icon {\n                width: 16px;\n                height: 16px;\n            }\n        }\n\n        .lp360-tab-btn:hover {\n            border-color: var(--lp-brand-light);\n            color: var(--lp-brand-light);\n            transform: translateY(-1px);\n        }\n\n        .lp360-tab-btn.active {\n            background: linear-gradient(90deg, var(--lp-brand-light), var(--lp-gold));\n            border-color: transparent;\n            color: #fff;\n            box-shadow: 0 4px 14px rgba(232, 93, 58, 0.3);\n        }\n\n        \/* ---- PROGRESS BAR ---- *\/\n        .lp360-progress-bar {\n            position: sticky;\n            top: 102px;\n            z-index: 98;\n            height: 3px;\n            background: var(--lp-border-subtle);\n            border-radius: 4px;\n            margin-bottom: var(--lp-space-3);\n            overflow: hidden;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-progress-bar {\n                top: 118px;\n            }\n        }\n\n        @media (min-width: 1024px) {\n            .lp360-progress-bar {\n                top: 128px;\n            }\n        }\n\n        .lp360-progress-bar-fill {\n            height: 100%;\n            width: 0%;\n            border-radius: 4px;\n            background: linear-gradient(90deg, var(--lp-brand-light), var(--lp-gold));\n            transition: width 0.1s ease;\n        }\n\n        \/* ---- SECTION CARDS ---- *\/\n        .lp360-section-card {\n            background: var(--lp-card-bg);\n            border-radius: var(--lp-radius-md);\n            box-shadow: var(--lp-shadow-sm);\n            border: 1px solid var(--lp-border-subtle);\n            padding: var(--lp-space-3);\n            margin-bottom: var(--lp-space-4);\n            overflow: hidden;\n            transition: box-shadow 0.25s ease, opacity 0.6s ease, transform 0.6s ease;\n            opacity: 0;\n            transform: translateY(40px);\n            scroll-margin-top: 140px;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-section-card {\n                padding: var(--lp-space-4) var(--lp-space-5) var(--lp-space-5);\n                border-radius: var(--lp-radius-lg);\n                margin-bottom: var(--lp-space-6);\n                scroll-margin-top: 150px;\n            }\n        }\n\n        .lp360-section-card.visible {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        .lp360-section-card:hover {\n            box-shadow: var(--lp-shadow-md);\n        }\n\n        .lp360-section-title {\n            margin: 0 0 var(--lp-space-3);\n        }\n\n        .lp360-section-title h2 {\n            font-size: clamp(18px, 2.8vw, 22px);\n            font-weight: 800;\n            margin: 0 0 4px;\n            color: var(--lp-text-dark);\n            letter-spacing: -0.3px;\n        }\n\n        .lp360-section-title h2 span {\n            color: var(--lp-brand-light);\n        }\n\n        .lp360-underline {\n            display: block;\n            width: 36px;\n            height: 4px;\n            border-radius: 4px;\n            background: linear-gradient(90deg, var(--lp-brand-light), var(--lp-gold));\n        }\n\n        .lp360-section-description {\n            margin: 12px 0 16px 0;\n            padding: 12px 18px;\n            background: #fcf8f3;\n            border-radius: var(--lp-radius-sm);\n            border-left: 4px solid var(--lp-brand-light);\n            font-size: clamp(11px, 1.4vw, 12.5px);\n            line-height: 1.6;\n            color: #3d3f4b;\n            font-weight: 500;\n            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);\n        }\n\n        \/* ---- HERO CARD ---- *\/\n        .lp360-hero-card {\n            background: linear-gradient(135deg, var(--lp-dark-1) 40%, var(--lp-dark-2) 100%);\n            box-shadow: var(--lp-brand-glow);\n            color: #ffffff;\n            border-radius: var(--lp-radius-md);\n            padding: var(--lp-space-3);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: var(--lp-space-3);\n            box-shadow: 0 8px 24px rgba(13, 16, 36, 0.25);\n            margin: 0;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-hero-card {\n                padding: var(--lp-space-4) var(--lp-space-5);\n                flex-direction: row;\n                flex-wrap: wrap;\n                justify-content: center;\n            }\n        }\n\n        @media (min-width: 900px) {\n            .lp360-hero-card {\n                display: grid;\n                grid-template-columns: 1fr auto 1fr auto 1fr;\n                align-items: center;\n                gap: var(--lp-space-3);\n                flex-wrap: nowrap;\n            }\n        }\n\n        .lp360-hero-divider {\n            width: 60%;\n            max-width: 120px;\n            height: 1px;\n            background: rgba(255, 255, 255, 0.1);\n        }\n\n        @media (min-width: 900px) {\n            .lp360-hero-divider {\n                width: 1px;\n                height: 100px;\n            }\n        }\n\n        .lp360-hero-gauge {\n            display: flex;\n            justify-content: center;\n            width: 100%;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-hero-gauge {\n                width: auto;\n            }\n        }\n\n        \/* ---- GAUGE ---- *\/\n        .lp360-gauge-wrap {\n            position: relative;\n            width: clamp(130px, 28vw, 190px);\n            height: clamp(130px, 28vw, 190px);\n            margin: 0 auto;\n        }\n\n        .lp360-gauge-svg {\n            width: 100%;\n            height: 100%;\n            transform: rotate(-125deg);\n            filter: drop-shadow(0 0 20px rgba(255, 122, 61, 0.35));\n        }\n\n        .lp360-gauge-track {\n            fill: none;\n            stroke: rgba(255, 255, 255, 0.08);\n            stroke-width: 12;\n        }\n\n        .lp360-gauge-progress {\n            fill: none;\n            stroke-width: 12;\n            stroke-linecap: round;\n            stroke-dasharray: 691;\n            stroke-dashoffset: 691;\n            transition: stroke-dashoffset 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);\n        }\n\n        .lp360-gauge-center {\n            position: absolute;\n            inset: 0;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n        }\n\n        .lp360-gauge-label {\n            font-size: clamp(8px, 1.4vw, 11px);\n            letter-spacing: 1.5px;\n            color: #cbd5e1;\n            font-weight: 700;\n            text-transform: uppercase;\n            margin-bottom: 4px;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-gauge-label {\n                letter-spacing: 2.5px;\n                margin-bottom: 6px;\n            }\n        }\n\n        .lp360-gauge-value {\n            display: inline-flex;\n            align-items: baseline;\n            font-size: clamp(26px, 5vw, 44px);\n            font-weight: 800;\n            line-height: 1;\n            background: linear-gradient(90deg, var(--lp-gold), var(--lp-brand-light));\n            -webkit-background-clip: text;\n            background-clip: text;\n            color: transparent;\n        }\n\n        .lp360-gauge-value small {\n            font-size: clamp(13px, 2vw, 20px);\n            color: #94a3b8;\n            -webkit-text-fill-color: #94a3b8;\n            font-weight: 600;\n        }\n\n        .lp360-gauge-minibar {\n            width: 55%;\n            max-width: 90px;\n            height: 5px;\n            background: rgba(255, 255, 255, 0.1);\n            border-radius: 6px;\n            margin: 6px auto 0;\n            overflow: hidden;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-gauge-minibar {\n                width: 60%;\n                max-width: 110px;\n                height: 6px;\n                margin: 10px auto 0;\n            }\n        }\n\n        .lp360-gauge-minibar-fill {\n            height: 100%;\n            width: 0%;\n            border-radius: 6px;\n            background: linear-gradient(90deg, var(--lp-teal), var(--lp-cyan));\n            transition: width 1s ease 0.2s;\n        }\n\n        \/* ---- HERO METRICS ---- *\/\n        .lp360-hero-metric {\n            text-align: center;\n            color: #fff;\n            width: 100%;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-hero-metric {\n                width: auto;\n                flex: 1;\n            }\n        }\n\n        .lp360-icon-badge {\n            width: clamp(36px, 7vw, 54px);\n            height: clamp(36px, 7vw, 54px);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 0 auto 6px;\n        }\n\n        .lp360-icon-badge svg {\n            width: clamp(16px, 3.5vw, 26px);\n            height: clamp(16px, 3.5vw, 26px);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-icon-badge {\n                margin: 0 auto 8px;\n            }\n        }\n\n        .lp360-icon-badge--cyan {\n            background: radial-gradient(circle, #1c5f78, #123047);\n            color: var(--lp-cyan);\n            box-shadow: 0 0 0 4px rgba(51, 195, 240, 0.08);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-icon-badge--cyan {\n                box-shadow: 0 0 0 6px rgba(51, 195, 240, 0.08);\n            }\n        }\n\n        .lp360-icon-badge--purple {\n            background: radial-gradient(circle, #4a2f86, #2a1a52);\n            color: var(--lp-purple2);\n            box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-icon-badge--purple {\n                box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.1);\n            }\n        }\n\n        .lp360-hero-metric-label {\n            display: block;\n            font-size: clamp(9px, 1.4vw, 12px);\n            letter-spacing: 1.2px;\n            color: #cbd5e1;\n            font-weight: 700;\n            text-transform: uppercase;\n            margin-bottom: 4px;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-hero-metric-label {\n                letter-spacing: 1.8px;\n                margin-bottom: 8px;\n            }\n        }\n\n        .lp360-hero-metric-value {\n            display: inline-flex;\n            align-items: baseline;\n            justify-content: center;\n            font-size: clamp(18px, 3.6vw, 32px);\n            font-weight: 800;\n            color: var(--lp-cyan);\n            padding: 4px 12px;\n            border-radius: 10px;\n            background: rgba(51, 195, 240, 0.1);\n            box-shadow: inset 0 0 0 1.5px rgba(51, 195, 240, 0.3);\n            min-width: 70px;\n            font-family: 'Sora', 'Inter', sans-serif;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-hero-metric-value {\n                padding: 6px 16px;\n                min-width: 90px;\n                font-size: 26px;\n            }\n        }\n\n        @media (min-width: 900px) {\n            .lp360-hero-metric-value {\n                padding: 8px 20px;\n                min-width: 120px;\n                font-size: 32px;\n            }\n        }\n\n        #lp360-total-attempt {\n            color: #a78bfa;\n            background: rgba(139, 92, 246, 0.15);\n            box-shadow: inset 0 0 0 1.5px rgba(167, 139, 250, 0.35);\n        }\n\n        .lp360-hero-metric-footer {\n            font-size: clamp(10px, 1.2vw, 12px);\n            color: #8b93a7;\n            margin-top: 6px;\n            font-weight: 600;\n        }\n\n        \/* ---- TIME CARDS ---- *\/\n        .lp360-time-cards {\n            display: flex;\n            flex-direction: column;\n            gap: var(--lp-space-2);\n            margin-top: var(--lp-space-3);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-time-cards {\n                flex-direction: row;\n                gap: var(--lp-space-3);\n                margin-top: var(--lp-space-4);\n            }\n        }\n\n        .lp360-time-card {\n            flex: 1;\n            padding: var(--lp-space-3) var(--lp-space-3);\n            text-align: center;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: 2px;\n            background: transparent;\n            border: none;\n            border-radius: var(--lp-radius-md);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-time-card {\n                padding: var(--lp-space-4) var(--lp-space-4);\n            }\n        }\n\n        .lp360-time-card--red {\n            background: #fef2f2;\n            border: 1px solid #fecaca;\n            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.05);\n            color: var(--lp-red);\n        }\n\n        .lp360-time-card--orange {\n            background: #fff7ed;\n            border: 1px solid #fed7aa;\n            box-shadow: 0 4px 12px rgba(249, 115, 22, 0.05);\n            color: var(--lp-orange2);\n        }\n\n        .lp360-time-card--blue {\n            background: #eff6ff;\n            border: 1px solid #bfdbfe;\n            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.05);\n            color: #2563eb;\n        }\n\n        .lp360-icon-badge--red-soft {\n            background: #fbdada;\n            color: var(--lp-red);\n        }\n\n        .lp360-icon-badge--orange-soft {\n            background: #fde3c8;\n            color: var(--lp-orange2);\n        }\n\n        .lp360-icon-badge--blue-soft {\n            background: #d9e8fb;\n            color: #2563eb;\n        }\n\n        .lp360-time-card .lp360-icon-badge {\n            margin: 0 auto 4px;\n            width: clamp(32px, 6vw, 38px);\n            height: clamp(32px, 6vw, 38px);\n            background: #fff;\n            color: currentColor;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n        }\n\n        .lp360-time-card .lp360-icon-badge svg {\n            width: clamp(14px, 2.8vw, 18px);\n            height: clamp(14px, 2.8vw, 18px);\n        }\n\n        .lp360-time-card .lp360-time-card-label {\n            font-size: clamp(9px, 1.3vw, 11px);\n            letter-spacing: 0.6px;\n            font-weight: 700;\n            text-transform: uppercase;\n            line-height: 1.3;\n            color: currentColor;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-time-card .lp360-time-card-label {\n                letter-spacing: 0.8px;\n            }\n        }\n\n        .lp360-time-card .lp360-time-card-value {\n            display: inline-flex;\n            align-items: baseline;\n            gap: 2px;\n            font-size: clamp(18px, 3.2vw, 26px);\n            font-weight: 800;\n            padding: 4px 10px;\n            border-radius: 10px;\n            font-family: 'Sora', 'Inter', sans-serif;\n            color: currentColor;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-time-card .lp360-time-card-value {\n                padding: 4px 14px;\n                font-size: 22px;\n            }\n        }\n\n        @media (min-width: 900px) {\n            .lp360-time-card .lp360-time-card-value {\n                font-size: 26px;\n            }\n        }\n\n        .lp360-time-card-value small {\n            font-size: clamp(10px, 1.4vw, 12px);\n            font-weight: 600;\n            color: currentColor;\n            opacity: 0.7;\n        }\n\n        .lp360-time-card .lp360-mini-rule {\n            display: block;\n            width: 28px;\n            height: 2px;\n            background: currentColor;\n            opacity: 0.2;\n            margin: 4px auto;\n            color: currentColor;\n        }\n\n        .lp360-time-card .lp360-time-card-badge {\n            display: inline-block;\n            padding: 2px 12px;\n            border-radius: 999px;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            font-size: clamp(10px, 1.2vw, 12px);\n            color: currentColor;\n            background: #fff;\n            border: 1px solid currentColor;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-time-card .lp360-time-card-badge {\n                padding: 3px 14px;\n            }\n        }\n\n        \/* ---- BREAKDOWN ---- *\/\n        .lp360-breakdown-unified {\n            background: transparent;\n            border-radius: 0;\n            border: none;\n            padding: 0;\n            margin: var(--lp-space-3) 0 0;\n            display: flex;\n            flex-direction: column;\n            gap: var(--lp-space-2);\n            overflow: hidden;\n            border-top: 1px solid var(--lp-border-subtle);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-breakdown-unified {\n                display: grid;\n                grid-template-columns: 1fr 1fr 1fr;\n                gap: 0;\n                margin: var(--lp-space-4) 0 0;\n            }\n        }\n\n        .lp360-breakdown-col {\n            padding: var(--lp-space-3) var(--lp-space-3);\n            position: relative;\n            background: transparent;\n            color: #ffffff;\n            border-radius: var(--lp-radius-sm);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-breakdown-col {\n                padding: var(--lp-space-3) var(--lp-space-4);\n                border-radius: 0;\n            }\n        }\n\n        .lp360-breakdown-col h3 {\n            color: #ffffff !important;\n        }\n\n        .lp360-breakdown-col .lp360-breakdown-head {\n            color: #ffffff;\n        }\n\n        .lp360-breakdown-col:nth-child(1) {\n            background: var(--lp-bg-green-soft);\n            border-left: 4px solid var(--lp-green);\n        }\n\n        .lp360-breakdown-col:nth-child(2) {\n            background: var(--lp-bg-red-soft);\n            border-left: 4px solid var(--lp-red);\n        }\n\n        .lp360-breakdown-col:nth-child(3) {\n            background: var(--lp-bg-amber-soft);\n            border-left: 4px solid var(--lp-amber);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-breakdown-col+.lp360-breakdown-col {\n                border-left: 1px solid var(--lp-border-subtle);\n            }\n            .lp360-breakdown-col:nth-child(1) {\n                border-left: 4px solid var(--lp-green);\n            }\n            .lp360-breakdown-col:nth-child(2) {\n                border-left: 4px solid var(--lp-red);\n            }\n            .lp360-breakdown-col:nth-child(3) {\n                border-left: 4px solid var(--lp-amber);\n            }\n        }\n\n        .lp360-breakdown-head {\n            display: flex;\n            align-items: center;\n            gap: var(--lp-space-3);\n            margin-bottom: var(--lp-space-3);\n        }\n\n        .lp360-round-icon {\n            width: clamp(32px, 5vw, 38px);\n            height: clamp(32px, 5vw, 38px);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n        }\n\n        .lp360-round-icon svg {\n            width: clamp(14px, 2.4vw, 18px);\n            height: clamp(14px, 2.4vw, 18px);\n        }\n\n        .lp360-round-icon--green {\n            background: var(--lp-green);\n        }\n        .lp360-round-icon--red {\n            background: var(--lp-red);\n        }\n        .lp360-round-icon--orange {\n            background: var(--lp-orange2);\n        }\n\n        .lp360-breakdown-label {\n            font-size: clamp(9px, 1.3vw, 11px);\n            font-weight: 700;\n            letter-spacing: 1px;\n            text-transform: uppercase;\n            color: var(--lp-text-gray);\n            margin-bottom: 2px;\n        }\n\n        .lp360-breakdown-col--green .lp360-breakdown-label {\n            color: var(--lp-green);\n        }\n        .lp360-breakdown-col--red .lp360-breakdown-label {\n            color: var(--lp-red);\n        }\n        .lp360-breakdown-col--orange .lp360-breakdown-label {\n            color: var(--lp-orange2);\n        }\n\n        .lp360-breakdown-total {\n            display: inline-block;\n            font-size: clamp(20px, 3.6vw, 26px);\n            font-weight: 800;\n            padding: 0 10px;\n            border-radius: 8px;\n            font-family: 'Sora', 'Inter', sans-serif;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-breakdown-total {\n                padding: 0 12px;\n            }\n        }\n\n        .lp360-breakdown-col--green .lp360-breakdown-total {\n            color: var(--lp-green);\n            background: rgba(34, 197, 94, 0.1);\n        }\n        .lp360-breakdown-col--red .lp360-breakdown-total {\n            color: var(--lp-red);\n            background: rgba(239, 68, 68, 0.1);\n        }\n        .lp360-breakdown-col--orange .lp360-breakdown-total {\n            color: var(--lp-orange2);\n            background: rgba(249, 115, 22, 0.1);\n        }\n\n        .lp360-breakdown-list {\n            list-style: none;\n            margin: 0;\n            padding: 0;\n        }\n\n        .lp360-breakdown-list li {\n            display: flex;\n            align-items: center;\n            gap: var(--lp-space-2);\n            font-size: clamp(11px, 1.5vw, 13.5px);\n            color: #374151;\n            font-weight: 500;\n            padding: 8px 10px;\n            margin-bottom: 6px;\n            border-radius: var(--lp-radius-sm);\n            background: #f8fafc;\n            border: 1px solid #f1f5f9;\n            transition: all 0.2s ease;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-breakdown-list li {\n                padding: 10px 14px;\n                margin-bottom: 8px;\n                border-radius: var(--lp-radius-md);\n            }\n        }\n\n        .lp360-breakdown-list li:hover {\n            background: #fff;\n            border-color: #e2e8f0;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);\n        }\n\n        .lp360-breakdown-col--green .lp360-breakdown-list li,\n        .lp360-breakdown-col--red .lp360-breakdown-list li,\n        .lp360-breakdown-col--orange .lp360-breakdown-list li {\n            background: rgba(255, 255, 255, 0.05);\n            border: 1px solid rgba(255, 255, 255, 0.1);\n            color: #ffffff;\n        }\n\n        .lp360-breakdown-col--green .lp360-breakdown-list li:hover,\n        .lp360-breakdown-col--red .lp360-breakdown-list li:hover,\n        .lp360-breakdown-col--orange .lp360-breakdown-list li:hover {\n            background: rgba(255, 255, 255, 0.1);\n        }\n\n        .lp360-breakdown-list li:last-child {\n            margin-bottom: 0;\n        }\n\n        .lp360-breakdown-list li b {\n            margin-left: auto;\n            font-weight: 700;\n            color: #ffffff;\n            font-size: clamp(11px, 1.4vw, 14px);\n            background: rgba(255, 255, 255, 0.15);\n            padding: 2px 10px;\n            border-radius: 999px;\n            min-width: 28px;\n            text-align: center;\n            font-family: 'Sora', 'Inter', sans-serif;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-breakdown-list li b {\n                padding: 4px 12px;\n                min-width: 32px;\n            }\n        }\n\n        .lp360-mini-icon {\n            width: clamp(20px, 3.2vw, 24px);\n            height: clamp(20px, 3.2vw, 24px);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n        }\n\n        .lp360-mini-icon svg {\n            width: clamp(10px, 1.6vw, 12px);\n            height: clamp(10px, 1.6vw, 12px);\n        }\n\n        .lp360-breakdown-list li .lp360-mini-icon {\n            background: rgba(255, 255, 255, 0.15);\n            color: #ffffff;\n        }\n\n        .lp360-mini-icon--green {\n            background: #e6f7ec;\n            color: var(--lp-green);\n        }\n        .lp360-mini-icon--red {\n            background: #fdeaea;\n            color: var(--lp-red);\n        }\n        .lp360-mini-icon--orange {\n            background: #fdecd9;\n            color: var(--lp-orange2);\n        }\n\n        \/* ---- DECISION MARKER ---- *\/\n        .lp360-decision-card {\n            background: var(--lp-card-bg);\n            border-radius: var(--lp-radius-md);\n            padding: var(--lp-space-3);\n            box-shadow: var(--lp-shadow-sm);\n            border: 1px solid var(--lp-border-subtle);\n            margin: var(--lp-space-3) 0 0;\n            overflow: hidden;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-decision-card {\n                padding: var(--lp-space-4);\n                border-radius: var(--lp-radius-lg);\n                margin: var(--lp-space-4) 0 0;\n            }\n        }\n\n        .lp360-decision-card .lp360-section-title {\n            margin-bottom: var(--lp-space-3);\n        }\n\n        .lp360-decision-card .lp360-section-title h2 {\n            font-size: clamp(17px, 2.4vw, 20px);\n        }\n\n        .lp360-dm-table-scroll {\n            overflow-x: auto;\n            padding-bottom: 4px;\n            -webkit-overflow-scrolling: touch;\n            scrollbar-width: thin;\n            scrollbar-color: var(--lp-border-subtle) transparent;\n            position: relative;\n            margin: 0 calc(-1 * var(--lp-space-3));\n            padding: 0 var(--lp-space-3);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-dm-table-scroll {\n                margin: 0;\n                padding: 0;\n            }\n        }\n\n        .lp360-dm-table-scroll::-webkit-scrollbar {\n            height: 6px;\n        }\n        .lp360-dm-table-scroll::-webkit-scrollbar-track {\n            background: transparent;\n        }\n        .lp360-dm-table-scroll::-webkit-scrollbar-thumb {\n            background: var(--lp-border-subtle);\n            border-radius: 10px;\n        }\n\n        .lp360-dm-table {\n            width: 100%;\n            border-collapse: separate;\n            border-spacing: 0 4px;\n            table-layout: auto;\n            font-size: clamp(10px, 1.4vw, 13px);\n            min-width: 320px;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-dm-table {\n                min-width: 400px;\n            }\n        }\n\n        .lp360-dm-table thead th {\n            font-size: clamp(8px, 1.2vw, 11px);\n            font-weight: 700;\n            text-align: center;\n            padding: 8px 6px;\n            white-space: nowrap;\n            letter-spacing: 0.3px;\n            text-transform: uppercase;\n            background: linear-gradient(135deg, var(--lp-brand-light), var(--lp-brand-dark));\n            color: #fff;\n            border: none;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-dm-table thead th {\n                padding: 10px 12px;\n                letter-spacing: 0.5px;\n            }\n        }\n\n        .lp360-dm-table thead th:first-child {\n            border-radius: 10px 0 0 10px;\n            text-align: left !important;\n        }\n\n        .lp360-dm-table thead th:last-child {\n            border-radius: 0 10px 10px 0;\n        }\n\n        .lp360-dm-row-head-col {\n            min-width: 0;\n            text-align: left !important;\n            font-weight: 700 !important;\n            white-space: normal;\n            background: linear-gradient(135deg, var(--lp-brand-light), var(--lp-brand-dark)) !important;\n            color: #fff !important;\n        }\n\n        .lp360-dm-table tbody td {\n            padding: 6px 4px;\n            vertical-align: middle;\n            white-space: nowrap;\n            font-weight: 700;\n            font-size: clamp(11px, 1.4vw, 15px);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-dm-table tbody td {\n                padding: 8px 10px;\n                font-size: 13px;\n            }\n        }\n\n        .lp360-dm-table tbody td:first-child {\n            text-align: left !important;\n            font-weight: 700;\n            border-radius: 10px 0 0 10px;\n            white-space: normal;\n        }\n\n        .lp360-dm-table tbody td:last-child {\n            border-radius: 0 10px 10px 0;\n        }\n\n        .lp360-dm-row-label {\n            display: flex;\n            align-items: center;\n            gap: var(--lp-space-2);\n            font-weight: 700;\n            font-size: clamp(11px, 1.4vw, 13px);\n            white-space: normal;\n            word-break: break-word;\n        }\n\n        .lp360-dm-row-icon {\n            width: clamp(20px, 3vw, 24px);\n            height: clamp(20px, 3vw, 24px);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n        }\n\n        .lp360-dm-row-icon svg {\n            width: clamp(10px, 1.6vw, 12px);\n            height: clamp(10px, 1.6vw, 12px);\n        }\n\n        .lp360-dm-chip-cell {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 3px;\n            justify-content: center;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-dm-chip-cell {\n                gap: 4px;\n            }\n        }\n\n        .lp360-dm-chip {\n            display: inline-flex;\n            align-items: center;\n            font-size: clamp(9px, 1.2vw, 11px);\n            font-weight: 700;\n            padding: 2px 6px;\n            border-radius: 999px;\n            background: #fff;\n            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);\n            border: 1.5px solid transparent;\n            white-space: nowrap;\n            cursor: pointer;\n            transition: transform 0.15s ease, box-shadow 0.15s ease;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-dm-chip {\n                padding: 3px 8px;\n                font-size: 11px;\n            }\n        }\n\n        .lp360-dm-chip:hover {\n            transform: translateY(-2px) scale(1.06);\n            box-shadow: 0 4px 10px rgba(232, 93, 58, 0.25);\n        }\n\n        .lp360-dm-chip--green {\n            color: var(--lp-green);\n            border-color: #bdeccb;\n        }\n\n        .lp360-dm-chip--red {\n            color: var(--lp-red);\n            border-color: #f9c9c9;\n        }\n\n        .lp360-dm-row--green {\n            background: #eaf8ef;\n        }\n\n        .lp360-dm-row--red {\n            background: #fdeaea;\n        }\n\n        .lp360-dm-row-icon--green {\n            background: var(--lp-green);\n        }\n\n        .lp360-dm-row-icon--red {\n            background: var(--lp-red);\n        }\n\n        \/* ---- DM SUMMARY ---- *\/\n        .lp360-dm-summary {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: var(--lp-space-1);\n            margin-top: var(--lp-space-3);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-dm-summary {\n                gap: var(--lp-space-2);\n                margin-top: var(--lp-space-4);\n            }\n        }\n\n        @media (min-width: 768px) {\n            .lp360-dm-summary {\n                gap: var(--lp-space-4);\n            }\n        }\n\n        .lp360-dm-summary-card {\n            border-radius: var(--lp-radius-sm);\n            padding: var(--lp-space-2) var(--lp-space-2);\n            text-align: center;\n            background: #fafbfc;\n            box-shadow: var(--lp-shadow-sm);\n            border: 1px solid var(--lp-border-subtle);\n            transition: all 0.25s ease;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: 2px;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-dm-summary-card {\n                padding: var(--lp-space-3) var(--lp-space-3);\n                border-radius: var(--lp-radius-md);\n                gap: 4px;\n            }\n        }\n\n        @media (min-width: 768px) {\n            .lp360-dm-summary-card {\n                padding: var(--lp-space-4) var(--lp-space-3);\n            }\n        }\n\n        .lp360-dm-summary-card:hover {\n            transform: translateY(-3px);\n            box-shadow: var(--lp-shadow-md);\n        }\n\n        .lp360-dm-summary-icon {\n            width: clamp(28px, 5vw, 44px);\n            height: clamp(28px, 5vw, 44px);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin-bottom: 2px;\n            background: rgba(255, 255, 255, 0.9);\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\n        }\n\n        .lp360-dm-summary-icon svg {\n            width: clamp(14px, 2.6vw, 20px);\n            height: clamp(14px, 2.6vw, 20px);\n        }\n\n        .lp360-dm-summary-value {\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: clamp(13px, 2vw, 18px);\n            font-weight: 700;\n            line-height: 1.3;\n            color: var(--lp-text-dark);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-dm-summary-value {\n                font-size: 15px;\n            }\n        }\n\n        .lp360-dm-summary-label {\n            font-size: clamp(8px, 1.2vw, 11px);\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 0.4px;\n            color: var(--lp-text-gray);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-dm-summary-label {\n                letter-spacing: 0.6px;\n            }\n        }\n\n        .lp360-dm-summary-card--blue .lp360-dm-summary-icon {\n            background: #e0f2fe;\n            color: #2563eb;\n        }\n        .lp360-dm-summary-card--blue .lp360-dm-summary-value {\n            color: #2563eb;\n        }\n        .lp360-dm-summary-card--blue {\n            border-top: 3px solid #2563eb;\n        }\n\n        .lp360-dm-summary-card--green .lp360-dm-summary-icon {\n            background: #dcfce7;\n            color: #16a34a;\n        }\n        .lp360-dm-summary-card--green .lp360-dm-summary-value {\n            color: #16a34a;\n        }\n        .lp360-dm-summary-card--green {\n            border-top: 3px solid #16a34a;\n        }\n\n        .lp360-dm-summary-card--red .lp360-dm-summary-icon {\n            background: #fee2e2;\n            color: #dc2626;\n        }\n        .lp360-dm-summary-card--red .lp360-dm-summary-value {\n            color: #dc2626;\n        }\n        .lp360-dm-summary-card--red {\n            border-top: 3px solid #dc2626;\n        }\n\n        \/* ---- STRENGTH MAP ---- *\/\n        .lp360-strength-map-wrapper {\n            background: var(--lp-card-bg);\n            border-radius: var(--lp-radius-md);\n            box-shadow: var(--lp-shadow-sm);\n            border: 1px solid var(--lp-border-subtle);\n            padding: var(--lp-space-3);\n            margin-bottom: var(--lp-space-4);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-strength-map-wrapper {\n                padding: var(--lp-space-4) var(--lp-space-5) var(--lp-space-5);\n                border-radius: var(--lp-radius-lg);\n                margin-bottom: var(--lp-space-6);\n            }\n        }\n\n        .lp360-ncert-badge-row {\n            background: #ffffff;\n            border-radius: var(--lp-radius-md);\n            border: 1px solid #eaeaea;\n            padding: var(--lp-space-3);\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: var(--lp-space-3);\n            flex-wrap: wrap;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ncert-badge-row {\n                flex-direction: row;\n                padding: var(--lp-space-4);\n                gap: var(--lp-space-4);\n                align-items: center;\n            }\n        }\n\n        @media (min-width: 900px) {\n            .lp360-ncert-badge-row {\n                gap: var(--lp-space-5);\n            }\n        }\n\n        .lp360-ncert-badge-icon {\n            width: clamp(40px, 7vw, 60px);\n            aspect-ratio: 1\/1;\n            flex-shrink: 0;\n            position: relative;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: transform 0.3s ease;\n        }\n\n        .lp360-ncert-badge-icon:hover {\n            transform: scale(1.05);\n        }\n\n        .lp360-ncert-badge-text-left {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n            min-width: 140px;\n            text-align: center;\n            align-items: center;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ncert-badge-text-left {\n                text-align: left;\n                align-items: flex-start;\n                min-width: 200px;\n            }\n        }\n\n        .lp360-ncert-badge-label {\n            font-size: clamp(9px, 1.2vw, 11px);\n            color: #2563eb;\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            margin-bottom: 2px;\n        }\n\n        .lp360-ncert-badge-value {\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: clamp(18px, 3vw, 22px);\n            font-weight: 800;\n            color: #dc2626;\n            margin-bottom: 2px;\n        }\n\n        .lp360-ncert-badge-desc {\n            font-size: clamp(11px, 1.4vw, 13px);\n            color: #4b5563;\n            line-height: 1.5;\n            margin: 0;\n            text-align: center;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ncert-badge-desc {\n                text-align: left;\n            }\n        }\n\n        .lp360-ncert-divider {\n            width: 60%;\n            max-width: 120px;\n            height: 1px;\n            background: #eaeaea;\n            flex-shrink: 0;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ncert-divider {\n                width: 1px;\n                height: 60px;\n            }\n        }\n\n        .lp360-ncert-badge-desc-wrap {\n            flex: 1.5;\n            min-width: 180px;\n            display: flex;\n            flex-direction: column;\n            gap: 4px;\n            text-align: center;\n            align-items: center;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ncert-badge-desc-wrap {\n                min-width: 250px;\n                text-align: left;\n                align-items: flex-start;\n                gap: 6px;\n            }\n        }\n\n        .lp360-ncert-desc-title {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .lp360-ncert-desc-icon {\n            color: #2563eb;\n            display: flex;\n            align-items: center;\n            background: #eff6ff;\n            padding: 4px;\n            border-radius: 50%;\n            border: 1px solid #bfdbfe;\n        }\n\n        .lp360-ncert-desc-icon svg {\n            width: 14px;\n            height: 14px;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ncert-desc-icon svg {\n                width: 16px;\n                height: 16px;\n            }\n        }\n\n        .lp360-ncert-desc-title h4 {\n            margin: 0;\n            font-size: clamp(12px, 1.6vw, 14px);\n            font-weight: 700;\n            color: #111827;\n        }\n\n        .lp360-ncert-badge-desc-right {\n            font-size: clamp(11px, 1.4vw, 13px);\n            color: #4b5563;\n            line-height: 1.5;\n            margin: 0;\n            text-align: center;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ncert-badge-desc-right {\n                text-align: left;\n            }\n        }\n\n        \/* ---- TSI BAND ---- *\/\n        .lp360-ncert-band-card {\n            background: #ffffff;\n            border-radius: var(--lp-radius-md);\n            border: 1px solid #eaeaea;\n            padding: var(--lp-space-3);\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);\n            display: flex;\n            flex-direction: column;\n            align-items: stretch;\n            gap: var(--lp-space-3);\n            background: #fffafa;\n            margin-top: var(--lp-space-3);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ncert-band-card {\n                padding: var(--lp-space-4);\n            }\n        }\n\n        .lp360-ncert-band-head {\n            display: flex;\n            align-items: center;\n            gap: var(--lp-space-3);\n            flex-wrap: wrap;\n        }\n\n        .lp360-ncert-band-head h3 {\n            font-size: clamp(13px, 1.8vw, 15px);\n            font-weight: 700;\n            margin: 0;\n            font-family: 'Sora', 'Inter', sans-serif;\n            color: #111827;\n        }\n\n        .lp360-round-icon--peach {\n            background: linear-gradient(145deg, #f59e0b, #f97316);\n            width: clamp(28px, 4.2vw, 32px);\n            height: clamp(28px, 4.2vw, 32px);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            box-shadow: 0 2px 6px rgba(249, 115, 22, 0.2);\n        }\n\n        .lp360-round-icon--peach svg {\n            width: clamp(13px, 2vw, 16px);\n            height: clamp(13px, 2vw, 16px);\n        }\n\n        .lp360-band-wrap {\n            position: relative;\n            padding-top: 28px;\n            width: 100%;\n        }\n\n        .lp360-band-tsi-badge {\n            position: absolute;\n            top: 0;\n            transform: translateX(-50%);\n            background: var(--lp-brand-light);\n            color: #fff;\n            font-weight: 800;\n            font-size: clamp(10px, 1.4vw, 12px);\n            padding: 3px 10px;\n            border-radius: 8px;\n            white-space: nowrap;\n            font-family: 'Sora', 'Inter', sans-serif;\n            box-shadow: 0 4px 12px rgba(232, 93, 58, 0.35);\n            transition: left 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-band-tsi-badge {\n                padding: 4px 12px;\n                font-size: 12px;\n            }\n        }\n\n        .lp360-band-tsi-badge::after {\n            content: '';\n            position: absolute;\n            bottom: -5px;\n            left: 50%;\n            transform: translateX(-50%);\n            border-width: 5px 5px 0;\n            border-style: solid;\n            border-color: var(--lp-brand-light) transparent transparent;\n        }\n\n        .lp360-band-track {\n            height: 10px;\n            border-radius: 999px;\n            position: relative;\n            background: linear-gradient(90deg, #ef4444 0%, #f97316 25%, #facc15 50%, #a3e635 75%, #22c55e 100%);\n            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);\n            width: 100%;\n        }\n\n        .lp360-band-marker {\n            position: absolute;\n            top: 50%;\n            width: clamp(18px, 3vw, 22px);\n            height: clamp(18px, 3vw, 22px);\n            border-radius: 50%;\n            background: #fff;\n            border: 4px solid #fff;\n            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.15);\n            transform: translate(-50%, -50%);\n            transition: left 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);\n        }\n\n        .lp360-band-scale {\n            display: flex;\n            justify-content: space-between;\n            margin-top: var(--lp-space-2);\n        }\n\n        .lp360-band-scale-label {\n            font-weight: 700;\n            font-size: clamp(9px, 1.2vw, 12px);\n        }\n\n        .lp360-band-poor {\n            display: flex;\n            align-items: center;\n            gap: var(--lp-space-3);\n            color: #dc2626;\n            background: #fef2f2;\n            border-radius: var(--lp-radius-sm);\n            padding: 10px 14px;\n            font-weight: 600;\n            font-size: clamp(11px, 1.4vw, 13px);\n            border: 1px solid #fee2e2;\n            margin-top: 4px;\n        }\n\n        .lp360-band-poor svg {\n            flex-shrink: 0;\n            width: clamp(16px, 2vw, 18px);\n            height: clamp(16px, 2vw, 18px);\n        }\n\n        \/* ---- NCERT ANALYSIS ---- *\/\n        .lp360-ncert-analysis-card {\n            background: #ffffff;\n            border-radius: var(--lp-radius-md);\n            border: 1px solid #eaeaea;\n            padding: var(--lp-space-3);\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);\n            display: flex;\n            flex-direction: column;\n            gap: var(--lp-space-3);\n            background: #f8fbff;\n            overflow: hidden;\n            position: relative;\n            margin-top: var(--lp-space-3);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ncert-analysis-card {\n                flex-direction: row;\n                justify-content: space-between;\n                padding: var(--lp-space-4);\n                gap: var(--lp-space-4);\n            }\n        }\n\n        .lp360-ncert-analysis-content {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            gap: 6px;\n            z-index: 2;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ncert-analysis-content {\n                gap: 8px;\n            }\n        }\n\n        .lp360-ncert-analysis-header {\n            display: flex;\n            align-items: center;\n            gap: var(--lp-space-3);\n        }\n\n        .lp360-ncert-analysis-header h3 {\n            font-size: clamp(13px, 1.8vw, 15px);\n            font-weight: 700;\n            margin: 0;\n            font-family: 'Sora', 'Inter', sans-serif;\n            color: #111827;\n        }\n\n        .lp360-round-icon--blue {\n            background: linear-gradient(145deg, #60a5fa, #2563eb);\n            width: clamp(28px, 4.2vw, 32px);\n            height: clamp(28px, 4.2vw, 32px);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);\n        }\n\n        .lp360-round-icon--blue svg {\n            width: clamp(13px, 2vw, 16px);\n            height: clamp(13px, 2vw, 16px);\n        }\n\n        .lp360-ncert-analysis-content p {\n            font-size: clamp(11px, 1.4vw, 13px);\n            line-height: 1.6;\n            color: #374151;\n            margin: 0;\n        }\n\n        .lp360-ncert-analysis-image {\n            flex-shrink: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            z-index: 1;\n            padding: 0;\n        }\n\n        .lp360-ncert-analysis-image img {\n            width: clamp(50px, 10vw, 80px);\n            object-fit: contain;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ncert-analysis-image {\n                padding-right: 10px;\n            }\n        }\n\n        .lp360-ncert-analysis-card::before {\n            content: '';\n            position: absolute;\n            right: 0;\n            top: 0;\n            bottom: 0;\n            width: 200px;\n            background: radial-gradient(circle at 100% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 70%);\n            pointer-events: none;\n            z-index: 0;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ncert-analysis-card::before {\n                width: 300px;\n            }\n        }\n\n        \/* ---- MIND MAP ---- *\/\n        #lp360-mindmap-container {\n            position: relative;\n            border: 1.5px dashed var(--lp-brand-light);\n            border-radius: var(--lp-radius-md);\n            background: #fdfcfb;\n            padding: var(--lp-space-3);\n            min-height: 220px;\n            overflow: visible;\n            margin-bottom: var(--lp-space-3);\n        }\n\n        @media (min-width: 640px) {\n            #lp360-mindmap-container {\n                padding: var(--lp-space-4) var(--lp-space-3);\n                min-height: 280px;\n                margin-bottom: var(--lp-space-4);\n            }\n        }\n\n        #lp360-mindmap-svg {\n            position: absolute;\n            inset: 0;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            z-index: 1;\n        }\n\n        \/* Mind map grid \u2013 responsive *\/\n        #lp360-mindmap-container .lp360-mm-grid {\n            display: flex;\n            flex-direction: column;\n            gap: var(--lp-space-3);\n            min-height: 200px;\n            position: relative;\n            z-index: 2;\n            align-items: center;\n        }\n\n        @media (min-width: 768px) {\n            #lp360-mindmap-container .lp360-mm-grid {\n                display: grid;\n                grid-template-columns: 1.2fr 0.8fr 0.7fr 0.8fr 1.2fr;\n                align-items: center;\n                gap: 4px;\n                min-height: 260px;\n            }\n        }\n\n        #lp360-mindmap-container .lp360-mm-col {\n            display: flex;\n            flex-direction: column;\n            gap: 6px;\n            align-items: center;\n            justify-content: center;\n            width: 100%;\n        }\n\n        #lp360-mindmap-container .lp360-mm-node {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            font-weight: 700;\n            font-size: clamp(11px, 1.6vw, 14px);\n            padding: 8px 14px;\n            border-radius: 10px;\n            white-space: nowrap;\n            background: #fff;\n            font-family: 'Sora', 'Inter', sans-serif;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n            border: 2px solid #1f2937;\n            color: #1f2937;\n        }\n\n        @media (min-width: 640px) {\n            #lp360-mindmap-container .lp360-mm-node {\n                padding: 10px 16px;\n                font-size: 13px;\n            }\n        }\n\n        #lp360-mindmap-container .lp360-mm-node--detailed {\n            border-color: var(--lp-brand-light);\n            color: var(--lp-brand-light);\n        }\n\n        #lp360-mindmap-container .lp360-mm-node--basic {\n            border-color: var(--lp-green);\n            color: #15803d;\n        }\n\n        #lp360-mindmap-container .lp360-mm-node--center {\n            border-color: #1f2937;\n            color: #1f2937;\n            font-size: clamp(12px, 1.8vw, 14px);\n            padding: 10px 16px;\n        }\n\n        @media (min-width: 640px) {\n            #lp360-mindmap-container .lp360-mm-node--center {\n                padding: 14px 20px;\n                font-size: 14px;\n            }\n        }\n\n        .lp360-mm-topic {\n            font-size: clamp(10px, 1.3vw, 11.5px);\n            font-weight: 700;\n            padding: 4px 10px;\n            border-radius: 6px;\n            text-align: center;\n            white-space: nowrap;\n            position: relative;\n            max-width: 100%;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-mm-topic {\n                padding: 6px 12px;\n                font-size: 11.5px;\n            }\n        }\n\n        .lp360-mm-topic--detailed {\n            background: #fbe7d4;\n            color: #7c3f0e;\n        }\n\n        .lp360-mm-topic--basic {\n            background: #e2f5e6;\n            color: #166534;\n        }\n\n        \/* Mind map overlay *\/\n        .lp360-mindmap-overlay {\n            display: none;\n            position: absolute;\n            inset: 0;\n            align-items: center;\n            justify-content: center;\n            z-index: 10;\n            padding: var(--lp-space-3);\n            pointer-events: none;\n            border-radius: var(--lp-radius-md);\n        }\n\n        #lp360-mindmap-container.has-inference .lp360-mindmap-overlay {\n            display: flex;\n        }\n\n        #lp360-mindmap-container.has-inference .lp360-mm-topic,\n        #lp360-mindmap-container.has-inference #lp360-mm-detailed-node,\n        #lp360-mindmap-container.has-inference #lp360-mm-basic-node,\n        #lp360-mindmap-container.has-inference #lp360-mm-center-node,\n        #lp360-mindmap-container.has-inference #lp360-mindmap-svg {\n            filter: blur(5px);\n            pointer-events: none;\n            user-select: none;\n            transition: filter 0.4s ease;\n        }\n\n        @media (min-width: 640px) {\n            #lp360-mindmap-container.has-inference .lp360-mm-topic,\n            #lp360-mindmap-container.has-inference #lp360-mm-detailed-node,\n            #lp360-mindmap-container.has-inference #lp360-mm-basic-node,\n            #lp360-mindmap-container.has-inference #lp360-mm-center-node,\n            #lp360-mindmap-container.has-inference #lp360-mindmap-svg {\n                filter: blur(6px);\n            }\n        }\n\n        .lp360-mindmap-overlay__card {\n            background: rgba(255, 255, 255, 0.94);\n            backdrop-filter: blur(10px);\n            -webkit-backdrop-filter: blur(10px);\n            border-radius: var(--lp-radius-md);\n            padding: var(--lp-space-3);\n            max-width: 300px;\n            width: auto;\n            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(232, 93, 58, 0.2) inset;\n            text-align: center;\n            animation: lp360FadeIn 0.5s ease;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-mindmap-overlay__card {\n                padding: var(--lp-space-4);\n                max-width: 320px;\n            }\n        }\n\n        .lp360-mindmap-overlay__card h3 {\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: clamp(12px, 1.6vw, 14px);\n            font-weight: 800;\n            margin: 0 0 4px;\n            color: var(--lp-text-dark);\n            letter-spacing: -0.2px;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-mindmap-overlay__card h3 {\n                margin: 0 0 6px;\n            }\n        }\n\n        .lp360-mindmap-overlay__card p {\n            font-size: clamp(11px, 1.3vw, 12px);\n            line-height: 1.5;\n            color: #374151;\n            margin: 0;\n        }\n\n        .lp360-mindmap-overlay__icon {\n            width: clamp(30px, 5vw, 36px);\n            height: clamp(30px, 5vw, 36px);\n            border-radius: 50%;\n            background: linear-gradient(135deg, var(--lp-brand-light), var(--lp-gold));\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 0 auto 8px;\n            color: #fff;\n            box-shadow: 0 6px 16px rgba(232, 93, 58, 0.3);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-mindmap-overlay__icon {\n                margin: 0 auto 10px;\n            }\n        }\n\n        .lp360-mindmap-overlay__icon svg {\n            width: clamp(13px, 2vw, 16px);\n            height: clamp(13px, 2vw, 16px);\n        }\n\n        @keyframes lp360FadeIn {\n            from {\n                opacity: 0;\n                transform: translateY(6px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        \/* Mind map summary cards *\/\n        #lp360-mindmap-container+.lp360-mm-summary-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: var(--lp-space-3);\n            margin-top: var(--lp-space-3);\n        }\n\n        @media (min-width: 640px) {\n            #lp360-mindmap-container+.lp360-mm-summary-grid {\n                grid-template-columns: 1fr 1fr;\n                gap: var(--lp-space-3);\n            }\n        }\n\n        .lp360-mm-summary-card {\n            display: flex;\n            align-items: center;\n            gap: var(--lp-space-3);\n            padding: var(--lp-space-3) var(--lp-space-4);\n            border-radius: var(--lp-radius-md);\n            justify-content: center;\n            flex-wrap: wrap;\n            border: 1px solid;\n        }\n\n        .lp360-mm-summary-card--detailed {\n            background: linear-gradient(120deg, #fdecd9, #fff8f0);\n            border-color: #f6ddc0;\n        }\n\n        .lp360-mm-summary-card--basic {\n            background: linear-gradient(120deg, #e2f5e6, #f6fdf7);\n            border-color: #cdeed4;\n        }\n\n        .lp360-mm-summary-card .lp360-mm-summary-icon {\n            width: clamp(30px, 4.5vw, 38px);\n            height: clamp(30px, 4.5vw, 38px);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n        }\n\n        .lp360-mm-summary-card .lp360-mm-summary-icon--detailed {\n            background: var(--lp-brand-light);\n        }\n\n        .lp360-mm-summary-card .lp360-mm-summary-icon--basic {\n            background: var(--lp-green);\n        }\n\n        .lp360-mm-summary-card .lp360-mm-summary-icon svg {\n            width: clamp(14px, 2.2vw, 18px);\n            height: clamp(14px, 2.2vw, 18px);\n            stroke: #fff;\n            stroke-width: 1.8;\n            fill: none;\n        }\n\n        .lp360-mm-summary-card .lp360-mm-summary-label {\n            display: flex;\n            flex-direction: column;\n            gap: 1px;\n            text-align: left;\n        }\n\n        .lp360-mm-summary-card .lp360-mm-summary-label strong {\n            font-weight: 800;\n            font-size: clamp(12px, 1.8vw, 14px);\n            font-family: 'Sora', 'Inter', sans-serif;\n        }\n\n        .lp360-mm-summary-card .lp360-mm-summary-label span {\n            font-size: clamp(10px, 1.2vw, 11px);\n            color: var(--lp-text-gray);\n        }\n\n        .lp360-mm-summary-card .lp360-mm-summary-count {\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: clamp(20px, 3.4vw, 26px);\n            font-weight: 800;\n            padding: 2px 12px;\n            border-radius: 10px;\n            background: rgba(255, 255, 255, 0.6);\n        }\n\n        .lp360-mm-summary-card--detailed .lp360-mm-summary-count {\n            color: var(--lp-brand-light);\n            background: rgba(232, 93, 58, 0.08);\n        }\n\n        .lp360-mm-summary-card--basic .lp360-mm-summary-count {\n            color: #15803d;\n            background: rgba(34, 197, 94, 0.1);\n        }\n\n        \/* ---- PERFORMANCE ANALYTICS ---- *\/\n        .lp360-time-tracker-layout {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: var(--lp-space-4);\n            align-items: start;\n        }\n\n        @media (min-width: 768px) {\n            .lp360-time-tracker-layout {\n                grid-template-columns: 35% 1fr;\n                gap: var(--lp-space-5);\n            }\n        }\n\n        .lp360-time-tracker-right {\n            display: flex;\n            flex-direction: column;\n            gap: var(--lp-space-3);\n            background: var(--lp-bg-cyan-soft);\n            color: #ffffff;\n            border: 1px solid var(--lp-border-subtle);\n            border-radius: var(--lp-radius-md);\n            padding: var(--lp-space-3);\n            box-shadow: var(--lp-shadow-sm);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-time-tracker-right {\n                padding: var(--lp-space-4);\n                gap: var(--lp-space-4);\n            }\n        }\n\n        .lp360-time-tracker-tabs {\n            display: flex;\n            gap: 0;\n            margin-bottom: 0;\n            border-radius: var(--lp-radius-sm);\n            overflow: hidden;\n            border: 1px solid var(--lp-border-subtle);\n            background: #f9fafb;\n            flex-wrap: wrap;\n        }\n\n        .lp360-time-tab {\n            flex: 1;\n            min-width: 60px;\n            padding: 8px 6px;\n            text-align: center;\n            font-weight: 700;\n            font-size: clamp(9px, 1.3vw, 13px);\n            color: #1f2937;\n            background: transparent;\n            border: none;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            font-family: 'Inter', sans-serif;\n            border-right: 1px solid var(--lp-border-subtle);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-time-tab {\n                padding: 10px 12px;\n                font-size: 13px;\n            }\n        }\n\n        .lp360-time-tab:last-child {\n            border-right: none;\n        }\n\n        .lp360-time-tab:hover {\n            background: #f3f4f6;\n        }\n\n        .lp360-time-tab.active {\n            background: var(--lp-brand-light);\n            color: #fff;\n            box-shadow: 0 4px 12px rgba(232, 93, 58, 0.3);\n        }\n\n        .lp360-time-tracker-gauges {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: var(--lp-space-3);\n            margin-bottom: 0;\n        }\n\n        @media (min-width: 480px) {\n            .lp360-time-tracker-gauges {\n                grid-template-columns: 1fr 1fr 1fr;\n            }\n        }\n\n        .lp360-gauge-column {\n            background: #fff;\n            border-radius: var(--lp-radius-md);\n            padding: var(--lp-space-2) var(--lp-space-2);\n            border: 1px solid var(--lp-border-subtle);\n            box-shadow: var(--lp-shadow-sm);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            text-align: center;\n            transition: transform 0.2s ease, box-shadow 0.2s ease;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-gauge-column {\n                padding: var(--lp-space-2) var(--lp-space-3);\n            }\n        }\n\n        .lp360-gauge-column:hover {\n            transform: translateY(-2px);\n            box-shadow: var(--lp-shadow-md);\n        }\n\n        .lp360-gauge-column--orange {\n            border-top: 3px solid var(--lp-brand-light);\n        }\n        .lp360-gauge-column--green {\n            border-top: 3px solid var(--lp-green);\n        }\n        .lp360-gauge-column--amber {\n            border-top: 3px solid var(--lp-amber);\n        }\n\n        .lp360-gauge-column-header {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: var(--lp-space-1);\n            margin-bottom: var(--lp-space-2);\n            width: 100%;\n        }\n\n        .lp360-gauge-column-icon {\n            width: clamp(24px, 3.8vw, 28px);\n            height: clamp(24px, 3.8vw, 28px);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n            margin-bottom: 2px;\n        }\n\n        .lp360-gauge-column-icon.orange {\n            background: #fef0e8;\n        }\n        .lp360-gauge-column-icon.green {\n            background: #e8f5ed;\n        }\n        .lp360-gauge-column-icon.amber {\n            background: #fef3e8;\n        }\n\n        .lp360-gauge-column-icon svg {\n            width: clamp(11px, 1.8vw, 14px);\n            height: clamp(11px, 1.8vw, 14px);\n        }\n\n        .lp360-gauge-column-title {\n            font-size: clamp(9px, 1.3vw, 11px);\n            font-weight: 800;\n            text-align: center;\n            line-height: 1.2;\n        }\n\n        .lp360-gauge-column--orange .lp360-gauge-column-title {\n            color: var(--lp-brand-light);\n        }\n        .lp360-gauge-column--green .lp360-gauge-column-title {\n            color: var(--lp-green);\n        }\n        .lp360-gauge-column--amber .lp360-gauge-column-title {\n            color: var(--lp-amber);\n        }\n\n        .lp360-gauge-column-sub {\n            font-size: clamp(7px, 1vw, 9px);\n            color: var(--lp-text-gray);\n            text-align: center;\n            line-height: 1.2;\n        }\n\n        .lp360-gauge-column-chart {\n            width: 100%;\n            max-width: 121px;\n            margin: 2px auto var(--lp-space-1);\n            overflow: visible;\n            display: flex;\n            justify-content: center;\n        }\n\n        .lp360-gauge-canvas {\n            display: block;\n            width: 100%;\n            height: auto;\n            max-width: 100%;\n        }\n\n        .lp360-gauge-column-value {\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: clamp(16px, 2.8vw, 22px);\n            font-weight: 800;\n            padding: 2px 8px;\n            border-radius: 8px;\n            background: #f8f9fc;\n            line-height: 1.3;\n            margin-top: 2px;\n        }\n\n        .lp360-gauge-column--orange .lp360-gauge-column-value {\n            color: var(--lp-brand-light);\n            background: rgba(232, 93, 58, 0.08);\n        }\n        .lp360-gauge-column--green .lp360-gauge-column-value {\n            color: var(--lp-green);\n            background: rgba(34, 197, 94, 0.08);\n        }\n        .lp360-gauge-column--amber .lp360-gauge-column-value {\n            color: var(--lp-amber);\n            background: rgba(245, 158, 11, 0.08);\n        }\n\n        .lp360-gauge-column-value span {\n            font-size: clamp(9px, 1.2vw, 11px);\n            font-weight: 700;\n        }\n\n        \/* ---- TIME INFERENCES ---- *\/\n        .lp360-time-tracker-inferences {\n            display: flex;\n            flex-direction: column;\n            gap: var(--lp-space-3);\n            width: 100%;\n            margin-top: 0;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-time-tracker-inferences {\n                gap: var(--lp-space-4);\n            }\n        }\n\n        .lp360-inference-block {\n            display: flex;\n            align-items: flex-start;\n            gap: var(--lp-space-3);\n            background: #f9fafb;\n            border-radius: var(--lp-radius-md);\n            padding: var(--lp-space-3) var(--lp-space-4);\n            border: 1px solid var(--lp-border-subtle);\n            transition: transform 0.15s ease;\n            width: 100%;\n            overflow: visible;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-inference-block {\n                padding: var(--lp-space-4) var(--lp-space-5);\n                gap: var(--lp-space-4);\n            }\n        }\n\n        .lp360-inference-block:hover {\n            transform: translateY(-1px);\n        }\n\n        .lp360-inference-icon {\n            width: clamp(28px, 4.4vw, 34px);\n            height: clamp(28px, 4.4vw, 34px);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n        }\n\n        .lp360-inference-icon.orange {\n            background: var(--lp-brand-light);\n        }\n        .lp360-inference-icon.green {\n            background: var(--lp-green);\n        }\n\n        .lp360-inference-icon svg {\n            width: clamp(13px, 2vw, 16px);\n            height: clamp(13px, 2vw, 16px);\n            stroke: #fff;\n            stroke-width: 2.5;\n            fill: none;\n        }\n\n        .lp360-inference-title {\n            font-size: clamp(9px, 1.3vw, 12px);\n            font-weight: 800;\n            letter-spacing: 0.6px;\n            text-transform: uppercase;\n            margin-bottom: 2px;\n            color: var(--lp-text-gray);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-inference-title {\n                letter-spacing: 0.8px;\n                margin-bottom: 4px;\n            }\n        }\n\n        .lp360-inference-block:first-child .lp360-inference-title {\n            color: var(--lp-brand-light);\n        }\n\n        .lp360-inference-block:last-child .lp360-inference-title {\n            color: var(--lp-green);\n        }\n\n        .lp360-inference-text {\n            font-size: clamp(12px, 1.5vw, 14px);\n            line-height: 1.6;\n            color: #374151;\n            overflow-wrap: break-word;\n            word-break: break-word;\n            white-space: normal;\n        }\n\n        \/* ---- PRESSURE ---- *\/\n        .lp360-pressure-wrap {\n            margin-top: var(--lp-space-4);\n            padding-top: var(--lp-space-3);\n            border-top: 1px solid var(--lp-border-subtle);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-pressure-wrap {\n                margin-top: var(--lp-space-6);\n                padding-top: var(--lp-space-4);\n            }\n        }\n\n.lp360-pressure-chart-wrap canvas {\n            width: 100% !important;\n            height: auto !important;\n            display: block;\n            background: #fafbfc;\n            border-radius: var(--lp-radius-md);\n            border: 1px solid var(--lp-border-subtle);\n            transition: filter 0.3s ease;\n        }\n\n     .lp360-pressure-chart-wrap.is-null canvas {\n            filter: blur(4px);\n        }\n\n        .lp360-pressure-inferences.is-null {\n            filter: blur(4px);\n            pointer-events: none;\n            user-select: none;\n        }  \n\n        .lp360-pressure-null-overlay {\n            display: none;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            padding: var(--lp-space-4);\n            background: rgba(255, 255, 255, 0.55);\n            border-radius: var(--lp-radius-md);\n            color: #374151;\n        }\n\n        .lp360-pressure-null-overlay svg {\n            color: #E85D3A;\n        }\n\n        .lp360-pressure-null-overlay p {\n            font-size: clamp(12px, 1.6vw, 14px);\n            font-weight: 600;\n            line-height: 1.5;\n            max-width: 320px;\n            margin: 0;\n        }\n        \n\n        .lp360-pressure-inferences {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: var(--lp-space-3);\n            margin-top: var(--lp-space-3);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-pressure-inferences {\n                grid-template-columns: repeat(3, 1fr);\n                gap: var(--lp-space-4);\n                margin-top: var(--lp-space-4);\n            }\n        }\n\n        .lp360-pressure-inferences .lp360-inference-block {\n            flex-direction: column;\n            align-items: stretch;\n            padding: var(--lp-space-3) var(--lp-space-4);\n            border-radius: var(--lp-radius-md);\n            box-shadow: var(--lp-shadow-sm);\n            background: #ffffff;\n            border: 1px solid var(--lp-border-subtle);\n        }\n\n        .lp360-pressure-inferences .lp360-inference-title {\n            font-size: clamp(9px, 1.3vw, 11px);\n            font-weight: 800;\n            letter-spacing: 0.6px;\n            text-transform: uppercase;\n            margin-bottom: var(--lp-space-2);\n        }\n\n        .lp360-pressure-inferences .lp360-inference-text {\n            font-size: clamp(11px, 1.4vw, 13px);\n            line-height: 1.6;\n            color: #374151;\n        }\n\n        \/* ---- PREDICTIONS ---- *\/\n        .lp360-score-prediction-wrap {\n            background: linear-gradient(145deg, #0d1024, #1a1040);\n            border-radius: var(--lp-radius-md);\n            padding: var(--lp-space-4) var(--lp-space-4);\n            color: #fff;\n            box-shadow: 0 12px 40px rgba(13, 16, 36, 0.4);\n            margin-bottom: var(--lp-space-4);\n            position: relative;\n            overflow: hidden;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-score-prediction-wrap {\n                padding: var(--lp-space-5) var(--lp-space-6);\n                border-radius: var(--lp-radius-lg);\n                margin-bottom: var(--lp-space-5);\n            }\n        }\n\n        .lp360-score-prediction-wrap::before {\n            content: '';\n            position: absolute;\n            top: -50%;\n            right: -30%;\n            width: 60%;\n            height: 200%;\n            background: radial-gradient(circle, rgba(255, 122, 61, 0.08) 0%, transparent 70%);\n            pointer-events: none;\n        }\n\n        .lp360-score-prediction-wrap .lp360-pred-title {\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: clamp(13px, 2vw, 16px);\n            font-weight: 700;\n            letter-spacing: 1.5px;\n            text-transform: uppercase;\n            color: var(--lp-gold);\n            margin-bottom: var(--lp-space-3);\n            text-align: center;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-score-prediction-wrap .lp360-pred-title {\n                letter-spacing: 2px;\n                margin-bottom: var(--lp-space-4);\n            }\n        }\n\n        .lp360-score-prediction-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: var(--lp-space-4);\n            align-items: center;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-score-prediction-grid {\n                grid-template-columns: 1fr 1fr;\n                gap: var(--lp-space-5);\n            }\n        }\n\n        .lp360-score-pred-left {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: var(--lp-space-2);\n        }\n\n        .lp360-score-pred-ring {\n            position: relative;\n            width: clamp(150px, 30vw, 205px);\n            height: clamp(150px, 30vw, 205px);\n            border-radius: 50%;\n            background: conic-gradient(var(--lp-brand-light) 48%, rgba(255, 255, 255, 0.1) 0%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            animation: lp360RingPulse 3s ease-in-out infinite;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-score-pred-ring {\n                width: 175px;\n                height: 175px;\n            }\n        }\n\n        @media (min-width: 900px) {\n            .lp360-score-pred-ring {\n                width: 205px;\n                height: 205px;\n            }\n        }\n\n        @keyframes lp360RingPulse {\n            0%,\n            100% {\n                transform: scale(1);\n                box-shadow: 0 0 30px rgba(255, 122, 61, 0.2);\n            }\n            50% {\n                transform: scale(1.03);\n                box-shadow: 0 0 50px rgba(255, 122, 61, 0.35);\n            }\n        }\n\n        .lp360-score-pred-ring-inner {\n            width: clamp(122px, 24vw, 168px);\n            height: clamp(122px, 24vw, 168px);\n            border-radius: 50%;\n            background: linear-gradient(145deg, #1a1240, #0d1024);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            border: 2px solid rgba(255, 255, 255, 0.05);\n            padding: 8px;\n            gap: 2px;\n            overflow: hidden;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-score-pred-ring-inner {\n                width: 143px;\n                height: 143px;\n                padding: 9px;\n            }\n        }\n\n        @media (min-width: 900px) {\n            .lp360-score-pred-ring-inner {\n                width: 168px;\n                height: 168px;\n                padding: 12px;\n                gap: 3px;\n            }\n        }\n\n        .lp360-score-pred-ring-inner .lp360-score-label {\n            font-size: clamp(6.5px, 1.1vw, 9px);\n            letter-spacing: 1.2px;\n            text-transform: uppercase;\n            color: #94a3b8;\n            font-weight: 600;\n            margin: 0;\n            line-height: 1.15;\n            white-space: nowrap;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-score-pred-ring-inner .lp360-score-label {\n                letter-spacing: 1.6px;\n                font-size: 7.5px;\n            }\n        }\n\n        @media (min-width: 900px) {\n            .lp360-score-pred-ring-inner .lp360-score-label {\n                font-size: 9px;\n            }\n        }\n\n        .lp360-score-number-line {\n            display: flex;\n            align-items: baseline;\n            justify-content: center;\n            gap: 2px;\n            width: 100%;\n            white-space: nowrap;\n            line-height: 1;\n        }\n\n        .lp360-score-pred-ring-inner .lp360-big-score {\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: clamp(30px, 6vw, 48px);\n            font-weight: 800;\n            background: linear-gradient(90deg, var(--lp-gold), var(--lp-brand-light));\n            -webkit-background-clip: text;\n            background-clip: text;\n            color: transparent;\n            line-height: 0.95;\n            margin: 0;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-score-pred-ring-inner .lp360-big-score {\n                font-size: 40px;\n            }\n        }\n\n        @media (min-width: 900px) {\n            .lp360-score-pred-ring-inner .lp360-big-score {\n                font-size: 48px;\n            }\n        }\n\n        .lp360-score-pred-ring-inner .lp360-score-max {\n            display: inline-block;\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: clamp(12px, 2.2vw, 18px);\n            font-weight: 700;\n            line-height: 1;\n            margin: 0;\n            white-space: nowrap;\n            background: linear-gradient(90deg, var(--lp-gold), var(--lp-brand-light));\n            -webkit-background-clip: text;\n            background-clip: text;\n            color: transparent;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-score-pred-ring-inner .lp360-score-max {\n                font-size: 15px;\n            }\n        }\n\n        @media (min-width: 900px) {\n            .lp360-score-pred-ring-inner .lp360-score-max {\n                font-size: 18px;\n            }\n        }\n\n        .lp360-score-foot {\n            font-family: 'Inter', sans-serif;\n            font-size: clamp(5.5px, 0.9vw, 7px);\n            line-height: 1;\n            letter-spacing: 1px;\n            color: #94a3b8;\n            font-weight: 700;\n            text-transform: uppercase;\n            white-space: nowrap;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-score-foot {\n                letter-spacing: 1.2px;\n                font-size: 6.5px;\n            }\n        }\n\n        @media (min-width: 900px) {\n            .lp360-score-foot {\n                font-size: 7px;\n            }\n        }\n\n        .lp360-score-pred-left .lp360-motivation {\n            font-size: clamp(14px, 2.2vw, 18px);\n            font-weight: 700;\n            color: var(--lp-gold);\n            margin-top: var(--lp-space-2);\n            text-align: center;\n            animation: lp360FadeInUp 0.8s ease;\n        }\n\n        @keyframes lp360FadeInUp {\n            from {\n                opacity: 0;\n                transform: translateY(10px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        .lp360-score-pred-right {\n            display: flex;\n            flex-direction: column;\n            gap: var(--lp-space-3);\n        }\n\n        .lp360-score-pred-right .lp360-insight-box {\n            background: rgba(255, 255, 255, 0.05);\n            border: 1px solid rgba(255, 255, 255, 0.08);\n            border-radius: var(--lp-radius-md);\n            padding: var(--lp-space-3) var(--lp-space-4);\n            backdrop-filter: blur(4px);\n            transition: all 0.3s ease;\n        }\n\n        .lp360-score-pred-right .lp360-insight-box:hover {\n            background: rgba(255, 255, 255, 0.08);\n            transform: translateX(4px);\n        }\n\n        .lp360-score-pred-right .lp360-insight-box p {\n            font-size: clamp(11px, 1.4vw, 13px);\n            line-height: 1.7;\n            color: #e2e8f0;\n            margin: 0;\n        }\n\n        .lp360-score-pred-right .lp360-insight-box .lp360-ib-label {\n            font-size: clamp(8px, 1.1vw, 10px);\n            letter-spacing: 1.2px;\n            text-transform: uppercase;\n            color: var(--lp-gold);\n            font-weight: 700;\n            margin-bottom: 4px;\n            display: block;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-score-pred-right .lp360-insight-box .lp360-ib-label {\n                letter-spacing: 1.5px;\n            }\n        }\n\n        .lp360-score-pred-right .lp360-insight-box .lp360-ib-label--tip {\n            color: var(--lp-cyan);\n        }\n\n        .lp360-pred-warning-tile {\n            display: flex;\n            align-items: flex-start;\n            gap: var(--lp-space-2);\n            background: rgba(245, 158, 11, 0.1);\n            border: 1px solid rgba(245, 158, 11, 0.35);\n            border-radius: var(--lp-radius-md);\n            padding: var(--lp-space-3) var(--lp-space-4);\n            margin-top: var(--lp-space-1);\n        }\n\n        .lp360-pred-warning-tile svg {\n            width: 16px;\n            height: 16px;\n            flex-shrink: 0;\n            margin-top: 2px;\n            color: var(--lp-amber);\n        }\n\n        .lp360-pred-warning-tile p {\n            font-size: clamp(10px, 1.3vw, 12px);\n            line-height: 1.55;\n            color: #fde68a;\n            margin: 0;\n            font-weight: 600;\n        }\n\n        \/* ---- OPTIMAL TIME ---- *\/\n\n        .lp360-optimal-time-wrap {\n            background: var(--lp-card-bg);\n            border-radius: var(--lp-radius-md);\n            border: 1px solid var(--lp-border-subtle);\n            padding: var(--lp-space-3);\n            box-shadow: var(--lp-shadow-sm);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-optimal-time-wrap {\n                padding: var(--lp-space-5);\n                border-radius: var(--lp-radius-lg);\n            }\n        }\n\n        .lp360-optimal-time-wrap .lp360-ot-title {\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: clamp(14px, 2vw, 16px);\n            font-weight: 700;\n            color: var(--lp-text-dark);\n            text-align: center;\n            margin-bottom: var(--lp-space-2);\n        }\n\n        .lp360-optimal-time-wrap .lp360-ot-sub {\n            font-size: clamp(11px, 1.4vw, 13px);\n            color: var(--lp-text-gray);\n            text-align: center;\n            margin-bottom: var(--lp-space-3);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-optimal-time-wrap .lp360-ot-sub {\n                margin-bottom: var(--lp-space-4);\n            }\n        }\n\n        .lp360-ot-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: var(--lp-space-3);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ot-grid {\n                grid-template-columns: repeat(3, 1fr);\n                gap: var(--lp-space-4);\n            }\n        }\n\n        .lp360-ot-card {\n            background: #4A6FA5;\n            border-radius: var(--lp-radius-md);\n            padding: var(--lp-space-3);\n            text-align: center;\n            border: 1px solid rgba(255, 255, 255, 0.15);\n            transition: all 0.3s ease;\n            position: relative;\n            overflow: hidden;\n            box-shadow: 0 4px 15px rgba(74, 111, 165, 0.3);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ot-card {\n                padding: var(--lp-space-4);\n            }\n        }\n\n        .lp360-ot-card:hover {\n            transform: translateY(-6px);\n            box-shadow: 0 12px 35px rgba(74, 111, 165, 0.45);\n            border-color: rgba(255, 255, 255, 0.3);\n        }\n\n        .lp360-ot-card::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            height: 4px;\n            background: linear-gradient(90deg, #6B8FC4, #3A5A8A);\n            transform: scaleX(0);\n            transition: transform 0.4s ease;\n        }\n\n        .lp360-ot-card:hover::after {\n            transform: scaleX(1);\n        }\n\n        .lp360-ot-card .lp360-ot-icon {\n            width: clamp(36px, 6vw, 48px);\n            height: clamp(36px, 6vw, 48px);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 0 auto var(--lp-space-2);\n            background: rgba(255, 255, 255, 0.15);\n            color: #ffffff;\n            transition: all 0.3s ease;\n        }\n\n        .lp360-ot-card .lp360-ot-icon:hover {\n            background: rgba(255, 255, 255, 0.25);\n            color: #ffffff;\n            transform: scale(1.1) rotate(-5deg);\n            box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);\n        }\n\n        .lp360-ot-card .lp360-ot-icon svg {\n            width: clamp(15px, 2.6vw, 20px);\n            height: clamp(15px, 2.6vw, 20px);\n        }\n\n        .lp360-ot-card .lp360-ot-label {\n            font-size: clamp(9px, 1.3vw, 12px);\n            font-weight: 700;\n            text-transform: uppercase;\n            letter-spacing: 0.6px;\n            color: rgba(255, 255, 255, 0.7);\n            margin-bottom: var(--lp-space-2);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ot-card .lp360-ot-label {\n                letter-spacing: 0.8px;\n            }\n        }\n\n        .lp360-ot-card .lp360-ot-number {\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: clamp(28px, 4.8vw, 42px);\n            font-weight: 800;\n            color: #FFA500;\n            line-height: 1;\n            display: inline-flex;\n            align-items: baseline;\n            gap: 2px;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ot-card .lp360-ot-number {\n                font-size: 32px;\n            }\n        }\n\n        @media (min-width: 900px) {\n            .lp360-ot-card .lp360-ot-number {\n                font-size: 42px;\n            }\n        }\n\n        .lp360-ot-card .lp360-ot-number .lp360-ot-unit {\n            font-size: clamp(12px, 1.8vw, 16px);\n            font-weight: 600;\n            color: rgba(255, 255, 255, 0.6);\n            margin-left: 2px;\n            display: inline;\n        }\n\n        .lp360-ot-card .lp360-ot-desc {\n            font-size: clamp(10px, 1.3vw, 12px);\n            color: rgba(255, 255, 255, 0.6);\n            margin-top: var(--lp-space-2);\n        }\n\n        .lp360-ot-category-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: var(--lp-space-2);\n            margin-top: var(--lp-space-3);\n            padding-top: var(--lp-space-3);\n            border-top: 1px solid var(--lp-border-subtle);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ot-category-grid {\n                grid-template-columns: repeat(3, 1fr);\n                gap: var(--lp-space-3);\n                margin-top: var(--lp-space-4);\n                padding-top: var(--lp-space-4);\n            }\n        }\n\n        .lp360-ot-cat {\n            display: flex;\n            align-items: center;\n            gap: var(--lp-space-3);\n            padding: var(--lp-space-2) var(--lp-space-3);\n            background: #f8fafc;\n            border-radius: var(--lp-radius-sm);\n            border: 1px solid #f1f5f9;\n            transition: all 0.2s ease;\n        }\n\n        .lp360-ot-cat:hover {\n            background: #fff;\n            border-color: var(--lp-border-subtle);\n            box-shadow: var(--lp-shadow-sm);\n        }\n\n        .lp360-ot-cat .lp360-ot-cat-dot {\n            width: clamp(8px, 1.2vw, 10px);\n            height: clamp(8px, 1.2vw, 10px);\n            border-radius: 50%;\n            flex-shrink: 0;\n        }\n\n        .lp360-ot-cat .lp360-ot-cat-dot--direct {\n            background: var(--lp-green);\n        }\n        .lp360-ot-cat .lp360-ot-cat-dot--indirect {\n            background: var(--lp-amber);\n        }\n        .lp360-ot-cat .lp360-ot-cat-dot--complex {\n            background: var(--lp-red);\n        }\n\n        .lp360-ot-cat .lp360-ot-cat-label {\n            font-size: clamp(11px, 1.4vw, 13px);\n            font-weight: 600;\n            color: var(--lp-text-dark);\n        }\n\n        \/* ---- TRACKER SECTION \u2014 updated code only ---- *\/\n        #lp360-section-tracker {\n            display: grid;\n            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n            gap: var(--lp-space-5);\n            align-items: start;\n            overflow: hidden;\n        }\n\n        #lp360-section-tracker .lp360-main-tracker-header {\n            grid-column: 1 \/ -1;\n        }\n\n        #lp360-section-tracker .lp360-tracker-card,\n        #lp360-section-tracker .lp360-accuracy-card {\n            min-width: 0;\n            margin: 0;\n            padding: var(--lp-space-4);\n            overflow: visible;\n            background: #ffffff;\n            border: 1px solid var(--lp-border-subtle);\n            border-radius: var(--lp-radius-md);\n            box-shadow: var(--lp-shadow-sm);\n        }\n\n        #lp360-section-tracker .lp360-tracker-card {\n            grid-column: 1;\n        }\n\n        #lp360-section-tracker .lp360-accuracy-card {\n            grid-column: 2;\n        }\n\n        #lp360-section-tracker .lp360-tracker-header {\n            margin-bottom: var(--lp-space-3);\n        }\n\n        #lp360-section-tracker .lp360-tracker-title {\n            margin: 0 0 2px;\n            color: var(--lp-text-dark);\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: 20px;\n            font-weight: 800;\n            letter-spacing: 0;\n        }\n\n        #lp360-section-tracker .lp360-tracker-title span {\n            color: var(--lp-brand-light);\n        }\n\n        #lp360-section-tracker .lp360-section-description {\n            margin: 12px 0 16px;\n            padding: 12px 18px;\n            color: #3d3f4b;\n            background: #fcf8f3;\n            border-left: 4px solid var(--lp-brand-light);\n            border-radius: var(--lp-radius-sm);\n            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);\n            font-size: 11.5px;\n            font-weight: 500;\n            line-height: 1.6;\n        }\n\n        #lp360-section-tracker .lp360-section-description p {\n            margin: 0;\n        }\n\n        #lp360-section-tracker .lp360-tracker-chart-wrap {\n            position: relative;\n            width: 100%;\n            padding: 4px;\n            overflow: visible;\n            background: #fafaf9;\n            border-radius: var(--lp-radius-sm);\n            box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.02);\n        }\n\n        #lp360-tracker-canvas,\n        #lp360-accuracy-canvas {\n            display: block;\n            width: 100%;\n            height: auto;\n            background: #ffffff;\n            border-radius: var(--lp-radius-xs);\n            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);\n            cursor: crosshair;\n        }\n\n        #lp360-section-tracker .lp360-tracker-chart-wrap.has-inference canvas {\n            filter: blur(6px);\n            pointer-events: none;\n            user-select: none;\n            transition: filter 0.4s ease;\n        }\n\n        #lp360-section-tracker .lp360-tracker-overlay {\n            display: none;\n            position: absolute;\n            inset: 0;\n            z-index: 10;\n            align-items: center;\n            justify-content: center;\n            padding: var(--lp-space-4);\n            pointer-events: none;\n        }\n\n        #lp360-section-tracker .lp360-tracker-chart-wrap.has-inference .lp360-tracker-overlay {\n            display: flex;\n        }\n\n        #lp360-section-tracker .lp360-tracker-overlay__card {\n            width: auto;\n            max-width: 280px;\n            padding: var(--lp-space-4);\n            text-align: center;\n            background: rgba(255, 255, 255, 0.94);\n            border-radius: var(--lp-radius-md);\n            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(232, 93, 58, 0.2) inset;\n            backdrop-filter: blur(10px);\n            -webkit-backdrop-filter: blur(10px);\n        }\n\n        #lp360-section-tracker .lp360-tracker-overlay__card h3 {\n            margin: 0 0 6px;\n            color: var(--lp-text-dark);\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: 14px;\n            font-weight: 800;\n        }\n\n        #lp360-section-tracker .lp360-tracker-overlay__card p {\n            margin: 0;\n            color: #374151;\n            font-size: 12px;\n            line-height: 1.5;\n        }\n\n        #lp360-section-tracker .lp360-tracker-overlay__icon {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 36px;\n            height: 36px;\n            margin: 0 auto 10px;\n            color: #ffffff;\n            background: linear-gradient(135deg, var(--lp-brand-light), var(--lp-gold));\n            border-radius: 50%;\n            box-shadow: 0 6px 16px rgba(232, 93, 58, 0.3);\n        }\n\n        #lp360-section-tracker .lp360-tracker-overlay__icon svg {\n            width: 16px;\n            height: 16px;\n        }\n\n        @media (max-width: 900px) {\n            #lp360-section-tracker {\n                grid-template-columns: 1fr;\n            }\n\n            #lp360-section-tracker .lp360-tracker-card,\n            #lp360-section-tracker .lp360-accuracy-card {\n                grid-column: 1;\n            }\n\n            #lp360-section-tracker .lp360-tracker-chart-wrap {\n                overflow-x: auto;\n                -webkit-overflow-scrolling: touch;\n            }\n\n            #lp360-section-tracker .lp360-tracker-chart-wrap canvas {\n                min-width: 500px;\n                width: auto;\n                height: auto;\n            }\n        }\n\n        @media (max-width: 640px) {\n            #lp360-section-tracker {\n                padding: 14px;\n                gap: 14px;\n            }\n\n            #lp360-section-tracker .lp360-tracker-card,\n            #lp360-section-tracker .lp360-accuracy-card {\n                padding: 12px;\n            }\n\n            #lp360-section-tracker .lp360-tracker-title {\n                font-size: 18px;\n            }\n\n            #lp360-section-tracker .lp360-tracker-chart-wrap canvas {\n                min-width: 400px;\n            }\n        }\n\n        \/* ---- ANSWER KEY ---- *\/\n        .lp360-answer-key-wrap {\n            background: #f8fafc;\n            border: 1px solid var(--lp-border-subtle);\n            border-radius: var(--lp-radius-md);\n            padding: var(--lp-space-3);\n            box-shadow: var(--lp-shadow-sm);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-answer-key-wrap {\n                padding: var(--lp-space-5);\n                border-radius: var(--lp-radius-lg);\n            }\n        }\n\n        .lp360-answer-key-summary {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: var(--lp-space-2);\n            margin-bottom: var(--lp-space-4);\n        }\n\n        @media (min-width: 640px) {\n            .lp360-answer-key-summary {\n                grid-template-columns: repeat(4, 1fr);\n                gap: var(--lp-space-3);\n            }\n        }\n\n        .lp360-ak-statbox {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: 12px;\n            border-radius: var(--lp-radius-md);\n            border: 1px solid var(--lp-border-subtle);\n            background: #fff;\n            box-shadow: var(--lp-shadow-sm);\n        }\n\n        .lp360-ak-statbox span {\n            font-size: clamp(10px, 1.2vw, 12px);\n            font-weight: 600;\n            color: var(--lp-text-gray);\n            margin-bottom: 4px;\n        }\n\n        .lp360-ak-statbox strong {\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: clamp(18px, 2.5vw, 22px);\n            font-weight: 800;\n        }\n\n        .lp360-ak-statbox--total { border-top: 3px solid #3b82f6; }\n        .lp360-ak-statbox--total strong { color: #3b82f6; }\n\n        .lp360-ak-statbox--correct { border-top: 3px solid var(--lp-green); }\n        .lp360-ak-statbox--correct strong { color: var(--lp-green); }\n\n        .lp360-ak-statbox--incorrect { border-top: 3px solid var(--lp-red); }\n        .lp360-ak-statbox--incorrect strong { color: var(--lp-red); }\n\n        .lp360-ak-statbox--unattempted { border-top: 3px solid #94a3b8; }\n        .lp360-ak-statbox--unattempted strong { color: #64748b; }\n\n        .lp360-ak-filters {\n            display: flex;\n            gap: 8px;\n            margin-bottom: var(--lp-space-4);\n            overflow-x: auto;\n            padding-bottom: 4px;\n        }\n\n        .lp360-ak-filter-btn {\n            background: #fff;\n            border: 1px solid var(--lp-border-subtle);\n            border-radius: 999px;\n            padding: 6px 14px;\n            font-size: 12px;\n            font-weight: 600;\n            color: var(--lp-text-gray);\n            cursor: pointer;\n            white-space: nowrap;\n            transition: all 0.2s ease;\n        }\n\n        .lp360-ak-filter-btn:hover {\n            border-color: var(--lp-brand-light);\n            color: var(--lp-brand-light);\n        }\n\n        .lp360-ak-filter-btn.active {\n            background: var(--lp-brand-light);\n            border-color: var(--lp-brand-light);\n            color: #fff;\n        }\n\n        .lp360-answer-key-grid {\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-answer-key-grid {\n                gap: 20px;\n            }\n        }\n\n        .lp360-ak-card {\n            background: #fff;\n            border: 1px solid var(--lp-border-subtle);\n            border-radius: 12px;\n            padding: 16px;\n            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);\n            position: relative;\n            overflow: hidden;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-ak-card {\n                padding: 20px 24px;\n                border-radius: 16px;\n            }\n        }\n\n        .lp360-ak-card::before {\n            content: '';\n            position: absolute;\n            left: 0;\n            top: 0;\n            bottom: 0;\n            width: 4px;\n            background: #94a3b8;\n        }\n        \n        .lp360-ak-card--correct::before { background: var(--lp-green); }\n        .lp360-ak-card--incorrect::before { background: var(--lp-red); }\n        .lp360-ak-card--unattempted::before { background: #94a3b8; }\n\n        .lp360-ak-card-header {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            margin-bottom: 12px;\n            flex-wrap: wrap;\n        }\n\n        .lp360-ak-qnum {\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: 14px;\n            font-weight: 800;\n            color: var(--lp-text-dark);\n        }\n\n        .lp360-ak-status-pill {\n            font-size: 10px;\n            font-weight: 700;\n            padding: 2px 8px;\n            border-radius: 4px;\n            letter-spacing: 0.5px;\n        }\n\n        .lp360-ak-status-pill--correct { background: #dcfce7; color: #166534; }\n        .lp360-ak-status-pill--incorrect { background: #fee2e2; color: #991b1b; }\n        .lp360-ak-status-pill--unattempted { background: #f1f5f9; color: #475569; }\n\n        .lp360-ak-topic {\n            font-size: 11px;\n            font-weight: 600;\n            color: var(--lp-brand-light);\n            background: #fff7ed;\n            padding: 2px 8px;\n            border-radius: 999px;\n            border: 1px solid #fed7aa;\n        }\n\n        .lp360-ak-qtext {\n            font-size: 14px;\n            line-height: 1.6;\n            color: var(--lp-text-dark);\n            margin-bottom: 16px;\n        }\n        \n        .lp360-ak-qtext img {\n            max-width: 100%;\n            height: auto;\n            display: block;\n            margin: 8px 0;\n            border-radius: 4px;\n        }\n\n        .lp360-ak-ncert {\n            display: inline-block;\n            font-size: 11px;\n            font-weight: 600;\n            color: #3b82f6;\n            background: #eff6ff;\n            padding: 4px 10px;\n            border-radius: 4px;\n            margin-bottom: 16px;\n            border: 1px solid #bfdbfe;\n        }\n\n        .lp360-ak-code {\n            background: #1e293b;\n            color: #f8fafc;\n            padding: 12px 16px;\n            border-radius: 8px;\n            font-family: 'Fira Code', 'Courier New', monospace;\n            font-size: 13px;\n            overflow-x: auto;\n            margin-bottom: 16px;\n        }\n\n        .lp360-ak-options {\n            display: flex;\n            flex-direction: column;\n            gap: 8px;\n            margin-bottom: 16px;\n        }\n\n        .lp360-ak-option {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 12px 16px;\n            border: 1px solid var(--lp-border-subtle);\n            border-radius: 8px;\n            background: #fff;\n            position: relative;\n        }\n\n        .lp360-ak-option--correct {\n            border-color: var(--lp-green);\n            background: #f0fdf4;\n        }\n\n        .lp360-ak-option--wrong {\n            border-color: var(--lp-red);\n            background: #fef2f2;\n        }\n\n        .lp360-ak-opt-label {\n            font-weight: 700;\n            font-size: 13px;\n            color: var(--lp-text-gray);\n            background: #f1f5f9;\n            min-width: 24px;\n            height: 24px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border-radius: 4px;\n        }\n\n        .lp360-ak-option--correct .lp360-ak-opt-label {\n            background: #dcfce7;\n            color: #166534;\n        }\n\n        .lp360-ak-option--wrong .lp360-ak-opt-label {\n            background: #fee2e2;\n            color: #991b1b;\n        }\n\n        .lp360-ak-opt-text {\n            font-size: 13px;\n            color: var(--lp-text-dark);\n            line-height: 1.5;\n            flex: 1;\n        }\n\n        .lp360-ak-opt-text img {\n            max-width: 100px;\n            height: auto;\n            vertical-align: middle;\n        }\n\n        .lp360-ak-opt-tag {\n            font-size: 10px;\n            font-weight: 800;\n            color: #166534;\n            background: #dcfce7;\n            padding: 2px 6px;\n            border-radius: 4px;\n            margin-left: auto;\n        }\n\n        .lp360-ak-explanations {\n            margin-top: 16px;\n            border-top: 1px dashed var(--lp-border-subtle);\n            padding-top: 16px;\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n        }\n\n        .lp360-ak-explanation {\n            background: #f8fafc;\n            border-radius: 8px;\n            padding: 12px 16px;\n            border-left: 3px solid #cbd5e1;\n        }\n\n        .lp360-ak-explanation--short { border-left-color: #f59e0b; }\n        .lp360-ak-explanation--correct { border-left-color: var(--lp-green); }\n        .lp360-ak-explanation--why-other { border-left-color: var(--lp-red); }\n        .lp360-ak-explanation--strategy { border-left-color: #3b82f6; }\n        .lp360-ak-explanation--memory-trick { border-left-color: #a855f7; }\n\n        .lp360-ak-ex-title {\n            font-size: 12px;\n            font-weight: 700;\n            color: var(--lp-text-dark);\n            margin-bottom: 6px;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n\n        .lp360-ak-ex-content {\n            font-size: 13px;\n            line-height: 1.6;\n            color: var(--lp-text-gray);\n        }\n        \n        .lp360-ak-ex-content p:last-child {\n            margin-bottom: 0;\n        }\n\n        .lp360-answer-key-placeholder {\n            padding: 28px 16px;\n            border: 1.5px dashed #cbd5e1;\n            border-radius: var(--lp-radius-md);\n            background: #f8fafc;\n            color: #64748b;\n            font-size: clamp(11px, 1.4vw, 13px);\n            line-height: 1.6;\n            text-align: center;\n        }\n\n        @media (min-width: 640px) {\n            .lp360-answer-key-placeholder {\n                padding: 36px 20px;\n            }\n        }\n\n        \/* ---- Extra small screens ---- *\/\n        @media (max-width: 380px) {\n            .lp360-shell {\n                padding: var(--lp-space-2);\n            }\n\n            .lp360-section-card {\n                padding: var(--lp-space-2);\n                border-radius: var(--lp-radius-sm);\n            }\n\n            .lp360-hero-card {\n                padding: var(--lp-space-2);\n            }\n\n            .lp360-gauge-wrap {\n                width: 110px;\n                height: 110px;\n            }\n\n            .lp360-gauge-value {\n                font-size: 22px;\n            }\n\n            .lp360-gauge-value small {\n                font-size: 12px;\n            }\n\n            .lp360-gauge-label {\n                font-size: 7px;\n                letter-spacing: 1px;\n            }\n\n            .lp360-gauge-minibar {\n                width: 50%;\n                max-width: 70px;\n                height: 4px;\n            }\n\n            .lp360-hero-metric-value {\n                font-size: 16px;\n                padding: 3px 8px;\n                min-width: 50px;\n            }\n\n            .lp360-icon-badge {\n                width: 30px;\n                height: 30px;\n            }\n\n            .lp360-icon-badge svg {\n                width: 14px;\n                height: 14px;\n            }\n\n            .lp360-time-card .lp360-time-card-value {\n                font-size: 16px;\n                padding: 3px 8px;\n            }\n\n            .lp360-time-card .lp360-time-card-label {\n                font-size: 8px;\n            }\n\n            .lp360-tab-btn {\n                padding: 3px 7px;\n                font-size: 9px;\n            }\n\n            .lp360-tab-btn .lp360-tab-icon {\n                width: 11px;\n                height: 11px;\n            }\n\n            .lp360-dm-table {\n                min-width: 220px;\n                font-size: 9px;\n            }\n\n            .lp360-dm-table thead th {\n                font-size: 7px;\n                padding: 4px 4px;\n            }\n\n            .lp360-dm-table tbody td {\n                font-size: 10px;\n                padding: 3px 3px;\n            }\n\n            .lp360-dm-chip {\n                font-size: 8px;\n                padding: 1px 4px;\n            }\n\n            .lp360-answer-key-grid {\n                grid-template-columns: 1fr;\n            }\n\n            .lp360-score-pred-ring {\n                width: 140px;\n                height: 140px;\n            }\n\n            .lp360-score-pred-ring-inner {\n                width: 114px;\n                height: 114px;\n                padding: 6px;\n            }\n\n            .lp360-score-pred-ring-inner .lp360-big-score {\n                font-size: 28px;\n            }\n\n            .lp360-score-pred-ring-inner .lp360-score-max {\n                font-size: 12px;\n            }\n\n            .lp360-ot-card .lp360-ot-number {\n                font-size: 24px;\n            }\n\n            .lp360-ot-card .lp360-ot-number .lp360-ot-unit {\n                font-size: 11px;\n            }\n        }\n\n        \/* ---- Scroll animation ---- *\/\n        .lp360-section-card {\n            opacity: 0;\n            transform: translateY(40px);\n            transition: opacity 0.7s ease, transform 0.7s ease;\n        }\n\n        .lp360-section-card.visible {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        \/* ---- Container for mind map responsive grid ---- *\/\n        #lp360-mindmap-container .lp360-mm-grid {\n            display: flex;\n            flex-direction: column;\n            gap: var(--lp-space-3);\n            min-height: 200px;\n            position: relative;\n            z-index: 2;\n            align-items: center;\n        }\n\n        @media (min-width: 768px) {\n            #lp360-mindmap-container .lp360-mm-grid {\n                display: grid;\n                grid-template-columns: 1.2fr 0.8fr 0.7fr 0.8fr 1.2fr;\n                align-items: center;\n                gap: 4px;\n                min-height: 260px;\n            }\n        }\n\n        \/* ---- Ensure canvas elements are responsive ---- *\/\n        canvas {\n            max-width: 100% !important;\n            height: auto !important;\n        }\n\n        \/* ---- Fix for very small screens ---- *\/\n        @media (max-width: 360px) {\n            .lp360-tabs {\n                gap: 2px;\n            }\n            .lp360-tab-btn {\n                padding: 2px 5px;\n                font-size: 8px;\n                border-width: 1px;\n            }\n            .lp360-tab-btn .lp360-tab-icon {\n                width: 10px;\n                height: 10px;\n            }\n            .lp360-hero-metric-value {\n                font-size: 14px;\n                padding: 2px 6px;\n                min-width: 40px;\n            }\n            .lp360-gauge-wrap {\n                width: 95px;\n                height: 95px;\n            }\n            .lp360-gauge-value {\n                font-size: 19px;\n            }\n            .lp360-gauge-value small {\n                font-size: 10px;\n            }\n        }\n\n        \/* ---- MIND MAP REDESIGN (screenshot style) ---- *\/\n        .lp360-mm-heading {\n            font-size: clamp(22px, 3vw, 28px);\n            font-weight: 800;\n            font-family: 'Sora', 'Inter', sans-serif;\n            margin: 0 0 var(--lp-space-3);\n            color: #0f172a;\n            letter-spacing: -0.3px;\n        }\n\n        .lp360-mm-heading span {\n            color: var(--lp-brand-light);\n        }\n\n        .lp360-mm-intro {\n            margin-bottom: var(--lp-space-3);\n            padding: 14px 18px;\n            background: #f0ece7;\n            border-radius: 14px;\n            border-left: 4px solid var(--lp-brand-light);\n            font-size: clamp(12px, 1.5vw, 14px);\n            line-height: 1.65;\n            color: #334155;\n        }\n\n        .lp360-mm-intro p {\n            margin: 0;\n        }\n\n        .lp360-mm-source-pill {\n            display: inline-flex;\n            align-items: center;\n            margin-bottom: var(--lp-space-4);\n            padding: 10px 16px;\n            border-radius: 999px;\n            background: #f7ead8;\n            border: 1px solid #efc58c;\n            color: #b36800;\n            font-size: clamp(12px, 1.35vw, 14px);\n            font-weight: 700;\n            line-height: 1.35;\n        }\n\n        #lp360-mindmap-container {\n            background: #fcfbfa;\n            border: 1.5px dashed rgba(255, 122, 61, 0.85);\n            border-radius: 18px;\n            padding: 14px;\n            min-height: 340px;\n            overflow: hidden;\n            margin-bottom: var(--lp-space-4);\n        }\n\n        @media (min-width: 768px) {\n            #lp360-mindmap-container {\n                padding: 18px 16px;\n                min-height: 430px;\n            }\n        }\n\n        #lp360-mindmap-container .lp360-mm-grid {\n            min-height: 300px;\n            gap: 10px;\n            align-items: center;\n        }\n\n        @media (min-width: 768px) {\n            #lp360-mindmap-container .lp360-mm-grid {\n                grid-template-columns: 1.55fr 0.95fr 0.92fr 0.95fr 1.55fr;\n                min-height: 370px;\n                gap: 10px;\n            }\n        }\n\n        #lp360-mm-detailed-col,\n        #lp360-mm-basic-col {\n            align-items: stretch !important;\n            justify-content: center;\n            gap: 8px !important;\n        }\n\n        @media (min-width: 768px) {\n            #lp360-mm-detailed-col {\n                padding-right: 8px;\n            }\n\n            #lp360-mm-basic-col {\n                padding-left: 8px;\n            }\n        }\n\n        #lp360-mindmap-container .lp360-mm-node {\n            justify-content: center;\n            min-height: 54px;\n            padding: 14px 22px;\n            border-radius: 16px;\n            background: #ffffff;\n            box-shadow: none;\n            font-size: clamp(13px, 1.5vw, 15px);\n            white-space: nowrap;\n        }\n\n        #lp360-mindmap-container .lp360-mm-node--detailed {\n            border: 2px solid var(--lp-brand-light);\n            color: var(--lp-brand-light);\n        }\n\n        #lp360-mindmap-container .lp360-mm-node--basic {\n            border: 2px solid var(--lp-green);\n            color: #159947;\n        }\n\n        #lp360-mindmap-container .lp360-mm-node--center {\n            min-height: 68px;\n            padding: 16px 26px;\n            border: 2px solid #2b3443;\n            color: #162033;\n            font-size: clamp(14px, 1.8vw, 16px);\n        }\n\n        .lp360-mm-topic {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 100%;\n            min-height: 38px;\n            padding: 10px 16px;\n            border-radius: 10px;\n            text-align: center;\n            white-space: normal;\n            overflow: visible;\n            text-overflow: unset;\n            line-height: 1.3;\n            font-size: clamp(11px, 1.35vw, 13px);\n            box-shadow: none;\n            border: 1px solid transparent;\n        }\n\n        .lp360-mm-topic--detailed {\n            background: #ead8c4;\n            color: #9a5405;\n            border-color: #e4ccb0;\n        }\n\n        .lp360-mm-topic--basic {\n            background: #cfe0d1;\n            color: #0a6b3b;\n            border-color: #c1d6c6;\n        }\n\n        .lp360-mindmap-overlay {\n            display: none !important;\n        }\n\n        .lp360-mm-summary-grid {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: var(--lp-space-3);\n            margin-top: var(--lp-space-2);\n        }\n\n        @media (min-width: 768px) {\n            .lp360-mm-summary-grid {\n                grid-template-columns: 1fr 1fr;\n            }\n        }\n\n        .lp360-mm-summary-card {\n            align-items: center;\n            justify-content: space-between;\n            gap: 14px;\n            padding: 16px 20px;\n            border-radius: 18px;\n            flex-wrap: nowrap;\n        }\n\n        .lp360-mm-summary-card--detailed {\n            background: #f3e7da;\n            border-color: #ebd5bf;\n        }\n\n        .lp360-mm-summary-card--basic {\n            background: #dce8dd;\n            border-color: #cfe0d1;\n        }\n\n        .lp360-mm-summary-card .lp360-mm-summary-icon {\n            width: 46px;\n            height: 46px;\n            flex-shrink: 0;\n        }\n\n        .lp360-mm-summary-card .lp360-mm-summary-label {\n            flex: 1;\n            min-width: 0;\n            position: relative;\n            gap: 3px;\n            padding-right: 10px;\n        }\n\n        .lp360-mm-summary-card .lp360-mm-summary-label::after {\n            content: '';\n            position: absolute;\n            left: 148px;\n            right: 0;\n            top: 18px;\n            border-top: 2px dotted rgba(148, 163, 184, 0.7);\n        }\n\n        .lp360-mm-summary-card .lp360-mm-summary-label strong {\n            font-size: clamp(16px, 2vw, 18px);\n        }\n\n        .lp360-mm-summary-card .lp360-mm-summary-label span {\n            font-size: clamp(11px, 1.3vw, 13px);\n        }\n\n        .lp360-mm-summary-card .lp360-mm-summary-count {\n            min-width: 52px;\n            text-align: center;\n            padding: 10px 14px;\n            border-radius: 12px;\n            font-size: clamp(28px, 3vw, 36px);\n            line-height: 1;\n            background: rgba(255, 255, 255, 0.35);\n        }\n\n        @media (max-width: 767px) {\n            .lp360-mm-summary-card {\n                flex-wrap: wrap;\n                align-items: flex-start;\n            }\n\n            .lp360-mm-summary-card .lp360-mm-summary-label::after {\n                display: none;\n            }\n\n            .lp360-mm-summary-card .lp360-mm-summary-count {\n                margin-left: auto;\n            }\n        }\n.lp360-mm-summary-card .lp360-mm-summary-count {\n                margin-left: auto;\n            }\n        }\n\n        \/* ---- MASTERY (no weak topics) BLUR STATE ---- *\/\n        #lp360-mindmap-container.lp360-mm-mastery .lp360-mm-grid,\n        #lp360-mindmap-container.lp360-mm-mastery #lp360-mindmap-svg {\n            filter: blur(7px);\n            pointer-events: none;\n            user-select: none;\n            transition: filter 0.4s ease;\n        }\n\n        .lp360-mm-mastery-overlay {\n            display: none;\n            position: absolute;\n            inset: 0;\n            z-index: 20;\n            align-items: center;\n            justify-content: center;\n            padding: var(--lp-space-4);\n        }\n\n        #lp360-mindmap-container.lp360-mm-mastery .lp360-mm-mastery-overlay {\n            display: flex;\n        }\n\n        .lp360-mm-mastery-card {\n            background: rgba(255, 255, 255, 0.94);\n            backdrop-filter: blur(10px);\n            -webkit-backdrop-filter: blur(10px);\n            border-radius: var(--lp-radius-md);\n            padding: var(--lp-space-4) var(--lp-space-5);\n            max-width: 340px;\n            text-align: center;\n            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(34, 197, 94, 0.25) inset;\n            animation: lp360FadeIn 0.5s ease;\n        }\n\n        .lp360-mm-mastery-icon {\n            width: 44px;\n            height: 44px;\n            border-radius: 50%;\n            background: linear-gradient(135deg, var(--lp-green), #16a34a);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 0 auto 10px;\n            color: #fff;\n            box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35);\n        }\n\n        .lp360-mm-mastery-icon svg {\n            width: 20px;\n            height: 20px;\n        }\n\n        .lp360-mm-mastery-card h3 {\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: clamp(14px, 1.8vw, 16px);\n            font-weight: 800;\n            margin: 0 0 6px;\n            color: #14532d;\n        }\n\n        .lp360-mm-mastery-card p {\n            font-size: clamp(11px, 1.4vw, 13px);\n            line-height: 1.6;\n            color: #374151;\n            margin: 0;\n        }\n\n        #lp360-mm-summary-grid.lp360-mm-mastery-blur {\n            filter: blur(5px);\n            pointer-events: none;\n            user-select: none;\n            transition: filter 0.4s ease;\n        }\n\n            \/* ---- PREDICTION CONFIDENCE (additive) ---- *\/\n        .lp360-pred-confidence-tile {\n            display: flex;\n            align-items: center;\n            gap: var(--lp-space-3);\n            background: rgba(245, 158, 11, 0.1);\n            border: 1px solid rgba(245, 158, 11, 0.35);\n            border-radius: var(--lp-radius-md);\n            padding: var(--lp-space-3) var(--lp-space-4);\n        }\n\n        .lp360-pred-confidence-icon {\n            width: 34px;\n            height: 34px;\n            border-radius: 50%;\n            background: rgba(245, 158, 11, 0.18);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n        }\n\n        .lp360-pred-confidence-icon svg {\n            width: 16px;\n            height: 16px;\n            stroke: var(--lp-amber);\n        }\n\n        .lp360-pred-confidence-text {\n            flex: 1;\n            font-size: clamp(10px, 1.3vw, 12px);\n            line-height: 1.65;\n            color: #fde68a;\n            margin: 0;\n            font-weight: 600;\n            text-align: justify;\n        }\n\n        .lp360-pred-confidence-divider {\n            width: 1px;\n            align-self: stretch;\n            background: rgba(245, 158, 11, 0.3);\n            flex-shrink: 0;\n        }\n\n        .lp360-pred-confidence-stat {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            gap: 2px;\n            flex-shrink: 0;\n            min-width: 100px;\n            text-align: center;\n        }\n\n        .lp360-pred-confidence-label {\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: 9px;\n            font-weight: 800;\n            letter-spacing: 0.4px;\n            color: #fde68a;\n            text-transform: uppercase;\n            line-height: 1.3;\n        }\n\n        .lp360-pred-confidence-value {\n            font-family: 'Sora', 'Inter', sans-serif;\n            font-size: clamp(20px, 3vw, 24px);\n            font-weight: 800;\n            color: var(--lp-amber);\n            line-height: 1.2;\n        }\n\n               .lp360-pred-confidence-level {\n            font-family: 'Inter', sans-serif;\n            font-size: 9px;\n            font-weight: 800;\n            letter-spacing: 0.4px;\n            color: var(--lp-amber);\n            text-transform: uppercase;\n        }\n\n        .lp360-pred-confidence-value.conf-low,\n        .lp360-pred-confidence-level.conf-low { color: #EF4444; }\n        .lp360-pred-confidence-value.conf-moderate,\n        .lp360-pred-confidence-level.conf-moderate { color: #F59E0B; }\n        .lp360-pred-confidence-value.conf-high,\n        .lp360-pred-confidence-level.conf-high,\n        .lp360-pred-confidence-value.conf-excellent,\n        .lp360-pred-confidence-level.conf-excellent { color: #22C55E; } \n\n        @media (max-width: 640px) {\n            .lp360-pred-confidence-tile {\n                flex-direction: column;\n                align-items: center;\n                text-align: center;\n            }\n            .lp360-pred-confidence-divider {\n                display: none;\n            }\n            .lp360-pred-confidence-stat {\n                order: -1;\n                flex-direction: row;\n                gap: 10px;\n            }\n            .lp360-pred-confidence-text {\n                text-align: justify;\n            }\n        }\n\n\/* Hide the WordPress page title \u2013 replace .entry-title with your actual class *\/\n        .entry-title {\n    display: none;\n}\n\/* ======================================================================\n   NO ATTEMPTS OVERLAY \u2014 full\u2011screen blur + premium red theme\n   ====================================================================== *\/\n.lp360-no-attempts-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: 99999;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(0, 0, 0, 0.55);\n    backdrop-filter: blur(12px) saturate(1.2);\n    -webkit-backdrop-filter: blur(12px) saturate(1.2);\n    padding: 20px;\n    animation: lp360FadeIn 0.5s ease;\n}\n\n.lp360-no-attempts-card {\n    background: #1a0a0a;\n    border-radius: 32px;\n    max-width: 560px;\n    width: 100%;\n    padding: 40px 32px 32px;\n    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(239, 68, 68, 0.25) inset, 0 0 0 2px rgba(255, 255, 255, 0.08) inset;\n    text-align: center;\n    animation: lp360PopoverSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n    position: relative;\n    overflow: hidden;\n}\n.lp360-no-attempts-card--red {\n    border-left: 5px solid #EF4444;\n}\n.lp360-no-attempts-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 5px;\n    background: linear-gradient(90deg, #EF4444, #F97316, #EF4444);\n    background-size: 200% 100%;\n    animation: lp360GradientMove 3s ease infinite;\n}\n.lp360-no-attempts-icon {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #EF4444, #DC2626);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 20px;\n    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.45);\n    animation: lp360WarningPulse 2.2s ease-in-out infinite;\n}\n@keyframes lp360WarningPulse {\n    0%, 100% { box-shadow: 0 10px 40px rgba(239, 68, 68, 0.45); }\n    50% { box-shadow: 0 10px 60px rgba(239, 68, 68, 0.75); }\n}\n.lp360-no-attempts-icon svg {\n    width: 44px;\n    height: 44px;\n    stroke: #fff;\n    stroke-width: 2;\n    fill: none;\n}\n.lp360-no-attempts-title {\n    font-family: 'Sora', 'Inter', sans-serif;\n    font-size: 26px;\n    font-weight: 800;\n    letter-spacing: -0.3px;\n    margin: 0 0 12px;\n    color: #ffffff;\n}\n.lp360-no-attempts-title--red {\n    color: #FCA5A5;\n}\n.lp360-no-attempts-message {\n    font-size: 17px;\n    line-height: 1.7;\n    color: #D1D5DB;\n    margin: 0 0 24px;\n}\n.lp360-no-attempts-badge {\n    display: inline-block;\n    padding: 14px 36px;\n    border-radius: 999px;\n    background: linear-gradient(90deg, #EF4444, #DC2626);\n    color: #fff;\n    font-weight: 700;\n    font-size: 15px;\n    letter-spacing: 0.5px;\n    text-transform: uppercase;\n    box-shadow: 0 8px 28px rgba(239, 68, 68, 0.35);\n    text-decoration: none;\n    transition: all 0.3s ease;\n    cursor: pointer;\n    border: none;\n}\n.lp360-no-attempts-badge:hover {\n    transform: translateY(-3px) scale(1.04);\n    box-shadow: 0 12px 40px rgba(239, 68, 68, 0.5);\n    background: linear-gradient(90deg, #F87171, #EF4444);\n}\n.lp360-no-attempts-badge:active {\n    transform: scale(0.97);\n}\n\n\/* Mobile adjustments *\/\n@media (max-width: 640px) {\n    .lp360-no-attempts-card {\n        padding: 28px 20px 24px;\n        border-radius: 24px;\n        max-width: 400px;\n    }\n    .lp360-no-attempts-title {\n        font-size: 22px;\n    }\n    .lp360-no-attempts-message {\n        font-size: 15px;\n    }\n    .lp360-no-attempts-icon {\n        width: 64px;\n        height: 64px;\n    }\n    .lp360-no-attempts-icon svg {\n        width: 34px;\n        height: 34px;\n    }\n    .lp360-no-attempts-badge {\n        padding: 12px 28px;\n        font-size: 13px;\n    }\n}\n@media (max-width: 480px) {\n    .lp360-no-attempts-card {\n        padding: 24px 16px 20px;\n        max-width: 340px;\n    }\n    .lp360-no-attempts-title {\n        font-size: 20px;\n    }\n    .lp360-no-attempts-message {\n        font-size: 14px;\n    }\n    .lp360-no-attempts-badge {\n        padding: 10px 22px;\n        font-size: 12px;\n    }\n}\n    <\/style>\n\n\n\n    <div id=\"lp360-root\">\n        <div class=\"lp360-shell\">\n\n            <!-- HEADER -->\n            <header class=\"lp360-page-header\">\n                <h1 class=\"lp360-page-title\">CUET <span>Launchpad 360<\/span><\/h1>\n            <\/header>\n\n            <!-- TABS -->\n            <nav class=\"lp360-tabs\" id=\"lp360-nav-tabs\">\n                <button class=\"lp360-tab-btn active\" data-target=\"basicinfo\">\n                    <svg viewBox=\"0 0 24 24\" class=\"lp360-tab-icon\"><path d=\"M12 2a10 10 0 100 20 10 10 0 000-20zm0 4v6l4 2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n                    Basic Info\n                <\/button>\n                <button class=\"lp360-tab-btn\" data-target=\"tracker\">\n                    <svg viewBox=\"0 0 24 24\" class=\"lp360-tab-icon\"><path d=\"M3 17l5-5 4 4 7-9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n                    Tracker\n                <\/button>\n                <button class=\"lp360-tab-btn\" data-target=\"strengthmap\">\n                    <svg viewBox=\"0 0 24 24\" class=\"lp360-tab-icon\"><path d=\"M5 12h14M12 5v14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><\/path><\/svg>\n                    Strength Map\n                <\/button>\n                <button class=\"lp360-tab-btn\" data-target=\"performance\">\n                    <svg viewBox=\"0 0 24 24\" class=\"lp360-tab-icon\"><path d=\"M4 20V10M12 20V4M20 20v-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><\/path><\/svg>\n                    Time Tracker\n                <\/button>\n                <button class=\"lp360-tab-btn\" data-target=\"predictions\">\n                    <svg viewBox=\"0 0 24 24\" class=\"lp360-tab-icon\"><path d=\"M12 2l2.6 6.6L21 9l-5 4.4L17.5 21 12 17l-5.5 4L8 13.4 3 9l6.4-.4z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n                    Predictions\n                <\/button>\n                <button class=\"lp360-tab-btn\" data-target=\"answerkey\">\n                    <svg viewBox=\"0 0 24 24\" class=\"lp360-tab-icon\"><path d=\"M5 6h14M5 12h10M5 18h6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><\/path><\/svg>\n                    Answer Key\n                <\/button>\n            <\/nav>\n\n            <!-- PROGRESS BAR -->\n            <div class=\"lp360-progress-bar\"><div class=\"lp360-progress-bar-fill\" id=\"lp360-progress-fill\"><\/div><\/div>\n\n            <!-- ========================================================== -->\n            <!-- SECTION 1: BASIC INFO                                       -->\n            <!-- ========================================================== -->\n            <section class=\"lp360-section-card\" id=\"lp360-section-basicinfo\" data-section=\"basicinfo\">\n                <div class=\"lp360-section-title\">\n                    <h2>Basic Info<\/h2>\n                    <span class=\"lp360-underline\"><\/span>\n                <\/div>\n                <div class=\"lp360-hero-card\">\n                    <div class=\"lp360-hero-gauge\">\n                        <div class=\"lp360-gauge-wrap\">\n                            <svg viewBox=\"0 0 260 260\" class=\"lp360-gauge-svg\">\n                                <defs><linearGradient id=\"lp360GaugeGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#FFC542\"><\/stop><stop offset=\"100%\" stop-color=\"#FF7A3D\"><\/stop><\/linearGradient><\/defs>\n                                <circle cx=\"130\" cy=\"130\" r=\"110\" class=\"lp360-gauge-track\"><\/circle>\n                                <circle cx=\"130\" cy=\"130\" r=\"110\" class=\"lp360-gauge-progress\" id=\"lp360-gauge-progress\" stroke=\"url(#lp360GaugeGrad)\" style=\"stroke-dasharray:691;stroke-dashoffset:691;\"><\/circle>\n                            <\/svg>\n                            <div class=\"lp360-gauge-center\">\n                                <span class=\"lp360-gauge-label\">YOUR SCORE<\/span>\n                                <div class=\"lp360-gauge-value\">\n                                    <span id=\"lp360-score-obtained\">0<\/span><small>\/<span id=\"lp360-score-total\">250<\/span><\/small>\n                                <\/div>\n                                <div class=\"lp360-gauge-minibar\">\n                                    <div class=\"lp360-gauge-minibar-fill\" id=\"lp360-gauge-minibar-fill\" style=\"width:0%;\"><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"lp360-hero-divider\"><\/div>\n                    <div class=\"lp360-hero-metric\">\n                        <div class=\"lp360-icon-badge lp360-icon-badge--cyan\">\n                            <svg viewBox=\"0 0 28 28\"><path d=\"M14 10v4l3 2M14 2a12 12 0 100 24 12 12 0 000-24z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n                        <\/div>\n                        <span class=\"lp360-hero-metric-label\">TIME USED<\/span>\n                        <div class=\"lp360-hero-metric-value\" id=\"lp360-time-used\">0s<\/div>\n                    <\/div>\n                    <div class=\"lp360-hero-divider\"><\/div>\n                    <div class=\"lp360-hero-metric\">\n                        <div class=\"lp360-icon-badge lp360-icon-badge--purple\">\n                            <svg viewBox=\"0 0 28 28\"><path d=\"M14 2l3 7.5L24 10l-5.5 5 2 7.5-6.5-4-6.5 4 2-7.5L4 10l7.5-.5z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n                        <\/div>\n                        <span class=\"lp360-hero-metric-label\">TOTAL ATTEMPT<\/span>\n                        <div class=\"lp360-hero-metric-value\" id=\"lp360-total-attempt\">0<\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Time Cards -->\n                <div class=\"lp360-time-cards\">\n                    <div class=\"lp360-time-card lp360-time-card--red\">\n                        <div class=\"lp360-icon-badge lp360-icon-badge--red-soft\">\n                            <svg viewBox=\"0 0 24 24\"><path d=\"M12 8v4l3 2M12 2a10 10 0 100 20 10 10 0 000-20z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n                        <\/div>\n                        <div class=\"lp360-time-card-label\">MAX TIME PER QUESTION<\/div>\n                        <div class=\"lp360-time-card-value\"><span id=\"lp360-max-time\">0s<\/span><\/div>\n                        <span class=\"lp360-mini-rule\"><\/span>\n                        <div class=\"lp360-time-card-badge\" id=\"lp360-max-tag\">Q\u2014<\/div>\n                    <\/div>\n                    <div class=\"lp360-time-card lp360-time-card--orange\">\n                        <div class=\"lp360-icon-badge lp360-icon-badge--orange-soft\">\n                            <svg viewBox=\"0 0 24 24\"><path d=\"M12 8v4l3 2M12 2a10 10 0 100 20 10 10 0 000-20z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n                        <\/div>\n                        <div class=\"lp360-time-card-label\">MIN TIME PER QUESTION<\/div>\n                        <div class=\"lp360-time-card-value\"><span id=\"lp360-min-time\">0s<\/span><\/div>\n                        <span class=\"lp360-mini-rule\"><\/span>\n                        <div class=\"lp360-time-card-badge\" id=\"lp360-min-tag\">Q\u2014<\/div>\n                    <\/div>\n                    <div class=\"lp360-time-card lp360-time-card--blue\">\n                        <div class=\"lp360-icon-badge lp360-icon-badge--blue-soft\">\n                            <svg viewBox=\"0 0 24 24\"><path d=\"M12 8v4l3 2M12 2a10 10 0 100 20 10 10 0 000-20z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n                        <\/div>\n                        <div class=\"lp360-time-card-label\">AVERAGE TIME PER QUESTION<\/div>\n                        <div class=\"lp360-time-card-value\"><span id=\"lp360-avg-time\">0s<\/span><\/div>\n                        <span class=\"lp360-mini-rule\"><\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Correct \/ Incorrect \/ Unattempted breakdown -->\n                <div class=\"lp360-breakdown-unified\">\n                    <div class=\"lp360-breakdown-col lp360-breakdown-col--green\">\n                        <div class=\"lp360-breakdown-head\">\n                            <div class=\"lp360-round-icon lp360-round-icon--green\">\n                                <svg viewBox=\"0 0 24 24\"><path d=\"M20 6L9 17l-5-5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n                            <\/div>\n                            <div>\n                                <div class=\"lp360-breakdown-label\">CORRECT<\/div>\n                                <div class=\"lp360-breakdown-total\" id=\"lp360-correct-total\">0<\/div>\n                            <\/div>\n                        <\/div>\n                        <ul class=\"lp360-breakdown-list\">\n                            <li><span class=\"lp360-mini-icon lp360-mini-icon--green\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/span>Single Attempt Correct <b id=\"lp360-correct-single\">0<\/b><\/li>\n                            <li><span class=\"lp360-mini-icon lp360-mini-icon--green\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/span>Multiple Attempt Correct <b id=\"lp360-correct-multiple\">0<\/b><\/li>\n                            <li><span class=\"lp360-mini-icon lp360-mini-icon--green\"><svg viewBox=\"0 0 24 24\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><\/circle><\/svg><\/span>Reviewed Attempt Correct <b id=\"lp360-correct-reviewed\">0<\/b><\/li>\n                            <li><span class=\"lp360-mini-icon lp360-mini-icon--green\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 4l14 8-14 8V4z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/span>Skipped Attempt Correct <b id=\"lp360-correct-skipped\">0<\/b><\/li>\n                        <\/ul>\n                    <\/div>\n                    <div class=\"lp360-breakdown-col lp360-breakdown-col--red\">\n                        <div class=\"lp360-breakdown-head\">\n                            <div class=\"lp360-round-icon lp360-round-icon--red\">\n                                <svg viewBox=\"0 0 24 24\"><path d=\"M18 6L6 18M6 6l12 12\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n                            <\/div>\n                            <div>\n                                <div class=\"lp360-breakdown-label\">INCORRECT<\/div>\n                                <div class=\"lp360-breakdown-total\" id=\"lp360-incorrect-total\">0<\/div>\n                            <\/div>\n                        <\/div>\n                        <ul class=\"lp360-breakdown-list\">\n                            <li><span class=\"lp360-mini-icon lp360-mini-icon--red\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/span>Single Attempt Incorrect <b id=\"lp360-incorrect-single\">0<\/b><\/li>\n                            <li><span class=\"lp360-mini-icon lp360-mini-icon--red\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/span>Multiple Attempt Incorrect <b id=\"lp360-incorrect-multiple\">0<\/b><\/li>\n                            <li><span class=\"lp360-mini-icon lp360-mini-icon--red\"><svg viewBox=\"0 0 24 24\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><\/circle><\/svg><\/span>Reviewed Attempt Incorrect <b id=\"lp360-incorrect-reviewed\">0<\/b><\/li>\n                            <li><span class=\"lp360-mini-icon lp360-mini-icon--red\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 4l14 8-14 8V4z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/span>Skipped Attempt Incorrect <b id=\"lp360-incorrect-skipped\">0<\/b><\/li>\n                        <\/ul>\n                    <\/div>\n                    <div class=\"lp360-breakdown-col lp360-breakdown-col--orange\">\n                        <div class=\"lp360-breakdown-head\">\n                            <div class=\"lp360-round-icon lp360-round-icon--orange\">\n                                <svg viewBox=\"0 0 24 24\"><path d=\"M12 17h.01M12 8v4M12 2a10 10 0 100 20 10 10 0 000-20z\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\n                            <\/div>\n                            <div>\n                                <div class=\"lp360-breakdown-label\">UNATTEMPTED<\/div>\n                                <div class=\"lp360-breakdown-total\" id=\"lp360-unattempted-total\">0<\/div>\n                            <\/div>\n                        <\/div>\n                        <ul class=\"lp360-breakdown-list\">\n                            <li><span class=\"lp360-mini-icon lp360-mini-icon--orange\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 4l14 8-14 8V4z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/span>Skipped <b id=\"lp360-unattempted-skipped\">0<\/b><\/li>\n                            <li><span class=\"lp360-mini-icon lp360-mini-icon--orange\"><svg viewBox=\"0 0 24 24\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><\/circle><\/svg><\/span>Reviewed Unattempted <b id=\"lp360-unattempted-reviewed\">0<\/b><\/li>\n                            <li><span class=\"lp360-mini-icon lp360-mini-icon--orange\"><svg viewBox=\"0 0 24 24\"><rect x=\"4\" y=\"3\" width=\"16\" height=\"18\" rx=\"2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><\/rect><path d=\"M8 8h8M8 12h8M8 16h5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><\/path><\/svg><\/span>Not Viewed <b id=\"lp360-unattempted-notviewed\">0<\/b><\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n\n                <!-- Decision Marker -->\n                <div class=\"lp360-decision-card\">\n                    <div class=\"lp360-section-title\">\n                        <h2>Decision <span>Marker<\/span><\/h2>\n                        <span class=\"lp360-underline\"><\/span>\n                    <\/div>\n                    <div class=\"lp360-section-description\">\n                        <p> The Decision Marker tracks your correct and incorrect questions during each ten minute interval. It reveals your pacing and question selection habits, helping you build a smarter exam strategy by showing exactly when you make mistakes.<\/p>\n                    <\/div>\n                    <div class=\"lp360-dm-table-scroll\">\n                        <table class=\"lp360-dm-table\" id=\"lp360-dm-table\">\n                            <thead>\n                                <tr>\n                                    <th class=\"lp360-dm-row-head-col\">Categories \/ Time intervals (min)<\/th>\n                                    <th>0-10 min<\/th>\n                                    <th>10-20 min<\/th>\n                                    <th>20-30 min<\/th>\n                                    <th>30-40 min<\/th>\n                                    <th>40-50 min<\/th>\n                                    <th>50-60 min<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody id=\"lp360-dm-tbody\">\n                            <\/tbody>\n                        <\/table>\n                    <\/div>\n                    <div class=\"lp360-dm-summary\">\n                        <div class=\"lp360-dm-summary-card lp360-dm-summary-card--blue\">\n                            <span class=\"lp360-dm-summary-icon\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><\/circle><path d=\"M12 4v16M4 12h16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><\/path><\/svg><\/span>\n                            <span class=\"lp360-dm-summary-value\" id=\"lp360-dm-attempt\">0<\/span>\n                            <span class=\"lp360-dm-summary-label\">Total Attempt<\/span>\n                        <\/div>\n                        <div class=\"lp360-dm-summary-card lp360-dm-summary-card--green\">\n                            <span class=\"lp360-dm-summary-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 6L9 17l-5-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/span>\n                            <span class=\"lp360-dm-summary-value\" id=\"lp360-dm-correct\">0<\/span>\n                            <span class=\"lp360-dm-summary-label\">Total Correct<\/span>\n                        <\/div>\n                        <div class=\"lp360-dm-summary-card lp360-dm-summary-card--red\">\n                            <span class=\"lp360-dm-summary-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 6L6 18M6 6l12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/span>\n                            <span class=\"lp360-dm-summary-value\" id=\"lp360-dm-incorrect\">0<\/span>\n                            <span class=\"lp360-dm-summary-label\">Total Incorrect<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- ========================================================== -->\n            <!-- SECTION 2: TRACKER                                         -->\n            <!-- ========================================================== -->\n            <section class=\"lp360-section-card\" id=\"lp360-section-tracker\" data-section=\"tracker\">\n                <div class=\"lp360-tracker-header lp360-main-tracker-header\">\n                    <h3 class=\"lp360-tracker-title\">Tracker<\/h3>\n                <\/div>\n\n                <div class=\"lp360-tracker-card\">\n                    <div class=\"lp360-tracker-header\">\n                        <h3 class=\"lp360-tracker-title\">Score <span>Tracker<\/span><\/h3>\n                    <\/div>\n                    <div class=\"lp360-section-description\">\n                        <p>The Score Tracker is a simple line graph that shows how your total marks increase or decrease as you answer more questions during the test. We track this to monitor your progress and see if your current attempting strategy is helping you gain marks steadily or causing you to lose points due to wrong answers<\/p>\n                    <\/div>\n                    <div class=\"lp360-tracker-chart-wrap\">\n                        <canvas id=\"lp360-tracker-canvas\" aria-label=\"Score tracker chart\"><\/canvas>\n                    <\/div>\n                <\/div>\n\n                <div class=\"lp360-accuracy-card\">\n                    <div class=\"lp360-tracker-header\">\n                        <h3 class=\"lp360-tracker-title\">Accuracy <span>Tracker<\/span><\/h3>\n                    <\/div>\n                    <div class=\"lp360-section-description\">\n                        <p> The Accuracy Tracker calculates the percentage of correct answers you provided in each time interval of the test. We monitor this to see if your accuracy drops and mistakes increase as the exam progresses, helping you identify when you need to slow down and stay careful.<\/p>\n                    <\/div>\n                    <div class=\"lp360-tracker-chart-wrap\">\n                        <canvas id=\"lp360-accuracy-canvas\" aria-label=\"Accuracy tracker chart\"><\/canvas>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- ========================================================== -->\n            <!-- SECTION 3: STRENGTH MAP                                    -->\n            <!-- ========================================================== -->\n            <section class=\"lp360-section-card\" id=\"lp360-section-strengthmap\" data-section=\"strengthmap\">\n                <div class=\"lp360-section-title\">\n                    <h2>Strength <span>Map<\/span><\/h2>\n                    <span class=\"lp360-underline\"><\/span>\n                <\/div>\n\n                <!-- NCERT Badge row -->\n                <div class=\"lp360-ncert-badge-row\">\n                    <div class=\"lp360-ncert-badge-icon\">\n                        <svg viewBox=\"0 0 24 24\" width=\"100%\" height=\"100%\">\n                            <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"#dc2626\"><\/circle>\n                            <circle cx=\"12\" cy=\"8\" r=\"4\" fill=\"#FFFFFF\"><\/circle>\n                            <path d=\"M12 14c-4.42 0-8 2.69-8 6v1h16v-1c0-3.31-3.58-6-8-6z\" fill=\"#FFFFFF\"><\/path>\n                        <\/svg>\n                    <\/div>\n                    <div class=\"lp360-ncert-badge-text-left\">\n                        <span class=\"lp360-ncert-badge-label\">YOUR BADGE<\/span>\n                        <span class=\"lp360-ncert-badge-value\" id=\"lp360-ncert-badge-value\" style=\"color:#dc2626;\">\u2014<\/span>\n                        <p class=\"lp360-ncert-badge-desc\" id=\"lp360-ncert-badge-desc\">\u2014<\/p>\n                    <\/div>\n                    <div class=\"lp360-ncert-divider\"><\/div>\n                    <div class=\"lp360-ncert-badge-desc-wrap\">\n                        <div class=\"lp360-ncert-desc-title\">\n                            <span class=\"lp360-ncert-desc-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><polyline points=\"14 2 14 8 20 8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/polyline><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/line><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/line><polyline points=\"10 9 9 9 8 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/polyline><\/svg><\/span>\n                            <h4>Description<\/h4>\n                        <\/div>\n                        <p class=\"lp360-ncert-badge-desc-right\" id=\"lp360-ncert-badge-desc-right\"> The Strength Map visually displays your conceptual knowledge across all exam topics, awarding you special badges that reflect your true learning capability. The TSI (Topic Strength Index) provides a clear percentage score of your mastery over each specific subject area. It uses color coding, where red highlights topics needing focused revision, while green confirms your complete mastery, instantly revealing your academic strengths.<\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- TSI Band -->\n                <div class=\"lp360-ncert-band-card\">\n                    <div class=\"lp360-ncert-band-head\">\n                        <span class=\"lp360-round-icon lp360-round-icon--peach\"><svg viewBox=\"0 0 24 24\"><path d=\"M4 20V10M12 20V4M20 20v-7\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\"><\/path><\/svg><\/span>\n                        <h3>Topic Strength Band<\/h3>\n                    <\/div>\n                    <div class=\"lp360-band-wrap\">\n                        <div class=\"lp360-band-tsi-badge\" id=\"lp360-tsi-badge\" style=\"left:0%;\">TSI: <span id=\"lp360-tsi-value\">0<\/span><\/div>\n                        <div class=\"lp360-band-track\">\n                            <div class=\"lp360-band-marker\" id=\"lp360-band-marker\" style=\"left:0%;\"><\/div>\n                        <\/div>\n                        <div class=\"lp360-band-scale\">\n                            <span class=\"lp360-band-scale-label\" style=\"color:var(--lp-red);\">Weak<\/span>\n                            <span class=\"lp360-band-scale-label\" style=\"color:var(--lp-orange2);\">Moderate<\/span>\n                            <span class=\"lp360-band-scale-label\" style=\"color:var(--lp-green);\">Strong<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"lp360-band-poor\" id=\"lp360-band-poor\" style=\"display:none;\">\n                        <svg viewBox=\"0 0 24 24\" style=\"width:18px;height:18px;flex-shrink:0;\">\n                            <path d=\"M12 9v4m0 4h.01M10.3 3.86L1.8 18a2 2 0 001.7 3h16.9a2 2 0 001.7-3L13.7 3.86a2 2 0 00-3.4 0z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n                        <\/svg>\n                        Very poor knowledge on the topic, so you need to try again after studying, so that the algorithm can generate accurate results from a more correctly answered test.\n                    <\/div>\n                <\/div>\n\n                <!-- Inference -->\n                <div class=\"lp360-ncert-analysis-card\">\n                    <div class=\"lp360-ncert-analysis-content\">\n                        <div class=\"lp360-ncert-analysis-header\">\n                            <span class=\"lp360-round-icon lp360-round-icon--blue\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 21h6M12 2v2M12 17a5 5 0 100-10 5 5 0 000 10z\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/span>\n                            <h3>Topic Inference<\/h3>\n                        <\/div>\n                        <p id=\"lp360-topic-inference-text\">\u2014<\/p>\n                    <\/div>\n                    <div class=\"lp360-ncert-analysis-image\">\n                        <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/3242\/3242257.png\" alt=\"Inference Book\">\n                    <\/div>\n                <\/div>\n\n                <!-- MIND MAP -->\n                <div style=\"margin-top:var(--lp-space-4);border-top:1px solid var(--lp-border-subtle);padding-top:var(--lp-space-4);\">\n                    <h3 class=\"lp360-mm-heading\">Mind <span>Map<\/span><\/h3>\n\n                    <div class=\"lp360-mm-intro\">\n                        <p> The Mind Maps visually highlight the specific topics where you lost marks by dividing them into detailed study and basic study categories. Detailed study topics are topic which u are highly in need of more concentrated study, while basic study means u have some understanding, but more work will lead to higher chance of correct answers. This helps you create a highly targeted revision schedule so you can thoroughly relearn completely weak areas.<\/p>\n                    <\/div>\n\n                    <div class=\"lp360-mm-source-pill\" id=\"lp360-mm-source-pill\" style=\"display:none;\">Source: \u2014<\/div>\n\n                    <!-- Mind Map Container -->\n                    <div id=\"lp360-mindmap-container\">\n                        <svg id=\"lp360-mindmap-svg\" style=\"position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;\"><\/svg>\n<div class=\"lp360-mm-mastery-overlay\" id=\"lp360-mm-mastery-overlay\">\n    <div class=\"lp360-mm-mastery-card\">\n        <div class=\"lp360-mm-mastery-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"><\/path><\/svg>\n        <\/div>\n        <h3>Full Topic Mastery<\/h3>\n        <p id=\"lp360-mm-mastery-text\">\u2014<\/p>\n    <\/div>\n<\/div>\n\n                        <!-- Inference Overlay -->\n                        <div class=\"lp360-mindmap-overlay\">\n                            <div class=\"lp360-mindmap-overlay__card\">\n                                <div class=\"lp360-mindmap-overlay__icon\">\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n                                        <path d=\"M12 16v-4M12 8h.01\"><\/path>\n                                    <\/svg>\n                                <\/div>\n                                <h3>Mind Map<\/h3>\n                                <p id=\"lp360-mindmap-overlay-text\">You have topics that need attention. Review these areas carefully.<\/p>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Responsive Grid -->\n                        <div class=\"lp360-mm-grid\">\n                            <!-- Col 1: Detailed topics -->\n                            <div class=\"lp360-mm-col\" id=\"lp360-mm-detailed-col\"><\/div>\n\n                            <!-- Col 2: Detailed study node -->\n                            <div class=\"lp360-mm-col\">\n                                <div class=\"lp360-mm-node lp360-mm-node--detailed\" id=\"lp360-mm-detailed-node\">\n                                    <span style=\"width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--lp-brand-light);\"><\/span>Detailed study\n                                <\/div>\n                            <\/div>\n\n                            <!-- Col 3: Mind Map center -->\n                            <div class=\"lp360-mm-col\">\n                                <div class=\"lp360-mm-node lp360-mm-node--center\" id=\"lp360-mm-center-node\">Mind Map<\/div>\n                            <\/div>\n\n                            <!-- Col 4: Basic study node -->\n                            <div class=\"lp360-mm-col\">\n                                <div class=\"lp360-mm-node lp360-mm-node--basic\" id=\"lp360-mm-basic-node\">\n                                    Basic study<span style=\"width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--lp-green);\"><\/span>\n                                <\/div>\n                            <\/div>\n\n                            <!-- Col 5: Basic topics -->\n                            <div class=\"lp360-mm-col\" id=\"lp360-mm-basic-col\"><\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Summary cards -->\n                   <div class=\"lp360-mm-summary-grid\" id=\"lp360-mm-summary-grid\">\n                        <div class=\"lp360-mm-summary-card lp360-mm-summary-card--detailed\">\n                            <span class=\"lp360-mm-summary-icon lp360-mm-summary-icon--detailed\">\n                                <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"2\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.8\"><\/rect><path d=\"M3 9h18M9 4v14\" stroke=\"#fff\" stroke-width=\"1.8\"><\/path><\/svg>\n                            <\/span>\n                            <div class=\"lp360-mm-summary-label\">\n                                <strong style=\"color:var(--lp-brand-light);\">Detailed study<\/strong>\n                                <span>needed topics count<\/span>\n                            <\/div>\n                            <span class=\"lp360-mm-summary-count\" id=\"lp360-mm-detailed-count\" style=\"color:var(--lp-brand-light);background:rgba(232,93,58,0.08);\">0<\/span>\n                        <\/div>\n\n                        <div class=\"lp360-mm-summary-card lp360-mm-summary-card--basic\">\n                            <span class=\"lp360-mm-summary-icon lp360-mm-summary-icon--basic\">\n                                <svg viewBox=\"0 0 24 24\"><path d=\"M4 5.5A2.5 2.5 0 016.5 3H12v18H6.5A2.5 2.5 0 014 18.5v-13zM20 5.5A2.5 2.5 0 0017.5 3H12v18h5.5a2.5 2.5 0 002.5-2.5v-13z\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.8\" stroke-linejoin=\"round\"><\/path><\/svg>\n                            <\/span>\n                            <div class=\"lp360-mm-summary-label\">\n                                <strong style=\"color:#15803d;\">Basic study<\/strong>\n                                <span>needed topics count<\/span>\n                            <\/div>\n                            <span class=\"lp360-mm-summary-count\" id=\"lp360-mm-basic-count\" style=\"color:#15803d;background:rgba(34,197,94,0.1);\">0<\/span>\n                        <\/div>\n                    <\/div>\n\n                    <div id=\"lp360-mind-inference\" style=\"margin-top:var(--lp-space-3);font-size:clamp(11px,1.4vw,13px);color:var(--lp-green);font-weight:600;display:none;\"><\/div>\n                <\/div>\n            <\/section>\n\n            <!-- ========================================================== -->\n            <!-- SECTION 4: PERFORMANCE ANALYTICS                           -->\n            <!-- ========================================================== -->\n            <section class=\"lp360-section-card\" id=\"lp360-section-performance\" data-section=\"performance\">\n                <div class=\"lp360-section-title\">\n                    <h2>Performance <span>Analytics<\/span><\/h2>\n                    <span class=\"lp360-underline\"><\/span>\n                <\/div>\n                <div class=\"lp360-time-tracker-layout\">\n                    <div class=\"lp360-time-tracker-left\">\n                        <div class=\"lp360-section-description\">\n                            <p> The Time Tracker analyzes the quality and quantity of your attempts by grouping your solving speed into specific time buckets which are less than 30 sec, 30 sec to 60 sec, 60 sec to 90 sec and more than 90 sec. We measure this to see the direct relationship between the time you spend on a question and the marks you actually secure. This helps you identify bad habits like rushing through easy questions or spending too much time on difficult ones and missing out on simpler marks.<\/p>\n                        <\/div>\n                        <div class=\"lp360-time-tracker-inferences\" id=\"lp360-time-inferences\"><\/div>\n                    <\/div>\n                    <div class=\"lp360-time-tracker-right\">\n                        <div class=\"lp360-time-tracker-tabs\" id=\"lp360-time-tabs\">\n                            <button class=\"lp360-time-tab active\" data-range=\"0-30\">&lt; 30 SEC<\/button>\n                            <button class=\"lp360-time-tab\" data-range=\"30-60\">30 \u2013 60 SEC<\/button>\n                            <button class=\"lp360-time-tab\" data-range=\"60-90\">60 \u2013 90 SEC<\/button>\n                            <button class=\"lp360-time-tab\" data-range=\"90+\">&gt; 90 SEC<\/button>\n                        <\/div>\n                        <div class=\"lp360-time-tracker-gauges\">\n                            <div class=\"lp360-gauge-column lp360-gauge-column--orange\">\n                                <div class=\"lp360-gauge-column-header\">\n                                    <span class=\"lp360-gauge-column-icon orange\"><svg viewBox=\"0 0 24 24\"><path d=\"M3 17l5-5 4 4 7-9\" fill=\"none\" stroke=\"#FF7A3D\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/span>\n                                    <div><div class=\"lp360-gauge-column-title\">ATTEMPT RATE<\/div><div class=\"lp360-gauge-column-sub\">Total attempts in this time range<\/div><\/div>\n                                <\/div>\n                                <div class=\"lp360-gauge-column-chart\">\n                                    <canvas class=\"lp360-gauge-canvas\" id=\"lp360-gauge-attempt\" data-value=\"0\" data-max=\"50\" data-color=\"#FF7A3D\"><\/canvas>\n                                <\/div>\n                                <div class=\"lp360-gauge-column-value\" id=\"lp360-gauge-attempt-val\">0<\/div>\n                            <\/div>\n                            <div class=\"lp360-gauge-column lp360-gauge-column--green\">\n                                <div class=\"lp360-gauge-column-header\">\n                                    <span class=\"lp360-gauge-column-icon green\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"#22C55E\" stroke-width=\"2.5\"><\/circle><circle cx=\"12\" cy=\"12\" r=\"4.5\" fill=\"none\" stroke=\"#22C55E\" stroke-width=\"2.5\"><\/circle><circle cx=\"12\" cy=\"12\" r=\"1.2\" fill=\"#22C55E\"><\/circle><\/svg><\/span>\n                                    <div><div class=\"lp360-gauge-column-title\">CORRECT ANSWER RATE<\/div><div class=\"lp360-gauge-column-sub\">Correct count in preferred time<\/div><\/div>\n                                <\/div>\n                                <div class=\"lp360-gauge-column-chart\">\n                                    <canvas class=\"lp360-gauge-canvas\" id=\"lp360-gauge-correct\" data-value=\"0\" data-max=\"50\" data-color=\"#22C55E\"><\/canvas>\n                                <\/div>\n                                <div class=\"lp360-gauge-column-value\" id=\"lp360-gauge-correct-val\">0<\/div>\n                            <\/div>\n                            <div class=\"lp360-gauge-column lp360-gauge-column--amber\">\n                                <div class=\"lp360-gauge-column-header\">\n                                    <span class=\"lp360-gauge-column-icon amber\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"#F59E0B\" stroke-width=\"2.5\"><\/circle><path d=\"M12 6v6l4 2\" fill=\"none\" stroke=\"#F59E0B\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/span>\n                                    <div><div class=\"lp360-gauge-column-title\">TIME USED<\/div><div class=\"lp360-gauge-column-sub\">Time used for answering the questions<\/div><\/div>\n                                <\/div>\n                                <div class=\"lp360-gauge-column-chart\">\n                                    <canvas class=\"lp360-gauge-canvas\" id=\"lp360-gauge-time\" data-value=\"0\" data-max=\"60\" data-color=\"#F59E0B\"><\/canvas>\n                                <\/div>\n                                <div class=\"lp360-gauge-column-value\" id=\"lp360-gauge-time-val\">0 <span>SEC<\/span><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Pressure Analytics -->\n                <div class=\"lp360-pressure-wrap\">\n                    <div class=\"lp360-section-title\" style=\"margin-top: var(--lp-space-4);\">\n                        <h2>Pressure <span>Tracker<\/span><\/h2>\n                        <span class=\"lp360-underline\"><\/span>\n                    <\/div>\n                    <div class=\"lp360-section-description\">\n                        <p> The Pressure Graph tracks how your accuracy and speed change as the exam timer runs out and the mental pressure increases. We measure this to evaluate how well your handles the time during the different phases so exam from start to the crucial final minutes of a long test. This helps you train for the real exam environment by showing you if you panic and make errors at the end, allowing you to practice staying calm and focused when time is running low.<\/p>\n                    <\/div>\n                    <div class=\"lp360-pressure-chart-wrap\" style=\"width:100%; max-width:100%; overflow:hidden; margin: var(--lp-space-3) 0; position:relative;\">\n                        <canvas id=\"lp360-pressure-canvas\" style=\"width:100%; height:auto; display:block;\"><\/canvas>\n                        <div class=\"lp360-pressure-null-overlay\" id=\"lp360-pressure-null-overlay\" style=\"display:none;\">\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width:22px; height:22px; margin-bottom:8px;\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"M12 16v-4M12 8h.01\"><\/path><\/svg>\n                            <p id=\"lp360-pressure-null-message\">Pressure Response Analysis is unavailable for this attempt.<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"lp360-pressure-inferences\" id=\"lp360-pressure-inferences\">\n                        <div class=\"lp360-inference-block\" style=\"flex-direction:column; align-items:stretch; background:#fef2f2; border-left: 4px solid #ef4444;\">\n                            <div class=\"lp360-inference-title\" style=\"color:#ef4444;\">Phase 1 \u2013 Start<\/div>\n                            <div class=\"lp360-inference-text\" id=\"lp360-pressure-phase1\">&#8212;<\/div>\n                        <\/div>\n                        <div class=\"lp360-inference-block\" style=\"flex-direction:column; align-items:stretch; background:#fefce8; border-left: 4px solid #f59e0b;\">\n                            <div class=\"lp360-inference-title\" style=\"color:#f59e0b;\">Phase 2 \u2013 Core<\/div>\n                            <div class=\"lp360-inference-text\" id=\"lp360-pressure-phase2\">&#8212;<\/div>\n                        <\/div>\n                        <div class=\"lp360-inference-block\" style=\"flex-direction:column; align-items:stretch; background:#eff6ff; border-left: 4px solid #3b82f6;\">\n                            <div class=\"lp360-inference-title\" style=\"color:#3b82f6;\">Phase 3 \u2013 End<\/div>\n                            <div class=\"lp360-inference-text\" id=\"lp360-pressure-phase3\">&#8212;<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- ========================================================== -->\n            <!-- SECTION 5: PREDICTIONS                                     -->\n            <!-- ========================================================== -->\n            <section class=\"lp360-section-card\" id=\"lp360-section-predictions\" data-section=\"predictions\">\n                <div class=\"lp360-section-title\">\n                    <h2>Predictions<\/h2>\n                    <span class=\"lp360-underline\"><\/span>\n                <\/div>\n\n                <div class=\"lp360-score-prediction-wrap\">\n                    <div class=\"lp360-pred-title\">\u2726 CUET UG Score Predictions \u2726<\/div>\n                    <div class=\"lp360-score-prediction-grid\">\n                        <div class=\"lp360-score-pred-left\">\n                            <div class=\"lp360-score-pred-ring\">\n                                <div class=\"lp360-score-pred-ring-inner\">\n                                    <span class=\"lp360-score-label\">PREDICTED SCORE<\/span>\n                                    <div class=\"lp360-score-number-line\">\n                                        <span class=\"lp360-big-score\" id=\"lp360-pred-score\">0<\/span>\n                                        <span class=\"lp360-score-max\">\/250<\/span>\n                                    <\/div>\n                                    <span class=\"lp360-score-foot\">MAX SCORE<\/span>\n                                <\/div>\n                            <\/div>\n   <div class=\"lp360-motivation\">\u2728 Keep learning. Your potential is unlimited! \u2728<\/div>\n                            <div class=\"lp360-insight-box\" style=\"width:100%; margin-top:var(--lp-space-2); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:var(--lp-radius-md); padding:var(--lp-space-3) var(--lp-space-4); backdrop-filter:blur(4px);\">\n    <p style=\"font-size: clamp(11px, 1.4vw, 13px); line-height: 1.7; color: #e2e8f0; margin:0;\">This score prediction is generated using LaunchPad 360\u00b0 Predictive Analytics, which considers your accuracy, attempt pattern, time management, difficulty handling, and overall performance behavior to predict your exam score.<\/p>\n<\/div>\n                        <\/div>\n                        <div class=\"lp360-score-pred-right\">                         \n                            <div class=\"lp360-insight-box\">\n                                <span class=\"lp360-ib-label\">\ud83d\udcca Performance Insight<\/span>\n                                <p id=\"lp360-pred-inference\">\u2014<\/p>\n                            <\/div>\n                            <div class=\"lp360-insight-box\">\n                                <span class=\"lp360-ib-label lp360-ib-label--tip\">\ud83d\udca1 Mentor Tip<\/span>\n                                <p id=\"lp360-pred-tip\">\u2014<\/p>\n                            <\/div>\n                                       <div class=\"lp360-pred-confidence-tile\">    \n                                <div class=\"lp360-pred-confidence-icon\">\n                                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                                        <path d=\"M12 2L2 20h20L12 2z\"><\/path>\n                                        <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"><\/line>\n                                        <circle cx=\"12\" cy=\"17\" r=\"1\" fill=\"#fff\"><\/circle>\n                                    <\/svg>\n                                <\/div>\n                                <p class=\"lp360-pred-confidence-text\" id=\"lp360-pred-confidence-text\">AI Prediction Advisory: Your predicted score is generated using LaunchPad 360 Predictive Analytics, an AI-powered assessment model that analyses multiple aspects of your test performance instead of relying only on marks. By evaluating your knowledge, solving behaviour, time management, and exam strategy, the system provides a realistic estimate of your potential performance in the actual examination<\/p>\n                                <div class=\"lp360-pred-confidence-divider\"><\/div>\n                                <div class=\"lp360-pred-confidence-stat\">\n                                    <span class=\"lp360-pred-confidence-label\">Prediction<br>Confidence<\/span>\n                                    <span class=\"lp360-pred-confidence-value\" id=\"lp360-pred-confidence-value\">\u2014<\/span>\n                                    <span class=\"lp360-pred-confidence-level\" id=\"lp360-pred-confidence-level\">\u2014<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"lp360-optimal-time-wrap\">\n                    <div class=\"lp360-ot-title\">\u23f1 OPTIMAL SOLVING TIME<\/div>\n                 <div class=\"lp360-section-description\" style=\"margin:12px 0 var(--lp-space-3); text-align:left;\">\n                        <p style=\"margin:0;\"> These hels in calculating the perfect amount of time you should spend on easy, medium, and hard questions based on your actual solving speed. This helps you manage your time perfectly during the real exam by giving you a strict time rule for each question type so you never get stuck on a single hard problem.<\/p>\n                    <\/div>\n                    <div class=\"lp360-ot-grid\">\n                        <div class=\"lp360-ot-card\">\n                            <div class=\"lp360-ot-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle><path d=\"M12 8v4l3 2\"><\/path><\/svg><\/div>\n                            <div class=\"lp360-ot-label\">Basic Concept Questions<\/div>\n                            <div class=\"lp360-ot-number\" id=\"lp360-ot-basic\">0 <span class=\"lp360-ot-unit\">SEC<\/span><\/div>\n                            <div class=\"lp360-ot-desc\">Simple, direct concept recall<\/div>\n                        <\/div>\n                        <div class=\"lp360-ot-card\">\n                            <div class=\"lp360-ot-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle><path d=\"M12 8v4l3 2\"><\/path><\/svg><\/div>\n                            <div class=\"lp360-ot-label\">Multiple Concept Questions<\/div>\n                            <div class=\"lp360-ot-number\" id=\"lp360-ot-multiple\">0 <span class=\"lp360-ot-unit\">SEC<\/span><\/div>\n                            <div class=\"lp360-ot-desc\">Requires concept linking<\/div>\n                        <\/div>\n                        <div class=\"lp360-ot-card\">\n                            <div class=\"lp360-ot-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle><path d=\"M12 8v4l3 2\"><\/path><\/svg><\/div>\n                            <div class=\"lp360-ot-label\">Analytical Questions<\/div>\n                            <div class=\"lp360-ot-number\" id=\"lp360-ot-analytical\">0 <span class=\"lp360-ot-unit\">SEC<\/span><\/div>\n                            <div class=\"lp360-ot-desc\">Complex reasoning &amp; analysis<\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"lp360-ot-category-grid\"><\/div>\n                <\/div>\n            <\/section>\n\n            <!-- ========================================================== -->\n            <!-- SECTION 6: ANSWER KEY                                      -->\n            <!-- ========================================================== -->\n            <section class=\"lp360-section-card\" id=\"lp360-section-answerkey\" data-section=\"answerkey\">\n                <div class=\"lp360-section-title\">\n                    <h2>Answer <span>Key<\/span><\/h2>\n                    <span class=\"lp360-underline\"><\/span>\n                <\/div>\n        \n                <div class=\"lp360-answer-key-wrap\">\n                    <div class=\"lp360-answer-key-summary\" id=\"lp360-answer-key-summary\" style=\"display:none;\">\n                        <div class=\"lp360-ak-statbox lp360-ak-statbox--total\"><span>Total<\/span><strong id=\"lp360-ak-total\">0<\/strong><\/div>\n                        <div class=\"lp360-ak-statbox lp360-ak-statbox--correct\"><span>Correct<\/span><strong id=\"lp360-ak-correct\">0<\/strong><\/div>\n                        <div class=\"lp360-ak-statbox lp360-ak-statbox--incorrect\"><span>Incorrect<\/span><strong id=\"lp360-ak-incorrect\">0<\/strong><\/div>\n                        <div class=\"lp360-ak-statbox lp360-ak-statbox--unattempted\"><span>Unattempted<\/span><strong id=\"lp360-ak-unattempted\">0<\/strong><\/div>\n                    <\/div>\n                    <div class=\"lp360-ak-filters\" id=\"lp360-ak-filters\" style=\"display:none;\">\n                        <button class=\"lp360-ak-filter-btn active\" data-filter=\"all\">All<\/button>\n                        <button class=\"lp360-ak-filter-btn\" data-filter=\"correct\">Correct<\/button>\n                        <button class=\"lp360-ak-filter-btn\" data-filter=\"incorrect\">Incorrect<\/button>\n                        <button class=\"lp360-ak-filter-btn\" data-filter=\"unattempted\">Unattempted<\/button>\n                    <\/div>\n                    <div class=\"lp360-answer-key-grid\" id=\"lp360-answer-key-grid\"><\/div>\n                    <div class=\"lp360-answer-key-placeholder\" id=\"lp360-answer-key-placeholder\">\n                        Answer-key data is not available for this attempt.\n                    <\/div>\n                <\/div>\n            <\/section>\n\n        <\/div>\n    <\/div>\n\n    <script>\n        (function() {\n            \"use strict\";\n\n            \/\/ Keep the first section visible while analytics is loading.\n            var initialSection = document.querySelector('.lp360-section-card[data-section=\"basicinfo\"]');\n            if (initialSection) { initialSection.classList.add('visible'); }\n\n            var BACKEND_URL = 'https:\/\/launchpad-api-770009272949.asia-south1.run.app';\n            var attemptId = null;\n\n            function getQueryParam(param) {\n                var urlParams = new URLSearchParams(window.location.search);\n                return urlParams.get(param);\n            }\n\n            function formatTime(seconds) {\n                if (typeof seconds !== 'number' || isNaN(seconds)) seconds = 0;\n                if (seconds < 60) return Math.round(seconds) + 's';\n                var mins = Math.floor(seconds \/ 60);\n                var secs = Math.round(seconds % 60);\n                return mins + 'm ' + secs + 's';\n            }\n\n            function formatPercent(val) {\n                if (typeof val !== 'number') return '0%';\n                return (val * 100).toFixed(1) + '%';\n            }\nfunction formatPressureTime(mins) {\n                if (typeof mins !== 'number' || isNaN(mins)) mins = 0;\n                var wholeMin = Math.floor(mins);\n                var secs = Math.round((mins - wholeMin) * 60);\n                if (secs === 60) {\n                    secs = 0;\n                    wholeMin = wholeMin + 1;\n                }\n                if (secs === 0) {\n                    return wholeMin + ' min';\n                }\n                return wholeMin + ' min ' + secs + ' sec';\n            }\n            function getVal(obj, path, fallback) {\n                if (!obj) return fallback;\n                var parts = path.split('.');\n                var current = obj;\n                for (var i = 0; i < parts.length; i++) {\n                    if (current === undefined || current === null) return fallback;\n                    current = current[parts[i]];\n                }\n                return (current === undefined || current === null) ? fallback : current;\n            }\n\/\/ ---- Show no-attempts overlay ----\nfunction showNoAttemptsOverlay(message) {\n    \/\/ Remove any existing overlay\n    var existing = document.querySelector('.lp360-no-attempts-overlay');\n    if (existing) {\n        document.body.removeChild(existing);\n    }\n\n    \/\/ Get the URL to go back to (the page the student came from)\n    var retakeUrl = document.referrer;\n\n    \/\/ If no referrer or referrer is from a different site, build a fallback URL\n    if (!retakeUrl || retakeUrl.indexOf(window.location.origin) === -1) {\n        retakeUrl = window.location.origin + window.location.pathname;\n        var queryParts = [];\n        if (attemptId) { queryParts.push('attempt_id=' + attemptId); }\n        \/\/ If you have exam_type or other params, add them similarly\n        \/\/ e.g., if (examTypeParam) { queryParts.push('exam_type=' + encodeURIComponent(examTypeParam)); }\n        if (queryParts.length > 0) {\n            retakeUrl = retakeUrl + '?' + queryParts.join('&');\n        }\n        if (!attemptId) {\n            retakeUrl = window.location.origin + '\/';\n        }\n    }\n\n    var overlay = document.createElement('div');\n    overlay.className = 'lp360-no-attempts-overlay';\n    overlay.innerHTML =\n        '<div class=\"lp360-no-attempts-card lp360-no-attempts-card--red\">' +\n        '<div class=\"lp360-no-attempts-icon lp360-no-attempts-icon--red\">' +\n        '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">' +\n        '<path d=\"M12 2L2 20h20L12 2z\"\/>' +\n        '<line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/>' +\n        '<circle cx=\"12\" cy=\"17\" r=\"1\" fill=\"currentColor\"\/>' +\n        '<\/svg>' +\n        '<\/div>' +\n        '<h2 class=\"lp360-no-attempts-title lp360-no-attempts-title--red\">No Questions Attempted<\/h2>' +\n        '<p class=\"lp360-no-attempts-message\">' + message + '<\/p>' +\n        '<a href=\"' + retakeUrl + '\" class=\"lp360-no-attempts-badge lp360-no-attempts-badge--red\">Please Try Again<\/a>' +\n        '<\/div>';\n\n    document.body.appendChild(overlay);\n\n    \/\/ NOTE: We deliberately do NOT add click or keydown listeners to close the overlay.\n    \/\/ The only way to dismiss it is to click the \"Please Try Again\" link.\n}\n\n            function loadAnalytics(callback) {\n                if (window.analyticsData) {\n                    callback(window.analyticsData);\n                    return;\n                }\n                attemptId = getQueryParam('attempt_id');\n                if (!attemptId) {\n                    document.getElementById('lp360-root').innerHTML =\n                        '<div style=\"padding:40px;text-align:center;font-family:Inter;color:#1f2937;\">Missing attempt_id in URL.<\/div>';\n                    return;\n                }\n                var url = BACKEND_URL + '\/api\/analytics-by-attempt\/' + encodeURIComponent(attemptId);\n                fetch(url)\n                    .then(function(res) {\n                        if (!res.ok) throw new Error('HTTP ' + res.status);\n                        return res.json();\n                    })\n\n.then(function(json) {\n    var analytics = json.analytics_json;\n    if (!analytics) throw new Error('No analytics_json in response');\n    \/\/ Check for insufficient_data OR zero attempts\n    var isInsufficient = false;\n    if (analytics && analytics.insufficient_data === true) {\n        isInsufficient = true;\n    }\n    \/\/ Also check if no questions were attempted\n    if (analytics && analytics.basic_info && analytics.basic_info.total_attempts === 0) {\n        isInsufficient = true;\n    }\n    if (isInsufficient) {\n        var noAttemptsMsg = analytics.insufficient_data_message || 'You have not attempted enough questions so that the algorithm is unable to properly analyse your capabilities. Please retake the exam with consistent answering.';\n        showNoAttemptsOverlay(noAttemptsMsg);\n        return; \/\/ stop further rendering\n    }\n    callback(analytics);\n})\n                         .catch(function(err) {\n                        console.error('Error loading analytics:', err);\n                        document.getElementById('lp360-root').innerHTML =\n                            '<div style=\"padding:40px;text-align:center;font-family:Inter;color:#ef4444;\">Failed to load analytics. Please check console.<\/div>';\n                    });\n            }\n\n            function renderDashboard(data) {\n                var basic = data.basic_info || {};\n                var totalScore = basic.total_score || 0;\n                var maxScore = 250;\n                var attempts = basic.total_attempts || 0;\n                var totalTime = basic.total_time || 0;\n                var avgTime = basic.avg_time_per_q || 0;\n\n                \/\/ ---- Gauge ----\n                var progress = Math.min(totalScore \/ maxScore, 1);\n                var circumference = 691;\n                var offset = circumference - (progress * circumference);\n                document.getElementById('lp360-gauge-progress').style.strokeDashoffset = offset;\n                document.getElementById('lp360-score-obtained').textContent = totalScore;\n                document.getElementById('lp360-score-total').textContent = maxScore;\n                document.getElementById('lp360-gauge-minibar-fill').style.width = (progress * 100) + '%';\n\n                document.getElementById('lp360-time-used').textContent = formatTime(totalTime);\n                document.getElementById('lp360-total-attempt').textContent = attempts;\n\n                var maxQ = basic.max_time_q || {};\n                var minQ = basic.min_time_q || {};\n                document.getElementById('lp360-max-time').textContent = formatTime(maxQ.time || 0);\n                document.getElementById('lp360-max-tag').textContent = maxQ.question ? 'Q' + maxQ.question : 'Q\u2014';\n                document.getElementById('lp360-min-time').textContent = formatTime(minQ.time || 0);\n                document.getElementById('lp360-min-tag').textContent = minQ.question ? 'Q' + minQ.question : 'Q\u2014';\n                document.getElementById('lp360-avg-time').textContent = formatTime(avgTime);\n\n                var correct = basic.correct_counts || {};\n                var incorrect = basic.incorrect_counts || {};\n                var unattempted = basic.unattempted_counts || {};\n\n                document.getElementById('lp360-correct-total').textContent = (correct.single || 0) + (correct.multiple || 0) + (\n                    correct.reviewed || 0) + (correct.skipped || 0);\n                document.getElementById('lp360-correct-single').textContent = correct.single || 0;\n                document.getElementById('lp360-correct-multiple').textContent = correct.multiple || 0;\n                document.getElementById('lp360-correct-reviewed').textContent = correct.reviewed || 0;\n                document.getElementById('lp360-correct-skipped').textContent = correct.skipped || 0;\n\n                document.getElementById('lp360-incorrect-total').textContent = (incorrect.single || 0) + (incorrect.multiple ||\n                        0) +\n                    (incorrect.reviewed || 0) + (incorrect.skipped || 0);\n                document.getElementById('lp360-incorrect-single').textContent = incorrect.single || 0;\n                document.getElementById('lp360-incorrect-multiple').textContent = incorrect.multiple || 0;\n                document.getElementById('lp360-incorrect-reviewed').textContent = incorrect.reviewed || 0;\n                document.getElementById('lp360-incorrect-skipped').textContent = incorrect.skipped || 0;\n\n                document.getElementById('lp360-unattempted-total').textContent = (unattempted.skipped || 0) + (unattempted\n                    .reviewed_unattempted || 0) + (unattempted.not_viewed || 0);\n                document.getElementById('lp360-unattempted-skipped').textContent = unattempted.skipped || 0;\n                document.getElementById('lp360-unattempted-reviewed').textContent = unattempted.reviewed_unattempted || 0;\n                document.getElementById('lp360-unattempted-notviewed').textContent = unattempted.not_viewed || 0;\n\n                \/\/ ---- Decision Marker ----\n                var dm = data.decision_marker || {};\n                var totalExamSeconds = Number(totalTime) || 0;\n                var visibleIntervalCount = Math.max(1, Math.min(6, Math.ceil(totalExamSeconds \/ 600)));\n                var intervals = [10, 20, 30, 40, 50, 60].slice(0, visibleIntervalCount);\n\n                var dmHeaderRow = document.querySelector('#lp360-dm-table thead tr');\n                if (dmHeaderRow) {\n                    dmHeaderRow.innerHTML =\n                        '<th class=\"lp360-dm-row-head-col\">Categories \/ Time intervals (min)<\/th>';\n                    intervals.forEach(function(endMinute) {\n                        var startMinute = endMinute - 10;\n                        var th = document.createElement('th');\n                        th.textContent = startMinute + '-' + endMinute + ' min';\n                        dmHeaderRow.appendChild(th);\n                    });\n                }\n\n                var dmTotals = dm.totals || {};\n                document.getElementById('lp360-dm-attempt').textContent = dmTotals.attempt || 0;\n                document.getElementById('lp360-dm-correct').textContent = dmTotals.correct || 0;\n                document.getElementById('lp360-dm-incorrect').textContent = dmTotals.incorrect || 0;\n\n                var tbody = document.getElementById('lp360-dm-tbody');\n                tbody.innerHTML = '';\n                var trCorr = document.createElement('tr');\n                trCorr.className = 'lp360-dm-row--green';\n                var tdCorrLabel = document.createElement('td');\n                tdCorrLabel.innerHTML =\n                    '<div class=\"lp360-dm-row-label\"><span class=\"lp360-dm-row-icon lp360-dm-row-icon--green\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 6L9 17l-5-5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>Correct<\/div>';\n                trCorr.appendChild(tdCorrLabel);\n                var incorrectRow = document.createElement('tr');\n                incorrectRow.className = 'lp360-dm-row--red';\n                var tdIncorrLabel = document.createElement('td');\n                tdIncorrLabel.innerHTML =\n                    '<div class=\"lp360-dm-row-label\"><span class=\"lp360-dm-row-icon lp360-dm-row-icon--red\"><svg viewBox=\"0 0 24 24\"><path d=\"M18 6L6 18M6 6l12 12\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>Incorrect<\/div>';\n                incorrectRow.appendChild(tdIncorrLabel);\n\n                intervals.forEach(function(intv) {\n                    var dataIntv = dm[intv] || { correct: [], incorrect: [] };\n                    var correctList = dataIntv.correct || [];\n                    var incorrectList = dataIntv.incorrect || [];\n\n                    var tdCorr = document.createElement('td');\n                    var chipContainer = document.createElement('div');\n                    chipContainer.className = 'lp360-dm-chip-cell';\n                    correctList.forEach(function(q) {\n                        var chip = document.createElement('span');\n                        chip.className = 'lp360-dm-chip lp360-dm-chip--green';\n                        chip.textContent = 'Q' + q;\n                        chipContainer.appendChild(chip);\n                    });\n                    tdCorr.appendChild(chipContainer);\n                    trCorr.appendChild(tdCorr);\n\n                    var tdIncorr = document.createElement('td');\n                    var chipContainer2 = document.createElement('div');\n                    chipContainer2.className = 'lp360-dm-chip-cell';\n                    incorrectList.forEach(function(q) {\n                        var chip = document.createElement('span');\n                        chip.className = 'lp360-dm-chip lp360-dm-chip--red';\n                        chip.textContent = 'Q' + q;\n                        chipContainer2.appendChild(chip);\n                    });\n                    tdIncorr.appendChild(chipContainer2);\n                    incorrectRow.appendChild(tdIncorr);\n                });\n\n                tbody.appendChild(trCorr);\n                tbody.appendChild(incorrectRow);\n\n                \/\/ ---- Tracker Charts ----\n                var scoreTracker = data.tracker && data.tracker.score_tracker || {};\n                var accuracyTracker = data.tracker && data.tracker.accuracy_tracker || {};\n\n                if (accuracyTracker && (!accuracyTracker.labels || accuracyTracker.labels.length === 0)) {\n                    accuracyTracker.labels = [0, 2, 4, 6, 8, 10];\n                    accuracyTracker.labels_text = ['0 sec', '2 min', '4 min', '6 min', '8 min', '10 min'];\n                    accuracyTracker.accuracies = [0.25, 0.40, 0.55, 0.70, 0.65, 0.85];\n                    accuracyTracker.x_ticks = [0, 2, 4, 6, 8, 10];\n                    accuracyTracker.x_ticks_text = ['0 min', '2 min', '4 min', '6 min', '8 min', '10 min'];\n                }\n\n                var __scoreTrackerPoints = null;\n\n                function renderScoreTracker(hoverIndex) {\n                         var data = {\n                            attempts: scoreTracker.labels || [],\n                            scores: scoreTracker.scores || [],\n                            x_ticks: scoreTracker.x_ticks || [],\n                            inference: scoreTracker.inference || ''\n                        };\n                        var attempts = data.attempts || [];\n                        var scores = data.scores || [];\n                        if (attempts.length === 0 || scores.length === 0) { return; }\n\n                        var canvas = document.getElementById('lp360-tracker-canvas');\n                        if (!canvas) { return; }\n                        var rect = canvas.parentElement.getBoundingClientRect();\n                        var dpr = window.devicePixelRatio || 1;\n                        var cssWidth = Math.max(rect.width - 12, 600);\n                        var cssHeight = Math.min(480, Math.max(300, cssWidth * 0.7));\n                        canvas.style.width = cssWidth + 'px';\n                        canvas.style.height = cssHeight + 'px';\n                        canvas.width = cssWidth * dpr;\n                        canvas.height = cssHeight * dpr;\n                        var ctx = canvas.getContext('2d');\n                        ctx.scale(dpr, dpr);\n\n                     var margin = { top: 40, bottom: 60, left: 60, right: 30 };\n                        if (cssWidth < 500) { margin.left = 50; }  \n                        var chartWidth = cssWidth - margin.left - margin.right;\n                        var chartHeight = cssHeight - margin.top - margin.bottom;\n\nvar minScore = Math.min(0, Math.min.apply(null, scores));\n                        var maxScore = Math.max(0, Math.max.apply(null, scores));\n\n                        \/\/ Fixed Y-axis domain: -50 (all 50 wrong) to 250 (all 50 correct).\n                        \/\/ This range never changes, regardless of what scores come back.\n                        var yMin = -50;\n                        var yMax = 250;\n\n                       var xTicksArr = data.x_ticks || [];\n                        var xMin = 0;\n                        var xMax = Math.max.apply(null, attempts);\n                        if (xTicksArr.length > 0) {\n                            xMax = Math.max(xMax, Math.max.apply(null, xTicksArr));\n                        }\n                        if (xMax < 2) { xMax = 2; }\n                        var xRange = xMax - xMin;\n\n                        var yRange = yMax - yMin;\n                        var zeroY = margin.top + chartHeight - (0 - yMin) \/ yRange * chartHeight;\n\n                        function xToCanvas(x) {\n                            return margin.left + (x - xMin) \/ xRange * chartWidth;\n                        }\n\n                        function yToCanvas(y) {\n                            return margin.top + chartHeight - (y - yMin) \/ yRange * chartHeight;\n                        }\n\n                        ctx.clearRect(0, 0, cssWidth, cssHeight);\n\n                        \/\/ Fixed tick marks only \u2014 no ticks in between these values.\n                        var yTicks = [-50, -25, 0, 25, 50, 75, 100, 125, 150, 175, 200, 225, 250];\n                        for (var ti = 0; ti < yTicks.length; ti++) {\n                            var y = yTicks[ti];\n                            var yPos = yToCanvas(y);\n                            ctx.beginPath();\n                            ctx.moveTo(margin.left, yPos);\n                            ctx.lineTo(margin.left + chartWidth, yPos);\n                            ctx.strokeStyle = '#e5e7eb';\n                            ctx.setLineDash([4, 4]);\n                            ctx.lineWidth = 1;\n                            ctx.stroke();\n                            ctx.setLineDash([]);\n                            ctx.textAlign = 'right';\n                            ctx.textBaseline = 'middle';\n                            ctx.font = (cssWidth < 500 ? 10 : 12) + 'px Inter, sans-serif';\n                            ctx.fillStyle = (y === 0) ? '#1f2937' : '#6b7280';\n                            ctx.fillText(y, margin.left - 6, yPos);\n                        }\n\/\/ X-axis ticks come from the backend's x_ticks \u2014 interval scales with\n                        \/\/ attempt count (e.g. every 7 attempts), instead of drawing every integer.\n                        var xTicksToDraw = xTicksArr.length > 0 ? xTicksArr : attempts;\n                        for (var xi = 0; xi < xTicksToDraw.length; xi++) {\n                            var x = xTicksToDraw[xi];\n                            var xPos = xToCanvas(x);\n                            ctx.beginPath();\n                            ctx.moveTo(xPos, margin.top);\n                            ctx.lineTo(xPos, margin.top + chartHeight);\n                            ctx.strokeStyle = '#e5e7eb';\n                            ctx.setLineDash([4, 4]);\n                            ctx.lineWidth = 1;\n                            ctx.stroke();\n                            ctx.setLineDash([]);\n                            ctx.textAlign = 'center';\n                            ctx.textBaseline = 'top';\n                            ctx.font = (cssWidth < 500 ? 10 : 12) + 'px Inter, sans-serif';\n                            ctx.fillStyle = '#4b5563';\n                            ctx.fillText(x, xPos, margin.top + chartHeight + 6);\n                        }\n\n                        ctx.save();\n                        ctx.textAlign = 'center';\n                        ctx.textBaseline = 'middle';\n                        ctx.font = (cssWidth < 500 ? 11 : 13) + 'px Inter, sans-serif';\n                        ctx.fillStyle = '#1e293b';\n                        ctx.translate(14, margin.top + chartHeight \/ 2);\n                        ctx.rotate(-Math.PI \/ 2);\n                        ctx.fillText('Score Obtained', 0, 0);\n                        ctx.restore();\n\n                        ctx.textAlign = 'center';\n                        ctx.textBaseline = 'top';\n                        ctx.font = (cssWidth < 500 ? 11 : 13) + 'px Inter, sans-serif';\n                        ctx.fillStyle = '#1e293b';\n                       \n                ctx.fillText('Attempt (Attempt Number)', margin.left + chartWidth \/ 2, cssHeight - 16);\n                        \/\/ zeroY is calculated above so the negative-score area stays readable.\n                        ctx.beginPath();\n                        ctx.moveTo(margin.left, zeroY);\n                        ctx.lineTo(margin.left + chartWidth, zeroY);\n                        ctx.strokeStyle = '#1f2937';\n                        ctx.lineWidth = 1.5;\n                        ctx.stroke();\n\n                       var points = [];\n                        for (var i = 0; i < attempts.length; i++) {\n                            var yVal = scores[i];\n                            if (yVal !== undefined) {\n                                if (!isNaN(yVal)) {\n                                    points.push({ x: attempts[i], y: yVal });\n                                }\n                            }\n                        }\n                        \/\/ ---- Inference overlay (no &#038;&#038;) ----\n                        var hasInference = false;\n                        if (data.inference) {\n                            hasInference = true;\n                        }\n                       \n                        var chartWrap = canvas ? canvas.parentElement : null;\n                        if (chartWrap) {\n                            var existingOverlay = chartWrap.querySelector('.lp360-tracker-overlay');\n                            if (existingOverlay) {\n                                existingOverlay.remove();\n                            }\n                            if (hasInference) {\n                                chartWrap.classList.add('has-inference');\n                                var overlay = document.createElement('div');\n                                overlay.className = 'lp360-tracker-overlay';\n                                overlay.innerHTML =\n                                    '<div class=\"lp360-tracker-overlay__card\">' +\n                                    '<div class=\"lp360-tracker-overlay__icon\">' +\n                                    '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4M12 8h.01\"\/><\/svg>' +\n                                    '<\/div>' +\n                                    '<h3>Score Tracker<\/h3>' +\n                                    '<p>' + data.inference + '<\/p>' +\n                                    '<\/div>';\n                                chartWrap.appendChild(overlay);\n                            } else {\n                                chartWrap.classList.remove('has-inference');\n                            }\n                        }\n                        if (points.length === 1) {\n                            var onlyPoint = points[0];\n                            var onlyX = xToCanvas(onlyPoint.x);\n                            var onlyY = yToCanvas(onlyPoint.y);\n                            ctx.beginPath();\n                            ctx.setLineDash([5, 5]);\n                            ctx.moveTo(margin.left, onlyY);\n                            ctx.lineTo(margin.left + chartWidth, onlyY);\n                            ctx.strokeStyle = '#FF7A3D';\n                            ctx.lineWidth = 1.5;\n                            ctx.stroke();\n                            ctx.setLineDash([]);\n                            ctx.beginPath();\n                            ctx.arc(onlyX, onlyY, 6, 0, 2 * Math.PI);\n                            ctx.fillStyle = '#FF7A3D';\n                            ctx.shadowColor = 'rgba(255,122,61,0.3)';\n                            ctx.shadowBlur = 6;\n                            ctx.fill();\n                            ctx.shadowBlur = 0;\n                            ctx.font = 'bold ' + (cssWidth < 500 ? 11 : 13) + 'px Inter, sans-serif';\n                            ctx.textAlign = 'center';\n                            ctx.textBaseline = 'middle';\n                            ctx.fillStyle = (onlyPoint.y >= 0) ? '#22c55e' : '#ef4444';\n                            var onlyLabelX = onlyX + ((onlyPoint.x === xMin) ? 10 : 0);\n                            var onlyLabelY = (onlyPoint.y >= 0) ? onlyY - 15 : onlyY + 16;\n                            onlyLabelY = Math.max(margin.top + 10, Math.min(margin.top + chartHeight - 8, onlyLabelY));\n                            ctx.fillText(onlyPoint.y, onlyLabelX, onlyLabelY);\n                        }\n                        if (points.length < 2) { return; }\n                        __scoreTrackerPoints = points;\n\n                        function catmullRom(pts, seg) {\n                            if (pts.length < 2) { return []; }\n                            var result = [];\n                            for (var i = 0; i < pts.length - 1; i++) {\n                                var p0 = (i === 0) ? pts[i] : pts[i - 1];\n                                var p1 = pts[i];\n                                var p2 = pts[i + 1];\n                                var p3 = (i === pts.length - 2) ? pts[i + 1] : pts[i + 2];\n                                for (var t = 0; t <= 1; t += 1 \/ seg) {\n                                    var t2 = t * t, t3 = t2 * t;\n                                    var x = 0.5 * ((2 * p1.x) + (-p0.x + p2.x) * t + (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 +\n                                        (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3);\n                                    var y = 0.5 * ((2 * p1.y) + (-p0.y + p2.y) * t + (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 +\n                                        (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3);\n                                    result.push({ x: x, y: y });\n                                }\n                            }\n                            result.push(pts[pts.length - 1]);\n                            return result;\n                        }\n\n                               \/\/ Draw straight lines between actual data points\n                        ctx.beginPath();\n                        var firstPt = points[0];\n                        ctx.moveTo(xToCanvas(firstPt.x), yToCanvas(firstPt.y));\n                        for (var n = 1; n < points.length; n++) {\n                            var pt = points[n];\n                            ctx.lineTo(xToCanvas(pt.x), yToCanvas(pt.y));\n                        }\n                        var lastPt = points[points.length - 1];\n                        \/\/ Fill area under the curve (down to zero)\n                        ctx.lineTo(xToCanvas(lastPt.x), yToCanvas(0));\n                        ctx.lineTo(xToCanvas(firstPt.x), yToCanvas(0));\n                        ctx.closePath();\n                        var grad = ctx.createLinearGradient(0, margin.top, 0, margin.top + chartHeight);\n                        grad.addColorStop(0, 'rgba(255,122,61,0.2)');\n                        grad.addColorStop(1, 'rgba(255,122,61,0.02)');\n                        ctx.fillStyle = grad;\n                        ctx.fill();\n\n                        \/\/ Draw the line itself\n                        ctx.beginPath();\n                        ctx.moveTo(xToCanvas(firstPt.x), yToCanvas(firstPt.y));\n                        for (var n2 = 1; n2 < points.length; n2++) {\n                            var pt2 = points[n2];\n                            ctx.lineTo(xToCanvas(pt2.x), yToCanvas(pt2.y));\n                        }\n                        ctx.strokeStyle = '#FF7A3D';\n                        ctx.lineWidth = 3;\n                        ctx.shadowColor = 'rgba(255,122,61,0.3)';\n                        ctx.shadowBlur = 8;\n                        ctx.stroke();\n                        ctx.shadowBlur = 0;\nvar pointRadius = cssWidth < 500 ? 4 : 5;\n                        var lastLabelRect = null;\n                        for (var p = 0; p < points.length; p++) {\n                            var pt3 = points[p];\n                            var xp = xToCanvas(pt3.x);\n                            var yp = yToCanvas(pt3.y);\n                            ctx.beginPath();\n                            ctx.arc(xp, yp, pointRadius, 0, 2 * Math.PI);\n                            ctx.fillStyle = '#FF7A3D';\n                            ctx.shadowColor = 'rgba(255,122,61,0.3)';\n                            ctx.shadowBlur = 6;\n                            ctx.fill();\n                            ctx.shadowBlur = 0;\n                            ctx.font = 'bold ' + (cssWidth < 500 ? 11 : 13) + 'px Inter, sans-serif';\n                            ctx.textAlign = 'center';\n                            ctx.textBaseline = 'middle';\n                            ctx.fillStyle = (pt3.y >= 0) ? '#22c55e' : '#ef4444';\n\n                            \/\/ Keep score labels clear of the Y-axis, X-axis and neighbouring points.\n                            var scoreLabelX = xp;\n                            if (p === 0) { scoreLabelX += 10; }\n                            if (p === points.length - 1) { scoreLabelX -= 8; }\n                            var scoreLabelY = (pt3.y >= 0) ? yp - 15 : yp + 16;\n                            scoreLabelY = Math.max(margin.top + 10, Math.min(margin.top + chartHeight - 8, scoreLabelY));\n\n                            \/\/ Avoid overlapping the previous point's label: flip side, then nudge sideways.\n                            var scoreLabelW = ctx.measureText(String(pt3.y)).width + 6;\n                            var scoreLabelH = (cssWidth < 500 ? 11 : 13) + 6;\n                            var scoreLabelRect = {\n                                left: scoreLabelX - scoreLabelW \/ 2, right: scoreLabelX + scoreLabelW \/ 2,\n                                top: scoreLabelY - scoreLabelH \/ 2, bottom: scoreLabelY + scoreLabelH \/ 2\n                            };\n                            if (lastLabelRect) {\n                                var collides = !(scoreLabelRect.right < lastLabelRect.left || scoreLabelRect.left > lastLabelRect.right ||\n                                    scoreLabelRect.bottom < lastLabelRect.top || scoreLabelRect.top > lastLabelRect.bottom);\n                                if (collides) {\n                                    scoreLabelY = (pt3.y >= 0) ? yp + 16 : yp - 15;\n                                    scoreLabelY = Math.max(margin.top + 10, Math.min(margin.top + chartHeight - 8, scoreLabelY));\n                                    scoreLabelRect.top = scoreLabelY - scoreLabelH \/ 2;\n                                    scoreLabelRect.bottom = scoreLabelY + scoreLabelH \/ 2;\n                                    var stillCollides = !(scoreLabelRect.right < lastLabelRect.left || scoreLabelRect.left > lastLabelRect.right ||\n                                        scoreLabelRect.bottom < lastLabelRect.top || scoreLabelRect.top > lastLabelRect.bottom);\n                                    if (stillCollides) {\n                                        scoreLabelX = lastLabelRect.right + scoreLabelW \/ 2 + 4;\n                                        scoreLabelRect.left = scoreLabelX - scoreLabelW \/ 2;\n                                        scoreLabelRect.right = scoreLabelX + scoreLabelW \/ 2;\n                                    }\n                                }\n                            }\n                            lastLabelRect = scoreLabelRect;\n                            ctx.fillText(pt3.y, scoreLabelX, scoreLabelY);\n                        }\n\n                        var activeIndex = hoverIndex;\n                        if (activeIndex === undefined) { activeIndex = points.length - 1; }\n                        if (activeIndex >= 0) {\n                            if (activeIndex < points.length) {\n                                var hp = points[activeIndex];\n                                var hx = xToCanvas(hp.x);\n                                var hy = yToCanvas(hp.y);\n                                ctx.save();\n                                ctx.setLineDash([4, 4]);\n                                ctx.strokeStyle = '#FF7A3D';\n                                ctx.lineWidth = 1.2;\n                                ctx.beginPath();\n                                ctx.moveTo(hx, margin.top);\n                                ctx.lineTo(hx, margin.top + chartHeight);\n                                ctx.stroke();\n                                ctx.beginPath();\n                                ctx.moveTo(margin.left, hy);\n                                ctx.lineTo(margin.left + chartWidth, hy);\n                                ctx.stroke();\n                                ctx.restore();\n\n                                ctx.beginPath();\n                                ctx.arc(hx, hy, 8, 0, 2 * Math.PI);\n                                ctx.strokeStyle = '#FF7A3D';\n                                ctx.lineWidth = 2.5;\n                                ctx.fillStyle = '#fff';\n                                ctx.fill();\n                                ctx.stroke();\n\n                                var tipText = 'Attempt: ' + hp.x + ' | Score: ' + hp.y;\n                                ctx.font = 'bold ' + (cssWidth < 500 ? 11 : 12.5) + 'px Inter, sans-serif';\n                                var tipPad = 12;\n                                var tipTextWidth = ctx.measureText(tipText).width;\n                                var tipW = tipTextWidth + tipPad * 2;\n                                var tipH = 30;\n                                var tipX = hx - tipW \/ 2;\n                                if (tipX < margin.left) { tipX = margin.left; }\n                                if (tipX + tipW > margin.left + chartWidth) { tipX = margin.left + chartWidth - tipW; }\n                                var tipY = hy - tipH - 16;\n                                if (tipY < margin.top) { tipY = hy + 16; }\n                                ctx.beginPath();\n                                if (ctx.roundRect) { ctx.roundRect(tipX, tipY, tipW, tipH, 8); } else { ctx.rect(tipX, tipY, tipW, tipH); }\n                                ctx.fillStyle = '#fff';\n                                ctx.shadowColor = 'rgba(0,0,0,0.12)';\n                                ctx.shadowBlur = 10;\n                                ctx.fill();\n                                ctx.shadowBlur = 0;\n                                ctx.lineWidth = 1.8;\n                                ctx.strokeStyle = '#FF7A3D';\n                                ctx.stroke();\n                                ctx.fillStyle = '#1f2937';\n                                ctx.textAlign = 'center';\n                                ctx.textBaseline = 'middle';\n                                ctx.fillText(tipText, tipX + tipW \/ 2, tipY + tipH \/ 2);\n                            }\n                        }\n\n                        if (!canvas._lp360HoverBound) {\n                            canvas._lp360HoverBound = true;\n                            canvas.addEventListener('mousemove', function(evt) {\n                                if (!__scoreTrackerPoints) { return; }\n                                var br = canvas.getBoundingClientRect();\n                                var mouseX = evt.clientX - br.left;\n                                var currentCssWidth = parseFloat(canvas.style.width);\n                                var currentMarginL = currentCssWidth < 500 ? 50 : 60;\n                                var cw = currentCssWidth - currentMarginL - 30;\n                                var xMax = Math.max.apply(null, __scoreTrackerPoints.map(function(p) { return p.x; }));\n                                if (xMax < 2) { xMax = 2; }\n                                var dataX = (mouseX - currentMarginL) \/ cw * xMax;\n                                var nearestIdx = 0, nearestDist = Infinity;\n                                for (var pi = 0; pi < __scoreTrackerPoints.length; pi++) {\n                                    var d = Math.abs(__scoreTrackerPoints[pi].x - dataX);\n                                    if (d < nearestDist) { nearestDist = d; nearestIdx = pi; }\n                                }\n                                renderScoreTracker(nearestIdx);\n                            });\n                            canvas.addEventListener('mouseleave', function() {\n                                renderScoreTracker(undefined);\n                            });\n                        }\n                   \n                    }\n\n                var _accuracyTrackerPoints = [];\n\n                var __accuracyDomainXMax = 2;\n                var __accuracyTrackerPoints = null;\n\n                function renderAccuracyTracker(hoverIndex) {\n                        var accLabels = accuracyTracker.labels || [];\n                        var accValues = accuracyTracker.accuracies || [];\n                        var timePoints = [];\n                        var accuracyValues = [];\n\n                        for (var dataIndex = 0; dataIndex < accLabels.length; dataIndex++) {\n                            var rawLabel = accLabels[dataIndex];\n                            var timePoint = 0;\n                            if (typeof rawLabel === 'string') {\n                                if (rawLabel.indexOf('-') !== -1) {\n                                    timePoint = parseFloat(rawLabel.split('-')[0]) || 0;\n                                } else {\n                                    timePoint = parseFloat(rawLabel) || 0;\n                                }\n                            } else {\n                                timePoint = parseFloat(rawLabel) || 0;\n                            }\n                            timePoints.push(timePoint);\n                        }\n\n                        for (var valueIndex = 0; valueIndex < accValues.length; valueIndex++) {\n                            accuracyValues.push(Math.round((Number(accValues[valueIndex]) || 0) * 100));\n                        }\n\n                        var data = {\n                            timePoints: timePoints,\n                            accuracyValues: accuracyValues,\n                            xTicks: accuracyTracker.x_ticks || [],\n                            xTicksText: accuracyTracker.x_ticks_text || [],\n                            labelsText: accuracyTracker.labels_text || []\n                        };\n                        if (timePoints.length === 0 || accuracyValues.length === 0) { return; }\n\n                        var canvas = document.getElementById('lp360-accuracy-canvas');\n                        if (!canvas) { return; }\n                        var rect = canvas.parentElement.getBoundingClientRect();\n                        var dpr = window.devicePixelRatio || 1;\n                        var cssWidth = Math.max(rect.width - 12, 600);\n                        var cssHeight = Math.min(480, Math.max(300, cssWidth * 0.7));\n                        canvas.style.width = cssWidth + 'px';\n                        canvas.style.height = cssHeight + 'px';\n                        canvas.width = cssWidth * dpr;\n                        canvas.height = cssHeight * dpr;\n                        var ctx = canvas.getContext('2d');\n                        ctx.scale(dpr, dpr);\n\n                      var margin = { top: 40, bottom: 60, left: 55, right: 30 };\n                        if (cssWidth < 500) { margin.left = 48; }\n                        var chartWidth = cssWidth - margin.left - margin.right;\n                        var chartHeight = cssHeight - margin.top - margin.bottom;\n\n                        var yMin = 0, yMax = 100;\n                       var xTicksForDomain = data.xTicks || [];\n                if (xTicksForDomain.length === 0) {\n                    xTicksForDomain = timePoints.slice(); \/\/ fallback to timePoints\n                }\n                var xMin = 0, xMax = Math.max.apply(null, xTicksForDomain);\n                if (xMax < 2) { xMax = 2; }\n                __accuracyDomainXMax = xMax;\n\n                        var xRange = xMax - xMin;\n\n                        function xToCanvas(x) { return margin.left + (x - xMin) \/ xRange * chartWidth; }\n                        function yToCanvas(y) { return margin.top + chartHeight - (y - yMin) \/ (yMax - yMin) * chartHeight; }\n\n                        ctx.clearRect(0, 0, cssWidth, cssHeight);\n\n                        var yTickStep = 20;\n                        for (var y = 0; y <= 100; y += yTickStep) {\n                            var yPos = yToCanvas(y);\n                            ctx.beginPath();\n                            ctx.moveTo(margin.left, yPos);\n                            ctx.lineTo(margin.left + chartWidth, yPos);\n                            ctx.strokeStyle = '#e5e7eb';\n                            ctx.setLineDash([4, 4]);\n                            ctx.lineWidth = 1;\n                            ctx.stroke();\n                            ctx.setLineDash([]);\n                            ctx.textAlign = 'right';\n                            ctx.textBaseline = 'middle';\n                            ctx.font = (cssWidth < 500 ? 10 : 12) + 'px Inter, sans-serif';\n                            ctx.fillStyle = '#1f2937';\n                            ctx.fillText(y, margin.left - 6, yPos);\n                        }\n\n                    \n                \/\/ ---- Use xTicks for axis tick marks and grid lines ----\n                var xTicks = data.xTicks || [];\n                if (xTicks.length === 0) {\n                    xTicks = timePoints.slice();\n                }\n                var xTicksTextArr = data.xTicksText || [];\n                for (var i = 0; i < xTicks.length; i++) {\n                    var xVal = xTicks[i];\n                    var xPos = xToCanvas(xVal);\n                    ctx.beginPath();\n                    ctx.moveTo(xPos, margin.top);\n                    ctx.lineTo(xPos, margin.top + chartHeight);\n                    ctx.strokeStyle = '#e5e7eb';\n                    ctx.setLineDash([4, 4]);\n                    ctx.lineWidth = 1;\n                    ctx.stroke();\n                    ctx.setLineDash([]);\n                    ctx.textAlign = 'center';\n                    ctx.textBaseline = 'top';\n                    ctx.font = (cssWidth < 500 ? 10 : 12) + 'px Inter, sans-serif';\n                    ctx.fillStyle = '#4b5563';\n                    var tickLabel = xVal;\n                    if (xTicksTextArr[i]) { tickLabel = xTicksTextArr[i]; }\n                    ctx.fillText(tickLabel, xPos, margin.top + chartHeight + 6);\n                }\n                        ctx.save();\n                        ctx.textAlign = 'center';\n                        ctx.textBaseline = 'middle';\n                        ctx.font = (cssWidth < 500 ? 11 : 13) + 'px Inter, sans-serif';\n                        ctx.fillStyle = '#1e293b';\n                        ctx.translate(14, margin.top + chartHeight \/ 2);\n                        ctx.rotate(-Math.PI \/ 2);\n                        ctx.fillText('Accuracy (%)', 0, 0);\n                        ctx.restore();\n\n                        ctx.textAlign = 'center';\n                        ctx.textBaseline = 'top';\n                        ctx.font = (cssWidth < 500 ? 11 : 13) + 'px Inter, sans-serif';\n                        ctx.fillStyle = '#1e293b';\n                       \n                ctx.fillText('Time (minutes)', margin.left + chartWidth \/ 2, cssHeight - 16);\n                       var labelsTextArr = data.labelsText || [];\n                var points = [];\n                for (var i = 0; i < timePoints.length; i++) {\n                    var yVal = accuracyValues[i];\n                    if (yVal !== undefined) {\n                        if (!isNaN(yVal)) {\n                            var ptLabel = timePoints[i] + ' min';\n                            if (labelsTextArr[i]) { ptLabel = labelsTextArr[i]; }\n                            points.push({ x: timePoints[i], y: yVal, label: ptLabel });\n                        }\n                    }\n                }\n                        if (points.length < 2) { return; }\n                        __accuracyTrackerPoints = points;\n                        _accuracyTrackerPoints = points;\n                 \n\n                        function catmullRom(pts, seg) {\n                            if (pts.length < 2) { return []; }\n                            var result = [];\n                            for (var i = 0; i < pts.length - 1; i++) {\n                                var p0 = (i === 0) ? pts[i] : pts[i - 1];\n                                var p1 = pts[i];\n                                var p2 = pts[i + 1];\n                                var p3 = (i === pts.length - 2) ? pts[i + 1] : pts[i + 2];\n                                for (var t = 0; t <= 1; t += 1 \/ seg) {\n                                    var t2 = t * t, t3 = t2 * t;\n                                    var x = 0.5 * ((2 * p1.x) + (-p0.x + p2.x) * t + (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 +\n                                        (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3);\n                                    var y = 0.5 * ((2 * p1.y) + (-p0.y + p2.y) * t + (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 +\n                                        (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3);\n                                    result.push({ x: x, y: y });\n                                }\n                            }\n                            result.push(pts[pts.length - 1]);\n                            return result;\n                        }\n\n                     \n                        \/\/ Draw straight lines between actual data points\n                        var firstPt = points[0];\n                        ctx.beginPath();\n                        ctx.moveTo(xToCanvas(firstPt.x), yToCanvas(firstPt.y));\n                        for (var n = 1; n < points.length; n++) {\n                            var pt = points[n];\n                            ctx.lineTo(xToCanvas(pt.x), yToCanvas(pt.y));\n                        }\n                        var lastPt = points[points.length - 1];\n                        \/\/ Fill area under the curve (down to zero)\n                        ctx.lineTo(xToCanvas(lastPt.x), yToCanvas(0));\n                        ctx.lineTo(xToCanvas(firstPt.x), yToCanvas(0));\n                        ctx.closePath();\n                        var grad = ctx.createLinearGradient(0, margin.top, 0, margin.top + chartHeight);\n                        grad.addColorStop(0, 'rgba(255,122,61,0.2)');\n                        grad.addColorStop(1, 'rgba(255,122,61,0.02)');\n                        ctx.fillStyle = grad;\n                        ctx.fill();\n\n                        \/\/ Draw the line itself\n                        ctx.beginPath();\n                        ctx.moveTo(xToCanvas(firstPt.x), yToCanvas(firstPt.y));\n                        for (var n2 = 1; n2 < points.length; n2++) {\n                            var pt2 = points[n2];\n                            ctx.lineTo(xToCanvas(pt2.x), yToCanvas(pt2.y));\n                        }\n                        ctx.strokeStyle = '#FF7A3D';\n                        ctx.lineWidth = 3;\n                        ctx.shadowColor = 'rgba(255,122,61,0.3)';\n                        ctx.shadowBlur = 8;\n                        ctx.stroke();\n                        ctx.shadowBlur = 0;\n                        \nvar pointRadius = cssWidth < 500 ? 4 : 6;\n                        var lastAccLabelRect = null;\n                        for (var p = 0; p < points.length; p++) {\n                            var pt3 = points[p];\n                            var xp = xToCanvas(pt3.x);\n                            var yp = yToCanvas(pt3.y);\n                            ctx.beginPath();\n                            ctx.arc(xp, yp, pointRadius, 0, 2 * Math.PI);\n                            ctx.fillStyle = '#FF7A3D';\n                            ctx.shadowColor = 'rgba(255,122,61,0.3)';\n                            ctx.shadowBlur = 6;\n                            ctx.fill();\n                            ctx.shadowBlur = 0;\n                            ctx.beginPath();\n                            ctx.arc(xp, yp, 3, 0, 2 * Math.PI);\n                            ctx.fillStyle = '#fff';\n                            ctx.fill();\n                            ctx.font = 'bold ' + (cssWidth < 500 ? 11 : 13) + 'px Inter, sans-serif';\n                            ctx.textAlign = 'center';\n                            ctx.fillStyle = '#1f2937';\n\n                            \/\/ Avoid overlapping the previous point's label: flip side, then nudge sideways.\n                            var accLabelText = pt3.y + '%';\n                            var accLabelX = xp;\n                            var accLabelY = yp - 16;\n                            var accLabelW = ctx.measureText(accLabelText).width + 6;\n                            var accLabelH = (cssWidth < 500 ? 11 : 13) + 6;\n                            var accLabelRect = {\n                                left: accLabelX - accLabelW \/ 2, right: accLabelX + accLabelW \/ 2,\n                                top: accLabelY - accLabelH, bottom: accLabelY\n                            };\n                            if (lastAccLabelRect) {\n                                var accCollides = !(accLabelRect.right < lastAccLabelRect.left || accLabelRect.left > lastAccLabelRect.right ||\n                                    accLabelRect.bottom < lastAccLabelRect.top || accLabelRect.top > lastAccLabelRect.bottom);\n                                if (accCollides) {\n                                    accLabelY = yp + 20;\n                                    accLabelRect.top = accLabelY - 4;\n                                    accLabelRect.bottom = accLabelY + accLabelH - 4;\n                                    var accStillCollides = !(accLabelRect.right < lastAccLabelRect.left || accLabelRect.left > lastAccLabelRect.right ||\n                                        accLabelRect.bottom < lastAccLabelRect.top || accLabelRect.top > lastAccLabelRect.bottom);\n                                    if (accStillCollides) {\n                                        accLabelX = lastAccLabelRect.right + accLabelW \/ 2 + 4;\n                                        accLabelRect.left = accLabelX - accLabelW \/ 2;\n                                        accLabelRect.right = accLabelX + accLabelW \/ 2;\n                                    }\n                                }\n                            }\n                            lastAccLabelRect = accLabelRect;\n                            ctx.textBaseline = (accLabelY > yp) ? 'top' : 'alphabetic';\n                            ctx.fillText(accLabelText, accLabelX, accLabelY);\n                        }\n                        var activeIndex = hoverIndex;\n                        if (activeIndex === undefined) { activeIndex = points.length - 1; }\n                        if (activeIndex >= 0) {\n                            if (activeIndex < points.length) {\n                                var hp = points[activeIndex];\n                                var hx = xToCanvas(hp.x);\n                                var hy = yToCanvas(hp.y);\n                                ctx.save();\n                                ctx.setLineDash([4, 4]);\n                                ctx.strokeStyle = '#FF7A3D';\n                                ctx.lineWidth = 1.2;\n                                ctx.beginPath();\n                                ctx.moveTo(hx, margin.top);\n                                ctx.lineTo(hx, margin.top + chartHeight);\n                                ctx.stroke();\n                                ctx.beginPath();\n                                ctx.moveTo(margin.left, hy);\n                                ctx.lineTo(margin.left + chartWidth, hy);\n                                ctx.stroke();\n                                ctx.restore();\n\n                                ctx.beginPath();\n                                ctx.arc(hx, hy, 8, 0, 2 * Math.PI);\n                                ctx.strokeStyle = '#FF7A3D';\n                                ctx.lineWidth = 2.5;\n                                ctx.fillStyle = '#fff';\n                                ctx.fill();\n                                ctx.stroke();\n\n                                var tipText = 'Time: ' + hp.label + ' | Accuracy: ' + hp.y + '%';\n                                ctx.font = 'bold ' + (cssWidth < 500 ? 11 : 12.5) + 'px Inter, sans-serif';\n                                var tipPad = 12;\n                                var tipTextWidth = ctx.measureText(tipText).width;\n                                var tipW = tipTextWidth + tipPad * 2;\n                                var tipH = 30;\n                                var tipX = hx - tipW \/ 2;\n                                if (tipX < margin.left) { tipX = margin.left; }\n                                if (tipX + tipW > margin.left + chartWidth) { tipX = margin.left + chartWidth - tipW; }\n                                var tipY = hy - tipH - 16;\n                                if (tipY < margin.top) { tipY = hy + 16; }\n                                ctx.beginPath();\n                                if (ctx.roundRect) { ctx.roundRect(tipX, tipY, tipW, tipH, 8); } else { ctx.rect(tipX, tipY, tipW, tipH); }\n                                ctx.fillStyle = '#fff';\n                                ctx.shadowColor = 'rgba(0,0,0,0.12)';\n                                ctx.shadowBlur = 10;\n                                ctx.fill();\n                                ctx.shadowBlur = 0;\n                                ctx.lineWidth = 1.8;\n                                ctx.strokeStyle = '#FF7A3D';\n                                ctx.stroke();\n                                ctx.fillStyle = '#1f2937';\n                                ctx.textAlign = 'center';\n                                ctx.textBaseline = 'middle';\n                                ctx.fillText(tipText, tipX + tipW \/ 2, tipY + tipH \/ 2);\n                            }\n                        }\n                            \n                \/\/ ---- Hover interaction (bound once \u2014 prevents listener pile-up \/ page freeze) ----\n                            if (!canvas._lp360AccHoverBound) {\n                                canvas._lp360AccHoverBound = true;\n                                var accHoverPending = false;\n                                var accPendingIdx = null;\n                                canvas.addEventListener('mousemove', function(evt) {\n                                    if (!__accuracyTrackerPoints) { return; }\n                                    var br = canvas.getBoundingClientRect();\n                                    var mouseX = evt.clientX - br.left;\n                                    var cssWidthNow = parseFloat(canvas.style.width) || br.width - 12;\n                                    var marginLeftNow = cssWidthNow < 500 ? 48 : 55;\n                                    var chartWidthNow = cssWidthNow - marginLeftNow - 30;\n                                    var domainXMax = __accuracyDomainXMax || 2;\n                                    var dataX = (mouseX - marginLeftNow) \/ chartWidthNow * domainXMax;\n                                    var nearestIdx = 0, nearestDist = Infinity;\n                                    for (var pi = 0; pi < __accuracyTrackerPoints.length; pi++) {\n                                        var d = Math.abs(__accuracyTrackerPoints[pi].x - dataX);\n                                        if (d < nearestDist) { nearestDist = d; nearestIdx = pi; }\n                                    }\n                                    accPendingIdx = nearestIdx;\n                                    if (!accHoverPending) {\n                                        accHoverPending = true;\n                                        requestAnimationFrame(function() {\n                                            accHoverPending = false;\n                                            renderAccuracyTracker(accPendingIdx);\n                                        });\n                                    }\n                                });\n                                canvas.addEventListener('mouseleave', function() {\n                                    renderAccuracyTracker(undefined);\n                                });\n                            }\n                        \n                    }\n\n                \/\/ ---- Strength Map ----\n                var ncert = data.ncert_mapping || {};\n                document.getElementById('lp360-ncert-badge-value').textContent = ncert.badge_name || '\u2014';\n                document.getElementById('lp360-ncert-badge-desc').textContent = ncert.badge_description || '\u2014';\n               \n\n                var tsi = ncert.tsi_percentage || 0;\n                document.getElementById('lp360-tsi-value').textContent = tsi;\n\n                var bandWrap = document.querySelector('.lp360-band-wrap');\n                var bandPoor = document.querySelector('.lp360-band-poor');\n                var tsiBadge = document.getElementById('lp360-tsi-badge');\n                var bandMarker = document.getElementById('lp360-band-marker');\n\n                if (tsi < 1 || !isFinite(tsi) || isNaN(tsi)) {\n                    if (bandWrap) bandWrap.style.display = 'none';\n                    if (bandPoor) {\n                        bandPoor.style.display = 'flex';\n                        bandPoor.innerHTML =\n                            `\n                    <svg viewBox=\"0 0 24 24\" style=\"width:18px;height:18px;flex-shrink:0;\">\n                      <path d=\"M12 9v4m0 4h.01M10.3 3.86L1.8 18a2 2 0 001.7 3h16.9a2 2 0 001.7-3L13.7 3.86a2 2 0 00-3.4 0z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                    Very poor knowledge on the topic, so you need to try again after studying, so that the algorithm can generate accurate results from a more correctly answered test.\n                  `;\n                    }\n                } else {\n                    if (bandWrap) bandWrap.style.display = 'block';\n                    if (bandPoor) bandPoor.style.display = 'none';\n                    var pct = Math.max(0, Math.min(100, tsi));\n                    if (tsiBadge) {\n                        tsiBadge.style.left = pct + '%';\n                       tsiBadge.textContent = 'TSI: ' + Math.round(tsi) + '%';\n                    }\n                    if (bandMarker) bandMarker.style.left = pct + '%';\n                    var badgeElement = document.getElementById('lp360-tsi-badge');\n                    if (badgeElement) {\n                        if (tsi >= 0 && tsi <= 25) badgeElement.style.background = '#EF4444';\n                        else if (tsi > 25 && tsi <= 50) badgeElement.style.background = '#F97316';\n                        else if (tsi > 50 && tsi <= 75) badgeElement.style.background = '#FACC15';\n                        else if (tsi > 75 && tsi <= 100) badgeElement.style.background = '#22C55E';\n                    }\n                }\n\n                document.getElementById('lp360-topic-inference-text').textContent = ncert.inference || '\u2014';\n\n                \/\/ ---- Mind Map ----\n                var mind = data.mind_map || {};\n                var detailedTopics = mind.detailed_study || [];\n                var basicTopics = mind.basic_study || [];\n\n                function renderMindMap() {\n                    var lp360DummyDetailed = [\"Cell Structure &#038; Function\", \"Chemical Bonding\", \"Human Physiology\", \"Thermodynamics\", \"Indian Polity Basics\"];\n                    var lp360DummyBasic = [\"Number Systems\", \"Basic Grammar Rules\", \"Map Reading\", \"Data Interpretation\", \"General Awareness\"];\n\n                    var lp360IsMastery = false;\n                    if (detailedTopics.length === 0) {\n                        if (basicTopics.length === 0) {\n                            lp360IsMastery = true;\n                        }\n                    }\n\n                    var mindMapContainerEl = document.getElementById('lp360-mindmap-container');\n                    var summaryGridEl = document.getElementById('lp360-mm-summary-grid');\n                    var masteryTextEl = document.getElementById('lp360-mm-mastery-text');\n\n                    var displayDetailed = detailedTopics;\n                    var displayBasic = basicTopics;\n                    var displayDetailedCount = detailedTopics.length || 0;\n                    var displayBasicCount = basicTopics.length || 0;\n\n                    if (lp360IsMastery) {\n                        displayDetailed = lp360DummyDetailed;\n                        displayBasic = lp360DummyBasic;\n                        displayDetailedCount = lp360DummyDetailed.length;\n                        displayBasicCount = lp360DummyBasic.length;\n                        if (mindMapContainerEl) {\n                            mindMapContainerEl.classList.add('lp360-mm-mastery');\n                        }\n                        if (summaryGridEl) {\n                            summaryGridEl.classList.add('lp360-mm-mastery-blur');\n                        }\n                        if (masteryTextEl) {\n                            masteryTextEl.textContent = mind.inference || 'You have shown excellent knowledge and a thorough grasp on all the topics present in this test. Well done!';\n                        }\n                    } else {\n                        if (mindMapContainerEl) {\n                            mindMapContainerEl.classList.remove('lp360-mm-mastery');\n                        }\n                        if (summaryGridEl) {\n                            summaryGridEl.classList.remove('lp360-mm-mastery-blur');\n                        }\n                    }\n\n                    document.getElementById('lp360-mm-detailed-count').textContent = displayDetailedCount;\n                    document.getElementById('lp360-mm-basic-count').textContent = displayBasicCount;\n\n                    var detailedCol = document.getElementById('lp360-mm-detailed-col');\n                    detailedCol.innerHTML = '';\n                    if (displayDetailed.length === 0) {\n                        detailedCol.innerHTML =\n                            '<div class=\"lp360-mm-topic lp360-mm-topic--detailed\">No detailed-study topics<\/div>';\n                    } else {\n                        displayDetailed.forEach(function(topic) {\n                            var el = document.createElement('div');\n                            el.className = 'lp360-mm-topic lp360-mm-topic--detailed';\n                            el.textContent = topic;\n                            detailedCol.appendChild(el);\n                        });\n                    }\n\n                    var basicCol = document.getElementById('lp360-mm-basic-col');\n                    basicCol.innerHTML = '';\n                    if (displayBasic.length === 0) {\n                        basicCol.innerHTML = '<div class=\"lp360-mm-topic lp360-mm-topic--basic\">No basic-study topics<\/div>';\n                    } else {\n                        displayBasic.forEach(function(topic) {\n                            var el = document.createElement('div');\n                            el.className = 'lp360-mm-topic lp360-mm-topic--basic';\n                            el.textContent = topic;\n                            basicCol.appendChild(el);\n                        });\n                    }\n\n                    var sourceText = '';\n                    if (typeof mind.source_text === 'string' && mind.source_text.trim()) {\n                        sourceText = mind.source_text.trim();\n                    } else if (typeof mind.source === 'string' && mind.source.trim()) {\n                        sourceText = mind.source.trim();\n                    } else {\n                        var sourceParts = [];\n                        var className = mind.class_name || ncert.class_name || data.class_name || '';\n                        var bookName = mind.book_name || ncert.book_name || data.book_name || '';\n                        var chapterName = mind.chapter_name || ncert.chapter_name || data.chapter_name || '';\n                        var pages = mind.page_range || mind.pages || ncert.page_range || ncert.pages || data.page_range ||\n                            data.pages || '';\n                        if (className && bookName) sourceParts.push(className + ' ' + bookName);\n                        else if (className) sourceParts.push(className);\n                        else if (bookName) sourceParts.push(bookName);\n                        if (chapterName) sourceParts.push(chapterName);\n                        if (pages) sourceParts.push(typeof pages === 'string' && \/^pp\\.\/i.test(pages) ? pages : 'pp. ' +\n                            pages);\n                        sourceText = sourceParts.join(' \u2014 ');\n                    }\n\n                    var sourcePill = document.getElementById('lp360-mm-source-pill');\n                    if (sourcePill) {\n                        if (sourceText) {\n                            sourcePill.style.display = 'inline-flex';\n                            sourcePill.textContent = 'Source: ' + sourceText;\n                        } else {\n                            sourcePill.style.display = 'none';\n                        }\n                    }\n\n                    setTimeout(drawMindMapCurves, 150);\n                }\n\n                function drawMindMapCurves() {\n                    var container = document.getElementById('lp360-mindmap-container');\n                    var svg = document.getElementById('lp360-mindmap-svg');\n                    if (!container || !svg) return;\n                    var box = container.getBoundingClientRect();\n                    if (box.width === 0 || box.height === 0) return;\n\n                    if (box.width < 600) {\n                        svg.innerHTML = '';\n                        return;\n                    }\n\n                    svg.setAttribute('viewBox', '0 0 ' + box.width + ' ' + box.height);\n\n                    function centerOf(elm) {\n                        if (!elm) return { x: 0, y: 0, r: { width: 0, height: 0 } };\n                        var r = elm.getBoundingClientRect();\n                        return { x: r.left - box.left + r.width \/ 2, y: r.top - box.top + r.height \/ 2, r: r };\n                    }\n\n                    var detailedNode = document.getElementById('lp360-mm-detailed-node');\n                    var basicNode = document.getElementById('lp360-mm-basic-node');\n                    var centerNode = document.getElementById('lp360-mm-center-node');\n                    if (!detailedNode || !basicNode || !centerNode) return;\n\n                    var dCenter = centerOf(detailedNode);\n                    var bCenter = centerOf(basicNode);\n                    var cCenter = centerOf(centerNode);\n\n                    var paths = [];\n                    var detailedTopics = container.querySelectorAll('#lp360-mm-detailed-col .lp360-mm-topic');\n                    var dAnchorX = dCenter.x - dCenter.r.width \/ 2;\n                    for (var i = 0; i < detailedTopics.length; i++) {\n                        var chip = detailedTopics[i];\n                        var c = centerOf(chip);\n                        var startX = c.x + c.r.width \/ 2;\n                        var midX = (startX + dAnchorX) \/ 2;\n                        paths.push('<path d=\"M' + startX + ',' + c.y + ' C ' + midX + ',' + c.y + ' ' + midX + ',' + dCenter\n                            .y +\n                            ' ' + dAnchorX + ',' + dCenter.y + '\" fill=\"none\" stroke=\"#f59e72\" stroke-width=\"2\" opacity=\"0.9\" fill=\"none\"\/>');\n                        paths.push('<circle cx=\"' + startX + '\" cy=\"' + c.y + '\" r=\"3.5\" fill=\"#FF7A3D\"\/>');\n                    }\n\n                    var basicTopics = container.querySelectorAll('#lp360-mm-basic-col .lp360-mm-topic');\n                    var bAnchorX = bCenter.x + bCenter.r.width \/ 2;\n                    for (var j = 0; j < basicTopics.length; j++) {\n                        var chip2 = basicTopics[j];\n                        var c2 = centerOf(chip2);\n                        var startX2 = c2.x - c2.r.width \/ 2;\n                        var midX2 = (startX2 + bAnchorX) \/ 2;\n                        paths.push('<path d=\"M' + startX2 + ',' + c2.y + ' C ' + midX2 + ',' + c2.y + ' ' + midX2 + ',' +\n                            bCenter.y + ' ' + bAnchorX + ',' + bCenter.y +\n                            '\" fill=\"none\" stroke=\"#77c88d\" stroke-width=\"2\" opacity=\"0.9\" fill=\"none\"\/>');\n                        paths.push('<circle cx=\"' + startX2 + '\" cy=\"' + c2.y + '\" r=\"3.5\" fill=\"#22C55E\"\/>');\n                    }\n\n                    var dRightX = dCenter.x + dCenter.r.width \/ 2;\n                    var cLeftX = cCenter.x - cCenter.r.width \/ 2;\n                    paths.push('<line x1=\"' + dRightX + '\" y1=\"' + dCenter.y + '\" x2=\"' + cLeftX + '\" y2=\"' + cCenter.y +\n                        '\" stroke=\"#FF7A3D\" stroke-width=\"2\" stroke-dasharray=\"4,4\" opacity=\"0.85\"\/>');\n\n                    var cRightX = cCenter.x + cCenter.r.width \/ 2;\n                    var bLeftX = bCenter.x - bCenter.r.width \/ 2;\n                    paths.push('<line x1=\"' + cRightX + '\" y1=\"' + cCenter.y + '\" x2=\"' + bLeftX + '\" y2=\"' + bCenter.y +\n                        '\" stroke=\"#22C55E\" stroke-width=\"2\" stroke-dasharray=\"4,4\" opacity=\"0.85\"\/>');\n\n                    svg.innerHTML = paths.join('');\n                }\n\n                renderMindMap();\n\n                \/\/ ---- Performance Analytics ----\n                var timeAnalytics = data.performance_analytics && data.performance_analytics.time_analytics || {};\n                var intervalsData = [\n                    { key: '0-30', label: '< 30 SEC' },\n                    { key: '30-60', label: '30 \u2013 60 SEC' },\n                    { key: '60-90', label: '60 \u2013 90 SEC' },\n                    { key: '90+', label: '> 90 SEC' }\n                ];\n\n                function formatTimeUsed(seconds) {\n                    if (typeof seconds !== 'number' || isNaN(seconds)) seconds = 0;\n                    if (seconds <= 60) return Math.round(seconds) + ' <span>SEC<\/span>';\n                    var mins = Math.floor(seconds \/ 60);\n                    var secs = Math.round(seconds % 60);\n                    if (secs === 0) return mins + ' <span>MINTS<\/span>';\n                    return mins + ' <span>MINTS<\/span> ' + secs + ' <span>SECS<\/span>';\n                }\n\n                function updateTimeGauges(rangeKey) {\n                    var rangeData = timeAnalytics[rangeKey] || { attempts: 0, correct: 0, time_used: 0 };\n                    var attemptsVal = rangeData.attempts || 0;\n                    var correctVal = rangeData.correct || 0;\n                    var timeVal = rangeData.time_used || 0;\n\n                    var attemptCanvas = document.getElementById('lp360-gauge-attempt');\n                    var correctCanvas = document.getElementById('lp360-gauge-correct');\n                    var timeCanvas = document.getElementById('lp360-gauge-time');\n\n                    attemptCanvas.dataset.value = attemptsVal;\n                    correctCanvas.dataset.value = correctVal;\n                    timeCanvas.dataset.value = timeVal;\n\n                    document.getElementById('lp360-gauge-attempt-val').textContent = attemptsVal;\n                    document.getElementById('lp360-gauge-correct-val').textContent = correctVal;\n                    document.getElementById('lp360-gauge-time-val').innerHTML = formatTimeUsed(timeVal);\n\n                    renderTimeGauges();\n                }\n\n                function renderTimeGauges() {\n                    var gauges = document.querySelectorAll('.lp360-gauge-canvas');\n                    for (var i = 0; i < gauges.length; i++) {\n                        var canvas = gauges[i];\n                        var value = parseFloat(canvas.dataset.value) || 0;\n                        var maxVal = parseFloat(canvas.dataset.max) || 20;\n                        var color = canvas.dataset.color || '#FF7A3D';\n                        var isTimeGauge = (canvas.id === 'lp360-gauge-time');\n                        var displayValue = value;\n                        var displayMax = maxVal;\n                        var isMinutes = false;\n\n                        if (isTimeGauge) {\n                            if (value > 60) {\n                                displayValue = value \/ 60;\n                                displayMax = 60;\n                                isMinutes = true;\n                            } else {\n                                displayMax = 60;\n                                isMinutes = false;\n                            }\n                        }\n\n                        var rect = canvas.parentElement.getBoundingClientRect();\n                        var dpr = window.devicePixelRatio || 1;\n                        var cssWidth = Math.min(rect.width || 160, 180);\n                        if (cssWidth < 70) cssWidth = 70;\n                        var cssHeight = cssWidth * 1.2;\n                        canvas.style.width = cssWidth + 'px';\n                        canvas.style.height = cssHeight + 'px';\n                        canvas.width = cssWidth * dpr;\n                        canvas.height = cssHeight * dpr;\n                        var ctx = canvas.getContext('2d');\n                        ctx.scale(dpr, dpr);\n\n                        var cx = cssWidth \/ 2;\n                        var cy = cssHeight * 0.55;\n                        var radius = Math.min(cssWidth, cssHeight * 1.2) \/ 2.8;\n                        var startAngle = Math.PI * 0.75;\n                        var endAngle = Math.PI * 2.25;\n                        var totalAngle = endAngle - startAngle;\n                        var fraction = Math.min(displayValue \/ displayMax, 1);\n                        var currentAngle = startAngle + fraction * totalAngle;\n\n                        ctx.clearRect(0, 0, cssWidth, cssHeight);\n\n                        ctx.beginPath();\n                        ctx.arc(cx, cy, radius, startAngle, endAngle);\n                        ctx.strokeStyle = '#e9ecf0';\n                        ctx.lineWidth = 10;\n                        ctx.lineCap = 'round';\n                        ctx.stroke();\n\n                        var grad = ctx.createLinearGradient(0, 0, cssWidth, 0);\n                        grad.addColorStop(0, color);\n                        grad.addColorStop(0.6, color);\n                        grad.addColorStop(1, color + 'cc');\n                        ctx.beginPath();\n                        ctx.arc(cx, cy, radius, startAngle, currentAngle);\n                        ctx.strokeStyle = grad;\n                        ctx.lineWidth = 10;\n                        ctx.lineCap = 'round';\n                        ctx.shadowColor = color + '50';\n                        ctx.shadowBlur = 6;\n                        ctx.stroke();\n                        ctx.shadowBlur = 0;\n\n                        var numTicks = 6;\n                        var tickStep;\n                        if (maxVal === 50) tickStep = 10;\n                        else if (maxVal === 20) tickStep = 4;\n                        else tickStep = maxVal \/ (numTicks - 1);\n\n                        ctx.font = (cssWidth < 90 ? 6 : 8) + 'px Inter, sans-serif';\n                        ctx.fillStyle = '#6b7280';\n                        ctx.textAlign = 'center';\n                        ctx.textBaseline = 'middle';\n\n                        for (var t = 0; t < numTicks; t++) {\n                            var tickVal;\n                            if (maxVal === 50) tickVal = t * 10;\n                            else if (maxVal === 20) tickVal = t * 4;\n                            else tickVal = t * tickStep;\n                            var angle = startAngle + (tickVal \/ maxVal) * totalAngle;\n                            var tx = cx + (radius + 12) * Math.cos(angle);\n                            var ty = cy + (radius + 12) * Math.sin(angle);\n                            if (isTimeGauge) {\n                                if (isMinutes) ctx.fillText(Math.round(tickVal) + 'm', tx, ty);\n                                else ctx.fillText(Math.round(tickVal) + 's', tx, ty);\n                            } else {\n                                ctx.fillText(Math.round(tickVal), tx, ty);\n                            }\n                        }\n\n                        var needleLen = radius * 0.6;\n                        var needleX = cx + needleLen * Math.cos(currentAngle);\n                        var needleY = cy + needleLen * Math.sin(currentAngle);\n                        ctx.beginPath();\n                        ctx.moveTo(cx, cy);\n                        ctx.lineTo(needleX, needleY);\n                        ctx.strokeStyle = '#1a1a2e';\n                        ctx.lineWidth = 2.5;\n                        ctx.shadowColor = 'rgba(0,0,0,0.15)';\n                        ctx.shadowBlur = 6;\n                        ctx.stroke();\n                        ctx.shadowBlur = 0;\n\n                        ctx.beginPath();\n                        ctx.arc(cx, cy, 6, 0, 2 * Math.PI);\n                        ctx.fillStyle = color;\n                        ctx.shadowColor = color + '60';\n                        ctx.shadowBlur = 8;\n                        ctx.fill();\n                        ctx.shadowBlur = 0;\n                        ctx.beginPath();\n                        ctx.arc(cx, cy, 3, 0, 2 * Math.PI);\n                        ctx.fillStyle = '#fff';\n                        ctx.fill();\n                    }\n                }\n\n                var tabs = document.querySelectorAll('.lp360-time-tab');\n                tabs.forEach(function(tab) {\n                    tab.addEventListener('click', function() {\n                        var currentTabs = document.querySelectorAll('.lp360-time-tab');\n                        currentTabs.forEach(function(t) { t.classList.remove('active'); });\n                        this.classList.add('active');\n                        var range = this.dataset.range;\n                        updateTimeGauges(range);\n                    });\n                });\n\n                updateTimeGauges('0-30');\n\n                function renderTimeInferences() {\n                    var infContainer = document.getElementById('lp360-time-inferences');\n                    infContainer.innerHTML = '';\n                    var keys = ['0-30', '30-60', '60-90', '90+'];\n                    var maxAttempts = 0,\n                        maxAttemptKey = '';\n                    var maxCorrect = 0,\n                        maxCorrectKey = '';\n                    var maxTime = 0,\n                        maxTimeKey = '';\n                    keys.forEach(function(k) {\n                        var d = timeAnalytics[k] || { attempts: 0, correct: 0, time_used: 0 };\n                        if (d.attempts > maxAttempts) { maxAttempts = d.attempts;\n                            maxAttemptKey = k; }\n                        if (d.correct > maxCorrect) { maxCorrect = d.correct;\n                            maxCorrectKey = k; }\n                        if (d.time_used > maxTime) { maxTime = d.time_used;\n                            maxTimeKey = k; }\n                    });\n                    var labelMap = { '0-30': '< 30 SEC', '30-60': '30 \u2013 60 SEC', '60-90': '60 \u2013 90 SEC', '90+': '> 90 SEC' };\n                    var inf1 = document.createElement('div');\n                    inf1.className = 'lp360-inference-block';\n                    inf1.innerHTML =\n                        '<div class=\"lp360-inference-icon orange\"><svg viewBox=\"0 0 24 24\"><path d=\"M3 17l5-5 4 4 7-9\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div><div><div class=\"lp360-inference-title\">INFERENCE 01<\/div><div class=\"lp360-inference-text\">Highest attempt activity was observed during the ' +\n                        (labelMap[maxAttemptKey] || '< 30 SEC') + ' time interval.<\/div><\/div>';\n                    infContainer.appendChild(inf1);\n                    var inf2 = document.createElement('div');\n                    inf2.className = 'lp360-inference-block';\n                    inf2.innerHTML =\n                        '<div class=\"lp360-inference-icon green\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 6L9 17l-5-5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div><div><div class=\"lp360-inference-title\">INFERENCE 02<\/div><div class=\"lp360-inference-text\">The highest number of correct answers was recorded during the ' +\n                        (labelMap[maxCorrectKey] || '< 30 SEC') + ' secs time interval.<\/div><\/div>';\n                    infContainer.appendChild(inf2);\n                }\n                renderTimeInferences();\n\n                \/\/ ---- Pressure ----\n                var pressureAnalytics = data.performance_analytics && data.performance_analytics.pressure_analytics || {};\n                var pressureData = pressureAnalytics.pressure_over_time || [];\n                var xTicksPressure = pressureAnalytics.x_ticks || [];\n                var __pressureTrackerPoints = null;\n                var __pressureChartGeom = null;\n                var __pressureHoverIndex = -1;\nfunction renderPressureChart() {\n                    var canvas = document.getElementById('lp360-pressure-canvas');\n                    if (!canvas) return;\n                    var container = canvas.parentElement;\n                    var nullOverlay = document.getElementById('lp360-pressure-null-overlay');\n                    var isNullState = false;\n                    if (pressureAnalytics['null'] === true) { isNullState = true; }\n                   var pressureInferencesRow = document.getElementById('lp360-pressure-inferences');\n                    if (isNullState) {\n                        container.classList.add('is-null');\n                        if (pressureInferencesRow) { pressureInferencesRow.classList.add('is-null'); }\n                        if (nullOverlay) {\n                            nullOverlay.style.display = 'flex';\n                            var nullMsgEl = document.getElementById('lp360-pressure-null-message');\n                            if (nullMsgEl) {\n                                nullMsgEl.textContent = pressureAnalytics.message || 'Pressure Response Analysis is unavailable for this attempt.';\n                            }\n                        }\n                    } else {\n                        container.classList.remove('is-null');\n                        if (pressureInferencesRow) { pressureInferencesRow.classList.remove('is-null'); }\n                        if (nullOverlay) { nullOverlay.style.display = 'none'; }\n                    }\n                    var containerWidth = container.getBoundingClientRect().width;\n\n                    var cssWidth = Math.max(containerWidth, 280);\n                    var cssHeight = Math.min(420, Math.max(220, cssWidth * 0.5));\n                    canvas.style.width = cssWidth + 'px';\n                    canvas.style.height = cssHeight + 'px';\n                    var dpr = window.devicePixelRatio || 1;\n                    canvas.width = cssWidth * dpr;\n                    canvas.height = cssHeight * dpr;\n                    var ctx = canvas.getContext('2d');\n                    ctx.scale(dpr, dpr);\n\n                    var margin = { top: 28, bottom: 36, left: 38, right: 16 };\n                    if (cssWidth < 400) { margin.left = 30;\n                        margin.bottom = 30; }\n                    var chartWidth = cssWidth - margin.left - margin.right;\n                    var chartHeight = cssHeight - margin.top - margin.bottom;\n\n\nvar dummyPressurePoints = [\n                        { x: 0, y: 0.5 }, { x: 6, y: 1.2 }, { x: 12, y: 0.8 }, { x: 18, y: 2.0 },\n                        { x: 24, y: 1.5 }, { x: 30, y: 2.8 }, { x: 36, y: 2.0 }, { x: 42, y: 3.5 },\n                        { x: 48, y: 2.5 }, { x: 54, y: 1.0 }, { x: 60, y: 0.8 }\n                    ];\n                    var points;\n                    var tickValuesReal = [];\n                    if (isNullState) {\n                        points = dummyPressurePoints;\n                    } else {\n                        \/\/ Never trust backend order \u2014 sort ascending by interval_min every time.\n                        var sortedPressureData = pressureData.slice();\n                        sortedPressureData.sort(function(a, b) { return a.interval_min - b.interval_min; });\n                        points = sortedPressureData.map(function(p) { return { x: p.interval_min, y: p.pressure }; });\n                        if (points.length === 0) points = [{ x: 0, y: 0 }];\n\n                        \/\/ Upper X bound is dynamic: last interval rounded up to the nearest 7-minute\n                        \/\/ block, or the last x_ticks value, whichever is larger. Never hardcoded.\n                        var lastInterval = points[points.length - 1].x;\n                        var maxXFromInterval = Math.ceil(lastInterval \/ 7) * 7;\n                        if (xTicksPressure.length > 0) {\n                            tickValuesReal = xTicksPressure;\n                        } else {\n                            for (var tv = 0; tv <= maxXFromInterval + 5; tv += 7) { tickValuesReal.push(tv); }\n                        }\n                        var maxXFromTicks = tickValuesReal.length > 0 ? tickValuesReal[tickValuesReal.length - 1] : maxXFromInterval;\n                        maxXFromInterval = Math.max(maxXFromInterval, maxXFromTicks);\n                    }\n                    var xMin = 0;\n                    var xMax = isNullState ? 60 : maxXFromInterval;\n                    var yMin = 0;\n                   var yMax = isNullState ? 5 : Math.max.apply(null, points.map(function(p) { return p.y; })) + 1;\n                    if (yMax < 2) yMax = 2;\n\n                    __pressureChartGeom = {\n                        marginLeft: margin.left,\n                        marginTop: margin.top,\n                        chartWidth: chartWidth,\n                        chartHeight: chartHeight,\n                        xMin: xMin,\n                        xMax: xMax,\n                        yMin: yMin,\n                        yMax: yMax\n                    };\n                    __pressureTrackerPoints = isNullState ? null : points;\n\n                    function xToCanvas(x) { return margin.left + (x - xMin) \/ (xMax - xMin) * chartWidth; }\n\n                    function yToCanvas(y) { return margin.top + chartHeight - (y - yMin) \/ (yMax - yMin) * chartHeight; }\n\n                    ctx.clearRect(0, 0, cssWidth, cssHeight);\n\n      var yTickStepPressure = isNullState ? 1 : Math.ceil(yMax \/ 4);\n                    for (var y = 0; y <= yMax; y += yTickStepPressure) {             \n                        var yPos = yToCanvas(y);\n                        ctx.beginPath();\n                        ctx.moveTo(margin.left, yPos);\n                        ctx.lineTo(margin.left + chartWidth, yPos);\n                        ctx.strokeStyle = '#e5e7eb';\n                        ctx.setLineDash([4, 4]);\n                        ctx.lineWidth = 1;\n                        ctx.stroke();\n                        ctx.setLineDash([]);\n                        ctx.textAlign = 'right';\n                        ctx.textBaseline = 'middle';\n                        ctx.font = (cssWidth < 400 ? 9 : 11) + 'px Inter, sans-serif';\n                        ctx.fillStyle = '#1f2937';\n                        ctx.fillText(y, margin.left - 5, yPos);\n                    }\n\n             var tickValues = isNullState ? [0, 10, 20, 30, 40, 50, 60] : tickValuesReal;      \n                    tickValues.forEach(function(tick) {\n                        if (tick < xMin || tick > xMax) return;\n                        var xPos = xToCanvas(tick);\n                        ctx.beginPath();\n                        ctx.moveTo(xPos, margin.top);\n                        ctx.lineTo(xPos, margin.top + chartHeight);\n                        ctx.strokeStyle = '#e5e7eb';\n                        ctx.setLineDash([4, 4]);\n                        ctx.lineWidth = 1;\n                        ctx.stroke();\n                        ctx.setLineDash([]);\n                        ctx.textAlign = 'center';\n                        ctx.textBaseline = 'top';\n                        ctx.font = (cssWidth < 400 ? 9 : 11) + 'px Inter, sans-serif';\n                        ctx.fillStyle = '#4b5563';\n                        ctx.fillText(tick, xPos, margin.top + chartHeight + 5);\n                    });\n\n                    ctx.save();\n                    ctx.textAlign = 'center';\n                    ctx.textBaseline = 'middle';\n                    ctx.font = (cssWidth < 400 ? 9 : 11) + 'px Inter, sans-serif';\n                    ctx.fillStyle = '#1e293b';\n                    ctx.translate(14, margin.top + chartHeight \/ 2);\n                    ctx.rotate(-Math.PI \/ 2);\n                    ctx.fillText('Pressure Level', 0, 0);\n                    ctx.restore();\n\n                    ctx.textAlign = 'center';\n                    ctx.textBaseline = 'top';\n                    ctx.font = (cssWidth < 400 ? 9 : 11) + 'px Inter, sans-serif';\n                    ctx.fillStyle = '#1e293b';\n                    ctx.fillText('Time (minutes)', margin.left + chartWidth \/ 2, cssHeight - 14);\n\n               if (points.length > 0) {\n                        var pressureLineColor = isNullState ? '#9ca3af' : '#E85D3A';\n                        ctx.beginPath();\n                        for (var i = 0; i < points.length; i++) {\n                            var xp = xToCanvas(points[i].x);\n                            var yp = yToCanvas(points[i].y);\n                            if (i === 0) ctx.moveTo(xp, yp);\n                            else ctx.lineTo(xp, yp);\n                        }\n                        ctx.strokeStyle = pressureLineColor;\n                        ctx.lineWidth = 2.5;\n                        ctx.stroke();\n\n                        var lastPressureLabelRect = null;\n                        for (var j = 0; j < points.length; j++) {\n                            var xp2 = xToCanvas(points[j].x);\n                            var yp2 = yToCanvas(points[j].y);\n                            ctx.beginPath();\n                            ctx.arc(xp2, yp2, isNullState ? 3 : 5, 0, 2 * Math.PI);\n                            ctx.fillStyle = pressureLineColor;\n                            if (isNullState === false) {\n                                ctx.shadowColor = 'rgba(232,93,58,0.3)';\n                                ctx.shadowBlur = 6;\n                            }\n                            ctx.fill();\n                            ctx.shadowBlur = 0;\n\n                            if (isNullState === false) {\n                                ctx.font = 'bold ' + (cssWidth < 400 ? 9 : 11) + 'px Inter, sans-serif';\n                                ctx.textAlign = 'center';\n                                ctx.fillStyle = '#1f2937';\n\n                                \/\/ Avoid overlapping the previous point's label: flip side, then nudge sideways.\n                                var pressureLabelText = points[j].y.toFixed(1);\n                                var pressureLabelX = xp2;\n                                var pressureLabelY = yp2 - 14;\n                                var pressureLabelW = ctx.measureText(pressureLabelText).width + 6;\n                                var pressureLabelH = (cssWidth < 400 ? 9 : 11) + 6;\n                                var pressureLabelRect = {\n                                    left: pressureLabelX - pressureLabelW \/ 2, right: pressureLabelX + pressureLabelW \/ 2,\n                                    top: pressureLabelY - pressureLabelH, bottom: pressureLabelY\n                                };\n                                if (lastPressureLabelRect) {\n                                    var pressureCollides = !(pressureLabelRect.right < lastPressureLabelRect.left || pressureLabelRect.left > lastPressureLabelRect.right ||\n                                        pressureLabelRect.bottom < lastPressureLabelRect.top || pressureLabelRect.top > lastPressureLabelRect.bottom);\n                                    if (pressureCollides) {\n                                        pressureLabelY = yp2 + 18;\n                                        pressureLabelRect.top = pressureLabelY - 4;\n                                        pressureLabelRect.bottom = pressureLabelY + pressureLabelH - 4;\n                                        var pressureStillCollides = !(pressureLabelRect.right < lastPressureLabelRect.left || pressureLabelRect.left > lastPressureLabelRect.right ||\n                                            pressureLabelRect.bottom < lastPressureLabelRect.top || pressureLabelRect.top > lastPressureLabelRect.bottom);\n                                        if (pressureStillCollides) {\n                                            pressureLabelX = lastPressureLabelRect.right + pressureLabelW \/ 2 + 4;\n                                            pressureLabelRect.left = pressureLabelX - pressureLabelW \/ 2;\n                                            pressureLabelRect.right = pressureLabelX + pressureLabelW \/ 2;\n                                        }\n                                    }\n                                }\n                                lastPressureLabelRect = pressureLabelRect;\n                                ctx.textBaseline = (pressureLabelY > yp2) ? 'top' : 'alphabetic';\n                                ctx.fillText(pressureLabelText, pressureLabelX, pressureLabelY);\n                            }\n                        }\n                    }\n\n                    \/\/ ---- Hover tooltip: only draws when hovering an actual marker ----\n                    if (__pressureTrackerPoints) {\n                        if (__pressureHoverIndex !== -1) {\n                            if (__pressureHoverIndex < __pressureTrackerPoints.length) {\n                                var hp = __pressureTrackerPoints[__pressureHoverIndex];\n                                var hx = xToCanvas(hp.x);\n                                var hy = yToCanvas(hp.y);\n\n                                ctx.beginPath();\n                                ctx.arc(hx, hy, 8, 0, 2 * Math.PI);\n                                ctx.strokeStyle = '#E85D3A';\n                                ctx.lineWidth = 2.5;\n                                ctx.fillStyle = '#fff';\n                                ctx.fill();\n                                ctx.stroke();\n\n                                var tipText = formatPressureTime(hp.x) + '  \\u2192  Pressure: ' + hp.y.toFixed(1);\n                                ctx.font = 'bold ' + (cssWidth < 400 ? 10 : 12) + 'px Inter, sans-serif';\n                                var tipPad = 10;\n                                var tipTextWidth = ctx.measureText(tipText).width;\n                                var tipW = tipTextWidth + tipPad * 2;\n                                var tipH = 28;\n                                var tipX = hx - tipW \/ 2;\n                                if (tipX < margin.left) { tipX = margin.left; }\n                                if (tipX + tipW > margin.left + chartWidth) { tipX = margin.left + chartWidth - tipW; }\n                                var tipY = hy - tipH - 14;\n                                if (tipY < margin.top) { tipY = hy + 14; }\n\n                                ctx.beginPath();\n                                if (ctx.roundRect) { ctx.roundRect(tipX, tipY, tipW, tipH, 7); } else { ctx.rect(tipX, tipY, tipW, tipH); }\n                                ctx.fillStyle = '#fff';\n                                ctx.shadowColor = 'rgba(0,0,0,0.14)';\n                                ctx.shadowBlur = 8;\n                                ctx.fill();\n                                ctx.shadowBlur = 0;\n                                ctx.lineWidth = 1.5;\n                                ctx.strokeStyle = '#E85D3A';\n                                ctx.stroke();\n                                ctx.fillStyle = '#1f2937';\n                                ctx.textAlign = 'center';\n                                ctx.textBaseline = 'middle';\n                                ctx.fillText(tipText, tipX + tipW \/ 2, tipY + tipH \/ 2);\n                            }\n                        }\n                    }\n\n                    if (!canvas._lp360PressureHoverBound) {\n                        canvas._lp360PressureHoverBound = true;\n                        canvas.addEventListener('mousemove', function(evt) {\n                            if (!__pressureTrackerPoints) { return; }\n                            if (!__pressureChartGeom) { return; }\n                            var g = __pressureChartGeom;\n                            var br = canvas.getBoundingClientRect();\n                            var mouseX = evt.clientX - br.left;\n                            var mouseY = evt.clientY - br.top;\n                            var nearestIdx = -1;\n                            var nearestDist = 12;\n                            for (var pi = 0; pi < __pressureTrackerPoints.length; pi++) {\n                                var p = __pressureTrackerPoints[pi];\n                                var px = g.marginLeft + (p.x - g.xMin) \/ (g.xMax - g.xMin) * g.chartWidth;\n                                var py = g.marginTop + g.chartHeight - (p.y - g.yMin) \/ (g.yMax - g.yMin) * g.chartHeight;\n                                var dx = mouseX - px;\n                                var dy = mouseY - py;\n                                var dist = Math.sqrt(dx * dx + dy * dy);\n                                if (dist < nearestDist) {\n                                    nearestDist = dist;\n                                    nearestIdx = pi;\n                                }\n                            }\n                            if (nearestIdx !== __pressureHoverIndex) {\n                                __pressureHoverIndex = nearestIdx;\n                                renderPressureChart();\n                            }\n                        });\n                        canvas.addEventListener('mouseleave', function() {\n                            if (__pressureHoverIndex !== -1) {\n                                __pressureHoverIndex = -1;\n                                renderPressureChart();\n                            }\n                        });\n                    }\n                }     \n                document.getElementById('lp360-pressure-phase1').textContent = pressureAnalytics.phase1_inference ||\n                    'No inference available.';\n                document.getElementById('lp360-pressure-phase2').textContent = pressureAnalytics.phase2_inference ||\n                    'No inference available.';\n                document.getElementById('lp360-pressure-phase3').textContent = pressureAnalytics.phase3_inference ||\n                    'No inference available.';\n\n                \/\/ ---- Predictions ----\n                                var pred = data.predictions || {};\n                var scorePred = pred.score_prediction || {};\n                var ideal = pred.ideal_time_prediction || {};\n                var predConfidence = pred.prediction_confidence || {};\n\n                document.getElementById('lp360-pred-score').textContent = scorePred.predicted_score || 0;\n                document.getElementById('lp360-pred-inference').textContent = scorePred.inference || '\u2014';\n                document.getElementById('lp360-pred-tip').textContent = scorePred.mentor_tip || '\u2014';\n\n                                var confValueEl = document.getElementById('lp360-pred-confidence-value');\n                var confLevelEl = document.getElementById('lp360-pred-confidence-level');\n                if (confValueEl) {\n                    if (predConfidence.confidence_percentage !== undefined) {\n                        confValueEl.textContent = Math.round(predConfidence.confidence_percentage) + '%';\n                    }\n                }\n                if (confLevelEl) {\n                    if (predConfidence.confidence_level) {\n                        confLevelEl.textContent = String(predConfidence.confidence_level).toUpperCase();\n                    }\n                }\n                if (predConfidence.confidence_percentage !== undefined) {\n                    var confColorClass = 'conf-low';\n                    var confPct = Number(predConfidence.confidence_percentage) || 0;\n                    if (confPct >= 89) {\n                        confColorClass = 'conf-excellent';\n                    } else {\n                        if (confPct >= 72) {\n                            confColorClass = 'conf-high';\n                        } else {\n                            if (confPct >= 51) {\n                                confColorClass = 'conf-moderate';\n                            }\n                        }\n                    }\n                    if (confValueEl) {\n                        confValueEl.classList.remove('conf-low', 'conf-moderate', 'conf-high', 'conf-excellent');\n                        confValueEl.classList.add(confColorClass);\n                    }\n                    if (confLevelEl) {\n                        confLevelEl.classList.remove('conf-low', 'conf-moderate', 'conf-high', 'conf-excellent');\n                        confLevelEl.classList.add(confColorClass);\n                    }\n                }\n\n               function formatIdeal(seconds) {\n    if (typeof seconds !== 'number' || isNaN(seconds)) seconds = 0;\n    return Math.round(seconds).toString();\n}\n                document.getElementById('lp360-ot-basic').innerHTML = formatIdeal(ideal.basic_concept_time) +\n                    ' <span class=\"lp360-ot-unit\">SEC<\/span>';\n                document.getElementById('lp360-ot-multiple').innerHTML = formatIdeal(ideal.multiple_concept_time) +\n                    ' <span class=\"lp360-ot-unit\">SEC<\/span>';\n                document.getElementById('lp360-ot-analytical').innerHTML = formatIdeal(ideal.analytical_concept_time) +\n                    ' <span class=\"lp360-ot-unit\">SEC<\/span>';\n\n                \/\/ ---- Answer Key ----\n                function normalizeAnswerKey(source) {\n                    if (!source || !source.questions || !Array.isArray(source.questions)) {\n                        return { summary: null, questions: [] };\n                    }\n                    return {\n                        summary: source.summary || { correct: 0, incorrect: 0, unattempted: 0, total: 0 },\n                        questions: source.questions\n                    };\n                }\n\n                function renderAnswerKey(source) {\n                    var grid = document.getElementById('lp360-answer-key-grid');\n                    var placeholder = document.getElementById('lp360-answer-key-placeholder');\n                    var summary = document.getElementById('lp360-answer-key-summary');\n                    var filters = document.getElementById('lp360-ak-filters');\n                    if (!grid || !placeholder || !summary) return;\n\n                    var data = normalizeAnswerKey(source);\n                    var questions = data.questions;\n                    var counts = data.summary;\n                    \n                    grid.innerHTML = '';\n                    if (!questions.length) {\n                        placeholder.style.display = 'block';\n                        summary.style.display = 'none';\n                        if (filters) filters.style.display = 'none';\n                        return;\n                    }\n\n                    placeholder.style.display = 'none';\n                    summary.style.display = 'grid';\n                    if (filters) filters.style.display = 'flex';\n\n                    if (counts) {\n                        var totalEl = document.getElementById('lp360-ak-total');\n                        if (totalEl) totalEl.textContent = counts.total;\n                        var correctEl = document.getElementById('lp360-ak-correct');\n                        if (correctEl) correctEl.textContent = counts.correct;\n                        var incorrectEl = document.getElementById('lp360-ak-incorrect');\n                        if (incorrectEl) incorrectEl.textContent = counts.incorrect;\n                        var unattemptedEl = document.getElementById('lp360-ak-unattempted');\n                        if (unattemptedEl) unattemptedEl.textContent = counts.unattempted;\n                    }\n\n                    function renderGrid(filterStatus) {\n                        grid.innerHTML = '';\n                        questions.forEach(function(q) {\n                            var status = (q.status || 'unattempted').toLowerCase();\n                            if (filterStatus && filterStatus !== 'all' && status !== filterStatus) {\n                                return;\n                            }\n\n                            var card = document.createElement('div');\n                            card.className = 'lp360-ak-card lp360-ak-card--' + status;\n\n                            var header = document.createElement('div');\n                            header.className = 'lp360-ak-card-header';\n                            \n                            var qNum = document.createElement('span');\n                            qNum.className = 'lp360-ak-qnum';\n                            qNum.textContent = 'Q' + q.question_number;\n                            header.appendChild(qNum);\n                            \n                            var pill = document.createElement('span');\n                            pill.className = 'lp360-ak-status-pill lp360-ak-status-pill--' + status;\n                            pill.textContent = status.toUpperCase();\n                            header.appendChild(pill);\n                            \n                            if (q.topic) {\n                                var topic = document.createElement('span');\n                                topic.className = 'lp360-ak-topic';\n                                topic.textContent = q.topic;\n                                header.appendChild(topic);\n                            }\n                            card.appendChild(header);\n\n                            if (q.question_text) {\n                                var text = document.createElement('div');\n                                text.className = 'lp360-ak-qtext';\n                                text.innerHTML = q.question_text;\n                                card.appendChild(text);\n                            }\n\n                            if (q.ncert_tag) {\n                                var ncert = document.createElement('div');\n                                ncert.className = 'lp360-ak-ncert';\n                                ncert.textContent = q.ncert_tag;\n                                card.appendChild(ncert);\n                            }\n\n                            if (q.code_snippet) {\n                                var pre = document.createElement('pre');\n                                pre.className = 'lp360-ak-code';\n                                var code = document.createElement('code');\n                                if (typeof q.code_snippet === 'object') {\n                                    code.textContent = q.code_snippet.code;\n                                    if (q.code_snippet.language) {\n                                        pre.setAttribute('data-language', q.code_snippet.language);\n                                    }\n                                } else {\n                                    code.textContent = q.code_snippet;\n                                }\n                                pre.appendChild(code);\n                                card.appendChild(pre);\n                            }\n\n                            if (q.options && q.options.length) {\n                                var optionsWrap = document.createElement('div');\n                                optionsWrap.className = 'lp360-ak-options';\n                                q.options.forEach(function(opt) {\n                                    var optDiv = document.createElement('div');\n                                    optDiv.className = 'lp360-ak-option';\n                                    if (opt.is_correct) {\n                                        optDiv.className += ' lp360-ak-option--correct';\n                                    } else if (opt.is_selected) {\n                                        optDiv.className += ' lp360-ak-option--wrong';\n                                    }\n\n                                    var label = document.createElement('span');\n                                    label.className = 'lp360-ak-opt-label';\n                                    label.textContent = opt.label;\n                                    optDiv.appendChild(label);\n\n                                    var textOpt = document.createElement('span');\n                                    textOpt.className = 'lp360-ak-opt-text';\n                                    textOpt.innerHTML = opt.text;\n                                    optDiv.appendChild(textOpt);\n\n                                    if (opt.is_correct) {\n                                        var tag = document.createElement('span');\n                                        tag.className = 'lp360-ak-opt-tag';\n                                        tag.textContent = 'CORRECT';\n                                        optDiv.appendChild(tag);\n                                    }\n                                    \n                                    optionsWrap.appendChild(optDiv);\n                                });\n                                card.appendChild(optionsWrap);\n                            }\n\n                            if (q.explanations && typeof q.explanations === 'object') {\n                                var keys = Object.keys(q.explanations);\n                                if (keys.length > 0) {\n                                    var exWrap = document.createElement('div');\n                                    exWrap.className = 'lp360-ak-explanations';\n                                    keys.forEach(function(key) {\n                                        var ex = q.explanations[key];\n                                        if (!ex || !ex.html) return;\n                                        \n                                        var exDiv = document.createElement('div');\n                                        var safeClass = key.replace(\/_\/g, '-');\n                                        exDiv.className = 'lp360-ak-explanation lp360-ak-explanation--' + safeClass;\n                                        \n                                        var title = document.createElement('div');\n                                        title.className = 'lp360-ak-ex-title';\n                                        title.textContent = ex.title;\n                                        exDiv.appendChild(title);\n                                        \n                                        var content = document.createElement('div');\n                                        content.className = 'lp360-ak-ex-content';\n                                        content.innerHTML = ex.html;\n                                        exDiv.appendChild(content);\n                                        \n                                        exWrap.appendChild(exDiv);\n                                    });\n                                    if (exWrap.childNodes.length > 0) {\n                                        card.appendChild(exWrap);\n                                    }\n                                }\n                            } else if (q.explanation) {\n                                var exWrap2 = document.createElement('div');\n                                exWrap2.className = 'lp360-ak-explanations';\n                                var exDiv2 = document.createElement('div');\n                                exDiv2.className = 'lp360-ak-explanation lp360-ak-explanation--short';\n                                var title2 = document.createElement('div');\n                                title2.className = 'lp360-ak-ex-title';\n                                title2.textContent = '\ud83d\udca1 Explanation';\n                                exDiv2.appendChild(title2);\n                                var content2 = document.createElement('div');\n                                content2.className = 'lp360-ak-ex-content';\n                                content2.innerHTML = q.explanation;\n                                exDiv2.appendChild(content2);\n                                exWrap2.appendChild(exDiv2);\n                                card.appendChild(exWrap2);\n                            }\n\n                            grid.appendChild(card);\n                        });\n                    }\n\n                    renderGrid('all');\n\n                    if (filters && !filters.dataset.initialized) {\n                        filters.dataset.initialized = 'true';\n                        var btns = filters.querySelectorAll('.lp360-ak-filter-btn');\n                        btns.forEach(function(btn) {\n                            btn.addEventListener('click', function() {\n                                btns.forEach(function(s) { s.classList.remove('active'); });\n                                btn.classList.add('active');\n                                renderGrid(btn.getAttribute('data-filter'));\n                            });\n                        });\n                    }\n                }\n\n                if (data.answer_key || data.answerKey || data.answers) {\n                    renderAnswerKey(data.answer_key || data.answerKey || data.answers);\n                } else {\n                    var wpAjaxUrl = window.location.origin + '\/wp-admin\/admin-ajax.php';\n                    var attemptIdStr = (typeof attemptId !== 'undefined') ? attemptId : '';\n                    if (attemptIdStr) {\n                        var actionsToTry = [\n                            'dq_get_answer_key',\n                            'dq_get_booster_answer_key',\n                            'dq_get_fulllength_answer_key',\n                            'dq_get_pyq_answer_key',\n                            'dq_get_categorized_answer_key'\n                        ];\n                        function tryNextAction(index) {\n                            if (index >= actionsToTry.length) {\n                                renderAnswerKey(null);\n                                return;\n                            }\n                            var wpUrl = wpAjaxUrl + '?action=' + actionsToTry[index] + '&attempt_id=' + encodeURIComponent(attemptIdStr);\n                            fetch(wpUrl, { credentials: 'same-origin' })\n                                .then(function(r) { return r.json(); })\n                                .then(function(wpJson) {\n                                    if (wpJson && wpJson.success && wpJson.data && wpJson.data.answer_key) {\n                                        renderAnswerKey(wpJson.data.answer_key);\n                                    } else {\n                                        tryNextAction(index + 1);\n                                    }\n                                })\n                                .catch(function(err) {\n                                    tryNextAction(index + 1);\n                                });\n                        }\n                        tryNextAction(0);\n                    } else {\n                        renderAnswerKey(null);\n                    }\n                }\n\n                \/\/ ---- Render charts ----\n                setTimeout(function() {\n                    renderScoreTracker();\n                    renderAccuracyTracker();\n                    renderTimeGauges();\n                    renderPressureChart();\n\n                    var accCanvas = document.getElementById('lp360-accuracy-canvas');\n                    if (accCanvas && !accCanvas._lp360AccHoverBound) {\n                        accCanvas._lp360AccHoverBound = true;\n                        var accHoverPending = false;\n                        var accPendingIdx = null;\n\n                        accCanvas.addEventListener('mousemove', function(evt) {\n                            if (!_accuracyTrackerPoints || _accuracyTrackerPoints.length === 0) return;\n                            var br = accCanvas.getBoundingClientRect();\n                            var mouseX = evt.clientX - br.left;\n                            var cssWidthNow = parseFloat(accCanvas.style.width) || br.width - 12;\n                            var marginLeftNow = cssWidthNow < 400 ? 32 : 40;\n                            var chartWidthNow = cssWidthNow - marginLeftNow - 16;\n                            var xTicksAcc = accuracyTracker.x_ticks || [0];\n                            var xMaxAcc = (xTicksAcc.length > 0) ? xTicksAcc[xTicksAcc.length - 1] : 20;\n                            var dataX = (mouseX - marginLeftNow) \/ chartWidthNow * xMaxAcc;\n                            var nearestIdx = 0,\n                                nearestDist = Infinity;\n                            for (var pi = 0; pi < _accuracyTrackerPoints.length; pi++) {\n                                var d = Math.abs(_accuracyTrackerPoints[pi].x - dataX);\n                                if (d < nearestDist) { nearestDist = d;\n                                    nearestIdx = pi; }\n                            }\n                            accPendingIdx = nearestIdx;\n                            if (!accHoverPending) {\n                                accHoverPending = true;\n                                requestAnimationFrame(function() {\n                                    accHoverPending = false;\n                                    renderAccuracyTracker(accPendingIdx);\n                                });\n                            }\n                        });\n\n                        accCanvas.addEventListener('mouseleave', function() {\n                            renderAccuracyTracker(undefined);\n                        });\n                    }\n                }, 150);\n\n                var resizeTimer;\n                window.addEventListener('resize', function() {\n                    clearTimeout(resizeTimer);\n                    resizeTimer = setTimeout(function() {\n                        renderScoreTracker();\n                        renderAccuracyTracker();\n                        renderTimeGauges();\n                        renderPressureChart();\n                        drawMindMapCurves();\n                    }, 250);\n                });\n\n                \/\/ ---- Tab navigation ----\n                var tabBtns = document.querySelectorAll('.lp360-tab-btn[data-target]');\n                var sections = document.querySelectorAll('.lp360-section-card');\n\n                function scrollToSection(sectionId) {\n                    var target = document.getElementById('lp360-section-' + sectionId);\n                    if (target) {\n                        var offset = 140;\n                        var top = target.getBoundingClientRect().top + window.pageYOffset - offset;\n                        window.scrollTo({ top: top, behavior: 'smooth' });\n                    }\n                }\n\n                tabBtns.forEach(function(btn) {\n                    btn.addEventListener('click', function() {\n                        var target = this.dataset.target;\n                        tabBtns.forEach(function(b) { b.classList.remove('active'); });\n                        this.classList.add('active');\n                        scrollToSection(target);\n                    });\n                });\n\n                function checkVisibility() {\n                    var windowHeight = window.innerHeight;\n                    var scrollY = window.scrollY || window.pageYOffset;\n                    var activeSection = null;\n                    sections.forEach(function(section) {\n                        var rect = section.getBoundingClientRect();\n                        var top = rect.top + scrollY;\n                        var isVisible = (scrollY + windowHeight - 100) > top;\n                        if (isVisible) {\n                            section.classList.add('visible');\n                            if (rect.top < windowHeight \/ 2) activeSection = section.dataset.section;\n                        }\n                    });\n                    if (activeSection) {\n                        tabBtns.forEach(function(btn) {\n                            btn.classList.remove('active');\n                            if (btn.dataset.target === activeSection) btn.classList.add('active');\n                        });\n                    }\n                    var progressFill = document.getElementById('lp360-progress-fill');\n                    var totalHeight = document.documentElement.scrollHeight - window.innerHeight;\n                    var progress = totalHeight > 0 ? (scrollY \/ totalHeight) * 100 : 0;\n                    if (progressFill) progressFill.style.width = Math.min(progress, 100) + '%';\n                }\n\n                window.addEventListener('scroll', checkVisibility);\n                window.addEventListener('resize', checkVisibility);\n                setTimeout(checkVisibility, 100);\n            }\n\n            loadAnalytics(function(analytics) {\n                renderDashboard(analytics);\n            });\n\n        })();\n    <\/script><\/div>\n","protected":false},"excerpt":{"rendered":"<p>CUET Launchpad 360 ` CUET Launchpad 360 Basic Info Tracker Strength Map Time Tracker Predictions Answer Key Basic Info YOUR [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-244","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/massgraduates.com\/index.php\/wp-json\/wp\/v2\/pages\/244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/massgraduates.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/massgraduates.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/massgraduates.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/massgraduates.com\/index.php\/wp-json\/wp\/v2\/comments?post=244"}],"version-history":[{"count":2,"href":"https:\/\/massgraduates.com\/index.php\/wp-json\/wp\/v2\/pages\/244\/revisions"}],"predecessor-version":[{"id":330,"href":"https:\/\/massgraduates.com\/index.php\/wp-json\/wp\/v2\/pages\/244\/revisions\/330"}],"wp:attachment":[{"href":"https:\/\/massgraduates.com\/index.php\/wp-json\/wp\/v2\/media?parent=244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}