Launchpad 360 \u2013 Dashboard<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.js\"><\/script>\n <style>\n \/* === YOUR ORIGINAL CSS \u2013 KEPT INTACT === *\/\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n :root {\n --cream: #FDF6EE;\n --cream-2: #FAF0E2;\n --cream-border: #EDD9C0;\n --card-warm: #FFF8F0;\n --card-mid: #F5E9D8;\n --espresso: #2C1A0E;\n --walnut: #5C3A1E;\n --mocha: #8A5C3C;\n --caramel: #C4855A;\n --accent: #E8521A;\n --accent-lt: #FF7B3A;\n --accent-pale: #FDEEE6;\n --green: #2E7D52;\n --green-lt: #D3F0E3;\n --red: #C0392B;\n --blue: #1B4F8A;\n --gold: #C98B2B;\n --gold-lt: #FFF3D0;\n --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n }\n body {\n font-family: var(--font);\n background: var(--cream-2);\n min-height: 100vh;\n padding: 28px 16px;\n background-image:\n radial-gradient(ellipse 700px 500px at 8% 4%, rgba(232,82,26,0.06) 0%, transparent 68%),\n radial-gradient(ellipse 500px 400px at 92% 96%, rgba(196,133,90,0.07) 0%, transparent 65%);\n }\n .wrapper {\n max-width: 1380px;\n margin: 0 auto;\n background: var(--cream);\n border-radius: 28px;\n padding: 44px 52px 52px;\n box-shadow: 0 0 0 1.5px var(--cream-border), 0 20px 70px rgba(44,26,14,0.10);\n position: relative;\n overflow: hidden;\n }\n .wrapper::before {\n content: '';\n position: absolute; top: 0; right: 0;\n width: 300px; height: 300px;\n background-image: radial-gradient(circle, rgba(232,82,26,0.06) 1px, transparent 1px);\n background-size: 18px 18px;\n border-radius: 0 28px 0 0;\n pointer-events: none;\n }\n \/* HEADER *\/\n .dash-header {\n display: flex; align-items: center; justify-content: space-between;\n margin-bottom: 0;\n padding-bottom: 24px;\n border-bottom: 1.5px solid var(--cream-border);\n }\n .dash-logo { display: flex; align-items: center; gap: 14px; }\n .dash-logo-mark {\n width: 50px; height: 50px;\n background: linear-gradient(135deg, var(--accent), var(--accent-lt));\n border-radius: 14px;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 8px 22px rgba(232,82,26,0.32);\n flex-shrink: 0;\n }\n .dash-logo-mark svg { width: 24px; height: 24px; fill: #fff; }\n .dash-title-wrap h1 {\n font-size: 24px; font-weight: 800;\n color: var(--espresso); letter-spacing: -0.3px; line-height: 1.1;\n }\n .dash-title-wrap h1 span { color: var(--accent); }\n .dash-title-wrap p { font-size: 13px; color: var(--mocha); margin-top: 3px; font-weight: 500; }\n .dash-date {\n font-size: 13px; font-weight: 600; color: var(--mocha);\n background: var(--card-mid); border: 1.5px solid var(--cream-border);\n border-radius: 10px; padding: 8px 16px;\n }\n \/* NAV *\/\n .nav-menu {\n display: flex; align-items: center; gap: 4px;\n background: var(--card-mid);\n border: 1.5px solid var(--cream-border);\n border-radius: 14px;\n padding: 6px;\n margin: 24px 0 36px;\n }\n .nav-item {\n display: flex; align-items: center; gap: 8px;\n padding: 9px 20px;\n border-radius: 10px;\n font-size: 13.5px; font-weight: 600;\n color: var(--mocha);\n cursor: pointer;\n transition: all 0.18s ease;\n border: none; background: none; font-family: var(--font);\n white-space: nowrap;\n }\n .nav-item svg { width: 16px; height: 16px; fill: currentColor; opacity: 0.7; }\n .nav-item:hover { background: var(--cream); color: var(--espresso); }\n .nav-item.active {\n background: var(--accent);\n color: #fff;\n box-shadow: 0 4px 14px rgba(232,82,26,0.30);\n }\n .nav-item.active svg { opacity: 1; }\n .nav-sep {\n width: 1.5px; height: 22px;\n background: var(--cream-border);\n border-radius: 2px; margin: 0 2px; flex-shrink: 0;\n }\n \/* TAB PANELS *\/\n .tab-panel { display: none; }\n .tab-panel.active { display: block; animation: fadeUp 0.4s ease both; }\n \/* SECTION HEADER *\/\n .section-header {\n display: flex; align-items: center; gap: 20px;\n margin-bottom: 10px; margin-top: 48px;\n }\n .sh-line { flex: 1; height: 1.5px; background: linear-gradient(90deg, var(--cream-border), transparent); }\n .section-header h2 {\n font-size: 60px; font-weight: 900;\n color: var(--espresso); letter-spacing: -2px; line-height: 1; white-space: nowrap;\n }\n .section-header h2 em { font-style: normal; color: var(--accent); }\n .section-header h2.sub-heading {\n font-size: 34px; font-weight: 800; letter-spacing: -1px;\n }\n \/* SCORE INFO TITLE *\/\n .score-info-title { display: flex; align-items: center; gap: 12px; margin-bottom: 0; }\n .si-badge {\n background: var(--accent); color: #fff;\n font-size: 11px; font-weight: 800; letter-spacing: 2px;\n text-transform: uppercase; padding: 5px 11px; border-radius: 6px;\n flex-shrink: 0; line-height: 1;\n }\n .si-heading { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -1px; }\n .si-heading .t-dark { color: var(--espresso); }\n .si-heading .t-accent { color: var(--accent); }\n \/* SCORE MATRIX *\/\n .sm-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; margin-bottom: 36px !important; }\n .card {\n background: var(--card-warm);\n border: 1.5px solid var(--cream-border);\n border-radius: 22px; padding: 34px 38px;\n box-shadow: 0 4px 20px rgba(44,26,14,0.05);\n position: relative; overflow: hidden;\n }\n .card::after {\n content: '';\n position: absolute; bottom: -36px; right: -36px;\n width: 130px; height: 130px; border-radius: 50%;\n background: radial-gradient(circle, var(--cream-border) 0%, transparent 70%);\n pointer-events: none;\n }\n .info-card-inner { display: flex; flex-direction: column; height: 100%; gap: 0; }\n .info-card-top {\n display: flex; align-items: center; gap: 16px;\n padding-bottom: 22px; margin-bottom: 22px;\n border-bottom: 1.5px solid var(--cream-border);\n }\n .info-hex {\n width: 52px; height: 52px; flex-shrink: 0;\n background: linear-gradient(135deg, var(--accent), var(--accent-lt));\n border-radius: 15px;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 8px 20px rgba(232,82,26,0.28);\n }\n .info-hex svg { width: 24px; height: 24px; fill: #fff; }\n .info-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; }\n .info-stat-item {\n background: var(--cream-2); border: 1.5px solid var(--cream-border);\n border-radius: 16px; padding: 20px 18px;\n display: flex; align-items: center; gap: 16px;\n transition: transform 0.18s, box-shadow 0.18s;\n }\n .info-stat-item:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(44,26,14,0.10); }\n .info-stat-icon {\n width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n }\n .info-stat-icon svg { width: 22px; height: 22px; fill: #fff; }\n .isi-blue { background: linear-gradient(135deg,#1B4F8A,#3B82F6); box-shadow: 0 6px 14px rgba(27,79,138,0.30); }\n .isi-green { background: linear-gradient(135deg,#2E7D52,#22C55E); box-shadow: 0 6px 14px rgba(46,125,82,0.30); }\n .isi-red { background: linear-gradient(135deg,#C0392B,#EF4444); box-shadow: 0 6px 14px rgba(192,57,43,0.30); }\n .isi-gold { background: linear-gradient(135deg,#C98B2B,#F59E0B); box-shadow: 0 6px 14px rgba(201,139,43,0.30); }\n .info-stat-body { display: flex; flex-direction: column; min-width: 0; }\n .info-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--mocha); }\n .info-stat-num { font-size: 42px; font-weight: 900; line-height: 1.05; margin: 3px 0 2px; }\n .isn-blue { color: #1B4F8A; }\n .isn-green { color: #2E7D52; }\n .isn-red { color: #C0392B; }\n .isn-gold { color: #C98B2B; }\n .info-stat-sub { font-size: 11.5px; color: var(--caramel); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n \/* Score card *\/\n .score-card {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n text-align: center;\n background: linear-gradient(145deg, #3D2318 0%, #5C3A1E 60%, #7A4C2A 100%);\n border: none; padding: 28px 30px;\n box-shadow: 0 16px 44px rgba(44,26,14,0.26), 0 4px 12px rgba(44,26,14,0.14);\n }\n .score-card::after { display: none; }\n .score-card::before {\n content: ''; position: absolute; inset: 0;\n background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);\n background-size: 16px 16px; border-radius: 20px;\n }\n .sc-eyebrow { font-size: 12px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; color: #ffffff; margin-bottom: 8px; position: relative; z-index: 1; }\n .sc-score { font-size: 72px; font-weight: 900; line-height: 1; color: #fff; position: relative; z-index: 1; text-shadow: 0 4px 16px rgba(0,0,0,0.3); }\n .sc-score sup { font-size: 26px; font-weight: 700; vertical-align: super; color: var(--accent-lt); }\n .sc-divider { width: 44px; height: 2px; background: var(--accent); border-radius: 2px; margin: 10px auto 8px; position: relative; z-index: 1; }\n .sc-sub { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45); letter-spacing: 1.5px; text-transform: uppercase; position: relative; z-index: 1; }\n .sc-future-btn {\n display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;\n padding: 10px 20px; border-radius: 12px;\n background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.22);\n color: #fff; font-size: 13px; font-weight: 700; text-decoration: none;\n letter-spacing: 0.3px; position: relative; z-index: 2; backdrop-filter: blur(6px);\n transition: background 0.22s, border-color 0.22s, transform 0.18s, box-shadow 0.22s; cursor: pointer;\n }\n .sc-future-btn svg { width: 16px; height: 16px; fill: var(--accent-lt); flex-shrink: 0; }\n .sc-future-btn:hover { background: var(--accent); border-color: var(--accent-lt); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,82,26,0.45); }\n \/* ACCURACY TRACKER *\/\n .at-row-1 { display: grid; grid-template-columns: 310px 1fr; gap: 22px; margin-bottom: 22px; }\n .at-row-2 { display: grid; grid-template-columns: 1fr 380px; gap: 22px; margin-bottom: 22px; }\n .card-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }\n .card-hd-icon {\n width: 42px; height: 42px; border-radius: 12px;\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n }\n .card-hd-icon svg { width: 19px; height: 19px; fill: #fff; }\n .chi-accent { background: linear-gradient(135deg,var(--accent),var(--accent-lt)); box-shadow: 0 5px 12px rgba(232,82,26,0.28); }\n .chi-espresso { background: linear-gradient(135deg,var(--espresso),var(--walnut)); box-shadow: 0 5px 12px rgba(44,26,14,0.28); }\n .ch-title { font-size: 15px; font-weight: 700; color: var(--espresso); }\n .ch-sub { font-size: 12px; color: var(--caramel); margin-top: 2px; }\n \/* Donut *\/\n .donut-wrap { display: flex; flex-direction: column; align-items: center; }\n .donut-outer { position: relative; width: 182px; height: 182px; margin: 0 auto 22px; }\n .donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }\n .dr-bg { fill: none; stroke: var(--card-mid); stroke-width: 15; }\n .dr-fg { fill: none; stroke: url(#rg-warm); stroke-width: 15; stroke-dasharray: 535; stroke-dashoffset: 160.5; stroke-linecap: round; }\n .donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }\n .donut-pct { font-size: 46px; font-weight: 900; color: var(--espresso); line-height: 1; }\n .donut-pct sup { font-size: 20px; color: var(--accent); }\n .donut-caption { font-size: 11px; color: var(--mocha); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 5px; }\n .tip-box {\n width: 100%; background: var(--gold-lt); border: 1.5px solid rgba(201,139,43,0.22);\n border-radius: 12px; padding: 13px 15px; display: flex; align-items: flex-start; gap: 11px;\n }\n .tip-ico { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: linear-gradient(135deg,var(--gold),#F59E0B); display: flex; align-items: center; justify-content: center; }\n .tip-ico svg { width: 15px; height: 15px; fill: #fff; }\n .tip-box p { font-size: 13px; color: var(--espresso); font-weight: 600; line-height: 1.55; padding-top: 5px; }\n \/* Chart *\/\n .chart-card-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }\n .chart-area { position: relative; height: 255px; width: 100%; }\n .chart-note {\n margin-top: 18px; background: var(--accent-pale); border: 1.5px solid rgba(232,82,26,0.14);\n border-radius: 12px; padding: 13px 17px; font-size: 13.5px; color: var(--walnut); line-height: 1.55;\n }\n .chart-note strong { color: var(--accent); }\n \/* Score Analytics *\/\n .sa-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }\n .sa-card { background: var(--card-warm); border: 1.5px solid var(--cream-border); border-radius: 22px; overflow: hidden; box-shadow: 0 4px 22px rgba(44,26,14,0.07); display: flex; flex-direction: column; }\n .sa-top-strip { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 16px; border-bottom: 1.5px solid var(--cream-border); background: var(--card-mid); }\n .sa-top-left { display: flex; align-items: center; gap: 12px; }\n .sa-strip-icon { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(44,26,14,0.15); }\n .sa-strip-icon svg { width: 19px; height: 19px; fill: #fff; }\n .sa-missed .sa-strip-icon { background: linear-gradient(135deg, var(--accent), var(--accent-lt)); }\n .sa-luck .sa-strip-icon { background: linear-gradient(135deg, var(--green), #22C55E); }\n .sa-memory .sa-strip-icon { background: linear-gradient(135deg, var(--blue), #3B82F6); }\n .sa-strip-title { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--espresso); }\n .sa-strip-info { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--cream-border); background: var(--cream); color: var(--mocha); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--font); transition: all 0.18s; }\n .sa-strip-info:hover { background: var(--accent); color: #fff; border-color: var(--accent); }\n .sa-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 22px 18px; border-bottom: 1.5px solid var(--cream-border); }\n .sa-desc-box { flex: 1; background: var(--cream-2); border: 1.5px solid var(--cream-border); border-radius: 14px; padding: 14px 16px; }\n .sa-desc-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.8px; color: var(--mocha); margin-bottom: 6px; }\n .sa-desc-text { font-size: 13px; color: var(--walnut); line-height: 1.6; font-weight: 400; }\n .sa-circle-wrap { flex-shrink: 0; text-align: center; }\n .sa-circle { width: 92px; height: 92px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid var(--cream-border); background: var(--cream); box-shadow: 0 6px 18px rgba(44,26,14,0.10); position: relative; }\n .sa-missed .sa-circle { border-color: var(--accent); box-shadow: 0 0 0 5px rgba(232,82,26,0.08), 0 6px 18px rgba(232,82,26,0.18); }\n .sa-luck .sa-circle { border-color: var(--green); box-shadow: 0 0 0 5px rgba(46,125,82,0.08), 0 6px 18px rgba(46,125,82,0.18); }\n .sa-memory .sa-circle { border-color: var(--blue); box-shadow: 0 0 0 5px rgba(27,79,138,0.08), 0 6px 18px rgba(27,79,138,0.18); }\n .sa-circle-num { font-size: 40px; font-weight: 900; line-height: 1; }\n .sa-missed .sa-circle-num { color: var(--accent); }\n .sa-luck .sa-circle-num { color: var(--green); }\n .sa-memory .sa-circle-num { color: var(--blue); }\n .sa-circle-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 2px; color: var(--mocha); }\n .sa-rows-list { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }\n .sa-row { display: flex; align-items: center; justify-content: space-between; background: var(--cream-2); border: 1.5px solid var(--cream-border); border-radius: 13px; padding: 12px 15px; flex: 1; transition: box-shadow 0.18s, transform 0.18s; }\n .sa-row:hover { transform: translateX(3px); box-shadow: 0 4px 14px rgba(44,26,14,0.08); }\n .sa-row-left { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }\n .sa-row-icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n .sa-row-icon svg { width: 16px; height: 16px; fill: #fff; }\n .sa-missed .sa-row-icon { background: linear-gradient(135deg, var(--accent), var(--accent-lt)); box-shadow: 0 3px 8px rgba(232,82,26,0.25); }\n .sa-luck .sa-row-icon { background: linear-gradient(135deg, var(--green), #22C55E); box-shadow: 0 3px 8px rgba(46,125,82,0.25); }\n .sa-memory .sa-row-icon { background: linear-gradient(135deg, var(--blue), #3B82F6); box-shadow: 0 3px 8px rgba(27,79,138,0.25); }\n .sa-row-icon.ri-walnut { background: linear-gradient(135deg, var(--walnut), var(--caramel)); box-shadow: 0 3px 8px rgba(92,58,30,0.25); }\n .sa-row-icon.ri-gold { background: linear-gradient(135deg, var(--gold), #F59E0B); box-shadow: 0 3px 8px rgba(201,139,43,0.25); }\n .sa-row-icon.ri-mocha { background: linear-gradient(135deg, var(--mocha), var(--caramel)); box-shadow: 0 3px 8px rgba(138,92,60,0.25); }\n .sa-row-icon.ri-espresso { background: linear-gradient(135deg, var(--espresso), var(--walnut)); box-shadow: 0 3px 8px rgba(44,26,14,0.28); }\n .sa-row-icon.ri-accent2 { background: linear-gradient(135deg, #C0392B, var(--accent)); box-shadow: 0 3px 8px rgba(192,57,43,0.25); }\n .sa-row-text { min-width: 0; }\n .sa-row-title { font-size: 13.5px; font-weight: 700; color: var(--espresso); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .sa-row-sub { font-size: 11px; font-weight: 500; color: var(--mocha); margin-top: 2px; line-height: 1.3; }\n .sa-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 10px; }\n .sa-row-num { font-size: 30px; font-weight: 900; line-height: 1; min-width: 32px; text-align: right; }\n .sa-missed .sa-row-num { color: var(--accent); }\n .sa-luck .sa-row-num { color: var(--green); }\n .sa-memory .sa-row-num { color: var(--blue); }\n .sa-row-info-btn { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--cream-border); background: var(--cream); color: var(--mocha); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--font); flex-shrink: 0; transition: all 0.16s; }\n .sa-row-info-btn:hover { background: var(--card-mid); border-color: var(--mocha); }\n \/* Score Prediction *\/\n .sp-toggle-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }\n .sp-toggle-label { font-size: 13px; font-weight: 600; color: var(--mocha); }\n .sp-toggle { display: flex; gap: 4px; background: var(--card-mid); border: 1.5px solid var(--cream-border); border-radius: 10px; padding: 4px; }\n .sp-toggle-btn { padding: 7px 16px; border-radius: 7px; font-size: 12.5px; font-weight: 700; border: none; cursor: pointer; font-family: var(--font); transition: all 0.18s; color: var(--mocha); background: transparent; }\n .sp-toggle-btn.active-state { background: linear-gradient(135deg, #1B4F8A, #6B35C4); color: #fff; box-shadow: 0 4px 12px rgba(107,53,196,0.30); }\n .sp-toggle-btn.no-state { background: linear-gradient(135deg, #C0392B, #E8521A); color: #fff; box-shadow: 0 4px 12px rgba(192,57,43,0.28); }\n .sp-grid { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: stretch; margin-bottom: 24px; }\n .sp-score-tile { border-radius: 22px; position: relative; overflow: hidden; min-height: 160px; display: flex; flex-direction: column; justify-content: center; padding: 36px 40px; }\n .sp-score-tile.has-pred { background: linear-gradient(135deg, #1B4F8A 0%, #6B35C4 45%, #E8521A 100%); box-shadow: 0 16px 44px rgba(107,53,196,0.30); animation: sp-tile-float 6s ease-in-out infinite; }\n @keyframes sp-tile-float { 0%,100% { box-shadow: 0 16px 44px rgba(107,53,196,0.30); } 50% { box-shadow: 0 22px 56px rgba(27,79,138,0.38); } }\n .sp-score-tile.has-pred::before { content: ''; position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(270deg,rgba(232,82,26,0.55),rgba(107,53,196,0.55),rgba(27,79,138,0.55),rgba(107,53,196,0.55),rgba(232,82,26,0.55)); background-size: 400% 400%; animation: sp-color-flow 8s ease infinite; pointer-events: none; mix-blend-mode: overlay; }\n @keyframes sp-color-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }\n .sp-score-tile.has-pred::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; border-radius: 22px; }\n .sp-sheen { position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%); animation: sp-sheen-pass 5s ease-in-out infinite; pointer-events: none; }\n @keyframes sp-sheen-pass { 0% { left: -80%; opacity: 0; } 10% { opacity: 1; } 50% { left: 120%; opacity: 0.8; } 51%,100% { opacity: 0; left: 120%; } }\n .sp-score-eyebrow { font-size: 13px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #fff; margin-bottom: 10px; position: relative; z-index: 2; }\n .sp-score-num { font-size: 88px; font-weight: 900; line-height: 1; color: #fff; position: relative; z-index: 2; letter-spacing: -4px; text-shadow: 0 4px 24px rgba(0,0,0,0.22); }\n .sp-score-num span { font-size: 32px; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,0.70); vertical-align: baseline; margin-left: 4px; }\n .sp-score-sub { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.55); margin-top: 8px; position: relative; z-index: 2; }\n .sp-star { position: absolute; z-index: 3; pointer-events: none; color: #fff; line-height: 1; }\n .sp-star svg { display: block; }\n .sp-star.s1 { top: 16px; right: 52px; animation: sp-twinkle 2.2s ease-in-out infinite 0.0s; }\n .sp-star.s2 { top: 44px; right: 22px; animation: sp-twinkle 2.2s ease-in-out infinite 0.55s; }\n .sp-star.s3 { bottom: 24px; right: 80px; animation: sp-twinkle 2.2s ease-in-out infinite 1.1s; }\n .sp-star.s4 { top: 28px; right: 130px; animation: sp-twinkle 2.2s ease-in-out infinite 0.35s; }\n .sp-star.s5 { bottom: 18px; right: 140px; animation: sp-twinkle 2.2s ease-in-out infinite 0.85s; }\n .sp-star.s6 { top: 56px; right: 64px; animation: sp-twinkle 1.8s ease-in-out infinite 1.4s; }\n @keyframes sp-twinkle { 0%,100% { opacity: 0.15; transform: scale(0.7) rotate(0deg); } 30% { opacity: 1; transform: scale(1.3) rotate(15deg); } 60% { opacity: 0.5; transform: scale(0.9) rotate(-8deg); } }\n .sp-score-tile.no-pred { background: linear-gradient(135deg, #e05252 0%, #f07070 45%, #ff9898 100%); box-shadow: 0 16px 44px rgba(192,57,43,0.30); }\n .sp-score-tile.no-pred::before { content: ''; position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(270deg,rgba(255,140,140,0.5),rgba(220,80,80,0.6),rgba(220,80,80,0.6),rgba(255,140,140,0.5)); background-size: 400% 400%; animation: sp-color-flow 8s ease infinite; pointer-events: none; mix-blend-mode: overlay; }\n .sp-score-tile.no-pred::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; border-radius: 22px; }\n .sp-no-pred-content { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; text-align: center; gap: 14px; }\n .sp-no-pred-icon-wrap { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.30); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); animation: sp-icon-pulse 3s ease-in-out infinite; }\n @keyframes sp-icon-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }\n .sp-no-pred-icon-wrap svg { width: 34px; height: 34px; fill: #fff; }\n .sp-no-pred-label { font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -0.5px; }\n .sp-no-pred-sub { font-size: 13px; color: rgba(255,255,255,0.72); font-weight: 500; }\n .sp-star-red { position: absolute; z-index: 3; pointer-events: none; color: #fff; line-height: 1; }\n .sp-star-red.sr1 { top: 18px; right: 44px; animation: sp-twinkle 2.4s ease-in-out infinite 0.0s; }\n .sp-star-red.sr2 { top: 50px; right: 18px; animation: sp-twinkle 2.4s ease-in-out infinite 0.7s; }\n .sp-star-red.sr3 { bottom: 22px; right: 70px; animation: sp-twinkle 2.0s ease-in-out infinite 1.2s; }\n .sp-star-red.sr4 { top: 22px; right: 120px; animation: sp-twinkle 1.8s ease-in-out infinite 0.4s; }\n .sp-star-red.sr5 { bottom: 16px; right: 130px; animation: sp-twinkle 2.2s ease-in-out infinite 0.9s; }\n .sp-info-card { background: var(--card-warm); border: 1.5px solid var(--cream-border); border-radius: 22px; padding: 32px 36px; box-shadow: 0 4px 20px rgba(44,26,14,0.05); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }\n .sp-info-card::after { content: ''; position: absolute; bottom: -30px; right: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, var(--cream-border) 0%, transparent 70%); pointer-events: none; }\n .sp-info-desc { font-size: 14.5px; color: var(--walnut); line-height: 1.7; font-weight: 400; }\n .sp-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }\n .sp-block { border-radius: 20px; border: 1.5px solid var(--cream-border); overflow: hidden; box-shadow: 0 4px 18px rgba(44,26,14,0.06); background: var(--card-warm); display: flex; flex-direction: column; }\n .sp-block-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px 16px; border-bottom: 1.5px solid var(--cream-border); position: relative; overflow: hidden; }\n .sp-inference .sp-block-head { background: linear-gradient(120deg, #ede8f8 0%, #ddd5f5 100%); }\n .sp-suggest .sp-block-head { background: linear-gradient(120deg, #e0f5ee 0%, #c8eede 100%); }\n .sp-block-head-icon { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 12px rgba(0,0,0,0.14); }\n .sp-block-head-icon svg { width: 22px; height: 22px; fill: #fff; }\n .sp-inference .sp-block-head-icon { background: linear-gradient(135deg, #6B35C4, #9B59B6); }\n .sp-suggest .sp-block-head-icon { background: linear-gradient(135deg, #2E7D52, #22C55E); }\n .sp-block-title { font-size: 16px; font-weight: 800; color: var(--espresso); letter-spacing: -0.2px; }\n .sp-block-wave { position: absolute; right: 0; top: 0; bottom: 0; width: 140px; pointer-events: none; overflow: hidden; }\n .sp-block-wave svg { width: 100%; height: 100%; }\n .sp-inputs { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }\n .sp-input-row { display: flex; align-items: center; gap: 12px; background: var(--cream-2); border: 1.5px solid var(--cream-border); border-radius: 13px; padding: 11px 14px; cursor: pointer; transition: box-shadow 0.18s, border-color 0.18s; }\n .sp-input-row:hover { border-color: var(--caramel); box-shadow: 0 4px 14px rgba(44,26,14,0.08); }\n .sp-input-num { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; }\n .sp-inference .sp-input-num { background: linear-gradient(135deg, #6B35C4, #9B59B6); box-shadow: 0 3px 8px rgba(107,53,196,0.30); }\n .sp-suggest .sp-input-num { background: linear-gradient(135deg, #2E7D52, #22C55E); box-shadow: 0 3px 8px rgba(46,125,82,0.28); }\n .sp-input-text { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--mocha); }\n .sp-input-kbd { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: var(--card-mid); border: 1.5px solid var(--cream-border); display: flex; align-items: center; justify-content: center; transition: background 0.16s; }\n .sp-input-kbd svg { width: 16px; height: 16px; fill: var(--mocha); }\n .sp-state-has.hidden, .sp-state-no.hidden { display: none; }\n \/* TIME MATRIX *\/\n .tm-top-layout {\n display: grid;\n grid-template-columns: 1.35fr 1fr;\n gap: 24px;\n margin-bottom: 36px;\n align-items: stretch;\n }\n .tm-tiles-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 18px;\n align-content: start;\n }\n .tm-stat-tile {\n background: var(--card-warm);\n border: 1.5px solid var(--cream-border);\n border-radius: 18px;\n padding: 22px 22px 18px;\n box-shadow: 0 4px 16px rgba(44,26,14,0.05);\n display: flex; align-items: flex-start; gap: 14px;\n transition: transform 0.18s, box-shadow 0.18s;\n position: relative; overflow: hidden;\n }\n .tm-stat-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(44,26,14,0.12); }\n .tm-stat-tile::after {\n content: ''; position: absolute; bottom: -22px; right: -22px;\n width: 80px; height: 80px; border-radius: 50%;\n background: radial-gradient(circle, var(--cream-border) 0%, transparent 70%);\n pointer-events: none;\n }\n .tm-stat-icon { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n .tm-stat-icon svg { width: 21px; height: 21px; fill: #fff; }\n .tsi-accent { background: linear-gradient(135deg,var(--accent),var(--accent-lt)); box-shadow: 0 5px 14px rgba(232,82,26,0.32); }\n .tsi-walnut { background: linear-gradient(135deg,var(--walnut),var(--caramel)); box-shadow: 0 5px 14px rgba(92,58,30,0.28); }\n .tsi-green { background: linear-gradient(135deg,var(--green),#22C55E); box-shadow: 0 5px 14px rgba(46,125,82,0.28); }\n .tsi-mocha { background: linear-gradient(135deg,var(--mocha),var(--caramel)); box-shadow: 0 5px 14px rgba(138,92,60,0.28); }\n .tsi-gold { background: linear-gradient(135deg,var(--gold),#F59E0B); box-shadow: 0 5px 14px rgba(201,139,43,0.28); }\n .tm-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--mocha); }\n .tm-stat-num { font-size: 34px; font-weight: 900; line-height: 1.1; margin: 4px 0 3px; }\n .tsn-accent { color: var(--accent); }\n .tsn-walnut { color: var(--walnut); }\n .tsn-green { color: var(--green); }\n .tsn-mocha { color: var(--mocha); }\n .tsn-gold { color: var(--gold); }\n .tm-stat-unit { font-size: 13px; font-weight: 700; opacity: 0.7; }\n .tm-stat-sub { font-size: 11.5px; color: var(--caramel); font-weight: 500; line-height: 1.3; }\n .tm-stat-tag {\n display: inline-block; margin-top: 6px;\n background: var(--accent-pale); color: var(--accent);\n font-size: 10px; font-weight: 800; letter-spacing: 1px;\n padding: 3px 8px; border-radius: 5px;\n }\n .tm-total-card {\n background: linear-gradient(145deg, #3D2318 0%, #5C3A1E 60%, #7A4C2A 100%);\n border-radius: 22px;\n padding: 36px 40px;\n box-shadow: 0 16px 44px rgba(44,26,14,0.26);\n position: relative; overflow: hidden;\n display: flex; flex-direction: column; justify-content: center;\n margin: 0;\n max-width: 420px;\n height: 100%;\n }\n .tm-total-card::before {\n content: ''; position: absolute; inset: 0;\n background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);\n background-size: 16px 16px; border-radius: 22px; pointer-events: none;\n }\n .tm-hourglass-float {\n position: absolute; right: 32px; top: 50%; transform: translateY(-50%);\n font-size: 80px; opacity: 0.18; pointer-events: none;\n animation: tm-hg-float 4s ease-in-out infinite;\n }\n @keyframes tm-hg-float { 0%,100% { transform: translateY(-50%) rotate(-6deg); } 50% { transform: translateY(calc(-50% - 8px)) rotate(6deg); } }\n .tm-total-label { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 8px; position: relative; z-index: 1; }\n .tm-total-num { font-size: 72px; font-weight: 900; color: #fff; line-height: 1; position: relative; z-index: 1; letter-spacing: -3px; }\n .tm-total-unit { font-size: 28px; font-weight: 600; color: var(--accent-lt); letter-spacing: 0; margin-left: 6px; }\n .tm-total-divider { width: 44px; height: 2px; background: var(--accent); border-radius: 2px; margin: 12px 0; position: relative; z-index: 1; }\n .tm-remaining-row { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }\n .tm-remaining-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(232,82,26,0.3); display: flex; align-items: center; justify-content: center; }\n .tm-remaining-icon svg { width: 14px; height: 14px; fill: var(--accent-lt); }\n .tm-remaining-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.45); }\n .tm-remaining-val { font-size: 20px; font-weight: 900; color: var(--accent-lt); margin-left: 4px; }\n \/* Gauges etc. \u2013 kept as is, no dynamic updates needed for needle positions *\/\n .tt-gauges-row, .tt-inference-row, .ta-cols { display: grid; gap: 22px; }\n .tt-gauges-row { grid-template-columns: repeat(4, 1fr); margin-bottom: 22px; }\n .tt-gauge-card { background: var(--card-warm); border: 1.5px solid var(--cream-border); border-radius: 22px; padding: 24px 20px 20px; box-shadow: 0 4px 18px rgba(44,26,14,0.06); display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; }\n .tt-gauge-label-top { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 18px; }\n .tt-gauge-label-top.lt-accent { color: var(--accent); }\n .tt-gauge-label-top.lt-green { color: var(--green); }\n .tt-gauge-label-top.lt-gold { color: var(--gold); }\n .tt-gauge-label-top.lt-blue { color: var(--blue); }\n .tt-gauge-label-sub-top { font-size: 10px; color: var(--mocha); font-weight: 500; margin-top: -14px; margin-bottom: 12px; text-align: center; line-height: 1.2; }\n .tt-gauge-svg-wrap { position: relative; width: 100%; max-width: 180px; height: auto; aspect-ratio: 180\/100; margin-bottom: 6px; }\n .tt-gauge-svg { width: 100%; height: 100%; overflow: visible; }\n .gauge-zone { cursor: pointer; }\n .gz-path { transition: stroke-width 0.2s, filter 0.2s; }\n .gauge-zone:hover .gz-path { stroke-width: 16 !important; filter: brightness(0.9); }\n .tt-needle-result { font-size: 18px; font-weight: 900; letter-spacing: -0.3px; text-transform: uppercase; margin-top: 8px; }\n .tt-needle-result.nr-accent { color: var(--accent); }\n .tt-needle-result.nr-green { color: var(--green); }\n .tt-needle-result.nr-gold { color: var(--gold); }\n .tt-needle-result.nr-blue { color: var(--blue); }\n .tt-needle-label { font-size: 11px; color: var(--mocha); font-weight: 500; margin-top: 3px; text-align: center; }\n .tt-dynamic-info { margin-top: 14px; font-size: 11px; color: var(--caramel); font-weight: 600; text-align: center; min-height: 28px; background: var(--cream-2); border-radius: 8px; padding: 6px 10px; display: flex; align-items: center; justify-content: center; width: 100%; border: 1.5px dashed var(--cream-border); transition: all 0.2s; }\n .tt-info-bottom { margin-top: 12px; border: 1.5px solid var(--cream-border) !important; background: var(--cream) !important; color: var(--mocha) !important; }\n .tt-inference-row { grid-template-columns: 1fr 1fr; margin-bottom: 36px; }\n .tt-inf-card { background: var(--card-warm); border: 1.5px solid var(--cream-border); border-radius: 22px; padding: 26px 28px; box-shadow: 0 4px 18px rgba(44,26,14,0.06); display: flex; gap: 22px; align-items: flex-start; }\n .tt-inf-left { flex: 1; }\n .tt-inf-badge-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }\n .tt-inf-badge { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n .tt-inf-badge svg { width: 18px; height: 18px; fill: #fff; }\n .tt-inf-badge.ib-accent { background: linear-gradient(135deg,var(--accent),var(--accent-lt)); box-shadow: 0 4px 10px rgba(232,82,26,0.28); }\n .tt-inf-badge.ib-green { background: linear-gradient(135deg,var(--green),#22C55E); box-shadow: 0 4px 10px rgba(46,125,82,0.28); }\n .tt-inf-num { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--espresso); }\n .tt-inf-text { font-size: 14px; color: var(--walnut); line-height: 1.65; font-weight: 400; }\n .tt-inf-text strong { color: var(--accent); font-weight: 800; }\n .tt-inf-sub { font-size: 12px; color: var(--mocha); margin-top: 8px; line-height: 1.5; }\n .tt-bar-chart { flex-shrink: 0; display: flex; align-items: flex-end; gap: 5px; height: 72px; }\n .tt-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }\n .tt-bar { width: 22px; border-radius: 4px 4px 0 0; transition: height 0.3s; }\n .tt-bar.active-accent { background: linear-gradient(180deg, var(--accent-lt), var(--accent)); }\n .tt-bar.active-green { background: linear-gradient(180deg, #22C55E, var(--green)); }\n .tt-bar.inactive { background: var(--card-mid); }\n .tt-bar-x { font-size: 9px; font-weight: 600; color: var(--mocha); text-align: center; white-space: nowrap; }\n .ta-cols { grid-template-columns: repeat(3, 1fr); }\n .ta-card { background: var(--card-warm); border: 1.5px solid var(--cream-border); border-radius: 22px; overflow: hidden; box-shadow: 0 4px 22px rgba(44,26,14,0.07); display: flex; flex-direction: column; }\n .ta-top-strip { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 16px; border-bottom: 1.5px solid var(--cream-border); background: var(--card-mid); }\n .ta-top-left { display: flex; align-items: center; gap: 12px; }\n .ta-strip-icon { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(44,26,14,0.15); }\n .ta-strip-icon svg { width: 19px; height: 19px; fill: #fff; }\n .ta-lag .ta-strip-icon { background: linear-gradient(135deg,var(--accent),var(--accent-lt)); box-shadow: 0 4px 10px rgba(232,82,26,0.28); }\n .ta-waste .ta-strip-icon { background: linear-gradient(135deg,var(--walnut),var(--caramel)); box-shadow: 0 4px 10px rgba(92,58,30,0.25); }\n .ta-gain .ta-strip-icon { background: linear-gradient(135deg,var(--green),#22C55E); box-shadow: 0 4px 10px rgba(46,125,82,0.28); }\n .ta-strip-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--espresso); }\n .ta-info-btn { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--cream-border); background: var(--cream); color: var(--mocha); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.18s; }\n .ta-hero { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 18px; border-bottom: 1.5px solid var(--cream-border); gap: 16px; }\n .ta-desc-box { flex: 1; background: var(--cream-2); border: 1.5px solid var(--cream-border); border-radius: 14px; padding: 14px 16px; }\n .ta-desc-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.8px; color: var(--mocha); margin-bottom: 6px; }\n .ta-desc-text { font-size: 12.5px; color: var(--walnut); line-height: 1.6; font-weight: 400; }\n .ta-donut-wrap { flex-shrink: 0; }\n .ta-donut-outer { position: relative; width: 90px; height: 90px; }\n .ta-donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }\n .ta-dr-bg { fill: none; stroke: var(--card-mid); stroke-width: 10; }\n .ta-dr-fg { fill: none; stroke-width: 10; stroke-dasharray: 245; stroke-linecap: round; }\n .ta-lag .ta-dr-fg { stroke: url(#rg-ta-accent); stroke-dashoffset: 122; }\n .ta-waste .ta-dr-fg { stroke: url(#rg-ta-walnut); stroke-dashoffset: 147; }\n .ta-gain .ta-dr-fg { stroke: url(#rg-ta-green); stroke-dashoffset: 98; }\n .ta-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }\n .ta-donut-num { font-size: 26px; font-weight: 900; line-height: 1; }\n .ta-lag .ta-donut-num { color: var(--accent); }\n .ta-waste .ta-donut-num { color: var(--walnut); }\n .ta-gain .ta-donut-num { color: var(--green); }\n .ta-donut-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--mocha); margin-top: 2px; }\n .ta-focus-section { padding: 16px 18px 18px; flex: 1; }\n .ta-focus-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--mocha); margin-bottom: 10px; }\n .ta-row { display: flex; align-items: center; justify-content: space-between; background: var(--cream-2); border: 1.5px solid var(--cream-border); border-radius: 13px; padding: 11px 14px; margin-bottom: 8px; transition: transform 0.18s, box-shadow 0.18s; }\n .ta-row:hover { transform: translateX(3px); box-shadow: 0 4px 14px rgba(44,26,14,0.08); }\n .ta-row-left { display: flex; align-items: center; gap: 10px; flex: 1; }\n .ta-row-icon { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n .ta-row-icon svg { width: 15px; height: 15px; fill: #fff; }\n .ta-row-text { min-width: 0; }\n .ta-row-title { font-size: 12.5px; font-weight: 700; color: var(--espresso); }\n .ta-row-qs { font-size: 11px; color: var(--mocha); margin-top: 1px; }\n .ta-row-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }\n .ta-row-info-btn { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--cream-border); background: var(--cream); color: var(--mocha); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.16s; }\n @media (max-width: 1100px) {\n .sp-grid, .sp-blocks, .at-row-1, .at-row-2, .tm-top-layout, .tt-gauges-row, .tt-inference-row, .ta-cols { grid-template-columns: 1fr; }\n }\n @media (max-width: 760px) {\n .wrapper { padding: 22px 18px 36px; border-radius: 18px; }\n .sa-cols, .sm-grid, .tm-tiles-grid, .tt-gauges-row { grid-template-columns: 1fr; }\n .dash-header { flex-direction: column; gap: 14px; align-items: flex-start; }\n .nav-menu { overflow-x: auto; }\n }\n @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }\n .dash-header { animation: fadeUp 0.4s ease both 0.05s; }\n .nav-menu { animation: fadeUp 0.4s ease both 0.12s; }\n <\/style>\n<\/head>\n<body>\n<div class=\"wrapper\">\n\n <header class=\"dash-header\">\n <div class=\"dash-logo\">\n <div class=\"dash-logo-mark\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M13.5 2c-5.621 0-10.211 4.443-10.475 10h-3.025l5 6.625 5-6.625h-2.975c.257-3.351 3.06-6 6.475-6 3.584 0 6.5 2.916 6.5 6.5s-2.916 6.5-6.5 6.5c-1.863 0-3.542-.793-4.728-2.053l-2.427 3.216c1.877 1.754 4.389 2.837 7.155 2.837 5.79 0 10.5-4.71 10.5-10.5s-4.71-10.5-10.5-10.5z\"><\/path><\/svg>\n <\/div>\n <div class=\"dash-title-wrap\">\n <h1>Launchpad <span>360<\/span><\/h1>\n <p>Performance Intelligence Dashboard<\/p>\n <\/div>\n <\/div>\n <div class=\"dash-date\">\ud83d\udcc5 Last Updated: <span id=\"current-date\"><\/span><\/div>\n <\/header>\n\n <nav class=\"nav-menu\">\n <button class=\"nav-item active\" data-tab=\"score-matrix\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"><\/path><\/svg>\n Score Matrix\n <\/button>\n <div class=\"nav-sep\"><\/div>\n <button class=\"nav-item\" data-tab=\"time-matrix\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z\"><\/path><\/svg>\n Time Matrix\n <\/button>\n <\/nav>\n\n \n <div class=\"tab-panel active\" id=\"tab-score-matrix\">\n <div class=\"section-header\">\n <h2>Score <em>Matrix<\/em><\/h2>\n <div class=\"sh-line\"><\/div>\n <\/div>\n\n <div class=\"sm-grid\">\n <div class=\"card\">\n <div class=\"info-card-inner\">\n <div class=\"info-card-top\">\n <div class=\"info-hex\"><svg viewBox=\"0 0 24 24\"><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14H7v-2h3v2zm0-4H7v-2h3v2zm4 4h-3v-2h3v2zm0-4h-3v-2h3v2z\"><\/path><\/svg><\/div>\n <div class=\"score-info-title\">\n <span class=\"si-badge\">01<\/span>\n <div class=\"si-heading\"><span class=\"t-dark\">Score <\/span><span class=\"t-accent\">Info<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"info-stat-grid\">\n <div class=\"info-stat-item\">\n <div class=\"info-stat-icon isi-blue\"><svg viewBox=\"0 0 24 24\"><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 14H7v-2h10v2zm0-4H7v-2h10v2zm-3-4H7V7h7v2z\"><\/path><\/svg><\/div>\n <div class=\"info-stat-body\">\n <div class=\"info-stat-label\">Attempted<\/div>\n <div class=\"info-stat-num isn-blue\" id=\"stat-attempted\">0<\/div>\n <div class=\"info-stat-sub\">Questions Total<\/div>\n <\/div>\n <\/div>\n <div class=\"info-stat-item\">\n <div class=\"info-stat-icon isi-green\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\"><\/path><\/svg><\/div>\n <div class=\"info-stat-body\">\n <div class=\"info-stat-label\">Correct<\/div>\n <div class=\"info-stat-num isn-green\" id=\"stat-correct\">0<\/div>\n <div class=\"info-stat-sub\">Answered Right<\/div>\n <\/div>\n <\/div>\n <div class=\"info-stat-item\">\n <div class=\"info-stat-icon isi-red\"><svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"><\/path><\/svg><\/div>\n <div class=\"info-stat-body\">\n <div class=\"info-stat-label\">Wrong<\/div>\n <div class=\"info-stat-num isn-red\" id=\"stat-wrong\">0<\/div>\n <div class=\"info-stat-sub\">Need Review<\/div>\n <\/div>\n <\/div>\n <div class=\"info-stat-item\">\n <div class=\"info-stat-icon isi-gold\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"><\/path><\/svg><\/div>\n <div class=\"info-stat-body\">\n <div class=\"info-stat-label\">Skipped<\/div>\n <div class=\"info-stat-num isn-gold\" id=\"stat-skipped\">0<\/div>\n <div class=\"info-stat-sub\">Left Unanswered<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card score-card\">\n <div class=\"sc-eyebrow\">TOTAL SCORE<\/div>\n <div class=\"sc-score\" id=\"total-score\">0<sup id=\"total-max\">\/0<\/sup><\/div>\n <div class=\"sc-divider\"><\/div>\n <div class=\"sc-sub\" id=\"score-sub\">—<\/div>\n <a href=\"#\" class=\"sc-future-btn sc-future-btn-nav\" data-target-tab=\"score-matrix\" data-target-section=\"score-prediction\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z\"><\/path><\/svg>\n Know Your Future Score\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"section-header\">\n <h2 class=\"sub-heading\">Accuracy <em>Tracker<\/em><\/h2>\n <div class=\"sh-line\"><\/div>\n <\/div>\n <div class=\"at-row-1\">\n <div class=\"card\">\n <div class=\"card-hd\" style=\"margin-bottom:26px;\">\n <div class=\"card-hd-icon chi-accent\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"2\"><\/circle><\/svg>\n <\/div>\n <div><div class=\"ch-title\">Test Accuracy<\/div><\/div>\n <\/div>\n <div class=\"donut-wrap\">\n <div class=\"donut-outer\">\n <svg class=\"donut-svg\" viewBox=\"0 0 182 182\">\n <defs><linearGradient id=\"rg-warm\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#E8521A\"><\/stop><stop offset=\"100%\" stop-color=\"#FF7B3A\"><\/stop><\/linearGradient><\/defs>\n <circle class=\"dr-bg\" cx=\"91\" cy=\"91\" r=\"85\"><\/circle>\n <circle class=\"dr-fg\" id=\"donut-fill\" cx=\"91\" cy=\"91\" r=\"85\"><\/circle>\n <\/svg>\n <div class=\"donut-center\">\n <div class=\"donut-pct\" id=\"test-accuracy-pct\">0<sup>%<\/sup><\/div>\n <div class=\"donut-caption\">Accuracy<\/div>\n <\/div>\n <\/div>\n <div class=\"tip-box\">\n <div class=\"tip-ico\"><svg viewBox=\"0 0 24 24\"><path d=\"M3.5 18.5l6-6 4 4L22 6.92 20.59 5.5l-7.09 8.09-4-4L2 17.09z\"><\/path><\/svg><\/div>\n <p id=\"accuracy-tip-text\">Keep it up! You’re on the right track.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"chart-card-head\">\n <div class=\"card-hd\" style=\"margin-bottom:0\">\n <div class=\"card-hd-icon chi-espresso\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M3.5 18.5l6-6 4 4L22 6.92 20.59 5.5l-7.09 8.09-4-4L2 17.09z\"><\/path><\/svg>\n <\/div>\n <div>\n <div class=\"ch-title\">Accuracy Map<\/div>\n <div class=\"ch-sub\">Your accuracy trend over time<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"chart-area\"><canvas id=\"accChart\"><\/canvas><\/div>\n <div class=\"chart-note\" id=\"accuracy-map-note\">Loading accuracy data…<\/div>\n <\/div>\n <\/div>\n <div class=\"at-row-2\">\n <div class=\"sp-info-card\">\n <p class=\"sp-info-desc\">This section provides a strategic review of your test performance. By analysing your current trends, test consistency, and topic-level accuracy, our AI identifies key areas for improvement and formulates a plan to help you achieve your targets.<\/p>\n <\/div>\n <div class=\"sp-score-tile has-pred\" id=\"pred-acc-tile\">\n <div class=\"sp-sheen\"><\/div>\n <span class=\"sp-star s1\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s2\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s3\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s4\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s5\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s6\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <div class=\"sp-score-eyebrow\">PREDICTED ACCURACY<\/div>\n <div class=\"sp-score-num\" id=\"predicted-accuracy-num\">0<span>%<\/span><\/div>\n <div class=\"sp-score-sub\" id=\"predicted-accuracy-sub\">Based on current performance trend<\/div>\n <\/div>\n <\/div>\n\n <div class=\"sp-blocks\" style=\"margin-bottom: 32px;\">\n <div class=\"sp-block sp-inference\">\n <div class=\"sp-block-head\">\n <div class=\"sp-block-head-icon\"><svg viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z\"><\/path><\/svg><\/div>\n <span class=\"sp-block-title\">Inference<\/span>\n <div class=\"sp-block-wave\"><svg viewBox=\"0 0 140 80\" preserveAspectRatio=\"none\" fill=\"none\"><path d=\"M0 40 Q35 10 70 40 Q105 70 140 40\" stroke=\"rgba(107,53,196,0.18)\" stroke-width=\"2\" fill=\"none\"><\/path><path d=\"M0 55 Q35 25 70 55 Q105 85 140 55\" stroke=\"rgba(107,53,196,0.10)\" stroke-width=\"2\" fill=\"none\"><\/path><\/svg><\/div>\n <\/div>\n <div class=\"sp-inputs\" style=\"padding: 24px; display: block; height: 100%;\" id=\"inference-text\">\n <p>Loading inference…<\/p>\n <\/div>\n <\/div>\n <div class=\"sp-block sp-suggest\">\n <div class=\"sp-block-head\">\n <div class=\"sp-block-head-icon\"><svg viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z\"><\/path><\/svg><\/div>\n <span class=\"sp-block-title\">Action Plan<\/span>\n <div class=\"sp-block-wave\"><svg viewBox=\"0 0 140 80\" preserveAspectRatio=\"none\" fill=\"none\"><path d=\"M0 40 Q35 10 70 40 Q105 70 140 40\" stroke=\"rgba(46,125,82,0.18)\" stroke-width=\"2\" fill=\"none\"><\/path><path d=\"M0 55 Q35 25 70 55 Q105 85 140 55\" stroke=\"rgba(46,125,82,0.10)\" stroke-width=\"2\" fill=\"none\"><\/path><\/svg><\/div>\n <\/div>\n <div class=\"sp-inputs\" style=\"padding: 24px; display: block; height: 100%;\" id=\"actionplan-text\">\n <p>Loading action plan…<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section-header\">\n <h2 class=\"sub-heading\">Score <em>Analytics<\/em><\/h2>\n <div class=\"sh-line\"><\/div>\n <\/div>\n <div class=\"sa-cols\">\n \n <div class=\"sa-card sa-missed\">\n <div class=\"sa-top-strip\">\n <div class=\"sa-top-left\">\n <div class=\"sa-strip-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"><\/path><\/svg><\/div>\n <span class=\"sa-strip-title\">Missed Score<\/span>\n <\/div>\n <button class=\"sa-strip-info\">i<\/button>\n <\/div>\n <div class=\"sa-hero-row\">\n <div class=\"sa-desc-box\"><div class=\"sa-desc-label\">Description<\/div><div class=\"sa-desc-text\">Questions you answered incorrectly. Reviewing these helps identify weak areas and patterns in your mistakes.<\/div><\/div>\n <div class=\"sa-circle-wrap\"><div class=\"sa-circle\"><div class=\"sa-circle-num\" id=\"missed-score-value\">0<\/div><div class=\"sa-circle-label\">Missed<\/div><\/div><\/div>\n <\/div>\n <div class=\"sa-rows-list\" id=\"missed-rows-list\">\n \n <div class=\"sa-row\"><div class=\"sa-row-left\"><div class=\"sa-row-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-.5-13H13v6l5.25 3.15-.75 1.23L11.5 14V7z\"><\/path><\/svg><\/div><div class=\"sa-row-text\"><div class=\"sa-row-title\">Fatigue Miss<\/div><div class=\"sa-row-sub\">\u2014<\/div><\/div><\/div><div class=\"sa-row-right\"><div class=\"sa-row-num\">0<\/div><button class=\"sa-row-info-btn\">i<\/button><\/div><\/div>\n <\/div>\n <\/div>\n \n <div class=\"sa-card sa-luck\">\n <div class=\"sa-top-strip\">\n <div class=\"sa-top-left\">\n <div class=\"sa-strip-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 8C8 10 5.9 16.17 3.82 21.34L5.71 22l1-2.3A4.49 4.49 0 0 0 8 20C19 20 22 3 22 3c-1 2-8 2-8 2s4-4 3-7c-3 2-4.5 5-4.5 5S17 0 12 0C10 4 13 8 17 8z\"><\/path><\/svg><\/div>\n <span class=\"sa-strip-title\">Luck Score<\/span>\n <\/div>\n <button class=\"sa-strip-info\">i<\/button>\n <\/div>\n <div class=\"sa-hero-row\">\n <div class=\"sa-desc-box\"><div class=\"sa-desc-label\">Description<\/div><div class=\"sa-desc-text\">Questions you got right by chance without strong knowledge. These are fragile wins \u2014 understanding them deeply turns luck into genuine ability.<\/div><\/div>\n <div class=\"sa-circle-wrap\"><div class=\"sa-circle\"><div class=\"sa-circle-num\" id=\"luck-score-value\">0<\/div><div class=\"sa-circle-label\">Luck<\/div><\/div><\/div>\n <\/div>\n <div class=\"sa-rows-list\" id=\"luck-rows-list\">\n <div class=\"sa-row\"><div class=\"sa-row-left\"><div class=\"sa-row-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7 8-11.5C20 5.81 16.19 2 11.5 2zm1 14.5h-2v-2h2v2zm0-4h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z\"><\/path><\/svg><\/div><div class=\"sa-row-text\"><div class=\"sa-row-title\">Decision Luck<\/div><div class=\"sa-row-sub\">\u2014<\/div><\/div><\/div><div class=\"sa-row-right\"><div class=\"sa-row-num\">0<\/div><button class=\"sa-row-info-btn\">i<\/button><\/div><\/div>\n <\/div>\n <\/div>\n \n <div class=\"sa-card sa-memory\">\n <div class=\"sa-top-strip\">\n <div class=\"sa-top-left\">\n <div class=\"sa-strip-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z\"><\/path><\/svg><\/div>\n <span class=\"sa-strip-title\">Memory Score<\/span>\n <\/div>\n <button class=\"sa-strip-info\">i<\/button>\n <\/div>\n <div class=\"sa-hero-row\">\n <div class=\"sa-desc-box\"><div class=\"sa-desc-label\">Description<\/div><div class=\"sa-desc-text\">Questions answered correctly from memory and retention. This measures your recall strength \u2014 the more here, the better your long-term learning.<\/div><\/div>\n <div class=\"sa-circle-wrap\"><div class=\"sa-circle\"><div class=\"sa-circle-num\" id=\"memory-score-value\">0<\/div><div class=\"sa-circle-label\">Memory<\/div><\/div><\/div>\n <\/div>\n <div class=\"sa-rows-list\" id=\"memory-rows-list\">\n <div class=\"sa-row\"><div class=\"sa-row-left\"><div class=\"sa-row-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M7 2v11h3v9l7-12h-4l4-8z\"><\/path><\/svg><\/div><div class=\"sa-row-text\"><div class=\"sa-row-title\">Quick Recall Memory<\/div><div class=\"sa-row-sub\">\u2014<\/div><\/div><\/div><div class=\"sa-row-right\"><div class=\"sa-row-num\">0<\/div><button class=\"sa-row-info-btn\">i<\/button><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section-header\" id=\"score-prediction\">\n <h2 class=\"sub-heading\">Score <em>Prediction<\/em><\/h2>\n <div class=\"sh-line\"><\/div>\n <\/div>\n <div class=\"sp-toggle-row\">\n <span class=\"sp-toggle-label\">Preview state:<\/span>\n <div class=\"sp-toggle\">\n <button class=\"sp-toggle-btn active-state\" id=\"btnHas\" onclick=\"setScoreState(true)\">\u2726 Has Prediction<\/button>\n <button class=\"sp-toggle-btn\" id=\"btnNo\" onclick=\"setScoreState(false)\">\u2715 No Prediction<\/button>\n <\/div>\n <\/div>\n <div class=\"sp-grid\">\n <div class=\"sp-info-card\">\n <p class=\"sp-info-desc\">Score prediction means the ability to estimate outcomes accurately using intelligent analytics. Our AI engine analyses your past performance trends, mistake patterns, and practice frequency to compute a reliable score range \u2014 helping you set realistic goals and optimise your preparation strategy before the exam.<\/p>\n <\/div>\n <div class=\"sp-score-tile has-pred sp-state-has\" id=\"tileHas\">\n <div class=\"sp-sheen\"><\/div>\n <span class=\"sp-star s1\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s2\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s3\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s4\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s5\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s6\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <div class=\"sp-score-eyebrow\">PREDICTED SCORE<\/div>\n <div class=\"sp-score-num\" id=\"predicted-score-num\">0<span>\/250<\/span><\/div>\n <div class=\"sp-score-sub\" id=\"predicted-score-sub\">Based on current performance trend<\/div>\n <\/div>\n <div class=\"sp-score-tile no-pred sp-state-no hidden\" id=\"tileNo\">\n <span class=\"sp-star-red sr1\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star-red sr2\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star-red sr3\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star-red sr4\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star-red sr5\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <div class=\"sp-no-pred-content\">\n <div class=\"sp-no-pred-icon-wrap\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z\"><\/path><\/svg><\/div>\n <div class=\"sp-no-pred-label\">No Prediction<\/div>\n <div class=\"sp-no-pred-sub\">Complete more tests with realistic exam conditions to generate a prediction.<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"sp-blocks\">\n <div class=\"sp-block sp-inference\">\n <div class=\"sp-block-head\">\n <div class=\"sp-block-head-icon\"><svg viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z\"><\/path><\/svg><\/div>\n <span class=\"sp-block-title\">Inference<\/span>\n <div class=\"sp-block-wave\"><svg viewBox=\"0 0 140 80\" preserveAspectRatio=\"none\" fill=\"none\"><path d=\"M0 40 Q35 10 70 40 Q105 70 140 40\" stroke=\"rgba(107,53,196,0.18)\" stroke-width=\"2\" fill=\"none\"><\/path><\/svg><\/div>\n <\/div>\n <div class=\"sp-inputs\" id=\"inference-full\" style=\"padding: 24px; display: block; height: 100%;\">\n <p>Loading prediction inference…<\/p>\n <\/div>\n <\/div>\n <div class=\"sp-block sp-suggest\">\n <div class=\"sp-block-head\">\n <div class=\"sp-block-head-icon\"><svg viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z\"><\/path><\/svg><\/div>\n <span class=\"sp-block-title\">Action Plan<\/span>\n <div class=\"sp-block-wave\"><svg viewBox=\"0 0 140 80\" preserveAspectRatio=\"none\" fill=\"none\"><path d=\"M0 40 Q35 10 70 40 Q105 70 140 40\" stroke=\"rgba(46,125,82,0.18)\" stroke-width=\"2\" fill=\"none\"><\/path><\/svg><\/div>\n <\/div>\n <div class=\"sp-inputs\" id=\"actionplan-full\" style=\"padding: 24px; display: block; height: 100%;\">\n <p>Loading action plan…<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"tab-panel\" id=\"tab-time-matrix\">\n <div class=\"section-header\" style=\"margin-top: 8px;\">\n <h2>Time <em>Matrix<\/em><\/h2>\n <div class=\"sh-line\"><\/div>\n <\/div>\n <p style=\"font-size:14px;color:var(--mocha);margin-bottom:36px;font-weight:400;\">Analyze your time performance in detail<\/p>\n\n <div class=\"section-header\" style=\"margin-top:0;\">\n <h2 class=\"sub-heading\">Time <em>Info<\/em><\/h2>\n <div class=\"sh-line\"><\/div>\n <\/div>\n\n <div class=\"tm-top-layout\">\n <div class=\"tm-tiles-grid\">\n <div class=\"tm-stat-tile\">\n <div class=\"tm-stat-icon tsi-accent\"><svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z\"><\/path><\/svg><\/div>\n <div class=\"tm-stat-body\">\n <div class=\"tm-stat-label\">Total Time<\/div>\n <div class=\"tm-stat-num tsn-accent\" id=\"total-time-min\">0 <span class=\"tm-stat-unit\">MIN<\/span><\/div>\n <div class=\"tm-stat-sub\">Total time taken for the assessment.<\/div>\n <\/div>\n <\/div>\n <div class=\"tm-stat-tile\">\n <div class=\"tm-stat-icon tsi-walnut\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"><\/path><\/svg><\/div>\n <div class=\"tm-stat-body\">\n <div class=\"tm-stat-label\">Time Remaining<\/div>\n <div class=\"tm-stat-num tsn-walnut\" id=\"time-remaining-min\">0 <span class=\"tm-stat-unit\">MIN<\/span><\/div>\n <div class=\"tm-stat-sub\">Estimated remaining time (based on duration).<\/div>\n <\/div>\n <\/div>\n <div class=\"tm-stat-tile\">\n <div class=\"tm-stat-icon tsi-green\"><svg viewBox=\"0 0 24 24\"><path d=\"M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z\"><\/path><\/svg><\/div>\n <div class=\"tm-stat-body\">\n <div class=\"tm-stat-label\">Max Time per Question<\/div>\n <div class=\"tm-stat-num tsn-green\" id=\"max-time-q\">0 <span class=\"tm-stat-unit\">SEC<\/span><\/div>\n <div class=\"tm-stat-sub\">Maximum time spent on a single question.<\/div>\n <div class=\"tm-stat-tag\" id=\"max-time-q-label\">\u2014<\/div>\n <\/div>\n <\/div>\n <div class=\"tm-stat-tile\">\n <div class=\"tm-stat-icon tsi-mocha\"><svg viewBox=\"0 0 24 24\"><path d=\"M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z\"><\/path><\/svg><\/div>\n <div class=\"tm-stat-body\">\n <div class=\"tm-stat-label\">Min Time per Question<\/div>\n <div class=\"tm-stat-num tsn-mocha\" id=\"min-time-q\">0 <span class=\"tm-stat-unit\">SEC<\/span><\/div>\n <div class=\"tm-stat-sub\">Minimum time spent on a question.<\/div>\n <div class=\"tm-stat-tag\" id=\"min-time-q-label\">\u2014<\/div>\n <\/div>\n <\/div>\n <div class=\"tm-stat-tile\" style=\"grid-column: 1 \/ -1;\">\n <div class=\"tm-stat-icon tsi-gold\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"><\/path><\/svg><\/div>\n <div class=\"tm-stat-body\">\n <div class=\"tm-stat-label\">Average Time per Question<\/div>\n <div class=\"tm-stat-num tsn-gold\" id=\"avg-time-q\">0 <span class=\"tm-stat-unit\">SEC<\/span><\/div>\n <div class=\"tm-stat-sub\">Average time across attempted questions.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"tm-total-card\">\n <div class=\"tm-hourglass-float\">\u23f3<\/div>\n <div class=\"tm-total-label\">TOTAL DURATION<\/div>\n <div class=\"tm-total-num\" id=\"duration-num\">60<span class=\"tm-total-unit\">MIN<\/span><\/div>\n <div class=\"tm-total-divider\"><\/div>\n <div class=\"tm-remaining-row\">\n <div class=\"tm-remaining-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z\"><\/path><\/svg><\/div>\n <span class=\"tm-remaining-label\">TIME REMAINING<\/span>\n <span class=\"tm-remaining-val\" id=\"remaining-val\">\u2014<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section-header\">\n <h2 class=\"sub-heading\">Time <em>Tracker<\/em><\/h2>\n <div class=\"sh-line\"><\/div>\n <\/div>\n <p style=\"font-size:13px;color:var(--mocha);margin-bottom:24px;\">Track your speed and accuracy to understand your performance better.<\/p>\n \n <div class=\"tt-gauges-row\">…<\/div>\n \n <div class=\"tt-inference-row\">…<\/div>\n <div class=\"ta-cols\">…<\/div>\n <p style=\"font-size:12px;color:var(--mocha);text-align:center;margin-top:24px;\">Time analytics (Lag\/Waste\/Gain) are based on your detailed response patterns.<\/p>\n <\/div>\n<\/div>\n\n<script>\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ LAUNCHPAD 360 \u2013 DYNAMIC DASHBOARD\n\/\/ Fetches analytics from backend and populates all sections.\n\/\/ Backend URL: change 'BACKEND_URL' to your Cloud Run endpoint.\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\nconst BACKEND_URL = 'https:\/\/launchpad-api-770009272949.asia-south1.run.app'; \/\/ <-- UPDATE IF NEEDED\n\n\/\/ Helper: get URL parameters\nfunction getParam(name) {\n const urlParams = new URLSearchParams(window.location.search);\n return urlParams.get(name);\n}\n\n\/\/ Global chart instance\nlet accChartInstance = null;\n\n\/\/ Format date\ndocument.getElementById('current-date').innerText = new Date().toLocaleDateString('en-US', { year:'numeric', month:'short', day:'numeric' });\n\n\/\/ Read parameters\nconst studentId = getParam('student_id');\nconst testSlug = getParam('test_slug');\nconst examType = getParam('exam_type') || 'CUET';\n\nif (!studentId || !testSlug) {\n document.body.innerHTML = '<div style=\"text-align:center;padding:50px;color:red\">Missing student_id or test_slug. Please retake the exam.<\/div>';\n throw new Error('Missing required parameters');\n}\n\nconst apiUrl = `${BACKEND_URL}\/api\/get-analytics?student_id=${studentId}&test_slug=${encodeURIComponent(testSlug)}&exam_type=${examType}`;\n\nfetch(apiUrl)\n .then(res => {\n if (!res.ok) throw new Error(`HTTP ${res.status}`);\n return res.json();\n })\n .then(data => {\n \/\/ 1. Score Metrics\n const scoreMetrics = data.score_metrics || {};\n document.getElementById('stat-attempted').innerText = scoreMetrics.attempted || 0;\n document.getElementById('stat-correct').innerText = scoreMetrics.correct || 0;\n document.getElementById('stat-wrong').innerText = scoreMetrics.wrong || 0;\n document.getElementById('stat-skipped').innerText = scoreMetrics.unattempted || 0;\n const totalScore = scoreMetrics.total_score || 0;\n const maxScore = scoreMetrics.max_score || 0;\n document.getElementById('total-score').innerHTML = `${totalScore}<sup id=\"total-max\">\/${maxScore}<\/sup>`;\n const percentage = scoreMetrics.percentage || 0;\n document.getElementById('score-sub').innerText = percentage >= 60 ? 'Outstanding Performance' : 'Keep Improving';\n\n \/\/ 2. Test Accuracy (donut)\n const testAccuracy = data.test_accuracy || 0;\n const circumference = 535;\n const offset = circumference - (circumference * testAccuracy \/ 100);\n document.getElementById('donut-fill').setAttribute('stroke-dashoffset', offset);\n document.getElementById('test-accuracy-pct').innerHTML = `${Math.round(testAccuracy)}<sup>%<\/sup>`;\n document.getElementById('accuracy-tip-text').innerText = testAccuracy >= 70 ? 'Keep it up! You\\'re on the right track.' : 'Focus on accuracy to boost your score.';\n\n \/\/ 3. Accuracy Map (Chart.js)\n const accMap = data.accuracy_map || [];\n const labels = accMap.map(item => `${item.interval_min} min`);\n const accValues = accMap.map(item => item.accuracy);\n const ctx = document.getElementById('accChart').getContext('2d');\n if (accChartInstance) accChartInstance.destroy();\n accChartInstance = new Chart(ctx, {\n type: 'line',\n data: {\n labels: labels.length ? labels : ['0','10','20','30','40','50','60'],\n datasets: [{\n data: accValues.length ? accValues : [0,0,0,0,0,0,0],\n borderColor: '#E8521A', borderWidth: 2.5,\n pointBackgroundColor: '#E8521A', pointBorderColor: '#fff',\n pointBorderWidth: 2.5, pointRadius: 5, pointHoverRadius: 8,\n fill: true,\n backgroundColor: (c) => {\n const g = c.chart.ctx.createLinearGradient(0,0,0,255);\n g.addColorStop(0,'rgba(232,82,26,0.14)');\n g.addColorStop(1,'rgba(232,82,26,0.00)');\n return g;\n },\n tension: 0.42\n }]\n },\n options: {\n responsive: true, maintainAspectRatio: false,\n plugins: { legend: { display: false }, tooltip: { callbacks: { label: v => ` ${v.raw}%` } } },\n scales: { x: { grid: { display: false } }, y: { min: 0, max: 100, grid: { color: '#EDD9C0' }, ticks: { stepSize: 20 } } }\n }\n });\n document.getElementById('accuracy-map-note').innerHTML = accValues.length ? `Your accuracy trend shows steady progress. Last session: ${accValues[accValues.length-1]}%` : 'Complete more tests to see accuracy trends.';\n\n \/\/ 4. Predictive Accuracy\n const predAcc = data.predictive_accuracy || {};\n if (predAcc.value !== undefined && predAcc.value !== null) {\n document.getElementById('predicted-accuracy-num').innerHTML = `${Math.round(predAcc.value)}<span>%<\/span>`;\n document.getElementById('predicted-accuracy-sub').innerText = predAcc.inference || 'Based on current performance trend';\n } else {\n document.getElementById('pred-acc-tile').style.display = 'none';\n }\n\n \/\/ 5. Score Analytics (Missed, Luck, Memory)\n const analyticsAcc = data.accuracy_analytics || {};\n const missed = analyticsAcc.missed_score || {};\n const luck = analyticsAcc.luck_score || {};\n const memory = analyticsAcc.memory_score || {};\n\n document.getElementById('missed-score-value').innerText = missed.value ?? 0;\n document.getElementById('luck-score-value').innerText = luck.value ?? 0;\n document.getElementById('memory-score-value').innerText = memory.value ?? 0;\n\n \/\/ Helper to render rows\n function renderRows(containerId, categories) {\n const container = document.getElementById(containerId);\n if (!container) return;\n container.innerHTML = '';\n categories.forEach(cat => {\n const row = document.createElement('div');\n row.className = 'sa-row';\n let iconSvg = '<svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"><\/path><\/svg>';\n if (cat.icon === 'walnut') iconSvg = '<svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"><\/path><\/svg>';\n if (cat.icon === 'gold') iconSvg = '<svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"><\/path><\/svg>';\n if (cat.icon === 'espresso') iconSvg = '<svg viewBox=\"0 0 24 24\"><path d=\"M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7 8-11.5C20 5.81 16.19 2 11.5 2zm1 14.5h-2v-2h2v2zm0-4h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z\"><\/path><\/svg>';\n row.innerHTML = `\n <div class=\"sa-row-left\">\n <div class=\"sa-row-icon ${cat.iconClass}\">${iconSvg}<\/div>\n <div class=\"sa-row-text\">\n <div class=\"sa-row-title\">${cat.title}<\/div>\n <div class=\"sa-row-sub\">${cat.sub}<\/div>\n <\/div>\n <\/div>\n <div class=\"sa-row-right\">\n <div class=\"sa-row-num\">${cat.count}<\/div>\n <button class=\"sa-row-info-btn\">i<\/button>\n <\/div>\n `;\n container.appendChild(row);\n });\n }\n\n \/\/ Missed rows\n const missedRows = [];\n if (missed.fatigue_miss) missedRows.push({ title: 'Fatigue Miss', sub: (missed.fatigue_miss.questions || []).map(q=>'Q'+q).join(', ') || '\u2014', count: missed.fatigue_miss.count || 0, iconClass: '', icon: '' });\n if (missed.error_decision_miss) missedRows.push({ title: 'Error Decision Miss', sub: [...(missed.error_decision_miss.ric_questions||[]),...(missed.error_decision_miss.maic_questions||[])].map(q=>'Q'+q).join(', ') || '\u2014', count: missed.error_decision_miss.count || 0, iconClass: 'ri-walnut', icon: 'walnut' });\n if (missed.panic_miss) missedRows.push({ title: 'Panic Miss', sub: (missed.panic_miss.questions || []).map(q=>'Q'+q).join(', ') || '\u2014', count: missed.panic_miss.count || 0, iconClass: 'ri-espresso', icon: 'espresso' });\n if (missed.basic_concept_miss) missedRows.push({ title: 'Basic Concept Miss', sub: (missed.basic_concept_miss.questions || []).map(q=>'Q'+q).join(', ') || '\u2014', count: missed.basic_concept_miss.count || 0, iconClass: 'ri-mocha', icon: 'mocha' });\n if (missed.advanced_concept_miss) missedRows.push({ title: 'Advanced Concept Miss', sub: (missed.advanced_concept_miss.questions || []).map(q=>'Q'+q).join(', ') || '\u2014', count: missed.advanced_concept_miss.count || 0, iconClass: 'ri-accent2', icon: 'accent2' });\n renderRows('missed-rows-list', missedRows);\n\n \/\/ Luck rows\n const luckRows = [];\n if (luck.decision_luck) luckRows.push({ title: 'Decision Luck', sub: [...(luck.decision_luck.rc_questions||[]),...(luck.decision_luck.ma_questions||[])].map(q=>'Q'+q).join(', ') || '\u2014', count: luck.decision_luck.count || 0, iconClass: '', icon: '' });\n if (luck.fortune_luck) luckRows.push({ title: 'Fortune Luck', sub: [...(luck.fortune_luck.ec_questions||[]),...(luck.fortune_luck.mc_questions||[])].map(q=>'Q'+q).join(', ') || '\u2014', count: luck.fortune_luck.count || 0, iconClass: 'ri-gold', icon: 'gold' });\n if (luck.confidence_luck) luckRows.push({ title: 'Confidence Luck', sub: (luck.confidence_luck.questions || []).map(q=>'Q'+q).join(', ') || '\u2014', count: luck.confidence_luck.count || 0, iconClass: 'ri-mocha', icon: 'mocha' });\n renderRows('luck-rows-list', luckRows);\n\n \/\/ Memory rows\n const memoryRows = [];\n if (memory.quick_recall_memory) memoryRows.push({ title: 'Quick Recall Memory', sub: (memory.quick_recall_memory.questions || []).map(q=>'Q'+q).join(', ') || '\u2014', count: memory.quick_recall_memory.count || 0, iconClass: '', icon: '' });\n if (memory.short_term_memory) memoryRows.push({ title: 'Short Term Memory', sub: [...(memory.short_term_memory.mc_questions||[]),...(memory.short_term_memory.hc_questions||[])].map(q=>'Q'+q).join(', ') || '\u2014', count: memory.short_term_memory.count || 0, iconClass: 'ri-gold', icon: 'gold' });\n if (memory.smart_recall_memory) memoryRows.push({ title: 'Smart Recall Memory', sub: [...(memory.smart_recall_memory.rc_questions||[]),...(memory.smart_recall_memory.mac_questions||[])].map(q=>'Q'+q).join(', ') || '\u2014', count: memory.smart_recall_memory.count || 0, iconClass: 'ri-walnut', icon: 'walnut' });\n renderRows('memory-rows-list', memoryRows);\n\n \/\/ 6. Score Prediction\n const scorePred = data.score_prediction || {};\n const hasPrediction = scorePred.predicted_score !== null && scorePred.predicted_score !== undefined;\n if (hasPrediction) {\n document.getElementById('predicted-score-num').innerHTML = `${scorePred.predicted_score}<span>\/250<\/span>`;\n document.getElementById('predicted-score-sub').innerText = scorePred.inference1 || 'Based on current performance trend';\n document.getElementById('inference-full').innerHTML = `<p>${scorePred.inference1 || scorePred.inference2 || 'No inference'}<\/p>`;\n document.getElementById('actionplan-full').innerHTML = `<p>${scorePred.action_plan1 || scorePred.action_plan2 || 'No action plan'}<\/p>`;\n \/\/ Also update the smaller inference\/action blocks above\n document.getElementById('inference-text').innerHTML = `<p>${scorePred.inference1 || scorePred.inference2 || 'No inference'}<\/p>`;\n document.getElementById('actionplan-text').innerHTML = `<p>${scorePred.action_plan1 || scorePred.action_plan2 || 'No action plan'}<\/p>`;\n setScoreState(true);\n } else {\n setScoreState(false);\n document.getElementById('inference-full').innerHTML = `<p>${scorePred.inference1 || 'Prediction not available'}<\/p>`;\n document.getElementById('actionplan-full').innerHTML = `<p>${scorePred.action_plan1 || 'Complete more tests for prediction'}<\/p>`;\n }\n\n \/\/ 7. Time Metrics\n const timeMetrics = data.time_metrics || {};\n const totalSec = timeMetrics.time_taken_seconds || 0;\n const totalMin = Math.round(totalSec \/ 60);\n document.getElementById('total-time-min').innerHTML = `${totalMin} <span class=\"tm-stat-unit\">MIN<\/span>`;\n const examDuration = data.exam_duration || 60; \/\/ default 60 min\n document.getElementById('duration-num').innerHTML = `${examDuration}<span class=\"tm-total-unit\">MIN<\/span>`;\n const remainingMin = Math.max(0, examDuration - totalMin);\n document.getElementById('time-remaining-min').innerHTML = `${remainingMin} <span class=\"tm-stat-unit\">MIN<\/span>`;\n document.getElementById('remaining-val').innerHTML = `${remainingMin} MIN`;\n\n const maxTimeVal = timeMetrics.max_time_val || 0;\n const maxTimeQ = timeMetrics.max_time_q ? `Q${timeMetrics.max_time_q}` : '\u2014';\n document.getElementById('max-time-q').innerHTML = `${maxTimeVal} <span class=\"tm-stat-unit\">SEC<\/span>`;\n document.getElementById('max-time-q-label').innerText = maxTimeQ;\n\n const minTimeVal = timeMetrics.min_time_val || 0;\n const minTimeQ = timeMetrics.min_time_q ? `Q${timeMetrics.min_time_q}` : '\u2014';\n document.getElementById('min-time-q').innerHTML = `${minTimeVal} <span class=\"tm-stat-unit\">SEC<\/span>`;\n document.getElementById('min-time-q-label').innerText = minTimeQ;\n\n const attemptedQ = scoreMetrics.attempted || 1;\n const avgSec = Math.round(totalSec \/ attemptedQ);\n document.getElementById('avg-time-q').innerHTML = `${avgSec} <span class=\"tm-stat-unit\">SEC<\/span>`;\n\n \/\/ Additional notes: time remaining in total card\n \/\/ All done\n })\n .catch(err => {\n console.error('Failed to load analytics:', err);\n document.body.innerHTML = `<div style=\"text-align:center;padding:50px;color:red\">Error loading analytics. Please try again later.<br>${err.message}<\/div>`;\n });\n\n\/\/ Tab switching (already present)\nconst navBtns = document.querySelectorAll('.nav-item[data-tab]');\nconst panels = document.querySelectorAll('.tab-panel');\nnavBtns.forEach(btn => {\n btn.addEventListener('click', function () {\n navBtns.forEach(b => b.classList.remove('active'));\n panels.forEach(p => p.classList.remove('active'));\n this.classList.add('active');\n const targetId = 'tab-' + this.dataset.tab;\n const targetPanel = document.getElementById(targetId);\n if (targetPanel) {\n targetPanel.classList.add('active');\n if (this.dataset.tab === 'score-matrix' && accChartInstance) accChartInstance.resize();\n }\n });\n});\n\n\/\/ Smooth scroll\ndocument.querySelector('.sc-future-btn')?.addEventListener('click', function(e) {\n e.preventDefault();\n document.getElementById('score-prediction')?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n});\n\n\/\/ Gauge info (existing)\nwindow.showGaugeInfo = function(element, infoText) {\n const card = element.closest('.tt-gauge-card');\n if (card) {\n const infoDiv = card.querySelector('.tt-dynamic-info');\n if (infoDiv) {\n infoDiv.textContent = infoText;\n infoDiv.style.color = 'var(--espresso)';\n infoDiv.style.borderColor = 'var(--accent)';\n infoDiv.style.background = 'var(--cream)';\n }\n const allPaths = card.querySelectorAll('.gz-path');\n allPaths.forEach(p => p.style.strokeWidth = '12');\n const targetPath = element.querySelector('.gz-path');\n if (targetPath) targetPath.style.strokeWidth = '16';\n }\n};\n\nwindow.setScoreState = function(hasPred) {\n const tileHas = document.getElementById('tileHas');\n const tileNo = document.getElementById('tileNo');\n const btnHas = document.getElementById('btnHas');\n const btnNo = document.getElementById('btnNo');\n if (hasPred) {\n tileHas?.classList.remove('hidden');\n tileNo?.classList.add('hidden');\n btnHas?.classList.add('active-state');\n btnNo?.classList.remove('no-state');\n } else {\n tileHas?.classList.add('hidden');\n tileNo?.classList.remove('hidden');\n btnNo?.classList.add('no-state');\n btnHas?.classList.remove('active-state');\n }\n};\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Launchpad 360 \u2013 Dashboard Launchpad 360 Performance Intelligence Dashboard \ud83d\udcc5 Last Updated: Score Matrix Time Matrix Score Matrix 01 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":"default","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-379","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=\/wp\/v2\/pages\/379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=379"}],"version-history":[{"count":1,"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=\/wp\/v2\/pages\/379\/revisions"}],"predecessor-version":[{"id":380,"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=\/wp\/v2\/pages\/379\/revisions\/380"}],"wp:attachment":[{"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":379,"date":"2026-06-08T07:26:58","date_gmt":"2026-06-08T07:26:58","guid":{"rendered":"https:\/\/massgraduates.in\/?page_id=379"},"modified":"2026-06-08T07:26:58","modified_gmt":"2026-06-08T07:26:58","slug":"launchpaddummy","status":"publish","type":"page","link":"https:\/\/cuetexamsnta.massgraduates.in\/?page_id=379","title":{"rendered":"Launchpad(Dummy)"},"content":{"rendered":"\n\n\n\n \n \n Launchpad 360 \u2013 Dashboard<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.js\"><\/script>\n <style>\n \/* === YOUR ORIGINAL CSS \u2013 KEPT INTACT === *\/\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n :root {\n --cream: #FDF6EE;\n --cream-2: #FAF0E2;\n --cream-border: #EDD9C0;\n --card-warm: #FFF8F0;\n --card-mid: #F5E9D8;\n --espresso: #2C1A0E;\n --walnut: #5C3A1E;\n --mocha: #8A5C3C;\n --caramel: #C4855A;\n --accent: #E8521A;\n --accent-lt: #FF7B3A;\n --accent-pale: #FDEEE6;\n --green: #2E7D52;\n --green-lt: #D3F0E3;\n --red: #C0392B;\n --blue: #1B4F8A;\n --gold: #C98B2B;\n --gold-lt: #FFF3D0;\n --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n }\n body {\n font-family: var(--font);\n background: var(--cream-2);\n min-height: 100vh;\n padding: 28px 16px;\n background-image:\n radial-gradient(ellipse 700px 500px at 8% 4%, rgba(232,82,26,0.06) 0%, transparent 68%),\n radial-gradient(ellipse 500px 400px at 92% 96%, rgba(196,133,90,0.07) 0%, transparent 65%);\n }\n .wrapper {\n max-width: 1380px;\n margin: 0 auto;\n background: var(--cream);\n border-radius: 28px;\n padding: 44px 52px 52px;\n box-shadow: 0 0 0 1.5px var(--cream-border), 0 20px 70px rgba(44,26,14,0.10);\n position: relative;\n overflow: hidden;\n }\n .wrapper::before {\n content: '';\n position: absolute; top: 0; right: 0;\n width: 300px; height: 300px;\n background-image: radial-gradient(circle, rgba(232,82,26,0.06) 1px, transparent 1px);\n background-size: 18px 18px;\n border-radius: 0 28px 0 0;\n pointer-events: none;\n }\n \/* HEADER *\/\n .dash-header {\n display: flex; align-items: center; justify-content: space-between;\n margin-bottom: 0;\n padding-bottom: 24px;\n border-bottom: 1.5px solid var(--cream-border);\n }\n .dash-logo { display: flex; align-items: center; gap: 14px; }\n .dash-logo-mark {\n width: 50px; height: 50px;\n background: linear-gradient(135deg, var(--accent), var(--accent-lt));\n border-radius: 14px;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 8px 22px rgba(232,82,26,0.32);\n flex-shrink: 0;\n }\n .dash-logo-mark svg { width: 24px; height: 24px; fill: #fff; }\n .dash-title-wrap h1 {\n font-size: 24px; font-weight: 800;\n color: var(--espresso); letter-spacing: -0.3px; line-height: 1.1;\n }\n .dash-title-wrap h1 span { color: var(--accent); }\n .dash-title-wrap p { font-size: 13px; color: var(--mocha); margin-top: 3px; font-weight: 500; }\n .dash-date {\n font-size: 13px; font-weight: 600; color: var(--mocha);\n background: var(--card-mid); border: 1.5px solid var(--cream-border);\n border-radius: 10px; padding: 8px 16px;\n }\n \/* NAV *\/\n .nav-menu {\n display: flex; align-items: center; gap: 4px;\n background: var(--card-mid);\n border: 1.5px solid var(--cream-border);\n border-radius: 14px;\n padding: 6px;\n margin: 24px 0 36px;\n }\n .nav-item {\n display: flex; align-items: center; gap: 8px;\n padding: 9px 20px;\n border-radius: 10px;\n font-size: 13.5px; font-weight: 600;\n color: var(--mocha);\n cursor: pointer;\n transition: all 0.18s ease;\n border: none; background: none; font-family: var(--font);\n white-space: nowrap;\n }\n .nav-item svg { width: 16px; height: 16px; fill: currentColor; opacity: 0.7; }\n .nav-item:hover { background: var(--cream); color: var(--espresso); }\n .nav-item.active {\n background: var(--accent);\n color: #fff;\n box-shadow: 0 4px 14px rgba(232,82,26,0.30);\n }\n .nav-item.active svg { opacity: 1; }\n .nav-sep {\n width: 1.5px; height: 22px;\n background: var(--cream-border);\n border-radius: 2px; margin: 0 2px; flex-shrink: 0;\n }\n \/* TAB PANELS *\/\n .tab-panel { display: none; }\n .tab-panel.active { display: block; animation: fadeUp 0.4s ease both; }\n \/* SECTION HEADER *\/\n .section-header {\n display: flex; align-items: center; gap: 20px;\n margin-bottom: 10px; margin-top: 48px;\n }\n .sh-line { flex: 1; height: 1.5px; background: linear-gradient(90deg, var(--cream-border), transparent); }\n .section-header h2 {\n font-size: 60px; font-weight: 900;\n color: var(--espresso); letter-spacing: -2px; line-height: 1; white-space: nowrap;\n }\n .section-header h2 em { font-style: normal; color: var(--accent); }\n .section-header h2.sub-heading {\n font-size: 34px; font-weight: 800; letter-spacing: -1px;\n }\n \/* SCORE INFO TITLE *\/\n .score-info-title { display: flex; align-items: center; gap: 12px; margin-bottom: 0; }\n .si-badge {\n background: var(--accent); color: #fff;\n font-size: 11px; font-weight: 800; letter-spacing: 2px;\n text-transform: uppercase; padding: 5px 11px; border-radius: 6px;\n flex-shrink: 0; line-height: 1;\n }\n .si-heading { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -1px; }\n .si-heading .t-dark { color: var(--espresso); }\n .si-heading .t-accent { color: var(--accent); }\n \/* SCORE MATRIX *\/\n .sm-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; margin-bottom: 36px !important; }\n .card {\n background: var(--card-warm);\n border: 1.5px solid var(--cream-border);\n border-radius: 22px; padding: 34px 38px;\n box-shadow: 0 4px 20px rgba(44,26,14,0.05);\n position: relative; overflow: hidden;\n }\n .card::after {\n content: '';\n position: absolute; bottom: -36px; right: -36px;\n width: 130px; height: 130px; border-radius: 50%;\n background: radial-gradient(circle, var(--cream-border) 0%, transparent 70%);\n pointer-events: none;\n }\n .info-card-inner { display: flex; flex-direction: column; height: 100%; gap: 0; }\n .info-card-top {\n display: flex; align-items: center; gap: 16px;\n padding-bottom: 22px; margin-bottom: 22px;\n border-bottom: 1.5px solid var(--cream-border);\n }\n .info-hex {\n width: 52px; height: 52px; flex-shrink: 0;\n background: linear-gradient(135deg, var(--accent), var(--accent-lt));\n border-radius: 15px;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 8px 20px rgba(232,82,26,0.28);\n }\n .info-hex svg { width: 24px; height: 24px; fill: #fff; }\n .info-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; }\n .info-stat-item {\n background: var(--cream-2); border: 1.5px solid var(--cream-border);\n border-radius: 16px; padding: 20px 18px;\n display: flex; align-items: center; gap: 16px;\n transition: transform 0.18s, box-shadow 0.18s;\n }\n .info-stat-item:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(44,26,14,0.10); }\n .info-stat-icon {\n width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n }\n .info-stat-icon svg { width: 22px; height: 22px; fill: #fff; }\n .isi-blue { background: linear-gradient(135deg,#1B4F8A,#3B82F6); box-shadow: 0 6px 14px rgba(27,79,138,0.30); }\n .isi-green { background: linear-gradient(135deg,#2E7D52,#22C55E); box-shadow: 0 6px 14px rgba(46,125,82,0.30); }\n .isi-red { background: linear-gradient(135deg,#C0392B,#EF4444); box-shadow: 0 6px 14px rgba(192,57,43,0.30); }\n .isi-gold { background: linear-gradient(135deg,#C98B2B,#F59E0B); box-shadow: 0 6px 14px rgba(201,139,43,0.30); }\n .info-stat-body { display: flex; flex-direction: column; min-width: 0; }\n .info-stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--mocha); }\n .info-stat-num { font-size: 42px; font-weight: 900; line-height: 1.05; margin: 3px 0 2px; }\n .isn-blue { color: #1B4F8A; }\n .isn-green { color: #2E7D52; }\n .isn-red { color: #C0392B; }\n .isn-gold { color: #C98B2B; }\n .info-stat-sub { font-size: 11.5px; color: var(--caramel); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n \/* Score card *\/\n .score-card {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n text-align: center;\n background: linear-gradient(145deg, #3D2318 0%, #5C3A1E 60%, #7A4C2A 100%);\n border: none; padding: 28px 30px;\n box-shadow: 0 16px 44px rgba(44,26,14,0.26), 0 4px 12px rgba(44,26,14,0.14);\n }\n .score-card::after { display: none; }\n .score-card::before {\n content: ''; position: absolute; inset: 0;\n background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);\n background-size: 16px 16px; border-radius: 20px;\n }\n .sc-eyebrow { font-size: 12px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; color: #ffffff; margin-bottom: 8px; position: relative; z-index: 1; }\n .sc-score { font-size: 72px; font-weight: 900; line-height: 1; color: #fff; position: relative; z-index: 1; text-shadow: 0 4px 16px rgba(0,0,0,0.3); }\n .sc-score sup { font-size: 26px; font-weight: 700; vertical-align: super; color: var(--accent-lt); }\n .sc-divider { width: 44px; height: 2px; background: var(--accent); border-radius: 2px; margin: 10px auto 8px; position: relative; z-index: 1; }\n .sc-sub { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45); letter-spacing: 1.5px; text-transform: uppercase; position: relative; z-index: 1; }\n .sc-future-btn {\n display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;\n padding: 10px 20px; border-radius: 12px;\n background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.22);\n color: #fff; font-size: 13px; font-weight: 700; text-decoration: none;\n letter-spacing: 0.3px; position: relative; z-index: 2; backdrop-filter: blur(6px);\n transition: background 0.22s, border-color 0.22s, transform 0.18s, box-shadow 0.22s; cursor: pointer;\n }\n .sc-future-btn svg { width: 16px; height: 16px; fill: var(--accent-lt); flex-shrink: 0; }\n .sc-future-btn:hover { background: var(--accent); border-color: var(--accent-lt); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,82,26,0.45); }\n \/* ACCURACY TRACKER *\/\n .at-row-1 { display: grid; grid-template-columns: 310px 1fr; gap: 22px; margin-bottom: 22px; }\n .at-row-2 { display: grid; grid-template-columns: 1fr 380px; gap: 22px; margin-bottom: 22px; }\n .card-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }\n .card-hd-icon {\n width: 42px; height: 42px; border-radius: 12px;\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n }\n .card-hd-icon svg { width: 19px; height: 19px; fill: #fff; }\n .chi-accent { background: linear-gradient(135deg,var(--accent),var(--accent-lt)); box-shadow: 0 5px 12px rgba(232,82,26,0.28); }\n .chi-espresso { background: linear-gradient(135deg,var(--espresso),var(--walnut)); box-shadow: 0 5px 12px rgba(44,26,14,0.28); }\n .ch-title { font-size: 15px; font-weight: 700; color: var(--espresso); }\n .ch-sub { font-size: 12px; color: var(--caramel); margin-top: 2px; }\n \/* Donut *\/\n .donut-wrap { display: flex; flex-direction: column; align-items: center; }\n .donut-outer { position: relative; width: 182px; height: 182px; margin: 0 auto 22px; }\n .donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }\n .dr-bg { fill: none; stroke: var(--card-mid); stroke-width: 15; }\n .dr-fg { fill: none; stroke: url(#rg-warm); stroke-width: 15; stroke-dasharray: 535; stroke-dashoffset: 160.5; stroke-linecap: round; }\n .donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }\n .donut-pct { font-size: 46px; font-weight: 900; color: var(--espresso); line-height: 1; }\n .donut-pct sup { font-size: 20px; color: var(--accent); }\n .donut-caption { font-size: 11px; color: var(--mocha); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 5px; }\n .tip-box {\n width: 100%; background: var(--gold-lt); border: 1.5px solid rgba(201,139,43,0.22);\n border-radius: 12px; padding: 13px 15px; display: flex; align-items: flex-start; gap: 11px;\n }\n .tip-ico { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: linear-gradient(135deg,var(--gold),#F59E0B); display: flex; align-items: center; justify-content: center; }\n .tip-ico svg { width: 15px; height: 15px; fill: #fff; }\n .tip-box p { font-size: 13px; color: var(--espresso); font-weight: 600; line-height: 1.55; padding-top: 5px; }\n \/* Chart *\/\n .chart-card-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }\n .chart-area { position: relative; height: 255px; width: 100%; }\n .chart-note {\n margin-top: 18px; background: var(--accent-pale); border: 1.5px solid rgba(232,82,26,0.14);\n border-radius: 12px; padding: 13px 17px; font-size: 13.5px; color: var(--walnut); line-height: 1.55;\n }\n .chart-note strong { color: var(--accent); }\n \/* Score Analytics *\/\n .sa-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }\n .sa-card { background: var(--card-warm); border: 1.5px solid var(--cream-border); border-radius: 22px; overflow: hidden; box-shadow: 0 4px 22px rgba(44,26,14,0.07); display: flex; flex-direction: column; }\n .sa-top-strip { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 16px; border-bottom: 1.5px solid var(--cream-border); background: var(--card-mid); }\n .sa-top-left { display: flex; align-items: center; gap: 12px; }\n .sa-strip-icon { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(44,26,14,0.15); }\n .sa-strip-icon svg { width: 19px; height: 19px; fill: #fff; }\n .sa-missed .sa-strip-icon { background: linear-gradient(135deg, var(--accent), var(--accent-lt)); }\n .sa-luck .sa-strip-icon { background: linear-gradient(135deg, var(--green), #22C55E); }\n .sa-memory .sa-strip-icon { background: linear-gradient(135deg, var(--blue), #3B82F6); }\n .sa-strip-title { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--espresso); }\n .sa-strip-info { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--cream-border); background: var(--cream); color: var(--mocha); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--font); transition: all 0.18s; }\n .sa-strip-info:hover { background: var(--accent); color: #fff; border-color: var(--accent); }\n .sa-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 22px 18px; border-bottom: 1.5px solid var(--cream-border); }\n .sa-desc-box { flex: 1; background: var(--cream-2); border: 1.5px solid var(--cream-border); border-radius: 14px; padding: 14px 16px; }\n .sa-desc-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.8px; color: var(--mocha); margin-bottom: 6px; }\n .sa-desc-text { font-size: 13px; color: var(--walnut); line-height: 1.6; font-weight: 400; }\n .sa-circle-wrap { flex-shrink: 0; text-align: center; }\n .sa-circle { width: 92px; height: 92px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid var(--cream-border); background: var(--cream); box-shadow: 0 6px 18px rgba(44,26,14,0.10); position: relative; }\n .sa-missed .sa-circle { border-color: var(--accent); box-shadow: 0 0 0 5px rgba(232,82,26,0.08), 0 6px 18px rgba(232,82,26,0.18); }\n .sa-luck .sa-circle { border-color: var(--green); box-shadow: 0 0 0 5px rgba(46,125,82,0.08), 0 6px 18px rgba(46,125,82,0.18); }\n .sa-memory .sa-circle { border-color: var(--blue); box-shadow: 0 0 0 5px rgba(27,79,138,0.08), 0 6px 18px rgba(27,79,138,0.18); }\n .sa-circle-num { font-size: 40px; font-weight: 900; line-height: 1; }\n .sa-missed .sa-circle-num { color: var(--accent); }\n .sa-luck .sa-circle-num { color: var(--green); }\n .sa-memory .sa-circle-num { color: var(--blue); }\n .sa-circle-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 2px; color: var(--mocha); }\n .sa-rows-list { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }\n .sa-row { display: flex; align-items: center; justify-content: space-between; background: var(--cream-2); border: 1.5px solid var(--cream-border); border-radius: 13px; padding: 12px 15px; flex: 1; transition: box-shadow 0.18s, transform 0.18s; }\n .sa-row:hover { transform: translateX(3px); box-shadow: 0 4px 14px rgba(44,26,14,0.08); }\n .sa-row-left { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }\n .sa-row-icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n .sa-row-icon svg { width: 16px; height: 16px; fill: #fff; }\n .sa-missed .sa-row-icon { background: linear-gradient(135deg, var(--accent), var(--accent-lt)); box-shadow: 0 3px 8px rgba(232,82,26,0.25); }\n .sa-luck .sa-row-icon { background: linear-gradient(135deg, var(--green), #22C55E); box-shadow: 0 3px 8px rgba(46,125,82,0.25); }\n .sa-memory .sa-row-icon { background: linear-gradient(135deg, var(--blue), #3B82F6); box-shadow: 0 3px 8px rgba(27,79,138,0.25); }\n .sa-row-icon.ri-walnut { background: linear-gradient(135deg, var(--walnut), var(--caramel)); box-shadow: 0 3px 8px rgba(92,58,30,0.25); }\n .sa-row-icon.ri-gold { background: linear-gradient(135deg, var(--gold), #F59E0B); box-shadow: 0 3px 8px rgba(201,139,43,0.25); }\n .sa-row-icon.ri-mocha { background: linear-gradient(135deg, var(--mocha), var(--caramel)); box-shadow: 0 3px 8px rgba(138,92,60,0.25); }\n .sa-row-icon.ri-espresso { background: linear-gradient(135deg, var(--espresso), var(--walnut)); box-shadow: 0 3px 8px rgba(44,26,14,0.28); }\n .sa-row-icon.ri-accent2 { background: linear-gradient(135deg, #C0392B, var(--accent)); box-shadow: 0 3px 8px rgba(192,57,43,0.25); }\n .sa-row-text { min-width: 0; }\n .sa-row-title { font-size: 13.5px; font-weight: 700; color: var(--espresso); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .sa-row-sub { font-size: 11px; font-weight: 500; color: var(--mocha); margin-top: 2px; line-height: 1.3; }\n .sa-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 10px; }\n .sa-row-num { font-size: 30px; font-weight: 900; line-height: 1; min-width: 32px; text-align: right; }\n .sa-missed .sa-row-num { color: var(--accent); }\n .sa-luck .sa-row-num { color: var(--green); }\n .sa-memory .sa-row-num { color: var(--blue); }\n .sa-row-info-btn { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--cream-border); background: var(--cream); color: var(--mocha); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--font); flex-shrink: 0; transition: all 0.16s; }\n .sa-row-info-btn:hover { background: var(--card-mid); border-color: var(--mocha); }\n \/* Score Prediction *\/\n .sp-toggle-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }\n .sp-toggle-label { font-size: 13px; font-weight: 600; color: var(--mocha); }\n .sp-toggle { display: flex; gap: 4px; background: var(--card-mid); border: 1.5px solid var(--cream-border); border-radius: 10px; padding: 4px; }\n .sp-toggle-btn { padding: 7px 16px; border-radius: 7px; font-size: 12.5px; font-weight: 700; border: none; cursor: pointer; font-family: var(--font); transition: all 0.18s; color: var(--mocha); background: transparent; }\n .sp-toggle-btn.active-state { background: linear-gradient(135deg, #1B4F8A, #6B35C4); color: #fff; box-shadow: 0 4px 12px rgba(107,53,196,0.30); }\n .sp-toggle-btn.no-state { background: linear-gradient(135deg, #C0392B, #E8521A); color: #fff; box-shadow: 0 4px 12px rgba(192,57,43,0.28); }\n .sp-grid { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: stretch; margin-bottom: 24px; }\n .sp-score-tile { border-radius: 22px; position: relative; overflow: hidden; min-height: 160px; display: flex; flex-direction: column; justify-content: center; padding: 36px 40px; }\n .sp-score-tile.has-pred { background: linear-gradient(135deg, #1B4F8A 0%, #6B35C4 45%, #E8521A 100%); box-shadow: 0 16px 44px rgba(107,53,196,0.30); animation: sp-tile-float 6s ease-in-out infinite; }\n @keyframes sp-tile-float { 0%,100% { box-shadow: 0 16px 44px rgba(107,53,196,0.30); } 50% { box-shadow: 0 22px 56px rgba(27,79,138,0.38); } }\n .sp-score-tile.has-pred::before { content: ''; position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(270deg,rgba(232,82,26,0.55),rgba(107,53,196,0.55),rgba(27,79,138,0.55),rgba(107,53,196,0.55),rgba(232,82,26,0.55)); background-size: 400% 400%; animation: sp-color-flow 8s ease infinite; pointer-events: none; mix-blend-mode: overlay; }\n @keyframes sp-color-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }\n .sp-score-tile.has-pred::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; border-radius: 22px; }\n .sp-sheen { position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%); animation: sp-sheen-pass 5s ease-in-out infinite; pointer-events: none; }\n @keyframes sp-sheen-pass { 0% { left: -80%; opacity: 0; } 10% { opacity: 1; } 50% { left: 120%; opacity: 0.8; } 51%,100% { opacity: 0; left: 120%; } }\n .sp-score-eyebrow { font-size: 13px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #fff; margin-bottom: 10px; position: relative; z-index: 2; }\n .sp-score-num { font-size: 88px; font-weight: 900; line-height: 1; color: #fff; position: relative; z-index: 2; letter-spacing: -4px; text-shadow: 0 4px 24px rgba(0,0,0,0.22); }\n .sp-score-num span { font-size: 32px; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,0.70); vertical-align: baseline; margin-left: 4px; }\n .sp-score-sub { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.55); margin-top: 8px; position: relative; z-index: 2; }\n .sp-star { position: absolute; z-index: 3; pointer-events: none; color: #fff; line-height: 1; }\n .sp-star svg { display: block; }\n .sp-star.s1 { top: 16px; right: 52px; animation: sp-twinkle 2.2s ease-in-out infinite 0.0s; }\n .sp-star.s2 { top: 44px; right: 22px; animation: sp-twinkle 2.2s ease-in-out infinite 0.55s; }\n .sp-star.s3 { bottom: 24px; right: 80px; animation: sp-twinkle 2.2s ease-in-out infinite 1.1s; }\n .sp-star.s4 { top: 28px; right: 130px; animation: sp-twinkle 2.2s ease-in-out infinite 0.35s; }\n .sp-star.s5 { bottom: 18px; right: 140px; animation: sp-twinkle 2.2s ease-in-out infinite 0.85s; }\n .sp-star.s6 { top: 56px; right: 64px; animation: sp-twinkle 1.8s ease-in-out infinite 1.4s; }\n @keyframes sp-twinkle { 0%,100% { opacity: 0.15; transform: scale(0.7) rotate(0deg); } 30% { opacity: 1; transform: scale(1.3) rotate(15deg); } 60% { opacity: 0.5; transform: scale(0.9) rotate(-8deg); } }\n .sp-score-tile.no-pred { background: linear-gradient(135deg, #e05252 0%, #f07070 45%, #ff9898 100%); box-shadow: 0 16px 44px rgba(192,57,43,0.30); }\n .sp-score-tile.no-pred::before { content: ''; position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(270deg,rgba(255,140,140,0.5),rgba(220,80,80,0.6),rgba(220,80,80,0.6),rgba(255,140,140,0.5)); background-size: 400% 400%; animation: sp-color-flow 8s ease infinite; pointer-events: none; mix-blend-mode: overlay; }\n .sp-score-tile.no-pred::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; border-radius: 22px; }\n .sp-no-pred-content { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; text-align: center; gap: 14px; }\n .sp-no-pred-icon-wrap { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.30); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); animation: sp-icon-pulse 3s ease-in-out infinite; }\n @keyframes sp-icon-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }\n .sp-no-pred-icon-wrap svg { width: 34px; height: 34px; fill: #fff; }\n .sp-no-pred-label { font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -0.5px; }\n .sp-no-pred-sub { font-size: 13px; color: rgba(255,255,255,0.72); font-weight: 500; }\n .sp-star-red { position: absolute; z-index: 3; pointer-events: none; color: #fff; line-height: 1; }\n .sp-star-red.sr1 { top: 18px; right: 44px; animation: sp-twinkle 2.4s ease-in-out infinite 0.0s; }\n .sp-star-red.sr2 { top: 50px; right: 18px; animation: sp-twinkle 2.4s ease-in-out infinite 0.7s; }\n .sp-star-red.sr3 { bottom: 22px; right: 70px; animation: sp-twinkle 2.0s ease-in-out infinite 1.2s; }\n .sp-star-red.sr4 { top: 22px; right: 120px; animation: sp-twinkle 1.8s ease-in-out infinite 0.4s; }\n .sp-star-red.sr5 { bottom: 16px; right: 130px; animation: sp-twinkle 2.2s ease-in-out infinite 0.9s; }\n .sp-info-card { background: var(--card-warm); border: 1.5px solid var(--cream-border); border-radius: 22px; padding: 32px 36px; box-shadow: 0 4px 20px rgba(44,26,14,0.05); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }\n .sp-info-card::after { content: ''; position: absolute; bottom: -30px; right: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, var(--cream-border) 0%, transparent 70%); pointer-events: none; }\n .sp-info-desc { font-size: 14.5px; color: var(--walnut); line-height: 1.7; font-weight: 400; }\n .sp-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }\n .sp-block { border-radius: 20px; border: 1.5px solid var(--cream-border); overflow: hidden; box-shadow: 0 4px 18px rgba(44,26,14,0.06); background: var(--card-warm); display: flex; flex-direction: column; }\n .sp-block-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px 16px; border-bottom: 1.5px solid var(--cream-border); position: relative; overflow: hidden; }\n .sp-inference .sp-block-head { background: linear-gradient(120deg, #ede8f8 0%, #ddd5f5 100%); }\n .sp-suggest .sp-block-head { background: linear-gradient(120deg, #e0f5ee 0%, #c8eede 100%); }\n .sp-block-head-icon { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 12px rgba(0,0,0,0.14); }\n .sp-block-head-icon svg { width: 22px; height: 22px; fill: #fff; }\n .sp-inference .sp-block-head-icon { background: linear-gradient(135deg, #6B35C4, #9B59B6); }\n .sp-suggest .sp-block-head-icon { background: linear-gradient(135deg, #2E7D52, #22C55E); }\n .sp-block-title { font-size: 16px; font-weight: 800; color: var(--espresso); letter-spacing: -0.2px; }\n .sp-block-wave { position: absolute; right: 0; top: 0; bottom: 0; width: 140px; pointer-events: none; overflow: hidden; }\n .sp-block-wave svg { width: 100%; height: 100%; }\n .sp-inputs { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }\n .sp-input-row { display: flex; align-items: center; gap: 12px; background: var(--cream-2); border: 1.5px solid var(--cream-border); border-radius: 13px; padding: 11px 14px; cursor: pointer; transition: box-shadow 0.18s, border-color 0.18s; }\n .sp-input-row:hover { border-color: var(--caramel); box-shadow: 0 4px 14px rgba(44,26,14,0.08); }\n .sp-input-num { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; }\n .sp-inference .sp-input-num { background: linear-gradient(135deg, #6B35C4, #9B59B6); box-shadow: 0 3px 8px rgba(107,53,196,0.30); }\n .sp-suggest .sp-input-num { background: linear-gradient(135deg, #2E7D52, #22C55E); box-shadow: 0 3px 8px rgba(46,125,82,0.28); }\n .sp-input-text { flex: 1; font-size: 13.5px; font-weight: 500; color: var(--mocha); }\n .sp-input-kbd { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: var(--card-mid); border: 1.5px solid var(--cream-border); display: flex; align-items: center; justify-content: center; transition: background 0.16s; }\n .sp-input-kbd svg { width: 16px; height: 16px; fill: var(--mocha); }\n .sp-state-has.hidden, .sp-state-no.hidden { display: none; }\n \/* TIME MATRIX *\/\n .tm-top-layout {\n display: grid;\n grid-template-columns: 1.35fr 1fr;\n gap: 24px;\n margin-bottom: 36px;\n align-items: stretch;\n }\n .tm-tiles-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 18px;\n align-content: start;\n }\n .tm-stat-tile {\n background: var(--card-warm);\n border: 1.5px solid var(--cream-border);\n border-radius: 18px;\n padding: 22px 22px 18px;\n box-shadow: 0 4px 16px rgba(44,26,14,0.05);\n display: flex; align-items: flex-start; gap: 14px;\n transition: transform 0.18s, box-shadow 0.18s;\n position: relative; overflow: hidden;\n }\n .tm-stat-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(44,26,14,0.12); }\n .tm-stat-tile::after {\n content: ''; position: absolute; bottom: -22px; right: -22px;\n width: 80px; height: 80px; border-radius: 50%;\n background: radial-gradient(circle, var(--cream-border) 0%, transparent 70%);\n pointer-events: none;\n }\n .tm-stat-icon { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n .tm-stat-icon svg { width: 21px; height: 21px; fill: #fff; }\n .tsi-accent { background: linear-gradient(135deg,var(--accent),var(--accent-lt)); box-shadow: 0 5px 14px rgba(232,82,26,0.32); }\n .tsi-walnut { background: linear-gradient(135deg,var(--walnut),var(--caramel)); box-shadow: 0 5px 14px rgba(92,58,30,0.28); }\n .tsi-green { background: linear-gradient(135deg,var(--green),#22C55E); box-shadow: 0 5px 14px rgba(46,125,82,0.28); }\n .tsi-mocha { background: linear-gradient(135deg,var(--mocha),var(--caramel)); box-shadow: 0 5px 14px rgba(138,92,60,0.28); }\n .tsi-gold { background: linear-gradient(135deg,var(--gold),#F59E0B); box-shadow: 0 5px 14px rgba(201,139,43,0.28); }\n .tm-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--mocha); }\n .tm-stat-num { font-size: 34px; font-weight: 900; line-height: 1.1; margin: 4px 0 3px; }\n .tsn-accent { color: var(--accent); }\n .tsn-walnut { color: var(--walnut); }\n .tsn-green { color: var(--green); }\n .tsn-mocha { color: var(--mocha); }\n .tsn-gold { color: var(--gold); }\n .tm-stat-unit { font-size: 13px; font-weight: 700; opacity: 0.7; }\n .tm-stat-sub { font-size: 11.5px; color: var(--caramel); font-weight: 500; line-height: 1.3; }\n .tm-stat-tag {\n display: inline-block; margin-top: 6px;\n background: var(--accent-pale); color: var(--accent);\n font-size: 10px; font-weight: 800; letter-spacing: 1px;\n padding: 3px 8px; border-radius: 5px;\n }\n .tm-total-card {\n background: linear-gradient(145deg, #3D2318 0%, #5C3A1E 60%, #7A4C2A 100%);\n border-radius: 22px;\n padding: 36px 40px;\n box-shadow: 0 16px 44px rgba(44,26,14,0.26);\n position: relative; overflow: hidden;\n display: flex; flex-direction: column; justify-content: center;\n margin: 0;\n max-width: 420px;\n height: 100%;\n }\n .tm-total-card::before {\n content: ''; position: absolute; inset: 0;\n background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);\n background-size: 16px 16px; border-radius: 22px; pointer-events: none;\n }\n .tm-hourglass-float {\n position: absolute; right: 32px; top: 50%; transform: translateY(-50%);\n font-size: 80px; opacity: 0.18; pointer-events: none;\n animation: tm-hg-float 4s ease-in-out infinite;\n }\n @keyframes tm-hg-float { 0%,100% { transform: translateY(-50%) rotate(-6deg); } 50% { transform: translateY(calc(-50% - 8px)) rotate(6deg); } }\n .tm-total-label { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 8px; position: relative; z-index: 1; }\n .tm-total-num { font-size: 72px; font-weight: 900; color: #fff; line-height: 1; position: relative; z-index: 1; letter-spacing: -3px; }\n .tm-total-unit { font-size: 28px; font-weight: 600; color: var(--accent-lt); letter-spacing: 0; margin-left: 6px; }\n .tm-total-divider { width: 44px; height: 2px; background: var(--accent); border-radius: 2px; margin: 12px 0; position: relative; z-index: 1; }\n .tm-remaining-row { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }\n .tm-remaining-icon { width: 28px; height: 28px; border-radius: 8px; background: rgba(232,82,26,0.3); display: flex; align-items: center; justify-content: center; }\n .tm-remaining-icon svg { width: 14px; height: 14px; fill: var(--accent-lt); }\n .tm-remaining-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.45); }\n .tm-remaining-val { font-size: 20px; font-weight: 900; color: var(--accent-lt); margin-left: 4px; }\n \/* Gauges etc. \u2013 kept as is, no dynamic updates needed for needle positions *\/\n .tt-gauges-row, .tt-inference-row, .ta-cols { display: grid; gap: 22px; }\n .tt-gauges-row { grid-template-columns: repeat(4, 1fr); margin-bottom: 22px; }\n .tt-gauge-card { background: var(--card-warm); border: 1.5px solid var(--cream-border); border-radius: 22px; padding: 24px 20px 20px; box-shadow: 0 4px 18px rgba(44,26,14,0.06); display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; }\n .tt-gauge-label-top { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 18px; }\n .tt-gauge-label-top.lt-accent { color: var(--accent); }\n .tt-gauge-label-top.lt-green { color: var(--green); }\n .tt-gauge-label-top.lt-gold { color: var(--gold); }\n .tt-gauge-label-top.lt-blue { color: var(--blue); }\n .tt-gauge-label-sub-top { font-size: 10px; color: var(--mocha); font-weight: 500; margin-top: -14px; margin-bottom: 12px; text-align: center; line-height: 1.2; }\n .tt-gauge-svg-wrap { position: relative; width: 100%; max-width: 180px; height: auto; aspect-ratio: 180\/100; margin-bottom: 6px; }\n .tt-gauge-svg { width: 100%; height: 100%; overflow: visible; }\n .gauge-zone { cursor: pointer; }\n .gz-path { transition: stroke-width 0.2s, filter 0.2s; }\n .gauge-zone:hover .gz-path { stroke-width: 16 !important; filter: brightness(0.9); }\n .tt-needle-result { font-size: 18px; font-weight: 900; letter-spacing: -0.3px; text-transform: uppercase; margin-top: 8px; }\n .tt-needle-result.nr-accent { color: var(--accent); }\n .tt-needle-result.nr-green { color: var(--green); }\n .tt-needle-result.nr-gold { color: var(--gold); }\n .tt-needle-result.nr-blue { color: var(--blue); }\n .tt-needle-label { font-size: 11px; color: var(--mocha); font-weight: 500; margin-top: 3px; text-align: center; }\n .tt-dynamic-info { margin-top: 14px; font-size: 11px; color: var(--caramel); font-weight: 600; text-align: center; min-height: 28px; background: var(--cream-2); border-radius: 8px; padding: 6px 10px; display: flex; align-items: center; justify-content: center; width: 100%; border: 1.5px dashed var(--cream-border); transition: all 0.2s; }\n .tt-info-bottom { margin-top: 12px; border: 1.5px solid var(--cream-border) !important; background: var(--cream) !important; color: var(--mocha) !important; }\n .tt-inference-row { grid-template-columns: 1fr 1fr; margin-bottom: 36px; }\n .tt-inf-card { background: var(--card-warm); border: 1.5px solid var(--cream-border); border-radius: 22px; padding: 26px 28px; box-shadow: 0 4px 18px rgba(44,26,14,0.06); display: flex; gap: 22px; align-items: flex-start; }\n .tt-inf-left { flex: 1; }\n .tt-inf-badge-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }\n .tt-inf-badge { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n .tt-inf-badge svg { width: 18px; height: 18px; fill: #fff; }\n .tt-inf-badge.ib-accent { background: linear-gradient(135deg,var(--accent),var(--accent-lt)); box-shadow: 0 4px 10px rgba(232,82,26,0.28); }\n .tt-inf-badge.ib-green { background: linear-gradient(135deg,var(--green),#22C55E); box-shadow: 0 4px 10px rgba(46,125,82,0.28); }\n .tt-inf-num { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--espresso); }\n .tt-inf-text { font-size: 14px; color: var(--walnut); line-height: 1.65; font-weight: 400; }\n .tt-inf-text strong { color: var(--accent); font-weight: 800; }\n .tt-inf-sub { font-size: 12px; color: var(--mocha); margin-top: 8px; line-height: 1.5; }\n .tt-bar-chart { flex-shrink: 0; display: flex; align-items: flex-end; gap: 5px; height: 72px; }\n .tt-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }\n .tt-bar { width: 22px; border-radius: 4px 4px 0 0; transition: height 0.3s; }\n .tt-bar.active-accent { background: linear-gradient(180deg, var(--accent-lt), var(--accent)); }\n .tt-bar.active-green { background: linear-gradient(180deg, #22C55E, var(--green)); }\n .tt-bar.inactive { background: var(--card-mid); }\n .tt-bar-x { font-size: 9px; font-weight: 600; color: var(--mocha); text-align: center; white-space: nowrap; }\n .ta-cols { grid-template-columns: repeat(3, 1fr); }\n .ta-card { background: var(--card-warm); border: 1.5px solid var(--cream-border); border-radius: 22px; overflow: hidden; box-shadow: 0 4px 22px rgba(44,26,14,0.07); display: flex; flex-direction: column; }\n .ta-top-strip { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 16px; border-bottom: 1.5px solid var(--cream-border); background: var(--card-mid); }\n .ta-top-left { display: flex; align-items: center; gap: 12px; }\n .ta-strip-icon { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(44,26,14,0.15); }\n .ta-strip-icon svg { width: 19px; height: 19px; fill: #fff; }\n .ta-lag .ta-strip-icon { background: linear-gradient(135deg,var(--accent),var(--accent-lt)); box-shadow: 0 4px 10px rgba(232,82,26,0.28); }\n .ta-waste .ta-strip-icon { background: linear-gradient(135deg,var(--walnut),var(--caramel)); box-shadow: 0 4px 10px rgba(92,58,30,0.25); }\n .ta-gain .ta-strip-icon { background: linear-gradient(135deg,var(--green),#22C55E); box-shadow: 0 4px 10px rgba(46,125,82,0.28); }\n .ta-strip-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--espresso); }\n .ta-info-btn { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--cream-border); background: var(--cream); color: var(--mocha); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.18s; }\n .ta-hero { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 18px; border-bottom: 1.5px solid var(--cream-border); gap: 16px; }\n .ta-desc-box { flex: 1; background: var(--cream-2); border: 1.5px solid var(--cream-border); border-radius: 14px; padding: 14px 16px; }\n .ta-desc-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.8px; color: var(--mocha); margin-bottom: 6px; }\n .ta-desc-text { font-size: 12.5px; color: var(--walnut); line-height: 1.6; font-weight: 400; }\n .ta-donut-wrap { flex-shrink: 0; }\n .ta-donut-outer { position: relative; width: 90px; height: 90px; }\n .ta-donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }\n .ta-dr-bg { fill: none; stroke: var(--card-mid); stroke-width: 10; }\n .ta-dr-fg { fill: none; stroke-width: 10; stroke-dasharray: 245; stroke-linecap: round; }\n .ta-lag .ta-dr-fg { stroke: url(#rg-ta-accent); stroke-dashoffset: 122; }\n .ta-waste .ta-dr-fg { stroke: url(#rg-ta-walnut); stroke-dashoffset: 147; }\n .ta-gain .ta-dr-fg { stroke: url(#rg-ta-green); stroke-dashoffset: 98; }\n .ta-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }\n .ta-donut-num { font-size: 26px; font-weight: 900; line-height: 1; }\n .ta-lag .ta-donut-num { color: var(--accent); }\n .ta-waste .ta-donut-num { color: var(--walnut); }\n .ta-gain .ta-donut-num { color: var(--green); }\n .ta-donut-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--mocha); margin-top: 2px; }\n .ta-focus-section { padding: 16px 18px 18px; flex: 1; }\n .ta-focus-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--mocha); margin-bottom: 10px; }\n .ta-row { display: flex; align-items: center; justify-content: space-between; background: var(--cream-2); border: 1.5px solid var(--cream-border); border-radius: 13px; padding: 11px 14px; margin-bottom: 8px; transition: transform 0.18s, box-shadow 0.18s; }\n .ta-row:hover { transform: translateX(3px); box-shadow: 0 4px 14px rgba(44,26,14,0.08); }\n .ta-row-left { display: flex; align-items: center; gap: 10px; flex: 1; }\n .ta-row-icon { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\n .ta-row-icon svg { width: 15px; height: 15px; fill: #fff; }\n .ta-row-text { min-width: 0; }\n .ta-row-title { font-size: 12.5px; font-weight: 700; color: var(--espresso); }\n .ta-row-qs { font-size: 11px; color: var(--mocha); margin-top: 1px; }\n .ta-row-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }\n .ta-row-info-btn { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--cream-border); background: var(--cream); color: var(--mocha); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.16s; }\n @media (max-width: 1100px) {\n .sp-grid, .sp-blocks, .at-row-1, .at-row-2, .tm-top-layout, .tt-gauges-row, .tt-inference-row, .ta-cols { grid-template-columns: 1fr; }\n }\n @media (max-width: 760px) {\n .wrapper { padding: 22px 18px 36px; border-radius: 18px; }\n .sa-cols, .sm-grid, .tm-tiles-grid, .tt-gauges-row { grid-template-columns: 1fr; }\n .dash-header { flex-direction: column; gap: 14px; align-items: flex-start; }\n .nav-menu { overflow-x: auto; }\n }\n @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }\n .dash-header { animation: fadeUp 0.4s ease both 0.05s; }\n .nav-menu { animation: fadeUp 0.4s ease both 0.12s; }\n <\/style>\n<\/head>\n<body>\n<div class=\"wrapper\">\n\n <header class=\"dash-header\">\n <div class=\"dash-logo\">\n <div class=\"dash-logo-mark\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M13.5 2c-5.621 0-10.211 4.443-10.475 10h-3.025l5 6.625 5-6.625h-2.975c.257-3.351 3.06-6 6.475-6 3.584 0 6.5 2.916 6.5 6.5s-2.916 6.5-6.5 6.5c-1.863 0-3.542-.793-4.728-2.053l-2.427 3.216c1.877 1.754 4.389 2.837 7.155 2.837 5.79 0 10.5-4.71 10.5-10.5s-4.71-10.5-10.5-10.5z\"><\/path><\/svg>\n <\/div>\n <div class=\"dash-title-wrap\">\n <h1>Launchpad <span>360<\/span><\/h1>\n <p>Performance Intelligence Dashboard<\/p>\n <\/div>\n <\/div>\n <div class=\"dash-date\">\ud83d\udcc5 Last Updated: <span id=\"current-date\"><\/span><\/div>\n <\/header>\n\n <nav class=\"nav-menu\">\n <button class=\"nav-item active\" data-tab=\"score-matrix\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z\"><\/path><\/svg>\n Score Matrix\n <\/button>\n <div class=\"nav-sep\"><\/div>\n <button class=\"nav-item\" data-tab=\"time-matrix\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z\"><\/path><\/svg>\n Time Matrix\n <\/button>\n <\/nav>\n\n \n <div class=\"tab-panel active\" id=\"tab-score-matrix\">\n <div class=\"section-header\">\n <h2>Score <em>Matrix<\/em><\/h2>\n <div class=\"sh-line\"><\/div>\n <\/div>\n\n <div class=\"sm-grid\">\n <div class=\"card\">\n <div class=\"info-card-inner\">\n <div class=\"info-card-top\">\n <div class=\"info-hex\"><svg viewBox=\"0 0 24 24\"><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14H7v-2h3v2zm0-4H7v-2h3v2zm4 4h-3v-2h3v2zm0-4h-3v-2h3v2z\"><\/path><\/svg><\/div>\n <div class=\"score-info-title\">\n <span class=\"si-badge\">01<\/span>\n <div class=\"si-heading\"><span class=\"t-dark\">Score <\/span><span class=\"t-accent\">Info<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"info-stat-grid\">\n <div class=\"info-stat-item\">\n <div class=\"info-stat-icon isi-blue\"><svg viewBox=\"0 0 24 24\"><path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 14H7v-2h10v2zm0-4H7v-2h10v2zm-3-4H7V7h7v2z\"><\/path><\/svg><\/div>\n <div class=\"info-stat-body\">\n <div class=\"info-stat-label\">Attempted<\/div>\n <div class=\"info-stat-num isn-blue\" id=\"stat-attempted\">0<\/div>\n <div class=\"info-stat-sub\">Questions Total<\/div>\n <\/div>\n <\/div>\n <div class=\"info-stat-item\">\n <div class=\"info-stat-icon isi-green\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\"><\/path><\/svg><\/div>\n <div class=\"info-stat-body\">\n <div class=\"info-stat-label\">Correct<\/div>\n <div class=\"info-stat-num isn-green\" id=\"stat-correct\">0<\/div>\n <div class=\"info-stat-sub\">Answered Right<\/div>\n <\/div>\n <\/div>\n <div class=\"info-stat-item\">\n <div class=\"info-stat-icon isi-red\"><svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"><\/path><\/svg><\/div>\n <div class=\"info-stat-body\">\n <div class=\"info-stat-label\">Wrong<\/div>\n <div class=\"info-stat-num isn-red\" id=\"stat-wrong\">0<\/div>\n <div class=\"info-stat-sub\">Need Review<\/div>\n <\/div>\n <\/div>\n <div class=\"info-stat-item\">\n <div class=\"info-stat-icon isi-gold\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"><\/path><\/svg><\/div>\n <div class=\"info-stat-body\">\n <div class=\"info-stat-label\">Skipped<\/div>\n <div class=\"info-stat-num isn-gold\" id=\"stat-skipped\">0<\/div>\n <div class=\"info-stat-sub\">Left Unanswered<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card score-card\">\n <div class=\"sc-eyebrow\">TOTAL SCORE<\/div>\n <div class=\"sc-score\" id=\"total-score\">0<sup id=\"total-max\">\/0<\/sup><\/div>\n <div class=\"sc-divider\"><\/div>\n <div class=\"sc-sub\" id=\"score-sub\">—<\/div>\n <a href=\"#\" class=\"sc-future-btn sc-future-btn-nav\" data-target-tab=\"score-matrix\" data-target-section=\"score-prediction\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z\"><\/path><\/svg>\n Know Your Future Score\n <\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"section-header\">\n <h2 class=\"sub-heading\">Accuracy <em>Tracker<\/em><\/h2>\n <div class=\"sh-line\"><\/div>\n <\/div>\n <div class=\"at-row-1\">\n <div class=\"card\">\n <div class=\"card-hd\" style=\"margin-bottom:26px;\">\n <div class=\"card-hd-icon chi-accent\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"2\"><\/circle><\/svg>\n <\/div>\n <div><div class=\"ch-title\">Test Accuracy<\/div><\/div>\n <\/div>\n <div class=\"donut-wrap\">\n <div class=\"donut-outer\">\n <svg class=\"donut-svg\" viewBox=\"0 0 182 182\">\n <defs><linearGradient id=\"rg-warm\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#E8521A\"><\/stop><stop offset=\"100%\" stop-color=\"#FF7B3A\"><\/stop><\/linearGradient><\/defs>\n <circle class=\"dr-bg\" cx=\"91\" cy=\"91\" r=\"85\"><\/circle>\n <circle class=\"dr-fg\" id=\"donut-fill\" cx=\"91\" cy=\"91\" r=\"85\"><\/circle>\n <\/svg>\n <div class=\"donut-center\">\n <div class=\"donut-pct\" id=\"test-accuracy-pct\">0<sup>%<\/sup><\/div>\n <div class=\"donut-caption\">Accuracy<\/div>\n <\/div>\n <\/div>\n <div class=\"tip-box\">\n <div class=\"tip-ico\"><svg viewBox=\"0 0 24 24\"><path d=\"M3.5 18.5l6-6 4 4L22 6.92 20.59 5.5l-7.09 8.09-4-4L2 17.09z\"><\/path><\/svg><\/div>\n <p id=\"accuracy-tip-text\">Keep it up! You’re on the right track.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card\">\n <div class=\"chart-card-head\">\n <div class=\"card-hd\" style=\"margin-bottom:0\">\n <div class=\"card-hd-icon chi-espresso\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M3.5 18.5l6-6 4 4L22 6.92 20.59 5.5l-7.09 8.09-4-4L2 17.09z\"><\/path><\/svg>\n <\/div>\n <div>\n <div class=\"ch-title\">Accuracy Map<\/div>\n <div class=\"ch-sub\">Your accuracy trend over time<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"chart-area\"><canvas id=\"accChart\"><\/canvas><\/div>\n <div class=\"chart-note\" id=\"accuracy-map-note\">Loading accuracy data…<\/div>\n <\/div>\n <\/div>\n <div class=\"at-row-2\">\n <div class=\"sp-info-card\">\n <p class=\"sp-info-desc\">This section provides a strategic review of your test performance. By analysing your current trends, test consistency, and topic-level accuracy, our AI identifies key areas for improvement and formulates a plan to help you achieve your targets.<\/p>\n <\/div>\n <div class=\"sp-score-tile has-pred\" id=\"pred-acc-tile\">\n <div class=\"sp-sheen\"><\/div>\n <span class=\"sp-star s1\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s2\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s3\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s4\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s5\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s6\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <div class=\"sp-score-eyebrow\">PREDICTED ACCURACY<\/div>\n <div class=\"sp-score-num\" id=\"predicted-accuracy-num\">0<span>%<\/span><\/div>\n <div class=\"sp-score-sub\" id=\"predicted-accuracy-sub\">Based on current performance trend<\/div>\n <\/div>\n <\/div>\n\n <div class=\"sp-blocks\" style=\"margin-bottom: 32px;\">\n <div class=\"sp-block sp-inference\">\n <div class=\"sp-block-head\">\n <div class=\"sp-block-head-icon\"><svg viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z\"><\/path><\/svg><\/div>\n <span class=\"sp-block-title\">Inference<\/span>\n <div class=\"sp-block-wave\"><svg viewBox=\"0 0 140 80\" preserveAspectRatio=\"none\" fill=\"none\"><path d=\"M0 40 Q35 10 70 40 Q105 70 140 40\" stroke=\"rgba(107,53,196,0.18)\" stroke-width=\"2\" fill=\"none\"><\/path><path d=\"M0 55 Q35 25 70 55 Q105 85 140 55\" stroke=\"rgba(107,53,196,0.10)\" stroke-width=\"2\" fill=\"none\"><\/path><\/svg><\/div>\n <\/div>\n <div class=\"sp-inputs\" style=\"padding: 24px; display: block; height: 100%;\" id=\"inference-text\">\n <p>Loading inference…<\/p>\n <\/div>\n <\/div>\n <div class=\"sp-block sp-suggest\">\n <div class=\"sp-block-head\">\n <div class=\"sp-block-head-icon\"><svg viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z\"><\/path><\/svg><\/div>\n <span class=\"sp-block-title\">Action Plan<\/span>\n <div class=\"sp-block-wave\"><svg viewBox=\"0 0 140 80\" preserveAspectRatio=\"none\" fill=\"none\"><path d=\"M0 40 Q35 10 70 40 Q105 70 140 40\" stroke=\"rgba(46,125,82,0.18)\" stroke-width=\"2\" fill=\"none\"><\/path><path d=\"M0 55 Q35 25 70 55 Q105 85 140 55\" stroke=\"rgba(46,125,82,0.10)\" stroke-width=\"2\" fill=\"none\"><\/path><\/svg><\/div>\n <\/div>\n <div class=\"sp-inputs\" style=\"padding: 24px; display: block; height: 100%;\" id=\"actionplan-text\">\n <p>Loading action plan…<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section-header\">\n <h2 class=\"sub-heading\">Score <em>Analytics<\/em><\/h2>\n <div class=\"sh-line\"><\/div>\n <\/div>\n <div class=\"sa-cols\">\n \n <div class=\"sa-card sa-missed\">\n <div class=\"sa-top-strip\">\n <div class=\"sa-top-left\">\n <div class=\"sa-strip-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"><\/path><\/svg><\/div>\n <span class=\"sa-strip-title\">Missed Score<\/span>\n <\/div>\n <button class=\"sa-strip-info\">i<\/button>\n <\/div>\n <div class=\"sa-hero-row\">\n <div class=\"sa-desc-box\"><div class=\"sa-desc-label\">Description<\/div><div class=\"sa-desc-text\">Questions you answered incorrectly. Reviewing these helps identify weak areas and patterns in your mistakes.<\/div><\/div>\n <div class=\"sa-circle-wrap\"><div class=\"sa-circle\"><div class=\"sa-circle-num\" id=\"missed-score-value\">0<\/div><div class=\"sa-circle-label\">Missed<\/div><\/div><\/div>\n <\/div>\n <div class=\"sa-rows-list\" id=\"missed-rows-list\">\n \n <div class=\"sa-row\"><div class=\"sa-row-left\"><div class=\"sa-row-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-.5-13H13v6l5.25 3.15-.75 1.23L11.5 14V7z\"><\/path><\/svg><\/div><div class=\"sa-row-text\"><div class=\"sa-row-title\">Fatigue Miss<\/div><div class=\"sa-row-sub\">\u2014<\/div><\/div><\/div><div class=\"sa-row-right\"><div class=\"sa-row-num\">0<\/div><button class=\"sa-row-info-btn\">i<\/button><\/div><\/div>\n <\/div>\n <\/div>\n \n <div class=\"sa-card sa-luck\">\n <div class=\"sa-top-strip\">\n <div class=\"sa-top-left\">\n <div class=\"sa-strip-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 8C8 10 5.9 16.17 3.82 21.34L5.71 22l1-2.3A4.49 4.49 0 0 0 8 20C19 20 22 3 22 3c-1 2-8 2-8 2s4-4 3-7c-3 2-4.5 5-4.5 5S17 0 12 0C10 4 13 8 17 8z\"><\/path><\/svg><\/div>\n <span class=\"sa-strip-title\">Luck Score<\/span>\n <\/div>\n <button class=\"sa-strip-info\">i<\/button>\n <\/div>\n <div class=\"sa-hero-row\">\n <div class=\"sa-desc-box\"><div class=\"sa-desc-label\">Description<\/div><div class=\"sa-desc-text\">Questions you got right by chance without strong knowledge. These are fragile wins \u2014 understanding them deeply turns luck into genuine ability.<\/div><\/div>\n <div class=\"sa-circle-wrap\"><div class=\"sa-circle\"><div class=\"sa-circle-num\" id=\"luck-score-value\">0<\/div><div class=\"sa-circle-label\">Luck<\/div><\/div><\/div>\n <\/div>\n <div class=\"sa-rows-list\" id=\"luck-rows-list\">\n <div class=\"sa-row\"><div class=\"sa-row-left\"><div class=\"sa-row-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7 8-11.5C20 5.81 16.19 2 11.5 2zm1 14.5h-2v-2h2v2zm0-4h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z\"><\/path><\/svg><\/div><div class=\"sa-row-text\"><div class=\"sa-row-title\">Decision Luck<\/div><div class=\"sa-row-sub\">\u2014<\/div><\/div><\/div><div class=\"sa-row-right\"><div class=\"sa-row-num\">0<\/div><button class=\"sa-row-info-btn\">i<\/button><\/div><\/div>\n <\/div>\n <\/div>\n \n <div class=\"sa-card sa-memory\">\n <div class=\"sa-top-strip\">\n <div class=\"sa-top-left\">\n <div class=\"sa-strip-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z\"><\/path><\/svg><\/div>\n <span class=\"sa-strip-title\">Memory Score<\/span>\n <\/div>\n <button class=\"sa-strip-info\">i<\/button>\n <\/div>\n <div class=\"sa-hero-row\">\n <div class=\"sa-desc-box\"><div class=\"sa-desc-label\">Description<\/div><div class=\"sa-desc-text\">Questions answered correctly from memory and retention. This measures your recall strength \u2014 the more here, the better your long-term learning.<\/div><\/div>\n <div class=\"sa-circle-wrap\"><div class=\"sa-circle\"><div class=\"sa-circle-num\" id=\"memory-score-value\">0<\/div><div class=\"sa-circle-label\">Memory<\/div><\/div><\/div>\n <\/div>\n <div class=\"sa-rows-list\" id=\"memory-rows-list\">\n <div class=\"sa-row\"><div class=\"sa-row-left\"><div class=\"sa-row-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M7 2v11h3v9l7-12h-4l4-8z\"><\/path><\/svg><\/div><div class=\"sa-row-text\"><div class=\"sa-row-title\">Quick Recall Memory<\/div><div class=\"sa-row-sub\">\u2014<\/div><\/div><\/div><div class=\"sa-row-right\"><div class=\"sa-row-num\">0<\/div><button class=\"sa-row-info-btn\">i<\/button><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section-header\" id=\"score-prediction\">\n <h2 class=\"sub-heading\">Score <em>Prediction<\/em><\/h2>\n <div class=\"sh-line\"><\/div>\n <\/div>\n <div class=\"sp-toggle-row\">\n <span class=\"sp-toggle-label\">Preview state:<\/span>\n <div class=\"sp-toggle\">\n <button class=\"sp-toggle-btn active-state\" id=\"btnHas\" onclick=\"setScoreState(true)\">\u2726 Has Prediction<\/button>\n <button class=\"sp-toggle-btn\" id=\"btnNo\" onclick=\"setScoreState(false)\">\u2715 No Prediction<\/button>\n <\/div>\n <\/div>\n <div class=\"sp-grid\">\n <div class=\"sp-info-card\">\n <p class=\"sp-info-desc\">Score prediction means the ability to estimate outcomes accurately using intelligent analytics. Our AI engine analyses your past performance trends, mistake patterns, and practice frequency to compute a reliable score range \u2014 helping you set realistic goals and optimise your preparation strategy before the exam.<\/p>\n <\/div>\n <div class=\"sp-score-tile has-pred sp-state-has\" id=\"tileHas\">\n <div class=\"sp-sheen\"><\/div>\n <span class=\"sp-star s1\"><svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s2\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s3\"><svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s4\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s5\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star s6\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <div class=\"sp-score-eyebrow\">PREDICTED SCORE<\/div>\n <div class=\"sp-score-num\" id=\"predicted-score-num\">0<span>\/250<\/span><\/div>\n <div class=\"sp-score-sub\" id=\"predicted-score-sub\">Based on current performance trend<\/div>\n <\/div>\n <div class=\"sp-score-tile no-pred sp-state-no hidden\" id=\"tileNo\">\n <span class=\"sp-star-red sr1\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star-red sr2\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star-red sr3\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star-red sr4\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <span class=\"sp-star-red sr5\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17 5.8 21.3l2.4-7.4L2 9.4h7.6z\"><\/path><\/svg><\/span>\n <div class=\"sp-no-pred-content\">\n <div class=\"sp-no-pred-icon-wrap\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z\"><\/path><\/svg><\/div>\n <div class=\"sp-no-pred-label\">No Prediction<\/div>\n <div class=\"sp-no-pred-sub\">Complete more tests with realistic exam conditions to generate a prediction.<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"sp-blocks\">\n <div class=\"sp-block sp-inference\">\n <div class=\"sp-block-head\">\n <div class=\"sp-block-head-icon\"><svg viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z\"><\/path><\/svg><\/div>\n <span class=\"sp-block-title\">Inference<\/span>\n <div class=\"sp-block-wave\"><svg viewBox=\"0 0 140 80\" preserveAspectRatio=\"none\" fill=\"none\"><path d=\"M0 40 Q35 10 70 40 Q105 70 140 40\" stroke=\"rgba(107,53,196,0.18)\" stroke-width=\"2\" fill=\"none\"><\/path><\/svg><\/div>\n <\/div>\n <div class=\"sp-inputs\" id=\"inference-full\" style=\"padding: 24px; display: block; height: 100%;\">\n <p>Loading prediction inference…<\/p>\n <\/div>\n <\/div>\n <div class=\"sp-block sp-suggest\">\n <div class=\"sp-block-head\">\n <div class=\"sp-block-head-icon\"><svg viewBox=\"0 0 24 24\"><path fill=\"white\" d=\"M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z\"><\/path><\/svg><\/div>\n <span class=\"sp-block-title\">Action Plan<\/span>\n <div class=\"sp-block-wave\"><svg viewBox=\"0 0 140 80\" preserveAspectRatio=\"none\" fill=\"none\"><path d=\"M0 40 Q35 10 70 40 Q105 70 140 40\" stroke=\"rgba(46,125,82,0.18)\" stroke-width=\"2\" fill=\"none\"><\/path><\/svg><\/div>\n <\/div>\n <div class=\"sp-inputs\" id=\"actionplan-full\" style=\"padding: 24px; display: block; height: 100%;\">\n <p>Loading action plan…<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"tab-panel\" id=\"tab-time-matrix\">\n <div class=\"section-header\" style=\"margin-top: 8px;\">\n <h2>Time <em>Matrix<\/em><\/h2>\n <div class=\"sh-line\"><\/div>\n <\/div>\n <p style=\"font-size:14px;color:var(--mocha);margin-bottom:36px;font-weight:400;\">Analyze your time performance in detail<\/p>\n\n <div class=\"section-header\" style=\"margin-top:0;\">\n <h2 class=\"sub-heading\">Time <em>Info<\/em><\/h2>\n <div class=\"sh-line\"><\/div>\n <\/div>\n\n <div class=\"tm-top-layout\">\n <div class=\"tm-tiles-grid\">\n <div class=\"tm-stat-tile\">\n <div class=\"tm-stat-icon tsi-accent\"><svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z\"><\/path><\/svg><\/div>\n <div class=\"tm-stat-body\">\n <div class=\"tm-stat-label\">Total Time<\/div>\n <div class=\"tm-stat-num tsn-accent\" id=\"total-time-min\">0 <span class=\"tm-stat-unit\">MIN<\/span><\/div>\n <div class=\"tm-stat-sub\">Total time taken for the assessment.<\/div>\n <\/div>\n <\/div>\n <div class=\"tm-stat-tile\">\n <div class=\"tm-stat-icon tsi-walnut\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"><\/path><\/svg><\/div>\n <div class=\"tm-stat-body\">\n <div class=\"tm-stat-label\">Time Remaining<\/div>\n <div class=\"tm-stat-num tsn-walnut\" id=\"time-remaining-min\">0 <span class=\"tm-stat-unit\">MIN<\/span><\/div>\n <div class=\"tm-stat-sub\">Estimated remaining time (based on duration).<\/div>\n <\/div>\n <\/div>\n <div class=\"tm-stat-tile\">\n <div class=\"tm-stat-icon tsi-green\"><svg viewBox=\"0 0 24 24\"><path d=\"M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z\"><\/path><\/svg><\/div>\n <div class=\"tm-stat-body\">\n <div class=\"tm-stat-label\">Max Time per Question<\/div>\n <div class=\"tm-stat-num tsn-green\" id=\"max-time-q\">0 <span class=\"tm-stat-unit\">SEC<\/span><\/div>\n <div class=\"tm-stat-sub\">Maximum time spent on a single question.<\/div>\n <div class=\"tm-stat-tag\" id=\"max-time-q-label\">\u2014<\/div>\n <\/div>\n <\/div>\n <div class=\"tm-stat-tile\">\n <div class=\"tm-stat-icon tsi-mocha\"><svg viewBox=\"0 0 24 24\"><path d=\"M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z\"><\/path><\/svg><\/div>\n <div class=\"tm-stat-body\">\n <div class=\"tm-stat-label\">Min Time per Question<\/div>\n <div class=\"tm-stat-num tsn-mocha\" id=\"min-time-q\">0 <span class=\"tm-stat-unit\">SEC<\/span><\/div>\n <div class=\"tm-stat-sub\">Minimum time spent on a question.<\/div>\n <div class=\"tm-stat-tag\" id=\"min-time-q-label\">\u2014<\/div>\n <\/div>\n <\/div>\n <div class=\"tm-stat-tile\" style=\"grid-column: 1 \/ -1;\">\n <div class=\"tm-stat-icon tsi-gold\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"><\/path><\/svg><\/div>\n <div class=\"tm-stat-body\">\n <div class=\"tm-stat-label\">Average Time per Question<\/div>\n <div class=\"tm-stat-num tsn-gold\" id=\"avg-time-q\">0 <span class=\"tm-stat-unit\">SEC<\/span><\/div>\n <div class=\"tm-stat-sub\">Average time across attempted questions.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"tm-total-card\">\n <div class=\"tm-hourglass-float\">\u23f3<\/div>\n <div class=\"tm-total-label\">TOTAL DURATION<\/div>\n <div class=\"tm-total-num\" id=\"duration-num\">60<span class=\"tm-total-unit\">MIN<\/span><\/div>\n <div class=\"tm-total-divider\"><\/div>\n <div class=\"tm-remaining-row\">\n <div class=\"tm-remaining-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z\"><\/path><\/svg><\/div>\n <span class=\"tm-remaining-label\">TIME REMAINING<\/span>\n <span class=\"tm-remaining-val\" id=\"remaining-val\">\u2014<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section-header\">\n <h2 class=\"sub-heading\">Time <em>Tracker<\/em><\/h2>\n <div class=\"sh-line\"><\/div>\n <\/div>\n <p style=\"font-size:13px;color:var(--mocha);margin-bottom:24px;\">Track your speed and accuracy to understand your performance better.<\/p>\n \n <div class=\"tt-gauges-row\">…<\/div>\n \n <div class=\"tt-inference-row\">…<\/div>\n <div class=\"ta-cols\">…<\/div>\n <p style=\"font-size:12px;color:var(--mocha);text-align:center;margin-top:24px;\">Time analytics (Lag\/Waste\/Gain) are based on your detailed response patterns.<\/p>\n <\/div>\n<\/div>\n\n<script>\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ LAUNCHPAD 360 \u2013 DYNAMIC DASHBOARD\n\/\/ Fetches analytics from backend and populates all sections.\n\/\/ Backend URL: change 'BACKEND_URL' to your Cloud Run endpoint.\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\nconst BACKEND_URL = 'https:\/\/launchpad-api-770009272949.asia-south1.run.app'; \/\/ <-- UPDATE IF NEEDED\n\n\/\/ Helper: get URL parameters\nfunction getParam(name) {\n const urlParams = new URLSearchParams(window.location.search);\n return urlParams.get(name);\n}\n\n\/\/ Global chart instance\nlet accChartInstance = null;\n\n\/\/ Format date\ndocument.getElementById('current-date').innerText = new Date().toLocaleDateString('en-US', { year:'numeric', month:'short', day:'numeric' });\n\n\/\/ Read parameters\nconst studentId = getParam('student_id');\nconst testSlug = getParam('test_slug');\nconst examType = getParam('exam_type') || 'CUET';\n\nif (!studentId || !testSlug) {\n document.body.innerHTML = '<div style=\"text-align:center;padding:50px;color:red\">Missing student_id or test_slug. Please retake the exam.<\/div>';\n throw new Error('Missing required parameters');\n}\n\nconst apiUrl = `${BACKEND_URL}\/api\/get-analytics?student_id=${studentId}&test_slug=${encodeURIComponent(testSlug)}&exam_type=${examType}`;\n\nfetch(apiUrl)\n .then(res => {\n if (!res.ok) throw new Error(`HTTP ${res.status}`);\n return res.json();\n })\n .then(data => {\n \/\/ 1. Score Metrics\n const scoreMetrics = data.score_metrics || {};\n document.getElementById('stat-attempted').innerText = scoreMetrics.attempted || 0;\n document.getElementById('stat-correct').innerText = scoreMetrics.correct || 0;\n document.getElementById('stat-wrong').innerText = scoreMetrics.wrong || 0;\n document.getElementById('stat-skipped').innerText = scoreMetrics.unattempted || 0;\n const totalScore = scoreMetrics.total_score || 0;\n const maxScore = scoreMetrics.max_score || 0;\n document.getElementById('total-score').innerHTML = `${totalScore}<sup id=\"total-max\">\/${maxScore}<\/sup>`;\n const percentage = scoreMetrics.percentage || 0;\n document.getElementById('score-sub').innerText = percentage >= 60 ? 'Outstanding Performance' : 'Keep Improving';\n\n \/\/ 2. Test Accuracy (donut)\n const testAccuracy = data.test_accuracy || 0;\n const circumference = 535;\n const offset = circumference - (circumference * testAccuracy \/ 100);\n document.getElementById('donut-fill').setAttribute('stroke-dashoffset', offset);\n document.getElementById('test-accuracy-pct').innerHTML = `${Math.round(testAccuracy)}<sup>%<\/sup>`;\n document.getElementById('accuracy-tip-text').innerText = testAccuracy >= 70 ? 'Keep it up! You\\'re on the right track.' : 'Focus on accuracy to boost your score.';\n\n \/\/ 3. Accuracy Map (Chart.js)\n const accMap = data.accuracy_map || [];\n const labels = accMap.map(item => `${item.interval_min} min`);\n const accValues = accMap.map(item => item.accuracy);\n const ctx = document.getElementById('accChart').getContext('2d');\n if (accChartInstance) accChartInstance.destroy();\n accChartInstance = new Chart(ctx, {\n type: 'line',\n data: {\n labels: labels.length ? labels : ['0','10','20','30','40','50','60'],\n datasets: [{\n data: accValues.length ? accValues : [0,0,0,0,0,0,0],\n borderColor: '#E8521A', borderWidth: 2.5,\n pointBackgroundColor: '#E8521A', pointBorderColor: '#fff',\n pointBorderWidth: 2.5, pointRadius: 5, pointHoverRadius: 8,\n fill: true,\n backgroundColor: (c) => {\n const g = c.chart.ctx.createLinearGradient(0,0,0,255);\n g.addColorStop(0,'rgba(232,82,26,0.14)');\n g.addColorStop(1,'rgba(232,82,26,0.00)');\n return g;\n },\n tension: 0.42\n }]\n },\n options: {\n responsive: true, maintainAspectRatio: false,\n plugins: { legend: { display: false }, tooltip: { callbacks: { label: v => ` ${v.raw}%` } } },\n scales: { x: { grid: { display: false } }, y: { min: 0, max: 100, grid: { color: '#EDD9C0' }, ticks: { stepSize: 20 } } }\n }\n });\n document.getElementById('accuracy-map-note').innerHTML = accValues.length ? `Your accuracy trend shows steady progress. Last session: ${accValues[accValues.length-1]}%` : 'Complete more tests to see accuracy trends.';\n\n \/\/ 4. Predictive Accuracy\n const predAcc = data.predictive_accuracy || {};\n if (predAcc.value !== undefined && predAcc.value !== null) {\n document.getElementById('predicted-accuracy-num').innerHTML = `${Math.round(predAcc.value)}<span>%<\/span>`;\n document.getElementById('predicted-accuracy-sub').innerText = predAcc.inference || 'Based on current performance trend';\n } else {\n document.getElementById('pred-acc-tile').style.display = 'none';\n }\n\n \/\/ 5. Score Analytics (Missed, Luck, Memory)\n const analyticsAcc = data.accuracy_analytics || {};\n const missed = analyticsAcc.missed_score || {};\n const luck = analyticsAcc.luck_score || {};\n const memory = analyticsAcc.memory_score || {};\n\n document.getElementById('missed-score-value').innerText = missed.value ?? 0;\n document.getElementById('luck-score-value').innerText = luck.value ?? 0;\n document.getElementById('memory-score-value').innerText = memory.value ?? 0;\n\n \/\/ Helper to render rows\n function renderRows(containerId, categories) {\n const container = document.getElementById(containerId);\n if (!container) return;\n container.innerHTML = '';\n categories.forEach(cat => {\n const row = document.createElement('div');\n row.className = 'sa-row';\n let iconSvg = '<svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"><\/path><\/svg>';\n if (cat.icon === 'walnut') iconSvg = '<svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"><\/path><\/svg>';\n if (cat.icon === 'gold') iconSvg = '<svg viewBox=\"0 0 24 24\"><path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"><\/path><\/svg>';\n if (cat.icon === 'espresso') iconSvg = '<svg viewBox=\"0 0 24 24\"><path d=\"M11.5 2C6.81 2 3 5.81 3 10.5S6.81 19 11.5 19h.5v3c4.86-2.34 8-7 8-11.5C20 5.81 16.19 2 11.5 2zm1 14.5h-2v-2h2v2zm0-4h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z\"><\/path><\/svg>';\n row.innerHTML = `\n <div class=\"sa-row-left\">\n <div class=\"sa-row-icon ${cat.iconClass}\">${iconSvg}<\/div>\n <div class=\"sa-row-text\">\n <div class=\"sa-row-title\">${cat.title}<\/div>\n <div class=\"sa-row-sub\">${cat.sub}<\/div>\n <\/div>\n <\/div>\n <div class=\"sa-row-right\">\n <div class=\"sa-row-num\">${cat.count}<\/div>\n <button class=\"sa-row-info-btn\">i<\/button>\n <\/div>\n `;\n container.appendChild(row);\n });\n }\n\n \/\/ Missed rows\n const missedRows = [];\n if (missed.fatigue_miss) missedRows.push({ title: 'Fatigue Miss', sub: (missed.fatigue_miss.questions || []).map(q=>'Q'+q).join(', ') || '\u2014', count: missed.fatigue_miss.count || 0, iconClass: '', icon: '' });\n if (missed.error_decision_miss) missedRows.push({ title: 'Error Decision Miss', sub: [...(missed.error_decision_miss.ric_questions||[]),...(missed.error_decision_miss.maic_questions||[])].map(q=>'Q'+q).join(', ') || '\u2014', count: missed.error_decision_miss.count || 0, iconClass: 'ri-walnut', icon: 'walnut' });\n if (missed.panic_miss) missedRows.push({ title: 'Panic Miss', sub: (missed.panic_miss.questions || []).map(q=>'Q'+q).join(', ') || '\u2014', count: missed.panic_miss.count || 0, iconClass: 'ri-espresso', icon: 'espresso' });\n if (missed.basic_concept_miss) missedRows.push({ title: 'Basic Concept Miss', sub: (missed.basic_concept_miss.questions || []).map(q=>'Q'+q).join(', ') || '\u2014', count: missed.basic_concept_miss.count || 0, iconClass: 'ri-mocha', icon: 'mocha' });\n if (missed.advanced_concept_miss) missedRows.push({ title: 'Advanced Concept Miss', sub: (missed.advanced_concept_miss.questions || []).map(q=>'Q'+q).join(', ') || '\u2014', count: missed.advanced_concept_miss.count || 0, iconClass: 'ri-accent2', icon: 'accent2' });\n renderRows('missed-rows-list', missedRows);\n\n \/\/ Luck rows\n const luckRows = [];\n if (luck.decision_luck) luckRows.push({ title: 'Decision Luck', sub: [...(luck.decision_luck.rc_questions||[]),...(luck.decision_luck.ma_questions||[])].map(q=>'Q'+q).join(', ') || '\u2014', count: luck.decision_luck.count || 0, iconClass: '', icon: '' });\n if (luck.fortune_luck) luckRows.push({ title: 'Fortune Luck', sub: [...(luck.fortune_luck.ec_questions||[]),...(luck.fortune_luck.mc_questions||[])].map(q=>'Q'+q).join(', ') || '\u2014', count: luck.fortune_luck.count || 0, iconClass: 'ri-gold', icon: 'gold' });\n if (luck.confidence_luck) luckRows.push({ title: 'Confidence Luck', sub: (luck.confidence_luck.questions || []).map(q=>'Q'+q).join(', ') || '\u2014', count: luck.confidence_luck.count || 0, iconClass: 'ri-mocha', icon: 'mocha' });\n renderRows('luck-rows-list', luckRows);\n\n \/\/ Memory rows\n const memoryRows = [];\n if (memory.quick_recall_memory) memoryRows.push({ title: 'Quick Recall Memory', sub: (memory.quick_recall_memory.questions || []).map(q=>'Q'+q).join(', ') || '\u2014', count: memory.quick_recall_memory.count || 0, iconClass: '', icon: '' });\n if (memory.short_term_memory) memoryRows.push({ title: 'Short Term Memory', sub: [...(memory.short_term_memory.mc_questions||[]),...(memory.short_term_memory.hc_questions||[])].map(q=>'Q'+q).join(', ') || '\u2014', count: memory.short_term_memory.count || 0, iconClass: 'ri-gold', icon: 'gold' });\n if (memory.smart_recall_memory) memoryRows.push({ title: 'Smart Recall Memory', sub: [...(memory.smart_recall_memory.rc_questions||[]),...(memory.smart_recall_memory.mac_questions||[])].map(q=>'Q'+q).join(', ') || '\u2014', count: memory.smart_recall_memory.count || 0, iconClass: 'ri-walnut', icon: 'walnut' });\n renderRows('memory-rows-list', memoryRows);\n\n \/\/ 6. Score Prediction\n const scorePred = data.score_prediction || {};\n const hasPrediction = scorePred.predicted_score !== null && scorePred.predicted_score !== undefined;\n if (hasPrediction) {\n document.getElementById('predicted-score-num').innerHTML = `${scorePred.predicted_score}<span>\/250<\/span>`;\n document.getElementById('predicted-score-sub').innerText = scorePred.inference1 || 'Based on current performance trend';\n document.getElementById('inference-full').innerHTML = `<p>${scorePred.inference1 || scorePred.inference2 || 'No inference'}<\/p>`;\n document.getElementById('actionplan-full').innerHTML = `<p>${scorePred.action_plan1 || scorePred.action_plan2 || 'No action plan'}<\/p>`;\n \/\/ Also update the smaller inference\/action blocks above\n document.getElementById('inference-text').innerHTML = `<p>${scorePred.inference1 || scorePred.inference2 || 'No inference'}<\/p>`;\n document.getElementById('actionplan-text').innerHTML = `<p>${scorePred.action_plan1 || scorePred.action_plan2 || 'No action plan'}<\/p>`;\n setScoreState(true);\n } else {\n setScoreState(false);\n document.getElementById('inference-full').innerHTML = `<p>${scorePred.inference1 || 'Prediction not available'}<\/p>`;\n document.getElementById('actionplan-full').innerHTML = `<p>${scorePred.action_plan1 || 'Complete more tests for prediction'}<\/p>`;\n }\n\n \/\/ 7. Time Metrics\n const timeMetrics = data.time_metrics || {};\n const totalSec = timeMetrics.time_taken_seconds || 0;\n const totalMin = Math.round(totalSec \/ 60);\n document.getElementById('total-time-min').innerHTML = `${totalMin} <span class=\"tm-stat-unit\">MIN<\/span>`;\n const examDuration = data.exam_duration || 60; \/\/ default 60 min\n document.getElementById('duration-num').innerHTML = `${examDuration}<span class=\"tm-total-unit\">MIN<\/span>`;\n const remainingMin = Math.max(0, examDuration - totalMin);\n document.getElementById('time-remaining-min').innerHTML = `${remainingMin} <span class=\"tm-stat-unit\">MIN<\/span>`;\n document.getElementById('remaining-val').innerHTML = `${remainingMin} MIN`;\n\n const maxTimeVal = timeMetrics.max_time_val || 0;\n const maxTimeQ = timeMetrics.max_time_q ? `Q${timeMetrics.max_time_q}` : '\u2014';\n document.getElementById('max-time-q').innerHTML = `${maxTimeVal} <span class=\"tm-stat-unit\">SEC<\/span>`;\n document.getElementById('max-time-q-label').innerText = maxTimeQ;\n\n const minTimeVal = timeMetrics.min_time_val || 0;\n const minTimeQ = timeMetrics.min_time_q ? `Q${timeMetrics.min_time_q}` : '\u2014';\n document.getElementById('min-time-q').innerHTML = `${minTimeVal} <span class=\"tm-stat-unit\">SEC<\/span>`;\n document.getElementById('min-time-q-label').innerText = minTimeQ;\n\n const attemptedQ = scoreMetrics.attempted || 1;\n const avgSec = Math.round(totalSec \/ attemptedQ);\n document.getElementById('avg-time-q').innerHTML = `${avgSec} <span class=\"tm-stat-unit\">SEC<\/span>`;\n\n \/\/ Additional notes: time remaining in total card\n \/\/ All done\n })\n .catch(err => {\n console.error('Failed to load analytics:', err);\n document.body.innerHTML = `<div style=\"text-align:center;padding:50px;color:red\">Error loading analytics. Please try again later.<br>${err.message}<\/div>`;\n });\n\n\/\/ Tab switching (already present)\nconst navBtns = document.querySelectorAll('.nav-item[data-tab]');\nconst panels = document.querySelectorAll('.tab-panel');\nnavBtns.forEach(btn => {\n btn.addEventListener('click', function () {\n navBtns.forEach(b => b.classList.remove('active'));\n panels.forEach(p => p.classList.remove('active'));\n this.classList.add('active');\n const targetId = 'tab-' + this.dataset.tab;\n const targetPanel = document.getElementById(targetId);\n if (targetPanel) {\n targetPanel.classList.add('active');\n if (this.dataset.tab === 'score-matrix' && accChartInstance) accChartInstance.resize();\n }\n });\n});\n\n\/\/ Smooth scroll\ndocument.querySelector('.sc-future-btn')?.addEventListener('click', function(e) {\n e.preventDefault();\n document.getElementById('score-prediction')?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n});\n\n\/\/ Gauge info (existing)\nwindow.showGaugeInfo = function(element, infoText) {\n const card = element.closest('.tt-gauge-card');\n if (card) {\n const infoDiv = card.querySelector('.tt-dynamic-info');\n if (infoDiv) {\n infoDiv.textContent = infoText;\n infoDiv.style.color = 'var(--espresso)';\n infoDiv.style.borderColor = 'var(--accent)';\n infoDiv.style.background = 'var(--cream)';\n }\n const allPaths = card.querySelectorAll('.gz-path');\n allPaths.forEach(p => p.style.strokeWidth = '12');\n const targetPath = element.querySelector('.gz-path');\n if (targetPath) targetPath.style.strokeWidth = '16';\n }\n};\n\nwindow.setScoreState = function(hasPred) {\n const tileHas = document.getElementById('tileHas');\n const tileNo = document.getElementById('tileNo');\n const btnHas = document.getElementById('btnHas');\n const btnNo = document.getElementById('btnNo');\n if (hasPred) {\n tileHas?.classList.remove('hidden');\n tileNo?.classList.add('hidden');\n btnHas?.classList.add('active-state');\n btnNo?.classList.remove('no-state');\n } else {\n tileHas?.classList.add('hidden');\n tileNo?.classList.remove('hidden');\n btnNo?.classList.add('no-state');\n btnHas?.classList.remove('active-state');\n }\n};\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Launchpad 360 \u2013 Dashboard Launchpad 360 Performance Intelligence Dashboard \ud83d\udcc5 Last Updated: Score Matrix Time Matrix Score Matrix 01 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":"default","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-379","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=\/wp\/v2\/pages\/379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=379"}],"version-history":[{"count":1,"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=\/wp\/v2\/pages\/379\/revisions"}],"predecessor-version":[{"id":380,"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=\/wp\/v2\/pages\/379\/revisions\/380"}],"wp:attachment":[{"href":"https:\/\/cuetexamsnta.massgraduates.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}