{"id":260,"date":"2026-08-31T09:46:13","date_gmt":"2026-08-31T09:46:13","guid":{"rendered":"https:\/\/massgraduates.com\/?page_id=260"},"modified":"2026-09-01T03:52:57","modified_gmt":"2026-09-01T03:52:57","slug":"icma-full-length-launchpad","status":"publish","type":"page","link":"https:\/\/massgraduates.com\/index.php\/icma-full-length-launchpad\/","title":{"rendered":"ICMA full length launchpad"},"content":{"rendered":"\n\n\n\nICMA Launchpad 360<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n \/* ======================================================================\n DESIGN SYSTEM \u2014 premium, refined, consistent\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\n \/* NEW: Ultra-vibrant Gradients *\/\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\n \/* NEW: Eye-Catching Neon Glows *\/\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 \n \/* NEW: Punchier Tinted Backgrounds *\/\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 \n \/* NEW: Deep Vibrant Accents for Borders *\/\n --lp-cyan-deep: #0072FF;\n --lp-purple-deep: #7C3AED;\n --lp-red-deep: #E11D48;\n --lp-teal-deep: #0F766E;\n\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\n --lp-radius-lg: 20px;\n --lp-radius-md: 14px;\n --lp-radius-sm: 10px;\n --lp-radius-xs: 6px;\n\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\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 #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-dm-summary-value,\n #lp360-root .lp360-breakdown-list li b {\n font-family: 'Sora', 'Inter', sans-serif;\n }\n\n \/* ======================================================================\n SHELL\n ====================================================================== *\/\n .lp360-shell {\n max-width: 1100px;\n margin: 0 auto;\n padding: var(--lp-space-6);\n background: var(--lp-bg-canvas);\n border-radius: var(--lp-radius-lg);\n overflow-x: hidden;\n }\n\n \/* ======================================================================\n HEADER\n ====================================================================== *\/\n .lp360-page-header {\n text-align: center;\n margin-bottom: var(--lp-space-5);\n }\n .lp360-page-title {\n font-size: clamp(28px, 3.6vw, 40px);\n font-weight: 800;\n letter-spacing: -0.5px;\n margin: 0;\n color: var(--lp-text-dark);\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 \/* ======================================================================\n TABS\n ====================================================================== *\/\n .lp360-tabs {\n display: flex;\n justify-content: center;\n gap: var(--lp-space-2);\n margin-bottom: var(--lp-space-5);\n flex-wrap: wrap;\n position: sticky;\n top: 0;\n z-index: 50;\n background: var(--lp-bg-canvas);\n padding: var(--lp-space-3) 0;\n}\n .lp360-tab {\n display: inline-flex;\n align-items: center;\n gap: var(--lp-space-2);\n padding: 10px 22px;\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: 14px;\n cursor: pointer;\n transition: all 0.2s ease;\n white-space: nowrap;\n font-family: 'Inter', sans-serif;\n }\n .lp360-tab-icon {\n width: 17px;\n height: 17px;\n }\n .lp360-tab:hover {\n border-color: var(--lp-brand-light);\n color: var(--lp-brand-light);\n transform: translateY(-1px);\n }\n .lp360-tab.active {\n background: linear-gradient(90deg, var(--lp-brand-light), var(--lp-gold));\n border-color: transparent;\n color: #fff;\n box-shadow: 0 6px 16px rgba(232, 93, 58, 0.35);\n }\n\n \/* ======================================================================\n PANELS\n ====================================================================== *\/\n .lp360-tab-panel {\n display: block;\n animation: lp360FadeIn 0.35s ease;\n}\n\n.lp360-tab-panel.active {\n display: block;\n}\n\n.lp360-tab-panel + .lp360-tab-panel {\n margin-top: var(--lp-space-7);\n padding-top: var(--lp-space-6);\n border-top: 1px solid var(--lp-border-subtle);\n}\n @keyframes lp360FadeIn {\n from { opacity: 0; transform: translateY(6px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* ======================================================================\n SECTION CARD \u2014 unified outer container\n ====================================================================== *\/\n .lp360-section-card {\n background: var(--lp-card-bg);\n border-radius: var(--lp-radius-lg);\n box-shadow: var(--lp-shadow-sm);\n border: 1px solid var(--lp-border-subtle);\n padding: var(--lp-space-4) var(--lp-space-5) var(--lp-space-5);\n margin-bottom: var(--lp-space-6);\n overflow: hidden;\n transition: box-shadow 0.25s ease;\n }\n .lp360-section-card:hover {\n box-shadow: var(--lp-shadow-md);\n }\n .lp360-section-card .lp360-section-title {\n margin-bottom: var(--lp-space-4);\n }\n .lp360-section-card .lp360-section-title h2 {\n font-size: 20px;\n font-weight: 800;\n margin: 0 0 4px;\n }\n .lp360-section-divider {\n height: 1px;\n background: var(--lp-border-subtle);\n margin: var(--lp-space-4) 0;\n width: 100%;\n }\n .lp360-section-divider--strong {\n height: 2px;\n background: var(--lp-border-subtle);\n margin: var(--lp-space-5) 0;\n width: 100%;\n opacity: 0.6;\n }\n\n \/* ======================================================================\n SECTION TITLE (used inside cards)\n ====================================================================== *\/\n .lp360-section-title {\n margin: 0;\n }\n .lp360-section-title h2 {\n font-size: 22px;\n font-weight: 800;\n margin: 0 0 4px;\n color: var(--lp-text-dark);\n letter-spacing: -0.3px;\n }\n .lp360-section-title h2 span {\n color: var(--lp-brand-light);\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 \/* ======================================================================\n HERO CARD \u2014 dark gradient header inside section card\n ====================================================================== *\/\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-4) var(--lp-space-5);\n display: grid;\n grid-template-columns: 1fr auto 1fr auto 1fr;\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 .lp360-hero-divider {\n width: 1px;\n height: 100px;\n background: rgba(255,255,255,0.1);\n justify-self: center;\n }\n\n .lp360-gauge-wrap {\n position: relative;\n width: 190px;\n height: 190px;\n margin: 0 auto;\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 .lp360-gauge-track {\n fill: none;\n stroke: rgba(255,255,255,0.08);\n stroke-width: 12;\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 .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 .lp360-gauge-label {\n font-size: 11px;\n letter-spacing: 2.5px;\n color: #cbd5e1;\n font-weight: 700;\n text-transform: uppercase;\n margin-bottom: 6px;\n }\n .lp360-gauge-value {\n display: inline-flex;\n align-items: baseline;\n font-size: 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 .lp360-gauge-value small {\n font-size: 20px;\n color: #94a3b8;\n -webkit-text-fill-color: #94a3b8;\n font-weight: 600;\n }\n .lp360-gauge-minibar {\n width: 60%;\n max-width: 110px;\n height: 6px;\n background: rgba(255,255,255,0.1);\n border-radius: 6px;\n margin: 10px auto 0;\n overflow: hidden;\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 .lp360-hero-metric {\n text-align: center;\n color: #fff;\n }\n .lp360-icon-badge {\n width: 54px;\n height: 54px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 8px;\n }\n .lp360-icon-badge svg {\n width: 26px;\n height: 26px;\n }\n .lp360-icon-badge--cyan {\n background: radial-gradient(circle, #1c5f78, #123047);\n color: var(--lp-cyan);\n box-shadow: 0 0 0 6px rgba(51,195,240,0.08);\n }\n .lp360-icon-badge--purple {\n background: radial-gradient(circle, #4a2f86, #2a1a52);\n color: var(--lp-purple2);\n box-shadow: 0 0 0 6px rgba(139,92,246,0.1);\n }\n .lp360-hero-metric-label {\n display: block;\n font-size: 12px;\n letter-spacing: 1.8px;\n color: #cbd5e1;\n font-weight: 700;\n text-transform: uppercase;\n margin-bottom: 8px;\n }\n .lp360-hero-metric-value {\n display: inline-flex;\n align-items: baseline;\n justify-content: center;\n font-size: 32px;\n font-weight: 800;\n color: var(--lp-cyan);\n padding: 8px 20px;\n border-radius: 14px;\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: 120px;\n font-family: 'Sora', 'Inter', sans-serif;\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 .lp360-hero-metric-footer {\n font-size: 12px;\n color: #8b93a7;\n margin-top: 8px;\n font-weight: 600;\n }\n\n \/* ======================================================================\n STANDARDIZED INFO BUTTON \u2014 two-tone ring with glow\n ====================================================================== *\/\n .lp360-info-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 38px;\n height: 38px;\n border-radius: 50%;\n border: 3px solid rgba(255, 122, 61, 0.35);\n background: rgba(255, 122, 61, 0.12);\n color: #fff;\n font-size: 0;\n cursor: pointer;\n transition: all 0.3s ease;\n flex-shrink: 0;\n -webkit-appearance: none;\n appearance: none;\n line-height: 0;\n padding: 0;\n margin: 0;\n position: relative;\n box-shadow: 0 0 0 0 rgba(255, 122, 61, 0);\n }\n .lp360-info-btn::before {\n content: '';\n position: absolute;\n inset: 4px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--lp-brand-light), var(--lp-brand-dark));\n z-index: 0;\n transition: transform 0.3s ease, background 0.3s ease;\n }\n .lp360-info-btn::after {\n content: 'i';\n font-family: 'Inter', sans-serif;\n font-weight: 800;\n font-size: 16px;\n color: #fff;\n line-height: 1;\n position: relative;\n z-index: 1;\n transition: transform 0.3s ease;\n }\n .lp360-info-btn:hover {\n transform: scale(1.08);\n box-shadow: 0 0 20px rgba(255, 122, 61, 0.4);\n }\n .lp360-info-btn:hover::before {\n transform: scale(1.12);\n background: linear-gradient(135deg, var(--lp-gold), var(--lp-brand-light));\n }\n .lp360-info-btn:hover::after {\n transform: rotate(10deg) scale(1.05);\n }\n\n \n\/* ======================================================================\n INFO POPOVER \u2014 premium, colourful, glass\u2011morphism\n ====================================================================== *\/\n.lp360-info-popover {\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.50);\n backdrop-filter: blur(12px) saturate(1.3);\n -webkit-backdrop-filter: blur(12px) saturate(1.3);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n padding: var(--lp-space-5);\n animation: lp360FadeIn 0.3s ease;\n}\n.lp360-info-popover__content {\n background: rgba(255,255,255,0.95);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n border-radius: 28px;\n max-width: 520px;\n width: 100%;\n padding: 0;\n box-shadow: 0 40px 80px rgba(0,0,0,0.30), 0 0 0 1px rgba(232,93,58,0.20) inset, 0 0 0 2px rgba(255,255,255,0.6) inset;\n animation: lp360PopoverSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n position: relative;\n text-align: center;\n border: none;\n overflow: hidden;\n}\n.lp360-info-popover__content::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 6px;\n background: linear-gradient(90deg, var(--lp-brand-light), var(--lp-gold), var(--lp-brand-light));\n background-size: 200% 100%;\n animation: lp360GradientMove 3s ease infinite;\n}\n@keyframes lp360GradientMove {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n@keyframes lp360PopoverSlideUp {\n from { opacity: 0; transform: translateY(30px) scale(0.95); }\n to { opacity: 1; transform: translateY(0) scale(1); }\n}\n.lp360-info-popover__close {\n position: absolute;\n top: 16px;\n right: 18px;\n background: rgba(0,0,0,0.05);\n border: none;\n font-size: 24px;\n font-weight: 400;\n color: var(--lp-text-gray);\n cursor: pointer;\n line-height: 1;\n transition: all 0.25s ease;\n padding: 0;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n z-index: 5;\n}\n.lp360-info-popover__close:hover {\n color: var(--lp-red);\n background: rgba(239,68,68,0.15);\n transform: rotate(90deg);\n}\n.lp360-info-popover__icon {\n width: 80px;\n height: 80px;\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: 36px auto 20px;\n color: #fff;\n box-shadow: 0 10px 40px rgba(232,93,58,0.40);\n animation: lp360PopoverIconPulse 2.6s ease-in-out infinite;\n}\n@keyframes lp360PopoverIconPulse {\n 0%, 100% { box-shadow: 0 10px 40px rgba(232,93,58,0.40); }\n 50% { box-shadow: 0 10px 50px rgba(232,93,58,0.60); }\n}\n.lp360-info-popover__icon svg {\n width: 38px;\n height: 38px;\n}\n.lp360-info-popover__title {\n font-family: 'Sora','Inter',sans-serif;\n font-size: 24px;\n font-weight: 800;\n margin: 0 0 8px;\n color: var(--lp-text-dark);\n letter-spacing: -0.3px;\n padding: 0 var(--lp-space-5);\n}\n.lp360-info-popover__desc {\n font-size: 16px;\n line-height: 1.7;\n color: #374151;\n margin: 0;\n text-align: left;\n padding: 0 var(--lp-space-6) var(--lp-space-5);\n}\n.lp360-info-popover__desc p {\n margin: 0 0 0.5em;\n}\n.lp360-info-popover__desc p:last-child {\n margin-bottom: 0;\n}\n.lp360-info-popover__badge {\n display: inline-block;\n margin: 0 0 28px;\n padding: 8px 24px;\n border-radius: 999px;\n background: linear-gradient(90deg, var(--lp-brand-light), var(--lp-gold));\n color: #fff;\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n box-shadow: 0 6px 20px rgba(232,93,58,0.30);\n}\n \/* ======================================================================\n TIME CARDS \u2014 unified container with internal dividers\n ====================================================================== *\/\n .lp360-time-cards {\n display: flex;\n background: transparent;\n border: none;\n margin: 0;\n gap: var(--lp-space-4);\n }\n .lp360-time-card {\n flex: 1;\n padding: var(--lp-space-4) var(--lp-space-4);\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n position: relative;\n background: transparent;\n border: none;\n box-shadow: none;\n border-radius: var(--lp-radius-md);\n }\n .lp360-time-card:last-child {\n border-right: none;\n }\n .lp360-time-card > * {\n max-width: 220px;\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 .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 .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 .lp360-icon-badge--orange-soft {\n background: #fde3c8;\n color: var(--lp-orange2);\n }\n .lp360-icon-badge--blue-soft {\n background: #d9e8fb;\n color: #2563eb;\n }\n .lp360-time-card .lp360-icon-badge {\n margin: 0 auto 4px;\n width: 38px;\n height: 38px;\n background: #fff;\n color: currentColor;\n box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n }\n .lp360-time-card .lp360-icon-badge svg {\n width: 18px;\n height: 18px;\n }\n\n .lp360-time-card .lp360-time-card-label {\n font-size: 11px;\n letter-spacing: 0.8px;\n font-weight: 700;\n text-transform: uppercase;\n line-height: 1.3;\n color: currentColor;\n }\n\n .lp360-time-card .lp360-time-card-value {\n display: inline-flex;\n align-items: baseline;\n gap: 2px;\n font-size: 26px;\n font-weight: 800;\n padding: 4px 14px;\n border-radius: 10px;\n font-family: 'Sora', 'Inter', sans-serif;\n color: currentColor;\n }\n .lp360-time-card-value small {\n font-size: 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: 3px 14px;\n border-radius: 999px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n font-size: 12px;\n color: currentColor;\n background: #fff;\n border: 1px solid currentColor;\n box-shadow: none;\n }\n\n \/* ======================================================================\n BREAKDOWN \u2014 unified card with internal columns (Fix 6: mobile stacking)\n ====================================================================== *\/\n .lp360-breakdown-unified {\n background: transparent;\n border-radius: 0;\n border: none;\n padding: 0;\n margin: 0;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 0;\n overflow: hidden;\n border-top: 1px solid var(--lp-border-subtle);\n }\n .lp360-breakdown-col {\n padding: var(--lp-space-3) var(--lp-space-4);\n position: relative;\n background: transparent;\n color: #ffffff;\n }\n .lp360-breakdown-col h3 { color: #ffffff !important; }\n .lp360-breakdown-col .lp360-breakdown-head { color: #ffffff; }\n .lp360-breakdown-col:nth-child(1) { background: var(--lp-bg-green-soft); border-left: 4px solid var(--lp-green); }\n .lp360-breakdown-col:nth-child(2) { background: var(--lp-bg-red-soft); border-left: 4px solid var(--lp-red); }\n .lp360-breakdown-col:nth-child(3) { background: var(--lp-bg-amber-soft); border-left: 4px solid var(--lp-amber); }\n .lp360-breakdown-col + .lp360-breakdown-col {\n border-left: 1px solid var(--lp-border-subtle);\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 .lp360-round-icon {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n .lp360-round-icon svg {\n width: 18px;\n height: 18px;\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: 11px;\n font-weight: 700;\n letter-spacing: 1.2px;\n text-transform: uppercase;\n color: var(--lp-text-gray);\n margin-bottom: 2px;\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: 26px;\n font-weight: 800;\n padding: 0 12px;\n border-radius: 8px;\n font-family: 'Sora', 'Inter', sans-serif;\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 .lp360-breakdown-list li {\n display: flex;\n align-items: center;\n gap: var(--lp-space-2);\n font-size: 13.5px;\n color: #374151;\n font-weight: 500;\n padding: 10px 14px;\n margin-bottom: 8px;\n border-radius: var(--lp-radius-md);\n background: #f8fafc;\n border: 1px solid #f1f5f9;\n transition: all 0.2s ease;\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 .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 .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 .lp360-breakdown-list li:last-child {\n margin-bottom: 0;\n }\n .lp360-breakdown-list li b {\n margin-left: auto;\n font-weight: 700;\n color: #ffffff;\n font-size: 14px;\n background: rgba(255, 255, 255, 0.15);\n box-shadow: none;\n padding: 4px 12px;\n border-radius: 999px;\n min-width: 32px;\n text-align: center;\n font-family: 'Sora', 'Inter', sans-serif;\n }\n .lp360-mini-icon {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n .lp360-mini-icon svg {\n width: 12px;\n height: 12px;\n }\n .lp360-breakdown-list li .lp360-mini-icon {\n background: rgba(255, 255, 255, 0.15);\n color: #ffffff;\n box-shadow: none;\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 \/* ======================================================================\n DECISION MARKER \u2014 compact table, mobile scroll (Fix 8)\n ====================================================================== *\/\n .lp360-decision-card {\n background: var(--lp-card-bg);\n border-radius: var(--lp-radius-lg);\n padding: var(--lp-space-4);\n box-shadow: var(--lp-shadow-sm);\n border: 1px solid var(--lp-border-subtle);\n margin: 0;\n overflow: hidden;\n }\n .lp360-decision-card .lp360-section-title {\n margin-bottom: var(--lp-space-3);\n }\n .lp360-decision-card .lp360-section-title h2 {\n font-size: 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 }\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 .lp360-dm-table-scroll::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: 30px;\n background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n .lp360-dm-table-scroll.is-scrollable::after {\n opacity: 1;\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: 13px;\n min-width: 600px;\n }\n .lp360-dm-table thead th {\n font-size: 11px;\n font-weight: 700;\n text-align: center;\n padding: 10px 12px;\n white-space: nowrap;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n background: linear-gradient(135deg, var(--lp-brand-light), var(--lp-brand-dark));\n color: #fff;\n border: none;\n position: sticky;\n top: 0;\n z-index: 2;\n }\n \/* Make interval headers match body cell size *\/\n.lp360-dm-table thead th:not(:first-child) {\n font-size: 15px; \/* same as tbody td font-size *\/\n font-weight: 700; \/* same as tbody td font-weight *\/\n letter-spacing: 0; \/* remove extra spacing to match numbers *\/\n text-transform: none; \/* optional: keep numbers as plain digits *\/\n}\n .lp360-dm-table thead th:first-child {\n border-radius: 10px 0 0 10px;\n text-align: left !important;\n }\n .lp360-dm-table thead th:last-child {\n border-radius: 0 10px 10px 0;\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: 8px 10px;\n vertical-align: middle;\n white-space: nowrap;\n font-weight: 700; \/* make numbers bolder *\/\n font-size: 15px; \/* slightly larger *\/\n}\n\/* Keep the first column (labels) left-aligned and normal weight *\/\n.lp360-dm-table tbody td:first-child {\n text-align: left !important;\n font-weight: 700;\n font-size: 13px;\n}\n\/* All other cells (numbers) centered *\/\n.lp360-dm-table tbody td:not(:first-child) {\n text-align: center;\n}\n .lp360-dm-table tbody td:first-child {\n border-radius: 10px 0 0 10px;\n white-space: normal;\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: 13px;\n white-space: normal;\n word-break: break-word;\n }\n .lp360-dm-row-icon {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n .lp360-dm-row-icon svg {\n width: 12px;\n height: 12px;\n }\n .lp360-dm-chip-cell {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n justify-content: center;\n }\n .lp360-dm-chip, .lp360-time-card-badge {\n cursor: pointer;\n transition: transform 0.15s ease, box-shadow 0.15s ease;\n }\n .lp360-dm-chip:hover, .lp360-time-card-badge:hover {\n transform: translateY(-2px) scale(1.06);\n box-shadow: 0 4px 10px rgba(232,93,58,0.25);\n }\n .lp360-dm-chip {\n display: inline-flex;\n align-items: center;\n font-size: 11px;\n font-weight: 700;\n padding: 3px 8px;\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 }\n\n .lp360-dm-row--green {\n background: #eaf8ef;\n }\n .lp360-dm-row--red {\n background: #fdeaea;\n }\n .lp360-dm-row--teal {\n background: #e4f7f4;\n }\n .lp360-dm-row--peach {\n background: #fdecd9;\n }\n .lp360-dm-row--yellow {\n background: #fdf6db;\n }\n .lp360-dm-row--purple {\n background: #ede8fb;\n }\n\n .lp360-dm-row-icon--green {\n background: var(--lp-green);\n }\n .lp360-dm-row-icon--red {\n background: var(--lp-red);\n }\n .lp360-dm-row-icon--teal {\n background: var(--lp-teal);\n }\n .lp360-dm-row-icon--peach {\n background: var(--lp-orange2);\n }\n .lp360-dm-row-icon--yellow {\n background: var(--lp-yellow);\n }\n .lp360-dm-row-icon--purple {\n background: var(--lp-purple2);\n }\n\/* New: Blue attempt row *\/\n.lp360-dm-row--blue {\n background: #f0f7ff; \/* light blue shade *\/\n}\n.lp360-dm-row-icon--blue {\n background: #3b82f6; \/* bright blue for icon *\/\n}\n .lp360-dm-chip--green {\n color: var(--lp-green);\n border-color: #bdeccb;\n }\n .lp360-dm-chip--red {\n color: var(--lp-red);\n border-color: #f9c9c9;\n }\n .lp360-dm-chip--teal {\n color: #0d9488;\n border-color: #b8ece5;\n }\n .lp360-dm-chip--peach {\n color: var(--lp-orange2);\n border-color: #fbd6ac;\n }\n .lp360-dm-chip--yellow {\n color: #b45309;\n border-color: #f9e6a0;\n }\n .lp360-dm-chip--purple {\n color: #7c3aed;\n border-color: #d8cdf7;\n }\n.lp360-dm-summary {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--lp-space-4);\n margin-top: var(--lp-space-4);\n \/* No border-top \u2013 removed per your earlier request *\/\n}\n \n.lp360-dm-summary-card {\n border-radius: var(--lp-radius-md);\n padding: var(--lp-space-4) var(--lp-space-3);\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: 4px;\n}\n.lp360-dm-summary-card:hover {\n transform: translateY(-3px);\n box-shadow: var(--lp-shadow-md);\n}\n.lp360-dm-summary-icon {\n width: 44px;\n height: 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.lp360-dm-summary-icon svg {\n width: 20px;\n height: 20px;\n}\n.lp360-dm-summary-value {\n font-family: 'Sora','Inter',sans-serif;\n font-size: 15px; \/* matches table cell font size *\/\n font-weight: 700;\n line-height: 1.3;\n color: var(--lp-text-dark);\n}\n.lp360-dm-summary-label {\n font-size: 11px; \/* matches table header label size *\/\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.6px;\n color: var(--lp-text-gray);\n}\n\/* Coloured accents for each card *\/\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.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.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.lp360-dm-summary-card--teal,\n.lp360-dm-summary-card--peach,\n.lp360-dm-summary-card--yellow,\n.lp360-dm-summary-card--purple {\n border-top: 3px solid var(--lp-border-subtle);\n}\n\n.lp360-dm-inference {\n margin: var(--lp-space-4) 0 0;\n padding: var(--lp-space-3) var(--lp-space-4);\n border-radius: 12px;\n background: #fff7ed;\n border: 1px solid #fed7aa;\n color: #9a3412;\n font-size: 13px;\n font-weight: 600;\n line-height: 1.5;\n}\n\n \/* ======================================================================\n STRENGTH MAP (formerly \"NCERT Mapping\") \u2014 Redesigned\n ====================================================================== *\/\n .lp360-ncert-wrapper-card {\n background: transparent;\n border: none;\n box-shadow: none;\n padding: 0;\n margin: 0 0 var(--lp-space-6) 0;\n }\n .lp360-ncert-title-flex {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: var(--lp-space-4);\n position: relative;\n }\n .lp360-ncert-title-flex h2 {\n margin: 0;\n font-family: 'Sora','Inter',sans-serif;\n font-weight: 700;\n color: var(--lp-text-dark);\n font-size: 20px;\n }\n .lp360-ncert-title-flex .lp360-underline {\n position: absolute;\n bottom: -8px;\n left: 0;\n width: 40px;\n height: 3px;\n background: var(--lp-brand-light);\n border-radius: 2px;\n }\n .lp360-info-icon {\n color: #2563eb;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n }\n .lp360-ncert-cards-container {\n display: flex;\n flex-direction: column;\n gap: var(--lp-space-3);\n }\n .lp360-ncert-badge-row,\n .lp360-ncert-band-card,\n .lp360-ncert-analysis-card {\n background: #ffffff;\n border-radius: var(--lp-radius-lg);\n border: 1px solid #eaeaea;\n padding: var(--lp-space-4);\n box-shadow: 0 2px 8px rgba(0,0,0,0.02);\n display: flex;\n align-items: center;\n }\n \n \/* BADGE CARD *\/\n .lp360-ncert-badge-row {\n gap: var(--lp-space-5);\n flex-wrap: wrap;\n }\n .lp360-ncert-badge-icon {\n width: clamp(45px, 6vw, 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 .lp360-ncert-badge-icon:hover {\n transform: scale(1.05);\n }\n .lp360-ncert-badge-text-left {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 200px;\n }\n .lp360-ncert-badge-label {\n font-size: 11px;\n color: #2563eb;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 2px;\n }\n .lp360-ncert-badge-value {\n font-family: 'Sora','Inter',sans-serif;\n font-size: 22px;\n font-weight: 800;\n color: var(--lp360-badge-grad-b, #dc2626);\n margin-bottom: 4px;\n }\n .lp360-ncert-badge-desc {\n font-size: 13px;\n color: #4b5563;\n line-height: 1.5;\n margin: 0;\n }\n .lp360-ncert-divider {\n width: 1px;\n height: 60px;\n background: #eaeaea;\n flex-shrink: 0;\n }\n .lp360-ncert-badge-desc-wrap {\n flex: 1.5;\n min-width: 250px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n .lp360-ncert-desc-title {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .lp360-ncert-desc-icon {\n color: #2563eb;\n display: flex;\n align-items: center;\n background: #eff6ff;\n padding: 6px;\n border-radius: 50%;\n border: 1px solid #bfdbfe;\n }\n .lp360-ncert-desc-icon svg {\n width: 16px;\n height: 16px;\n }\n .lp360-ncert-desc-title h4 {\n margin: 0;\n font-size: 14px;\n font-weight: 700;\n color: #111827;\n }\n .lp360-ncert-badge-desc-right {\n font-size: 13px;\n color: #4b5563;\n line-height: 1.5;\n margin: 0;\n }\n\n \/* BAND CARD *\/\n .lp360-ncert-band-card {\n flex-direction: column;\n align-items: stretch;\n gap: var(--lp-space-3);\n background: #fffafa;\n }\n .lp360-ncert-band-head {\n display: flex;\n align-items: center;\n gap: var(--lp-space-3);\n }\n .lp360-ncert-band-head h3 {\n font-size: 15px;\n font-weight: 700;\n margin: 0;\n font-family: 'Sora','Inter',sans-serif;\n color: #111827;\n }\n .lp360-round-icon--peach {\n background: linear-gradient(145deg, #f59e0b, #f97316);\n width: 32px;\n height: 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 .lp360-round-icon--peach svg {\n width: 16px;\n height: 16px;\n }\n .lp360-band-poor {\n display: flex;\n align-items: center;\n gap: var(--lp-space-2);\n color: #dc2626;\n background: #fef2f2;\n border-radius: var(--lp-radius-sm);\n padding: 10px 14px;\n font-weight: 600;\n font-size: 12.5px;\n border: 1px solid #fee2e2;\n margin-top: 4px;\n }\n .lp360-band-poor svg {\n width: 18px;\n height: 18px;\n flex-shrink: 0;\n }\n .lp360-band-wrap {\n position: relative;\n padding-top: 28px;\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: 12px;\n padding: 4px 12px;\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 .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 .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 }\n .lp360-band-marker {\n position: absolute;\n top: 50%;\n width: 22px;\n height: 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 .lp360-band-scale {\n display: flex;\n justify-content: space-between;\n margin-top: var(--lp-space-2);\n }\n .lp360-band-scale-label {\n font-weight: 700;\n font-size: 12px;\n }\n\n \/* ANALYSIS CARD *\/\n .lp360-ncert-analysis-card {\n justify-content: space-between;\n gap: var(--lp-space-4);\n background: #f8fbff;\n overflow: hidden;\n position: relative;\n }\n .lp360-ncert-analysis-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n z-index: 2;\n }\n .lp360-ncert-analysis-header {\n display: flex;\n align-items: center;\n gap: var(--lp-space-3);\n }\n .lp360-ncert-analysis-header h3 {\n font-size: 15px;\n font-weight: 700;\n margin: 0;\n font-family: 'Sora','Inter',sans-serif;\n color: #111827;\n }\n .lp360-round-icon--blue {\n background: linear-gradient(145deg, #60a5fa, #2563eb);\n width: 32px;\n height: 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 .lp360-round-icon--blue svg {\n width: 16px;\n height: 16px;\n }\n .lp360-ncert-analysis-content p {\n font-size: 13px;\n line-height: 1.6;\n color: #374151;\n margin: 0;\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-right: 10px;\n }\n .lp360-ncert-analysis-image img {\n width: 80px;\n object-fit: contain;\n }\n .lp360-ncert-analysis-card::before {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: 300px;\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 \/* ======================================================================\n MIND MAP \u2014 description removed, now in popup\n ====================================================================== *\/\n .lp360-mindmap-card {\n background: var(--lp-card-bg);\n border-radius: var(--lp-radius-lg);\n padding: var(--lp-space-4);\n box-shadow: var(--lp-shadow-sm);\n border: 1px solid var(--lp-border-subtle);\n margin: 0;\n }\n .lp360-mindmap-title {\n color: var(--lp-brand-light) !important;\n }\n .lp360-mindmap-desc {\n display: none;\n }\n \/* Source-name tag (CMA: shows the NCERT chapter this mind map is drawn from) *\/\n .lp360-mindmap-source-tag {\n display: none;\n align-items: center;\n gap: 6px;\n margin: -8px 0 16px 0;\n padding: 6px 14px;\n background: #fef3e2;\n border: 1px solid #fbd7a8;\n border-radius: 999px;\n font-size: 11px;\n font-weight: 700;\n color: #9a5b0f;\n width: fit-content;\n }\n\n .lp360-mindmap-diagram {\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-4) var(--lp-space-3);\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: 320px;\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 .lp360-mm-col {\n position: relative;\n z-index: 2;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n .lp360-mm-col--node,\n .lp360-mm-col--center {\n align-items: center;\n justify-content: center;\n height: 100%;\n }\n .lp360-mm-col--topics .lp360-mm-topic {\n background: #fbe7d4;\n color: #7c3f0e;\n font-size: 11.5px;\n font-weight: 700;\n padding: 6px 12px;\n border-radius: 6px;\n text-align: center;\n white-space: nowrap;\n position: relative;\n }\n .lp360-mm-col--topics.lp360-mm-basic .lp360-mm-topic,\n #lp360-mm-basic-list .lp360-mm-topic {\n background: #e2f5e6;\n color: #166534;\n }\n\n .lp360-mm-node {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-weight: 700;\n font-size: 13px;\n padding: 10px 16px;\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 }\n .lp360-mm-node--orange {\n border: 2px solid var(--lp-brand-light);\n color: var(--lp-brand-light);\n }\n .lp360-mm-node--green {\n border: 2px solid var(--lp-green);\n color: #15803d;\n }\n .lp360-mm-node--center {\n border: 2px solid #1f2937;\n color: #1f2937;\n padding: 14px 20px;\n font-size: 14px;\n }\n .lp360-mm-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n display: inline-block;\n }\n .lp360-mm-dot--orange {\n background: var(--lp-brand-light);\n }\n .lp360-mm-dot--green {\n background: var(--lp-green);\n }\n\n .lp360-mindmap-mobile {\n display: none;\n flex-direction: column;\n align-items: center;\n gap: var(--lp-space-3);\n margin-top: var(--lp-space-3);\n }\n .lp360-mm-mobile-group {\n width: 100%;\n text-align: center;\n background: #fff;\n border-radius: var(--lp-radius-md);\n padding: var(--lp-space-3);\n box-shadow: 0 1px 6px rgba(0,0,0,0.03);\n border: 1px dashed var(--lp-border-subtle);\n }\n .lp360-mm-mobile-heading {\n font-weight: 800;\n font-size: 14px;\n margin-bottom: 6px;\n padding: 4px 14px;\n border-radius: 8px;\n display: inline-block;\n font-family: 'Sora','Inter',sans-serif;\n }\n .lp360-mm-mobile-heading--orange {\n background: #fdecd9;\n color: var(--lp-brand-light);\n }\n .lp360-mm-mobile-heading--green {\n background: #e2f5e6;\n color: #15803d;\n }\n .lp360-mm-mobile-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n justify-content: center;\n }\n .lp360-mm-mobile-tags span {\n background: #fbe7d4;\n color: #7c3f0e;\n font-size: 11.5px;\n font-weight: 700;\n padding: 5px 10px;\n border-radius: 6px;\n }\n #lp360-mm-mobile-basic span {\n background: #e2f5e6;\n color: #166534;\n }\n .lp360-mm-mobile-connector {\n width: 2px;\n height: 24px;\n background: repeating-linear-gradient(to bottom, var(--lp-brand-light) 0, var(--lp-brand-light) 4px, transparent 4px, transparent 8px);\n align-self: center;\n }\n .lp360-mm-mobile-group--center {\n border: none;\n box-shadow: none;\n background: transparent;\n padding: 4px;\n }\n\n .lp360-mindmap-summary {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--lp-space-3);\n margin-top: var(--lp-space-4);\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 }\n .lp360-mm-summary-card--orange {\n background: linear-gradient(120deg, #fdecd9, #fff8f0);\n border: 1px solid #f6ddc0;\n }\n .lp360-mm-summary-card--green {\n background: linear-gradient(120deg, #e2f5e6, #f6fdf7);\n border: 1px solid #cdeed4;\n }\n .lp360-mm-summary-icon {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n .lp360-mm-summary-icon svg {\n width: 18px;\n height: 18px;\n }\n .lp360-mm-summary-card--orange .lp360-mm-summary-icon {\n background: var(--lp-brand-light);\n }\n .lp360-mm-summary-card--green .lp360-mm-summary-icon {\n background: var(--lp-green);\n }\n .lp360-mm-summary-text {\n display: flex;\n flex-direction: column;\n gap: 1px;\n text-align: left;\n }\n .lp360-mm-summary-label {\n font-weight: 800;\n font-size: 14px;\n font-family: 'Sora','Inter',sans-serif;\n }\n .lp360-mm-summary-card--orange .lp360-mm-summary-label {\n color: var(--lp-brand-light);\n }\n .lp360-mm-summary-card--green .lp360-mm-summary-label {\n color: #15803d;\n }\n .lp360-mm-summary-sub {\n font-size: 11px;\n color: var(--lp-text-gray);\n }\n .lp360-mm-summary-dots {\n flex: 1;\n min-width: 20px;\n border-top: 2px dotted #d6c3aa;\n align-self: center;\n }\n .lp360-mm-summary-card--green .lp360-mm-summary-dots {\n border-top-color: #b6ddbc;\n }\n .lp360-mm-summary-value {\n font-family: 'Sora','Inter',sans-serif;\n font-size: 26px;\n font-weight: 800;\n padding: 2px 14px;\n border-radius: 10px;\n }\n .lp360-mm-summary-card--orange .lp360-mm-summary-value {\n color: var(--lp-brand-light);\n background: rgba(232,93,58,0.08);\n }\n .lp360-mm-summary-card--green .lp360-mm-summary-value {\n color: #15803d;\n background: rgba(34,197,94,0.1);\n }\n\n \/* ======================================================================\n TRACKER PANEL \u2014 unified card with internal sections\n ====================================================================== *\/\n #lp360-panel-tracker.active {\n display: block;\n }\n .lp360-tracker-card,\n .lp360-accuracy-card,\n .lp360-time-tracker-card {\n background: transparent;\n border-radius: 0;\n padding: 0;\n box-shadow: none;\n border: none;\n overflow: visible;\n margin: 0;\n }\n .lp360-tracker-card + .lp360-tracker-card,\n .lp360-accuracy-card + .lp360-tracker-card,\n .lp360-tracker-card + .lp360-accuracy-card {\n padding-top: var(--lp-space-5);\n border-top: 1px solid var(--lp-border-subtle);\n margin-top: var(--lp-space-4);\n }\n .lp360-tracker-header {\n margin-bottom: var(--lp-space-3);\n }\n .lp360-tracker-title {\n font-size: 20px;\n font-weight: 800;\n margin: 0 0 2px;\n color: var(--lp-text-dark);\n font-family: 'Sora','Inter',sans-serif;\n }\n .lp360-tracker-title span {\n color: var(--lp-brand-light);\n }\n\n \/* Unified major headings: same style as Time Tracker *\/\n #lp360-root .lp360-tracker-header {\n margin-bottom: var(--lp-space-3);\n }\n #lp360-root .lp360-tracker-title {\n font-size: 20px;\n font-weight: 800;\n margin: 0 0 2px;\n color: var(--lp-text-dark);\n font-family: 'Sora','Inter',sans-serif;\n letter-spacing: 0;\n }\n #lp360-root .lp360-tracker-title span {\n color: var(--lp-brand-light);\n }\n .lp360-tracker-desc {\n display: none;\n }\n\n .lp360-tracker-chart-wrap {\n position: relative;\n width: 100%;\n background: #fafaf9;\n border-radius: var(--lp-radius-sm);\n padding: 4px;\n box-shadow: inset 0 1px 4px rgba(0,0,0,0.02);\n overflow: visible;\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 \/* time tracker info \u2014 removed, now in popup *\/\n .lp360-time-tracker-info {\n display: none;\n }\n\n \/* time tracker layout *\/\n .lp360-time-tracker-layout {\n display: grid;\n grid-template-columns: 35% 1fr;\n gap: var(--lp-space-5);\n align-items: start;\n }\n @media (max-width: 900px) {\n .lp360-time-tracker-layout {\n grid-template-columns: 1fr;\n }\n }\n .lp360-time-tracker-left {\n display: flex;\n flex-direction: column;\n gap: var(--lp-space-4);\n }\n .lp360-time-tracker-right {\n display: flex;\n flex-direction: column;\n gap: var(--lp-space-4);\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-4);\n box-shadow: var(--lp-shadow-sm);\n }\n\n \/* time tabs *\/\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 }\n .lp360-time-tab {\n flex: 1;\n padding: 10px 12px;\n text-align: center;\n font-weight: 700;\n font-size: 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 .lp360-time-tab:last-child {\n border-right: none;\n }\n .lp360-time-tab:hover {\n background: #f3f4f6;\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 \/* gauges *\/\n .lp360-time-tracker-gauges {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--lp-space-3);\n margin-bottom: 0;\n }\n .lp360-gauge-column {\n background: #fff;\n border-radius: var(--lp-radius-md);\n padding: var(--lp-space-2) var(--lp-space-3);\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 .lp360-gauge-column:hover {\n transform: translateY(-2px);\n box-shadow: var(--lp-shadow-md);\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 .lp360-gauge-column-icon {\n width: 28px;\n height: 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 .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 .lp360-gauge-column-icon svg {\n width: 14px;\n height: 14px;\n }\n .lp360-gauge-column-title {\n font-size: 11px;\n font-weight: 800;\n text-align: center;\n line-height: 1.2;\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 .lp360-gauge-column-sub {\n font-size: 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 .lp360-gauge-canvas {\n display: block;\n width: 100%;\n height: auto;\n }\n .lp360-gauge-column-value {\n font-family: 'Sora','Inter',sans-serif;\n font-size: 22px;\n font-weight: 800;\n padding: 2px 10px;\n border-radius: 8px;\n background: #f8f9fc;\n line-height: 1.3;\n margin-top: 2px;\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 .lp360-gauge-column-value span {\n font-size: 11px;\n font-weight: 700;\n }\n\n \/* inferences *\/\n .lp360-time-tracker-inferences {\n display: flex;\n flex-direction: column;\n gap: var(--lp-space-4);\n width: 100%;\n margin-top: 0;\n }\n .lp360-inference-block {\n display: flex;\n align-items: flex-start;\n gap: var(--lp-space-4);\n background: #f9fafb;\n border-radius: var(--lp-radius-md);\n padding: var(--lp-space-4) var(--lp-space-5);\n border: 1px solid var(--lp-border-subtle);\n transition: transform 0.15s ease;\n width: 100%;\n overflow: visible;\n }\n .lp360-inference-block:hover {\n transform: translateY(-1px);\n }\n .lp360-inference-icon {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\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 .lp360-inference-icon svg {\n width: 16px;\n height: 16px;\n stroke: #fff;\n stroke-width: 2.5;\n fill: none;\n }\n .lp360-inference-title {\n font-size: 12px;\n font-weight: 800;\n letter-spacing: 0.8px;\n text-transform: uppercase;\n margin-bottom: 4px;\n color: var(--lp-text-gray);\n }\n .lp360-inference-block:first-child .lp360-inference-title {\n color: var(--lp-brand-light);\n }\n .lp360-inference-block:last-child .lp360-inference-title {\n color: var(--lp-green);\n }\n .lp360-inference-text {\n font-size: 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 \/* ======================================================================\n PREDICTION PANEL \u2014 unified card with merged columns (Fix 2)\n ====================================================================== *\/\n .lp360-pred-time-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--lp-space-4);\n margin-bottom: var(--lp-space-5);\n align-items: stretch;\n }\n .lp360-pred-time-col {\n display: flex;\n flex-direction: column;\n gap: 0;\n height: 100%;\n background: #fff;\n border-radius: var(--lp-radius-lg);\n border: 1px solid var(--lp-border-subtle);\n box-shadow: var(--lp-shadow-sm);\n overflow: hidden;\n transition: transform 0.25s ease, box-shadow 0.25s ease;\n }\n .lp360-pred-time-col:hover {\n transform: translateY(-3px);\n box-shadow: var(--lp-shadow-md);\n }\n\n .lp360-pred-hero {\n border-radius: 0;\n padding: var(--lp-space-4) var(--lp-space-4) var(--lp-space-4);\n text-align: center;\n color: #fff;\n position: relative;\n overflow: hidden;\n box-shadow: none;\n flex-shrink: 0;\n }\n .lp360-pred-hero::after {\n content: '';\n position: absolute;\n inset: 0;\n background-image: radial-gradient(rgba(255,255,255,0.1) 1.2px, transparent 1.2px);\n background-size: 12px 12px;\n -webkit-mask-image: linear-gradient(120deg, transparent 40%, #000 95%);\n mask-image: linear-gradient(120deg, transparent 40%, #000 95%);\n pointer-events: none;\n }\n .lp360-pred-hero > * {\n position: relative;\n z-index: 1;\n }\n .lp360-pred-hero--basic {\n background: linear-gradient(135deg, #5c1c10, #c2461c 65%, #7a260f);\n }\n .lp360-pred-hero--multi {\n background: linear-gradient(135deg, #3a2a0c, #a97a1d 65%, #4f350c);\n }\n .lp360-pred-hero--analytical {\n background: linear-gradient(135deg, #601616, #e2551c 65%, #7c1c10);\n }\n\n .lp360-pred-hero-icon {\n width: 46px;\n height: 46px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto var(--lp-space-2);\n box-shadow: 0 6px 14px rgba(0,0,0,0.2);\n }\n .lp360-pred-hero-icon svg {\n width: 22px;\n height: 22px;\n }\n .lp360-pred-hero-icon--basic {\n background: var(--lp-orange2);\n }\n .lp360-pred-hero-icon--multi {\n background: var(--lp-amber);\n }\n .lp360-pred-hero-icon--analytical {\n background: var(--lp-red);\n }\n\n .lp360-pred-hero-label {\n font-size: 12px;\n font-weight: 800;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n line-height: 1.3;\n padding-bottom: var(--lp-space-3);\n margin-bottom: var(--lp-space-3);\n border-bottom: 1px dashed rgba(255,255,255,0.25);\n word-break: break-word;\n }\n .lp360-pred-hero-time {\n display: flex;\n align-items: baseline;\n justify-content: center;\n gap: 6px;\n flex-wrap: wrap;\n }\n .lp360-pred-stopwatch {\n width: 18px;\n height: 18px;\n align-self: center;\n flex-shrink: 0;\n }\n .lp360-pred-time-value {\n font-family: 'Sora','Inter',sans-serif;\n font-size: 28px;\n font-weight: 800;\n line-height: 1;\n display: inline-flex;\n align-items: baseline;\n gap: 2px;\n flex-wrap: wrap;\n justify-content: center;\n }\n .lp360-pred-time-value small {\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.5px;\n margin-right: 4px;\n }\n .lp360-pred-hero--basic .lp360-pred-stopwatch,\n .lp360-pred-hero--basic .lp360-pred-time-value {\n color: #ffb37a;\n }\n .lp360-pred-hero--multi .lp360-pred-stopwatch,\n .lp360-pred-hero--multi .lp360-pred-time-value {\n color: var(--lp-gold);\n }\n .lp360-pred-hero--analytical .lp360-pred-stopwatch,\n .lp360-pred-hero--analytical .lp360-pred-time-value {\n color: #ff8a65;\n }\n\n .lp360-pred-info-card {\n background: #fdf7f0;\n border-radius: 0;\n padding: var(--lp-space-3) var(--lp-space-4);\n text-align: center;\n box-shadow: none;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n transition: background 0.2s ease;\n border: none;\n border-top: 1px solid var(--lp-border-subtle);\n min-height: 80px;\n justify-content: center;\n }\n .lp360-pred-info-card:hover {\n background: #fcf6ef;\n }\n .lp360-pred-info-card:last-child {\n border-top: 1px solid var(--lp-border-subtle);\n }\n .lp360-pred-info-icon {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: var(--lp-space-1);\n }\n .lp360-pred-info-icon svg {\n width: 16px;\n height: 16px;\n }\n .lp360-pred-info-icon--basic {\n background: #fde3d5;\n color: var(--lp-orange2);\n }\n .lp360-pred-info-icon--multi {\n background: #fbedcd;\n color: var(--lp-amber);\n }\n .lp360-pred-info-icon--analytical {\n background: #fbdcd3;\n color: #e2551c;\n }\n .lp360-pred-info-label {\n font-size: 10px;\n font-weight: 800;\n letter-spacing: 0.8px;\n text-transform: uppercase;\n color: var(--lp-text-gray);\n margin-bottom: 2px;\n }\n .lp360-pred-info-text {\n font-size: 13px;\n line-height: 1.5;\n color: #4b5563;\n margin: 0;\n }\n\n \/* Score Prediction \u2014 merged into one card *\/\n .lp360-pred-score-grid {\n display: grid;\n grid-template-columns: 1fr 1.2fr 1fr;\n gap: 0;\n align-items: stretch;\n margin-bottom: 2px;\n border: 1px solid var(--lp-border-subtle);\n border-radius: var(--lp-radius-lg);\n overflow: hidden;\n background: #fff;\n box-shadow: var(--lp-shadow-sm);\n transition: box-shadow 0.25s ease;\n }\n .lp360-pred-score-grid:hover {\n box-shadow: var(--lp-shadow-md);\n }\n .lp360-pred-score-card {\n border-radius: 0;\n overflow: hidden;\n box-shadow: none;\n display: flex;\n flex-direction: column;\n background: transparent;\n border: none;\n transition: none;\n }\n .lp360-pred-score-card:hover {\n transform: none;\n box-shadow: none;\n }\n .lp360-pred-score-card + .lp360-pred-score-card {\n border-left: 1px solid var(--lp-border-subtle);\n }\n .lp360-pred-score-banner {\n display: flex;\n align-items: center;\n gap: var(--lp-space-3);\n padding: var(--lp-space-3) var(--lp-space-4);\n position: relative;\n overflow: hidden;\n color: #fff;\n font-weight: 800;\n font-size: 14px;\n flex-shrink: 0;\n border-radius: 0;\n }\n .lp360-pred-score-banner--orange {\n background: linear-gradient(120deg, var(--lp-orange2), var(--lp-brand-light));\n background-image: radial-gradient(rgba(255,255,255,0.3) 1.2px, transparent 1.2px), linear-gradient(120deg, var(--lp-orange2), var(--lp-brand-light));\n background-size: 12px 12px, 100% 100%;\n }\n .lp360-pred-score-banner--brown {\n background: linear-gradient(120deg, #3c2213, #6b3a1c);\n background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0 2px, transparent 2px 12px), linear-gradient(120deg, #3c2213, #6b3a1c);\n }\n .lp360-pred-score-banner-icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n background: rgba(255,255,255,0.95);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n .lp360-pred-score-banner--orange .lp360-pred-score-banner-icon {\n color: var(--lp-orange2);\n }\n .lp360-pred-score-banner--brown .lp360-pred-score-banner-icon {\n color: #6b3a1c;\n }\n .lp360-pred-score-banner-icon svg {\n width: 18px;\n height: 18px;\n }\n\n .lp360-pred-score-body {\n flex: 1;\n padding: var(--lp-space-4) var(--lp-space-4);\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n .lp360-pred-score-body-icon {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: var(--lp-space-2);\n }\n .lp360-pred-score-body-icon svg {\n width: 16px;\n height: 16px;\n }\n .lp360-pred-score-body-icon--orange {\n background: #fde3d5;\n color: var(--lp-orange2);\n }\n .lp360-pred-score-body-icon--brown {\n background: #ecdfd3;\n color: #6b3a1c;\n }\n .lp360-pred-score-body p {\n font-size: 13.5px;\n line-height: 1.6;\n color: #4b5563;\n margin: 0;\n }\n\n .lp360-pred-score-card--main {\n background: radial-gradient(circle at 30% 100%, rgba(255,255,255,0.15), transparent 55%), linear-gradient(160deg, var(--lp-brand-light), #e2451c 70%);\n align-items: center;\n justify-content: space-between;\n padding: var(--lp-space-5) var(--lp-space-4) var(--lp-space-4);\n color: #fff;\n box-shadow: none;\n border: none;\n }\n .lp360-pred-score-title {\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n margin-bottom: var(--lp-space-4);\n text-align: center;\n }\n .lp360-pred-score-ring {\n position: relative;\n width: 196px;\n height: 199px;\n border-radius: 50%;\n background: #ffffff;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 23px auto 0 auto;\n flex-shrink: 0;\n box-shadow: 0 10px 30px rgba(249, 115, 22, 0.15), 0 0 0 1px rgba(249, 115, 22, 0.05);\n animation: lp360SphereBreathe 3.5s ease-in-out infinite;\n transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n cursor: default;\n}\n\n@keyframes lp360SphereBreathe {\n 0%, 100% { \n transform: translateY(0) scale(1); \n box-shadow: 0 10px 30px rgba(249, 115, 22, 0.15), 0 0 0 1px rgba(249, 115, 22, 0.05); \n }\n 50% { \n transform: translateY(-8px) scale(1.02); \n box-shadow: 0 15px 40px rgba(249, 115, 22, 0.25), 0 0 0 1px rgba(249, 115, 22, 0.05); \n }\n}\n\n.lp360-pred-score-ring:hover {\n animation-play-state: paused;\n transform: translateY(-12px) scale(1.05) !important;\n box-shadow: 0 25px 50px rgba(249, 115, 22, 0.35), 0 0 20px rgba(255, 197, 66, 0.2) !important;\n}\n\n\/* Hide legacy patterns and gradients *\/\n.lp360-pred-score-ring::before,\n.lp360-pred-score-ring::after {\n display: none; \n}\n\n.lp360-pred-score-ring-inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n.lp360-pred-score-obtained {\n display: block;\n font-family: 'Sora', 'Inter', sans-serif;\n font-size: 58px;\n font-weight: 800;\n color: var(--lp-orange2);\n line-height: 1;\n}\n\n.lp360-pred-score-divider {\n display: block;\n width: 80px;\n height: 2px;\n background: #d8dbe2;\n margin: 12px auto;\n}\n.lp360-pred-score-total {\n display: block;\n font-family: 'Sora', 'Inter', sans-serif;\n font-size: 25px;\n font-weight: 700;\n color: #374151;\n line-height: 1;\n}\n\n .lp360-pred-score-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--lp-space-2);\n background: #fff;\n color: var(--lp-orange2);\n font-weight: 700;\n font-size: 12px;\n padding: 8px 16px;\n border-radius: 999px;\n box-shadow: 0 4px 14px rgba(0,0,0,0.12);\n text-align: center;\n }\n .lp360-pred-score-badge-icon {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--lp-orange2);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n .lp360-pred-score-badge-icon svg {\n width: 10px;\n height: 10px;\n }\n\n \/* ======================================================================\n COMBINED PREDICTION CARD (Fix 1: merged Ideal Time + Score)\n ====================================================================== *\/\n.lp360-pred-combined-grid {\n display: grid;\n grid-template-columns: 9fr 7fr 9fr; \/* same 36:28:36 ratio, but fr units correctly subtract the gap so nothing overflows *\/\n gap: var(--lp-space-5);\n align-items: stretch;\n margin-bottom: 2px;\n min-width: 0; \/* allow grid to shrink below its content *\/\n }\n \n .lp360-pred-combined-left,\n .lp360-pred-combined-middle,\n .lp360-pred-combined-right {\n min-width: 0; \/* allow columns to shrink *\/\n max-width: 100%; \/* never exceed container width *\/\n }\n .lp360-pred-combined-right {\n overflow: hidden; \/* clip any accidental overflow *\/\n word-wrap: break-word;\n }\n .lp360-pred-combined-left {\n display: flex;\n flex-direction: column;\n gap: var(--lp-space-2);\n background: #fff;\n border: 1px solid var(--lp-border-subtle);\n border-radius: var(--lp-radius-lg);\n box-shadow: var(--lp-shadow-sm);\n padding: var(--lp-space-4) var(--lp-space-5);\n justify-content: center;\n }\n .lp360-pred-combined-row {\n display: flex;\n align-items: center;\n gap: var(--lp-space-3);\n padding: var(--lp-space-2) 0;\n }\n .lp360-pred-combined-row + .lp360-pred-combined-row {\n border-top: 1px dashed var(--lp-border-subtle);\n }\n .lp360-pred-combined-row-icon {\n width: 40px;\n height: 40px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: #fff;\n }\n .lp360-pred-combined-row-icon svg {\n width: 20px;\n height: 20px;\n }\n .lp360-pred-combined-row-icon--basic {\n background: linear-gradient(135deg, var(--lp-orange2), var(--lp-brand-light));\n }\n .lp360-pred-combined-row-icon--multi {\n background: linear-gradient(135deg, var(--lp-amber), #b9852f);\n }\n .lp360-pred-combined-row-icon--analytical {\n background: linear-gradient(135deg, var(--lp-red), #c2410c);\n }\n .lp360-pred-combined-row-text {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n .lp360-pred-combined-row-label {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.6px;\n text-transform: uppercase;\n color: var(--lp-text-gray);\n }\n .lp360-pred-combined-middle {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n background: radial-gradient(circle at 30% 100%, rgba(255,255,255,0.15), transparent 55%), linear-gradient(160deg, var(--lp-brand-light), #e2451c 70%);\n border-radius: var(--lp-radius-lg);\n padding: var(--lp-space-4) var(--lp-space-5);\n color: #fff;\n box-shadow: var(--lp-shadow-sm);\n}\n .lp360-pred-combined-right {\n background: #fff;\n border: 1px solid var(--lp-border-subtle);\n border-radius: var(--lp-radius-lg);\n box-shadow: var(--lp-shadow-sm);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n .lp360-pred-combined-right-section {\n padding: var(--lp-space-4) var(--lp-space-5);\n }\n .lp360-pred-combined-right-section + .lp360-pred-combined-right-section {\n border-top: 1px solid var(--lp-border-subtle);\n }\n .lp360-pred-combined-right-label {\n font-size: 10px;\n font-weight: 800;\n letter-spacing: 0.8px;\n text-transform: uppercase;\n color: var(--lp-brand-light);\n margin-bottom: 6px;\n }\n .lp360-pred-combined-right-section:nth-child(2) .lp360-pred-combined-right-label {\n color: #2563eb;\n }\n .lp360-pred-combined-right-section:nth-child(3) .lp360-pred-combined-right-label {\n color: #16a34a;\n }\n .lp360-pred-inf-secondary {\n display: none;\n }\n @media (max-width: 1024px) {\n .lp360-pred-combined-grid {\n grid-template-columns: 1fr;\n }\n .lp360-pred-combined-middle {\n order: -1;\n }\n }\n @media (max-width: 640px) {\n .lp360-pred-combined-row-icon {\n width: 34px;\n height: 34px;\n }\n .lp360-pred-combined-right-section {\n padding: var(--lp-space-3) var(--lp-space-4);\n }\n }\n\/* ====== CMA Foundation Predictions \u2014 v2: 3 cards only, boundaries not sub-cards ====== *\/\n.lp360-pred-header-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n background: #fff;\n border: 1px solid var(--lp-border-subtle);\n border-radius: var(--lp-radius-lg);\n padding: var(--lp-space-4) var(--lp-space-5);\n margin-bottom: var(--lp-space-5);\n box-shadow: var(--lp-shadow-sm);\n}\n.lp360-pred-header-title {\n font-size: 20px;\n font-weight: 800;\n margin: 0 0 4px;\n color: var(--lp-text-dark);\n font-family: 'Sora','Inter',sans-serif;\n}\n.lp360-pred-header-title span {\n color: var(--lp-brand-light);\n}\n.lp360-pred-card-heading {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n background: #fff5ec;\n border: 1.5px solid var(--lp-brand-light);\n color: var(--lp-brand-light);\n font-weight: 800;\n font-size: 15px;\n padding: 10px 14px;\n border-radius: var(--lp-radius-md);\n margin-bottom: var(--lp-space-4);\n font-family: 'Sora','Inter',sans-serif;\n text-align: center;\n}\n.lp360-pred-card-heading .lp360-spark {\n color: var(--lp-gold);\n font-size: 13px;\n}\n.lp360-pred-combined-left {\n background: #fffefc;\n}\n.lp360-pred-qrow {\n display: flex;\n align-items: center;\n gap: var(--lp-space-4);\n padding: var(--lp-space-3) 2px;\n}\n.lp360-pred-qrow + .lp360-pred-qrow {\n border-top: 1px solid var(--lp-border-subtle);\n}\n.lp360-pred-qrow-sphere {\n position: relative;\n width: 72px;\n height: 72px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: radial-gradient(circle at 32% 28%, #ffffff, var(--row-bg-tint) 60%);\n color: var(--row-color);\n box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 0 0 2px var(--row-border-tint);\n}\n\n.lp360-pred-qrow-sphere-value {\n font-family: 'Sora','Inter',sans-serif;\n font-weight: 800;\n font-size: 18px;\n line-height: 1.1;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.lp360-pred-qrow-sphere-value small {\n font-size: 9px;\n font-weight: 700;\n letter-spacing: 0.5px;\n margin-top: 1px;\n}\n.lp360-pred-qrow-text {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 0;\n}\n.lp360-pred-qrow-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n background: var(--row-bg-tint);\n border: 1.5px solid var(--row-border-tint);\n color: var(--row-color);\n font-weight: 800;\n font-size: 13.5px;\n padding: 8px 12px;\n border-radius: 10px;\n font-family: 'Sora','Inter',sans-serif;\n}\n.lp360-pred-qrow-icon {\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--row-color);\n}\n.lp360-pred-qrow-icon svg {\n width: 100%;\n height: 100%;\n}\n.lp360-pred-qrow-desc {\n font-size: 12.5px;\n line-height: 1.55;\n color: #6b7280;\n margin: 0;\n}\n.lp360-pred-qrow--basic {\n --row-color: #16a34a;\n --row-bg-tint: #eafaf0;\n --row-border-tint: #bdeccb;\n}\n.lp360-pred-qrow--multi {\n --row-color: #2563eb;\n --row-bg-tint: #eff6ff;\n --row-border-tint: #bfdbfe;\n}\n.lp360-pred-qrow--analytical {\n --row-color: #8B5CF6;\n --row-bg-tint: #f5f3ff;\n --row-border-tint: #ddd6fe;\n}\n.lp360-pred-combined-middle {\n background: linear-gradient(160deg, #fff6ec, #ffe6cc);\n color: var(--lp-text-dark);\n}\n.lp360-pred-score-quote {\n background: #fff;\n border: 1.5px solid #fcd9b8;\n border-radius: var(--lp-radius-md);\n padding: var(--lp-space-5);\n margin-top: calc(var(--lp-space-5) + 15px); margin-bottom: 0;\n font-size: 13px;\n line-height: 1.6;\n color: #6b5240;\n text-align: center;\n}\n.lp360-pred-score-progress {\n width: 100%;\n margin-top: var(--lp-space-5);\n position: relative;\n padding-top: 26px;\n}\n.lp360-pred-score-progress-badge {\n position: absolute;\n top: 0;\n transform: translateX(-50%);\n background: #fff;\n color: var(--lp-brand-light);\n font-weight: 800;\n font-size: 11px;\n padding: 3px 10px;\n border-radius: 8px;\n white-space: nowrap;\n font-family: 'Sora','Inter',sans-serif;\n box-shadow: 0 4px 10px rgba(0,0,0,0.15);\n transition: left 0.8s cubic-bezier(0.2,0.7,0.2,1);\n}\n.lp360-pred-score-progress-track {\n height: 9px;\n border-radius: 999px;\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.12);\n position: relative;\n}\n.lp360-pred-score-progress-marker {\n position: absolute;\n top: 50%;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: #fff;\n border: 3px solid #fff;\n box-shadow: 0 0 0 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.2);\n transform: translate(-50%, -50%);\n transition: left 0.8s cubic-bezier(0.2,0.7,0.2,1);\n}\n.lp360-pred-insight-row-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n margin-bottom: 6px;\n}\n.lp360-pred-insight-row-icon {\n width: 34px;\n height: 34px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: #fff;\n box-shadow: 0 2px 6px rgba(0,0,0,0.06);\n}\n.lp360-pred-insight-row-icon svg {\n width: 18px;\n height: 18px;\n}\n.lp360-pred-insight-title {\n font-size: 14px;\n font-weight: 800;\n font-family: 'Sora','Inter',sans-serif;\n}\n.lp360-pred-combined-right-section--blue {\n background: #f0f7ff;\n}\n.lp360-pred-combined-right-section--blue .lp360-pred-insight-title,\n.lp360-pred-combined-right-section--blue .lp360-pred-insight-row-icon {\n color: #2563eb;\n}\n.lp360-pred-combined-right-section--green {\n background: #f0fbf3;\n}\n.lp360-pred-combined-right-section--green .lp360-pred-insight-title,\n.lp360-pred-combined-right-section--green .lp360-pred-insight-row-icon {\n color: #16a34a;\n}\n.lp360-pred-combined-right-section--purple {\n background: #f6f3ff;\n flex: 1;\n}\n.lp360-pred-combined-right-section--purple .lp360-pred-insight-title,\n.lp360-pred-combined-right-section--purple .lp360-pred-insight-row-icon {\n color: #8B5CF6;\n}\n@media (max-width: 640px) {\n .lp360-pred-qrow-sphere {\n width: 54px;\n height: 54px;\n }\n .lp360-pred-qrow-sphere-value {\n font-size: 14px;\n }\n}\n\n \/* ======================================================================\n ANSWER KEY SECTION (Fix 11)\n ====================================================================== *\/\n .lp360-answer-key-card {\n background: var(--lp-card-bg);\n border-radius: var(--lp-radius-lg);\n padding: var(--lp-space-4);\n box-shadow: var(--lp-shadow-sm);\n border: 1px solid var(--lp-border-subtle);\n margin: 0;\n text-align: center;\n }\n .lp360-answer-key-card .lp360-answer-key-placeholder {\n font-size: 16px;\n color: var(--lp-text-gray);\n padding: var(--lp-space-8) var(--lp-space-4);\n }\n\n \/* ======================================================================\n RESPONSIVE\n ====================================================================== *\/\n @media (max-width: 1024px) {\n .lp360-hero-card {\n grid-template-columns: 1fr;\n gap: var(--lp-space-4);\n text-align: center;\n padding: var(--lp-space-4);\n }\n .lp360-hero-divider {\n width: 60%;\n height: 1px;\n }\n .lp360-gauge-wrap {\n width: 160px;\n height: 160px;\n margin-bottom: var(--lp-space-4);\n }\n .lp360-gauge-minibar {\n position: absolute;\n bottom: -16px;\n left: 50%;\n transform: translateX(-50%);\n width: 60%;\n max-width: 110px;\n margin: 0;\n }\n .lp360-gauge-value {\n font-size: 38px;\n }\n .lp360-gauge-value small {\n font-size: 18px;\n }\n .lp360-hero-metric-value {\n font-size: 28px;\n padding: 6px 16px;\n min-width: 100px;\n }\n .lp360-time-cards {\n flex-direction: column;\n border-radius: var(--lp-radius-md);\n border-top: none;\n border-bottom: none;\n }\n .lp360-time-card {\n border-right: none;\n border-bottom: 1px solid var(--lp-border-subtle);\n padding: var(--lp-space-3);\n }\n .lp360-time-card:last-child {\n border-bottom: none;\n }\n .lp360-breakdown-unified {\n grid-template-columns: 1fr 1fr;\n }\n .lp360-breakdown-col:nth-child(3) {\n grid-column: span 2;\n border-left: none;\n border-top: 1px solid var(--lp-border-subtle);\n }\n .lp360-dm-summary {\n grid-template-columns: repeat(3, 1fr);\n }\n .lp360-ncert-analysis-grid {\n grid-template-columns: 1fr;\n }\n .lp360-ncert-analysis-card + .lp360-ncert-analysis-card {\n border-left: none;\n border-top: 1px solid var(--lp-border-subtle);\n }\n .lp360-time-tracker-gauges {\n grid-template-columns: 1fr 1fr;\n }\n .lp360-time-tracker-inferences {\n grid-template-columns: 1fr;\n }\n .lp360-pred-score-grid {\n grid-template-columns: 1fr;\n }\n .lp360-pred-score-card--main {\n order: -1;\n }\n .lp360-pred-score-card + .lp360-pred-score-card {\n border-left: none;\n border-top: 1px solid var(--lp-border-subtle);\n }\n .lp360-pred-score-ring {\n width: 178px;\n height: 178px;\n margin: 23px auto 0 auto;\n} .lp360-pred-time-grid {\n grid-template-columns: 1fr 1fr;\n }\n .lp360-tracker-chart-wrap {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n .lp360-tracker-chart-wrap canvas {\n min-width: 500px;\n width: auto;\n height: auto;\n }\n }\n\n @media (max-width: 860px) {\n .lp360-mindmap-diagram {\n display: none;\n }\n .lp360-mindmap-mobile {\n display: flex;\n }\n .lp360-mindmap-summary {\n grid-template-columns: 1fr;\n }\n .lp360-hero-metric-value {\n min-width: 0;\n }\n .lp360-ncert-badge-desc {\n text-align: center;\n }\n .lp360-pred-hero-label {\n font-size: 11px;\n }\n .lp360-pred-time-value {\n font-size: 24px;\n }\n \/* Fix 6: mobile stacking using flex column *\/\n .lp360-breakdown-unified {\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n .lp360-breakdown-col {\n border-left: none !important;\n border-top: 1px solid var(--lp-border-subtle);\n padding: var(--lp-space-3) 0;\n width: 100%;\n }\n .lp360-breakdown-col:first-child {\n border-top: none;\n padding-top: 0;\n }\n .lp360-breakdown-col:last-child {\n padding-bottom: 0;\n }\n .lp360-breakdown-head {\n justify-content: flex-start;\n }\n .lp360-breakdown-list li {\n justify-content: flex-start;\n }\n .lp360-pred-time-grid {\n grid-template-columns: 1fr;\n max-width: 400px;\n margin-left: auto;\n margin-right: auto;\n }\n .lp360-pred-score-grid {\n max-width: 400px;\n margin-left: auto;\n margin-right: auto;\n }\n .lp360-time-tracker-gauges {\n grid-template-columns: 1fr 1fr;\n max-width: 400px;\n margin-left: auto;\n margin-right: auto;\n }\n }\n\n @media (max-width: 640px) {\n .lp360-shell {\n padding: var(--lp-space-3);\n border-radius: var(--lp-radius-md);\n }\n .lp360-section-card {\n padding: var(--lp-space-3);\n border-radius: var(--lp-radius-md);\n }\n .lp360-hero-card {\n padding: var(--lp-space-3);\n border-radius: var(--lp-radius-sm);\n }\n .lp360-gauge-wrap {\n width: 130px;\n height: 130px;\n margin-bottom: var(--lp-space-3);\n }\n .lp360-gauge-minibar {\n bottom: -14px;\n width: 55%;\n max-width: 90px;\n }\n .lp360-gauge-value {\n font-size: 32px;\n }\n .lp360-gauge-value small {\n font-size: 15px;\n }\n .lp360-gauge-label {\n font-size: 9px;\n letter-spacing: 1.5px;\n }\n .lp360-hero-metric-value {\n font-size: 22px;\n padding: 4px 12px;\n min-width: 80px;\n }\n .lp360-hero-metric-label {\n font-size: 10px;\n }\n .lp360-icon-badge {\n width: 44px;\n height: 44px;\n }\n .lp360-icon-badge svg {\n width: 20px;\n height: 20px;\n }\n .lp360-time-cards {\n flex-direction: column;\n }\n .lp360-breakdown-unified {\n display: flex;\n flex-direction: column;\n }\n .lp360-breakdown-col {\n border-left: none !important;\n border-top: 1px solid var(--lp-border-subtle);\n padding: var(--lp-space-3) 0;\n width: 100%;\n }\n .lp360-breakdown-col:first-child {\n border-top: none;\n padding-top: 0;\n }\n .lp360-dm-summary {\n grid-template-columns: repeat(3, 1fr);\n gap: var(--lp-space-2);\n}\n .lp360-tabs {\n gap: 4px;\n }\n .lp360-tab {\n padding: 8px 16px;\n font-size: 12px;\n }\n .lp360-time-card-value {\n font-size: 22px;\n }\n .lp360-tracker-title {\n font-size: 20px;\n }\n .lp360-time-tracker-gauges {\n grid-template-columns: 1fr;\n max-width: 280px;\n margin-left: auto;\n margin-right: auto;\n }\n .lp360-time-tab {\n font-size: 11px;\n padding: 8px 4px;\n }\n .lp360-gauge-column-header {\n justify-content: center;\n }\n .lp360-gauge-column-title,\n .lp360-gauge-column-sub {\n text-align: center;\n }\n .lp360-pred-time-grid {\n grid-template-columns: 1fr;\n max-width: 320px;\n }\n .lp360-pred-time-value {\n font-size: 24px;\n }\n .lp360-pred-score-grid {\n max-width: 320px;\n }\n .lp360-pred-score-ring {\n width: 153px;\n height: 153px;\n margin: 23px auto 0 auto;\n}\n.lp360-pred-score-obtained {\n font-size: 43px;\n}\n.lp360-pred-score-total {\n font-size: 20px;\n}\n .lp360-pred-score-badge {\n font-size: 11px;\n padding: 6px 12px;\n }\n .lp360-mm-mobile-group {\n padding: var(--lp-space-2);\n }\n .lp360-mm-mobile-tags span {\n font-size: 11px;\n padding: 4px 8px;\n }\n .lp360-mm-summary-card {\n padding: var(--lp-space-2) var(--lp-space-3);\n }\n .lp360-mm-summary-value {\n font-size: 22px;\n }\n .lp360-ncert-badge-row {\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n .lp360-ncert-divider {\n width: 60%;\n height: 1px;\n }\n .lp360-ncert-badge-desc {\n text-align: center;\n }\n .lp360-decision-card {\n padding: var(--lp-space-3);\n }\n .lp360-tracker-card,\n .lp360-accuracy-card,\n .lp360-time-tracker-card {\n padding: 0;\n }\n .lp360-tracker-card + .lp360-tracker-card,\n .lp360-accuracy-card + .lp360-tracker-card,\n .lp360-tracker-card + .lp360-accuracy-card {\n padding-top: var(--lp-space-4);\n margin-top: var(--lp-space-3);\n }\n .lp360-tracker-chart-wrap canvas {\n min-width: 400px;\n }\n .lp360-gauge-column-chart {\n max-width: 110px;\n }\n .lp360-gauge-column-value {\n font-size: 20px;\n }\n .lp360-gauge-column {\n padding: var(--lp-space-2);\n }\n .lp360-pred-info-text {\n font-size: 12px;\n }\n .lp360-info-popover__content {\n max-width: 340px;\n padding: var(--lp-space-4) var(--lp-space-3) var(--lp-space-3);\n }\n .lp360-info-popover__title {\n font-size: 16px;\n }\n .lp360-info-popover__desc {\n font-size: 14px;\n }\n .lp360-answer-key-card .lp360-answer-key-placeholder {\n padding: var(--lp-space-6) var(--lp-space-4);\n font-size: 15px;\n }\n }\n\n @media (max-width: 480px) {\n .lp360-shell {\n padding: var(--lp-space-2);\n }\n .lp360-section-card {\n padding: var(--lp-space-2);\n }\n .lp360-hero-card {\n padding: var(--lp-space-3) var(--lp-space-2);\n }\n .lp360-gauge-wrap {\n width: 110px;\n height: 110px;\n }\n .lp360-gauge-minibar {\n bottom: -12px;\n width: 50%;\n max-width: 70px;\n }\n .lp360-gauge-value {\n font-size: 26px;\n }\n .lp360-gauge-value small {\n font-size: 13px;\n }\n .lp360-gauge-label {\n font-size: 8px;\n letter-spacing: 1px;\n }\n .lp360-hero-metric-value {\n font-size: 18px;\n padding: 4px 10px;\n min-width: 60px;\n }\n .lp360-icon-badge {\n width: 36px;\n height: 36px;\n }\n .lp360-icon-badge svg {\n width: 16px;\n height: 16px;\n }\n .lp360-time-card-value {\n font-size: 20px;\n padding: 4px 10px;\n }\n .lp360-breakdown-total {\n font-size: 20px;\n }\n .lp360-tab {\n padding: 6px 12px;\n font-size: 11px;\n }\n .lp360-section-title h2 {\n font-size: 18px;\n }\n .lp360-tracker-title {\n font-size: 18px;\n }\n .lp360-pred-time-value {\n font-size: 20px;\n }\n .lp360-pred-score-ring {\n width: 153px;\n height: 153px;\n margin: 23px auto 0 auto;\n }\n .lp360-pred-score-obtained {\n font-size: 43px;\n }\n .lp360-pred-score-total {\n font-size: 20px;\n }\n .lp360-pred-score-badge {\n font-size: 10px;\n padding: 4px 10px;\n }\n .lp360-mm-mobile-heading {\n font-size: 12px;\n }\n .lp360-mm-mobile-tags span {\n font-size: 10px;\n padding: 3px 6px;\n }\n .lp360-dm-summary {\n grid-template-columns: repeat(3, 1fr);\n gap: var(--lp-space-1);\n }\n .lp360-dm-summary-card {\n padding: var(--lp-space-1) var(--lp-space-2);\n }\n .lp360-dm-summary-value {\n font-size: 15px;\n }\n .lp360-dm-summary-label {\n font-size: 8px;\n }\n .lp360-dm-table {\n min-width: 500px;\n }\n .lp360-time-tracker-gauges {\n max-width: 220px;\n }\n .lp360-gauge-column-chart {\n max-width: 88px;\n }\n .lp360-gauge-column-value {\n font-size: 18px;\n }\n .lp360-info-popover__content {\n max-width: 300px;\n padding: var(--lp-space-3);\n }\n .lp360-info-popover__title {\n font-size: 15px;\n }\n .lp360-info-popover__desc {\n font-size: 13px;\n }\n .lp360-answer-key-card .lp360-answer-key-placeholder {\n padding: var(--lp-space-5) var(--lp-space-3);\n font-size: 14px;\n }\n}\n\/* ======================================================================\n PREDICTION CONFIDENCE \u2014 as seen in CLAT booster\n ====================================================================== *\/\n.prediction-confidence {\n text-align: center;\n border-left: 1px solid #fdba74;\n padding-left: 20px;\n margin-left: 4px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-width: 140px;\n flex-shrink: 0;\n}\n\n.prediction-confidence-label {\n font-size: 11px;\n font-weight: 700;\n color: #374151;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 2px;\n}\n\n.prediction-confidence-percentage {\n font-size: 32px;\n font-weight: 800;\n line-height: 1.2;\n transition: color 0.3s ease;\n}\n\n.prediction-confidence-level {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-top: 4px;\n transition: color 0.3s ease;\n}\n@media (max-width: 860px) {\n #lp360-panel-prediction .prediction-warning {\n flex-wrap: wrap;\n padding: 16px 16px 12px;\n gap: 12px;\n }\n #lp360-panel-prediction .prediction-warning-icon {\n flex: 0 0 34px;\n margin: 0 auto;\n }\n #lp360-panel-prediction .prediction-warning-text {\n flex: 1 1 100%;\n order: 2;\n font-size: 13px;\n margin: 0;\n text-align: center;\n }\n .prediction-confidence {\n order: 1;\n display: grid;\n grid-template-columns: minmax(0, 1fr) max-content;\n grid-template-areas:\n \"label value\"\n \"level value\";\n column-gap: 10px;\n row-gap: 2px;\n align-items: center;\n background: rgba(255, 255, 255, 0.5);\n border: 1px solid #fdba74;\n border-left: 1px solid #fdba74 !important;\n border-radius: 12px;\n padding: 10px 18px !important;\n width: 100%;\n margin-left: 0 !important;\n min-width: unset;\n flex-direction: unset;\n }\n .prediction-confidence-label {\n grid-area: label;\n text-align: center;\n font-size: 10px;\n margin-bottom: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .prediction-confidence-level {\n grid-area: level;\n text-align: center;\n font-size: 10px;\n margin-top: 0;\n white-space: nowrap;\n }\n .prediction-confidence-percentage {\n grid-area: value;\n justify-self: center;\n align-self: center;\n margin-left: -4px;\n padding-top: 5px;\n font-size: 26px;\n line-height: 1;\n white-space: nowrap;\n }\n}\n\/* --- Mobile \u2264860px: label+status stacked left, percentage anchored right-of-center --- *\/\n\n@media (max-width: 480px) {\n .prediction-confidence {\n padding: 8px 14px !important;\n column-gap: 8px;\n }\n .prediction-confidence-label,\n .prediction-confidence-level {\n font-size: 9px;\n }\n .prediction-confidence-percentage {\n font-size: 22px;\n margin-left: -3px;\n padding-top: 4px;\n white-space: nowrap;\n }\n}\n\/* ======================================================================\n MIND MAP INFERENCE OVERLAY\n ====================================================================== *\/\n.lp360-mindmap-card {\n position: relative;\n}\n.lp360-mindmap-card.has-inference .lp360-mindmap-diagram,\n.lp360-mindmap-card.has-inference .lp360-mindmap-mobile,\n.lp360-mindmap-card.has-inference .lp360-mindmap-summary {\n filter: blur(6px);\n pointer-events: none;\n user-select: none;\n transition: filter 0.4s ease;\n}\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-4);\n pointer-events: none;\n}\n.lp360-mindmap-card.has-inference .lp360-mindmap-overlay {\n display: flex;\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-4);\n max-width: 280px;\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.lp360-mindmap-overlay__card h3 {\n font-family: 'Sora','Inter',sans-serif;\n font-size: 14px;\n font-weight: 800;\n margin: 0 0 6px;\n color: var(--lp-text-dark);\n letter-spacing: -0.2px;\n}\n.lp360-mindmap-overlay__card p {\n font-size: 12px;\n line-height: 1.5;\n color: #374151;\n margin: 0;\n}\n.lp360-mindmap-overlay__icon {\n width: 36px;\n height: 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 10px;\n color: #fff;\n box-shadow: 0 6px 16px rgba(232,93,58,0.3);\n}\n.lp360-mindmap-overlay__icon svg {\n width: 16px;\n height: 16px;\n}\n\n\/* ======================================================================\n SCORE TRACKER INFERENCE OVERLAY\n ====================================================================== *\/\n.lp360-tracker-chart-wrap {\n position: relative;\n}\n.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.lp360-tracker-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-4);\n pointer-events: none;\n}\n.lp360-tracker-chart-wrap.has-inference .lp360-tracker-overlay {\n display: flex;\n}\n.lp360-tracker-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-4);\n max-width: 280px;\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.lp360-tracker-overlay__card h3 {\n font-family: 'Sora','Inter',sans-serif;\n font-size: 14px;\n font-weight: 800;\n margin: 0 0 6px;\n color: var(--lp-text-dark);\n letter-spacing: -0.2px;\n}\n.lp360-tracker-overlay__card p {\n font-size: 12px;\n line-height: 1.5;\n color: #374151;\n margin: 0;\n}\n.lp360-tracker-overlay__icon {\n width: 36px;\n height: 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 10px;\n color: #fff;\n box-shadow: 0 6px 16px rgba(232,93,58,0.3);\n}\n.lp360-tracker-overlay__icon svg {\n width: 16px;\n height: 16px;\n}\n\/* New description style for Mind Map *\/\n.lp360-mindmap-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: 11.5px; \/* matches tile font size *\/\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.lp360-mindmap-description p {\n margin: 0;\n}\n\/* Generic section description box (same style as Mind Map's) *\/\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: 11.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.lp360-section-description p {\n margin: 0;\n}\n\/* ======================================================================\n NO ATTEMPTS OVERLAY \u2014 full\u2011screen blur + premium message\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: linear-gradient(180deg, #ffffff 0%, #fffaf7 100%);\n border-radius: 32px;\n max-width: 560px;\n width: 100%;\n padding: 44px 36px 36px;\n box-shadow: 0 40px 90px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(239, 68, 68, 0.12) inset, 0 0 0 2px rgba(255, 255, 255, 0.6) 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::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 5px;\n background: linear-gradient(90deg, #f87171, #dc2626, #f87171);\n background-size: 200% 100%;\n animation: lp360GradientMove 3s ease infinite;\n}\n.lp360-no-attempts-icon {\n width: 84px;\n height: 84px;\n border-radius: 50%;\n background: linear-gradient(135deg, #f87171, #dc2626);\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 22px;\n box-shadow: 0 12px 34px rgba(220, 38, 38, 0.4), 0 0 0 8px rgba(239, 68, 68, 0.08);\n animation: lp360PopoverIconPulse 2.2s ease-in-out infinite;\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: 27px;\n font-weight: 800;\n letter-spacing: -0.3px;\n color: #1a1a2e;\n margin: 0 0 14px;\n}\n.lp360-no-attempts-message {\n font-size: 16.5px;\n line-height: 1.75;\n color: #4b5563;\n margin: 0 0 26px;\n padding: 0 8px;\n}\n.lp360-no-attempts-badge {\n display: inline-block;\n padding: 14px 36px;\n border-radius: 999px;\n background: linear-gradient(90deg, #dc2626, #ef4444);\n color: #fff;\n font-weight: 800;\n font-size: 14px;\n letter-spacing: 1.2px;\n text-transform: uppercase;\n box-shadow: 0 10px 28px rgba(220, 38, 38, 0.35);\n text-decoration: none;\n cursor: pointer;\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n.lp360-no-attempts-badge:hover {\n transform: translateY(-2px);\n box-shadow: 0 14px 34px rgba(220, 38, 38, 0.45);\n color: #fff;\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}\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}\n \/* ===== PREDICTION SECTION REPLACEMENT CSS ===== *\/\n #lp360-panel-prediction {\n --brand:#E85D3A; --brand-light:#FF7A3D; --gold:#FFC542;\n --green:#16a34a; --blue:#2563eb; --purple:#8B5CF6;\n --text-dark:#0b0e1a; --text-gray:#5b6478;\n --border:#e9ecf2; --bg:#f4f6fa;\n --radius-lg:20px; --radius-md:14px;\n --shadow:0 2px 8px rgba(15,23,42,0.06);\n --tile-pad-y:18px; --tile-pad-x:20px;\n }\n #lp360-panel-prediction .section-title{margin-bottom:16px;}\n #lp360-panel-prediction .section-title h2{font-family:'Sora',sans-serif;font-size:20px;font-weight:800;margin:0 0 6px;}\n #lp360-panel-prediction .underline{display:block;width:36px;height:4px;border-radius:4px;background:var(--lp-gradient-brand);}\n\n #lp360-panel-prediction .header-bar{\n display:flex;align-items:center;background:#fff;border:1px solid var(--border);\n border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:20px;\n box-shadow:var(--shadow);\n }\n #lp360-panel-prediction .header-bar h3{font-family:'Sora',sans-serif;font-size:20px;font-weight:800;margin:0 0 4px;}\n #lp360-panel-prediction .header-bar h3 span{color:var(--brand-light);}\n\n #lp360-panel-prediction .pred-grid{\n display:grid;\n grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);\n gap:24px;\n align-items:stretch;\n }\n\n #lp360-panel-prediction .heading-pill{\n display:flex;align-items:center;justify-content:center;gap:8px;\n height:40px;width:100%;\n background:#fff;border:1.5px solid var(--brand-light);color:var(--brand-light);\n font-weight:800;font-size:13.5px;letter-spacing:.2px;padding:0 14px;border-radius:var(--radius-md);\n margin-bottom:16px;font-family:'Sora',sans-serif;line-height:1;\n box-shadow:0 2px 8px rgba(232,93,58,0.08);\n }\n #lp360-panel-prediction .heading-pill .spark{color:var(--gold);font-size:12px;}\n\n #lp360-panel-prediction .left-col{\n display:flex;flex-direction:column;height:100%;\n gap:16px;\n }\n #lp360-panel-prediction .left-col > div{\n display:flex;\n flex-direction:column;\n height:100%;\n min-height:100%;\n }\n #lp360-panel-prediction .left-col .insight-box{flex:1;}\n\n #lp360-panel-prediction .qtype-row{\n display:grid;\n grid-template-columns:1fr;\n gap:8px;\n align-items:stretch;\n width:94%;\n margin:12px auto 0;\n padding-top:0;\n }\n #lp360-panel-prediction .qtype-box{\n width:100%;\n min-height:78px;\n border:1px solid var(--border);\n border-radius:14px;\n box-shadow:0 5px 14px rgba(15,23,42,0.045);\n padding:8px 14px 9px;\n text-align:left;\n display:grid;\n grid-template-columns:52px minmax(0,1fr);\n grid-template-rows:auto auto;\n align-items:center;\n column-gap:12px;\n row-gap:4px;\n position:relative;\n overflow:hidden;\n transition:transform .18s ease, box-shadow .18s ease;\n }\n #lp360-panel-prediction .qtype-box::before{\n content:'';\n position:absolute;\n left:0;\n top:12px;\n bottom:12px;\n width:3px;\n border-radius:0 4px 4px 0;\n background:currentColor;\n opacity:.7;\n }\n #lp360-panel-prediction .qtype-box:hover{\n transform:translateY(-1px);\n box-shadow:0 8px 18px rgba(15,23,42,0.07);\n }\n #lp360-panel-prediction .qtype-sphere{\n grid-column:1;\n grid-row:1;\n width:52px;\n height:52px;\n flex-shrink:0;\n border-radius:50%;\n display:flex;\n flex-direction:column;\n align-items:center;\n justify-content:center;\n gap:1px;\n background:rgba(255,255,255,.96);\n font-family:'Sora',sans-serif;\n line-height:1;\n }\n #lp360-panel-prediction .qtype-sphere .num{\n font-size:18px;\n font-weight:800;\n }\n #lp360-panel-prediction .qtype-sphere small{\n display:block;\n font-size:7.5px;\n font-weight:700;\n letter-spacing:.15px;\n white-space:nowrap;\n }\n #lp360-panel-prediction .qtype-label{\n grid-column:2;\n grid-row:1;\n align-self:center;\n font-family:'Sora',sans-serif;\n font-weight:800;\n font-size:12.5px;\n min-height:0;\n line-height:1.3;\n white-space:nowrap;\n }\n #lp360-panel-prediction .qtype-desc{\n grid-column:1 \/ -1;\n grid-row:2;\n font-size:11.5px;\n line-height:1.4;\n color:var(--text-gray);\n margin:0;\n text-align:center;\n white-space:nowrap;\n overflow:hidden;\n text-overflow:ellipsis;\n }\n\n #lp360-panel-prediction .qtype-box--basic{\n background:linear-gradient(90deg,#eafaf0 0%,#f5fcf7 100%);\n border-color:#cdeed4;\n color:var(--green);\n }\n #lp360-panel-prediction .qtype-box--basic .qtype-sphere{\n color:var(--green);\n box-shadow:inset 0 0 0 2px #bdeccb,0 3px 10px rgba(22,163,74,.08);\n }\n #lp360-panel-prediction .qtype-box--basic .qtype-label{color:var(--green);}\n\n #lp360-panel-prediction .qtype-box--multi{\n background:linear-gradient(90deg,#eff6ff 0%,#f7faff 100%);\n border-color:#cfe1fb;\n color:var(--blue);\n }\n #lp360-panel-prediction .qtype-box--multi .qtype-sphere{\n color:var(--blue);\n box-shadow:inset 0 0 0 2px #bfdbfe,0 3px 10px rgba(37,99,235,.08);\n }\n #lp360-panel-prediction .qtype-box--multi .qtype-label{color:var(--blue);}\n\n #lp360-panel-prediction .qtype-box--analytical{\n background:linear-gradient(90deg,#f5f3ff 0%,#faf9ff 100%);\n border-color:#e3dcfb;\n color:var(--purple);\n }\n #lp360-panel-prediction .qtype-box--analytical .qtype-sphere{\n color:var(--purple);\n box-shadow:inset 0 0 0 2px #ddd6fe,0 3px 10px rgba(139,92,246,.08);\n }\n #lp360-panel-prediction .qtype-box--analytical .qtype-label{color:var(--purple);}\n\n @media (max-width:1100px){\n #lp360-panel-prediction .qtype-row{width:100%;}\n #lp360-panel-prediction .qtype-box{\n grid-template-columns:48px minmax(0,1fr);\n column-gap:10px;\n padding:8px 12px 9px;\n }\n #lp360-panel-prediction .qtype-sphere{width:48px;height:48px;}\n #lp360-panel-prediction .qtype-label{font-size:12px;}\n #lp360-panel-prediction .qtype-desc{font-size:11px;}\n }\n\n @media (max-width:520px){\n #lp360-panel-prediction .qtype-box{\n grid-template-columns:46px 1fr;\n min-height:74px;\n padding:8px 10px;\n }\n #lp360-panel-prediction .qtype-sphere{width:46px;height:46px;}\n #lp360-panel-prediction .qtype-desc{\n grid-column:1 \/ -1;\n white-space:normal;\n overflow:visible;\n text-overflow:clip;\n margin-top:0;\n }\n }\n\n #lp360-panel-prediction .insight-box{\n background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);\n box-shadow:var(--shadow);padding:var(--tile-pad-y) var(--tile-pad-x);\n display:flex;flex-direction:column;justify-content:center;\n }\n #lp360-panel-prediction .insight-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}\n #lp360-panel-prediction .insight-title{font-family:'Sora',sans-serif;font-weight:800;font-size:14.5px;}\n #lp360-panel-prediction .insight-icon{\n width:34px;height:34px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;\n }\n #lp360-panel-prediction .insight-icon svg{width:17px;height:17px;stroke:#fff;}\n #lp360-panel-prediction .insight-text{font-size:13px;line-height:1.65;color:#4b5563;margin:0;}\n\n #lp360-panel-prediction .insight-box--time{background:#f0f7ff;border-color:#d7e8fc;}\n #lp360-panel-prediction .insight-box--time .insight-title{color:var(--blue);}\n #lp360-panel-prediction .insight-box--time .insight-icon{background:var(--blue);box-shadow:0 4px 10px rgba(37,99,235,0.25);}\n #lp360-panel-prediction .insight-box--mentor{background:#f6f3ff;border-color:#e3dcfb;}\n #lp360-panel-prediction .insight-box--mentor .insight-title{color:var(--purple);}\n #lp360-panel-prediction .insight-box--mentor .insight-icon{background:var(--purple);box-shadow:0 4px 10px rgba(139,92,246,0.25);}\n #lp360-panel-prediction .insight-box--score{background:#f0fbf3;border-color:#cdeed4;}\n #lp360-panel-prediction .insight-box--score .insight-title{color:var(--green);}\n #lp360-panel-prediction .insight-box--score .insight-icon{background:var(--green);box-shadow:0 4px 10px rgba(22,163,74,0.25);}\n\n #lp360-panel-prediction .right-col{\n background:linear-gradient(160deg,#fff6ec,#ffe6cc);\n border-radius:var(--radius-lg);padding:22px;\n box-shadow:var(--shadow);\n display:flex;flex-direction:column;align-items:center;\n height:100%;\n gap:16px;\n }\n #lp360-panel-prediction .right-col .score-quote{flex:1;display:flex;align-items:center;justify-content:center;}\n #lp360-panel-prediction .right-col .insight-box{flex:1;width:100%;}\n #lp360-panel-prediction .score-ring{\n width:190px;height:190px;flex-shrink:0;border-radius:50%;\n background: var(--lp-dark-1);\n border: 3px solid transparent; background-clip: padding-box; position: relative;\n display:flex;align-items:center;justify-content:center;\n box-shadow:var(--lp-gold-glow);\n }\n #lp360-panel-prediction .score-ring::before {\n content: ''; position: absolute; inset: -3px; border-radius: 50%;\n background: var(--lp-gradient-gold); z-index: -1;\n }\n #lp360-panel-prediction .score-ring-inner{display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:8px;}\n #lp360-panel-prediction .score-obtained{font-family:'Sora',sans-serif;font-size:52px;font-weight:800;color:var(--lp-brand-light);line-height:1;}\n #lp360-panel-prediction .score-divider{width:auto;height:auto;background:transparent;margin:0;font-size:40px;color:#d8dbe2;font-weight:300;}\n #lp360-panel-prediction .score-total{font-family:'Sora',sans-serif;font-size:32px;font-weight:700;color:#9ca3af;line-height:1;}\n #lp360-panel-prediction .score-quote{\n background:#fff;border:1px solid #fcd9b8;border-radius:var(--radius-md);\n box-shadow:var(--shadow);\n padding:var(--tile-pad-y) var(--tile-pad-x);font-size:13px;line-height:1.65;color:#6b5240;text-align:center;margin:0;width:100%;\n flex:0 0 auto;\n }\n \n @media (max-width:1080px){\n #lp360-panel-prediction .pred-grid{gap:18px;}\n #lp360-panel-prediction .score-ring{width:170px;height:170px;}\n #lp360-panel-prediction .score-obtained{font-size:44px;}\n }\n @media (max-width:860px){\n #lp360-panel-prediction .pred-grid{grid-template-columns:1fr;}\n #lp360-panel-prediction .right-col{order:-1;height:auto;}\n #lp360-panel-prediction .qtype-row{grid-template-columns:1fr;}\n }\n\n #lp360-panel-prediction .prediction-warning{\n margin-top:0;\n width:100%;\n background:#fff7ed;\n border:1.5px solid #fdba74;\n border-left:5px solid #f97316;\n border-radius:var(--radius-md);\n box-shadow:var(--shadow);\n padding:16px 18px;\n display:flex;\n align-items:flex-start;\n gap:12px;\n }\n #lp360-panel-prediction .prediction-warning-icon{\n width:34px;\n height:34px;\n flex-shrink:0;\n border-radius:50%;\n background:#f97316;\n color:#fff;\n display:flex;\n align-items:center;\n justify-content:center;\n box-shadow:0 4px 10px rgba(249,115,22,0.25);\n }\n #lp360-panel-prediction .prediction-warning-icon svg{\n width:18px;\n height:18px;\n stroke:currentColor;\n }\n #lp360-panel-prediction .prediction-warning-text{\n font-size:13px;\n line-height:1.7;\n color:#7c4a19;\n margin:0;\n }\n #lp360-panel-prediction .prediction-warning-text strong{\n color:#9a3412;\n }\n\n\n\/* ======================================================================\n TRACKER LAYOUT UPDATE \u2014 Score left, Accuracy right\n ====================================================================== *\/\n#lp360-panel-tracker .lp360-section-card {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n gap: var(--lp-space-5);\n align-items: start;\n}\n#lp360-panel-tracker .lp360-section-card > .lp360-section-title {\n grid-column: 1 \/ -1;\n}\n#lp360-panel-tracker .lp360-section-card > .lp360-section-divider {\n display: none;\n}\n#lp360-panel-tracker .lp360-tracker-card,\n#lp360-panel-tracker .lp360-accuracy-card {\n min-width: 0;\n padding: var(--lp-space-4);\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#lp360-panel-tracker .lp360-tracker-card {\n grid-column: 1;\n}\n#lp360-panel-tracker .lp360-accuracy-card {\n grid-column: 2;\n}\n\n@media (max-width: 900px) {\n #lp360-panel-tracker .lp360-section-card {\n grid-template-columns: 1fr;\n }\n #lp360-panel-tracker .lp360-tracker-card,\n #lp360-panel-tracker .lp360-accuracy-card {\n grid-column: 1;\n }\n}\n\n\n\n\/* ======================================================================\n IDEAL TIME PREDICTION \u2014 white-space filling larger concept cards\n ====================================================================== *\/\n#lp360-panel-prediction .ideal-time-card {\n width: 100%;\n height: 100%;\n min-height: 100%;\n padding: 22px;\n background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);\n border: 1px solid #e7ebf2;\n border-radius: var(--radius-lg);\n box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);\n display: flex;\n flex-direction: column;\n align-items: stretch;\n}\n\n#lp360-panel-prediction .ideal-time-card .heading-pill {\n flex: 0 0 auto;\n margin-bottom: 14px;\n}\n\n#lp360-panel-prediction .ideal-time-card .lp360-section-description {\n width: 100%;\n margin: 0 0 18px;\n}\n\n#lp360-panel-prediction .ideal-time-card .qtype-row {\n width: 100%;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 16px;\n flex: 1;\n}\n\n#lp360-panel-prediction .ideal-time-card .qtype-box {\n flex: 1 1 0;\n min-height: 122px;\n padding: 18px 20px;\n grid-template-columns: 72px minmax(0, 1fr);\n grid-template-rows: auto auto;\n column-gap: 18px;\n row-gap: 10px;\n border-radius: 20px;\n box-shadow: 0 9px 22px rgba(15, 23, 42, 0.08);\n align-content: center;\n}\n\n#lp360-panel-prediction .ideal-time-card .qtype-box:hover {\n transform: translateY(-2px);\n box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);\n}\n\n#lp360-panel-prediction .ideal-time-card .qtype-sphere {\n grid-column: 1;\n grid-row: 1 \/ 3;\n align-self: center;\n width: 72px;\n height: 72px;\n}\n\n#lp360-panel-prediction .ideal-time-card .qtype-sphere .num {\n font-size: 22px;\n}\n\n#lp360-panel-prediction .ideal-time-card .qtype-sphere small {\n font-size: 8px;\n}\n\n#lp360-panel-prediction .ideal-time-card .qtype-label {\n grid-column: 2;\n grid-row: 1;\n align-self: end;\n font-size: 16px;\n line-height: 1.35;\n white-space: normal;\n}\n\n#lp360-panel-prediction .ideal-time-card .qtype-desc {\n grid-column: 2;\n grid-row: 2;\n align-self: start;\n margin: 0;\n text-align: left;\n font-size: 12px;\n line-height: 1.45;\n white-space: normal;\n overflow: visible;\n text-overflow: clip;\n}\n\n@media (max-width: 1100px) {\n #lp360-panel-prediction .ideal-time-card {\n padding: 18px;\n }\n #lp360-panel-prediction .ideal-time-card .qtype-row {\n gap: 14px;\n }\n #lp360-panel-prediction .ideal-time-card .qtype-box {\n min-height: 112px;\n grid-template-columns: 64px minmax(0, 1fr);\n padding: 16px 18px;\n column-gap: 16px;\n }\n #lp360-panel-prediction .ideal-time-card .qtype-sphere {\n width: 64px;\n height: 64px;\n }\n #lp360-panel-prediction .ideal-time-card .qtype-label {\n font-size: 15px;\n }\n}\n\n@media (max-width: 520px) {\n #lp360-panel-prediction .ideal-time-card {\n padding: 14px;\n min-height: auto;\n }\n #lp360-panel-prediction .ideal-time-card .qtype-row {\n gap: 12px;\n }\n #lp360-panel-prediction .ideal-time-card .qtype-box {\n min-height: 96px;\n grid-template-columns: 52px minmax(0, 1fr);\n padding: 12px 13px;\n column-gap: 12px;\n row-gap: 8px;\n border-radius: 16px;\n }\n #lp360-panel-prediction .ideal-time-card .qtype-sphere {\n width: 52px;\n height: 52px;\n }\n #lp360-panel-prediction .ideal-time-card .qtype-label {\n font-size: 13px;\n }\n}\n\n\n\n\/* ======================================================================\n IDEAL TIME DESCRIPTION \u2014 compact curved premium pill\n ====================================================================== *\/\n#lp360-panel-prediction .ideal-time-card .qtype-desc {\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n justify-self: start;\n width: fit-content;\n max-width: 100%;\n padding: 6px 12px;\n border-radius: 999px;\n background: rgba(255, 255, 255, 0.88);\n border: 1px solid rgba(148, 163, 184, 0.24);\n box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);\n font-size: 11px;\n font-weight: 600;\n line-height: 1.25;\n}\n\n#lp360-panel-prediction .ideal-time-card .qtype-box--basic .qtype-desc {\n color: #15803d;\n background: rgba(255, 255, 255, 0.92);\n border-color: #bdeccb;\n}\n\n#lp360-panel-prediction .ideal-time-card .qtype-box--multi .qtype-desc {\n color: #2563eb;\n background: rgba(255, 255, 255, 0.92);\n border-color: #bfdbfe;\n}\n\n#lp360-panel-prediction .ideal-time-card .qtype-box--analytical .qtype-desc {\n color: #7c3aed;\n background: rgba(255, 255, 255, 0.92);\n border-color: #ddd6fe;\n}\n\n@media (max-width: 520px) {\n #lp360-panel-prediction .ideal-time-card .qtype-desc {\n padding: 5px 10px;\n border-radius: 12px;\n font-size: 10.5px;\n }\n}\n\n\n\n\/* ======================================================================\n TIME TRACKER MOBILE FILL \u2014 make mobile cards fill available width\n ====================================================================== *\/\n@media (max-width: 768px) {\n .lp360-time-tracker-right {\n padding: 12px;\n }\n .lp360-time-tracker-tabs {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n }\n .lp360-time-tab {\n min-width: 0;\n padding: 10px 6px;\n line-height: 1.15;\n }\n .lp360-time-tracker-gauges {\n grid-template-columns: 1fr;\n width: 100%;\n max-width: 100%;\n margin-left: 0;\n margin-right: 0;\n gap: 14px;\n }\n .lp360-gauge-column {\n width: 100%;\n max-width: 100%;\n padding: 14px 12px;\n border-radius: 18px;\n }\n .lp360-gauge-column-chart {\n width: 100%;\n max-width: 180px;\n margin: 6px auto 8px;\n }\n}\n\n@media (max-width: 520px) {\n .lp360-time-tracker-right {\n padding: 10px;\n }\n .lp360-time-tracker-tabs {\n border-radius: 14px;\n }\n .lp360-time-tab {\n font-size: 10.5px;\n padding: 10px 4px;\n }\n .lp360-time-tracker-gauges {\n max-width: 100% !important;\n width: 100%;\n gap: 12px;\n }\n .lp360-gauge-column {\n width: 100%;\n padding: 14px 10px;\n }\n .lp360-gauge-column-header {\n margin-bottom: 8px;\n }\n .lp360-gauge-column-title {\n font-size: 12px;\n }\n .lp360-gauge-column-sub {\n font-size: 10px;\n }\n .lp360-gauge-column-chart {\n max-width: 165px;\n }\n}\n.insight-box--mentor {\n background: #f6f3ff;\n border-color: #e3dcfb;\n}\n.insight-box--mentor .insight-title {\n color: #8B5CF6;\n}\n.insight-box--mentor .insight-icon {\n background: #8B5CF6;\n box-shadow: 0 4px 10px rgba(139,92,246,0.25);\n}\n\n\/* ======================================================================\n PAPER NAVIGATION TABS \u2013 for Strength Map & Mind Map\n ====================================================================== *\/\n.lp360-paper-nav {\n display: flex;\n gap: var(--lp-space-3);\n flex-wrap: wrap;\n margin: 0 0 var(--lp-space-4) 0;\n}\n.lp360-paper-nav-btn {\n padding: 8px 20px;\n border-radius: 999px;\n border: 2px solid var(--lp-border-subtle);\n background: #fff;\n font-weight: 700;\n font-size: 13px;\n color: var(--lp-text-gray);\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: 'Inter', sans-serif;\n box-shadow: 0 2px 6px rgba(0,0,0,0.02);\n}\n.lp360-paper-nav-btn:hover {\n border-color: var(--lp-brand-light);\n color: var(--lp-brand-light);\n transform: translateY(-1px);\n}\n.lp360-paper-nav-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 12px rgba(232,93,58,0.3);\n}\n<\/style>\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\">CMA <span>Launchpad 360<\/span><\/h1>\n <\/header>\n\n <!-- TABS -->\n <nav class=\"lp360-tabs\" role=\"tablist\" aria-label=\"Launchpad 360 sections\">\n <button class=\"lp360-tab active\" data-tab=\"basicinfo\" role=\"tab\" aria-selected=\"true\">\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\" data-tab=\"tracker\" role=\"tab\" aria-selected=\"false\">\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\" data-tab=\"strengthmap\" role=\"tab\" aria-selected=\"false\">\n <svg viewBox=\"0 0 24 24\" class=\"lp360-tab-icon\"><path d=\"M12 5v14M5 12h14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><\/path><\/svg>\n Strength Map\n <\/button>\n <button class=\"lp360-tab\" data-tab=\"timetracker\" role=\"tab\" aria-selected=\"false\">\n <svg viewBox=\"0 0 24 24\" class=\"lp360-tab-icon\"><path d=\"M5 19V9M12 19V5M19 19v-7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><\/path><\/svg>\n Time Tracker\n <\/button>\n <button class=\"lp360-tab\" data-tab=\"prediction\" role=\"tab\" aria-selected=\"false\">\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 Prediction\n <\/button>\n <button class=\"lp360-tab\" data-tab=\"answerkey\" role=\"tab\" aria-selected=\"false\">\n <svg viewBox=\"0 0 24 24\" class=\"lp360-tab-icon\"><path d=\"M4 6h16M4 12h10M4 18h6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><\/path><\/svg>\n Answer Key\n <\/button>\n <\/nav>\n\n <!-- ================================================================\n PANEL: BASIC INFO\n ================================================================ -->\n <section class=\"lp360-tab-panel active\" id=\"lp360-panel-basicinfo\">\n\n <!-- ========== BASIC INFO CARD ========== -->\n <div class=\"lp360-section-card\">\n <div class=\"lp360-tracker-header\">\n <h3 class=\"lp360-tracker-title\">Basic <span>Info<\/span><\/h3>\n <\/div>\n\n <!-- Hero -->\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>\n <linearGradient id=\"lp360GaugeGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#FFC542\"><\/stop>\n <stop offset=\"100%\" stop-color=\"#FF7A3D\"><\/stop>\n <\/linearGradient>\n <\/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)\"><\/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\">100<\/span><\/small>\n <\/div>\n <div class=\"lp360-gauge-minibar\">\n <div class=\"lp360-gauge-minibar-fill\" id=\"lp360-gauge-minibar-fill\"><\/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\">0<\/div>\n <div class=\"lp360-hero-metric-footer\"> <\/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 class=\"lp360-hero-metric-footer\">Questions attempted<\/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\"><\/span><\/div>\n <span class=\"lp360-mini-rule\"><\/span>\n <div class=\"lp360-time-card-badge\" id=\"lp360-max-tag\">Q0<\/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\"><\/span><\/div>\n <span class=\"lp360-mini-rule\"><\/span>\n <div class=\"lp360-time-card-badge\" id=\"lp360-min-tag\">Q0<\/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\"><\/span><\/div>\n <span class=\"lp360-mini-rule\"><\/span>\n <\/div>\n <\/div>\n\n <!-- Breakdown -->\n <div class=\"lp360-breakdown-unified\">\n <!-- Correct -->\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 \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 <!-- Incorrect -->\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 \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 <!-- Unattempted -->\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 \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 <\/div>\n <!-- \/Basic Info card -->\n\n <div class=\"lp360-section-divider--strong\"><\/div>\n\n <!-- ========== DECISION MARKER CARD ========== -->\n <div class=\"lp360-section-card\">\n <div class=\"lp360-tracker-header\">\n <h3 class=\"lp360-tracker-title\">Decision <span>Marker<\/span><\/h3>\n <\/div>\n <div class=\"lp360-section-description\">\n <p>The Decision Marker shows how your test progressed over time by tracking every answer you submitted during the Full length Test. It records when each question was answered and whether it was correct or incorrect at that moment. This helps you understand your solving pace, identify periods of strong or weak performance, and observe how your decision-making changed throughout the test.<\/p>\n <\/div>\n\n <div class=\"lp360-dm-table-scroll\" id=\"lp360-dm-table-scroll\">\n <table class=\"lp360-dm-table\" id=\"lp360-dm-table\">\n <thead>\n <tr id=\"lp360-dm-thead-row\">\n <th class=\"lp360-dm-row-head-col\">Categories count \/ Time intervals in minutes<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"lp360-dm-tbody\"><\/tbody>\n <\/table>\n <\/div>\n\n <div class=\"lp360-dm-summary\" id=\"lp360-dm-summary\"><\/div>\n<p class=\"lp360-dm-inference\" id=\"lp360-dm-inference\" style=\"display:none;\"><\/p>\n<\/div>\n\n\n <\/section>\n\n <!-- ================================================================\n PANEL: TRACKER\n ================================================================ -->\n <section class=\"lp360-tab-panel\" id=\"lp360-panel-tracker\">\n\n <!-- ========== TRACKER CARD ========== -->\n <div class=\"lp360-section-card\">\n <div class=\"lp360-tracker-header\">\n <h3 class=\"lp360-tracker-title\">Tracker<\/h3>\n <\/div>\n\n <!-- Score Tracker -->\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 shows how your score changes as you progress through the Full Length Test. It helps you understand whether your performance improved, remained consistent, or declined with each attempt. Every correct or incorrect answer updates your cumulative score, allowing you to identify the stages where you performed best or faced difficulties. An upward trend indicates consistent performance, while flat or downward trends suggest periods of lower accuracy or negative marking.<\/p>\n <\/div>\n <div class=\"lp360-tracker-chart-wrap\">\n <canvas id=\"lp360-tracker-canvas\"><\/canvas>\n <\/div>\n <\/div>\n\n <div class=\"lp360-section-divider\"><\/div>\n\n <!-- Accuracy Tracker -->\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 shows how your answering accuracy changed throughout the Full Length Test by plotting your accuracy against time. It helps you understand whether your accuracy remained consistent, improved, or declined during different stages of the test, providing insights into how effectively you balanced speed and precision. Click on any point in the graph to view your exact accuracy at that specific time and analyse your performance during that stage of the assessment.<\/p>\n <\/div>\n <div class=\"lp360-tracker-chart-wrap\">\n <canvas id=\"lp360-accuracy-canvas\"><\/canvas>\n <\/div>\n <\/div>\n\n\n <\/div>\n <!-- \/Tracker card -->\n\n <\/section>\n\n <!-- ================================================================\n PANEL: STRENGTH MAP\n ================================================================ -->\n <section class=\"lp360-tab-panel\" id=\"lp360-panel-strengthmap\">\n\n <!-- ========== STRENGTH MAP CARD (backend key: strength_map) ========== -->\n <div class=\"lp360-ncert-wrapper-card\">\n <div class=\"lp360-tracker-header\">\n <h3 class=\"lp360-tracker-title\">Strength <span>Map<\/span><\/h3>\n <\/div>\n\n <!-- Paper navigation for full-length test -->\n <div class=\"lp360-paper-nav\" id=\"lp360-strength-nav\" style=\"display:none;\">\n <button class=\"lp360-paper-nav-btn active\" data-paper=\"1\">Paper 1<\/button>\n <button class=\"lp360-paper-nav-btn\" data-paper=\"2\">Paper 2<\/button>\n <\/div>\n\n\n <div class=\"lp360-ncert-cards-container\">\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%\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <circle cx=\"12\" cy=\"12\" r=\"12\" fill=\"#2196F3\"><\/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\">Poor Scorer<\/span>\n <p class=\"lp360-ncert-badge-desc\" id=\"lp360-ncert-badge-desc\">Needs a complete restart and strong focus on learning the core topics from scratch.<\/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\">\n <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>\n <\/span>\n <h4>Description<\/h4>\n <\/div>\n <p class=\"lp360-ncert-badge-desc-right\"> The Strength Maps analyse your understanding of every topic covered in the test. It combines your accuracy and marks scored to measure how strong your conceptual knowledge is in each topic. This helps you quickly identify your strongest areas and the topics that need more revision before the actual exam. <\/p>\n <\/div>\n <\/div>\n\n <div class=\"lp360-ncert-band-card\">\n <div class=\"lp360-ncert-band-head\">\n <span class=\"lp360-round-icon lp360-round-icon--peach\">\n <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>\n <\/span>\n <h3>Topic Strength Band<\/h3>\n <\/div>\n <div class=\"lp360-band-wrap\" id=\"lp360-band-wrap\" style=\"display:none;\">\n <div class=\"lp360-band-tsi-badge\" id=\"lp360-band-tsi-badge\" style=\"left:89%;\">TSI: <span id=\"lp360-tsi-value\">89<\/span><\/div>\n <div class=\"lp360-band-track\">\n <div class=\"lp360-band-marker\" id=\"lp360-band-marker\" style=\"left:89%;\"><\/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:flex;\">\n <svg viewBox=\"0 0 24 24\"><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><\/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 <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\">\n <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>\n <\/span>\n <h3>Topic Inference<\/h3>\n <\/div>\n <p id=\"lp360-topic-inference-text\">You moved through analytical questions too quickly, so the deeper reasoning required was likely missed. These questions need interpretation, comparison, and careful elimination, not instant answering.<\/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 <\/div>\n <\/div>\n\n <div class=\"lp360-section-divider--strong\"><\/div>\n\n<!-- ========== MIND MAP CARD ========== -->\n<div class=\"lp360-section-card lp360-mindmap-card\">\n <div class=\"lp360-tracker-header\">\n <h3 class=\"lp360-tracker-title\">Mind <span>Map<\/span><\/h3>\n <\/div>\n <!-- \u2705 SOURCE TAG \u2013 now directly below the heading -->\n <div class=\"lp360-mindmap-source-tag\" id=\"lp360-mindmap-source\"><\/div>\n <!-- Paper navigation for full-length test -->\n <div class=\"lp360-paper-nav\" id=\"lp360-mindmap-nav\" style=\"display:none;\">\n <button class=\"lp360-paper-nav-btn active\" data-paper=\"1\">Paper 1<\/button>\n <button class=\"lp360-paper-nav-btn\" data-paper=\"2\">Paper 2<\/button>\n <\/div>\n<!-- NEW DESCRIPTION: inserted below the title -->\n<div class=\"lp360-mindmap-description\">\n <p>The Mind Mapping module identifies the topics that require the most attention based on your performance in the Full Length Test. Instead of showing individual questions, it groups related questions into topic categories and highlights where additional learning is needed. This helps you focus your study time on the areas that will have the greatest impact on your performance.<\/p>\n<\/div>\n<!-- Source-name tag: populated from backend's mindmap_source_name field (CMA-only field) -->\n<div class=\"lp360-mindmap-source-tag\" id=\"lp360-mindmap-source\"><\/div>\n\n <div class=\"lp360-mindmap-diagram\" id=\"lp360-mindmap-diagram\">\n <svg class=\"lp360-mindmap-svg\" id=\"lp360-mindmap-svg\"><\/svg>\n <div class=\"lp360-mm-col lp360-mm-col--topics\" id=\"lp360-mm-detailed-list\"><\/div>\n <div class=\"lp360-mm-col lp360-mm-col--node\">\n <div class=\"lp360-mm-node lp360-mm-node--orange\" id=\"lp360-mm-detailed-node\">\n <span class=\"lp360-mm-dot lp360-mm-dot--orange\"><\/span>Detailed study\n <\/div>\n <\/div>\n <div class=\"lp360-mm-col lp360-mm-col--center\">\n <div class=\"lp360-mm-node lp360-mm-node--center\" id=\"lp360-mm-center-node\">Mind Map<\/div>\n <\/div>\n <div class=\"lp360-mm-col lp360-mm-col--node\">\n <div class=\"lp360-mm-node lp360-mm-node--green\" id=\"lp360-mm-basic-node\">\n Basic study<span class=\"lp360-mm-dot lp360-mm-dot--green\"><\/span>\n <\/div>\n <\/div>\n <div class=\"lp360-mm-col lp360-mm-col--topics\" id=\"lp360-mm-basic-list\"><\/div>\n <\/div>\n\n <div class=\"lp360-mindmap-mobile\" id=\"lp360-mindmap-mobile\">\n <div class=\"lp360-mm-mobile-group\">\n <div class=\"lp360-mm-mobile-heading lp360-mm-mobile-heading--orange\">Detailed study<\/div>\n <div class=\"lp360-mm-mobile-tags\" id=\"lp360-mm-mobile-detailed\"><\/div>\n <\/div>\n <div class=\"lp360-mm-mobile-connector\"><\/div>\n <div class=\"lp360-mm-mobile-group lp360-mm-mobile-group--center\">\n <div class=\"lp360-mm-node lp360-mm-node--center\">Mind Map<\/div>\n <\/div>\n <div class=\"lp360-mm-mobile-connector\"><\/div>\n <div class=\"lp360-mm-mobile-group\">\n <div class=\"lp360-mm-mobile-heading lp360-mm-mobile-heading--green\">Basic study<\/div>\n <div class=\"lp360-mm-mobile-tags\" id=\"lp360-mm-mobile-basic\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"lp360-mindmap-summary\">\n <div class=\"lp360-mm-summary-card lp360-mm-summary-card--orange\">\n <span class=\"lp360-mm-summary-icon\">\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-text\">\n <span class=\"lp360-mm-summary-label\">Detailed study<\/span>\n <span class=\"lp360-mm-summary-sub\">needed topics count<\/span>\n <\/div>\n <span class=\"lp360-mm-summary-dots\"><\/span>\n <span class=\"lp360-mm-summary-value\" id=\"lp360-mm-detailed-count\">0<\/span>\n <\/div>\n <div class=\"lp360-mm-summary-card lp360-mm-summary-card--green\">\n <span class=\"lp360-mm-summary-icon\">\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-text\">\n <span class=\"lp360-mm-summary-label\">Basic study<\/span>\n <span class=\"lp360-mm-summary-sub\">needed topics count<\/span>\n <\/div>\n <span class=\"lp360-mm-summary-dots\"><\/span>\n <span class=\"lp360-mm-summary-value\" id=\"lp360-mm-basic-count\">0<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <\/section>\n\n <!-- ================================================================\n PANEL: TIME TRACKER\n ================================================================ -->\n <section class=\"lp360-tab-panel\" id=\"lp360-panel-timetracker\">\n\n <div class=\"lp360-section-card\">\n <!-- Time Tracker -->\n <div class=\"lp360-time-tracker-card\">\n <div class=\"lp360-tracker-header\">\n <h3 class=\"lp360-tracker-title\">Time <span>Tracker<\/span><\/h3>\n <\/div>\n <div class=\"lp360-time-tracker-layout\">\n <div class=\"lp360-time-tracker-left\">\n <div class=\"lp360-section-description\">\n <p>Compare your Attempt, Correct, and Time Used across the four solving speed intervals (0\u201330 sec, 30\u201345 sec, 45\u201360 sec, and >60 sec) to identify your most effective answering pace. The system highlights the time interval with your highest attempt rate and the interval with your highest correct answer rate, helping you understand the speed at which you perform best and optimise your exam strategy.<\/p>\n <\/div>\n <div class=\"lp360-time-tracker-inferences\">\n <div class=\"lp360-inference-block\">\n <div class=\"lp360-inference-icon orange\">\n <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\"><\/path><\/svg>\n <\/div>\n <div>\n <div class=\"lp360-inference-title\">INFERENCE 01<\/div>\n <div class=\"lp360-inference-text\" id=\"lp360-time-inf1\">Highest attempt activity was observed during the 0-30 time interval, while the lowest attempt activity occurred during the 30-60 time interval.<\/div>\n <\/div>\n <\/div>\n <div class=\"lp360-inference-block\">\n <div class=\"lp360-inference-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-inference-title\">INFERENCE 02<\/div>\n <div class=\"lp360-inference-text\" id=\"lp360-time-inf2\">The highest number of correct answers was recorded during the 0-30 secs time interval, while the lowest number of correct answers was recorded during the 30-60 time interval.<\/div>\n <\/div>\n <\/div>\n <\/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\">< 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+\">> 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\">\n <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>\n <\/span>\n <div>\n <div class=\"lp360-gauge-column-title\">ATTEMPT RATE<\/div>\n <div class=\"lp360-gauge-column-sub\">Total attempts in this time range<\/div>\n <\/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=\"100\" data-color=\"#FF7A3D\" data-label=\"ATTEMPT RATE\"><\/canvas>\n <\/div>\n <div class=\"lp360-gauge-column-value\">0<\/div>\n <\/div>\n\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\">\n <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>\n <\/span>\n <div>\n <div class=\"lp360-gauge-column-title\">CORRECT ANSWER RATE<\/div>\n <div class=\"lp360-gauge-column-sub\">Correct count in preferred time<\/div>\n <\/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=\"100\" data-color=\"#22C55E\" data-label=\"CORRECT ANSWER\"><\/canvas>\n <\/div>\n <div class=\"lp360-gauge-column-value\">0<\/div>\n <\/div>\n\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\">\n <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>\n <\/span>\n <div>\n <div class=\"lp360-gauge-column-title\">TIME USED<\/div>\n <div class=\"lp360-gauge-column-sub\">Time used for answering the questions<\/div>\n <\/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=\"30\" data-color=\"#F59E0B\" data-label=\"TIME USED\" data-unit=\"MIN\"><\/canvas>\n <\/div>\n <div class=\"lp360-gauge-column-value\">0 <span>MIN<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/section>\n\n <!-- ================================================================\n PANEL: PREDICTION\n ================================================================ -->\n <section class=\"lp360-tab-panel\" id=\"lp360-panel-prediction\">\n\n <!-- ========== PREDICTION CARD ========== -->\n <div class=\"lp360-tracker-header\">\n <h3 class=\"lp360-tracker-title\">Prediction<\/h3>\n <\/div>\n\n <div class=\"header-bar\">\n <div>\n <h3 class=\"lp360-tracker-title\">CMA Foundation <span>Predictions<\/span><\/h3>\n <\/div>\n <\/div>\n\n <div class=\"pred-grid\">\n <!-- LEFT: question types row + Time Analytics + Mentor Tip -->\n <div class=\"left-col\">\n <div class=\"ideal-time-card\">\n <div class=\"heading-pill\"><span class=\"spark\">\u2726<\/span> Ideal Time prediction <span class=\"spark\">\u2726<\/span><\/div>\n <div class=\"lp360-section-description\">\n <p>Use these recommended times as your question-solving strategy for future examinations. Aim to solve Basic Concept Questions within their suggested time, spend a balanced amount of time on Multiple Concept Involving Questions, and reserve additional time for Analytical & Conceptual Questions. Following these recommendations can help you manage your exam time more effectively and maximise your overall score.<\/p>\n <\/div>\n <div class=\"qtype-row\">\n <div class=\"qtype-box qtype-box--basic\">\n <div class=\"qtype-sphere\" id=\"lp360-pred-time-basic\"><span class=\"num\">45<\/span><small>SEC<\/small><\/div>\n <div class=\"qtype-label\">Basic Concept<\/div>\n <p class=\"qtype-desc\">Simple, low-effort questions.<\/p>\n <\/div>\n <div class=\"qtype-box qtype-box--multi\">\n <div class=\"qtype-sphere\" id=\"lp360-pred-time-multi\"><span class=\"num\">1<\/span><small>MIN<\/small> <span class=\"num\">20<\/span><small>SEC<\/small><\/div>\n <div class=\"qtype-label\">Multiple Concept<\/div>\n <p class=\"qtype-desc\">Tougher, needs concept linking.<\/p>\n <\/div>\n <div class=\"qtype-box qtype-box--analytical\">\n <div class=\"qtype-sphere\" id=\"lp360-pred-time-analytical\"><span class=\"num\">2<\/span><small>MIN<\/small> <span class=\"num\">30<\/span><small>SEC<\/small><\/div>\n <div class=\"qtype-label\">Analytical Concept<\/div>\n <p class=\"qtype-desc\">High effort, complex reasoning.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- RIGHT: score circle + quote + Score Analytics -->\n <div class=\"right-col\">\n <div class=\"heading-pill\"><span class=\"spark\">\u2726<\/span> CMA Foundation Score <span class=\"spark\">\u2726<\/span><\/div>\n <div class=\"score-ring\">\n <div class=\"score-ring-inner\">\n <span class=\"score-obtained\" id=\"lp360-pred-score-obtained\">84<\/span>\n <span class=\"score-divider\">\/<\/span>\n <span class=\"score-total\" id=\"lp360-pred-score-total\">100<\/span>\n <\/div>\n <\/div>\n <p class=\"score-quote\">This score is a possible prediction of your CMA Foundation mark based on your current performance in the test.<\/p>\n\n <div class=\"insight-box insight-box--score\">\n <div class=\"insight-head\">\n <div class=\"insight-title\">Score Analytics<\/div>\n <span class=\"insight-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 20V10M12 20V4M20 20v-7\" stroke-linecap=\"round\"><\/path><\/svg><\/span>\n <\/div>\n <p class=\"insight-text\" id=\"lp360-pred-score-inference\">Strong knowledge and execution \u2014 your high score indicates strong conceptual understanding, good accuracy, and effective time management during the test.<\/p>\n <\/div>\n <div class=\"insight-box insight-box--mentor\" id=\"lp360-pred-mentor-tip-wrap\" style=\"display:none;\">\n <div class=\"insight-head\">\n <div class=\"insight-title\">Mentor Tip<\/div>\n <span class=\"insight-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><path d=\"M12 16v-4M12 8h.01\" stroke-linecap=\"round\"><\/path><\/svg><\/span>\n <\/div>\n <p class=\"insight-text\" id=\"lp360-pred-mentor-tip\"><\/p>\n<\/div>\n <div class=\"prediction-warning\">\n <span class=\"prediction-warning-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\">\n <path d=\"M12 9v4\" stroke-linecap=\"round\"><\/path>\n <path d=\"M12 17h.01\" stroke-linecap=\"round\"><\/path>\n <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\" stroke-linejoin=\"round\"><\/path>\n <\/svg>\n <\/span>\n <p class=\"prediction-warning-text\">AI Prediction Advisory: Your predicted score is generated using LaunchPad 360\u00b0 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\n <!-- Prediction Confidence Block -->\n <div class=\"prediction-confidence\">\n <div class=\"prediction-confidence-label\">Prediction Confidence<\/div>\n <div class=\"prediction-confidence-percentage\" id=\"icma-pred-confidence\">94%<\/div>\n <div class=\"prediction-confidence-level\" id=\"icma-pred-confidence-level\">High<\/div>\n <\/div>\n<\/div>\n <\/div>\n <\/div>\n\n \n <!-- \/Prediction card -->\n\n <\/section>\n\n <!-- ================================================================\n PANEL: ANSWER KEY\n ================================================================ -->\n <section class=\"lp360-tab-panel\" id=\"lp360-panel-answerkey\">\n <div class=\"lp360-section-card\">\n <div class=\"lp360-tracker-header\">\n <h3 class=\"lp360-tracker-title\">Answer <span>Key<\/span><\/h3>\n <\/div>\n <div class=\"lp360-answer-key-card\">\n <div class=\"lp360-answer-key-placeholder\">\n [Answer key content goes here]\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/div><!-- \/.lp360-shell -->\n<\/div><!-- \/#lp360-root -->\n\n<!-- ==============================================================\nJAVASCRIPT \u2014 all && replaced with nested if, logic untouched (plus auto-scroll)\nCMA Paper VERSION: reads icma_prediction + strength_map\/your_strength_report\n============================================================== -->\n<script>\n(function() {\n \"use strict\";\n\n \/\/ ---- Fix 7: Universal time formatting ----\n function formatTimeDisplay(seconds) {\n var s = Math.round(Number(seconds) || 0);\n if (s < 0) s = 0;\n if (s < 60) {\n return s + ' sec';\n }\n var m = Math.floor(s \/ 60);\n var rem = s % 60;\n if (rem === 0) {\n return m + ' min';\n }\n return m + ' min ' + rem + ' sec';\n }\n\n function formatPredictionTimeHtml(totalSeconds) {\n var s = Math.round(Number(totalSeconds) || 0);\n if (s < 0) s = 0;\n if (s < 60) return '<span class=\"num\">' + s + '<\/span><small>SEC<\/small>';\n var m = Math.floor(s \/ 60);\n var rem = s % 60;\n if (rem === 0) return '<span class=\"num\">' + m + '<\/span><small>MIN<\/small>';\n return '<span class=\"num\">' + m + '<\/span><small>MIN<\/small> <span class=\"num\">' + rem + '<\/span><small>SEC<\/small>';\n }\n \/\/ ---- Accuracy Tracker domain xMax (used for hover) ----\n var __accuracyDomainXMax = 2;\n\n \/\/ ---- ROW_THEME & ICONS ----\n var ROW_THEME = {\n correct: { color: 'green', icon: 'check' },\n incorrect: { color: 'red', icon: 'cross' },\n \n };\n\n var ICONS = {\n check: '<path d=\"M20 6L9 17l-5-5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>',\n cross: '<path d=\"M18 6L6 18M6 6l12 12\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>',\n eye: '<path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\"\/>',\n help: '<path d=\"M12 17h.01M9.5 9a2.5 2.5 0 015 0c0 1.5-2.5 2-2.5 3.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>',\n skip: '<path d=\"M5 4l14 8-14 8V4z\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>',\nattempt: '<circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\"\/><path d=\"M12 4v16M4 12h16\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\"\/>'\n };\n\n function iconSvg(name) {\n return '<svg viewBox=\"0 0 24 24\">' + (ICONS[name] || ICONS.check) + '<\/svg>';\n }\n\n \/\/ ---- BADGE ICONS (full map preserved) ----\n function getBadgeIcon(badgeName) {\n var TIERS = {\n red: { a: '#fca5a5', b: '#dc2626', c: '#7f1d1d', glow: 'rgba(220,38,38,0.55)' },\n gray: { a: '#cbd5e1', b: '#6b7280', c: '#1f2937', glow: 'rgba(107,114,128,0.5)' },\n orange: { a: '#fdba74', b: '#f97316', c: '#9a3412', glow: 'rgba(249,115,22,0.55)' },\n gold: { a: '#fde047', b: '#ca8a04', c: '#854d0e', glow: 'rgba(202,138,4,0.55)' },\n green: { a: '#86efac', b: '#16a34a', c: '#14532d', glow: 'rgba(22,163,74,0.55)' },\n amber: { a: '#fde68a', b: '#d97706', c: '#78350f', glow: 'rgba(217,119,6,0.6)' }\n };\n var iconMap = {\n \"Poor Scorer\": { tier: 'red', svg: '<path d=\"M12 2v14M7 10l5 5 5-5\" stroke=\"#fff\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M5 20h14\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>' },\n \"Bare Minimum\": { tier: 'gray', svg: '<path d=\"M5 12l5 5L20 7\" stroke=\"#fff\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>' },\n \"weak performer\": { tier: 'orange', svg: '<rect x=\"3\" y=\"16\" width=\"4\" height=\"5\" rx=\"1\" fill=\"#fff\"\/><rect x=\"10\" y=\"14\" width=\"4\" height=\"7\" rx=\"1\" fill=\"#fff\" opacity=\"0.8\"\/><rect x=\"17\" y=\"17\" width=\"4\" height=\"4\" rx=\"1\" fill=\"#fff\" opacity=\"0.6\"\/>' },\n \"Weak understander\": { tier: 'orange', svg: '<path d=\"M4 6a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6z\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M12 10v3M12 16h.01\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>' },\n \"Unstable performer\": { tier: 'orange', svg: '<path d=\"M2 14l4-7 5 9 4-12 5 8 2-4\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>' },\n \"Need intensive practice\": { tier: 'orange', svg: '<circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\"\/><path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M5.5 5.5l2 2M16.5 16.5l2 2M5.5 18.5l2-2M16.5 7.5l2-2\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>' },\n \"Moderate performer\": { tier: 'gold', svg: '<path d=\"M3 15a9 9 0 0118 0\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><path d=\"M12 15l5-6\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><circle cx=\"12\" cy=\"15\" r=\"2\" fill=\"#fff\"\/>' },\n \"Average Scorer\": { tier: 'gold', svg: '<path d=\"M12 2l2.5 5.5 6 .5-4.5 4 1 6-5-3-5 3 1-6-4.5-4 6-.5L12 2z\" fill=\"#fff\" opacity=\"0.5\" stroke=\"#fff\" stroke-width=\"1.2\" stroke-linejoin=\"round\"\/>' },\n \"Concept Builder\": { tier: 'gold', svg: '<path d=\"M6 9h4V7a2 2 0 014 0v2h4a1 1 0 011 1v4h-3a2 2 0 100 4h3v4a1 1 0 01-1 1h-4v-3a2 2 0 10-4 0v3H6a1 1 0 01-1-1v-4h3a2 2 0 100-4H5v-4a1 1 0 011-1z\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.2\" stroke-linejoin=\"round\"\/>' },\n \"Decent Effort\": { tier: 'gold', svg: '<path d=\"M8 12v9H5v-9h3zm0 0l3-7a1.5 1.5 0 012.7 1l-1 4H18a2 2 0 012 2.5l-2 5.5a2 2 0 01-2 1.5H11a3 3 0 01-3-3V12z\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.2\" stroke-linejoin=\"round\"\/>' },\n \"Developing candidate\": { tier: 'green', svg: '<path d=\"M12 20v-8\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><path d=\"M12 12c0-5 4-7 8-7 0 5-4 7-8 7z\" fill=\"#fff\" opacity=\"0.8\" stroke=\"#fff\" stroke-width=\"1\" stroke-linejoin=\"round\"\/><path d=\"M12 12c0-4-3-6-7-6 0 4 3 6 7 6z\" fill=\"#fff\" opacity=\"0.5\" stroke=\"#fff\" stroke-width=\"1\" stroke-linejoin=\"round\"\/>' },\n \"Gradual improver\": { tier: 'green', svg: '<path d=\"M2 18h5v-3h5v-3h5v-3h5V6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M17 6h4v4\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>' },\n \"Right Track\": { tier: 'green', svg: '<path d=\"M12 2l8 4v7c0 5-4 8-8 10-4-2-8-5-8-10V6l8-4z\" fill=\"#fff\" opacity=\"0.15\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M8 12l3 3 5-6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>' },\n \"Strong Conceptual Understander\": { tier: 'green', svg: '<path d=\"M10 3a3 3 0 00-3 3 3 3 0 00-1.5 5.5A3 3 0 007 17a3 3 0 003 3V3z\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.2\" stroke-linejoin=\"round\"\/><path d=\"M14 3a3 3 0 013 3 3 3 0 011.5 5.5A3 3 0 0117 17a3 3 0 01-3 3V3z\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.2\" stroke-linejoin=\"round\"\/><path d=\"M12 9v2M11 13h2\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>' },\n \"High performer\": { tier: 'green', svg: '<path d=\"M12 2l2.5 5.5 6 .5-4.5 4 1 6-5-3-5 3 1-6-4.5-4 6-.5L12 2z\" fill=\"#fff\" stroke=\"#fff\" stroke-width=\"1\" stroke-linejoin=\"round\"\/><path d=\"M12 2v3M17 5l-2 2M7 5l2 2\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>' },\n \"Top Performer\": { tier: 'amber', svg: '<path d=\"M5 5h14v4a6 6 0 01-14 0V5z\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M5 6H3.5A1.5 1.5 0 002 7.5 5.5 5.5 0 006 12M19 6h1.5A1.5 1.5 0 0122 7.5 5.5 5.5 0 0118 12\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/><path d=\"M12 12v5M8 18h8M9 15h6v3a2 2 0 01-2 2h-2a2 2 0 01-2-2v-3z\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.2\" stroke-linejoin=\"round\"\/>' },\n \"Stronger performer\": { tier: 'amber', svg: '<path d=\"M12 2l8 4v7c0 5-4 8-8 10-4-2-8-5-8-10V6l8-4z\" fill=\"#fff\" opacity=\"0.15\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/><path d=\"M8 11l3 3 5-6\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>' },\n \"Except solver\": { tier: 'amber', svg: '<circle cx=\"12\" cy=\"12\" r=\"8\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\"\/><circle cx=\"12\" cy=\"12\" r=\"4.5\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.2\"\/><circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"#fff\"\/><path d=\"M16.5 4L20 2.5l-1.5 4.5-4 1.5z\" fill=\"#fff\" opacity=\"0.7\" stroke=\"#fff\" stroke-width=\"1\" stroke-linejoin=\"round\"\/><path d=\"M18 5.5l-4.5 4.5\" stroke=\"#fff\" stroke-width=\"1.2\" stroke-linecap=\"round\"\/>' },\n \"National level potential\": { tier: 'amber', svg: '<path d=\"M4 2v20\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><path d=\"M4 3h15l-4 5 4 5H4\" fill=\"#fff\" opacity=\"0.8\" stroke=\"#fff\" stroke-width=\"1.2\" stroke-linejoin=\"round\"\/>' },\n \"High merit performer\": { tier: 'amber', svg: '<circle cx=\"12\" cy=\"9\" r=\"6\" fill=\"#fff\" opacity=\"0.15\" stroke=\"#fff\" stroke-width=\"1.5\"\/><path d=\"M8 14L6 21l6-3 6 3-2-7\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.2\" stroke-linejoin=\"round\"\/><path d=\"M9.5 9l1.5 1.5L15 7\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>' },\n \"Exceptional performer\": { tier: 'amber', svg: '<path d=\"M3 17L1.5 8 8 12l4-7 4 7 6.5-4L21 17H3z\" fill=\"#fff\" opacity=\"0.9\" stroke=\"#fff\" stroke-width=\"1\" stroke-linejoin=\"round\"\/><path d=\"M3 20h18\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>' }\n };\n var fallback = {\n tier: 'gray',\n svg: '<circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\"\/><path d=\"M12 8v4l3 2\" fill=\"none\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>'\n };\n var matched = null;\n if (iconMap[badgeName]) {\n matched = iconMap[badgeName];\n }\n if (!matched) {\n matched = fallback;\n }\n var tierColors = TIERS[matched.tier];\n if (!tierColors) {\n tierColors = TIERS.gray;\n }\n return {\n svg: matched.svg,\n gradA: tierColors.a,\n gradB: tierColors.b,\n gradC: tierColors.c,\n glow: tierColors.glow\n };\n }\n\n \/\/ ---- Render functions ----\n\n function renderBasicInfo(data) {\n if (!data) { return; }\n var el = document.getElementById.bind(document);\n var obtained = 0;\n var total = 100;\n if (data.score) {\n obtained = Number(data.score.obtained) || 0;\n total = Number(data.score.total) || 100;\n }\n var pct = total > 0 ? Math.max(0, Math.min(1, obtained \/ total)) : 0;\n\n el('lp360-score-obtained').textContent = obtained;\n el('lp360-score-total').textContent = total;\n\n var circumference = 691;\n var progress = document.getElementById('lp360-gauge-progress');\n if (progress) {\n progress.style.strokeDasharray = circumference;\n progress.style.strokeDashoffset = circumference;\n requestAnimationFrame(function() {\n progress.style.strokeDashoffset = circumference - (circumference * pct);\n });\n }\n var minibar = el('lp360-gauge-minibar-fill');\n if (minibar) {\n requestAnimationFrame(function() {\n minibar.style.width = (pct * 100) + '%';\n });\n }\n\n el('lp360-time-used').textContent = formatTimeDisplay(data.timeUsedSeconds);\n el('lp360-total-attempt').textContent = (data.totalAttempts != null) ? data.totalAttempts : 0;\n\n var tpq = data.timePerQuestion || {};\n if (tpq.max) {\n el('lp360-max-time').textContent = formatTimeDisplay(tpq.max.value);\n var maxTagEl = el('lp360-max-tag');\n maxTagEl.textContent = tpq.max.questionTag || '';\n maxTagEl.setAttribute('data-qnum', (tpq.max.questionTag || '').replace('Q', ''));\n }\n if (tpq.min) {\n el('lp360-min-time').textContent = formatTimeDisplay(tpq.min.value);\n var minTagEl = el('lp360-min-tag');\n minTagEl.textContent = tpq.min.questionTag || '';\n minTagEl.setAttribute('data-qnum', (tpq.min.questionTag || '').replace('Q', ''));\n }\n if (tpq.avg) {\n el('lp360-avg-time').textContent = formatTimeDisplay(tpq.avg.value);\n }\n\n var b = data.breakdown || {};\n if (b.correct) {\n el('lp360-correct-total').textContent = b.correct.total || 0;\n el('lp360-correct-single').textContent = b.correct.single || 0;\n el('lp360-correct-multiple').textContent = b.correct.multiple || 0;\n \n el('lp360-correct-skipped').textContent = b.correct.skipped || 0;\n }\n if (b.incorrect) {\n el('lp360-incorrect-total').textContent = b.incorrect.total || 0;\n el('lp360-incorrect-single').textContent = b.incorrect.single || 0;\n el('lp360-incorrect-multiple').textContent = b.incorrect.multiple || 0;\n \n el('lp360-incorrect-skipped').textContent = b.incorrect.skipped || 0;\n }\n if (b.unattempted) {\n el('lp360-unattempted-total').textContent = b.unattempted.total || 0;\n el('lp360-unattempted-skipped').textContent = b.unattempted.skipped || 0;\n \n el('lp360-unattempted-notviewed').textContent = b.unattempted.notViewed || 0;\n }\n }\nfunction renderDecisionMarker(data) {\n if (!data) { return; }\n var theadRow = document.getElementById('lp360-dm-thead-row');\n var tbody = document.getElementById('lp360-dm-tbody');\n var summaryWrap = document.getElementById('lp360-dm-summary');\n var inferenceEl = document.getElementById('lp360-dm-inference');\n if (!theadRow) { return; }\n if (!tbody) { return; }\n if (!summaryWrap) { return; }\n \/\/ Build header: first column label + intervals\n var intervals = data.timeIntervals || [];\n var headerHtml = '<th class=\"lp360-dm-row-head-col\"> Categories count \/ Time intervals in minutes <\/th>';\n for (var i = 0; i < intervals.length; i++) {\n headerHtml += '<th>' + intervals[i] + '<\/th>';\n }\n theadRow.innerHTML = headerHtml;\n \/\/ Table shows only Correct and Incorrect rows (Attempt lives in the totals strip below)\n var rowKeys = ['correct', 'incorrect'];\n var rowLabels = {\n 'attempt': 'Attempt',\n 'correct': 'Correct',\n 'incorrect': 'Incorrect'\n };\n var rowColors = {\n 'attempt': 'blue',\n 'correct': 'green',\n 'incorrect': 'red'\n };\n var rowIcons = {\n 'attempt': 'attempt',\n 'correct': 'check',\n 'incorrect': 'cross'\n };\n \/\/ Build table rows - each cell lists the question numbers for that interval\n var tbodyHtml = '';\n for (var r = 0; r < rowKeys.length; r++) {\n var key = rowKeys[r];\n var cells = [];\n if (data.cells) {\n cells = data.cells[key] || [];\n }\n var color = rowColors[key] || 'gray';\n var label = rowLabels[key] || key;\n var cellsHtml = '';\n for (var c = 0; c < intervals.length; c++) {\n var qList = [];\n if (c < cells.length) {\n qList = cells[c] || [];\n }\n var chipsHtml = '';\n for (var q = 0; q < qList.length; q++) {\n chipsHtml += '<span class=\"lp360-dm-chip lp360-dm-chip--' + color + '\" data-qnum=\"' + qList[q] + '\">Q' + qList[q] + '<\/span>';\n }\n cellsHtml += '<td><div class=\"lp360-dm-chip-cell\">' + chipsHtml + '<\/div><\/td>';\n }\n tbodyHtml += '<tr class=\"lp360-dm-row--' + color + '\">' +\n '<td><div class=\"lp360-dm-row-label\">' +\n '<span class=\"lp360-dm-row-icon lp360-dm-row-icon--' + color + '\">' +\n iconSvg(rowIcons[key]) + '<\/span>' +\n label +\n '<\/div><\/td>' + cellsHtml +\n '<\/tr>';\n }\n tbody.innerHTML = tbodyHtml;\n \/\/ Build summary cards (Total Attempt \/ Total Correct \/ Total Incorrect)\n var summary = data.summary || [];\n var summaryHtml = '';\n for (var s = 0; s < summary.length; s++) {\n var item = summary[s];\n var scolor = rowColors[item.key] || 'gray';\n summaryHtml += '<div class=\"lp360-dm-summary-card lp360-dm-summary-card--' + scolor + '\">' +\n '<span class=\"lp360-dm-summary-icon\">' + iconSvg(rowIcons[item.key]) + '<\/span>' +\n '<span class=\"lp360-dm-summary-value\">' + item.value + '<\/span>' +\n '<span class=\"lp360-dm-summary-label\">' + item.label + '<\/span>' +\n '<\/div>';\n }\n summaryWrap.innerHTML = summaryHtml;\n \/\/ \"No attempts\" message - only shown when the backend actually sends one\n if (inferenceEl) {\n if (data.inference) {\n inferenceEl.textContent = data.inference;\n inferenceEl.style.display = 'block';\n } else {\n inferenceEl.textContent = '';\n inferenceEl.style.display = 'none';\n }\n }\n \/\/ Scroll detection (unchanged)\n var scrollEl = document.getElementById('lp360-dm-table-scroll');\n if (scrollEl) {\n function checkScroll() {\n if (scrollEl.scrollWidth > scrollEl.clientWidth) {\n scrollEl.classList.add('is-scrollable');\n } else {\n scrollEl.classList.remove('is-scrollable');\n }\n }\n scrollEl.addEventListener('scroll', checkScroll);\n window.addEventListener('resize', checkScroll);\n setTimeout(checkScroll, 100);\n }\n}\n \n function renderNcertMapping(data) {\n if (!data) { return; }\n var el = document.getElementById.bind(document);\n var badgeName = '';\n var badgeDescription = '';\n if (data.badge) {\n badgeName = data.badge.achieved || '';\n badgeDescription = data.badge.description || '';\n el('lp360-ncert-badge-value').textContent = badgeName;\n el('lp360-ncert-badge-desc').textContent = badgeDescription;\n }\n var tsi = Number(data.tsi);\n var bandWrap = document.querySelector('#lp360-band-wrap');\n var poorEl = el('lp360-band-poor');\n if (!isFinite(tsi) || tsi < 1) {\n if (bandWrap) { bandWrap.style.display = 'none'; }\n if (poorEl) { poorEl.style.display = 'flex'; }\n } else {\n if (bandWrap) { bandWrap.style.display = 'block'; }\n if (poorEl) { poorEl.style.display = 'none'; }\n var pct = Math.max(0, Math.min(100, tsi));\n el('lp360-tsi-value').textContent = tsi;\n el('lp360-band-tsi-badge').style.left = pct + '%';\n el('lp360-band-marker').style.left = pct + '%';\n }\n if (data.topicInference) {\n el('lp360-topic-inference-text').textContent = data.topicInference;\n }\n var actionList = el('lp360-action-plan-list');\n if (actionList) {\n if (data.actionPlan) {\n var steps = data.actionPlan;\n var html = '';\n for (var i = 0; i < steps.length; i++) {\n html += '<li>' + steps[i] + '<\/li>';\n }\n actionList.innerHTML = html;\n }\n }\n }\n\n function renderMindMap(data) {\n if (!data) { return; }\n var el = document.getElementById.bind(document);\n var detailedTopics = data.detailedTopics || [];\n var basicTopics = data.basicTopics || [];\n var detailedList = el('lp360-mm-detailed-list');\n var basicList = el('lp360-mm-basic-list');\n if (detailedList) {\n var detHtml = '';\n for (var d = 0; d < detailedTopics.length; d++) {\n detHtml += '<div class=\"lp360-mm-topic\" id=\"lp360-mm-d-' + d + '\">' + detailedTopics[d] + '<\/div>';\n }\n detailedList.innerHTML = detHtml;\n }\n if (basicList) {\n var basHtml = '';\n for (var b = 0; b < basicTopics.length; b++) {\n basHtml += '<div class=\"lp360-mm-topic\" id=\"lp360-mm-b-' + b + '\">' + basicTopics[b] + '<\/div>';\n }\n basicList.innerHTML = basHtml;\n }\n var mobileDetailed = el('lp360-mm-mobile-detailed');\n var mobileBasic = el('lp360-mm-mobile-basic');\n if (mobileDetailed) {\n var detMob = '';\n for (var dm = 0; dm < detailedTopics.length; dm++) {\n detMob += '<span>' + detailedTopics[dm] + '<\/span>';\n }\n mobileDetailed.innerHTML = detMob;\n }\n if (mobileBasic) {\n var basMob = '';\n for (var bm = 0; bm < basicTopics.length; bm++) {\n basMob += '<span>' + basicTopics[bm] + '<\/span>';\n }\n mobileBasic.innerHTML = basMob;\n }\n el('lp360-mm-detailed-count').textContent = (data.detailedCount != null) ? data.detailedCount : detailedTopics.length;\n el('lp360-mm-basic-count').textContent = (data.basicCount != null) ? data.basicCount : basicTopics.length;\n\n \/\/ ---- Source-name tag (CMA-only field: mindmap_source_name) ----\n var sourceEl = el('lp360-mindmap-source');\n if (sourceEl) {\n if (data.sourceName) {\n sourceEl.textContent = 'Source: ' + data.sourceName;\n sourceEl.style.display = 'inline-flex';\n } else {\n sourceEl.textContent = '';\n sourceEl.style.display = 'none';\n }\n }\n\n drawMindMapCurves();\n\n \/\/ ---- Inference overlay (no &&) ----\n setTimeout(function() {\n var mindMapCard = document.querySelector('.lp360-mindmap-card');\n if (mindMapCard) {\n \/\/ Check if we have an inference\nvar hasInference = false;\n if (data.inference) {\n hasInference = true;\n } \n\n \/\/ Remove any existing overlay first (to avoid duplicates)\n var existingOverlay = mindMapCard.querySelector('.lp360-mindmap-overlay');\n if (existingOverlay) {\n existingOverlay.remove();\n }\n\n if (hasInference) {\n mindMapCard.classList.add('has-inference');\n var overlay = document.createElement('div');\n overlay.className = 'lp360-mindmap-overlay';\n overlay.innerHTML =\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\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4M12 8h.01\"\/><\/svg>' +\n '<\/div>' +\n '<h3>Mind Map<\/h3>' +\n '<p>' + data.inference + '<\/p>' +\n '<\/div>';\n mindMapCard.appendChild(overlay);\n } else {\n mindMapCard.classList.remove('has-inference');\n }\n }\n }, 50);\n}\n\n function drawMindMapCurves() {\n var diagram = document.getElementById('lp360-mindmap-diagram');\n var svg = document.getElementById('lp360-mindmap-svg');\n if (!diagram) { return; }\n if (!svg) { return; }\n var style = getComputedStyle(diagram);\n if (style.display === 'none') { return; }\n var box = diagram.getBoundingClientRect();\n if (box.width === 0 || box.height === 0) { return; }\n svg.setAttribute('viewBox', '0 0 ' + box.width + ' ' + box.height);\n function centerOf(elm) {\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 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) { return; }\n if (!basicNode) { return; }\n if (!centerNode) { return; }\n var dCenter = centerOf(detailedNode);\n var bCenter = centerOf(basicNode);\n var cCenter = centerOf(centerNode);\n var paths = [];\n var dAnchorX = dCenter.x - dCenter.r.width \/ 2;\n var detailedTopics = document.querySelectorAll('#lp360-mm-detailed-list .lp360-mm-topic');\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.y +\n ' ' + dAnchorX + ',' + dCenter.y + '\" fill=\"none\" stroke=\"#FF7A3D\" stroke-width=\"1.5\" opacity=\"0.55\"\/>');\n paths.push('<circle cx=\"' + startX + '\" cy=\"' + c.y + '\" r=\"3.5\" fill=\"#FF7A3D\"\/>');\n }\n var bAnchorX = bCenter.x + bCenter.r.width \/ 2;\n var basicTopics = document.querySelectorAll('#lp360-mm-basic-list .lp360-mm-topic');\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 + ',' + bCenter.y +\n ' ' + bAnchorX + ',' + bCenter.y + '\" fill=\"none\" stroke=\"#22C55E\" stroke-width=\"1.5\" opacity=\"0.55\"\/>');\n paths.push('<circle cx=\"' + startX2 + '\" cy=\"' + c2.y + '\" r=\"3.5\" fill=\"#22C55E\"\/>');\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=\"1.5\" stroke-dasharray=\"3,3\" opacity=\"0.7\"\/>');\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=\"1.5\" stroke-dasharray=\"3,3\" opacity=\"0.7\"\/>');\n svg.innerHTML = paths.join('');\n }\n\n \/\/ ---- Tracker: Score & Accuracy (full rendering) ----\n var __scoreTrackerData = null;\n var __scoreTrackerPoints = null;\n\n function renderTracker(data, hoverIndex) {\n if (data) { __scoreTrackerData = data; } else { data = __scoreTrackerData; }\n if (!data) { return; }\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\n \/\/ ---- Y-axis fixed to 0\u201350 with step 2 (Paper score) ----\nvar yMin = 0;\nvar yMax = 50;\nvar yTickStep = 5;\n var xTicks = data.xTicks || [];\nvar xMin = 0;\nvar xMax = 0;\nif (xTicks.length > 0) {\n xMax = Math.max.apply(null, xTicks);\n} else if (attempts.length > 0) {\n xMax = Math.max.apply(null, attempts);\n}\nif (xMax < 2) { xMax = 2; }\nvar xRange = xMax - xMin;\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 \/\/ Draw Y-axis ticks (fixed step 2)\nfor (var y = yMin; y <= yMax; 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 = (y === 0) ? '#1f2937' : (y > 0 ? '#22c55e' : '#f87171');\n ctx.fillText(y, margin.left - 6, yPos);\n}\n\n var xTickStep = cssWidth < 500 ? 4 : 2;\n for (var x = 0; x <= xMax; x += xTickStep) {\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 \nctx.fillText('Attempt (Attempt Number)', margin.left + chartWidth \/ 2, cssHeight - 16);\n var zeroY = yToCanvas(0);\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 &&) ----\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.fillStyle = (onlyPoint.y >= 0) ? '#22c55e' : '#ef4444';\n ctx.fillText(onlyPoint.y, onlyX, (onlyPoint.y >= 0) ? onlyY - 18 : onlyY + 18);\n }\n if (points.length < 1) { 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;\n\n var pointRadius = cssWidth < 500 ? 4 : 5;\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.fillStyle = (pt3.y >= 0) ? '#22c55e' : '#ef4444';\n ctx.fillText(pt3.y, xp, (pt3.y >= 0) ? yp - 18 : yp + 18);\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 renderTracker(null, nearestIdx);\n });\n canvas.addEventListener('mouseleave', function() {\n renderTracker(null, undefined);\n });\n }\n \n }\n\n \/\/ ---- Accuracy Tracker (full) ----\n var __accuracyTrackerData = null;\n var __accuracyTrackerPoints = null;\n\n function renderAccuracyTracker(data, hoverIndex) {\n if (data) { __accuracyTrackerData = data; } else { data = __accuracyTrackerData; }\n if (!data) { return; }\n var timePoints = data.timePoints || [];\n var accuracyValues = data.accuracyValues || [];\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 || [];\nif (xTicksForDomain.length === 0) {\n xTicksForDomain = timePoints.slice(); \/\/ fallback to timePoints\n}\nvar xMin = 0, xMax = Math.max.apply(null, xTicksForDomain);\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 ----\nvar xTicks = data.xTicks || [];\nif (xTicks.length === 0) {\n xTicks = timePoints.slice();\n}\nvar xTicksTextArr = data.xTicksText || [];\nfor (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 \nctx.fillText('Time (minutes)', margin.left + chartWidth \/ 2, cssHeight - 16);\n var labelsTextArr = data.labelsText || [];\nvar points = [];\nfor (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 < 1) { return; }\n __accuracyTrackerPoints = points;\n \/\/ ---- No synthetic origin: start from first actual data point ----\n if (points.length === 1) {\n \/\/ Single point: draw only the point with label (no line from origin)\n var onlyPointAcc = points[0];\n var onlyX = xToCanvas(onlyPointAcc.x);\n var onlyY = yToCanvas(onlyPointAcc.y);\n \/\/ Point\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 \/\/ Label\n ctx.font = 'bold ' + (cssWidth < 500 ? 11 : 13) + 'px Inter, sans-serif';\n ctx.textAlign = 'center';\n ctx.fillStyle = '#1f2937';\n ctx.fillText(onlyPointAcc.y + '%', onlyX, onlyY - 18);\n } else {\n \/\/ Multiple points: draw line connecting points, fill area under curve from first point to last\n var firstPt = points[0];\n var lastPt = points[points.length - 1];\n \/\/ Line\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 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 \/\/ Area fill: polygon from first point to last point, then down to y=0, then back to first point's x at y=0\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.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 \/\/ Draw data points and labels\n var pointRadius = cssWidth < 500 ? 4 : 6;\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 \/\/ Label\n ctx.font = 'bold ' + (cssWidth < 500 ? 11 : 13) + 'px Inter, sans-serif';\n ctx.textAlign = 'center';\n ctx.fillStyle = '#1f2937';\n ctx.fillText(pt3.y + '%', xp, yp - 16);\n }\n }\n var activeIndexAcc = hoverIndex;\n if (activeIndexAcc === undefined) { activeIndexAcc = points.length - 1; }\n if (activeIndexAcc >= 0) {\n if (activeIndexAcc < points.length) {\n var hpAcc = points[activeIndexAcc];\n var hxAcc = xToCanvas(hpAcc.x);\n var hyAcc = yToCanvas(hpAcc.y);\n\n ctx.save();\n ctx.setLineDash([4, 4]);\n ctx.strokeStyle = '#9ca3af';\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(hxAcc, margin.top);\n ctx.lineTo(hxAcc, margin.top + chartHeight);\n ctx.stroke();\n ctx.beginPath();\n ctx.moveTo(margin.left, hyAcc);\n ctx.lineTo(margin.left + chartWidth, hyAcc);\n ctx.stroke();\n ctx.restore();\n\n ctx.beginPath();\n ctx.arc(hxAcc, hyAcc, 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 tipTextAcc = 'Time: ' + hpAcc.label + ' | Accuracy: ' + hpAcc.y + '%';\n ctx.font = 'bold ' + (cssWidth < 500 ? 11 : 12.5) + 'px Inter, sans-serif';\n var tipPadAcc = 12;\n var tipTextWidthAcc = ctx.measureText(tipTextAcc).width;\n var tipWAcc = tipTextWidthAcc + tipPadAcc * 2;\n var tipHAcc = 30;\n var tipXAcc = hxAcc - tipWAcc \/ 2;\n if (tipXAcc < margin.left) { tipXAcc = margin.left; }\n if (tipXAcc + tipWAcc > margin.left + chartWidth) { tipXAcc = margin.left + chartWidth - tipWAcc; }\n var tipYAcc = hyAcc - tipHAcc - 16;\n if (tipYAcc < margin.top) { tipYAcc = hyAcc + 16; }\n ctx.beginPath();\n if (ctx.roundRect) { ctx.roundRect(tipXAcc, tipYAcc, tipWAcc, tipHAcc, 8); } else { ctx.rect(tipXAcc, tipYAcc, tipWAcc, tipHAcc); }\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(tipTextAcc, tipXAcc + tipWAcc \/ 2, tipYAcc + tipHAcc \/ 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(null, accPendingIdx);\n });\n }\n });\n canvas.addEventListener('mouseleave', function() {\n renderAccuracyTracker(null, undefined);\n });\n }\n \n }\n \/\/ ---- Time Tracker Gauges ----\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 rect = canvas.parentElement.getBoundingClientRect();\n var dpr = window.devicePixelRatio || 1;\n var cssWidth = rect.width || 220;\n if (cssWidth < 88) { cssWidth = 88; }\n if (cssWidth > 132) { cssWidth = 132; }\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.9; \n var startAngle = Math.PI * 0.75;\n var endAngle = Math.PI * 2.25;\n var totalAngle = endAngle - startAngle;\n var fraction = Math.min(value \/ maxVal, 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 = 14;\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 = 14;\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 = 20;\n if (maxVal !== 100) {\n numTicks = 7;\n if (maxVal === 20) {\n numTicks = 6;\n }\n tickStep = maxVal \/ (numTicks - 1);\n }\n ctx.font = (cssWidth < 110 ? 8 : 9) + 'px Inter, sans-serif';\n ctx.fillStyle = '#6b7280';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n for (var t = 0; t < numTicks; t++) {\n var tickVal = t * tickStep;\n var angle = startAngle + (tickVal \/ maxVal) * totalAngle;\n var tx = cx + (radius + 16) * Math.cos(angle);\n var ty = cy + (radius + 16) * Math.sin(angle);\n ctx.fillText(Math.round(tickVal), tx, ty);\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 = 3;\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, 8, 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.5, 0, 2 * Math.PI);\n ctx.fillStyle = '#fff';\n ctx.fill();\n }\n }\n\n \/\/ ---- Time Tracker Tabs ----\n function initTimeTabs(timeData) {\n var tabs = document.querySelectorAll('.lp360-time-tab');\n for (var i = 0; i < tabs.length; i++) {\n var tab = tabs[i];\n tab.addEventListener('click', function() {\n var currentTabs = document.querySelectorAll('.lp360-time-tab');\n for (var j = 0; j < currentTabs.length; j++) {\n currentTabs[j].classList.remove('active');\n }\n this.classList.add('active');\n var range = this.dataset.range;\n \nvar attemptVal = timeData.attemptRateByRange[range] || 0;\n var correctVal = timeData.correctRateByRange[range] || 0;\n var timeVal = timeData.timeUsedByRange[range] || 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 if (attemptCanvas) { attemptCanvas.dataset.value = attemptVal; }\n if (correctCanvas) { correctCanvas.dataset.value = correctVal; }\n var timeGaugeConfig = getTimeGaugeConfig(timeVal);\n if (timeCanvas) {\n timeCanvas.dataset.value = timeGaugeConfig.value;\n timeCanvas.dataset.max = timeGaugeConfig.max;\n }\n var attemptValEl = attemptCanvas ? attemptCanvas.parentElement.parentElement.querySelector('.lp360-gauge-column-value') : null;\n var correctValEl = correctCanvas ? correctCanvas.parentElement.parentElement.querySelector('.lp360-gauge-column-value') : null;\n var timeValEl = timeCanvas ? timeCanvas.parentElement.parentElement.querySelector('.lp360-gauge-column-value') : null;\n if (attemptValEl) { attemptValEl.innerHTML = attemptVal; }\n if (correctValEl) { correctValEl.innerHTML = correctVal; }\n if (timeValEl) { timeValEl.innerHTML = formatTimeDisplayGauge(timeVal); }\n\n var inf1 = document.getElementById('lp360-time-inf1');\n var inf2 = document.getElementById('lp360-time-inf2');\n if (inf1) {\n if (timeData.inferences) {\n inf1.textContent = timeData.inferences.attempt;\n }\n }\n if (inf2) {\n if (timeData.inferences) {\n inf2.textContent = timeData.inferences.correct;\n }\n }\n renderTimeGauges();\n });\n }\n }\n\n function formatTimeDisplayGauge(minutes) {\n var seconds = minutes * 60;\n if (seconds < 60) {\n var roundedSec = Math.round(seconds);\n return roundedSec + ' <span>SEC<\/span>';\n } else {\n var roundedMin = (Math.round(minutes * 10) \/ 10).toFixed(1);\n return roundedMin + ' <span>MIN<\/span>';\n }\n }\n\/\/ ---- Dual-mode dial config: seconds dial (0-60) when value < 60s, minutes dial (0-30) otherwise ----\n function getTimeGaugeConfig(minutes) {\n var seconds = minutes * 60;\n if (seconds < 60) {\n return { value: seconds, max: 60 };\n }\n return { value: minutes, max: 30 };\n }\n\n \/\/ ---- Prediction ----\n function renderPrediction(data) {\n if (!data) { return; }\n var el = document.getElementById.bind(document);\n if (data.idealTime) {\n var it = data.idealTime;\n var keys = ['basic', 'multi', 'analytical'];\n for (var i = 0; i < keys.length; i++) {\n var key = keys[i];\n var entry = it[key];\n if (entry) {\n var timeEl = el('lp360-pred-time-' + key);\n if (timeEl) { timeEl.innerHTML = formatPredictionTimeHtml(entry.seconds); }\n var infEl = el('lp360-pred-inf-' + key);\n if (infEl) {\n if (entry.inference) { infEl.textContent = entry.inference; }\n }\n var actEl = el('lp360-pred-act-' + key);\n if (actEl) {\n if (entry.actionPlan) { actEl.textContent = entry.actionPlan; }\n }\n }\n }\n }\n if (data.cuetScore) {\n var cs = data.cuetScore;\n var obtainedEl = el('lp360-pred-score-obtained');\n var totalEl = el('lp360-pred-score-total');\n var infTextEl = el('lp360-pred-score-inference');\n var actTextEl = el('lp360-pred-score-action');\n if (obtainedEl) {\n if (cs.obtained !== undefined) { obtainedEl.textContent = cs.obtained; }\n }\n if (totalEl) {\n if (cs.total !== undefined) { totalEl.textContent = cs.total; }\n }\n if (infTextEl) {\n if (cs.inference) { infTextEl.textContent = cs.inference; }\n }\n if (actTextEl) {\n if (cs.actionPlan) { actTextEl.textContent = cs.actionPlan; }\n }\n }\n \/\/ Mentor Tip\n var mentorTipEl = document.getElementById('lp360-pred-mentor-tip');\n var mentorWrapEl = document.getElementById('lp360-pred-mentor-tip-wrap');\n if (mentorTipEl) {\n if (mentorWrapEl) {\n if (data.mentorTip) {\n mentorTipEl.textContent = data.mentorTip;\n mentorWrapEl.style.display = 'block';\n } else {\n mentorWrapEl.style.display = 'none';\n }\n }\n }\n\/\/ ---- Prediction Confidence ----\nvar confidence = data.prediction_confidence || {};\nvar confEl = document.getElementById('icma-pred-confidence');\nvar levelEl = document.getElementById('icma-pred-confidence-level');\n\nif (confEl) {\n if (confidence.confidence_percentage !== undefined) {\n var pct = Math.round(confidence.confidence_percentage);\n confEl.textContent = pct + '%';\n var level = confidence.confidence_level || 'Medium';\n var colors = {\n 'High': '#10b981',\n 'Medium': '#f59e0b',\n 'Low': '#ef4444'\n };\n var color = colors[level] || '#f59e0b';\n confEl.style.color = color;\n if (levelEl) {\n levelEl.textContent = level;\n levelEl.style.color = color;\n }\n }\n}\n \n if (data.cuetScore) {\n var cs = data.cuetScore;\n var obtainedEl = el('lp360-pred-score-obtained');\n var totalEl = el('lp360-pred-score-total');\n var infTextEl = el('lp360-pred-score-inference');\n var actTextEl = el('lp360-pred-score-action');\n if (obtainedEl) {\n if (cs.obtained !== undefined) { obtainedEl.textContent = cs.obtained; }\n }\n if (totalEl) {\n if (cs.total !== undefined) { totalEl.textContent = cs.total; }\n }\n if (infTextEl) {\n if (cs.inference) { infTextEl.textContent = cs.inference; }\n }\n if (actTextEl) {\n if (cs.actionPlan) { actTextEl.textContent = cs.actionPlan; }\n }\n }\n \/\/ Mentor Tip\n var mentorTipEl = document.getElementById('lp360-pred-mentor-tip');\n var mentorWrapEl = document.getElementById('lp360-pred-mentor-tip-wrap');\n if (mentorTipEl) {\n if (mentorWrapEl) {\n if (data.mentorTip) {\n mentorTipEl.textContent = data.mentorTip;\n mentorWrapEl.style.display = 'block';\n } else {\n mentorWrapEl.style.display = 'none';\n }\n }\n }\n \n }\n\n \/\/ ---- Info Popups ----\n var infoDescriptions = {\n 'decision_marker': 'Shows your answer history (for every 5 minutes of the test).',\n 'ncert_mapping': '[Add description for Topic Strength Map here]',\n 'mind_map': 'Detailed Study means you got many questions wrong from a specific category, showing that this entire area needs a lot more careful reading and practice for you to fully understand it.<br><br>Basic Study means you got only made some wrong answers from a specific category, which is great news because it shows you mostly understand the category but just need a tiny bit of quick revision to get it perfectly right next time.',\n 'score_tracker': 'Track your progress over time. Each attempt shows how you\\'re improving and getting closer to your best score!',\n 'accuracy_tracker': 'Displays the accuracy trend over time in minutes.',\n 'time_tracker': 'This tracker shows how much time you spend answering questions and compares your attempts and correct answers across different time ranges. It helps you identify whether you perform your answering quickly, moderately, or after taking more time, allowing you to develop an effective exam strategy.',\n 'ideal_time_prediction': '[Add description for Ideal Time Prediction here]',\n 'cuet_score_prediction': '[Add description for CMA Foundation Score Prediction here]'\n };\n\n function showInfoPopup(key) {\n var desc = infoDescriptions[key] || '[Add description for this section here]';\n var existing = document.querySelector('.lp360-info-popover');\n if (existing) {\n document.body.removeChild(existing);\n }\n var popup = document.createElement('div');\n popup.className = 'lp360-info-popover';\n popup.setAttribute('role', 'dialog');\n popup.setAttribute('aria-modal', 'true');\n var label = key.replace(\/_\/g, ' ').replace(\/\\b\\w\/g, function(l) { return l.toUpperCase(); });\n popup.innerHTML = '<div class=\"lp360-info-popover__content\">' +\n '<button class=\"lp360-info-popover__close\" aria-label=\"Close info\">×<\/button>' +\n '<div class=\"lp360-info-popover__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\"\/><path d=\"M12 16v-4M12 8h.01\"\/>' +\n '<\/svg>' +\n '<\/div>' +\n '<div class=\"lp360-info-popover__title\">' + label + '<\/div>' +\n '<div class=\"lp360-info-popover__desc\">' + desc.replace(\/\\n\/g, '<br>') + '<\/div>' +\n '<span class=\"lp360-info-popover__badge\">Info<\/span>' +\n '<\/div>';\n document.body.appendChild(popup);\n var closeBtn = popup.querySelector('.lp360-info-popover__close');\n closeBtn.addEventListener('click', function() {\n document.body.removeChild(popup);\n });\n popup.addEventListener('click', function(e) {\n if (e.target === popup) {\n document.body.removeChild(popup);\n }\n });\n document.addEventListener('keydown', function handler(e) {\n if (e.key === 'Escape') {\n var p = document.querySelector('.lp360-info-popover');\n if (p) {\n document.body.removeChild(p);\n }\n document.removeEventListener('keydown', handler);\n }\n });\n }\n \/\/ ---- Show no-attempts overlay ----\n function 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 \/\/ Determine the retake URL\n var retakeUrl = document.referrer;\n \/\/ If no valid referrer, fallback to current page with query params\n if (!retakeUrl || retakeUrl.indexOf(window.location.origin) === -1) {\n retakeUrl = window.location.origin + window.location.pathname;\n var queryParts = [];\n var urlParams = new URLSearchParams(window.location.search);\n var examId = urlParams.get('attempt_id');\n var examType = urlParams.get('exam_type');\n var source = urlParams.get('source');\n if (examId) { queryParts.push('attempt_id=' + examId); }\n if (examType) { queryParts.push('exam_type=' + encodeURIComponent(examType)); }\n if (source) { queryParts.push('source=' + encodeURIComponent(source)); }\n if (queryParts.length > 0) {\n retakeUrl = retakeUrl + '?' + queryParts.join('&');\n }\n \/\/ Ultimate fallback\n if (!examId) {\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\">' +\n '<div class=\"lp360-no-attempts-icon\" style=\"background:linear-gradient(135deg,#EF4444,#DC2626);\">' +\n '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">' +\n '<circle cx=\"12\" cy=\"12\" r=\"10\"\/>' +\n '<path d=\"M12 8v4M12 16h.01\"\/>' +\n '<\/svg>' +\n '<\/div>' +\n '<h2 class=\"lp360-no-attempts-title\">No Questions Attempted<\/h2>' +\n '<p class=\"lp360-no-attempts-message\">' + message + '<\/p>' +\n '<a href=\"' + retakeUrl + '\" class=\"lp360-no-attempts-badge\">Please Try Again<\/a>' +\n '<\/div>';\n\ndocument.body.appendChild(overlay);\n}\n \/\/ ---- Main render from API ----\n function renderFullPage(apiResponse) {\n var analytics = apiResponse.analytics_json;\n var result = apiResponse.result || {};\n\n var basic = analytics.basic_info || {};\n var basicInfoData = {\n score: {\n obtained: basic.total_score || 0,\n total: result.max_score || 100\n },\n timeUsedSeconds: basic.total_time || 0,\n totalAttempts: basic.total_attempts || 0,\n timePerQuestion: {\n max: { value: basic.max_time_q ? basic.max_time_q.time : 0, questionTag: basic.max_time_q ? 'Q' + basic.max_time_q.question : '' },\n min: { value: basic.min_time_q ? basic.min_time_q.time : 0, questionTag: basic.min_time_q ? 'Q' + basic.min_time_q.question : '' },\n avg: { value: basic.avg_time_per_q || 0 }\n },\n breakdown: {\n correct: {\n total: (basic.correct_counts ? basic.correct_counts.single + basic.correct_counts.multiple + basic.correct_counts.reviewed + basic.correct_counts.skipped : 0),\n single: basic.correct_counts ? basic.correct_counts.single : 0,\n multiple: basic.correct_counts ? basic.correct_counts.multiple : 0,\n reviewed: basic.correct_counts ? basic.correct_counts.reviewed : 0,\n skipped: basic.correct_counts ? basic.correct_counts.skipped : 0\n },\n incorrect: {\n total: (basic.incorrect_counts ? basic.incorrect_counts.single + basic.incorrect_counts.multiple + basic.incorrect_counts.reviewed + basic.incorrect_counts.skipped : 0),\n single: basic.incorrect_counts ? basic.incorrect_counts.single : 0,\n multiple: basic.incorrect_counts ? basic.incorrect_counts.multiple : 0,\n reviewed: basic.incorrect_counts ? basic.incorrect_counts.reviewed : 0,\n skipped: basic.incorrect_counts ? basic.incorrect_counts.skipped : 0\n },\n unattempted: {\n total: (basic.unattempted_counts ? basic.unattempted_counts.skipped + basic.unattempted_counts.reviewed_unattempted + basic.unattempted_counts.not_viewed : 0),\n skipped: basic.unattempted_counts ? basic.unattempted_counts.skipped : 0,\n reviewed: basic.unattempted_counts ? basic.unattempted_counts.reviewed_unattempted : 0,\n notViewed: basic.unattempted_counts ? basic.unattempted_counts.not_viewed : 0\n }\n }\n };\n renderBasicInfo(basicInfoData);\n\n\/\/ Decision Marker\nvar dm = analytics.decision_marker || {};\n\/\/ Extract numeric interval keys (minutes) from the backend response\nvar intervalKeys = [];\nfor (var key in dm) {\n if (key !== 'inference') {\n if (key !== 'totals') {\n if (!isNaN(key)) {\n intervalKeys.push(Number(key));\n }\n }\n }\n}\nintervalKeys.sort(function(a, b) { return a - b; });\n\/\/ Determine the maximum key (the latest interval end)\nvar maxKey = 0;\nif (intervalKeys.length) {\n maxKey = Math.max.apply(null, intervalKeys);\n}\n\/\/ Generate interval labels from 0 up to maxKey, step size depends on exam type\n \/\/ Use the URL param to detect full-length test\n var isFullLength = (examTypeParam && examTypeParam.indexOf('FULL_LENGTH') !== -1);\n var stepSize = isFullLength ? 20 : 5;\nvar intervals = [];\nfor (var start = 0; start < maxKey; start += stepSize) {\n var end = start + stepSize;\n intervals.push(start + '-' + end + ' min');\n}\nif (intervals.length === 0) {\n intervals.push('0-' + stepSize + ' min');\n}\n\/\/ Prepare row data: each cell is the array of question numbers for that interval\nvar rowData = {\n 'correct': [],\n 'incorrect': []\n};\nfor (var i = 0; i < intervals.length; i++) {\n var intervalLabel = intervals[i];\n var parts = intervalLabel.split('-');\n var endKey = parseInt(parts[1], 10); \/\/ e.g., \"5-10\" -> key = 10\n var bucket = dm[endKey] || { correct: [], incorrect: [] };\n var correctArr = bucket.correct || [];\n var incorrectArr = bucket.incorrect || [];\n rowData['correct'].push(correctArr);\n rowData['incorrect'].push(incorrectArr);\n}\n\/\/ Totals come directly from the backend's \"totals\" object\nvar totals = dm.totals || { attempt: 0, correct: 0, incorrect: 0 };\nvar summary = [];\nsummary.push({ key: 'attempt', label: 'Total Attempt', value: totals.attempt || 0 });\nsummary.push({ key: 'correct', label: 'Total Correct', value: totals.correct || 0 });\nsummary.push({ key: 'incorrect', label: 'Total Incorrect', value: totals.incorrect || 0 });\nvar decisionData = {\n timeIntervals: intervals,\n cells: rowData,\n summary: summary,\n inference: dm.inference || ''\n};\nrenderDecisionMarker(decisionData); \n \/\/ Strength Map (CMA Paper: backend key is strength_map\n \n \/\/ ---- Strength Map ----\n var isFullLength = (examTypeParam && examTypeParam.indexOf('FULL_LENGTH') !== -1);\n var strengthData = {};\n var paperNames = [];\n\n if (isFullLength) {\n var icma = analytics.icma_mapping || {};\n strengthData[1] = {\n badgeName: icma.badge_name1 || '',\n badgeDesc: icma.badge_description1 || '',\n tsi: icma.tsi_percentage1 || 0,\n topicInference: icma.your_strength_report1 || '',\n paperName: icma.paper_name1 || 'Paper 1'\n };\n strengthData[2] = {\n badgeName: icma.badge_name2 || '',\n badgeDesc: icma.badge_description2 || '',\n tsi: icma.tsi_percentage2 || 0,\n topicInference: icma.your_strength_report2 || '',\n paperName: icma.paper_name2 || 'Paper 2'\n };\n paperNames = [strengthData[1].paperName, strengthData[2].paperName];\n } else {\n var ncert = analytics.strength_map || {};\n strengthData[1] = {\n badgeName: ncert.badge_name || '',\n badgeDesc: ncert.badge_description || '',\n tsi: ncert.tsi_percentage || 0,\n topicInference: ncert.inference || '',\n paperName: 'Paper'\n };\n paperNames = ['Paper'];\n }\n\n function renderStrengthMapForPaper(paperNum) {\n var data = strengthData[paperNum];\n if (!data) return;\n var ncertData = {\n badge: {\n achieved: data.badgeName,\n description: data.badgeDesc\n },\n tsi: data.tsi,\n topicInference: data.topicInference,\n actionPlan: []\n };\n renderNcertMapping(ncertData);\n }\n\n \/\/ Render default (paper 1)\n renderStrengthMapForPaper(1);\n\n \/\/ Show and setup navigation buttons if full-length\n var strengthNav = document.getElementById('lp360-strength-nav');\n if (strengthNav) {\n if (isFullLength) {\n strengthNav.style.display = 'flex';\n var btns = strengthNav.querySelectorAll('.lp360-paper-nav-btn');\n if (btns.length >= 2) {\n btns[0].textContent = paperNames[0] || 'Paper 1';\n btns[1].textContent = paperNames[1] || 'Paper 2';\n }\n \/\/ Click handler\n strengthNav.addEventListener('click', function(e) {\n var btn = e.target.closest('.lp360-paper-nav-btn');\n if (!btn) return;\n var paper = parseInt(btn.dataset.paper, 10);\n \/\/ Update active state\n strengthNav.querySelectorAll('.lp360-paper-nav-btn').forEach(function(b) {\n b.classList.remove('active');\n });\n btn.classList.add('active');\n renderStrengthMapForPaper(paper);\n });\n } else {\n strengthNav.style.display = 'none';\n }\n }\n \n \/\/ ---- Mind Map ----\n var mindMapData = {};\n var mindPaperNames = [];\n\n if (isFullLength) {\n var mind = analytics.mind_map || {};\n mindMapData[1] = {\n detailedTopics: mind.detailed_study1 || [],\n basicTopics: mind.basic_study1 || [],\n detailedCount: mind.detailed_count1 || 0,\n basicCount: mind.basic_count1 || 0,\n inference: mind.inference || '',\n sourceName: mind.mindmap_source_name1 || '',\n paperName: mind.paper_name1 || 'Paper 1'\n };\n mindMapData[2] = {\n detailedTopics: mind.detailed_study2 || [],\n basicTopics: mind.basic_study2 || [],\n detailedCount: mind.detailed_count2 || 0,\n basicCount: mind.basic_count2 || 0,\n inference: mind.inference || '',\n sourceName: mind.mindmap_source_name2 || '',\n paperName: mind.paper_name2 || 'Paper 2'\n };\n mindPaperNames = [mindMapData[1].paperName, mindMapData[2].paperName];\n } else {\n var mind = analytics.mind_map || {};\n mindMapData[1] = {\n detailedTopics: mind.detailed_study || [],\n basicTopics: mind.basic_study || [],\n detailedCount: mind.detailed_count || 0,\n basicCount: mind.basic_count || 0,\n inference: mind.inference || '',\n sourceName: mind.mindmap_source_name || '',\n paperName: 'Paper'\n };\n mindPaperNames = ['Paper'];\n }\n\n function renderMindMapForPaper(paperNum) {\n var data = mindMapData[paperNum];\n if (!data) return;\n var mindData = {\n detailedTopics: data.detailedTopics,\n basicTopics: data.basicTopics,\n detailedCount: data.detailedCount,\n basicCount: data.basicCount,\n inference: data.inference,\n sourceName: data.sourceName\n };\n renderMindMap(mindData);\n }\n\n renderMindMapForPaper(1);\n\n var mindNav = document.getElementById('lp360-mindmap-nav');\n if (mindNav) {\n if (isFullLength) {\n mindNav.style.display = 'flex';\n var btns = mindNav.querySelectorAll('.lp360-paper-nav-btn');\n if (btns.length >= 2) {\n btns[0].textContent = mindPaperNames[0] || 'Paper 1';\n btns[1].textContent = mindPaperNames[1] || 'Paper 2';\n }\n mindNav.addEventListener('click', function(e) {\n var btn = e.target.closest('.lp360-paper-nav-btn');\n if (!btn) return;\n var paper = parseInt(btn.dataset.paper, 10);\n mindNav.querySelectorAll('.lp360-paper-nav-btn').forEach(function(b) {\n b.classList.remove('active');\n });\n btn.classList.add('active');\n renderMindMapForPaper(paper);\n });\n } else {\n mindNav.style.display = 'none';\n }\n }\n \/\/ Tracker\n var tracker = analytics.tracker || {};\n var scoreTracker = tracker.score_tracker || {};\n var accuracyTracker = tracker.accuracy_tracker || {};\n var timeTracker = tracker.time_tracker || {};\n\n var scoreData = {\n attempts: scoreTracker.labels || [],\n scores: scoreTracker.scores || [],\n inference: scoreTracker.inference || '',\n xTicks: scoreTracker.x_ticks || []\n};\nrenderTracker(scoreData);;\nvar accLabels = accuracyTracker.labels || [];\nvar accValues = accuracyTracker.accuracies || [];\nvar xTicks = accuracyTracker.x_ticks || [];\nvar xTicksText = accuracyTracker.x_ticks_text || [];\nvar labelsText = accuracyTracker.labels_text || [];\n\n\/\/ Build timePoints directly from labels (these are the exact x-coordinates)\nvar timePoints = [];\nfor (var al = 0; al < accLabels.length; al++) {\n var label = accLabels[al];\n var timePoint = 0;\n if (typeof label === 'string') {\n if (label.indexOf('-') !== -1) {\n var parts = label.split('-');\n timePoint = parseFloat(parts[0]) || 0;\n } else {\n timePoint = parseFloat(label) || 0;\n }\n } else {\n timePoint = parseFloat(label) || 0;\n }\n timePoints.push(timePoint);\n}\n\nvar accuracyValues = [];\nfor (var av = 0; av < accValues.length; av++) {\n accuracyValues.push(Math.round(accValues[av] * 100));\n}\n\nvar accData = {\n timePoints: timePoints,\n accuracyValues: accuracyValues,\n xTicks: xTicks,\n xTicksText: xTicksText,\n labelsText: labelsText\n};\nrenderAccuracyTracker(accData);\n \/\/ Time tracker\n var frontendRanges = ['0-30', '30-60', '60-90', '90+'];\n var backendRangeMap = {\n '0-30': '0-30',\n '30-60': '30-60',\n '60-90': '60-90',\n '90+': '>90'\n };\n var attemptRateByRange = {};\n var correctRateByRange = {};\n var timeUsedByRange = {};\n for (var tr = 0; tr < frontendRanges.length; tr++) {\n var range = frontendRanges[tr];\n var backendKey = backendRangeMap[range];\n var data = timeTracker[backendKey] || { attempts: 0, correct: 0, time_used: 0 };\n attemptRateByRange[range] = data.attempts || 0;\n correctRateByRange[range] = data.correct || 0;\n timeUsedByRange[range] = (data.time_used || 0) \/ 60;\n }\n\n var timeTrackerData = {\n attemptRateByRange: attemptRateByRange,\n correctRateByRange: correctRateByRange,\n timeUsedByRange: timeUsedByRange,\n inferences: {\n attempt: 'Highest attempt activity was observed during the ' + (Object.keys(attemptRateByRange).reduce(function(a, b) { return attemptRateByRange[a] > attemptRateByRange[b] ? a : b; })) + ' time interval.',\n correct: 'The highest number of correct answers was recorded during the ' + (Object.keys(correctRateByRange).reduce(function(a, b) { return correctRateByRange[a] > correctRateByRange[b] ? a : b; })) + ' time interval.'\n }\n };\n\n var defaultRange = '0-30';\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 if (attemptCanvas) { attemptCanvas.dataset.value = attemptRateByRange[defaultRange] || 0; }\n if (correctCanvas) { correctCanvas.dataset.value = correctRateByRange[defaultRange] || 0; }\n var defaultTimeGaugeConfig = getTimeGaugeConfig(timeUsedByRange[defaultRange] || 0);\n if (timeCanvas) {\n timeCanvas.dataset.value = defaultTimeGaugeConfig.value;\n timeCanvas.dataset.max = defaultTimeGaugeConfig.max;\n } \n var attemptValEl = attemptCanvas ? attemptCanvas.parentElement.parentElement.querySelector('.lp360-gauge-column-value') : null;\n var correctValEl = correctCanvas ? correctCanvas.parentElement.parentElement.querySelector('.lp360-gauge-column-value') : null;\n var timeValEl = timeCanvas ? timeCanvas.parentElement.parentElement.querySelector('.lp360-gauge-column-value') : null;\n if (attemptValEl) { attemptValEl.innerHTML = attemptRateByRange[defaultRange] || 0; }\n if (correctValEl) { correctValEl.innerHTML = correctRateByRange[defaultRange] || 0; }\n if (timeValEl) {\n var minutes = timeUsedByRange[defaultRange] || 0;\n timeValEl.innerHTML = formatTimeDisplayGauge(minutes);\n }\n\n var inf1 = document.getElementById('lp360-time-inf1');\n var inf2 = document.getElementById('lp360-time-inf2');\n if (inf1) { inf1.textContent = timeTrackerData.inferences.attempt; }\n if (inf2) { inf2.textContent = timeTrackerData.inferences.correct; }\n\n initTimeTabs(timeTrackerData);\n renderTimeGauges();\n\n \/\/ Predictions (CMA Paper: backend key is icma_prediction)\nvar predictions = analytics.predictions || {};\nvar cuet2027 = predictions.icma_prediction || {};\nvar idealTimeObj = cuet2027.ideal_time || {};\nvar idealTimeInferenceText = cuet2027.ideal_time_inference || '';\nvar scoreInferenceText = cuet2027.analytical_insight || '';\nvar mentorTipText = cuet2027.mentor_tip || '';\n\/\/ CLAT-style: pulled directly off \"predictions\", not off \"icma_prediction\"\nvar predictionConfidence = predictions.prediction_confidence || {};\n\nvar predData = {\n idealTime: {\n basic: { seconds: (idealTimeObj.basic || 0), inference: idealTimeInferenceText, actionPlan: '' },\n multi: { seconds: (idealTimeObj.multiple || 0), inference: '', actionPlan: '' },\n analytical: { seconds: (idealTimeObj.analytical || 0), inference: '', actionPlan: '' }\n },\n cuetScore: {\n obtained: cuet2027.predicted_score || 0,\n total: 100,\n inference: scoreInferenceText,\n actionPlan: '',\n badgeText: 'based on your current performance'\n },\n mentorTip: mentorTipText,\n prediction_confidence: {\n confidence_percentage: predictionConfidence.confidence_percentage,\n confidence_level: predictionConfidence.confidence_level\n }\n};\n renderPrediction(predData);\n\n setTimeout(drawMindMapCurves, 100);\n }\n\n \/\/ ---- Fetch and render ----\n var API_BASE = 'https:\/\/launchpad-api-770009272949.asia-south1.run.app';\n var params = new URLSearchParams(window.location.search);\n var attemptId = params.get('attempt_id');\n var examTypeParam = params.get('exam_type');\n var tokenParam = params.get('token');\n var expiresParam = params.get('expires');\n\n if (attemptId) {\n var AMP = String.fromCharCode(38); \/\/ built at runtime, not a literal '&' in the page source \u2014 avoids WordPress's wptexturize converting it to &\n var url = API_BASE + '\/api\/analytics-by-attempt\/' + attemptId;\n var urlParams = [];\n if (examTypeParam) {\n urlParams.push('exam_type=' + encodeURIComponent(examTypeParam));\n }\n if (tokenParam) {\n urlParams.push('token=' + encodeURIComponent(tokenParam));\n }\n if (expiresParam) {\n urlParams.push('expires=' + encodeURIComponent(expiresParam));\n }\n if (urlParams.length) {\n url = url + '?' + urlParams.join(AMP);\n }\n fetch(url)\n\n .then(function(response) {\n if (!response.ok) {\n throw new Error('Network response was not ok: ' + response.status);\n }\n return response.json();\n })\n .then(function(data) {\n \n\/\/ ---- FIX: Ensure analytics_json is an object ----\n if (data.analytics_json) {\n if (typeof data.analytics_json === 'string') {\n try {\n data.analytics_json = JSON.parse(data.analytics_json);\n } catch (e) {\n console.error('Failed to parse analytics_json:', e);\n }\n }\n }\n\/\/ ---- CHECK FOR NO ATTEMPTS (no &&) ----\n var isInsufficient = false;\n if (data.analytics_json) {\n if (data.analytics_json.insufficient_data) {\n isInsufficient = true;\n }\n }\n if (isInsufficient) {\n var noAttemptsMsg = data.analytics_json.insufficient_data_message;\n if (!noAttemptsMsg) {\n noAttemptsMsg = 'You have not attempted enough questions so that the algorithm is able to properly analyse your capabilities. Please retake the exam with consistent answering.';\n }\n \/\/ Show the premium overlay with the message\n showNoAttemptsOverlay(noAttemptsMsg);\n return; \/\/ stop further rendering\n }\n \/\/ Otherwise, render the dashboard normally\n renderFullPage(data);\n })\n .catch(function(error) {\n console.error('Error fetching analytics:', error);\n var shell = document.querySelector('.lp360-shell');\n if (shell) {\n shell.innerHTML =\n '<div style=\"text-align:center;padding:40px;color:#EF4444;\"><h2>\u26a0\ufe0f Unable to load analytics<\/h2><p>' +\n error.message + '<\/p><p>Please check your attempt ID or try again later.<\/p><\/div>';\n }\n }); \n } else {\n var shell = document.querySelector('.lp360-shell');\n if (shell) {\n shell.innerHTML =\n '<div style=\"text-align:center;padding:40px;\"><h2>Missing Attempt ID<\/h2><p>Please provide a valid attempt_id in the URL.<\/p><\/div>';\n }\n }\n\n \/\/ ---- Tab switching (with Answer Key) ----\n var tabs = document.querySelectorAll('#lp360-root .lp360-tab');\n var tabOrder = ['basicinfo', 'tracker', 'strengthmap', 'timetracker', 'prediction', 'answerkey'];\n\n var isProgrammaticScroll = false;\n\nfunction activateTab(tabId) {\n var allTabs = document.querySelectorAll('#lp360-root .lp360-tab');\n for (var at = 0; at < allTabs.length; at++) {\n allTabs[at].classList.remove('active');\n allTabs[at].setAttribute('aria-selected', 'false');\n }\n var targetTab = document.querySelector('#lp360-root .lp360-tab[data-tab=\"' + tabId + '\"]');\n if (targetTab) {\n targetTab.classList.add('active');\n targetTab.setAttribute('aria-selected', 'true');\n }\n var panels = document.querySelectorAll('#lp360-root .lp360-tab-panel');\n for (var ap = 0; ap < panels.length; ap++) {\n panels[ap].classList.remove('active');\n }\n var targetPanel = document.getElementById('lp360-panel-' + tabId);\n if (targetPanel) {\n targetPanel.classList.add('active');\n var stickyOffset = 0;\n var tabsBar = document.querySelector('#lp360-root .lp360-tabs');\n if (tabsBar) {\n stickyOffset = tabsBar.getBoundingClientRect().height + 16;\n }\n var targetTop = targetPanel.getBoundingClientRect().top + window.pageYOffset - stickyOffset;\n isProgrammaticScroll = true;\n window.scrollTo({\n top: targetTop,\n behavior: 'smooth'\n });\n setTimeout(function() {\n isProgrammaticScroll = false;\n }, 700);\n }\n if (tabId === 'tracker') {\n setTimeout(function() {\n renderTracker(null);\n renderAccuracyTracker(null);\n }, 50);\n }\n if (tabId === 'timetracker') {\n setTimeout(function() {\n renderTimeGauges();\n }, 50);\n }\n if (tabId === 'strengthmap') {\n setTimeout(drawMindMapCurves, 50);\n }\n}\n \n\n for (var ti = 0; ti < tabs.length; ti++) {\n var tab = tabs[ti];\n tab.addEventListener('click', function() {\n var tabId = this.getAttribute('data-tab');\n activateTab(tabId);\n });\n }\n\n \/\/ ---- Scroll-position tab highlighting (replaces auto-advance) ----\nfunction updateActiveTabOnScroll() {\n if (isProgrammaticScroll) { return; }\n var tabsBar = document.querySelector('#lp360-root .lp360-tabs');\n var stickyOffset = 24;\n if (tabsBar) {\n stickyOffset = tabsBar.getBoundingClientRect().height + 24;\n }\n var panels = document.querySelectorAll('#lp360-root .lp360-tab-panel');\n var currentTabId = tabOrder[0];\n for (var i = 0; i < panels.length; i++) {\n var panel = panels[i];\n var rect = panel.getBoundingClientRect();\n if (rect.top - stickyOffset <= 0) {\n currentTabId = panel.id.replace('lp360-panel-', '');\n }\n }\n \n \/\/ If scrolled to the bottom, force the last tab to be active\n if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 5) {\n if (panels.length > 0) {\n currentTabId = panels[panels.length - 1].id.replace('lp360-panel-', '');\n }\n }\n var allTabs = document.querySelectorAll('#lp360-root .lp360-tab');\n for (var at = 0; at < allTabs.length; at++) {\n allTabs[at].classList.remove('active');\n allTabs[at].setAttribute('aria-selected', 'false');\n }\n var activeTabBtn = document.querySelector('#lp360-root .lp360-tab[data-tab=\"' + currentTabId + '\"]');\n if (activeTabBtn) {\n activeTabBtn.classList.add('active');\n activeTabBtn.setAttribute('aria-selected', 'true');\n }\n var allPanels = document.querySelectorAll('#lp360-root .lp360-tab-panel');\n for (var ap = 0; ap < allPanels.length; ap++) {\n allPanels[ap].classList.remove('active');\n }\n var activePanelEl = document.getElementById('lp360-panel-' + currentTabId);\n if (activePanelEl) { activePanelEl.classList.add('active'); }\n}\nvar scrollSpyTimeout;\nwindow.addEventListener('scroll', function() {\n clearTimeout(scrollSpyTimeout);\n scrollSpyTimeout = setTimeout(updateActiveTabOnScroll, 60);\n});\nupdateActiveTabOnScroll();\n\n \/\/ ---- Resize handler ----\n var resizeTimer;\n window.addEventListener('resize', function() {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(function() {\n var trackerPanel = document.getElementById('lp360-panel-tracker');\n if (trackerPanel) {\n if (trackerPanel.classList.contains('active')) {\n renderTracker(null);\n renderAccuracyTracker(null);\n }\n }\n var timeTrackerPanel = document.getElementById('lp360-panel-timetracker');\n if (timeTrackerPanel) {\n if (timeTrackerPanel.classList.contains('active')) {\n renderTimeGauges();\n }\n }\n drawMindMapCurves();\n }, 200);\n });\n\/\/ ---- Info button delegation ----\n document.addEventListener('click', function(e) {\n var btn = e.target.closest('.lp360-info-btn');\n if (btn) {\n var key = btn.getAttribute('data-info-key');\n if (key) {\n e.preventDefault();\n showInfoPopup(key);\n }\n }\n });\n\n document.addEventListener('click', function(e) {\n var qEl = e.target.closest('.lp360-dm-chip, .lp360-time-card-badge');\n if (qEl) {\n var qNum = qEl.getAttribute('data-qnum');\n if (qNum) {\n e.preventDefault();\n if (typeof window.lp360JumpToAnswerKeyQuestion === 'function') {\n window.lp360JumpToAnswerKeyQuestion(qNum);\n } else {\n var tabBtn = document.querySelector('#lp360-root .lp360-tab[data-tab=\"answerkey\"]');\n if (tabBtn) { tabBtn.click(); }\n }\n }\n }\n });\n\n \/\/ ---- CMA Foundation Score Prediction progress bar (additive, presentation-only) ----\n function updatePredScoreBar() {\n var obtainedEl = document.getElementById('lp360-pred-score-obtained');\n var totalEl = document.getElementById('lp360-pred-score-total');\n var markerEl = document.getElementById('lp360-pred-score-progress-marker');\n var badgeEl = document.getElementById('lp360-pred-score-progress-badge');\n if (!obtainedEl) { return; }\n if (!totalEl) { return; }\n if (!markerEl) { return; }\n if (!badgeEl) { return; }\n var obtained = parseFloat(obtainedEl.textContent) || 0;\n var total = parseFloat(totalEl.textContent) || 1;\n var pct = 0;\n if (total > 0) {\n pct = (obtained \/ total) * 100;\n }\n if (pct < 0) { pct = 0; }\n if (pct > 100) { pct = 100; }\n markerEl.style.left = pct + '%';\n badgeEl.style.left = pct + '%';\n badgeEl.textContent = Math.round(pct) + '%';\n }\n var predScoreObserverTarget = document.getElementById('lp360-pred-score-obtained');\n if (predScoreObserverTarget) {\n var predScoreObserver = new MutationObserver(updatePredScoreBar);\n predScoreObserver.observe(predScoreObserverTarget, { childList: true, characterData: true, subtree: true });\n updatePredScoreBar();\n }\n\n})();\n \n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>ICMA Launchpad 360 CMA Launchpad 360 Basic Info Tracker Strength Map Time Tracker Prediction Answer Key Basic Info YOUR SCORE […]<\/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-260","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/massgraduates.com\/index.php\/wp-json\/wp\/v2\/pages\/260","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=260"}],"version-history":[{"count":2,"href":"https:\/\/massgraduates.com\/index.php\/wp-json\/wp\/v2\/pages\/260\/revisions"}],"predecessor-version":[{"id":336,"href":"https:\/\/massgraduates.com\/index.php\/wp-json\/wp\/v2\/pages\/260\/revisions\/336"}],"wp:attachment":[{"href":"https:\/\/massgraduates.com\/index.php\/wp-json\/wp\/v2\/media?parent=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}