Merge pull request #14 from Dhiman07-cyber/main

Major UI/UX Overhaul: Migration to Vite + Tailwind CSS with Full Responsiveness on all device screen

backend/massive_data_ingestion.py

@@ -216,7 +216,7 @@ async def high_volume_processing_loop():
             await asyncio.sleep(30)  # Wait 30 seconds on error
 
 def cleanup_old_events():
-    """Delete events older than 24 hours to prevent unbounded database growth"""
+    """Delete events older than 7 days to prevent unbounded database growth"""
     try:
         import os
         from db_adapter import get_db_connection
@@ -227,7 +227,7 @@ def cleanup_old_events():
         conn = get_db_connection(db_path)
         cursor = conn.cursor()
         
-        cursor.execute("DELETE FROM events WHERE timestamp < datetime('now', '-24 hours')")
+        cursor.execute("DELETE FROM events WHERE timestamp < datetime('now', '-7 days')")
         # Handle SQLite cursor vs Postgres wrapper differences in reporting deleted rows
         deleted = getattr(cursor, 'rowcount', 0)
         conn.commit()

check_dates.py

@@ -0,0 +1,20 @@
+import sqlite3
+from datetime import datetime
+
+conn = sqlite3.connect('data/enhanced_fake_news.db')
+c = conn.cursor()
+c.execute("SELECT MIN(timestamp), MAX(timestamp), COUNT(*) FROM events")
+min_ts, max_ts, cnt = c.fetchone()
+print(f"Total Events: {cnt}")
+print(f"Min Timestamp: {min_ts}")
+print(f"Max Timestamp: {max_ts}")
+
+c.execute("SELECT COUNT(*) FROM events WHERE timestamp > datetime('now', '-24 hours')")
+last_24h_cnt = c.fetchone()[0]
+print(f"Events in last 24h: {last_24h_cnt}")
+
+# Check breakdown of classifications
+c.execute("SELECT fake_news_verdict, COUNT(*) FROM events GROUP BY fake_news_verdict")
+print("Verdict breakdown:", c.fetchall())
+
+conn.close()

check_db.py

@@ -1,11 +1,25 @@
 import sqlite3
-conn = sqlite3.connect('data/enhanced_fake_news.db')
-c = conn.cursor()
-c.execute("SELECT name FROM sqlite_master WHERE type='table'")
-print('Tables:', c.fetchall())
-c.execute('SELECT COUNT(*) FROM events')
-print('Events count:', c.fetchone()[0])
-c.execute("PRAGMA table_info(events)")
-cols = c.fetchall()
-print('Event columns:', [col[1] for col in cols])
+from datetime import datetime
+
+conn = sqlite3.connect("data/enhanced_fake_news.db")
+conn.row_factory = sqlite3.Row
+
+print("Current UTC according to SQLite:")
+row = conn.execute("SELECT datetime('now') as ut, datetime('now', '-24 hours') as ut24, datetime('now', '-7 days') as ut7d").fetchone()
+print(f"  datetime('now'): {row['ut']}")
+print(f"  datetime('now', '-24 hours'): {row['ut24']}")
+print(f"  datetime('now', '-7 days'): {row['ut7d']}")
+
+print("\nLast 5 events in database:")
+rows = conn.execute("SELECT timestamp FROM events ORDER BY timestamp DESC LIMIT 5").fetchall()
+for r in rows:
+    print(f"  timestamp: {r['timestamp']}")
+
+print("\nLet's test the 24 hour filter:")
+row = conn.execute("SELECT COUNT(*) as cnt FROM events WHERE timestamp > datetime('now', '-24 hours')").fetchone()
+print(f"  Count with > -24 hours: {row['cnt']}")
+
+row = conn.execute("SELECT COUNT(*) as cnt FROM events").fetchone()
+print(f"  Total count: {row['cnt']}")
+
 conn.close()

frontend/assets/css/styles.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--saffron:#f93;--india-green:#138808;--ashoka-blue:navy}html{scroll-behavior:smooth}body{min-height:100vh;overflow-x:hidden;--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity,1));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input{font:inherit}::-moz-selection{--tw-bg-opacity:1;background-color:rgb(254 215 170/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity,1))}::selection{--tw-bg-opacity:1;background-color:rgb(254 215 170/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity,1))}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.menu-button.is-open .menu-line:first-child{transform:translateY(8px) rotate(45deg)}.menu-button.is-open .menu-line:nth-child(2){opacity:0}.menu-button.is-open .menu-line:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.mobile-menu{position:fixed;inset:0;z-index:50;display:none;overflow-y:auto;background-color:hsla(0,0%,100%,.95);--tw-backdrop-blur:blur(24px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.mobile-menu.is-open{display:flex}.heatmap-path{cursor:pointer;fill:#94a3b8;stroke:#fff;outline:2px solid transparent;outline-offset:2px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1)}.heatmap-path:focus-visible{stroke:#f93}.heatmap-path{stroke-width:.8;filter:drop-shadow(0 1px 2px rgba(15,23,42,.18))}.heatmap-path:hover{stroke:#f93;stroke-width:2}.heatmap-path.selected,.heatmap-path:hover{--tw-brightness:brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.heatmap-path.selected{stroke:#f93;stroke-width:3;filter:drop-shadow(0 0 12px rgba(232,119,34,.42))}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-left-\[10\%\]{left:-10%}.-right-\[10\%\]{right:-10%}.-top-10{top:-2.5rem}.-top-\[15\%\]{top:-15%}.bottom-4{bottom:1rem}.bottom-6{bottom:1.5rem}.left-1\/2{left:50%}.left-1\/4{left:25%}.left-4{left:1rem}.right-0{right:0}.right-4{right:1rem}.right-6{right:1.5rem}.top-0{top:0}.top-1\/2{top:50%}.top-4{top:1rem}.top-6{top:1.5rem}.top-\[25\%\]{top:25%}.top-\[30\%\]{top:30%}.top-full{top:100%}.isolate{isolation:isolate}.-z-10{z-index:-10}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.z-\[100\]{z-index:100}.z-\[200\]{z-index:200}.z-\[60\]{z-index:60}.z-\[70\]{z-index:70}.m-\[-1px\]{margin:-1px}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-40{height:10rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[0\.9em\]{height:.9em}.h-\[1px\]{height:1px}.h-\[400px\]{height:400px}.h-\[450px\]{height:450px}.h-\[550px\]{height:550px}.h-\[600px\]{height:600px}.h-\[650px\]{height:650px}.h-\[80vh\]{height:80vh}.h-full{height:100%}.max-h-\[20rem\]{max-height:20rem}.max-h-\[40vh\]{max-height:40vh}.max-h-\[500px\]{max-height:500px}.max-h-\[700px\]{max-height:700px}.max-h-full{max-height:100%}.min-h-11{min-height:2.75rem}.min-h-\[1\.2em\]{min-height:1.2em}.min-h-\[16rem\]{min-height:16rem}.min-h-\[22rem\]{min-height:22rem}.min-h-\[350px\]{min-height:350px}.min-h-\[calc\(100svh-4rem\)\]{min-height:calc(100svh - 4rem)}.min-h-full{min-height:100%}.min-h-screen{min-height:100vh}.w-0{width:0}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-2\/3{width:66.666667%}.w-20{width:5rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-32{width:8rem}.w-4{width:1rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[0\.1em\]{width:.1em}.w-\[1px\]{width:1px}.w-\[400px\]{width:400px}.w-\[450px\]{width:450px}.w-\[480px\]{width:480px}.w-\[550px\]{width:550px}.w-\[600px\]{width:600px}.w-\[650px\]{width:650px}.w-\[90vw\]{width:90vw}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.min-w-0{min-width:0}.min-w-11{min-width:2.75rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-\[1550px\]{max-width:1550px}.max-w-\[20ch\]{max-width:20ch}.max-w-\[950px\]{max-width:950px}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-none{flex:none}.shrink-0{flex-shrink:0}.origin-center{transform-origin:center}.origin-top-right{transform-origin:top right}.-translate-x-1\/2{--tw-translate-x:-50%}.-rotate-90,.-translate-x-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-90{--tw-rotate:-90deg}.scale-0{--tw-scale-x:0;--tw-scale-y:0}.scale-0,.scale-100{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-95,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.animate-blink{animation:blink 1s step-end infinite}@keyframes bounceScroll{0%,15%,to{transform:translateY(0)}7.5%{transform:translateY(-12px)}}.animate-bounce-scroll{animation:bounceScroll 4s ease-in-out infinite}.animate-fade-in{animation:fadeIn .5s ease-out forwards}.animate-fade-in-up{animation:fadeInUp .6s ease-out forwards}@keyframes float{0%,to{transform:translateY(0) scale(1) rotate(0deg)}50%{transform:translateY(-20px) scale(1.05) rotate(1deg)}}.animate-float{animation:float 3s ease-in-out infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes premiumFade{0%{opacity:.6}to{opacity:1}}.animate-premium-fade{animation:premiumFade 8s ease-in-out infinite alternate}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.animate-pulse-soft{animation:pulseSoft 2s ease-in-out infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-grabbing{cursor:grabbing}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px*var(--tw-divide-x-reverse));border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)))}.divide-slate-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(241 245 249/var(--tw-divide-opacity,1))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[2\.5rem\]{border-radius:2.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-b-2xl{border-bottom-right-radius:1rem;border-bottom-left-radius:1rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-t-4{border-top-width:4px}.border-dashed{border-style:dashed}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-amber-500\/20{border-color:rgba(245,158,11,.2)}.border-ashoka-blue-200,.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity,1))}.border-emerald-200{--tw-border-opacity:1;border-color:rgb(167 243 208/var(--tw-border-opacity,1))}.border-emerald-500\/20{border-color:rgba(16,185,129,.2)}.border-orange-200{--tw-border-opacity:1;border-color:rgb(254 215 170/var(--tw-border-opacity,1))}.border-purple-200{--tw-border-opacity:1;border-color:rgb(233 213 255/var(--tw-border-opacity,1))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-red-500\/20{border-color:rgba(239,68,68,.2)}.border-saffron-100{--tw-border-opacity:1;border-color:rgb(255 237 213/var(--tw-border-opacity,1))}.border-saffron-200{--tw-border-opacity:1;border-color:rgb(254 215 170/var(--tw-border-opacity,1))}.border-saffron-300{--tw-border-opacity:1;border-color:rgb(253 186 116/var(--tw-border-opacity,1))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-slate-200\/60{border-color:rgba(226,232,240,.6)}.border-slate-200\/80{border-color:rgba(226,232,240,.8)}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.border-slate-800{--tw-border-opacity:1;border-color:rgb(30 41 59/var(--tw-border-opacity,1))}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-white\/5{border-color:hsla(0,0%,100%,.05)}.border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138/var(--tw-border-opacity,1))}.border-t-amber-500{--tw-border-opacity:1;border-top-color:rgb(245 158 11/var(--tw-border-opacity,1))}.border-t-ashoka-blue-400{--tw-border-opacity:1;border-top-color:rgb(96 165 250/var(--tw-border-opacity,1))}.border-t-ashoka-blue-500{--tw-border-opacity:1;border-top-color:rgb(0 0 128/var(--tw-border-opacity,1))}.border-t-blue-600{--tw-border-opacity:1;border-top-color:rgb(37 99 235/var(--tw-border-opacity,1))}.border-t-emerald-600{--tw-border-opacity:1;border-top-color:rgb(5 150 105/var(--tw-border-opacity,1))}.border-t-india-green-500{--tw-border-opacity:1;border-top-color:rgb(19 136 8/var(--tw-border-opacity,1))}.border-t-red-500{--tw-border-opacity:1;border-top-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-t-saffron-500{--tw-border-opacity:1;border-top-color:rgb(255 153 51/var(--tw-border-opacity,1))}.border-t-slate-500{--tw-border-opacity:1;border-top-color:rgb(100 116 139/var(--tw-border-opacity,1))}.bg-\[\#fdfaf0\]{--tw-bg-opacity:1;background-color:rgb(253 250 240/var(--tw-bg-opacity,1))}.bg-\[\#fefcf8\]{--tw-bg-opacity:1;background-color:rgb(254 252 248/var(--tw-bg-opacity,1))}.bg-\[\#fffdf4\]{--tw-bg-opacity:1;background-color:rgb(255 253 244/var(--tw-bg-opacity,1))}.bg-\[\#fffdf4\]\/95{background-color:rgba(255,253,244,.95)}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-amber-500\/10{background-color:rgba(245,158,11,.1)}.bg-ashoka-blue-500{--tw-bg-opacity:1;background-color:rgb(0 0 128/var(--tw-bg-opacity,1))}.bg-ashoka-blue-500\/15{background-color:rgba(0,0,128,.15)}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-current{background-color:currentColor}.bg-emerald-50{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-emerald-500\/10{background-color:rgba(16,185,129,.1)}.bg-emerald-600{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}.bg-india-green-500{--tw-bg-opacity:1;background-color:rgb(19 136 8/var(--tw-bg-opacity,1))}.bg-india-green-500\/25{background-color:rgba(19,136,8,.25)}.bg-orange-50{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22/var(--tw-bg-opacity,1))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-500\/10{background-color:rgba(239,68,68,.1)}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-saffron-50{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.bg-saffron-500{--tw-bg-opacity:1;background-color:rgb(255 153 51/var(--tw-bg-opacity,1))}.bg-saffron-500\/30{background-color:rgba(255,153,51,.3)}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-slate-50\/50{background-color:rgba(248,250,252,.5)}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-slate-950{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity,1))}.bg-slate-950\/40{background-color:rgba(2,6,23,.4)}.bg-slate-950\/90{background-color:rgba(2,6,23,.9)}.bg-slate-950\/95{background-color:rgba(2,6,23,.95)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-white\/80{background-color:hsla(0,0%,100%,.8)}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.bg-white\/95{background-color:hsla(0,0%,100%,.95)}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(250 204 21/var(--tw-bg-opacity,1))}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232/var(--tw-bg-opacity,1))}.bg-\[linear-gradient\(135deg\2c rgba\(255\2c 153\2c 51\2c 0\.08\)_0\%\2c rgba\(255\2c 255\2c 255\2c 1\)_50\%\2c rgba\(19\2c 136\2c 8\2c 0\.08\)_100\%\)\]{background-image:linear-gradient(135deg,rgba(255,153,51,.08),#fff 50%,rgba(19,136,8,.08))}.bg-\[radial-gradient\(circle\2c rgba\(0\2c 0\2c 128\2c 0\.12\)_0\%\2c transparent_70\%\)\]{background-image:radial-gradient(circle,rgba(0,0,128,.12) 0,transparent 70%)}.bg-\[radial-gradient\(circle\2c rgba\(19\2c 136\2c 8\2c 0\.22\)_0\%\2c transparent_70\%\)\]{background-image:radial-gradient(circle,rgba(19,136,8,.22) 0,transparent 70%)}.bg-\[radial-gradient\(circle\2c rgba\(255\2c 153\2c 51\2c 0\.28\)_0\%\2c transparent_70\%\)\]{background-image:radial-gradient(circle,rgba(255,153,51,.28) 0,transparent 70%)}.bg-\[radial-gradient\(circle_at_20\%_20\%\2c rgba\(255\2c 153\2c 51\2c 0\.15\)\2c transparent_50\%\)\2c radial-gradient\(circle_at_80\%_80\%\2c rgba\(19\2c 136\2c 8\2c 0\.15\)\2c transparent_50\%\)\]{background-image:radial-gradient(circle at 20% 20%,rgba(255,153,51,.15),transparent 50%),radial-gradient(circle at 80% 80%,rgba(19,136,8,.15),transparent 50%)}.bg-\[radial-gradient\(circle_at_20\%_20\%\2c rgba\(255\2c 153\2c 51\2c 0\.2\)\2c transparent_50\%\)\2c radial-gradient\(circle_at_80\%_80\%\2c rgba\(19\2c 136\2c 8\2c 0\.2\)\2c transparent_50\%\)\]{background-image:radial-gradient(circle at 20% 20%,rgba(255,153,51,.2),transparent 50%),radial-gradient(circle at 80% 80%,rgba(19,136,8,.2),transparent 50%)}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--tw-gradient-stops))}.from-ashoka-blue-200{--tw-gradient-from:#bfdbfe var(--tw-gradient-from-position);--tw-gradient-to:rgba(191,219,254,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-saffron-50\/80{--tw-gradient-from:rgba(255,247,237,.8) var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,247,237,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-saffron-500{--tw-gradient-from:#f93 var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,153,51,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-saffron-500\/10{--tw-gradient-from:rgba(255,153,51,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,153,51,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-saffron-500\/15{--tw-gradient-from:rgba(255,153,51,.15) var(--tw-gradient-from-position);--tw-gradient-to:rgba(255,153,51,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-ashoka-blue-500{--tw-gradient-to:rgba(0,0,128,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),navy var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-white{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#fff var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-ashoka-blue-500{--tw-gradient-to:navy var(--tw-gradient-to-position)}.to-india-green-50\/80{--tw-gradient-to:rgba(240,253,244,.8) var(--tw-gradient-to-position)}.to-india-green-500{--tw-gradient-to:#138808 var(--tw-gradient-to-position)}.to-india-green-500\/10{--tw-gradient-to:rgba(19,136,8,.1) var(--tw-gradient-to-position)}.to-india-green-500\/15{--tw-gradient-to:rgba(19,136,8,.15) var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.stroke-white{stroke:#fff}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-12{padding-bottom:3rem}.pb-2{padding-bottom:.5rem}.pb-32{padding-bottom:8rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pr-2{padding-right:.5rem}.pt-1\.5{padding-top:.375rem}.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}.pt-24{padding-top:6rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-7{line-height:1.75rem}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[0\.14em\]{letter-spacing:.14em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-normal{letter-spacing:0}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-ashoka-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-ashoka-blue-500{--tw-text-opacity:1;color:rgb(0 0 128/var(--tw-text-opacity,1))}.text-ashoka-blue-600,.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-emerald-700{--tw-text-opacity:1;color:rgb(4 120 87/var(--tw-text-opacity,1))}.text-india-green-500{--tw-text-opacity:1;color:rgb(19 136 8/var(--tw-text-opacity,1))}.text-india-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22/var(--tw-text-opacity,1))}.text-orange-700{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.text-purple-700{--tw-text-opacity:1;color:rgb(126 34 206/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-saffron-500{--tw-text-opacity:1;color:rgb(255 153 51/var(--tw-text-opacity,1))}.text-saffron-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-saffron-700{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.text-slate-950{--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7/var(--tw-text-opacity,1))}.no-underline{text-decoration-line:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-20{opacity:.2}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.opacity-\[0\.04\]{opacity:.04}.opacity-\[0\.05\]{opacity:.05}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-\[0_0_15px_rgba\(255\2c 255\2c 255\2c 0\.15\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_15px_rgba\(255\2c 255\2c 255\2c 0\.15\)\]{--tw-shadow:0 0 15px hsla(0,0%,100%,.15);--tw-shadow-colored:0 0 15px var(--tw-shadow-color)}.shadow-\[0_0_8px_rgba\(16\2c 185\2c 129\2c 0\.5\)\]{--tw-shadow:0 0 8px rgba(16,185,129,.5);--tw-shadow-colored:0 0 8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_8px_rgba\(19\2c 136\2c 8\2c 0\.4\)\]{--tw-shadow:0 0 8px rgba(19,136,8,.4);--tw-shadow-colored:0 0 8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_8px_rgba\(220\2c 38\2c 38\2c 0\.4\)\]{--tw-shadow:0 0 8px rgba(220,38,38,.4);--tw-shadow-colored:0 0 8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_8px_rgba\(245\2c 158\2c 11\2c 0\.5\)\]{--tw-shadow:0 0 8px rgba(245,158,11,.5);--tw-shadow-colored:0 0 8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_8px_rgba\(249\2c 115\2c 22\2c 0\.4\)\]{--tw-shadow:0 0 8px rgba(249,115,22,.4);--tw-shadow-colored:0 0 8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_8px_rgba\(250\2c 204\2c 21\2c 0\.4\)\]{--tw-shadow:0 0 8px rgba(250,204,21,.4);--tw-shadow-colored:0 0 8px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_10px_40px_rgba\(0\2c 0\2c 0\2c 0\.1\)\]{--tw-shadow:0 10px 40px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_10px_40px_rgba\(0\2c 0\2c 0\2c 0\.15\)\]{--tw-shadow:0 10px 40px rgba(0,0,0,.15);--tw-shadow-colored:0 10px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_15px_40px_rgba\(0\2c 0\2c 0\2c 0\.1\)\]{--tw-shadow:0 15px 40px rgba(0,0,0,.1);--tw-shadow-colored:0 15px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_20px_50px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{--tw-shadow:0 20px 50px rgba(0,0,0,.5);--tw-shadow-colored:0 20px 50px var(--tw-shadow-color)}.shadow-\[0_20px_50px_rgba\(0\2c 0\2c 0\2c 0\.5\)\],.shadow-card{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-card{--tw-shadow:0 1px 2px rgba(15,23,42,.06),0 12px 32px rgba(15,23,42,.06);--tw-shadow-colored:0 1px 2px var(--tw-shadow-color),0 12px 32px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-premium{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-premium{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.05);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -2px var(--tw-shadow-color),0 0 0 1px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-offset-2{outline-offset:2px}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.blur-\[100px\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[100px\]{--tw-blur:blur(100px)}.blur-\[110px\]{--tw-blur:blur(110px)}.blur-\[110px\],.blur-\[120px\]{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-\[120px\]{--tw-blur:blur(120px)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.drop-shadow,.drop-shadow-md{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-md{--tw-drop-shadow:drop-shadow(0 4px 3px rgba(0,0,0,.07)) drop-shadow(0 2px 2px rgba(0,0,0,.06))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-2xl{--tw-backdrop-blur:blur(40px)}.backdrop-blur-2xl,.backdrop-blur-md{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-blur-xl{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[fill\2c stroke\2c stroke-width\]{transition-property:fill,stroke,stroke-width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[transform\2c border-color\2c box-shadow\]{transition-property:transform,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-1000{transition-duration:1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-\[cubic-bezier\(0\.16\2c 1\2c 0\.3\2c 1\)\]{transition-timing-function:cubic-bezier(.16,1,.3,1)}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.will-change-transform{will-change:transform}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulseSoft{0%,to{opacity:1}50%{opacity:.75}}.animate-fade-in-up{animation:fadeInUp .6s ease-out forwards}.animate-fade-in{animation:fadeIn .5s ease-out forwards}.animate-pulse-soft{animation:pulseSoft 2s ease-in-out infinite}.\[a-z0-9_\:\/\\-\\\[\\\]\.\%\]{a-z0-9_:/\-\[\].%}.\[mask-image\:linear-gradient\(to_bottom\2c white_90\%\2c transparent\)\]{-webkit-mask-image:linear-gradient(180deg,#fff 90%,transparent);mask-image:linear-gradient(180deg,#fff 90%,transparent)}#event-detail-card{border:1.5px solid transparent!important;background:linear-gradient(#fffdf4,#fffdf4) padding-box,linear-gradient(135deg,rgba(255,153,51,.4),rgba(0,0,128,.15),rgba(19,136,8,.4)) border-box!important}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:-translate-y-0\.5:hover,.hover\:-translate-y-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:scale-110:hover,.hover\:scale-\[1\.02\]:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02}.hover\:scale-\[1\.05\]:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-saffron-200:hover{--tw-border-opacity:1;border-color:rgb(254 215 170/var(--tw-border-opacity,1))}.hover\:border-saffron-300:hover{--tw-border-opacity:1;border-color:rgb(253 186 116/var(--tw-border-opacity,1))}.hover\:border-slate-200:hover{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.hover\:border-white\/10:hover{border-color:hsla(0,0%,100%,.1)}.hover\:bg-ashoka-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.hover\:bg-saffron-50:hover{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.hover\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.hover\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.hover\:bg-slate-800:hover{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:bg-white\/5:hover{background-color:hsla(0,0%,100%,.05)}.hover\:text-ashoka-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.hover\:text-saffron-600:hover{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.hover\:text-saffron-700:hover{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.hover\:text-saffron-800:hover{--tw-text-opacity:1;color:rgb(154 52 18/var(--tw-text-opacity,1))}.hover\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.hover\:text-slate-950:hover{--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-\[0_0_20px_rgba\(0\2c 0\2c 128\2c 0\.3\)\]:hover{--tw-shadow:0 0 20px rgba(0,0,128,.3);--tw-shadow-colored:0 0 20px var(--tw-shadow-color)}.hover\:shadow-\[0_0_20px_rgba\(0\2c 0\2c 128\2c 0\.3\)\]:hover,.hover\:shadow-lg:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.hover\:shadow-md:hover,.hover\:shadow-soft:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-soft:hover{--tw-shadow:0 1px 2px rgba(15,23,42,.06),0 12px 32px rgba(15,23,42,.06);--tw-shadow-colored:0 1px 2px var(--tw-shadow-color),0 12px 32px var(--tw-shadow-color)}.focus\:static:focus{position:static}.focus\:fixed:focus{position:fixed}.focus\:left-4:focus{left:1rem}.focus\:top-4:focus{top:1rem}.focus\:z-\[100\]:focus{z-index:100}.focus\:m-0:focus{margin:0}.focus\:h-auto:focus{height:auto}.focus\:w-auto:focus{width:auto}.focus\:overflow-visible:focus{overflow:visible}.focus\:whitespace-normal:focus{white-space:normal}.focus\:rounded-lg:focus{border-radius:.5rem}.focus\:bg-slate-950:focus{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity,1))}.focus\:p-0:focus{padding:0}.focus\:px-4:focus{padding-left:1rem;padding-right:1rem}.focus\:py-2:focus{padding-top:.5rem;padding-bottom:.5rem}.focus\:text-sm:focus{font-size:.875rem;line-height:1.25rem}.focus\:font-bold:focus{font-weight:700}.focus\:text-white:focus{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.focus\:shadow-lg:focus{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-orange-500:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(249 115 22/var(--tw-ring-opacity,1))}.focus-visible\:ring-saffron-500:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(255 153 51/var(--tw-ring-opacity,1))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:focus-within .group-focus-within\:block{display:block}.group:hover .group-hover\:block{display:block}.group:hover .group-hover\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity,1))}.group:hover .group-hover\:text-saffron-700{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-slate-950{--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:mt-4{margin-top:1rem}.sm\:flex{display:flex}.sm\:h-11{height:2.75rem}.sm\:h-2{height:.5rem}.sm\:h-20{height:5rem}.sm\:min-h-\[450px\]{min-height:450px}.sm\:w-11{width:2.75rem}.sm\:max-w-\[25ch\]{max-width:25ch}.sm\:gap-6{gap:1.5rem}.sm\:rounded-2xl{border-radius:1rem}.sm\:border{border-width:1px}.sm\:border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.sm\:p-5{padding:1.25rem}.sm\:p-6{padding:1.5rem}.sm\:p-8{padding:2rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-12{padding-top:3rem;padding-bottom:3rem}.sm\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.sm\:pb-32{padding-bottom:8rem}.sm\:pt-28{padding-top:7rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:px-8{padding-left:2rem;padding-right:2rem}}@media (min-width:1024px){.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:h-16{height:4rem}.lg\:h-9{height:2.25rem}.lg\:h-\[calc\(100vh-1rem\)\]{height:calc(100vh - 1rem)}.lg\:h-full{height:100%}.lg\:min-h-0{min-height:0}.lg\:w-9{width:2.25rem}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-\[1fr_1\.4fr\]{grid-template-columns:1fr 1.4fr}.lg\:grid-cols-\[1fr_480px\]{grid-template-columns:1fr 480px}.lg\:flex-row{flex-direction:row}.lg\:items-center{align-items:center}.lg\:justify-between{justify-content:space-between}.lg\:gap-8{gap:2rem}.lg\:overflow-hidden{overflow:hidden}.lg\:overflow-y-auto{overflow-y:auto}.lg\:p-6{padding:1.5rem}.lg\:p-8{padding:2rem}.lg\:px-4{padding-left:1rem;padding-right:1rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-16{padding-top:4rem;padding-bottom:4rem}.lg\:pt-20{padding-top:5rem}.lg\:text-3xl{font-size:1.875rem;line-height:2.25rem}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-6xl{font-size:3.75rem;line-height:1}.lg\:text-base{font-size:1rem;line-height:1.5rem}.lg\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:1280px){.xl\:grid-cols-\[0\.9fr_1\.1fr\]{grid-template-columns:.9fr 1.1fr}.xl\:grid-cols-\[1fr_560px\]{grid-template-columns:1fr 560px}.xl\:text-4xl{font-size:2.25rem;line-height:2.5rem}}

frontend/assets/css/tailwind.css

@@ -0,0 +1,138 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --saffron: #FF9933;
+    --india-green: #138808;
+    --ashoka-blue: #000080;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply min-h-screen overflow-x-hidden text-slate-950 antialiased;
+  }
+
+  button,
+  input {
+    font: inherit;
+  }
+
+  ::selection {
+    @apply bg-saffron-200 text-slate-950;
+  }
+}
+
+@layer components {
+  .skip-link {
+    @apply sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-lg focus:bg-slate-950 focus:px-4 focus:py-2 focus:text-sm focus:font-bold focus:text-white focus:shadow-soft;
+  }
+
+  .menu-button {
+    @apply inline-flex h-11 w-11 flex-col items-center justify-center gap-1.5 rounded-lg border border-slate-200 bg-white text-slate-900 shadow-card outline-none transition hover:bg-slate-50 focus-visible:ring-2 focus-visible:ring-saffron-500 focus-visible:ring-offset-2;
+  }
+
+  .menu-line {
+    @apply h-0.5 w-5 rounded-full bg-current transition;
+  }
+
+  .menu-button.is-open .menu-line:nth-child(1) {
+    transform: translateY(8px) rotate(45deg);
+  }
+
+  .menu-button.is-open .menu-line:nth-child(2) {
+    opacity: 0;
+  }
+
+  .menu-button.is-open .menu-line:nth-child(3) {
+    transform: translateY(-8px) rotate(-45deg);
+  }
+
+  .mobile-menu {
+    @apply fixed inset-0 z-50 hidden overflow-y-auto bg-white/95 backdrop-blur-xl;
+  }
+
+  .mobile-menu.is-open {
+    @apply flex;
+  }
+
+  .heatmap-control-button {
+    @apply inline-flex min-h-10 min-w-10 items-center justify-center rounded-lg border border-slate-200 bg-white/95 text-xs font-black text-slate-800 shadow-card outline-none transition hover:-translate-y-0.5 hover:border-saffron-300 hover:bg-saffron-50 hover:text-saffron-700 focus-visible:ring-2 focus-visible:ring-saffron-500 focus-visible:ring-offset-2;
+  }
+
+  .heatmap-svg {
+    @apply h-full max-h-full w-full max-w-full transition-transform duration-100 ease-out;
+    transform-origin: center center;
+    filter: drop-shadow(0 16px 22px rgba(15, 23, 42, 0.22));
+    will-change: transform;
+  }
+
+  .heatmap-path {
+    @apply cursor-pointer fill-slate-400 stroke-white outline-none transition duration-200 ease-out focus-visible:stroke-saffron-500;
+    stroke-width: 0.8;
+    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.18));
+  }
+
+  .heatmap-path:hover {
+    @apply stroke-saffron-500 brightness-110;
+    stroke-width: 2;
+  }
+
+  .heatmap-path.selected {
+    @apply stroke-saffron-500 brightness-110;
+    stroke-width: 3;
+    filter: drop-shadow(0 0 12px rgba(232, 119, 34, 0.42));
+  }
+
+
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes pulseSoft {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.75; }
+  }
+
+  .animate-fade-in-up {
+    animation: fadeInUp 0.6s ease-out forwards;
+  }
+
+  .animate-fade-in {
+    animation: fadeIn 0.5s ease-out forwards;
+  }
+
+  .animate-pulse-soft {
+    animation: pulseSoft 2s ease-in-out infinite;
+  }
+}
+
+#event-detail-card {
+  border: 1.5px solid transparent !important;
+  background: linear-gradient(#fffdf4, #fffdf4) padding-box, 
+              linear-gradient(135deg, rgba(255, 153, 51, 0.4), rgba(0, 0, 128, 0.15), rgba(19, 136, 8, 0.4)) border-box !important;
+}
+

frontend/assets/js/api.js

@@ -0,0 +1,228 @@
+import { sanitizeApiPath, sanitizeStateParam } from './utils/security.js';
+
+const REMOTE_API_BASE = 'https://ndg07-heatmap.hf.space';
+const LOCAL_DEV_HOSTS = new Set(['localhost', '127.0.0.1', '[::1]']);
+const isViteDev = LOCAL_DEV_HOSTS.has(window.location.hostname) && ['5173', '4173'].includes(window.location.port);
+const API_BASE = window.location.hostname.endsWith('.netlify.app') || isViteDev
+  ? REMOTE_API_BASE
+  : '';
+
+const REQUEST_TIMEOUT_MS = 45000;
+const RETRY_DELAY_MS = 250;
+const STORAGE_PREFIX = 'misinfo:api:';
+const STORAGE_TTL_MS = 10 * 60 * 1000;
+const MAX_STORAGE_BYTES = 512_000;
+
+const cache = new Map();
+const inflight = new Map();
+const NON_PERSISTED_PATHS = new Set(['/api/v1/stats']);
+
+function cacheKey(path) {
+  return `${API_BASE}${path}`;
+}
+
+function canPersist(path) {
+  return !NON_PERSISTED_PATHS.has(path);
+}
+
+function readStorage(key, { ignoreTtl = false } = {}) {
+  try {
+    const raw = sessionStorage.getItem(STORAGE_PREFIX + key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed) return null;
+    if (!ignoreTtl && Date.now() - parsed.time > STORAGE_TTL_MS) return null;
+    return parsed.data;
+  } catch {
+    return null;
+  }
+}
+
+function writeStorage(key, data) {
+  try {
+    const payload = JSON.stringify({ time: Date.now(), data });
+    if (payload.length > MAX_STORAGE_BYTES) return;
+    sessionStorage.setItem(STORAGE_PREFIX + key, payload);
+  } catch {
+    // Storage full or unavailable
+  }
+}
+
+function shouldRetryResponse(status) {
+  return status === 429 || status === 502 || status === 503 || status === 504;
+}
+
+function delay(ms) {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+async function fetchWithRetry(url, signal, attempt = 0) {
+  try {
+    const response = await fetch(url, { signal, headers: { Accept: 'application/json' } });
+    if (!response.ok) {
+      if (attempt === 0 && shouldRetryResponse(response.status)) {
+        await delay(RETRY_DELAY_MS);
+        return fetchWithRetry(url, signal, 1);
+      }
+      throw new Error(`Request failed with status ${response.status}`);
+    }
+    return await response.json();
+  } catch (error) {
+    if (signal.aborted) throw error;
+    if (attempt === 0 && error instanceof TypeError) {
+      await delay(RETRY_DELAY_MS);
+      return fetchWithRetry(url, signal, 1);
+    }
+    throw error;
+  }
+}
+
+/** Return last-known API payload synchronously (memory or sessionStorage). */
+export function peekCached(path) {
+  const safePath = sanitizeApiPath(path);
+  if (!safePath) return null;
+  const key = cacheKey(safePath);
+  const cached = cache.get(key);
+  if (cached) return cached.data;
+  if (!canPersist(safePath)) return null;
+  return readStorage(key);
+}
+
+function resolveFallback(key, skipStorage, cachedEntry, primary, secondary) {
+  if (cachedEntry?.data != null) return cachedEntry.data;
+  if (primary != null) return primary;
+  if (!skipStorage && secondary != null) return secondary;
+  return null;
+}
+
+function runBackgroundFetch(path, key, { skipStorage, timeoutMs, cachedEntry, stored, storedStale }) {
+  const existing = inflight.get(key);
+  if (existing) return existing;
+
+  const controller = new AbortController();
+  const timeout = window.setTimeout(() => controller.abort(), timeoutMs);
+  const fallback = resolveFallback(key, skipStorage, cachedEntry, stored, storedStale);
+
+  const request = fetchWithRetry(API_BASE + path, controller.signal)
+    .then((data) => {
+      cache.set(key, { time: Date.now(), data });
+      if (!skipStorage) writeStorage(key, data);
+      return data;
+    })
+    .catch((error) => {
+      if (fallback !== null) return fallback;
+      if (error?.name === 'AbortError') {
+        throw new Error('Request timed out. Showing last known data.');
+      }
+      throw error;
+    })
+    .finally(() => {
+      window.clearTimeout(timeout);
+      inflight.delete(key);
+    });
+
+  inflight.set(key, request);
+  return request;
+}
+
+export async function fetchJson(path, options = {}) {
+  const safePath = sanitizeApiPath(path);
+  if (!safePath) {
+    throw new Error('Invalid API path');
+  }
+
+  const { cacheMs = 0, skipStorage = false, timeoutMs = REQUEST_TIMEOUT_MS, force = false } = options;
+  const key = cacheKey(safePath);
+  const cached = cache.get(key);
+  const now = Date.now();
+  const useStorage = !skipStorage && canPersist(safePath);
+
+  if (!force && cached && cacheMs > 0 && now - cached.time < cacheMs) {
+    return cached.data;
+  }
+
+  const stored = useStorage ? readStorage(key) : null;
+  const storedStale = useStorage ? readStorage(key, { ignoreTtl: true }) : null;
+  const stale = resolveFallback(key, !useStorage, cached, stored, storedStale);
+
+  if (!force && stale !== null && cacheMs > 0) {
+    runBackgroundFetch(safePath, key, { skipStorage: !useStorage, timeoutMs, cachedEntry: cached, stored, storedStale }).catch(() => {});
+    return stale;
+  }
+
+  const pending = inflight.get(key);
+  if (pending) return pending;
+
+  return runBackgroundFetch(safePath, key, { skipStorage: !useStorage, timeoutMs, cachedEntry: cached, stored, storedStale });
+}
+
+export function clearApiCache() {
+  cache.clear();
+  try {
+    Object.keys(sessionStorage).forEach((k) => {
+      if (k.startsWith(STORAGE_PREFIX)) sessionStorage.removeItem(k);
+    });
+  } catch {
+    // ignore
+  }
+}
+
+export function clearStateEventsCache(state) {
+  const safeState = sanitizeStateParam(state);
+  if (!safeState) return;
+  const encoded = encodeURIComponent(safeState);
+  for (const key of cache.keys()) {
+    if (key.includes(`/api/v1/events/state/${encoded}`)) {
+      cache.delete(key);
+    }
+  }
+  try {
+    Object.keys(sessionStorage).forEach((k) => {
+      if (k.startsWith(STORAGE_PREFIX) && k.includes(`/api/v1/events/state/${encoded}`)) {
+        sessionStorage.removeItem(k);
+      }
+    });
+  } catch {
+    // ignore
+  }
+}
+
+function extractArray(payload, ...keys) {
+  if (Array.isArray(payload)) return payload;
+  if (payload && typeof payload === 'object') {
+    for (const key of keys) {
+      if (Array.isArray(payload[key])) return payload[key];
+    }
+  }
+  return [];
+}
+
+export function getStats(options = {}) {
+  return fetchJson('/api/v1/stats', { ...options, cacheMs: 0, skipStorage: true });
+}
+
+export function getHealth(options = {}) {
+  return fetchJson('/health', { cacheMs: 10000, ...options });
+}
+
+export async function getHeatmapData(options = {}) {
+  const payload = await fetchJson('/api/v1/heatmap/data', { cacheMs: 30000, ...options });
+  return extractArray(payload, 'heatmap', 'heatmap_data', 'data');
+}
+
+export async function getLiveEvents(limit = 20, options = {}) {
+  const safeLimit = Math.max(1, Math.min(500, Math.floor(Number(limit) || 20)));
+  const path = `/api/v1/events/live?limit=${safeLimit}`;
+  const payload = await fetchJson(path, { cacheMs: 8000, ...options });
+  return extractArray(payload, 'events', 'data');
+}
+
+export async function getStateEvents(state, options = {}) {
+  const safeState = sanitizeStateParam(state);
+  if (!safeState) return [];
+  const encoded = encodeURIComponent(safeState);
+  const { limit = 100, ...fetchOptions } = options;
+  const safeLimit = Math.max(1, Math.min(100, Math.floor(Number(limit) || 100)));
+  const payload = await fetchJson(`/api/v1/events/state/${encoded}?limit=${safeLimit}`, { cacheMs: 8000, ...fetchOptions });
+  return extractArray(payload, 'events', 'data');
+}

frontend/assets/js/components/bottomNavbar.js

@@ -0,0 +1,75 @@
+import { createElement } from '../utils/dom.js';
+
+function createSvgIcon(pathD) {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('class', 'h-5 w-5');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('stroke', 'currentColor');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('aria-hidden', 'true');
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  path.setAttribute('stroke-linecap', 'round');
+  path.setAttribute('stroke-linejoin', 'round');
+  path.setAttribute('stroke-width', '1.8');
+  path.setAttribute('d', pathD);
+  svg.appendChild(path);
+  return svg;
+}
+
+const ICON_PATHS = {
+  home: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
+  dashboard: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
+  heatmap: 'M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7',
+  health: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'
+};
+
+function createTooltip(label) {
+  const span = document.createElement('span');
+  span.className = 'absolute -top-10 scale-0 rounded bg-slate-900 px-2 py-1 text-[10px] font-bold text-white transition-all group-hover:scale-100 whitespace-nowrap';
+  span.textContent = label;
+  return span;
+}
+
+export function mountBottomNavbar(options = {}) {
+  const { activeRoute } = options;
+
+  const container = createElement('div', {
+    className: 'fixed bottom-6 left-1/2 z-[60] -translate-x-1/2 transform-gpu lg:hidden flex items-center gap-2 rounded-full border border-white/10 bg-slate-950/90 p-2 shadow-[0_20px_50px_rgba(0,0,0,0.5)] backdrop-blur-2xl transition-all duration-500 hover:scale-[1.02]',
+    attrs: { id: 'bottom-premium-nav' }
+  });
+
+  const routes = [
+    { key: 'home', href: '/', label: 'Home' },
+    { key: 'dashboard', href: '/dashboard.html', label: 'Dashboard' },
+    { key: 'heatmap', href: '/heatmap.html', label: 'Heatmap' }
+  ];
+
+  if (activeRoute === 'dashboard') {
+    routes.push({ key: 'health', id: 'bottom-nav-health-trigger', label: 'System Health' });
+  }
+
+  routes.forEach(route => {
+    const isActive = route.key === activeRoute;
+    const btnBaseClass = 'group relative flex h-12 items-center justify-center rounded-full transition-all duration-500 active:scale-95';
+    const activeClass = isActive ? 'w-20 bg-white/10 text-white border border-white/20 shadow-[0_0_15px_rgba(255,255,255,0.15)]' : 'w-14 text-slate-400 hover:bg-white/5 hover:text-white';
+
+    let element;
+    if (route.href) {
+      element = createElement('a', {
+        className: `${btnBaseClass} ${activeClass}`,
+        attrs: { href: route.href, 'aria-label': route.label }
+      });
+    } else {
+      element = createElement('button', {
+        className: `${btnBaseClass} ${activeClass}`,
+        attrs: { type: 'button', 'aria-label': route.label, id: route.id }
+      });
+    }
+
+    element.appendChild(createSvgIcon(ICON_PATHS[route.key]));
+    element.appendChild(createTooltip(route.label));
+    container.appendChild(element);
+  });
+
+  document.body.appendChild(container);
+}

frontend/assets/js/components/hamburger.js

@@ -0,0 +1,132 @@
+import { createElement, qs, qsa } from '../utils/dom.js';
+import { createStatPanel } from './ui.js';
+
+export const ROUTES = [
+  { key: 'home', label: 'Home', href: '/' },
+  { key: 'dashboard', label: 'Dashboard', href: '/dashboard.html' },
+  { key: 'heatmap', label: 'Heatmap', href: '/heatmap.html' }
+];
+
+function createMobileLink(route, activeRoute) {
+  const active = route.key === activeRoute;
+  return createElement('a', {
+    className: `rounded-lg border px-4 py-4 text-base font-bold shadow-premium outline-none transition-all duration-200 hover:border-saffron-300 hover:bg-saffron-50 hover:text-saffron-600 focus-visible:ring-2 focus-visible:ring-saffron-500 focus-visible:ring-offset-2 ${active ? 'border-saffron-300 bg-saffron-50 text-saffron-600' : 'border-slate-200 bg-white text-slate-800'}`,
+    text: route.label,
+    attrs: {
+      href: route.href,
+      ...(active ? { 'aria-current': 'page' } : {})
+    }
+  });
+}
+
+export function createMobileMenu(options = {}) {
+  const { activeRoute, showStats } = options;
+  const closeButton = createElement('button', {
+    className: 'rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-bold text-slate-700 shadow-premium outline-none transition-all duration-200 hover:bg-slate-50 focus-visible:ring-2 focus-visible:ring-saffron-500 focus-visible:ring-offset-2',
+    text: 'Close',
+    attrs: { type: 'button', id: 'mobile-menu-close', 'aria-label': 'Close navigation menu' }
+  });
+
+  const menu = createElement('div', {
+    className: 'fixed inset-0 z-50 hidden overflow-y-auto bg-white/95 backdrop-blur-xl',
+    attrs: { id: 'mobile-menu', 'aria-hidden': 'true' }
+  }, [
+    createElement('div', {
+      className: 'mx-auto flex min-h-full w-full max-w-md flex-col justify-between px-5 py-6'
+    }, [
+      createElement('div', {}, [
+        createElement('div', { className: 'mb-7 flex items-center justify-between gap-4' }, [
+          createElement('a', {
+            className: 'inline-flex min-w-0 items-center gap-3 rounded-lg text-slate-950 no-underline outline-none transition hover:opacity-90 focus-visible:ring-2 focus-visible:ring-saffron-500 focus-visible:ring-offset-2',
+            attrs: { href: '/', 'aria-label': 'Misinformation Heatmap home' }
+          }, [
+            createElement('img', {
+              className: 'h-10 w-10 shrink-0 rounded-lg border border-slate-200 object-cover shadow-card',
+              attrs: { src: '/assets/ind.png', alt: 'India logo' }
+            }),
+            createElement('span', { className: 'min-w-0 text-sm font-black leading-tight tracking-tight text-slate-950 whitespace-nowrap' }, [
+              createElement('span', { className: 'text-slate-950', text: 'Misinformation' }),
+              createElement('span', { className: 'text-india-green-600 ml-1', text: 'Heatmap' })
+            ])
+          ]),
+          closeButton
+        ]),
+        createElement('div', { className: 'grid gap-3' }, ROUTES.map((route) => createMobileLink(route, activeRoute)))
+      ]),
+      createElement('div', { className: 'mt-8 grid gap-4' }, [
+        showStats ? createElement('div', { attrs: { id: 'mobile-stats-panel' } }, [
+          createStatPanel([
+            { label: 'Events', value: '--', className: 'text-blue-700' },
+            { label: 'Active', value: '--', className: 'text-saffron-700' },
+            { label: 'Accuracy', value: '--', className: 'text-emerald-700' },
+            { label: 'Selected', value: '--', className: 'text-slate-950' }
+          ], { title: 'Map metrics' })
+        ]) : null,
+        createElement('div', {
+          className: 'rounded-lg border border-slate-200 bg-white p-4 shadow-card'
+        }, [
+          createElement('p', { className: 'text-xs font-black text-slate-500', text: 'Alpha Version 1.1' }),
+          createElement('p', { className: 'mt-2 text-sm font-semibold text-slate-900', attrs: { id: 'mobile-nav-status' }, text: 'Checking live pipeline' })
+        ])
+      ])
+    ])
+  ]);
+
+  return menu;
+}
+
+export function bindHamburger(toggle, menu) {
+  if (!toggle || !menu) return;
+  const close = qs('#mobile-menu-close', menu);
+
+  function setOpen(isOpen) {
+    const lines = toggle.querySelectorAll('span');
+    if (isOpen) {
+      lines[0].style.transform = 'translateY(8px) rotate(45deg)';
+      lines[1].style.opacity = '0';
+      lines[2].style.transform = 'translateY(-8px) rotate(-45deg)';
+    } else {
+      lines[0].style.transform = '';
+      lines[1].style.opacity = '';
+      lines[2].style.transform = '';
+    }
+    toggle.classList.toggle('is-open', isOpen);
+    toggle.setAttribute('aria-expanded', String(isOpen));
+    toggle.setAttribute('aria-label', isOpen ? 'Close navigation menu' : 'Open navigation menu');
+    menu.classList.toggle('is-open', isOpen);
+    menu.classList.toggle('flex', isOpen);
+    menu.classList.toggle('hidden', !isOpen);
+    menu.setAttribute('aria-hidden', String(!isOpen));
+    document.body.classList.toggle('overflow-hidden', isOpen);
+    
+    // Hide bottom navbar when mobile menu is open
+    const bottomNav = qs('#bottom-premium-nav');
+    if (bottomNav) {
+      if (isOpen) bottomNav.classList.add('hidden');
+      else bottomNav.classList.remove('hidden');
+    }
+
+    if (isOpen) {
+      const firstFocusable = qs('a, button', menu);
+      if (firstFocusable) firstFocusable.focus({ preventScroll: true });
+    }
+  }
+
+  toggle.addEventListener('click', () => setOpen(!menu.classList.contains('is-open')));
+  if (close) close.addEventListener('click', () => setOpen(false));
+
+  qsa('a', menu).forEach((link) => {
+    link.addEventListener('click', () => setOpen(false));
+  });
+
+  menu.addEventListener('click', (event) => {
+    if (event.target === menu) setOpen(false);
+  });
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && menu.classList.contains('is-open')) {
+      setOpen(false);
+      toggle.focus({ preventScroll: true });
+    }
+  });
+}

frontend/assets/js/components/navbar.js

@@ -0,0 +1,150 @@
+import { createElement, qs, replaceChildren, setText } from '../utils/dom.js';
+import { createMobileMenu, bindHamburger, ROUTES } from './hamburger.js';
+import { createStatPanel, STATUS_CLASSES } from './ui.js';
+import { mountBottomNavbar } from './bottomNavbar.js';
+
+function createDesktopLink(route, activeRoute) {
+  const active = route.key === activeRoute;
+  return createElement('a', {
+    className: `rounded-lg px-3 py-2 text-sm font-bold outline-none transition-all duration-200 hover:bg-slate-100 hover:text-ashoka-blue-600 focus-visible:ring-2 focus-visible:ring-saffron-500 focus-visible:ring-offset-2 ${active ? 'border border-saffron-200 bg-saffron-50 text-saffron-600 shadow-sm' : 'text-slate-600'}`,
+    text: route.label,
+    attrs: {
+      href: route.href,
+      ...(active ? { 'aria-current': 'page' } : {})
+    }
+  });
+}
+
+function createStatusPill(id, initialText) {
+  return createElement('div', {
+    className: `inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-bold ${STATUS_CLASSES.neutral}`,
+    attrs: { role: 'status', 'aria-live': 'polite', 'data-status-pill': '' }
+  }, [
+    createElement('span', { className: 'h-2 w-2 rounded-full bg-current opacity-80', attrs: { 'aria-hidden': 'true' } }),
+    createElement('span', { attrs: { id }, text: initialText })
+  ]);
+}
+
+function createStatsPopover() {
+  const popover = createElement('div', {
+    className: 'absolute right-0 top-full z-50 mt-3 hidden w-[480px] origin-top-right rounded-2xl border border-saffron-100 bg-white p-1.5 shadow-premium group-hover:block group-focus-within:block animate-fade-in',
+    attrs: { id: 'navbar-stats-popover', role: 'dialog', 'aria-label': 'Heatmap metrics' }
+  }, [
+    createElement('div', { className: 'flex divide-x divide-slate-100' }, [
+      { label: 'Total Events', id: 'nav-stat-events', color: 'text-orange-500' },
+      { label: 'Active States', id: 'nav-stat-active', color: 'text-india-green-600' },
+      { label: 'Last Update', id: 'nav-stat-update', color: 'text-orange-500' },
+      { label: 'Accuracy', id: 'nav-stat-accuracy', color: 'text-india-green-600' }
+    ].map(stat => createElement('div', { className: 'flex-1 px-4 py-3 text-center' }, [
+      createElement('p', { className: `text-lg font-bold leading-tight ${stat.color}`, text: '--', attrs: { id: stat.id } }),
+      createElement('p', { className: 'mt-0.5 text-[10px] font-bold text-slate-400', text: stat.label })
+    ])))
+  ]);
+
+  return createElement('div', { className: 'group relative hidden lg:block' }, [
+    createElement('button', {
+      className: 'inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-800 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-saffron-300 hover:bg-saffron-50 hover:text-saffron-600 focus-visible:ring-2 focus-visible:ring-saffron-500',
+      attrs: {
+        type: 'button',
+        'aria-label': 'Show heatmap metrics'
+      }
+    }, [
+      createElement('svg', {
+        className: 'h-5 w-5',
+        attrs: { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' }
+      }, [
+        createElement('path', {
+          attrs: { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2.5', d: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' }
+        })
+      ])
+    ]),
+    popover
+  ]);
+}
+
+export function mountNavbar(options = {}) {
+  const mount = qs('[data-navbar]');
+  if (!mount) return;
+  const page = options.page || document.body.dataset.page || 'home';
+  const showStats = true;
+  const statusId = options.statusId || `${page}-nav-status`;
+
+  const header = createElement('header', {
+    className: 'fixed top-0 z-40 w-full border-b border-slate-200/80 bg-white/90 backdrop-blur-xl'
+  }, [
+    createElement('nav', {
+      className: 'mx-auto flex h-16 w-full max-w-7xl items-center justify-between gap-4 px-4 sm:h-20 lg:h-16 sm:px-6 lg:px-8',
+      attrs: { 'aria-label': 'Primary navigation' }
+    }, [
+      createElement('a', {
+        className: 'inline-flex min-w-0 items-center gap-3 rounded-lg text-slate-950 no-underline outline-none transition hover:opacity-90 focus-visible:ring-2 focus-visible:ring-saffron-500 focus-visible:ring-offset-2',
+        attrs: { href: '/', 'aria-label': 'Misinformation Heatmap home' }
+      }, [
+        createElement('img', {
+          className: 'h-9 w-9 shrink-0 rounded-lg border border-slate-200 object-cover shadow-card sm:h-11 sm:w-11 lg:h-9 lg:w-9',
+          attrs: { src: '/assets/ind.png', alt: 'India logo' }
+        }),
+        createElement('span', { className: 'min-w-0 text-sm font-extrabold leading-tight tracking-tight text-slate-950 sm:text-lg lg:text-base whitespace-nowrap' }, [
+          createElement('span', { className: 'text-slate-950', text: 'Misinformation' }),
+          createElement('span', { className: 'text-india-green-600 ml-1', text: 'Heatmap' })
+        ])
+      ]),
+      createElement('div', { className: 'hidden items-center gap-1 lg:flex', attrs: { 'data-desktop-nav': '' } }, ROUTES.map((route) => createDesktopLink(route, page))),
+      createElement('div', { className: 'flex items-center gap-3' }, [
+        createElement('div', { className: 'hidden sm:flex' }, [
+          createStatusPill(statusId, options.initialStatus || 'Checking')
+        ]),
+        page === 'heatmap' ? createStatsPopover() : null,
+        createElement('button', {
+          className: 'inline-flex h-11 w-11 flex-col items-center justify-center gap-1.5 rounded-lg border border-slate-200 bg-white text-slate-950 shadow-md outline-none outline-offset-2 transition-all duration-150 hover:bg-slate-50 focus-visible:ring-2 focus-visible:ring-orange-500 focus-visible:ring-offset-2 lg:hidden',
+          attrs: {
+            type: 'button',
+            id: 'menu-toggle',
+            'aria-controls': 'mobile-menu',
+            'aria-expanded': 'false',
+            'aria-label': 'Open navigation menu'
+          }
+        }, [
+          createElement('span', { className: 'h-0.5 w-5 rounded-full bg-current transition-all duration-150' }),
+          createElement('span', { className: 'h-0.5 w-5 rounded-full bg-current transition-all duration-150' }),
+          createElement('span', { className: 'h-0.5 w-5 rounded-full bg-current transition-all duration-150' })
+        ])
+      ])
+    ])
+  ]);
+
+  const mobileMenu = createMobileMenu({ activeRoute: page, showStats });
+  replaceChildren(mount, [header, mobileMenu]);
+  bindHamburger(qs('#menu-toggle', header), mobileMenu);
+
+  mountBottomNavbar({ activeRoute: page });
+}
+
+export function updateMobileNavStatus(text) {
+  setText('#mobile-nav-status', text);
+}
+
+export function updateStatsPanels(items) {
+  // Desktop specific IDs
+  const idMap = {
+    'Total Events': '#nav-stat-events',
+    'Events': '#nav-stat-events',
+    'Active States': '#nav-stat-active',
+    'Coverage': '#nav-stat-active',
+    'States': '#nav-stat-active',
+    'Last Update': '#nav-stat-update',
+    'Accuracy': '#nav-stat-accuracy'
+  };
+
+  items.forEach(item => {
+    const selector = idMap[item.label];
+    if (selector) {
+      setText(selector, item.value);
+    }
+  });
+
+  const mobile = qs('#mobile-stats-panel');
+  if (mobile) {
+    replaceChildren(mobile, createStatPanel(items, { title: 'Map metrics' }));
+  }
+}

frontend/assets/js/components/ui.js

@@ -0,0 +1,298 @@
+import { createElement, replaceChildren, setText, setWidth } from '../utils/dom.js';
+import { classificationLabel, formatDateTime, getEventClassification, getEventSource, getEventState, getEventTitle } from '../utils/formatters.js';
+import { badgeClassForClassification, safeUrl, sanitizeClassList, toPlainText, toSafeText } from '../utils/security.js';
+
+export const STATUS_CLASSES = {
+  good: 'border-emerald-200 bg-emerald-50 text-emerald-700',
+  warn: 'border-amber-200 bg-amber-50 text-amber-700',
+  bad: 'border-red-200 bg-red-50 text-red-700',
+  neutral: 'border-slate-200 bg-slate-50 text-slate-600'
+};
+
+export function updateStatusText(id, text, state = 'neutral') {
+  const element = document.getElementById(id);
+  if (!element) return;
+  const pill = element.closest('[data-status-pill]');
+  if (pill) {
+    Object.values(STATUS_CLASSES).forEach((className) => {
+      className.split(' ').forEach((item) => {
+        if (item) pill.classList.remove(item);
+      });
+    });
+    STATUS_CLASSES[state in STATUS_CLASSES ? state : 'neutral'].split(' ').forEach((item) => {
+      if (item) pill.classList.add(item);
+    });
+  }
+  setText(element, text);
+}
+
+export function setProgress(id, value) {
+  setWidth(`#${id}`, value);
+}
+
+export function renderEmptyState(container, title, detail) {
+  replaceChildren(container, createElement('article', {
+    className: 'rounded-lg border border-dashed border-slate-300 bg-slate-50 p-4'
+  }, [
+    createElement('p', { className: 'text-sm font-bold text-slate-900', text: title }),
+    createElement('p', { className: 'mt-1 text-sm leading-6 text-slate-600', text: detail })
+  ]));
+}
+
+export function createEventItem(event, options = {}) {
+  const classification = getEventClassification(event);
+  const type = options.type || classification;
+  const tokenText = type === 'real' ? 'OK' : type === 'fake' ? 'FA' : (classificationLabel(classification) || '??').slice(0, 2).toUpperCase();
+  const tokenClass = {
+    fake: 'border-red-200 bg-red-50 text-red-700',
+    real: 'border-emerald-200 bg-emerald-50 text-emerald-700',
+    uncertain: 'border-amber-200 bg-amber-50 text-amber-700',
+    unknown: 'border-slate-200 bg-slate-100 text-slate-600'
+  }[type] || 'border-slate-200 bg-slate-100 text-slate-600';
+
+  const titleText = getEventTitle(event);
+  const href = safeUrl(event && (event.url || event.link || event.article_url));
+  const sourceRaw = event && (event.source || event.source_name || event.publisher);
+  const stateRaw = event && (event.state || event.region || event.location);
+  const sourceText = getEventSource(event);
+  const stateText = getEventState(event);
+  const timeText = formatDateTime(event && event.timestamp);
+  // Only fields intended as summaries belong in the modal. The API's `content`
+  // field is a truncated article excerpt, so showing it here overstates what we know.
+  const bodyText = toPlainText(event && (event.description || event.summary || event.content), '');
+  const hasSource = Boolean(toSafeText(sourceRaw, ''));
+  const hasState = Boolean(toSafeText(stateRaw, ''));
+  const hasTimestamp = timeText !== '--';
+
+  const badgeClass = badgeClassForClassification(classification);
+
+  const metaBadges = [
+    createElement('span', {
+      className: `inline-flex w-fit rounded-full border px-2 py-0.5 text-[10px] font-bold ${badgeClass}`,
+      text: classificationLabel(classification)
+    })
+  ];
+  if (hasSource) {
+    metaBadges.push(createElement('span', { 
+      className: 'inline-flex w-fit rounded-full border border-blue-200 bg-blue-50 px-2 py-0.5 text-[10px] font-bold text-blue-700', 
+      text: sourceText 
+    }));
+  }
+  if (hasState) {
+    metaBadges.push(createElement('span', { 
+      className: 'inline-flex w-fit rounded-full border border-purple-200 bg-purple-50 px-2 py-0.5 text-[10px] font-bold text-purple-700', 
+      text: stateText 
+    }));
+  }
+  if (hasTimestamp) {
+    metaBadges.push(createElement('span', { 
+      className: 'inline-flex w-fit rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-[10px] font-bold text-slate-700', 
+      text: timeText 
+    }));
+  }
+
+  const meta = createElement('div', {
+    className: 'mt-2 flex flex-wrap items-center gap-1.5'
+  }, metaBadges);
+
+  const article = createElement('button', {
+    className: 'group flex w-full min-w-0 gap-3 rounded-xl border border-slate-200 bg-white p-3 text-left shadow-sm transition-[transform,border-color,box-shadow] duration-200 hover:-translate-y-0.5 hover:border-saffron-200 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-saffron-500 focus-visible:ring-offset-2',
+    attrs: {
+      type: 'button',
+      'aria-label': `Open details for ${titleText}`
+    }
+  }, [
+    createElement('div', {
+      className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border text-xs font-bold ${tokenClass}`,
+      text: tokenText
+    }),
+    createElement('div', { className: 'min-w-0 flex-1' }, [
+      createElement('h3', {
+        className: 'line-clamp-2 break-words text-sm font-bold leading-6 text-slate-950 group-hover:text-saffron-700 transition-colors',
+        text: titleText
+      }),
+      meta
+    ])
+  ]);
+
+  article.addEventListener('click', () => {
+    document.dispatchEvent(new CustomEvent('openEventModal', {
+      detail: {
+        titleText,
+        href,
+        classification,
+        sourceText,
+        stateText,
+        timeText,
+        hasSource,
+        hasState,
+        hasTimestamp,
+        bodyText
+      }
+    }));
+  });
+
+  return article;
+}
+
+export function renderEventList(container, events, options = {}) {
+  const safeEvents = Array.isArray(events) ? events.filter(Boolean).slice(0, options.limit || 12) : [];
+  if (!safeEvents.length) {
+    renderEmptyState(
+      container,
+      options.emptyTitle || 'No data yet',
+      options.emptyDetail || 'The layout is ready for incoming live events.'
+    );
+    return safeEvents;
+  }
+
+  replaceChildren(container, safeEvents.map((event) => createEventItem(event, options)));
+  return safeEvents;
+}
+
+export function createHealthRow(indicator, options = {}) {
+  const state = indicator.state || 'neutral';
+  const isDark = options.theme === 'dark';
+  
+  const badgeClasses = {
+    good: isDark ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' : 'bg-emerald-50 border-emerald-200 text-emerald-700',
+    warn: isDark ? 'bg-amber-500/10 border-amber-500/20 text-amber-400' : 'bg-amber-50 border-amber-200 text-amber-700',
+    bad: isDark ? 'bg-red-500/10 border-red-500/20 text-red-400' : 'bg-red-50 border-red-200 text-red-700',
+    neutral: isDark ? 'bg-white/5 border-white/10 text-slate-400' : 'bg-slate-50 border-slate-200 text-slate-600'
+  };
+
+  const badgeClass = badgeClasses[state] || badgeClasses.neutral;
+  const containerClass = isDark 
+    ? 'rounded-2xl border border-white/5 bg-white/5 p-4 transition-all hover:bg-white/10 hover:border-white/10'
+    : 'rounded-lg border border-slate-200 bg-slate-50 p-3';
+
+  return createElement('div', {
+    className: containerClass
+  }, [
+    createElement('div', { className: 'flex items-start justify-between gap-4' }, [
+      createElement('div', { className: 'min-w-0 flex-1' }, [
+        createElement('p', { className: `text-sm font-bold ${isDark ? 'text-white' : 'text-slate-950'}`, text: indicator.label }),
+        createElement('p', { className: `mt-1 text-xs leading-relaxed ${isDark ? 'text-slate-400' : 'text-slate-600'}`, text: indicator.detail || 'No additional detail.' })
+      ]),
+      createElement('span', {
+        className: `shrink-0 rounded-full border px-3 py-1 text-[10px] font-bold ${badgeClass}`,
+        text: indicator.value || 'Connecting...'
+      })
+    ])
+  ]);
+}
+
+export function createStatPanel(items, options = {}) {
+  const title = toSafeText(options.title, 'Live metrics');
+  const panel = createElement('div', {
+    className: 'rounded-xl border border-slate-200 bg-white p-5 shadow-premium backdrop-blur-md'
+  }, [
+    createElement('p', { className: 'text-xs font-bold text-slate-500', text: title }),
+    createElement('dl', {
+      className: 'mt-4 grid grid-cols-2 gap-4'
+    }, items.map((item) => createElement('div', {
+      className: 'rounded-xl border border-slate-200 bg-slate-50 p-3.5 transition-colors hover:bg-white'
+    }, [
+      createElement('dt', { className: 'text-xs font-bold text-slate-500', text: item.label }),
+      createElement('dd', {
+        className: `mt-1 text-xl font-bold ${item.className || 'text-slate-950'}`,
+        text: item.value
+      })
+    ])))
+  ]);
+  return panel;
+}
+
+export function createFeedLoadingSpinner() {
+  return createElement('div', {
+    className: 'flex items-center justify-center py-12 animate-pulse',
+    attrs: { role: 'status', 'aria-live': 'polite', 'aria-label': 'Loading feed' }
+  }, [
+    createElement('div', { className: 'h-6 w-6 rounded-full border-2 border-slate-200 border-t-slate-500 animate-spin', attrs: { 'aria-hidden': 'true' } })
+  ]);
+}
+
+function createDetailBadge(text, colorClass) {
+  const base = 'inline-flex rounded-full border px-2.5 py-1 text-[10px] font-bold';
+  return createElement('span', {
+    className: `${base} ${sanitizeClassList(colorClass)}`,
+    text
+  });
+}
+
+/**
+ * Populate event detail modal using DOM APIs only (no innerHTML).
+ * @param {object} detail
+ */
+export function populateEventDetailModal(detail = {}) {
+  const classification = detail.classification || 'unknown';
+  const badgeClass = badgeClassForClassification(classification);
+
+  const badgesContainer = document.getElementById('event-detail-badges');
+  if (badgesContainer) {
+    const badges = [createDetailBadge(classificationLabel(classification), badgeClass)];
+    if (detail.hasSource) {
+      badges.push(createDetailBadge(detail.sourceText, 'border-blue-200 bg-blue-50 text-blue-700'));
+    }
+    if (detail.hasState) {
+      badges.push(createDetailBadge(detail.stateText, 'border-purple-200 bg-purple-50 text-purple-700'));
+    }
+    if (detail.hasTimestamp) {
+      badges.push(createDetailBadge(detail.timeText, 'border-slate-200 bg-slate-50 text-slate-700'));
+    }
+    replaceChildren(badgesContainer, badges);
+  }
+
+  setText('#event-detail-title', detail.titleText || 'Untitled event');
+
+  const contentContainer = document.getElementById('event-detail-content');
+  if (contentContainer) {
+    const bodyText = toPlainText(detail.bodyText, '');
+    contentContainer.classList.toggle('hidden', !bodyText);
+    replaceChildren(contentContainer, bodyText ? [
+      createElement('p', {
+        className: 'whitespace-pre-wrap',
+        text: bodyText
+      })
+    ] : []);
+  }
+
+  const linkBtn = document.getElementById('event-detail-link');
+  if (linkBtn instanceof HTMLAnchorElement) {
+    const href = safeUrl(detail.href);
+    if (href) {
+      linkBtn.href = href;
+      linkBtn.rel = 'noopener noreferrer';
+      linkBtn.classList.remove('hidden');
+    } else {
+      linkBtn.removeAttribute('href');
+      linkBtn.classList.add('hidden');
+    }
+  }
+}
+
+export function showToast(message) {
+  const existing = document.getElementById('global-toast');
+  if (existing) existing.remove();
+
+  const toast = createElement('div', {
+    id: 'global-toast',
+    className: 'fixed top-6 right-6 z-[100] flex items-center gap-3 rounded-xl border border-slate-200/60 bg-gradient-to-r from-saffron-50/80 via-white to-india-green-50/80 px-5 py-3 shadow-[0_15px_40px_rgba(0,0,0,0.1)] backdrop-blur-xl',
+  }, [
+    createElement('div', { className: 'flex items-center gap-1.5' }, [
+      createElement('div', { className: 'h-1.5 w-1.5 rounded-full bg-saffron-500 animate-pulse' }),
+      createElement('div', { className: 'h-1.5 w-1.5 rounded-full bg-slate-200' }),
+      createElement('div', { className: 'h-1.5 w-1.5 rounded-full bg-india-green-500 animate-pulse', style: 'animation-delay: 0.5s' }),
+    ]),
+    createElement('span', { className: 'text-[11px] font-bold tracking-tight text-slate-800', text: message })
+  ]);
+  
+  toast.style.animation = 'toastInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards';
+
+  document.body.appendChild(toast);
+  
+  setTimeout(() => {
+    toast.style.animation = 'toastOutRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards';
+    setTimeout(() => toast.remove(), 500);
+  }, 4500);
+}

frontend/assets/js/main.js

@@ -0,0 +1,29 @@
+import { mountNavbar } from './components/navbar.js';
+import { initDashboard } from './pages/dashboard.js';
+import { initHeatmap } from './pages/heatmap.js';
+import { initHome } from './pages/home.js';
+
+const PAGE_INIT = {
+  home: initHome,
+  dashboard: initDashboard,
+  heatmap: initHeatmap,
+  contact: () => { console.log('[contact] initialized'); }
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  const page = document.body?.dataset?.page || 'home';
+  mountNavbar({
+    page,
+    statusId: `${page}-nav-status`,
+    initialStatus: 'Checking'
+  });
+
+  const init = PAGE_INIT[page];
+  if (!init) return;
+
+  Promise.resolve()
+    .then(() => init())
+    .catch((error) => {
+      console.error(`[${page}] initialization failed:`, error);
+    });
+});

frontend/assets/js/pages/dashboard.js

@@ -0,0 +1,359 @@
+import { clearApiCache, getHealth, getHeatmapData, getLiveEvents, getStats, peekCached } from '../api.js';
+import { createHealthRow, renderEventList, setProgress, updateStatusText } from '../components/ui.js';
+import { updateMobileNavStatus, updateStatsPanels } from '../components/navbar.js';
+import { replaceChildren, setText } from '../utils/dom.js';
+import { formatClock, formatCount, formatPercent, numberOrNull } from '../utils/formatters.js';
+import { toSafeText } from '../utils/security.js';
+
+const RING_CIRCUMFERENCE = 465;
+let refreshInFlight = false;
+
+function percentOf(value, total) {
+  const numerator = numberOrNull(value);
+  const denominator = numberOrNull(total);
+  if (numerator === null || denominator === null || denominator <= 0) return null;
+  return (numerator / denominator) * 100;
+}
+
+function updateStats(stats) {
+  const total = numberOrNull(stats.total_events);
+  const fake = numberOrNull(stats.fake_events);
+  const real = numberOrNull(stats.real_events);
+  const review = numberOrNull(stats.uncertain_events);
+  const totalStates = numberOrNull(stats.total_states);
+  const divisor = total ?? [fake, real, review].filter((v) => v !== null).reduce((s, v) => s + v, 0);
+
+  setText('#dashboard-total-events', formatCount(total));
+  setText('#dashboard-fake-events', formatCount(fake));
+  setText('#dashboard-real-events', formatCount(real));
+
+  const accuracy = numberOrNull(stats.classification_accuracy);
+  setText('#dashboard-under-review-events', formatCount(review));
+
+  setProgress('dashboard-total-bar', total === null ? 0 : 100);
+  setProgress('dashboard-fake-bar', percentOf(fake, divisor) || 0);
+  setProgress('dashboard-real-bar', percentOf(real, divisor) || 0);
+  setProgress('dashboard-under-review-bar', percentOf(review, divisor) || 0);
+  const normalizedAccuracy = accuracy === null ? 0 : Math.max(0, Math.min(100, Math.abs(accuracy) <= 1 ? accuracy * 100 : accuracy));
+
+  setText('#dashboard-accuracy-pct', formatPercent(accuracy));
+  setText('#dashboard-accuracy-badge', accuracy === null ? 'Unavailable' : 'High Confidence');
+  const ring = document.getElementById('dashboard-accuracy-ring');
+  if (ring) ring.style.strokeDashoffset = String(RING_CIRCUMFERENCE * (1 - normalizedAccuracy / 100));
+
+  setText('#dashboard-precision', formatPercent(stats.precision, '--', 1));
+  setText('#dashboard-recall', formatPercent(stats.recall, '--', 1));
+  setText('#dashboard-f1', formatPercent(stats.f1_score ?? stats.f1, '--', 1));
+
+  const processing = Boolean(stats.processing_active);
+  const mlReady = Boolean(stats.ml_ready);
+  const statusText = processing ? 'Live processing' : mlReady ? 'System ready' : 'Stats loaded';
+  const statusState = processing || mlReady ? 'good' : 'neutral';
+  updateStatusText('dashboard-nav-status', statusText, statusState);
+  updateMobileNavStatus(statusText);
+
+  // Update desktop floating pill status indicator
+  const desktopHealthDot = document.getElementById('desktop-health-dot');
+  const desktopHealthPing = document.getElementById('desktop-health-ping');
+  if (desktopHealthDot && desktopHealthPing) {
+    const isGood = statusState === 'good';
+    desktopHealthDot.className = `h-full w-full rounded-full transition-colors duration-500 ${isGood ? 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]' : 'bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.5)]'}`;
+    desktopHealthPing.className = `absolute h-full w-full animate-ping rounded-full opacity-40 transition-colors duration-500 ${isGood ? 'bg-emerald-500' : 'bg-amber-500'}`;
+  }
+
+  const lastUpdate = new Date().toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit', hour12: true });
+
+  updateStatsPanels([
+    { label: 'Events', value: formatCount(total), className: 'text-blue-700' },
+    { label: 'Risk', value: formatCount(fake), className: 'text-saffron-700' },
+    { label: 'Accuracy', value: formatPercent(accuracy), className: 'text-emerald-700' },
+    { label: 'Last Update', value: lastUpdate },
+    { label: 'Coverage', value: totalStates === null ? '--' : formatCount(totalStates), className: 'text-slate-950' }
+  ]);
+}
+
+function updateStatsUnavailable() {
+  [
+    '#dashboard-total-events',
+    '#dashboard-fake-events',
+    '#dashboard-real-events',
+    '#dashboard-under-review-events',
+    '#dashboard-accuracy-pct',
+    '#dashboard-precision',
+    '#dashboard-recall',
+    '#dashboard-f1'
+  ].forEach((selector) => setText(selector, '--'));
+  ['dashboard-total-bar', 'dashboard-fake-bar', 'dashboard-real-bar', 'dashboard-under-review-bar'].forEach((id) => setProgress(id, 0));
+  setText('#dashboard-accuracy-badge', 'Connecting...');
+}
+
+function updateCoverage(heatmapData) {
+  const records = Array.isArray(heatmapData) ? heatmapData : [];
+  const regions = records.length;
+  const active = records.filter((record) => numberOrNull(record.event_count ?? record.total_events) > 0).length;
+  const events = records.reduce((sum, record) => sum + (numberOrNull(record.event_count ?? record.total_events) || 0), 0);
+  const confidences = records
+    .map((record) => numberOrNull(record.avg_confidence ?? record.ai_confidence ?? record.confidence ?? record.classification_confidence))
+    .filter((value) => value !== null);
+  const avgConf = confidences.length
+    ? confidences.reduce((sum, value) => sum + value, 0) / confidences.length
+    : null;
+
+  setText('#dashboard-coverage-regions', formatCount(regions));
+  setText('#dashboard-coverage-active', formatCount(active));
+  setText('#dashboard-coverage-events', formatCount(events));
+  setText('#dashboard-coverage-confidence', formatPercent(avgConf));
+  setText(
+    '#dashboard-coverage-note',
+    regions ? 'Coverage is derived from the current heatmap API payload.' : 'The heatmap API returned no geographic records yet.'
+  );
+}
+
+function updateCoverageUnavailable() {
+  ['#dashboard-coverage-regions', '#dashboard-coverage-active', '#dashboard-coverage-events', '#dashboard-coverage-confidence'].forEach(id => setText(id, '--'));
+  setText('#dashboard-coverage-note', 'Connecting to real-time spatial index...');
+}
+
+function renderHealthIndicators(results) {
+  const stats = results.stats.status === 'fulfilled' ? results.stats.value : null;
+  const health = results.health.status === 'fulfilled' ? results.health.value : null;
+  const heatmap = results.heatmap.status === 'fulfilled' ? results.heatmap.value : null;
+  const events = results.events.status === 'fulfilled' ? results.events.value : null;
+
+  const indicators = [
+    {
+      id: 'gateway',
+      label: 'Gateway Diagnostics',
+      value: health ? toSafeText(health.status || health.message || 'Operational', 'Operational') : 'Connecting...',
+      state: health ? 'good' : 'neutral',
+      detail: health ? 'Primary API gateway is responding to health probes.' : 'Waiting for connection to gateway...'
+    },
+    {
+      id: 'analytics',
+      label: 'Analytics Engine',
+      value: stats ? (stats.processing_active ? 'Active' : 'Idle') : 'Connecting...',
+      state: stats ? (stats.processing_active ? 'good' : 'warn') : 'neutral',
+      detail: stats ? 'Derived from live processing throughput flags.' : 'Analytics engine metrics are syncing...'
+    },
+    {
+      id: 'neural',
+      label: 'Neural Core Status',
+      value: stats ? (stats.ml_ready ? 'Stable' : 'Initializing') : 'Connecting...',
+      state: stats ? (stats.ml_ready ? 'good' : 'warn') : 'neutral',
+      detail: stats ? 'Classification models are loaded and performing inference.' : 'Model core is warming up...'
+    },
+    {
+      id: 'geospatial',
+      label: 'Geospatial Index',
+      value: heatmap ? `${heatmap.length} nodes` : 'Connecting...',
+      state: heatmap ? (heatmap.length ? 'good' : 'warn') : 'neutral',
+      detail: heatmap ? 'Geographic data clusters are synchronized for mapping.' : 'Spatial indexing service is synchronizing...'
+    },
+    {
+      id: 'signal',
+      label: 'Signal Integrity',
+      value: events ? (events.length ? `${events.length} active` : 'Zero signals') : 'Connecting...',
+      state: events ? (events.length ? 'good' : 'warn') : 'neutral',
+      detail: events ? 'Signal feed is ingesting and classifying recent events.' : 'Integrity check: synchronizing signals...'
+    }
+  ];
+
+  replaceChildren('#dashboard-health-indicators', indicators.map((ind) => createHealthRow(ind, { theme: 'light' })));
+
+  const hasBad = indicators.some((indicator) => indicator.state === 'bad');
+  const hasWarn = indicators.some((indicator) => indicator.state === 'warn');
+  const status = hasBad ? 'Critical' : hasWarn ? 'Degraded' : (stats && health ? 'Operational' : 'Connecting');
+
+  setText('#dashboard-health-badge', status);
+}
+
+function renderActivity(events) {
+  const rendered = renderEventList('#dashboard-activity-feed', events, {
+    limit: 15,
+    emptyTitle: 'No recent events',
+    emptyDetail: 'The pipeline is reachable, but no classifications were returned.'
+  });
+  setText('#dashboard-events-count', `${rendered.length} events`);
+}
+
+function renderActivityUnavailable() {
+  renderEventList('#dashboard-activity-feed', [], {
+    emptyTitle: 'Connecting to feed',
+    emptyDetail: 'Synchronizing real-time events...'
+  });
+  setText('#dashboard-events-count', 'Connecting');
+}
+
+function hydrateDashboardFromCache() {
+  const stats = peekCached('/api/v1/stats');
+  const heatmapPayload = peekCached('/api/v1/heatmap/data');
+  const eventsPayload = peekCached('/api/v1/events/live?limit=15');
+  const health = peekCached('/health');
+
+  if (stats) updateStats(stats);
+  if (heatmapPayload) {
+    const rows = Array.isArray(heatmapPayload)
+      ? heatmapPayload
+      : (heatmapPayload.heatmap || heatmapPayload.heatmap_data || heatmapPayload.data || []);
+    if (rows.length) updateCoverage(rows);
+  }
+  if (eventsPayload) {
+    const events = Array.isArray(eventsPayload)
+      ? eventsPayload
+      : (eventsPayload.events || eventsPayload.data || []);
+    if (events.length) renderActivity(events);
+  }
+  if (stats || heatmapPayload || eventsPayload || health) {
+    renderHealthIndicators({
+      stats: { status: stats ? 'fulfilled' : 'rejected', value: stats },
+      heatmap: {
+        status: heatmapPayload ? 'fulfilled' : 'rejected',
+        value: Array.isArray(heatmapPayload)
+          ? heatmapPayload
+          : (heatmapPayload?.heatmap || heatmapPayload?.heatmap_data || heatmapPayload?.data || null)
+      },
+      events: {
+        status: eventsPayload ? 'fulfilled' : 'rejected',
+        value: Array.isArray(eventsPayload)
+          ? eventsPayload
+          : (eventsPayload?.events || eventsPayload?.data || null)
+      },
+      health: { status: health ? 'fulfilled' : 'rejected', value: health }
+    });
+    setText('#dashboard-last-updated', `Last updated: ${formatClock()}`);
+  }
+  return Boolean(stats || heatmapPayload || eventsPayload);
+}
+
+export async function refreshDashboard(force = false) {
+  if (refreshInFlight) return;
+  refreshInFlight = true;
+  const refreshButton = document.getElementById('dashboard-refresh');
+  if (refreshButton) refreshButton.disabled = true;
+  if (force) clearApiCache();
+  else hydrateDashboardFromCache();
+
+  const fetchOptions = force ? { cacheMs: 0 } : {};
+  const results = { 
+    stats: { status: 'pending', value: null }, 
+    heatmap: { status: 'pending', value: null }, 
+    events: { status: 'pending', value: null }, 
+    health: { status: 'pending', value: null } 
+  };
+
+  const updateUI = () => renderHealthIndicators(results);
+
+  await Promise.allSettled([
+    getStats(fetchOptions).then((value) => {
+      results.stats = { status: 'fulfilled', value };
+      updateStats(value);
+      updateUI();
+    }).catch((reason) => {
+      results.stats = { status: 'rejected', reason };
+      updateUI();
+    }),
+    getHeatmapData(fetchOptions).then((value) => {
+      const rows = Array.isArray(value) ? value : (value?.heatmap || value?.heatmap_data || value?.data || []);
+      results.heatmap = { status: 'fulfilled', value: rows };
+      updateCoverage(rows);
+      updateUI();
+    }).catch((reason) => {
+      results.heatmap = { status: 'rejected', reason };
+      updateUI();
+    }),
+    getLiveEvents(15, fetchOptions).then((value) => {
+      const list = Array.isArray(value) ? value : (value?.events || value?.data || []);
+      results.events = { status: 'fulfilled', value: list };
+      renderActivity(list);
+      updateUI();
+    }).catch((reason) => {
+      results.events = { status: 'rejected', reason };
+      updateUI();
+    }),
+    getHealth(fetchOptions).then((value) => {
+      results.health = { status: 'fulfilled', value };
+      updateUI();
+    }).catch((reason) => {
+      results.health = { status: 'rejected', reason };
+      updateUI();
+    })
+  ]);
+
+  renderHealthIndicators(results);
+  setText('#dashboard-last-updated', `Last updated: ${formatClock()}`);
+
+  refreshInFlight = false;
+  if (refreshButton) refreshButton.disabled = false;
+}
+
+export function initDashboard() {
+  const refreshButton = document.getElementById('dashboard-refresh');
+  const mobileRefreshButton = document.getElementById('dashboard-refresh-mobile');
+  
+  if (refreshButton) {
+    refreshButton.addEventListener('click', () => refreshDashboard(true));
+  }
+  if (mobileRefreshButton) {
+    mobileRefreshButton.addEventListener('click', () => refreshDashboard(true));
+  }
+
+  const healthOverlay = document.getElementById('dashboard-health-overlay');
+  const healthTrigger = document.getElementById('bottom-nav-health-trigger');
+  const desktopHealthTrigger = document.getElementById('desktop-health-trigger');
+  const closeOverlay = document.getElementById('close-health-overlay');
+
+  const toggleOverlay = (show) => {
+    if (show) {
+      healthOverlay.classList.remove('hidden', 'closing');
+      // Force reflow
+      healthOverlay.offsetHeight;
+      healthOverlay.classList.add('active');
+    } else {
+      healthOverlay.classList.remove('active');
+      healthOverlay.classList.add('closing');
+      setTimeout(() => {
+        if (healthOverlay.classList.contains('closing')) {
+          healthOverlay.classList.add('hidden');
+          healthOverlay.classList.remove('closing');
+        }
+      }, 300); // Match CSS animation duration (0.3s)
+    }
+  };
+
+  const triggers = [healthTrigger, desktopHealthTrigger].filter(Boolean);
+  if (triggers.length > 0 && healthOverlay) {
+    triggers.forEach(trigger => {
+      trigger.addEventListener('click', () => {
+        const isActive = healthOverlay.classList.contains('active');
+        toggleOverlay(!isActive);
+      });
+    });
+  }
+
+  if (closeOverlay && healthOverlay) {
+    closeOverlay.addEventListener('click', () => toggleOverlay(false));
+  }
+
+  if (healthOverlay) {
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && healthOverlay.classList.contains('active')) {
+        toggleOverlay(false);
+      }
+    });
+
+    healthOverlay.addEventListener('click', (event) => {
+      if (event.target === healthOverlay) toggleOverlay(false);
+    });
+  }
+
+  refreshDashboard().catch(() => {
+    // Retry once after 5s — covers cold-start when backend ML models are still loading
+    setTimeout(() => refreshDashboard().catch(() => {}), 5000);
+  });
+  
+  window.setInterval(() => {
+    if (document.visibilityState === 'visible') {
+      refreshDashboard().catch(() => {});
+    }
+  }, 30000);
+}

frontend/assets/js/pages/heatmap.js

@@ -0,0 +1,1036 @@
+import { clearApiCache, clearStateEventsCache, getHeatmapData, getLiveEvents, getStateEvents, getStats, peekCached } from '../api.js';
+import {
+  createEventItem,
+  createFeedLoadingSpinner,
+  populateEventDetailModal,
+  renderEventList,
+  setProgress,
+  showToast,
+  updateStatusText
+} from '../components/ui.js';
+import { updateMobileNavStatus, updateStatsPanels } from '../components/navbar.js';
+import { createElement, qs, qsa, replaceChildren, setText } from '../utils/dom.js';
+import {
+  formatCount,
+  formatPercent,
+  formatRatioAsPercent,
+  getEventClassification,
+  getFakeRatio,
+  getEventState,
+  getEventTitle,
+  normalizeName,
+  numberOrNull,
+  riskFromRecord
+} from '../utils/formatters.js';
+import { isInteractiveInput, toSafeText } from '../utils/security.js';
+
+const SVG_PATH = '/assets/map/in.svg';
+const MIN_ZOOM = 0.72;
+const MAX_ZOOM = 2.8;
+const BUTTON_ZOOM_STEP = 0.12;
+const MAP_BOUNDS_PADDING = 100;
+
+const STATE_ALIASES = {
+  'andaman and nicobar': 'Andaman and Nicobar Islands',
+  'andaman and nicobar islands': 'Andaman and Nicobar Islands',
+  'dadra and nagar haveli and daman and diu': 'Dadra and Nagar Haveli and Daman and Diu',
+  'daman and diu': 'Dadra and Nagar Haveli and Daman and Diu',
+  orissa: 'Odisha',
+  uttaranchal: 'Uttarakhand',
+  delhi: 'Delhi'
+};
+
+let heatmapData = [];
+let stateLookup = new Map();
+let latestStats = null;
+let svgLoadPromise = null;
+let selectedState = null;
+let selectedStateRecord = null;
+let svgMap = null;
+let currentZoom = window.innerWidth <= 1024 ? 1.0 : 1.15;
+let currentX = 0;
+let currentY = 0;
+let isDragging = false;
+let lastPointerX = 0;
+let lastPointerY = 0;
+let pinchStartDistance = 0;
+let pinchStartZoom = 1;
+let mapInteractionActive = false;
+let refreshInFlight = false;
+let feedsGeneration = 0;
+let globalEventsPool = null;
+
+const FEED_DISPLAY_LIMIT = 10;
+const LIVE_EVENTS_FETCH_LIMIT = 80;
+const STATE_EVENTS_FETCH_LIMIT = 100;
+
+function feedDelay(ms) {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+function mapStatus(text, state = 'neutral') {
+  updateStatusText('heatmap-nav-status', text, state);
+  updateMobileNavStatus(text);
+}
+
+function heatmapRecords() {
+  return Array.isArray(heatmapData) ? heatmapData.filter(Boolean) : [];
+}
+
+function rebuildStateLookup(records = heatmapRecords()) {
+  const map = new Map();
+  for (const record of records) {
+    const keys = [
+      normalizeName(record.state),
+      normalizeName(record.name),
+      normalizeName(record.region)
+    ].filter(Boolean);
+    for (const key of keys) {
+      if (!map.has(key)) map.set(key, record);
+    }
+  }
+  for (const [alias, canonical] of Object.entries(STATE_ALIASES)) {
+    const target = map.get(normalizeName(canonical));
+    if (target) map.set(normalizeName(alias), target);
+  }
+  stateLookup = map;
+}
+
+function applyHeatmapPayload(records) {
+  if (!Array.isArray(records)) return false;
+  if (!records.length) return heatmapRecords().length > 0;
+  heatmapData = records;
+  rebuildStateLookup(records);
+  return true;
+}
+
+function syncHeatmapView() {
+  if (!svgMap) return;
+  svgMap.removeAttribute('fill');
+  if (heatmapRecords().length) {
+    applyHeatmapColors();
+    updateStatsPopover();
+    mapStatus('Map live', 'good');
+  } else {
+    mapStatus('No heatmap data', 'warn');
+  }
+  hideLoading();
+}
+
+function hydrateHeatmapFromCache() {
+  const stats = peekCached('/api/v1/stats');
+  if (stats) {
+    latestStats = stats;
+    updateStatsPopover();
+  }
+  const payload = peekCached('/api/v1/heatmap/data');
+  if (!payload) return false;
+  const rows = Array.isArray(payload) ? payload : (payload.heatmap || payload.heatmap_data || payload.data || []);
+  if (!rows.length) return false;
+  applyHeatmapPayload(rows);
+  return true;
+}
+
+function getRecordCount(record) {
+  return numberOrNull(record && (record.event_count ?? record.total_events ?? record.events));
+}
+
+function totalMappedEvents() {
+  return heatmapRecords().reduce((sum, record) => sum + (getRecordCount(record) || 0), 0);
+}
+
+function activeMappedStates() {
+  return heatmapRecords().filter((record) => (getRecordCount(record) || 0) > 0).length;
+}
+
+function updateStatsPopover() {
+  const total = numberOrNull(latestStats && latestStats.total_events) ?? totalMappedEvents();
+  const active = activeMappedStates();
+  const accuracy = latestStats ? formatPercent(latestStats.classification_accuracy) : '--';
+  const rawTs = latestStats && (latestStats.last_update_time || latestStats.last_update || latestStats.timestamp);
+  const updateDate = rawTs ? new Date(rawTs) : null;
+  const timeString = updateDate && !Number.isNaN(updateDate.getTime())
+    ? updateDate.toLocaleTimeString('en-IN', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true
+    })
+    : new Date().toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit', hour12: true });
+
+  updateStatsPanels([
+    { label: 'Total Events', value: formatCount(total) },
+    { label: 'Active States', value: heatmapRecords().length ? `${active} States` : '--' },
+    { label: 'Last Update', value: timeString },
+    { label: 'Accuracy', value: accuracy }
+  ]);
+}
+
+function updateProgressBar(percent) {
+  setProgress('heatmap-progress-bar', percent);
+}
+
+function hideLoading() {
+  const loading = qs('#heatmap-loading');
+  if (loading) loading.remove();
+}
+
+function showMapError(message) {
+  const root = qs('#heatmap-svg-root');
+  if (!root) return;
+  replaceChildren(root, createElement('div', { className: 'max-w-sm px-6 text-center' }, [
+    createElement('p', { className: 'text-lg font-bold text-slate-950', text: 'Map could not load' }),
+    createElement('p', { className: 'mt-2 text-sm leading-6 text-slate-600', text: message })
+  ]));
+}
+
+async function loadSvgMap() {
+  updateProgressBar(20);
+  const response = await fetch(SVG_PATH, { headers: { Accept: 'image/svg+xml,text/xml' } });
+  if (!response.ok) throw new Error('SVG asset is unavailable.');
+  const svgText = await response.text();
+  const parsed = new DOMParser().parseFromString(svgText, 'image/svg+xml');
+  if (parsed.querySelector('parsererror')) {
+    console.error('SVG Parsing Error:', parsed.querySelector('parsererror').textContent);
+    throw new Error('SVG asset could not be parsed safely.');
+  }
+  const sourceSvg = parsed.querySelector('svg');
+  if (!sourceSvg) {
+    console.error('SVG Source Error: No <svg> tag found in fetched content.');
+    throw new Error('SVG root is missing.');
+  }
+  sanitizeInlineSvg(sourceSvg);
+
+  const root = qs('#heatmap-svg-root');
+  if (!root) throw new Error('Map container is missing.');
+  replaceChildren(root, document.importNode(sourceSvg, true));
+  svgMap = qs('svg', root);
+  if (!svgMap) throw new Error('Map SVG was not inserted.');
+
+  configureSvg();
+  bindMapPaths();
+  setupZoomAndPan();
+  resetZoom();
+  updateProgressBar(55);
+}
+
+function sanitizeInlineSvg(sourceSvg) {
+  sourceSvg
+    .querySelectorAll('script, foreignObject, iframe, object, embed, image, use, a, style, link')
+    .forEach((node) => node.remove());
+
+  [sourceSvg, ...sourceSvg.querySelectorAll('*')].forEach((element) => {
+    Array.from(element.attributes).forEach((attribute) => {
+      const name = attribute.name.toLowerCase();
+      if (name.startsWith('on') || name === 'style' || name === 'href' || name === 'xlink:href') {
+        element.removeAttribute(attribute.name);
+      }
+    });
+  });
+}
+
+function configureSvg() {
+  const sourceViewBox = svgMap.getAttribute('viewBox') || svgMap.getAttribute('viewbox') || '0 0 1000 1000';
+  svgMap.setAttribute('viewBox', sourceViewBox);
+  svgMap.removeAttribute('viewbox');
+  svgMap.removeAttribute('width');
+  svgMap.removeAttribute('height');
+  svgMap.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+  const classes = 'h-full max-h-full w-full max-w-full transition-transform duration-100 ease-out origin-center drop-shadow-md will-change-transform';
+  svgMap.classList.add(...classes.split(' '));
+  svgMap.setAttribute('aria-label', 'India state risk map');
+}
+
+function bindMapPaths() {
+  qsa('path', svgMap).forEach((path) => {
+    const fallbackName = path.getAttribute('name') || path.getAttribute('title') || path.id || 'Map region';
+    const pathClasses = 'heatmap-path cursor-pointer stroke-white outline-none transition-[fill,stroke,stroke-width] duration-200 ease-out';
+    path.classList.add(...pathClasses.split(' '));
+    path.style.strokeWidth = '0.75';
+    path.setAttribute('tabindex', '0');
+    path.setAttribute('role', 'button');
+    path.setAttribute('aria-label', fallbackName);
+    path.addEventListener('click', handleStateClick);
+    path.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        handleStateClick(event);
+      }
+    });
+    path.addEventListener('mouseenter', (event) => {
+      if (!path.classList.contains('selected')) {
+        path.style.stroke = '#FF9933';
+        path.style.strokeWidth = '2.5';
+      }
+      handleStateHover(event);
+    });
+    path.addEventListener('mousemove', handleStateHover);
+    path.addEventListener('mouseleave', () => {
+      if (!path.classList.contains('selected')) {
+        path.style.stroke = '#ffffff';
+        path.style.strokeWidth = '0.75';
+      }
+      hideTooltip();
+    });
+    path.addEventListener('focus', (event) => {
+      if (!path.classList.contains('selected')) {
+        path.style.stroke = '#E87722';
+      }
+      handleStateHover(event);
+    });
+    path.addEventListener('blur', (event) => {
+      if (!path.classList.contains('selected')) {
+        path.style.stroke = '#ffffff';
+      }
+      hideTooltip();
+    });
+  });
+}
+
+async function loadHeatmapData(force = false) {
+  if (force) clearApiCache();
+  else hydrateHeatmapFromCache();
+
+  const fetchOptions = force ? { cacheMs: 0 } : {};
+  updateProgressBar(70);
+  const newData = await getHeatmapData(fetchOptions);
+  applyHeatmapPayload(newData);
+  updateProgressBar(100);
+  return newData;
+}
+
+async function ensureSvgMap() {
+  if (svgMap) return;
+  svgLoadPromise = svgLoadPromise || loadSvgMap().catch((error) => {
+    svgLoadPromise = null;
+    throw error;
+  });
+  await svgLoadPromise;
+}
+
+async function refreshHeatmap(force = false) {
+  if (refreshInFlight) return;
+  refreshInFlight = true;
+  const refreshButton = qs('#heatmap-refresh') || qs('#heatmap-header-refresh') || qs('#heatmap-refresh-mobile');
+  if (refreshButton) refreshButton.disabled = true;
+
+  try {
+    await Promise.all([ensureSvgMap(), loadHeatmapData(force)]);
+    syncHeatmapView();
+    await Promise.allSettled([
+      updateStats(),
+      updateFeeds(Boolean(selectedState), { forceRefresh: force })
+    ]);
+  } catch (error) {
+    console.error('Heatmap refresh failed:', error);
+    hideLoading();
+    if (!heatmapRecords().length) mapStatus('Connecting to spatial feed...', 'neutral');
+    else syncHeatmapView();
+  } finally {
+    refreshInFlight = false;
+    if (refreshButton) refreshButton.disabled = false;
+  }
+}
+
+async function updateStats() {
+  try {
+    latestStats = await getStats();
+    const processing = Boolean(latestStats.processing_active);
+    const mlReady = Boolean(latestStats.ml_ready);
+    mapStatus(processing ? 'Live processing' : mlReady ? 'System ready' : 'Map data loaded', processing || mlReady ? 'good' : 'neutral');
+  } catch {
+    latestStats = null;
+  }
+  updateStatsPopover();
+}
+
+function findStateData(pathElement) {
+  if (!pathElement) return null;
+  const rawName = pathElement.getAttribute('name') || pathElement.getAttribute('title') || pathElement.id || '';
+  const normalizedSvgName = normalizeName(rawName);
+  if (!normalizedSvgName) return null;
+
+  const direct = stateLookup.get(normalizedSvgName);
+  if (direct) return direct;
+
+  const alias = STATE_ALIASES[normalizedSvgName];
+  if (alias) {
+    const aliasHit = stateLookup.get(normalizeName(alias));
+    if (aliasHit) return aliasHit;
+  }
+
+  for (const [key, record] of stateLookup) {
+    if (key.includes(normalizedSvgName) || normalizedSvgName.includes(key)) return record;
+  }
+  return null;
+}
+
+function applyHeatmapColors() {
+  if (!svgMap) return;
+  qsa('path', svgMap).forEach((path) => {
+    const record = findStateData(path);
+    const risk = riskFromRecord(record || { risk_level: 'insufficient_data' });
+    path.setAttribute('fill', risk.color);
+    path.style.fill = risk.color;
+    path.style.stroke = '#ffffff';
+    path.style.strokeWidth = '0.75';
+    path.dataset.risk = risk.key;
+    path.dataset.state = record ? toSafeText(record.state || record.name || path.getAttribute('name')) : toSafeText(path.getAttribute('name') || path.id);
+  });
+}
+
+function handleStateClick(event) {
+  event.stopPropagation();
+  const path = event.currentTarget || event.target;
+  if (!path || !svgMap) return;
+
+  const candidateState = toSafeText(path.getAttribute('name') || path.id, 'Unknown state');
+  const record = findStateData(path);
+  const stateName = record ? toSafeText(record.state || record.name) : candidateState;
+
+  if (selectedState === stateName) {
+    clearStateSelection();
+    return;
+  }
+
+  if (path.parentNode) {
+    path.parentNode.appendChild(path);
+  }
+  qsa('.selected', svgMap).forEach((element) => {
+    element.classList.remove('selected');
+    element.style.strokeWidth = '0.75';
+    element.style.stroke = '#ffffff';
+  });
+  path.classList.add('selected');
+  path.style.strokeWidth = '3.5';
+  path.style.stroke = '#FF9933';
+  selectedStateRecord = record;
+  selectedState = stateName;
+  mapInteractionActive = true;
+
+  updateStatsPopover();
+  updateFeeds(true);
+}
+
+
+function clearStateSelection() {
+  selectedState = null;
+  selectedStateRecord = null;
+  if (svgMap) {
+    qsa('.selected', svgMap).forEach((element) => {
+      element.classList.remove('selected');
+      element.style.strokeWidth = '0.75';
+      element.style.stroke = '#ffffff';
+    });
+  }
+
+  updateStatsPopover();
+  updateFeeds(true);
+}
+
+function handleStateHover(event) {
+  const path = event.currentTarget || event.target;
+  if (!path) return;
+  const record = findStateData(path);
+  const fallbackName = path.getAttribute('name') || path.id || 'Unknown state';
+  showTooltip(event, record, fallbackName);
+}
+
+function showTooltip(event, record, fallbackName) {
+  const tooltip = qs('#heatmap-tooltip');
+  if (!tooltip) return;
+  const risk = riskFromRecord(record || { risk_level: 'insufficient_data' });
+  const children = [
+    createElement('p', { className: 'font-bold text-white', text: record ? (record.state || record.name) : fallbackName })
+  ];
+  if (record) {
+    const fakeCount = numberOrNull(record.fake_count ?? record.fake_events);
+    const realCount = numberOrNull(record.real_count ?? record.real_events ?? record.verified_count ?? record.verified_events);
+    children.push(
+      createElement('p', { text: `Events: ${formatCount(record.event_count ?? record.total_events ?? record.events)}` }),
+      createElement('p', { text: `Fake News: ${formatCount(fakeCount)}` }),
+      createElement('p', { text: `Verified News: ${formatCount(realCount)}` }),
+      createElement('p', { text: `Fake ratio: ${formatRatioAsPercent(getFakeRatio(record))}` }),
+      createElement('p', { text: `Risk: ${risk.label}` })
+    );
+  } else {
+    children.push(createElement('p', { className: 'text-slate-300', text: 'No live metrics available for this region.' }));
+  }
+
+  replaceChildren(tooltip, children);
+  tooltip.style.display = 'block';
+  tooltip.setAttribute('aria-hidden', 'false');
+
+  // Dynamic positioning to prevent clipping
+  const tooltipRect = tooltip.getBoundingClientRect();
+  const gap = 15;
+  let left = event.clientX + gap;
+  let top = event.clientY + gap;
+
+  // Horizontal clamping
+  if (left + tooltipRect.width > window.innerWidth - gap) {
+    left = event.clientX - tooltipRect.width - gap;
+  }
+
+  // Vertical clamping - if near bottom, show above cursor
+  if (top + tooltipRect.height > window.innerHeight - gap) {
+    top = event.clientY - tooltipRect.height - gap;
+  }
+
+  // Ensure it doesn't go off the top/left
+  left = Math.max(gap, left);
+  top = Math.max(gap, top);
+
+  tooltip.style.left = `${left}px`;
+  tooltip.style.top = `${top}px`;
+}
+
+function hideTooltip() {
+  const tooltip = qs('#heatmap-tooltip');
+  if (!tooltip) return;
+  tooltip.style.display = 'none';
+  tooltip.setAttribute('aria-hidden', 'true');
+}
+
+function activeMapStates() {
+  return heatmapRecords()
+    .filter((record) => (getRecordCount(record) || 0) > 0)
+    .sort((a, b) => (getRecordCount(b) || 0) - (getRecordCount(a) || 0));
+}
+
+function matchesNormalizedState(candidate, expected) {
+  if (!candidate || !expected) return false;
+  return candidate === expected || candidate.includes(expected) || expected.includes(candidate);
+}
+
+function getCanonicalState(stateName) {
+  const norm = normalizeName(stateName);
+  if (!norm) return null;
+  const alias = STATE_ALIASES[norm];
+  return alias ? normalizeName(alias) : norm;
+}
+
+function eventMatchesState(event, stateName) {
+  const expected = getCanonicalState(stateName);
+  if (!expected) return false;
+
+  // Primary check: state field
+  const eventState = getEventState(event);
+  if (eventState && getCanonicalState(eventState) === expected) return true;
+
+  // Secondary checks: other fields
+  const candidates = [
+    event.location,
+    event.region,
+    getEventTitle(event)
+  ].map(getCanonicalState).filter(Boolean);
+
+  return candidates.some((candidate) => candidate === expected || candidate.includes(expected) || expected.includes(candidate));
+}
+
+function dedupeEvents(events) {
+  const seen = new Set();
+  return (Array.isArray(events) ? events : []).filter((event) => {
+    if (!event) return false;
+    const key = `${normalizeName(getEventTitle(event))}|${normalizeName(getEventState(event))}|${event.timestamp || ''}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+
+function feedEmptyOptions(type, stateName = selectedState) {
+  const isFake = type === 'fake';
+  return {
+    type,
+    emptyTitle: stateName
+      ? (isFake ? `No alerts for ${stateName}` : `No verified news for ${stateName}`)
+      : (isFake ? 'Clear signal' : 'Awaiting updates'),
+    emptyDetail: isFake
+      ? 'Monitoring for new misinformation signals across active map regions.'
+      : 'Verified reports appear here as they are authenticated by the pipeline.'
+  };
+}
+
+async function renderFeedsProgressively(fakeEvents, realEvents, generation, stateName) {
+  if (generation !== feedsGeneration) return;
+  const alertsEl = qs('#heatmap-misinformation-feed');
+  const newsEl = qs('#heatmap-real-news-feed');
+  const displayLimit = stateName ? 20 : FEED_DISPLAY_LIMIT;
+  const fakeList = fakeEvents.slice(0, displayLimit);
+  const realList = realEvents.slice(0, displayLimit);
+
+  if (alertsEl) {
+    if (fakeList.length) {
+      replaceChildren(alertsEl, fakeList.map(event => createEventItem(event, { type: 'fake' })));
+    } else {
+      renderEventList('#heatmap-misinformation-feed', [], feedEmptyOptions('fake', stateName));
+    }
+    setText('#heatmap-misinformation-count', `${fakeList.length} item${fakeList.length === 1 ? '' : 's'}`);
+  }
+  if (newsEl) {
+    if (realList.length) {
+      replaceChildren(newsEl, realList.map(event => createEventItem(event, { type: 'real' })));
+    } else {
+      renderEventList('#heatmap-real-news-feed', [], feedEmptyOptions('real', stateName));
+    }
+    setText('#heatmap-real-news-count', `${realList.length} item${realList.length === 1 ? '' : 's'}`);
+  }
+}
+
+async function updateFeeds(forceState = false, options = {}) {
+  const feedAlerts = qs('#heatmap-misinformation-feed');
+  const feedNews = qs('#heatmap-real-news-feed');
+  const stateAtRequest = selectedState;
+  const generation = ++feedsGeneration;
+
+  // Immediately show loading placeholder in Alerts/Verified when state is selected/clicked
+  if (stateAtRequest) {
+    if (feedAlerts) replaceChildren(feedAlerts, [createFeedLoadingSpinner()]);
+    if (feedNews) replaceChildren(feedNews, [createFeedLoadingSpinner()]);
+  }
+
+  const forceRefresh = Boolean(options.forceRefresh);
+
+  if (forceRefresh && stateAtRequest) {
+    clearStateEventsCache(stateAtRequest);
+  }
+
+  try {
+    if (stateAtRequest) {
+      // 1. Fetch latest 10 quickly
+      const fetchOptions = forceRefresh ? { cacheMs: 0, force: true } : {};
+      const events10 = await getStateEvents(stateAtRequest, { ...fetchOptions, limit: 10 });
+      if (generation !== feedsGeneration) return;
+
+      const deduped10 = dedupeEvents(events10);
+      const filtered10 = deduped10.filter((event) => eventMatchesState(event, stateAtRequest));
+      const fake10 = filtered10.filter((event) => getEventClassification(event) === 'fake');
+      const real10 = filtered10.filter((event) => getEventClassification(event) === 'real');
+
+      await renderFeedsProgressively(fake10, real10, generation, stateAtRequest);
+
+      // 2. Fetch up to 20 in the background
+      getStateEvents(stateAtRequest, { ...fetchOptions, limit: 20 })
+        .then(async (events20) => {
+          if (generation !== feedsGeneration) return;
+          const deduped20 = dedupeEvents(events20);
+          const filtered20 = deduped20.filter((event) => eventMatchesState(event, stateAtRequest));
+          const fake20 = filtered20.filter((event) => getEventClassification(event) === 'fake');
+          const real20 = filtered20.filter((event) => getEventClassification(event) === 'real');
+          await renderFeedsProgressively(fake20, real20, generation, stateAtRequest);
+        })
+        .catch((err) => {
+          console.warn('Background feed fetch failed:', err);
+        });
+    } else {
+      // No state selected: fetch only live events (global pool)
+      const fetchOptions = forceRefresh ? { cacheMs: 0, force: true } : {};
+      const events = await getLiveEvents(LIVE_EVENTS_FETCH_LIMIT, fetchOptions);
+      if (generation !== feedsGeneration) return;
+
+      const deduped = dedupeEvents(events);
+      const fakeEvents = deduped.filter((event) => getEventClassification(event) === 'fake');
+      const realEvents = deduped.filter((event) => getEventClassification(event) === 'real');
+      await renderFeedsProgressively(fakeEvents, realEvents, generation, stateAtRequest);
+    }
+  } catch (error) {
+    if (generation !== feedsGeneration) return;
+    console.error('Feed update failed:', error);
+    if (feedAlerts) {
+      renderEventList('#heatmap-misinformation-feed', [], {
+        ...feedEmptyOptions('fake', stateAtRequest),
+        emptyTitle: 'Feed unavailable',
+        emptyDetail: 'Could not load events. Use Refresh to try again.'
+      });
+    }
+    if (feedNews) {
+      renderEventList('#heatmap-real-news-feed', [], {
+        ...feedEmptyOptions('real', stateAtRequest),
+        emptyTitle: 'Feed unavailable',
+        emptyDetail: 'Could not load events. Use Refresh to try again.'
+      });
+    }
+    setText('#heatmap-misinformation-count', '0 items');
+    setText('#heatmap-real-news-count', '0 items');
+  }
+}
+
+function setupControls() {
+  const refresh = qs('#heatmap-refresh');
+  const refreshHeader = qs('#heatmap-header-refresh');
+  const refreshMobile = qs('#heatmap-refresh-mobile');
+
+  const refreshHandler = () => refreshHeatmap(true);
+  if (refresh) refresh.addEventListener('click', refreshHandler);
+  if (refreshHeader) refreshHeader.addEventListener('click', refreshHandler);
+  if (refreshMobile) refreshMobile.addEventListener('click', refreshHandler);
+
+  const zoomInButton = qs('#heatmap-zoom-in');
+  const zoomOutButton = qs('#heatmap-zoom-out');
+  const zoomResetButton = qs('#heatmap-zoom-reset');
+  if (zoomInButton) zoomInButton.addEventListener('click', () => zoomBy(BUTTON_ZOOM_STEP));
+  if (zoomOutButton) zoomOutButton.addEventListener('click', () => zoomBy(-BUTTON_ZOOM_STEP));
+  if (zoomResetButton) zoomResetButton.addEventListener('click', resetZoom);
+
+  const scrollDownBtn = qs('#scroll-down-btn');
+  if (scrollDownBtn) {
+    scrollDownBtn.addEventListener('click', () => {
+      window.scrollBy({
+        top: window.innerHeight * 0.7,
+        behavior: 'smooth'
+      });
+    });
+  }
+
+  const legendToggle = qs('#risk-legend-toggle');
+  const legendPanel = qs('#risk-legend-panel');
+  const legendIcon = qs('#risk-legend-icon');
+  if (legendToggle && legendPanel) {
+    legendToggle.addEventListener('click', () => {
+      const expanded = legendToggle.getAttribute('aria-expanded') === 'true';
+      legendToggle.setAttribute('aria-expanded', String(!expanded));
+      if (expanded) {
+        legendPanel.style.maxHeight = '0px';
+        legendIcon.style.transform = 'rotate(-180deg)';
+      } else {
+        legendPanel.style.maxHeight = '500px';
+        legendIcon.style.transform = 'rotate(0deg)';
+      }
+    });
+
+    // Collapse legend by default for mobile phones and Nest Hub (1024x600) to save space
+    // EXCLUDE Surface Duo (540x720) as per user request to show legend
+    const isNestHub = window.innerWidth === 1024 && window.innerHeight === 600;
+    const isSurfaceDuo = window.innerWidth === 540 && window.innerHeight === 720;
+    if ((window.innerWidth < 600 && !isSurfaceDuo) || isNestHub) {
+      legendToggle.setAttribute('aria-expanded', 'false');
+      legendPanel.style.maxHeight = '0px';
+      legendIcon.style.transform = 'rotate(-180deg)';
+    }
+  }
+
+
+  // Tab Logic
+  const tabAlerts = qs('#tab-alerts');
+  const tabNews = qs('#tab-news');
+  const panelAlerts = qs('#panel-alerts');
+  const panelNews = qs('#panel-news');
+
+  if (tabAlerts && tabNews && panelAlerts && panelNews) {
+    const setActiveTab = (activeTab) => {
+      if (activeTab === 'alerts') {
+        tabAlerts.className = 'flex-1 rounded-lg px-4 py-2.5 text-xs font-bold uppercase tracking-widest transition-all duration-200 bg-white text-red-600 shadow-sm border border-slate-200';
+        tabNews.className = 'flex-1 rounded-lg px-4 py-2.5 text-xs font-bold uppercase tracking-widest transition-all duration-200 text-slate-500 hover:text-slate-700';
+        panelAlerts.classList.remove('hidden');
+        panelNews.classList.add('hidden');
+      } else {
+        tabNews.className = 'flex-1 rounded-lg px-4 py-2.5 text-xs font-bold uppercase tracking-widest transition-all duration-200 bg-white text-emerald-600 shadow-sm border border-slate-200';
+        tabAlerts.className = 'flex-1 rounded-lg px-4 py-2.5 text-xs font-bold uppercase tracking-widest transition-all duration-200 text-slate-500 hover:text-slate-700';
+        panelNews.classList.remove('hidden');
+        panelAlerts.classList.add('hidden');
+      }
+    };
+
+    tabAlerts.addEventListener('click', () => setActiveTab('alerts'));
+    tabNews.addEventListener('click', () => setActiveTab('news'));
+  }
+
+  const stateClearButton = qs('#heatmap-state-clear');
+  if (stateClearButton) {
+    stateClearButton.addEventListener('click', clearStateSelection);
+  }
+
+  const svgRoot = qs('#heatmap-svg-root');
+  if (svgRoot) {
+    svgRoot.addEventListener('click', (event) => {
+      if (event.target && event.target.tagName !== 'path') {
+        clearStateSelection();
+      }
+    });
+  }
+
+  setupEventModal();
+  document.addEventListener('keydown', handleHeatmapShortcuts);
+}
+
+function setupEventModal() {
+  const modal = qs('#event-detail-modal');
+  const overlay = qs('#event-detail-overlay');
+  const closeBtn = qs('#event-detail-close');
+
+  if (!modal) return;
+  let lastFocusedElement = null;
+
+  const closeModal = () => {
+    modal.classList.add('opacity-0', 'pointer-events-none');
+    modal.classList.remove('opacity-100', 'pointer-events-auto');
+    modal.setAttribute('aria-hidden', 'true');
+    document.body.classList.remove('overflow-hidden');
+    const card = qs('#event-detail-card');
+    if (card) {
+      card.classList.add('scale-95');
+      card.classList.remove('scale-100');
+    }
+    if (lastFocusedElement instanceof HTMLElement) {
+      lastFocusedElement.focus({ preventScroll: true });
+    }
+    lastFocusedElement = null;
+  };
+
+  closeBtn?.addEventListener('click', closeModal);
+  overlay?.addEventListener('click', closeModal);
+  modal.addEventListener('keydown', (event) => {
+    if (event.key !== 'Tab' || modal.classList.contains('pointer-events-none')) return;
+    const focusable = qsa('button:not([disabled]), a[href]', modal)
+      .filter((element) => element instanceof HTMLElement && !element.classList.contains('hidden'));
+    if (!focusable.length) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  });
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && modal.classList.contains('pointer-events-auto')) {
+      closeModal();
+    }
+  });
+
+  document.addEventListener('openEventModal', (e) => {
+    lastFocusedElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    populateEventDetailModal(e.detail || {});
+
+    // Show modal
+    modal.classList.remove('opacity-0', 'pointer-events-none');
+    modal.classList.add('opacity-100', 'pointer-events-auto');
+    modal.setAttribute('aria-hidden', 'false');
+    document.body.classList.add('overflow-hidden');
+    const card = qs('#event-detail-card');
+    if (card) {
+      card.classList.remove('scale-95');
+      card.classList.add('scale-100');
+    }
+    closeBtn?.focus({ preventScroll: true });
+  });
+}
+
+function setupZoomAndPan() {
+  const root = qs('#heatmap-svg-root');
+  if (!root || !svgMap) return;
+
+  root.addEventListener('pointerenter', () => {
+    mapInteractionActive = true;
+  });
+  root.addEventListener('focusin', () => {
+    mapInteractionActive = true;
+  });
+  root.addEventListener('mousedown', () => {
+    mapInteractionActive = true;
+  });
+  root.addEventListener('touchstart', () => {
+    mapInteractionActive = true;
+  }, { passive: true });
+
+  root.addEventListener('wheel', (event) => {
+    if (event.cancelable) event.preventDefault();
+    const direction = event.deltaY > 0 ? -1 : 1;
+    const magnitude = Math.min(1, Math.abs(event.deltaY) / 600);
+    zoomBy(direction * 0.10 * Math.max(0.25, magnitude), event.clientX, event.clientY);
+  }, { passive: false });
+
+  root.addEventListener('mousedown', (event) => {
+    if (event.button !== 0) return;
+    isDragging = true;
+    lastPointerX = event.clientX;
+    lastPointerY = event.clientY;
+    root.classList.add('cursor-grabbing');
+  });
+
+  document.addEventListener('mousemove', (event) => {
+    if (!isDragging) return;
+    currentX += event.clientX - lastPointerX;
+    currentY += event.clientY - lastPointerY;
+    lastPointerX = event.clientX;
+    lastPointerY = event.clientY;
+    updateTransform();
+  });
+
+  document.addEventListener('mouseup', () => {
+    isDragging = false;
+    root.classList.remove('cursor-grabbing');
+  });
+
+  root.addEventListener('touchstart', (event) => {
+    if (event.touches.length === 2) {
+      pinchStartDistance = getTouchDistance(event.touches);
+      pinchStartZoom = currentZoom;
+    } else if (event.touches.length === 1) {
+      isDragging = true;
+      lastPointerX = event.touches[0].clientX;
+      lastPointerY = event.touches[0].clientY;
+    }
+  }, { passive: true });
+
+  root.addEventListener('touchmove', (event) => {
+    if (event.cancelable) event.preventDefault();
+    if (event.touches.length === 2 && pinchStartDistance > 0) {
+      const distance = getTouchDistance(event.touches);
+      const ratio = distance / pinchStartDistance;
+      const dampened = 1 + (ratio - 1) * 0.45;
+      currentZoom = clampZoom(pinchStartZoom * dampened);
+      updateTransform();
+    } else if (event.touches.length === 1 && isDragging) {
+      currentX += event.touches[0].clientX - lastPointerX;
+      currentY += event.touches[0].clientY - lastPointerY;
+      lastPointerX = event.touches[0].clientX;
+      lastPointerY = event.touches[0].clientY;
+      updateTransform();
+    }
+  }, { passive: false });
+
+  root.addEventListener('touchend', () => {
+    isDragging = false;
+    pinchStartDistance = 0;
+  });
+}
+
+function getTouchDistance(touches) {
+  const dx = touches[0].clientX - touches[1].clientX;
+  const dy = touches[0].clientY - touches[1].clientY;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+function clampZoom(value) {
+  return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, value));
+}
+
+function zoomBy(delta, clientX, clientY) {
+  const nextZoom = clampZoom(currentZoom + delta);
+  applyZoom(nextZoom, clientX, clientY);
+}
+
+function applyZoom(nextZoom, clientX, clientY) {
+  if (!svgMap) return;
+  const root = qs('#heatmap-svg-root');
+  const previous = currentZoom;
+  if (previous === nextZoom) return;
+
+  if (root && Number.isFinite(clientX) && Number.isFinite(clientY)) {
+    const rect = root.getBoundingClientRect();
+    const focalX = clientX - rect.left - rect.width / 2;
+    const focalY = clientY - rect.top - rect.height / 2;
+    const zoomRatio = nextZoom / previous;
+    currentX = focalX - (focalX - currentX) * zoomRatio;
+    currentY = focalY - (focalY - currentY) * zoomRatio;
+  }
+
+  currentZoom = nextZoom;
+  updateTransform();
+}
+
+function resetZoom() {
+  currentZoom = window.innerWidth < 1024 ? 0.95 : 1.15;
+  currentX = 0;
+  currentY = 0;
+  updateTransform();
+}
+
+function updateTransform() {
+  if (!svgMap) return;
+
+  // Enforce bounds
+  const root = qs('#heatmap-svg-root');
+  if (root) {
+    const rect = root.getBoundingClientRect();
+    const halfW = rect.width / 2;
+    const halfH = rect.height / 2;
+
+    // Calculate allowed movement based on zoom
+    // We want to keep the map somewhat visible at all times
+    const maxShiftX = halfW * currentZoom + MAP_BOUNDS_PADDING;
+    const maxShiftY = halfH * currentZoom + MAP_BOUNDS_PADDING;
+
+    currentX = Math.max(-maxShiftX, Math.min(maxShiftX, currentX));
+    currentY = Math.max(-maxShiftY, Math.min(maxShiftY, currentY));
+  }
+
+  svgMap.style.transform = `translate(${currentX}px, ${currentY}px) scale(${currentZoom})`;
+  // setText('#heatmap-zoom-level', `${Math.round(currentZoom * 100)}%`);
+}
+
+function handleHeatmapShortcuts(event) {
+  if (!event.ctrlKey || !mapInteractionActive || isInteractiveInput(event.target)) return;
+  const key = event.key;
+  if (key === '+' || key === '=') {
+    event.preventDefault();
+    zoomBy(BUTTON_ZOOM_STEP);
+  } else if (key === '-') {
+    event.preventDefault();
+    zoomBy(-BUTTON_ZOOM_STEP);
+  } else if (key === ' ') {
+    event.preventDefault();
+    resetZoom();
+  }
+}
+
+function hydrateFeedsFromCache() {
+  const payload = peekCached(`/api/v1/events/live?limit=${LIVE_EVENTS_FETCH_LIMIT}`);
+  if (!payload) return;
+  let events = Array.isArray(payload) ? payload : (payload.events || payload.data || []);
+  if (!events.length) return;
+
+  const active = activeMapStates();
+  if (active.length) {
+    const onMap = events.filter((event) =>
+      active.some((record) => eventMatchesState(event, record.state || record.name))
+    );
+    if (onMap.length >= 3) events = onMap;
+  }
+
+  const fakeEvents = events.filter((event) => getEventClassification(event) === 'fake');
+  const realEvents = events.filter((event) => getEventClassification(event) === 'real');
+  renderEventList('#heatmap-misinformation-feed', fakeEvents, { type: 'fake', limit: FEED_DISPLAY_LIMIT });
+  renderEventList('#heatmap-real-news-feed', realEvents, { type: 'real', limit: FEED_DISPLAY_LIMIT });
+  setText('#heatmap-misinformation-count', `${Math.min(fakeEvents.length, FEED_DISPLAY_LIMIT)} items`);
+  setText('#heatmap-real-news-count', `${Math.min(realEvents.length, FEED_DISPLAY_LIMIT)} items`);
+}
+
+export async function initHeatmap() {
+  if ('scrollRestoration' in history) {
+    history.scrollRestoration = 'manual';
+  }
+  window.scrollTo(0, 0);
+
+  setupControls();
+  mapStatus('Loading map', 'neutral');
+  hydrateHeatmapFromCache();
+  hydrateFeedsFromCache();
+  updateStatsPopover();
+
+  try {
+    await loadSvgMap();
+    syncHeatmapView();
+  } catch (error) {
+    console.error('Heatmap map load failed:', error);
+    hideLoading();
+    showMapError(error && error.message ? error.message : 'The local SVG could not be loaded.');
+    mapStatus('Reconnecting to map frame...', 'neutral');
+    return;
+  }
+
+  // Background refresh — map stays interactive; feeds fill progressively
+  loadHeatmapData(false)
+    .then(() => {
+      syncHeatmapView();
+      return Promise.allSettled([updateStats(), updateFeeds(false)]);
+    })
+    .catch((error) => console.warn('Heatmap data refresh:', error));
+
+  window.setInterval(() => {
+    if (document.visibilityState === 'visible') refreshHeatmap();
+  }, 45000);
+}

frontend/assets/js/pages/home.js

@@ -0,0 +1,169 @@
+import { getStats, peekCached } from '../api.js';
+import { setProgress, updateStatusText } from '../components/ui.js';
+import { updateMobileNavStatus, updateStatsPanels } from '../components/navbar.js';
+import { setText } from '../utils/dom.js';
+import { formatCount, formatPercent, numberOrNull } from '../utils/formatters.js';
+
+function percentOf(value, total) {
+  const numerator = numberOrNull(value);
+  const denominator = numberOrNull(total);
+  if (numerator === null || denominator === null || denominator <= 0) return null;
+  return (numerator / denominator) * 100;
+}
+
+function setUnavailable() {
+  [
+    '#home-fake-count',
+    '#home-real-count',
+    '#home-states-count',
+    '#home-total-events',
+    '#home-misinformation-events',
+    '#home-verified-events',
+    '#home-accuracy-events',
+    '#home-accuracy-aside',
+    '#home-fake-percent',
+    '#home-real-percent'
+  ].forEach((selector) => setText(selector, '--'));
+  setText('#home-total-label', 'Connecting');
+  setText('#home-data-state', 'Connecting to real-time intelligence...');
+  setProgress('home-fake-bar', 0);
+  setProgress('home-real-bar', 0);
+  updateStatusText('home-nav-status', 'Connecting...', 'neutral');
+  updateMobileNavStatus('Connecting...');
+}
+
+function updateHome(data) {
+  const total = numberOrNull(data.total_events);
+  const fake = numberOrNull(data.fake_events);
+  const real = numberOrNull(data.real_events);
+  const totalStates = numberOrNull(data.total_states);
+  const divisor = total ?? [fake, real].filter((v) => v !== null).reduce((s, v) => s + v, 0);
+  const statesText = totalStates === null ? '--' : formatCount(totalStates);
+
+  setText('#home-fake-count', formatCount(fake));
+  setText('#home-real-count', formatCount(real));
+  setText('#home-states-count', statesText);
+  setText('#home-total-events', formatCount(total));
+  setText('#home-misinformation-events', formatCount(fake));
+  setText('#home-verified-events', formatCount(real));
+  setText('#home-accuracy-events', formatPercent(data.classification_accuracy));
+  setText('#home-accuracy-aside', formatPercent(data.classification_accuracy));
+  setText('#home-total-label', total === null ? 'No total yet' : `${formatCount(total)} total`);
+
+  const fakePct = percentOf(fake, divisor);
+  const realPct = percentOf(real, divisor);
+
+  setText('#home-fake-percent', fakePct === null ? '--' : formatPercent(fakePct));
+  setText('#home-real-percent', realPct === null ? '--' : formatPercent(realPct));
+  setProgress('home-fake-bar', fakePct || 0);
+  setProgress('home-real-bar', realPct || 0);
+
+  const processing = Boolean(data.processing_active);
+  const mlReady = Boolean(data.ml_ready);
+  const statusText = processing ? 'Live processing' : mlReady ? 'System ready' : 'Data loaded';
+  updateStatusText('home-nav-status', statusText, processing || mlReady ? 'good' : 'neutral');
+  updateMobileNavStatus(statusText);
+
+  const lastUpdate = new Date().toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit', hour12: true });
+
+  updateStatsPanels([
+    { label: 'Events', value: formatCount(total), className: 'text-blue-700' },
+    { label: 'Risk', value: formatCount(fake), className: 'text-saffron-700' },
+    { label: 'Accuracy', value: formatPercent(data.classification_accuracy), className: 'text-emerald-700' },
+    { label: 'Last Update', value: lastUpdate },
+    { label: 'States', value: statesText, className: 'text-slate-950' }
+  ]);
+
+  setText('#home-data-state', 'Live backend values loaded successfully.');
+}
+
+export async function initHome() {
+  const cached = peekCached('/api/v1/stats');
+  if (cached) {
+    updateHome(cached);
+  } else {
+    updateStatusText('home-nav-status', 'Loading data', 'neutral');
+    updateMobileNavStatus('Loading data');
+  }
+
+  try {
+    const stats = await getStats();
+    updateHome(stats);
+  } catch {
+    if (!cached) setUnavailable();
+    // Retry once after 5s — covers cold-start when backend ML models are still loading
+    setTimeout(async () => {
+      try {
+        const stats = await getStats({ cacheMs: 0 });
+        updateHome(stats);
+      } catch { /* next interval will handle it */ }
+    }, 5000);
+  }
+
+  initTypewriter();
+
+  window.setInterval(async () => {
+    if (document.visibilityState !== 'visible') return;
+    try {
+      const stats = await getStats();
+      updateHome(stats);
+    } catch {
+      // Silently preserve the last known data on background refresh failures.
+      // The stale-while-revalidate cache in api.js handles returning cached data,
+      // so this catch only fires when there was never any data at all.
+    }
+  }, 30000);
+}
+
+function initTypewriter() {
+  const textElement = document.getElementById('typewriter-text');
+  if (!textElement) return;
+
+  const words = [
+    'before it spreads.',
+    'across Indian news.',
+    'in real-time.',
+    'before it goes viral.'
+  ];
+
+  let wordIndex = 0;
+  let text = '';
+  let isDeleting = false;
+  let typeSpeed = 100;
+
+  // Initial setup so we start by deleting the first hardcoded word
+  textElement.textContent = words[0];
+  text = words[0];
+  isDeleting = true;
+
+  function type() {
+    const current = wordIndex % words.length;
+    const fullText = words[current];
+
+    if (isDeleting) {
+      text = fullText.substring(0, text.length - 1);
+      typeSpeed = 40;
+    } else {
+      text = fullText.substring(0, text.length + 1);
+      typeSpeed = 80;
+    }
+
+    textElement.textContent = text;
+
+    if (!isDeleting && text === fullText) {
+      // Pause at the end of the word
+      typeSpeed = 3000;
+      isDeleting = true;
+    } else if (isDeleting && text === '') {
+      isDeleting = false;
+      wordIndex++;
+      // Pause before starting next word
+      typeSpeed = 500;
+    }
+
+    setTimeout(type, typeSpeed);
+  }
+
+  // Start the effect after a brief delay
+  setTimeout(type, 3000);
+}

frontend/assets/js/utils/dom.js

@@ -0,0 +1,113 @@
+import { sanitizeClassList, setSafeAttribute, toSafeText } from './security.js';
+
+export function qs(selector, root = document) {
+  if (typeof selector !== 'string' || !selector) return null;
+  return root.querySelector(selector);
+}
+
+export function qsa(selector, root = document) {
+  if (typeof selector !== 'string' || !selector) return [];
+  return Array.from(root.querySelectorAll(selector));
+}
+
+const SVG_TAGS = new Set([
+  'svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'ellipse',
+  'g', 'defs', 'linearGradient', 'stop', 'filter', 'feGaussianBlur', 'feComposite'
+]);
+
+/**
+ * @param {string} tag
+ * @param {{ className?: string, text?: string, attrs?: Record<string, unknown>, dataset?: Record<string, unknown>, style?: string }} [options]
+ * @param {Array<Node|string|number>} [children]
+ */
+export function createElement(tag, options = {}, children = []) {
+  const isSvg = SVG_TAGS.has(tag);
+  const element = isSvg
+    ? document.createElementNS('http://www.w3.org/2000/svg', tag)
+    : document.createElement(tag);
+
+  const { className, text, attrs, dataset, style } = options;
+
+  if (className) {
+    const safeClass = sanitizeClassList(className);
+    if (safeClass) {
+      if (isSvg) element.setAttribute('class', safeClass);
+      else element.className = safeClass;
+    }
+  }
+
+  if (text !== undefined) {
+    if (isSvg) element.append(document.createTextNode(toSafeText(text, '')));
+    else element.textContent = toSafeText(text, '');
+  }
+
+  if (attrs) {
+    Object.entries(attrs).forEach(([name, value]) => {
+      if (value === false || value === null || value === undefined) return;
+      setSafeAttribute(element, name, value);
+    });
+  }
+
+  if (dataset) {
+    Object.entries(dataset).forEach(([name, value]) => {
+      if (value === null || value === undefined) return;
+      const safeName = name.replace(/[^a-zA-Z0-9_-]/g, '');
+      if (safeName) element.dataset[safeName] = toSafeText(value, '', 200);
+    });
+  }
+
+  if (style && element instanceof HTMLElement) {
+    element.setAttribute('style', String(style).slice(0, 500));
+  }
+
+  const safeChildren = Array.isArray(children) ? children : [children];
+  safeChildren.filter(Boolean).forEach((child) => {
+    if (typeof child === 'string' || typeof child === 'number') {
+      element.append(document.createTextNode(String(child)));
+    } else {
+      element.append(child);
+    }
+  });
+
+  return element;
+}
+
+export function setText(target, value, fallback = '--') {
+  const element = typeof target === 'string' ? qs(target) : target;
+  if (!element) return;
+  element.textContent = toSafeText(value, fallback);
+}
+
+export function setWidth(target, value) {
+  const element = typeof target === 'string' ? qs(target) : target;
+  if (!element) return;
+  const number = Number(value);
+  const width = Number.isFinite(number) ? Math.max(0, Math.min(100, number)) : 0;
+  element.style.width = `${width}%`;
+}
+
+export function replaceChildren(target, children = []) {
+  const element = typeof target === 'string' ? qs(target) : target;
+  if (!element) return;
+  const safeChildren = Array.isArray(children) ? children : [children];
+  element.replaceChildren(...safeChildren.filter(Boolean));
+}
+
+export function clearElement(target) {
+  const element = typeof target === 'string' ? qs(target) : target;
+  if (!element) return;
+  element.replaceChildren();
+}
+
+export function toggleHidden(target, hidden) {
+  const element = typeof target === 'string' ? qs(target) : target;
+  if (!element) return;
+  element.hidden = Boolean(hidden);
+}
+
+export function updateClassList(element, classNames, enabled) {
+  if (!element) return;
+  sanitizeClassList(classNames, '').split(/\s+/).filter(Boolean).forEach((className) => {
+    element.classList.toggle(className, Boolean(enabled));
+  });
+}

frontend/assets/js/utils/formatters.js

@@ -0,0 +1,186 @@
+import { toSafeText } from './security.js';
+
+export function numberOrNull(value) {
+  if (value === null || value === undefined || value === '') return null;
+  const number = Number(value);
+  return Number.isFinite(number) ? number : null;
+}
+
+export function formatCount(value, fallback = '--') {
+  const number = numberOrNull(value);
+  if (number === null) return fallback;
+  const rounded = Math.max(0, Math.round(number));
+  if (rounded >= 1000000) return `${(rounded / 1000000).toFixed(1)}M`;
+  if (rounded >= 1000) return `${(rounded / 1000).toFixed(1)}K`;
+  return String(rounded);
+}
+
+export function normalizePercent(value) {
+  const number = numberOrNull(value);
+  if (number === null) return null;
+  const percent = Math.abs(number) <= 1 ? number * 100 : number;
+  return Math.max(0, Math.min(100, percent));
+}
+
+export function formatPercent(value, fallback = '--', decimals = 0) {
+  const percent = normalizePercent(value);
+  if (percent === null) return fallback;
+  if (decimals > 0) {
+    return `${percent.toFixed(decimals)}%`;
+  }
+  return `${Math.round(percent)}%`;
+}
+
+export function formatRatioAsPercent(value, fallback = '--') {
+  const number = numberOrNull(value);
+  if (number === null) return fallback;
+  return `${Math.round(Math.max(0, Math.min(100, number * 100)))}%`;
+}
+
+export function formatDateTime(value, fallback = '--') {
+  if (!value) return fallback;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return fallback;
+  return date.toLocaleString('en-IN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true,
+    day: '2-digit',
+    month: 'short'
+  });
+}
+
+export function formatClock(value = new Date()) {
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return '--';
+  return date.toLocaleTimeString('en-IN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: true
+  });
+}
+
+export function normalizeClassification(value) {
+  const text = toSafeText(value, 'unknown').toLowerCase();
+  if (['fake', 'misinformation', 'misleading', 'false'].includes(text)) return 'fake';
+  if (['real', 'verified', 'true', 'credible'].includes(text)) return 'real';
+  if (['uncertain', 'review', 'under_review', 'needs_review'].includes(text)) return 'uncertain';
+  return 'unknown';
+}
+
+export function getEventClassification(event) {
+  if (!event || typeof event !== 'object') return 'unknown';
+  const direct = normalizeClassification(
+    event.classification
+      ?? event.fake_news_verdict
+      ?? event.verdict
+      ?? event.status
+      ?? event.truth_status
+  );
+  if (direct !== 'unknown') return direct;
+
+  if (typeof event.is_fake === 'boolean') return event.is_fake ? 'fake' : 'real';
+  const isFake = numberOrNull(event.is_fake);
+  if (isFake !== null) return isFake > 0 ? 'fake' : 'real';
+  return 'unknown';
+}
+
+export function classificationLabel(value) {
+  const classification = normalizeClassification(value);
+  if (classification === 'fake') return 'Misinformation';
+  if (classification === 'real') return 'Verified';
+  if (classification === 'uncertain') return 'Under review';
+  return 'Unknown';
+}
+
+export function getEventTitle(event) {
+  return toSafeText(event && (event.title || event.headline || event.name), 'Untitled event');
+}
+
+export function getEventSource(event) {
+  return toSafeText(event && (event.source || event.source_name || event.publisher), 'Unknown source');
+}
+
+export function getEventState(event) {
+  return toSafeText(event && (event.state || event.region || event.location), 'India');
+}
+
+export function normalizeName(value) {
+  return toSafeText(value, '')
+    .toLowerCase()
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9\s]/g, ' ')
+    .replace(/\sand\s/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+export const RISK_LEVELS = {
+  least: {
+    key: 'least',
+    label: 'Least',
+    color: '#138808',
+    badgeClass: 'border-emerald-200 bg-emerald-50 text-emerald-700'
+  },
+  leastMedium: {
+    key: 'least-medium',
+    label: 'Least-Medium',
+    color: '#facc15',
+    badgeClass: 'border-yellow-200 bg-yellow-50 text-yellow-700'
+  },
+  mediumHigh: {
+    key: 'medium-high',
+    label: 'Medium-High',
+    color: '#f97316',
+    badgeClass: 'border-orange-200 bg-orange-50 text-orange-700'
+  },
+  high: {
+    key: 'high',
+    label: 'High',
+    color: '#dc2626',
+    badgeClass: 'border-red-200 bg-red-50 text-red-700'
+  },
+  insufficient: {
+    key: 'insufficient-data',
+    label: 'Least risk',
+    color: '#138808',
+    badgeClass: 'border-emerald-200 bg-emerald-50 text-emerald-700'
+  }
+};
+
+export function getFakeRatio(record = {}) {
+  const candidates = [
+    record.fake_probability,
+    record.fake_ratio,
+    record.fake_news_ratio,
+    record.fakeRate,
+    record.fake_rate
+  ];
+  const ratio = candidates.map(numberOrNull).find((value) => value !== null);
+  if (ratio !== undefined) {
+    return ratio > 1 ? ratio / 100 : ratio;
+  }
+
+  const fake = numberOrNull(record.fake_count ?? record.fake_events);
+  const total = numberOrNull(record.event_count ?? record.total_events);
+  if (fake !== null && total !== null && total > 0) return fake / total;
+  return null;
+}
+
+export function riskFromRecord(record = {}) {
+  const level = toSafeText(record.risk_level, '').toLowerCase().replace(/[\s-]+/g, '_');
+  if (['low', 'least'].includes(level)) return RISK_LEVELS.least;
+  if (['low_medium', 'least_medium', 'least_medium_risk'].includes(level)) return RISK_LEVELS.leastMedium;
+  if (['medium', 'medium_high', 'moderate'].includes(level)) return RISK_LEVELS.mediumHigh;
+  if (level === 'high') return RISK_LEVELS.high;
+  if (level === 'insufficient_data' || level === 'no_data') return RISK_LEVELS.insufficient;
+
+  const ratio = getFakeRatio(record);
+  if (ratio === null) return RISK_LEVELS.insufficient;
+  if (ratio < 0.02) return RISK_LEVELS.least;
+  if (ratio < 0.05) return RISK_LEVELS.leastMedium;
+  if (ratio < 0.10) return RISK_LEVELS.mediumHigh;
+  return RISK_LEVELS.high;
+}

frontend/assets/js/utils/security.js

@@ -0,0 +1,203 @@
+/** @typedef {'fake'|'real'|'uncertain'|'unknown'} Classification */
+
+const MAX_TEXT_LENGTH = 2000;
+const MAX_PLAIN_TEXT_LENGTH = 600;
+const MAX_STATE_LENGTH = 80;
+const MAX_API_PATH_LENGTH = 256;
+
+const FORBIDDEN_ATTR_PREFIX = /^on/i;
+const SAFE_ATTR_NAMES = new Set([
+  'id',
+  'class',
+  'href',
+  'src',
+  'alt',
+  'title',
+  'type',
+  'role',
+  'tabindex',
+  'aria-label',
+  'aria-hidden',
+  'aria-live',
+  'aria-expanded',
+  'aria-controls',
+  'aria-current',
+  'aria-describedby',
+  'viewBox',
+  'preserveAspectRatio',
+  'stroke',
+  'stroke-width',
+  'stroke-linecap',
+  'stroke-linejoin',
+  'fill',
+  'd',
+  'name',
+  'for',
+  'rel',
+  'target',
+  'width',
+  'height',
+  'xmlns',
+  'viewbox'
+]);
+
+/** Tailwind utility tokens allowed in dynamic class strings from API-derived UI. */
+const SAFE_CLASS_TOKEN = /^[a-z0-9_:/\-\[\].%]+$/i;
+
+export const CLASSIFICATION_BADGE_CLASSES = {
+  fake: 'border-red-200 bg-red-50 text-red-700',
+  real: 'border-emerald-200 bg-emerald-50 text-emerald-700',
+  uncertain: 'border-amber-200 bg-amber-50 text-amber-700',
+  unknown: 'border-slate-200 bg-slate-100 text-slate-600'
+};
+
+/**
+ * Strip control chars and normalize whitespace for safe text insertion.
+ * @param {unknown} value
+ * @param {string} [fallback]
+ * @param {number} [maxLen]
+ */
+export function toSafeText(value, fallback = '--', maxLen = MAX_TEXT_LENGTH) {
+  if (value === null || value === undefined) return fallback;
+  const text = String(value)
+    .replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F\u007F]/g, '')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .slice(0, maxLen);
+  return text || fallback;
+}
+
+const domParser = new DOMParser();
+
+/**
+ * Convert untrusted HTML-ish feed text into plain text for display.
+ * The result is rendered with textContent by callers, never as HTML.
+ * @param {unknown} value
+ * @param {string} [fallback]
+ * @param {number} [maxLen]
+ */
+export function toPlainText(value, fallback = '', maxLen = MAX_PLAIN_TEXT_LENGTH) {
+  if (value === null || value === undefined) return fallback;
+  const raw = String(value).trim();
+  if (!raw) return fallback;
+  
+  // Quick path: if no tags, just sanitize and return
+  if (!raw.includes('<')) return toSafeText(raw, fallback, maxLen);
+
+  const truncated = raw.slice(0, maxLen * 4);
+  const parsed = domParser.parseFromString(truncated, 'text/html');
+  
+  // Remove dangerous tags that might have text content we don't want displayed
+  const styleScript = parsed.querySelectorAll('script, style, template, noscript');
+  for (let i = 0; i < styleScript.length; i++) {
+    styleScript[i].remove();
+  }
+  
+  return toSafeText(parsed.body?.textContent || truncated, fallback, maxLen);
+}
+
+/**
+ * Allow only http(s) URLs; reject javascript:, data:, etc.
+ * @param {unknown} value
+ */
+export function safeUrl(value) {
+  if (value === null || value === undefined) return null;
+  try {
+    const raw = String(value).trim();
+    if (!raw || raw.length > 2048) return null;
+    const url = new URL(raw, window.location.origin);
+    if (url.protocol !== 'http:' && url.protocol !== 'https:') return null;
+    if (url.username || url.password) return null;
+    return url.href;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Sanitize dynamic class lists (blocks attribute injection via className).
+ * @param {unknown} value
+ * @param {string} [fallback]
+ */
+export function sanitizeClassList(value, fallback = '') {
+  const raw = toSafeText(value, '', 500);
+  if (!raw) return fallback;
+  const tokens = raw.split(/\s+/).filter((token) => SAFE_CLASS_TOKEN.test(token));
+  return tokens.length ? tokens.join(' ') : fallback;
+}
+
+/**
+ * @param {unknown} classification
+ */
+export function badgeClassForClassification(classification) {
+  const key = toSafeText(classification, 'unknown', 32).toLowerCase();
+  if (key === 'fake' || key === 'misinformation') return CLASSIFICATION_BADGE_CLASSES.fake;
+  if (key === 'real' || key === 'verified') return CLASSIFICATION_BADGE_CLASSES.real;
+  if (key === 'uncertain' || key === 'review') return CLASSIFICATION_BADGE_CLASSES.uncertain;
+  return CLASSIFICATION_BADGE_CLASSES.unknown;
+}
+
+/**
+ * Validate relative API paths (no open redirects / path traversal).
+ * @param {unknown} path
+ */
+export function sanitizeApiPath(path) {
+  const raw = String(path || '').trim();
+  if (!raw || raw.length > MAX_API_PATH_LENGTH) return null;
+  if (!raw.startsWith('/') || raw.startsWith('//') || raw.includes('..')) return null;
+  if (/[<>"'`\\\s]/.test(raw)) return null;
+  return raw;
+}
+
+/**
+ * State/region slug for /api/v1/events/state/{state}
+ * @param {unknown} state
+ */
+export function sanitizeStateParam(state) {
+  const text = toSafeText(state, '', MAX_STATE_LENGTH);
+  if (!text) return null;
+  const cleaned = text.replace(/[^a-zA-Z0-9\s.\-()&']/g, '').trim();
+  return cleaned || null;
+}
+
+/**
+ * @param {string} name
+ * @param {unknown} value
+ */
+export function isSafeAttribute(name, value) {
+  if (!name || FORBIDDEN_ATTR_PREFIX.test(name)) return false;
+  const lower = name.toLowerCase();
+  if (!SAFE_ATTR_NAMES.has(lower) && !lower.startsWith('aria-') && !lower.startsWith('data-')) {
+    return false;
+  }
+  if (lower === 'href' || lower === 'src') {
+    return safeUrl(value) !== null || String(value).startsWith('/');
+  }
+  if (lower === 'style') return false;
+  return true;
+}
+
+/**
+ * @param {Element} element
+ * @param {string} name
+ * @param {unknown} value
+ */
+export function setSafeAttribute(element, name, value) {
+  if (!element || !isSafeAttribute(name, value)) return;
+  const lower = name.toLowerCase();
+  if (lower === 'href' || lower === 'src') {
+    const url = safeUrl(value);
+    if (url) element.setAttribute(name, url);
+    else if (lower === 'src' && String(value).startsWith('/')) {
+      element.setAttribute(name, String(value).slice(0, 512));
+    }
+    return;
+  }
+  element.setAttribute(name, value === true ? '' : String(value));
+}
+
+export function isInteractiveInput(target) {
+  if (!(target instanceof Element)) return false;
+  const tag = target.tagName.toLowerCase();
+  return tag === 'input' || tag === 'textarea' || tag === 'select' || target.isContentEditable;
+}

frontend/contact.html

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
+  <meta name="referrer" content="strict-origin-when-cross-origin">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://ndg07-heatmap.hf.space; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests">
+  <style>
+    /* Custom spacing since global styles.css has limited utility classes */
+    .page-hero { padding-top: 80px; padding-bottom: 40px; }
+    .contact-grid { gap: 32px; display: grid; margin-top: 40px; margin-bottom: 60px; }
+    .contact-card { padding: 32px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
+    .faq-section { margin-top: 40px; margin-bottom: 80px; padding: 48px 32px; border-radius: 40px; }
+    
+    @media (min-width: 640px) {
+      .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    }
+    @media (min-width: 1024px) {
+      .contact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+      .page-hero { padding-top: 100px; padding-bottom: 60px; }
+    }
+  </style>
+  <title>Contact Us - Misinformation Heatmap</title>
+  <meta name="description"
+    content="Connect with the team behind Misinformation Heatmap for support, feedback, or collaborations.">
+  <link rel="icon" type="image/x-icon" href="/assets/Misinfo.ico">
+  <link rel="shortcut icon" type="image/x-icon" href="/assets/Misinfo.ico">
+  <link rel="manifest" href="/manifest.json">
+  <link rel="stylesheet" href="/assets/css/styles.css">
+  <script type="module" src="/assets/js/main.js"></script>
+</head>
+
+<body data-page="contact" class="min-h-screen overflow-x-hidden antialiased bg-slate-50">
+  <div data-navbar></div>
+
+  <main id="main-content" class="page-hero">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <!-- Hero Header -->
+      <header class="mx-auto max-w-3xl text-center">
+        <p class="mb-6 text-xs font-bold uppercase tracking-[0.2em] text-saffron-500">Connect with us</p>
+        <h1 class="text-4xl font-black tracking-tight text-slate-950 sm:text-5xl lg:text-6xl">
+          Get in <span class="text-ashoka-blue-500">touch</span>
+        </h1>
+        <p class="mt-8 text-lg leading-relaxed text-slate-600 sm:text-xl">
+          Need assistance or looking to partner? Reach out through any of our channels below. Our team is dedicated to verifying the digital landscape across India.
+        </p>
+      </header>
+
+      <!-- Contact Grid -->
+      <section class="contact-grid">
+        <!-- Email -->
+        <article class="contact-card rounded-2xl border border-slate-200 bg-white shadow-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
+          <div>
+            <div class="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-saffron-50 text-saffron-600">
+              <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+            </div>
+            <h2 class="text-xl font-black text-slate-950">Email Support</h2>
+            <p class="mt-2 text-sm text-slate-500 leading-relaxed">Fast response for all general inquiries.</p>
+          </div>
+          <div class="mt-8 pt-6 border-t border-slate-50">
+            <a href="mailto:nayandg8@gmail.com" class="text-sm font-bold text-saffron-600 hover:text-saffron-700">Send Email →</a>
+          </div>
+        </article>
+
+        <!-- LinkedIn -->
+        <article class="contact-card rounded-2xl border border-slate-200 bg-white shadow-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
+          <div>
+            <div class="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 text-blue-600">
+              <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+              </svg>
+            </div>
+            <h2 class="text-xl font-black text-slate-950">LinkedIn</h2>
+            <p class="mt-2 text-sm text-slate-500 leading-relaxed">Professional networking and updates.</p>
+          </div>
+          <div class="mt-8 pt-6 border-t border-slate-50">
+            <a href="https://linkedin.com/in/nayandeep-goswami-b92663329" target="_blank" rel="noopener noreferrer" class="text-sm font-bold text-blue-600 hover:text-blue-700">View Profile →</a>
+          </div>
+        </article>
+
+        <!-- Website -->
+        <article class="contact-card rounded-2xl border border-slate-200 bg-white shadow-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
+          <div>
+            <div class="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600">
+              <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+              </svg>
+            </div>
+            <h2 class="text-xl font-black text-slate-950">Official Site</h2>
+            <p class="mt-2 text-sm text-slate-500 leading-relaxed">Explore our research and case studies.</p>
+          </div>
+          <div class="mt-8 pt-6 border-t border-slate-50">
+            <a href="https://nayandeep.dev" target="_blank" rel="noopener noreferrer" class="text-sm font-bold text-emerald-600 hover:text-emerald-700">Visit Website →</a>
+          </div>
+        </article>
+
+        <!-- Instagram -->
+        <article class="contact-card rounded-2xl border border-slate-200 bg-white shadow-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
+          <div>
+            <div class="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 text-orange-600">
+              <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259 0.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
+              </svg>
+            </div>
+            <h2 class="text-xl font-black text-slate-950">Instagram</h2>
+            <p class="mt-2 text-sm text-slate-500 leading-relaxed">Behind the scenes and live signals.</p>
+          </div>
+          <div class="mt-8 pt-6 border-t border-slate-50">
+            <a href="https://instagram.com/nayan_dg" target="_blank" rel="noopener noreferrer" class="text-sm font-bold text-orange-600 hover:text-orange-700">Follow Us →</a>
+          </div>
+        </article>
+      </section>
+
+      <!-- FAQ Section -->
+      <section class="faq-section bg-slate-900 text-white shadow-2xl">
+        <div class="grid grid-cols-1 gap-16 lg:grid-cols-[1fr_1.4fr] lg:items-center">
+          <div class="text-center">
+            <h2 class="text-3xl font-black sm:text-4xl leading-tight">Common <br class="hidden lg:block">inquiries</h2>
+            <p class="mt-4 text-slate-400 text-sm mx-auto max-w-xs">Find quick answers to common partnership questions.</p>
+          </div>
+          
+          <div class="grid flex-1 gap-8 sm:grid-cols-2">
+            <article>
+              <h3 class="text-xs font-black uppercase tracking-widest text-saffron-500">Media & Press</h3>
+              <p class="mt-3 text-sm leading-relaxed text-slate-300">For press kits or interview requests regarding our signal monitoring, reach out via email.</p>
+            </article>
+            <article>
+              <h3 class="text-xs font-black uppercase tracking-widest text-india-green-500">Collaborations</h3>
+              <p class="mt-3 text-sm leading-relaxed text-slate-300">We are open to working with research institutions across India.</p>
+            </article>
+            <article>
+              <h3 class="text-xs font-black uppercase tracking-widest text-ashoka-blue-400">API Access</h3>
+              <p class="mt-3 text-sm leading-relaxed text-slate-300">Enterprise API access is available for verified government and educational entities.</p>
+            </article>
+            <article>
+              <h3 class="text-xs font-black uppercase tracking-widest text-slate-400">Support Hours</h3>
+              <p class="mt-3 text-sm leading-relaxed text-slate-300">Our core team monitors signals 24/7. General responses typically arrive within 24 hours.</p>
+            </article>
+          </div>
+        </div>
+      </section>
+    </div>
+  </main>
+
+  <footer class="border-t border-slate-200 bg-slate-950 pt-16 pb-32 text-white">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="grid grid-cols-1 gap-12 md:grid-cols-3">
+        <!-- Brand Section -->
+        <div class="max-w-xs">
+          <div class="flex items-center gap-2">
+            <div class="h-8 w-8 rounded-lg bg-gradient-to-tr from-saffron-500 via-white to-india-green-500 p-1">
+              <div class="h-full w-full rounded-md bg-slate-950 flex items-center justify-center">
+                <span class="text-[10px] font-black">MH</span>
+              </div>
+            </div>
+            <span class="text-lg font-black tracking-tight">Misinfo<span class="text-saffron-500">Heatmap</span></span>
+          </div>
+          <p class="mt-6 text-sm leading-7 text-slate-400">
+            Advanced AI-powered platform for real-time misinformation detection and verification across India's digital
+            landscape.
+          </p>
+          <div class="mt-6 flex items-center gap-4">
+            <span class="inline-flex items-center gap-1.5 rounded-full bg-white/5 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-slate-300 border border-white/10">
+              <span class="h-1.5 w-1.5 rounded-full bg-saffron-500"></span>
+              Monitored in India
+            </span>
+          </div>
+        </div>
+
+        <!-- Platform Links -->
+        <div>
+          <h3 class="text-sm font-bold uppercase tracking-widest text-saffron-500">Platform</h3>
+          <ul class="mt-6 space-y-4 text-sm text-slate-400">
+            <li><a href="/heatmap.html" class="transition hover:text-white">Live Heatmap</a></li>
+            <li><a href="/dashboard.html" class="transition hover:text-white">Intelligence Dashboard</a></li>
+          </ul>
+        </div>
+
+        <!-- Support -->
+        <div>
+          <h3 class="text-sm font-bold uppercase tracking-widest text-ashoka-blue-400">Support</h3>
+          <ul class="mt-6 space-y-4 text-sm text-slate-400">
+            <li><a href="/contact.html" class="transition hover:text-white font-bold text-slate-300">Contact Us</a></li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- Bottom Bar -->
+      <div class="mt-16 border-t border-white/5 pt-8">
+        <div class="flex flex-col items-center justify-between gap-6 md:flex-row">
+          <p class="text-xs text-slate-500">© 2026 Misinformation Heatmap.</p>
+          <div class="flex items-center gap-6">
+            <a href="/privacy-policy.html" class="text-xs text-slate-500 hover:text-white transition">Privacy Policy</a>
+            <div class="h-1 w-24 rounded-full bg-gradient-to-r from-saffron-500 via-white to-india-green-500 opacity-30"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+</body>
+
+</html>

frontend/dashboard.html

@@ -1,750 +1,488 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dashboard — Misinformation Heatmap</title>
-    <meta name="description" content="Real-time analytics dashboard for misinformation detection across India.">
-    <link rel="icon" type="image/x-icon" href="/public/Misinfo.ico">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --saffron:       #E87722;
-            --saffron-light: #FF9933;
-            --saffron-dark:  #c4601a;
-            --green:         #138808;
-            --green-light:   #1ea50e;
-            --navy:          #000080;
-            --red:           #dc2626;
-            --amber:         #d97706;
-            --blue:          #2563eb;
-            --bg:            #F8F8F4;
-            --bg-card:       #FFFFFF;
-            --border:        #E8E8E0;
-            --border-accent: rgba(232,119,34,0.25);
-            --text-primary:  #1A1A1A;
-            --text-secondary:#555555;
-            --text-muted:    #888888;
-            --shadow-sm:     0 2px 8px rgba(0,0,0,0.07);
-            --shadow-md:     0 4px 20px rgba(0,0,0,0.10);
-            --radius:        16px;
-            --radius-sm:     10px;
-        }
-
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-
-        body {
-            font-family: 'Inter', sans-serif;
-            background: var(--bg);
-            color: var(--text-primary);
-            min-height: 100vh;
-            overflow-x: hidden;
-            max-width: 100vw;
-        }
-
-        /* ─── BACKGROUND ─── */
-        .bg-blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
-        .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.12; }
-        .blob-1 { width: 600px; height: 600px; top: -150px; left: -100px; background: var(--saffron-light); }
-        .blob-2 { width: 500px; height: 500px; bottom: -100px; right: -100px; background: var(--green-light); }
-
-        /* ─── NAVBAR ─── */
-        .navbar {
-            position: sticky; top: 0; z-index: 100;
-            height: 60px; display: flex; align-items: center; padding: 0 2rem;
-            background: rgba(248,248,244,0.9); backdrop-filter: blur(20px);
-            border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
-        }
-        .nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
-        .logo { display: flex; align-items: center; gap: 4px; font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 800; text-decoration: none; color: var(--text-primary); }
-        .logo-badge { font-size: 0.6rem; font-weight: 700; background: var(--saffron); color: #fff; padding: 2px 5px; border-radius: 3px; }
-        .logo .logo-name { color: var(--saffron); }
-        .nav-links { display: flex; gap: 0.25rem; }
-        .nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.85rem; font-weight: 500; padding: 0.4rem 0.9rem; border-radius: var(--radius-sm); transition: all 0.2s; }
-        .nav-link:hover { color: var(--saffron); background: rgba(232,119,34,0.07); }
-        .nav-link.active { color: var(--saffron); background: rgba(232,119,34,0.1); border: 1px solid rgba(232,119,34,0.2); font-weight: 600; }
-        .nav-right { display: flex; align-items: center; gap: 0.75rem; }
-        .status-pill { display: flex; align-items: center; gap: 6px; background: rgba(19,136,8,0.08); border: 1px solid rgba(19,136,8,0.25); border-radius: 20px; padding: 4px 12px; font-size: 0.78rem; font-weight: 600; color: var(--green); }
-        .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
-        @keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(19,136,8,0.4);}50%{opacity:0.8;box-shadow:0 0 0 5px rgba(19,136,8,0);} }
-        .refresh-btn { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); padding: 5px 14px; border-radius: var(--radius-sm); font-size: 0.8rem; cursor: pointer; transition: all 0.2s; font-family: 'Inter', sans-serif; }
-        .refresh-btn:hover { border-color: var(--saffron); color: var(--saffron); }
-
-        /* Hamburger Menu */
-        .hamburger-btn {
-            display: none;
-            flex-direction: column;
-            gap: 5px;
-            background: none;
-            border: none;
-            cursor: pointer;
-            padding: 8px;
-            z-index: 2000;
-        }
-        .hamburger-line {
-            width: 24px;
-            height: 2px;
-            background: var(--text-primary);
-            transition: all 0.3s ease;
-            border-radius: 2px;
-        }
-        .hamburger-btn.active .hamburger-line:nth-child(1) {
-            transform: rotate(45deg) translate(5px, 5px);
-        }
-        .hamburger-btn.active .hamburger-line:nth-child(2) {
-            opacity: 0;
-        }
-        .hamburger-btn.active .hamburger-line:nth-child(3) {
-            transform: rotate(-45deg) translate(5px, -5px);
-        }
-
-        /* Mobile Menu Overlay */
-        .mobile-menu-overlay {
-            position: fixed;
-            top: 0;
-            right: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, rgba(255, 153, 51, 0.98), rgba(232, 119, 34, 0.95));
-            z-index: 1500;
-            transform: translateX(100%);
-            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            padding: 80px 2rem 2rem;
-        }
-        .mobile-menu-overlay.active {
-            transform: translateX(0);
-        }
-        .mobile-menu-top {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
-        .mobile-menu-link {
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: #fff;
-            text-decoration: none;
-            padding: 1rem 0;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-            transition: all 0.3s ease;
-        }
-        .mobile-menu-link:hover {
-            padding-left: 1rem;
-            background: rgba(255, 255, 255, 0.1);
-        }
-        .mobile-menu-bottom {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-            padding-top: 2rem;
-            border-top: 1px solid rgba(255, 255, 255, 0.2);
-        }
-        .mobile-menu-brand {
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.2rem;
-            font-weight: 800;
-            color: #fff;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .mobile-menu-brand .logo-badge {
-            background: #fff;
-            color: var(--saffron);
-        }
-        .mobile-menu-brand .logo-name {
-            color: #fff;
-        }
-        .mobile-menu-tags {
-            display: flex;
-            gap: 8px;
-            flex-wrap: wrap;
-        }
-        .menu-tag {
-            font-size: 0.7rem;
-            font-weight: 700;
-            padding: 4px 10px;
-            border-radius: 12px;
-            text-transform: uppercase;
-        }
-        .menu-tag.alpha {
-            background: rgba(255, 255, 255, 0.2);
-            color: #fff;
-        }
-        .menu-tag.live {
-            background: #fff;
-            color: var(--green);
-            animation: pulse 2s infinite;
-        }
 
-        /* ─── MAIN LAYOUT ─── */
-        .main { position: relative; z-index: 1; padding: 2rem; max-width: 1400px; margin: 0 auto; }
-        .page-header { margin-bottom: 2rem; }
-        .page-title { font-family: 'Outfit', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--text-primary); }
-        .page-sub { color: var(--text-muted); font-size: 0.88rem; margin-top: 4px; }
-        .last-updated { color: var(--text-muted); font-size: 0.78rem; margin-top: 2px; }
-
-        /* ─── STAT CARDS ─── */
-        .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; margin-bottom: 2rem; }
-        .stat-card {
-            background: var(--bg-card); border: 1px solid var(--border);
-            border-radius: var(--radius); padding: 1.5rem; position: relative;
-            overflow: hidden; transition: all 0.25s; box-shadow: var(--shadow-sm);
-        }
-        .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
-        .stat-card.total::before  { background: var(--blue); }
-        .stat-card.fake::before   { background: var(--red); }
-        .stat-card.real::before   { background: var(--green); }
-        .stat-card.uncertain::before { background: var(--amber); }
-        .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
-        .stat-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
-        .stat-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); }
-        .stat-icon { font-size: 1.4rem; }
-        .stat-value { font-family: 'Outfit', sans-serif; font-size: 2.4rem; font-weight: 900; line-height: 1; }
-        .stat-card.total  .stat-value { color: var(--blue); }
-        .stat-card.fake   .stat-value { color: var(--red); }
-        .stat-card.real   .stat-value { color: var(--green); }
-        .stat-card.uncertain .stat-value { color: var(--amber); }
-        .stat-desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; }
-        .stat-bar { height: 3px; background: var(--border); border-radius: 2px; margin-top: 1rem; overflow: hidden; }
-        .stat-bar-fill { height: 100%; border-radius: 2px; transition: width 1s ease; width: 0; }
-        .stat-card.total  .stat-bar-fill { background: var(--blue); }
-        .stat-card.fake   .stat-bar-fill { background: var(--red); }
-        .stat-card.real   .stat-bar-fill { background: var(--green); }
-        .stat-card.uncertain .stat-bar-fill { background: var(--amber); }
-
-        /* ─── GRID ROWS ─── */
-        .row { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
-        .row-2 { grid-template-columns: 1fr 1.6fr; }
-        .row-2b { grid-template-columns: 1.6fr 1fr; }
-        .row-3 { grid-template-columns: 1fr 1fr 1fr; }
-
-        .panel {
-            background: var(--bg-card); border: 1px solid var(--border);
-            border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
-            display: flex; flex-direction: column;
-        }
-        .panel-header {
-            display: flex; align-items: center; justify-content: space-between;
-            padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
-        }
-        .panel-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
-        .panel-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
-        .panel-badge { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); padding: 3px 10px; border-radius: 10px; }
-        .panel-body { padding: 1.5rem; flex: 1; }
-
-        /* ─── ACCURACY RING ─── */
-        .accuracy-center { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem 0; }
-        .ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
-        .ring-label { position: absolute; text-align: center; }
-        .ring-pct { font-family: 'Outfit', sans-serif; font-size: 2.2rem; font-weight: 900; color: var(--green); line-height: 1; }
-        .ring-sub { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
-
-        .metric-bar-row { display: flex; align-items: center; justify-content: space-around; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
-        .metric-bar-item { text-align: center; }
-        .mbi-val { font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 800; }
-        .mbi-lbl { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
-
-        /* ─── ACTIVITY FEED ─── */
-        .activity-feed { overflow-y: auto; max-height: 320px; display: flex; flex-direction: column; gap: 0.6rem; }
-        .activity-feed::-webkit-scrollbar { width: 4px; }
-        .activity-feed::-webkit-scrollbar-track { background: var(--bg); }
-        .activity-feed::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
-        .activity-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); transition: all 0.2s; }
-        .activity-item:hover { border-color: var(--border-accent); background: rgba(232,119,34,0.02); }
-        .activity-dot { font-size: 1.1rem; flex-shrink: 0; }
-        .activity-info { flex: 1; min-width: 0; }
-        .activity-title { font-size: 0.83rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-        .activity-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 3px; font-size: 0.72rem; color: var(--text-muted); }
-        .activity-tag { font-weight: 700; padding: 1px 6px; border-radius: 4px; font-size: 0.65rem; }
-        .activity-tag.fake { background: rgba(220,38,38,0.1); color: var(--red); }
-        .activity-tag.real { background: rgba(19,136,8,0.1); color: var(--green); }
-        .activity-tag.uncertain { background: rgba(217,119,6,0.1); color: var(--amber); }
-        .feed-count { font-size: 0.78rem; color: var(--text-muted); }
-
-        /* ─── COVERAGE ─── */
-        .coverage-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
-        .cov-item { text-align: center; padding: 1rem; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--border); }
-        .cov-val { font-family: 'Outfit', sans-serif; font-size: 1.8rem; font-weight: 900; color: var(--saffron); }
-        .cov-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
-
-        /* ─── HEALTH METRICS ─── */
-        .metric-row { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
-        .metric-row:last-child { border-bottom: none; }
-        .metric-name { font-size: 0.85rem; color: var(--text-secondary); }
-        .metric-badge { font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 10px; }
-        .metric-badge.green { background: rgba(19,136,8,0.1); color: var(--green); }
-        .metric-badge.amber { background: rgba(217,119,6,0.1); color: var(--amber); }
-        .metric-badge.red { background: rgba(220,38,38,0.1); color: var(--red); }
-
-        /* ─── MAP LINK ─── */
-        .map-link { display: inline-flex; align-items: center; gap: 6px; background: var(--saffron); color: #fff; font-size: 0.82rem; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-sm); text-decoration: none; transition: all 0.2s; }
-        .map-link:hover { background: var(--saffron-dark); }
-
-        .empty-feed { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.88rem; }
-        .empty-icon { font-size: 2rem; margin-bottom: 8px; }
-
-        /* Enhanced Mobile Responsiveness */
-        @media (max-width: 1200px) {
-            .navbar { padding: 0 1rem; }
-            .main { padding: 1.5rem; }
-            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
-            .row-2, .row-2b { grid-template-columns: 1fr; gap: 1rem; }
-            .coverage-grid { grid-template-columns: repeat(2, 1fr); }
-        }
-        
-        @media (max-width: 1024px) {
-            .nav-links { gap: 0.5rem; }
-            .nav-link { font-size: 0.8rem; padding: 0.3rem 0.7rem; }
-            .row-2, .row-2b { grid-template-columns: 1fr; }
-            .coverage-grid { grid-template-columns: 1fr; }
-        }
-        
-        @media (max-width: 768px) {
-            .navbar { padding: 0 1rem; height: auto; }
-            .nav-inner { flex-direction: column; gap: 0.75rem; padding: 0.75rem 0; }
-            .nav-links { order: 2; }
-            .nav-right { order: 1; }
-            .main { padding: 1rem; }
-            .page-header { margin-bottom: 1.5rem; }
-            .page-title { font-size: 1.5rem; }
-            .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
-            .stat-card { padding: 1.25rem; }
-            .stat-value { font-size: 2rem; }
-            .row-3 { grid-template-columns: 1fr; }
-            .panel-header { padding: 1rem; }
-            .panel-body { padding: 1rem; }
-            .activity-feed { max-height: 250px; }
-            .coverage-grid { grid-template-columns: 1fr; gap: 0.75rem; }
-            .cov-item { padding: 0.75rem; }
-            .metric-row { padding: 0.5rem 0; font-size: 0.8rem; }
-        }
-        
-        @media (max-width: 480px) {
-            .navbar { padding: 0 0.75rem; }
-            .logo { font-size: 0.9rem; }
-            .logo-badge { font-size: 0.55rem; }
-            .nav-inner { padding: 0.5rem 0; }
-            .nav-link { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
-            .refresh-btn { font-size: 0.7rem; padding: 4px 10px; }
-            .status-pill { display: none; }
-            .hamburger-btn { display: flex; }
-            .main { padding: 0.75rem; }
-            .page-title { font-size: 1.3rem; }
-            .page-sub { font-size: 0.8rem; }
-            .stats-grid { grid-template-columns: 1fr; gap: 0.5rem; }
-            .stat-card { padding: 1rem; }
-            .stat-value { font-size: 1.8rem; }
-            .stat-label { font-size: 0.65rem; }
-            .stat-desc { font-size: 0.7rem; }
-            .panel-header { padding: 0.75rem; }
-            .panel-title { font-size: 0.85rem; }
-            .panel-sub { font-size: 0.75rem; }
-            .panel-body { padding: 0.75rem; }
-            .activity-feed { max-height: 200px; gap: 0.4rem; }
-            .activity-item { padding: 0.5rem; }
-            .activity-title { font-size: 0.75rem; }
-            .activity-meta { font-size: 0.65rem; }
-            .coverage-grid { grid-template-columns: 1fr; gap: 0.5rem; }
-            .cov-item { padding: 0.5rem; }
-            .cov-val { font-size: 1.5rem; }
-            .cov-label { font-size: 0.7rem; }
-            .metric-row { padding: 0.4rem 0; font-size: 0.75rem; }
-            .metric-name { font-size: 0.75rem; }
-            .metric-badge { font-size: 0.65rem; padding: 2px 6px; }
-        }
-    </style>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
+  <meta name="referrer" content="strict-origin-when-cross-origin">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://ndg07-heatmap.hf.space; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests">
+  <style>
+    html, body { overflow-x: hidden; width: 100%; position: relative; }
+
+    /* Surface Pro 7 Specific Enhancements */
+    @media screen and (device-width: 912px) and (device-height: 1368px),
+    screen and (device-width: 912px) and (device-height: 608px) {
+      html {
+        font-size: 18px !important;
+      }
+    }
+
+    /* Specific scaling for Nest Hub Max (1280x800) - More breathing room */
+    @media screen and (device-width: 1280px) and (device-height: 800px) {
+      body #main-content {
+        padding-top: 6rem !important;
+        padding-bottom: 1.5rem !important;
+        min-height: calc(100vh - 1rem) !important;
+      }
+    }
+
+    @media screen and (device-width: 912px) and (device-height: 1368px),
+    screen and (device-width: 912px) and (device-height: 608px) {
+      h1 { font-size: 3.5rem !important; line-height: 1.1 !important; }
+      .text-2xl { font-size: 2rem !important; }
+      .text-sm { font-size: 1.05rem !important; line-height: 1.6 !important; }
+      .text-xs { font-size: 0.9rem !important; letter-spacing: 0.25em !important; }
+      
+      #main-content { padding-top: 9rem !important; }
+      
+      /* Card/Island Scaling for Pro 7 */
+      #island-toggle {
+        width: 85vw !important;
+        height: 70vh !important;
+        max-width: 1000px !important;
+        max-height: 900px !important;
+      }
+
+      /* Animation Overrides for Pro 7 (Less extreme surge) */
+      #dashboard-health-overlay.active #island-toggle {
+        animation: fadeInUpPro 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      #dashboard-health-overlay.closing #island-toggle {
+        animation: fadeOutDownPro 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+
+      @keyframes fadeInUpPro {
+        0% { opacity: 0; transform: translateY(500px) scale(0.4); border-radius: 10rem; }
+        70% { opacity: 1; transform: translateY(-15px) scale(1.01); }
+        100% { opacity: 1; transform: translateY(0) scale(1); border-radius: 2.5rem; }
+      }
+      @keyframes fadeOutDownPro {
+        0% { opacity: 1; transform: translateY(0) scale(1); border-radius: 2.5rem; }
+        100% { opacity: 0; transform: translateY(500px) scale(0.4); border-radius: 10rem; }
+      }
+
+      /* Pill Scaling for Pro 7 */
+      #bottom-premium-nav {
+        bottom: 3rem !important;
+        gap: 1.25rem !important;
+        padding: 0.75rem !important;
+        border-width: 2px !important;
+      }
+      #bottom-premium-nav a, #bottom-premium-nav button {
+        height: 3.75rem !important;
+        width: 3.75rem !important;
+      }
+      #bottom-premium-nav a.w-20, #bottom-premium-nav button.w-20 {
+        width: 6rem !important;
+      }
+      #bottom-premium-nav svg {
+        width: 1.75rem !important;
+        height: 1.75rem !important;
+      }
+      
+      [data-desktop-nav] {
+        display: flex !important;
+      }
+      
+      #menu-toggle {
+        display: none !important;
+      }
+      
+      #bottom-premium-nav {
+        display: none !important;
+      }
+    }
+  </style>
+  <title>Dashboard - Misinformation Heatmap</title>
+  <meta name="description"
+    content="Real-time analytics dashboard for misinformation detection, verification status, system health, and live news classifications across India.">
+  <link rel="icon" type="image/x-icon" href="/assets/Misinfo.ico">
+  <link rel="shortcut icon" type="image/x-icon" href="/assets/Misinfo.ico">
+  <link rel="manifest" href="/manifest.json">
+  <link rel="stylesheet" href="/assets/css/styles.css">
+  <script type="module" src="/assets/js/main.js"></script>
 </head>
-<body>
-    <div class="bg-blobs">
-        <div class="blob blob-1"></div>
-        <div class="blob blob-2"></div>
-    </div>
 
-    <!-- Navbar -->
-    <nav class="navbar">
-        <div class="nav-inner">
-            <a href="/" class="logo">
-                <span class="logo-badge">IN</span>
-                <span>Misinformation</span><span class="logo-name">&nbsp;Heatmap</span>
-            </a>
-            <div class="nav-links">
-                <a href="/" class="nav-link">Home</a>
-                <a href="/dashboard" class="nav-link active">Dashboard</a>
-                <a href="/map/enhanced-india-heatmap.html" class="nav-link">Heatmap</a>
-            </div>
-            <div class="nav-right">
-                <div class="status-pill">
-                    <span class="status-dot"></span>
-                    <span id="system-status">Connecting…</span>
-                </div>
-                <button class="refresh-btn" onclick="refreshAll()">↻ Refresh</button>
-                <button class="hamburger-btn" id="hamburger-btn" aria-label="Toggle menu">
-                    <span class="hamburger-line"></span>
-                    <span class="hamburger-line"></span>
-                    <span class="hamburger-line"></span>
-                </button>
-            </div>
+<body data-page="dashboard"
+  class="min-h-screen overflow-x-hidden text-slate-950 antialiased relative">
+  <div class="fixed inset-0 -z-10 bg-[linear-gradient(135deg,rgba(255,153,51,0.08)_0%,rgba(255,255,255,1)_50%,rgba(19,136,8,0.08)_100%)] animate-premium-fade"></div>
+  <a class="absolute w-[1px] h-[1px] p-0 m-[-1px] overflow-hidden clip-[rect(0,0,0,0)] whitespace-nowrap border-0 focus:static focus:w-auto focus:h-auto focus:p-0 focus:m-0 focus:overflow-visible focus:clip-auto focus:whitespace-normal focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-lg focus:bg-slate-950 focus:px-4 focus:py-2 focus:text-sm focus:font-bold focus:text-white focus:shadow-lg"
+    href="#main-content">Skip to content</a>
+  <div data-navbar></div>
+
+  <main id="main-content" class="mx-auto w-full max-w-7xl px-4 pt-24 pb-32 sm:px-6 sm:pt-28 sm:pb-32 lg:px-8">
+    <section class="mb-6 rounded-2xl border border-slate-200 bg-white/80 p-5 shadow-premium backdrop-blur-md sm:p-6 lg:p-8">
+      <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between lg:gap-8">
+        <div class="min-w-0 flex-1">
+          <p class="text-xs font-black text-saffron-500">Real-Time Analytics</p>
+          <h1 class="mt-1 text-2xl font-black tracking-tight text-slate-950 sm:text-3xl lg:text-4xl leading-tight">
+            System <span class="text-ashoka-blue-500">Overview</span>
+          </h1>
+          <p class="mt-4 max-w-2xl text-sm leading-6 text-slate-600 sm:text-base">Comprehensive misinformation detection metrics across India</p>
+          <p class="mt-2 text-xs font-medium text-slate-500" id="dashboard-last-updated" aria-live="polite">Waiting for
+            the first update</p>
         </div>
-    </nav>
 
-    <!-- Mobile Menu Overlay -->
-    <div class="mobile-menu-overlay" id="mobile-menu">
-        <div class="mobile-menu-top">
-            <a href="/" class="mobile-menu-link">Home</a>
-            <a href="/dashboard" class="mobile-menu-link">Dashboard</a>
-            <a href="/map/enhanced-india-heatmap.html" class="mobile-menu-link">Heatmap</a>
+        <div class="flex shrink-0 flex-col gap-2">
+          <!-- Desktop Buttons -->
+          <div class="hidden lg:flex flex-col gap-2">
+            <button
+              class="inline-flex min-h-11 w-48 items-center justify-center rounded-lg bg-slate-950 px-6 py-2.5 text-sm font-bold text-white shadow-card transition hover:-translate-y-0.5 hover:bg-slate-800"
+              type="button" id="dashboard-refresh">Refresh now</button>
+            <a href="/heatmap.html"
+              class="inline-flex min-h-11 w-48 items-center justify-center rounded-lg border border-slate-200 bg-white px-5 py-2.5 text-sm font-bold text-slate-800 shadow-card transition hover:-translate-y-0.5 hover:border-saffron-300 hover:bg-saffron-50">View
+              heatmap</a>
+          </div>
+          <!-- Mobile Buttons -->
+          <div class="flex flex-col gap-2 lg:hidden">
+            <button
+              class="inline-flex min-h-11 items-center justify-center rounded-lg bg-slate-950 px-4 py-2.5 text-sm font-bold text-white shadow-card transition hover:-translate-y-0.5 hover:bg-slate-800"
+              type="button" id="dashboard-refresh-mobile">Refresh</button>
+            <a href="/heatmap.html"
+              class="inline-flex min-h-11 items-center justify-center rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm font-bold text-slate-800 shadow-card transition hover:-translate-y-0.5">View
+              heatmap</a>
+          </div>
         </div>
-        <div class="mobile-menu-bottom">
-            <div class="mobile-menu-brand">
-                <span class="logo-badge">IN</span>
-                <span>Misinformation</span><span class="logo-name">&nbsp;Heatmap</span>
-            </div>
-            <div class="mobile-menu-tags">
-                <span class="menu-tag alpha">Alpha v1.0</span>
-                <span class="menu-tag live">● Live</span>
+      </div>
+    </section>
+
+    <section class="mb-8 grid grid-cols-2 gap-4 md:grid-cols-4 sm:gap-6 lg:gap-8" aria-label="Dashboard statistics">
+      <article
+        class="min-w-0 rounded-xl border border-t-4 border-slate-200 border-t-blue-600 bg-white p-3.5 shadow-card sm:p-5 lg:p-6 transition-all duration-300 hover:shadow-lg">
+        <div class="flex flex-wrap items-start justify-between gap-2">
+          <p class="text-[10px] font-black uppercase tracking-wider text-slate-500 sm:text-xs lg:text-sm">Total Events</p>
+          <span class="rounded-full bg-blue-50 px-2 py-0.5 text-[10px] font-black text-blue-700 sm:text-xs lg:text-sm">All</span>
+        </div>
+        <p class="mt-3 text-xl font-black leading-none text-blue-700 sm:mt-4 sm:text-2xl lg:text-3xl xl:text-4xl" id="dashboard-total-events"
+          aria-live="polite">--</p>
+        <p class="mt-1.5 text-[10px] font-medium text-slate-500 sm:text-sm">Processed live</p>
+        <div class="mt-3 h-1.5 overflow-hidden rounded-full bg-slate-200 sm:mt-4 sm:h-2"><span
+            class="block h-full w-0 rounded-full bg-blue-600 transition-[width] duration-500 ease-out"
+            id="dashboard-total-bar"></span></div>
+      </article>
+
+      <article
+        class="min-w-0 rounded-xl border border-t-4 border-slate-200 border-t-red-500 bg-white p-3.5 shadow-card sm:p-5 lg:p-6 transition-all duration-300 hover:shadow-lg">
+        <div class="flex flex-wrap items-start justify-between gap-2">
+          <p class="text-[10px] font-black uppercase tracking-wider text-slate-500 sm:text-xs lg:text-sm">Misinformation</p>
+          <span class="rounded-full bg-red-50 px-2 py-0.5 text-[10px] font-black text-red-700 sm:text-xs lg:text-sm">Risk</span>
+        </div>
+        <p class="mt-3 text-xl font-black leading-none text-red-700 sm:mt-4 sm:text-2xl lg:text-3xl xl:text-4xl" id="dashboard-fake-events"
+          aria-live="polite">--</p>
+        <p class="mt-1.5 text-[10px] font-medium text-slate-500 sm:text-sm">High-confidence</p>
+        <div class="mt-3 h-1.5 overflow-hidden rounded-full bg-slate-200 sm:mt-4 sm:h-2"><span
+            class="block h-full w-0 rounded-full bg-red-500 transition-[width] duration-500 ease-out"
+            id="dashboard-fake-bar"></span></div>
+      </article>
+
+      <article
+        class="min-w-0 rounded-xl border border-t-4 border-slate-200 border-t-emerald-600 bg-white p-3.5 shadow-card sm:p-5 lg:p-6 transition-all duration-300 hover:shadow-lg">
+        <div class="flex flex-wrap items-start justify-between gap-2">
+          <p class="text-[10px] font-black uppercase tracking-wider text-slate-500 sm:text-xs lg:text-sm">Verified News</p>
+          <span class="rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-black text-emerald-700 sm:text-xs lg:text-sm">Clear</span>
+        </div>
+        <p class="mt-3 text-xl font-black leading-none text-emerald-700 sm:mt-4 sm:text-2xl lg:text-3xl xl:text-4xl" id="dashboard-real-events"
+          aria-live="polite">--</p>
+        <p class="mt-1.5 text-[10px] font-medium text-slate-500 sm:text-sm">Authenticated</p>
+        <div class="mt-3 h-1.5 overflow-hidden rounded-full bg-slate-200 sm:mt-4 sm:h-2"><span
+            class="block h-full w-0 rounded-full bg-emerald-600 transition-[width] duration-500 ease-out"
+            id="dashboard-real-bar"></span></div>
+      </article>
+
+      <article
+        class="min-w-0 rounded-xl border border-t-4 border-slate-200 border-t-amber-500 bg-white p-3.5 shadow-card sm:p-5 lg:p-6 transition-all duration-300 hover:shadow-lg">
+        <div class="flex flex-wrap items-start justify-between gap-2">
+          <p class="text-[10px] font-black uppercase tracking-wider text-slate-500 sm:text-xs lg:text-sm">Under Review</p>
+          <span class="rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-black text-amber-700 sm:text-xs lg:text-sm">Pending</span>
+        </div>
+        <p class="mt-3 text-xl font-black leading-none text-amber-600 sm:mt-4 sm:text-2xl lg:text-3xl xl:text-4xl" id="dashboard-under-review-events"
+          aria-live="polite">--</p>
+        <p class="mt-1.5 text-[10px] font-medium text-slate-500 sm:text-sm">Requires verification</p>
+        <div class="mt-3 h-1.5 overflow-hidden rounded-full bg-slate-200 sm:mt-4 sm:h-2"><span
+            class="block h-full w-0 rounded-full bg-amber-500 transition-[width] duration-500 ease-out"
+            id="dashboard-under-review-bar"></span></div>
+      </article>
+    </section>
+
+    <section class="grid gap-6 lg:grid-cols-[1fr_1.4fr] xl:grid-cols-[0.9fr_1.1fr]">
+      <article class="relative overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-card flex flex-col justify-between">
+        <div class="flex items-start justify-between gap-4 border-b border-slate-100 px-6 py-4">
+          <div class="min-w-0">
+            <p class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500">Model accuracy</p>
+            <h2 class="mt-1 text-lg font-black text-slate-950">AI Precision</h2>
+          </div>
+          <span class="shrink-0 rounded-full bg-emerald-50 px-3 py-1 text-[10px] font-black text-emerald-700" id="dashboard-accuracy-badge">Healthy</span>
+        </div>
+        
+        <div class="p-6 pb-4 flex-1 flex flex-col items-center justify-center">
+          <div class="relative flex h-40 w-40 items-center justify-center">
+            <!-- Background Ring -->
+            <svg class="absolute h-full w-full -rotate-90" viewBox="0 0 180 180">
+              <circle cx="90" cy="90" r="74" fill="none" stroke="#f1f5f9" stroke-width="14"></circle>
+            </svg>
+            <!-- Progress Ring -->
+            <svg class="absolute h-full w-full -rotate-90" viewBox="0 0 180 180" role="img">
+              <defs>
+                <linearGradient id="accuracy-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" stop-color="#138808" />
+                  <stop offset="100%" stop-color="#22c55e" />
+                </linearGradient>
+                <filter id="glow">
+                  <feGaussianBlur stdDeviation="3" result="blur" />
+                  <feComposite in="SourceGraphic" in2="blur" operator="over" />
+                </filter>
+              </defs>
+              <circle id="dashboard-accuracy-ring" cx="90" cy="90" r="74" fill="none" stroke="url(#accuracy-gradient)"
+                stroke-width="14" stroke-linecap="round" stroke-dasharray="465" stroke-dashoffset="465"
+                class="transition-all duration-1000 ease-out" filter="url(#glow)">
+              </circle>
+            </svg>
+            <div class="relative text-center animate-fade-in flex flex-col items-center">
+              <p class="text-4xl font-black tracking-tighter text-emerald-600" id="dashboard-accuracy-pct">--</p>
+              <p class="mt-1 text-[10px] font-medium text-slate-400">Overall Accuracy</p>
             </div>
+          </div>
         </div>
-    </div>
-
-    <div class="main">
-        <!-- Header -->
-        <div class="page-header">
-            <div class="page-title">Real-Time Analytics</div>
-            <div class="page-sub">Comprehensive misinformation detection metrics across India</div>
-            <div class="last-updated" id="last-updated">Fetching data…</div>
+        
+        <dl class="grid grid-cols-3 gap-0 divide-x divide-slate-100 border-t border-slate-100 bg-slate-50/50 py-4">
+          <div class="px-2 text-center flex flex-col items-center">
+            <dd class="text-2xl font-black tracking-tight text-blue-600" id="dashboard-precision">--</dd>
+            <dt class="mt-1 text-xs font-medium text-slate-500">Precision</dt>
+          </div>
+          <div class="px-2 text-center flex flex-col items-center">
+            <dd class="text-2xl font-black tracking-tight text-emerald-600" id="dashboard-recall">--</dd>
+            <dt class="mt-1 text-xs font-medium text-slate-500">Recall</dt>
+          </div>
+          <div class="px-2 text-center flex flex-col items-center">
+            <dd class="text-2xl font-black tracking-tight text-saffron-600" id="dashboard-f1">--</dd>
+            <dt class="mt-1 text-xs font-medium text-slate-500">F1-Score</dt>
+          </div>
+        </dl>
+      </article>
+
+      <article
+        class="min-h-[22rem] overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-card">
+        <div class="flex items-center justify-between border-b border-slate-100 px-6 py-4">
+          <div class="min-w-0">
+            <p class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500">Live activity</p>
+            <h2 class="mt-1 text-lg font-black text-slate-950">Recent feed</h2>
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="h-2 w-2 animate-pulse rounded-full bg-red-500"></span>
+            <span
+              class="text-[10px] font-black uppercase tracking-wider text-slate-500"
+              id="dashboard-events-count">Loading</span>
+          </div>
         </div>
-
-        <!-- Stat Cards -->
-        <div class="stats-grid">
-            <div class="stat-card total">
-                <div class="stat-header">
-                    <div class="stat-label">Total Events</div>
-                    <div class="stat-icon">📊</div>
-                </div>
-                <div class="stat-value" id="total-events">—</div>
-                <div class="stat-desc">Processed in real-time</div>
-                <div class="stat-bar"><div class="stat-bar-fill" id="bar-total"></div></div>
+        <div class="p-5">
+          <div class="flex max-h-[20rem] min-h-[16rem] flex-col gap-4 overflow-y-auto pt-1.5 pr-2 custom-scrollbar" id="dashboard-activity-feed"
+            aria-live="polite">
+            <article class="flex min-w-0 gap-4 rounded-xl border border-slate-100 bg-slate-50/50 p-4">
+              <div class="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-slate-200"></div>
+              <div class="min-w-0 flex-1">
+                <div class="h-4 w-full animate-pulse rounded bg-slate-200"></div>
+                <div class="mt-3 h-4 w-2/3 animate-pulse rounded bg-slate-200"></div>
+              </div>
+            </article>
+          </div>
+        </div>
+      </article>
+    </section>
+
+    <!-- Dynamic System Island - Expanded View Only -->
+    <div id="dashboard-health-overlay" class="fixed inset-0 z-[100] hidden items-center justify-center bg-slate-950/40 backdrop-blur-sm">
+      <div id="island-toggle" class="group relative flex flex-col overflow-hidden rounded-[2.5rem] bg-white text-slate-950 border border-slate-200 shadow-premium w-[90vw] max-w-[950px] h-[80vh] max-h-[700px]">
+        <div id="island-expanded" class="flex w-full h-full flex-col p-6 sm:p-8 text-left">
+          <header class="flex items-center justify-between border-b border-slate-100 pb-6">
+            <div>
+              <p class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500">Real-time monitoring</p>
+              <h3 class="mt-1 text-xl font-black text-slate-950">System health</h3>
             </div>
-            <div class="stat-card fake">
-                <div class="stat-header">
-                    <div class="stat-label">Misinformation</div>
-                    <div class="stat-icon">🚨</div>
-                </div>
-                <div class="stat-value" id="fake-events">—</div>
-                <div class="stat-desc">High confidence detections</div>
-                <div class="stat-bar"><div class="stat-bar-fill" id="bar-fake"></div></div>
+            <div class="flex items-center gap-3">
+              <span class="text-[10px] font-bold text-emerald-600" id="dashboard-health-badge">Operational</span>
+              <div class="h-4 w-px bg-slate-200"></div>
+              <button id="close-health-overlay" class="text-[10px] font-bold text-slate-400 hover:text-slate-950 transition-colors">Close ×</button>
             </div>
-            <div class="stat-card real">
-                <div class="stat-header">
-                    <div class="stat-label">Verified News</div>
-                    <div class="stat-icon">✅</div>
-                </div>
-                <div class="stat-value" id="real-events">—</div>
-                <div class="stat-desc">Authenticated sources</div>
-                <div class="stat-bar"><div class="stat-bar-fill" id="bar-real"></div></div>
+          </header>
+
+          <div class="mt-8 w-full flex-1 overflow-y-auto pr-2 custom-scrollbar island-scroll-container">
+            <!-- Key Metrics Grid -->
+            <div class="grid w-full grid-cols-2 gap-3 lg:grid-cols-4">
+              <div class="rounded-2xl border border-slate-100 bg-slate-50 p-4 transition-all hover:bg-slate-100 hover:border-slate-200">
+                <p class="text-[10px] font-bold text-slate-500">Regional Coverage</p>
+                <p class="mt-2 text-2xl font-black text-slate-950" id="dashboard-coverage-regions">--</p>
+              </div>
+              <div class="rounded-2xl border border-slate-100 bg-slate-50 p-4 transition-all hover:bg-slate-100 hover:border-slate-200">
+                <p class="text-[10px] font-bold text-slate-500">Active Signals</p>
+                <p class="mt-2 text-2xl font-black text-slate-950" id="dashboard-coverage-active">--</p>
+              </div>
+              <div class="rounded-2xl border border-slate-100 bg-slate-50 p-4 transition-all hover:bg-slate-100 hover:border-slate-200">
+                <p class="text-[10px] font-bold text-slate-500">Event Ingestion</p>
+                <p class="mt-2 text-2xl font-black text-slate-950" id="dashboard-coverage-events">--</p>
+              </div>
+              <div class="rounded-2xl border border-slate-100 bg-slate-50 p-4 transition-all hover:bg-slate-100 hover:border-slate-200">
+                <p class="text-[10px] font-bold text-slate-500">Engine Precision</p>
+                <p class="mt-2 text-2xl font-black text-slate-950" id="dashboard-coverage-confidence">--</p>
+              </div>
             </div>
-            <div class="stat-card uncertain">
-                <div class="stat-header">
-                    <div class="stat-label">Under Review</div>
-                    <div class="stat-icon">⚠️</div>
+
+            <!-- Module Diagnostics -->
+            <div class="mt-8">
+              <div class="mb-4 flex items-center justify-between">
+                <p class="text-[10px] font-black text-slate-500">Module Diagnostics</p>
+                <p class="text-[10px] text-slate-500" id="dashboard-coverage-note">Synchronized with live feed</p>
+              </div>
+              <div class="flex w-full flex-col gap-3" id="dashboard-health-indicators">
+                <!-- Indicators populated by JS -->
+                <div class="flex h-16 animate-pulse items-center gap-4 rounded-xl bg-slate-50 px-4">
+                  <div class="h-2 w-2 rounded-full bg-slate-300"></div>
+                  <div class="h-3 w-32 rounded bg-slate-300"></div>
                 </div>
-                <div class="stat-value" id="uncertain-events">—</div>
-                <div class="stat-desc">Requires human verification</div>
-                <div class="stat-bar"><div class="stat-bar-fill" id="bar-uncertain"></div></div>
+              </div>
             </div>
+          </div>
+          
+          <footer class="mt-auto flex items-center justify-center pt-6">
+            <div class="h-1 w-12 rounded-full bg-slate-200 transition-colors group-hover:bg-slate-300"></div>
+          </footer>
         </div>
+      </div>
+    </div>
 
-        <!-- Row: AI Performance + Live Activity -->
-        <div class="row row-2">
-            <!-- AI Performance -->
-            <div class="panel">
-                <div class="panel-header">
-                    <div>
-                        <div class="panel-title">AI Detection Performance</div>
-                        <div class="panel-sub">Multi-layered analysis system accuracy</div>
-                    </div>
-                </div>
-                <div class="panel-body">
-                    <div class="accuracy-center">
-                        <div class="ring-wrap">
-                            <svg width="160" height="160" style="transform:rotate(-90deg)">
-                                <circle cx="80" cy="80" r="56" fill="none" stroke="#E8E8E0" stroke-width="10"/>
-                                <circle id="accuracy-ring-fill" cx="80" cy="80" r="56" fill="none"
-                                    stroke="#138808" stroke-width="10" stroke-linecap="round"
-                                    stroke-dasharray="351.86" stroke-dashoffset="351.86"
-                                    style="transition: stroke-dashoffset 1.5s ease"/>
-                            </svg>
-                            <div class="ring-label">
-                                <div class="ring-pct" id="accuracy-pct">91%</div>
-                                <div class="ring-sub">Overall Accuracy</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="metric-bar-row">
-                        <div class="metric-bar-item">
-                            <div class="mbi-val" style="color:var(--blue);">94.2%</div>
-                            <div class="mbi-lbl">Precision</div>
-                        </div>
-                        <div class="metric-bar-item">
-                            <div class="mbi-val" style="color:var(--green);">91.7%</div>
-                            <div class="mbi-lbl">Recall</div>
-                        </div>
-                        <div class="metric-bar-item">
-                            <div class="mbi-val" style="color:var(--saffron);">92.9%</div>
-                            <div class="mbi-lbl">F1-Score</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+    <!-- Desktop System Health Trigger (Floating Pill) -->
+    <button id="desktop-health-trigger" class="group fixed bottom-6 right-6 z-[60] hidden h-14 w-max items-center gap-2 rounded-full border border-slate-200 bg-white/95 shadow-premium backdrop-blur-2xl transition-all duration-500 hover:scale-[1.05] hover:border-saffron-300 active:scale-95 lg:flex px-4" aria-label="System health status">
+      <div class="relative flex h-2.5 w-2.5 flex-none items-center justify-center">
+        <div id="desktop-health-ping" class="absolute h-full w-full animate-ping rounded-full bg-emerald-500 opacity-40"></div>
+        <div id="desktop-health-dot" class="h-full w-full rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]"></div>
+      </div>
+      <span id="desktop-health-text" class="whitespace-nowrap text-xs font-black text-slate-900">System Health</span>
+      <div class="h-4 w-px flex-none bg-slate-200"></div>
+      <div class="flex h-5 w-5 flex-none items-center justify-center">
+        <svg class="h-full w-full text-slate-400 group-hover:text-slate-950 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+        </svg>
+      </div>
+    </button>
 
-            <!-- Live Activity -->
-            <div class="panel">
-                <div class="panel-header">
-                    <div>
-                        <div class="panel-title">Live Activity</div>
-                        <div class="panel-sub">Recent classifications</div>
-                    </div>
-                    <span class="feed-count" id="events-count">Loading…</span>
-                </div>
-                <div class="panel-body" style="overflow:hidden; padding:1rem;">
-                    <div class="activity-feed" id="activity-feed">
-                        <div class="empty-feed"><div class="empty-icon">⏳</div>Loading recent activity…</div>
-                    </div>
-                </div>
+    <style>
+      #desktop-health-trigger {
+        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
+        padding-left: 1.25rem !important;
+        padding-right: 1.75rem !important;
+        width: max-content !important;
+      }
+      #desktop-health-trigger svg {
+        overflow: visible !important;
+      }
+      #desktop-health-trigger:active {
+        transform: scale(0.92) translateY(2px) !important;
+      }
+      #dashboard-health-overlay.active,
+      #dashboard-health-overlay.closing {
+        display: flex;
+      }
+      @keyframes springExpand {
+        0% { opacity: 0; transform: scale(0.9) translateY(20px); }
+        70% { opacity: 1; transform: scale(1.02) translateY(-2px); }
+        100% { opacity: 1; transform: scale(1) translateY(0); }
+      }
+      @keyframes springShrink {
+        0% { opacity: 1; transform: scale(1) translateY(0); }
+        100% { opacity: 0; transform: scale(0.9) translateY(10px); }
+      }
+      #dashboard-health-overlay.active {
+        animation: fadeIn 0.25s ease-out forwards;
+      }
+      #dashboard-health-overlay.active #island-toggle {
+        animation: springExpand 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+        transform-origin: bottom right;
+      }
+      #dashboard-health-overlay.closing {
+        animation: fadeOut 0.2s ease-in forwards;
+      }
+      #dashboard-health-overlay.closing #island-toggle {
+        animation: springShrink 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
+        transform-origin: bottom right;
+      }
+      @media (max-width: 880px) {
+        #island-toggle {
+          width: calc(100vw - 24px) !important;
+          height: 80vh !important;
+          max-height: 700px !important;
+        }
+      }
+      .custom-scrollbar::-webkit-scrollbar { width: 4px; }
+      .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+      .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
+      .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
+      
+      .island-scroll-container {
+        scrollbar-gutter: stable;
+      }
+    </style>
+  </main>
+
+  <footer class="border-t border-slate-200 bg-slate-950 pt-16 pb-32 text-white">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="grid grid-cols-1 gap-12 md:grid-cols-3">
+        <!-- Brand Section -->
+        <div class="max-w-xs">
+          <div class="flex items-center gap-2">
+            <div class="h-8 w-8 rounded-lg bg-gradient-to-tr from-saffron-500 via-white to-india-green-500 p-1">
+              <div class="h-full w-full rounded-md bg-slate-950 flex items-center justify-center">
+                <span class="text-[10px] font-black">MH</span>
+              </div>
             </div>
+            <span class="text-lg font-black tracking-tight">Misinfo<span class="text-saffron-500">Heatmap</span></span>
+          </div>
+          <p class="mt-6 text-sm leading-7 text-slate-400">
+            Advanced AI-powered platform for real-time misinformation detection and verification across India's digital
+            landscape.
+          </p>
+          <div class="mt-6 flex items-center gap-4">
+            <!-- India Badge -->
+            <span
+              class="inline-flex items-center gap-1.5 rounded-full bg-white/5 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-slate-300 border border-white/10">
+              <span class="h-1.5 w-1.5 rounded-full bg-saffron-500"></span>
+              Monitored in India
+            </span>
+          </div>
         </div>
 
-        <!-- Row: Coverage + Health -->
-        <div class="row row-2b">
-            <!-- Geographic Coverage -->
-            <div class="panel">
-                <div class="panel-header">
-                    <div>
-                        <div class="panel-title">Geographic Coverage</div>
-                        <div class="panel-sub">Monitoring across all Indian states and union territories</div>
-                    </div>
-                    <a href="/map/enhanced-india-heatmap.html" class="map-link">🗺️ View Interactive Map</a>
-                </div>
-                <div class="panel-body">
-                    <div class="coverage-grid">
-                        <div class="cov-item">
-                            <div class="cov-val" id="total-states">36</div>
-                            <div class="cov-label">States &amp; UTs</div>
-                        </div>
-                        <div class="cov-item">
-                            <div class="cov-val">34+</div>
-                            <div class="cov-label">News Sources</div>
-                        </div>
-                        <div class="cov-item">
-                            <div class="cov-val">100+</div>
-                            <div class="cov-label">Articles/Second</div>
-                        </div>
-                    </div>
-                    <div style="margin-top:1.25rem; padding:1rem; background:rgba(232,119,34,0.05); border:1px solid rgba(232,119,34,0.15); border-radius:12px; font-size:0.85rem; color:var(--text-secondary); line-height:1.6;">
-                        🌐 Monitoring <strong style="color:var(--saffron)">all 28 states + 8 union territories</strong> with concurrent RSS ingestion, processed through our 5-model ML ensemble, IndicBERT NLP pipeline, and GDELT global news index.
-                    </div>
-                </div>
-            </div>
+        <!-- Platform Links -->
+        <div>
+          <h3 class="text-sm font-black uppercase tracking-[0.2em] text-saffron-500">Platform</h3>
+          <ul class="mt-6 space-y-4 text-sm text-slate-400">
+            <li><a href="/heatmap.html" class="transition hover:text-white font-medium">Live Heatmap</a></li>
+            <li><a href="/dashboard.html" class="transition hover:text-white font-medium">Intelligence Dashboard</a></li>
+          </ul>
+        </div>
 
-            <!-- System Health -->
-            <div class="panel">
-                <div class="panel-header">
-                    <div class="panel-title">System Health</div>
-                    <div class="panel-badge" id="health-badge">Checking…</div>
-                </div>
-                <div class="panel-body">
-                    <div class="metric-row">
-                        <span class="metric-name">API Server</span>
-                        <span class="metric-badge green" id="health-api">● Online</span>
-                    </div>
-                    <div class="metric-row">
-                        <span class="metric-name">Data Processing</span>
-                        <span class="metric-badge amber" id="health-proc">● Checking</span>
-                    </div>
-                    <div class="metric-row">
-                        <span class="metric-name">Database</span>
-                        <span class="metric-badge green" id="health-db">● Connected</span>
-                    </div>
-                    <div class="metric-row">
-                        <span class="metric-name">ML Models</span>
-                        <span class="metric-badge green" id="health-ml">● Checking</span>
-                    </div>
-                    <div class="metric-row">
-                        <span class="metric-name">RSS Feeds</span>
-                        <span class="metric-badge green">● 34+ Active</span>
-                    </div>
-                    <div class="metric-row">
-                        <span class="metric-name">GDELT Source</span>
-                        <span class="metric-badge green">● Connected</span>
-                    </div>
-                </div>
+        <!-- Support -->
+        <div>
+          <h3 class="text-sm font-black uppercase tracking-[0.2em] text-ashoka-blue-400">Support</h3>
+          <ul class="mt-6 space-y-4 text-sm text-slate-400">
+            <li><a href="/contact.html" class="transition hover:text-white font-black text-slate-300">Contact Us</a></li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- Bottom Bar -->
+      <div class="mt-16 border-t border-white/5 pt-8">
+        <div class="flex flex-col items-center justify-between gap-6 md:flex-row">
+          <p class="text-xs text-slate-500">
+            © 2026 Misinformation Heatmap. Powered by Advanced Neural Networks.
+          </p>
+          <div class="flex items-center gap-8">
+            <a href="/privacy-policy.html" class="text-xs text-slate-400 hover:text-white font-medium transition">Privacy Policy</a>
+            <div
+              class="h-1 w-32 rounded-full bg-gradient-to-r from-saffron-500 via-white to-india-green-500 opacity-20">
             </div>
+          </div>
         </div>
+      </div>
     </div>
-
-    <script>
-        // ── API Configuration ──
-        const API_BASE = window.location.hostname.includes('netlify.app') 
-            ? 'https://ndg07-heatmap.hf.space' 
-            : '';
-
-        // ── Hamburger menu toggle ──
-        const hamburgerBtn = document.getElementById('hamburger-btn');
-        const mobileMenu = document.getElementById('mobile-menu');
-        
-        hamburgerBtn.addEventListener('click', () => {
-            hamburgerBtn.classList.toggle('active');
-            mobileMenu.classList.toggle('active');
-            document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : '';
-        });
-
-        // Close menu when clicking on a link
-        document.querySelectorAll('.mobile-menu-link').forEach(link => {
-            link.addEventListener('click', () => {
-                hamburgerBtn.classList.remove('active');
-                mobileMenu.classList.remove('active');
-                document.body.style.overflow = '';
-            });
-        });
-
-        // Close menu when clicking outside
-        mobileMenu.addEventListener('click', (e) => {
-            if (e.target === mobileMenu) {
-                hamburgerBtn.classList.remove('active');
-                mobileMenu.classList.remove('active');
-                document.body.style.overflow = '';
-            }
-        });
-
-        const fmt = n => n >= 1000000 ? (n/1e6).toFixed(1)+'M' : n >= 1000 ? (n/1000).toFixed(1)+'K' : String(n);
-
-        function animateNum(el, to) {
-            if (!el) return;
-            const from = parseInt(el.textContent.replace(/[^0-9]/g,'')) || 0;
-            if (from === to) return;
-            const step = Math.max(1, Math.ceil(Math.abs(to - from) / 25));
-            let cur = from;
-            const timer = setInterval(() => {
-                cur += (to > from ? step : -step);
-                if ((to > from && cur >= to) || (to < from && cur <= to)) { cur = to; clearInterval(timer); }
-                el.textContent = fmt(cur);
-            }, 25);
-        }
-
-        async function updateStats(d) {
-            try {
-                if (!d) {
-                    const res = await fetch(API_BASE + '/api/v1/stats');
-                    if (!res.ok) throw new Error();
-                    d = await res.json();
-                }
-
-                animateNum(document.getElementById('total-events'), d.total_events || 0);
-                animateNum(document.getElementById('fake-events'), d.fake_events || 0);
-                animateNum(document.getElementById('real-events'), d.real_events || 0);
-                animateNum(document.getElementById('uncertain-events'), d.uncertain_events || 0);
-                document.getElementById('total-states').textContent = d.total_states || 36;
-
-                const total = d.total_events || 1;
-                setTimeout(() => {
-                    document.getElementById('bar-total').style.width = '100%';
-                    document.getElementById('bar-fake').style.width = ((d.fake_events||0)/total*100) + '%';
-                    document.getElementById('bar-real').style.width = ((d.real_events||0)/total*100) + '%';
-                    document.getElementById('bar-uncertain').style.width = ((d.uncertain_events||0)/total*100) + '%';
-                }, 200);
-
-                const statusEl = document.getElementById('system-status');
-                const procEl   = document.getElementById('health-proc');
-                const mlEl     = document.getElementById('health-ml');
-                const badge    = document.getElementById('health-badge');
-
-                statusEl.textContent = d.processing_active ? 'Live Processing' : (d.ml_ready ? 'System Ready' : 'Loading…');
-                procEl.textContent   = d.processing_active ? '● Active' : '● Idle';
-                procEl.className     = `metric-badge ${d.processing_active ? 'green' : 'amber'}`;
-                mlEl.textContent     = d.ml_ready ? '● Loaded' : '● Loading…';
-                mlEl.className       = `metric-badge ${d.ml_ready ? 'green' : 'amber'}`;
-                badge.textContent    = d.processing_active ? 'All Systems Go' : 'Standby';
-                badge.style.color    = d.processing_active ? 'var(--green)' : 'var(--text-muted)';
-
-                // Accuracy ring
-                const acc = d.classification_accuracy || 0.91;
-                document.getElementById('accuracy-pct').textContent = Math.round(acc * 100) + '%';
-                setTimeout(() => {
-                    document.getElementById('accuracy-ring-fill').style.strokeDashoffset = 351.86 * (1 - acc);
-                }, 300);
-
-                document.getElementById('last-updated').textContent =
-                    'Last updated: ' + new Date().toLocaleTimeString('en-IN', { hour12: true });
-
-            } catch(_) {
-                document.getElementById('system-status').textContent = 'Connecting…';
-            }
-        }
-
-        async function updateActivity(eventsPayload) {
-            try {
-                let events;
-                if (!eventsPayload) {
-                    const res = await fetch(API_BASE + '/api/v1/events/live?limit=15');
-                    if (!res.ok) throw new Error();
-                    const d = await res.json();
-                    events = d.events || [];
-                } else {
-                    events = eventsPayload.events || [];
-                }
-
-                document.getElementById('events-count').textContent = events.length + ' events';
-
-                const feed = document.getElementById('activity-feed');
-                if (events.length === 0) {
-                    feed.innerHTML = `<div class="empty-feed"><div class="empty-icon">📭</div><p>No recent events</p></div>`;
-                    return;
-                }
-
-                feed.innerHTML = events.map(ev => {
-                    const cls  = ev.classification || 'uncertain';
-                    const icon = cls === 'fake' ? '🚨' : cls === 'real' ? '✅' : '⚠️';
-                    const time = ev.timestamp ? new Date(ev.timestamp).toLocaleTimeString('en-IN', {hour:'2-digit', minute:'2-digit', hour12:true}) : '—';
-                    const title = (ev.title || 'Processing event…').substring(0, 90);
-                    const conf  = ev.confidence ? Math.round(ev.confidence * 100) + '%' : '';
-                    return `<div class="activity-item">
-                        <div class="activity-dot">${icon}</div>
-                        <div class="activity-info">
-                            <div class="activity-title" title="${(ev.title||'').replace(/"/g,'&quot;')}">${title}</div>
-                            <div class="activity-meta">
-                                <span class="activity-tag ${cls}">${cls.toUpperCase()}</span>
-                                <span>${ev.source || 'Unknown'}</span>
-                                <span>📍 ${ev.state || 'India'}</span>
-                                ${conf ? `<span>${conf}</span>` : ''}
-                                <span>🕐 ${time}</span>
-                            </div>
-                        </div>
-                    </div>`;
-                }).join('');
-            } catch(_) {}
-        }
-
-        function refreshAll() { updateStats(); updateActivity(); }
-
-        // Initial load
-        updateStats();
-        updateActivity();
-
-        // SSE for real-time updates
-        const sse = new EventSource(API_BASE + '/api/v1/stream');
-        sse.addEventListener('stats', e => updateStats(JSON.parse(e.data)));
-        sse.addEventListener('live_events', e => updateActivity(JSON.parse(e.data)));
-        sse.onerror = () => { document.getElementById('system-status').textContent = 'Reconnecting…'; };
-
-        // Fallback polling every 15s in case SSE stalls
-        setInterval(refreshAll, 15000);
-    </script>
+  </footer>
 </body>
-</html>
+
+</html>

frontend/heatmap.html

@@ -0,0 +1,654 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
+  <meta name="referrer" content="strict-origin-when-cross-origin">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://ndg07-heatmap.hf.space; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests">
+  <style>
+    html,
+    body {
+      overflow-x: hidden;
+      width: 100%;
+      position: relative;
+    }
+
+    /* Surface Pro 7 & Asus Zenbook Fold Specific Enhancements */
+    @media screen and (device-width: 912px) and (device-height: 1368px),
+    screen and (device-width: 912px) and (device-height: 608px),
+    screen and (device-width: 853px) and (device-height: 1280px) {
+      body #main-content {
+        padding-top: 5.75rem !important;
+      }
+
+      html {
+        font-size: 18px !important;
+      }
+
+      h2 {
+        font-size: 1.5rem !important;
+      }
+
+      p {
+        font-size: 1.1rem !important;
+      }
+
+      /* Pill and Scroll Button Alignment for Pro 7 */
+      #bottom-premium-nav,
+      #scroll-down-btn {
+        bottom: 3rem !important;
+        gap: 1.25rem !important;
+        padding: 0.75rem !important;
+        border-width: 2px !important;
+      }
+
+      #bottom-premium-nav a,
+      #bottom-premium-nav button {
+        height: 3.75rem !important;
+        width: 3.75rem !important;
+      }
+
+      #bottom-premium-nav a.w-20,
+      #bottom-premium-nav button.w-20 {
+        width: 6rem !important;
+      }
+
+      #bottom-premium-nav svg {
+        width: 1.75rem !important;
+        height: 1.75rem !important;
+      }
+
+      [data-desktop-nav] {
+        display: flex !important;
+      }
+
+      #menu-toggle {
+        display: none !important;
+      }
+
+      #bottom-premium-nav,
+      #scroll-down-btn {
+        display: none !important;
+      }
+
+      /* Heatmap Specific Text Scaling for Pro 7 */
+      #heatmap-header-refresh {
+        font-size: 0.85rem !important;
+        padding: 0.4rem 0.8rem !important;
+      }
+
+      #heatmap-zoom-controls button {
+        font-size: 1.2rem !important;
+        min-height: 3.25rem !important;
+        min-width: 3.25rem !important;
+      }
+
+      #risk-legend-toggle {
+        font-size: 0.9rem !important;
+        padding-top: 0.75rem !important;
+        padding-bottom: 0.75rem !important;
+      }
+
+      #risk-legend-panel .grid {
+        font-size: 0.85rem !important;
+        gap: 0.75rem !important;
+        padding: 1rem !important;
+      }
+
+      aside h3 {
+        font-size: 0.75rem !important;
+        letter-spacing: 0.15em !important;
+      }
+
+      #heatmap-misinformation-count,
+      #heatmap-real-news-count {
+        font-size: 0.75rem !important;
+        padding: 0.25rem 0.6rem !important;
+      }
+
+      .feed-filter-control {
+        font-size: 0.7rem !important;
+        padding-top: 0.4rem !important;
+        padding-bottom: 0.4rem !important;
+      }
+    }
+
+    /* Short Viewport Adjustments (Nest Hub, Surface Duo) - Only for non-desktop widths */
+    @media (max-height: 720px) and (max-width: 1299px) {
+      #main-content {
+        padding-top: 6.5rem !important;
+        padding-bottom: 5rem !important;
+      }
+
+      .sm\:pt-26 {
+        padding-top: 6.5rem !important;
+      }
+    }
+
+    /* Desktop Only Scaling (Wider than Nest Hub Max) - Reinforced */
+    @media screen and (min-width: 1300px) {
+      #main-content {
+        height: calc(100vh - 1rem) !important;
+        padding-top: 5.25rem !important;
+        padding-bottom: 1.25rem !important;
+        max-width: 1650px !important;
+      }
+
+      #main-content>section,
+      #main-content>section>article,
+      #main-content>section>aside {
+        height: 100% !important;
+      }
+    }
+
+    /* Target tall map ONLY for narrow phones (Pixel, iPhone, etc.) */
+    @media (max-width: 500px) {
+      #india-map-container {
+        min-height: 650px !important;
+      }
+
+      /* Shift pill left to avoid overlap with scroll button on narrow screens */
+      #bottom-premium-nav {
+        left: 40% !important;
+      }
+    }
+
+    /* Samsung Galaxy S8+ / S28+ Specific Adjustment (360x740) */
+    @media screen and (device-width: 360px) and (device-height: 740px) {
+      #india-map-container {
+        min-height: 470px !important;
+      }
+
+      h2 {
+        font-size: 1rem !important;
+      }
+    }
+
+    /* Specific scaling for Nest Hub (1024x600) - Compact Heatmap */
+    @media screen and (device-width: 1024px) and (device-height: 600px) {
+      html {
+        font-size: 17px !important;
+      }
+
+      #main-content {
+        height: calc(100vh - 0.5rem) !important;
+        padding-top: 5rem !important;
+        padding-bottom: 0.75rem !important;
+      }
+
+      #main-content>section,
+      #main-content>section>article,
+      #main-content>section>aside {
+        height: 100% !important;
+      }
+
+      h2 {
+        font-size: 1.2rem !important;
+      }
+
+      p.text-\[10px\] {
+        font-size: 9px !important;
+      }
+
+      #heatmap-header-refresh {
+        padding: 0.25rem 0.5rem !important;
+        font-size: 9px !important;
+      }
+
+      #main-content>section {
+        gap: 1rem !important;
+      }
+
+      #heatmap-zoom-controls {
+        scale: 0.85 !important;
+        transform-origin: right top !important;
+      }
+
+      #heatmap-svg-root {
+        padding: 3rem !important;
+      }
+
+      [data-desktop-nav] {
+        display: flex !important;
+      }
+
+      #menu-toggle {
+        display: none !important;
+      }
+
+      #bottom-premium-nav {
+        display: none !important;
+      }
+    }
+
+    /* Specific scaling for Nest Hub Max (1280x800) - More breathing room */
+    @media screen and (device-width: 1280px) and (device-height: 800px) {
+      html {
+        font-size: 18px !important;
+      }
+
+      body #main-content {
+        height: calc(100vh - 1rem) !important;
+        padding-top: 6rem !important;
+        padding-bottom: 1.5rem !important;
+      }
+
+      #main-content>section,
+      #main-content>section>article,
+      #main-content>section>aside {
+        height: 100% !important;
+      }
+
+      [data-desktop-nav] {
+        display: flex !important;
+      }
+
+      #menu-toggle {
+        display: none !important;
+      }
+
+      #bottom-premium-nav {
+        display: none !important;
+      }
+    }
+
+    /* Surface Duo Specific Fix (Custom) */
+    @media screen and (max-width: 600px) and (max-height: 720px) {
+      #main-content {
+        padding-top: 5.5rem !important;
+        padding-bottom: 2rem !important;
+      }
+
+      #india-map-container {
+        min-height: 600px !important;
+        height: 600px !important;
+        flex: none !important;
+      }
+
+      #heatmap-svg-root {
+        padding: 3rem 5rem 7.5rem 5rem !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+      }
+
+      #heatmap-svg-root>svg {
+        transform: translateY(-25px) !important;
+      }
+
+      #risk-legend-container {
+        bottom: 6rem !important;
+        left: 0.75rem !important;
+        scale: 0.9;
+        transform-origin: left bottom;
+      }
+
+      #risk-legend-toggle {
+        padding: 0.25rem 0.5rem !important;
+      }
+
+      #risk-legend-panel {
+        max-height: none;
+      }
+
+      #heatmap-zoom-controls {
+        scale: 0.8;
+        transform-origin: right center;
+      }
+    }
+
+    /* Premium Hover & Select Scale Effects for Heatmap Paths */
+    .heatmap-path {
+      transform-box: fill-box !important;
+      transform-origin: center !important;
+      transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                  stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                  stroke-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                  transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+                  filter 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      will-change: transform, filter !important;
+    }
+
+    .heatmap-path:hover {
+      transform: scale(1.045) translateY(-2px) !important;
+      filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12)) brightness(1.04) !important;
+      z-index: 50 !important;
+    }
+
+    .heatmap-path.selected {
+      transform: scale(1.06) translateY(-3px) !important;
+      filter: drop-shadow(0 12px 20px rgba(251, 146, 60, 0.22)) brightness(1.06) !important;
+      z-index: 60 !important;
+    }
+  </style>
+  <title>Heatmap - Misinformation Heatmap</title>
+  <meta name="description"
+    content="Interactive India heatmap for monitoring state-wise misinformation risk, live alerts, verified news, and AI confidence signals.">
+  <link rel="icon" type="image/x-icon" href="/assets/Misinfo.ico">
+  <link rel="shortcut icon" type="image/x-icon" href="/assets/Misinfo.ico">
+  <link rel="manifest" href="/manifest.json">
+  <link rel="stylesheet" href="/assets/css/styles.css">
+  <script type="module" src="/assets/js/main.js"></script>
+</head>
+
+<body data-page="heatmap" class="min-h-screen overflow-x-hidden text-slate-950 antialiased relative">
+  <div class="fixed inset-0 -z-10 bg-white"></div>
+  <div
+    class="fixed inset-0 -z-10 overflow-hidden pointer-events-none [mask-image:linear-gradient(to_bottom,white_90%,transparent)]"
+    style="contain: strict;">
+    <!-- Main Saffron Glow -->
+    <div
+      class="absolute -top-[15%] -left-[10%] h-[650px] w-[650px] rounded-full bg-[radial-gradient(circle,rgba(255,153,51,0.28)_0%,transparent_70%)] animate-float will-change-transform transform-gpu">
+    </div>
+
+    <!-- Main Green Glow -->
+    <div
+      class="absolute top-[25%] -right-[10%] h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle,rgba(19,136,8,0.22)_0%,transparent_70%)] animate-float will-change-transform transform-gpu"
+      style="animation-delay: 2s"></div>
+
+    <!-- Ashoka Blue Glow -->
+    <div
+      class="absolute top-1/2 left-1/4 h-[450px] w-[450px] rounded-full bg-[radial-gradient(circle,rgba(0,0,128,0.12)_0%,transparent_70%)] animate-pulse will-change-transform transform-gpu"
+      style="animation-delay: 4s"></div>
+
+    <!-- Subtle Saffron/Green Accent Gradients -->
+    <div
+      class="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(255,153,51,0.2),transparent_50%),radial-gradient(circle_at_80%_80%,rgba(19,136,8,0.2),transparent_50%)]">
+    </div>
+
+    <!-- Refined noise and pattern -->
+    <div class="absolute inset-0 opacity-[0.05]"
+      style="background-image: radial-gradient(circle at 2px 2px, rgba(0,0,0,0.15) 1px, transparent 0); background-size: 48px 48px;">
+    </div>
+
+    <!-- Diagonal Accent Overlay -->
+    <div
+      class="absolute inset-0 bg-gradient-to-br from-saffron-500/15 via-transparent to-india-green-500/15 opacity-80">
+    </div>
+  </div>
+  <a class="absolute w-[1px] h-[1px] p-0 m-[-1px] overflow-hidden clip-[rect(0,0,0,0)] whitespace-nowrap border-0 focus:static focus:w-auto focus:h-auto focus:p-0 focus:m-0 focus:overflow-visible focus:clip-auto focus:whitespace-normal focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-lg focus:bg-slate-950 focus:px-4 focus:py-2 focus:text-sm focus:font-bold focus:text-white focus:shadow-lg"
+    href="#main-content">Skip to content</a>
+  <!-- Scroll Down Helper (Mobile/Tablet Only) -->
+  <button id="scroll-down-btn"
+    class="fixed bottom-6 right-4 z-[70] flex h-16 w-16 animate-bounce-scroll items-center justify-center rounded-full bg-[#fffdf4]/95 text-slate-950 shadow-[0_10px_40px_rgba(0,0,0,0.15)] backdrop-blur-md transition-all hover:scale-110 active:scale-95 lg:hidden"
+    aria-label="Scroll down to news">
+    <svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 13l-7 7-7-7M12 5v15"></path>
+    </svg>
+  </button>
+
+  <div data-navbar></div>
+
+  <main id="main-content"
+    class="mx-auto w-full max-w-[1550px] px-4 pt-24 pb-32 sm:px-6 sm:pt-26 lg:px-4 lg:h-[calc(100vh-1rem)] lg:pt-20 lg:overflow-hidden">
+    <section
+      class="grid gap-6 lg:grid-cols-[1fr_480px] xl:grid-cols-[1fr_560px] animate-fade-in-up lg:h-full lg:overflow-hidden">
+      <article id="india-map-container"
+        class="relative overflow-hidden bg-[#fffdf4] shadow-premium sm:rounded-2xl rounded-2xl sm:border sm:border-slate-200 flex flex-col lg:h-full isolate">
+        <div class="flex items-center justify-between gap-4 border-b border-slate-200 bg-[#fdfaf0] px-5 py-4 sm:px-6">
+          <div class="min-w-0">
+            <p class="text-[10px] font-bold text-slate-500">Live risk map</p>
+            <h2 class="mt-0.5 text-lg font-extrabold text-slate-950">State intensity surface</h2>
+          </div>
+          <button
+            class="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-[11px] font-bold text-slate-700 shadow-sm transition hover:-translate-y-0.5 hover:border-saffron-300 hover:bg-saffron-50 hover:text-saffron-700"
+            type="button" id="heatmap-header-refresh">
+            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
+              </path>
+            </svg>
+            Refresh
+          </button>
+        </div>
+
+        <div
+          class="relative flex-1 min-h-[350px] overflow-hidden bg-[#fffdf4] rounded-b-2xl sm:min-h-[450px] lg:min-h-0"
+          style="contain: layout paint;" id="india-map-viewport">
+
+          <div id="heatmap-zoom-controls" class="absolute right-4 top-4 z-20 flex flex-col gap-2"
+            aria-label="Map controls">
+            <button
+              class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-xl border border-slate-200 bg-white/95 text-base font-extrabold text-slate-800 shadow-card outline-none transition-all duration-150 hover:-translate-y-0.5 hover:border-saffron-300 hover:bg-saffron-50 hover:text-saffron-800 focus-visible:ring-2 focus-visible:ring-saffron-500"
+              type="button" id="heatmap-zoom-in" aria-label="Zoom in">+</button>
+            <button
+              class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-xl border border-slate-200 bg-white/95 px-2 text-[10px] font-extrabold text-slate-800 shadow-card outline-none transition-all duration-150 hover:-translate-y-0.5 hover:border-saffron-300 hover:bg-saffron-50 hover:text-saffron-800 focus-visible:ring-2 focus-visible:ring-saffron-500"
+              type="button" id="heatmap-zoom-reset" aria-label="Reset zoom">Reset</button>
+            <button
+              class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-xl border border-slate-200 bg-white/95 text-base font-extrabold text-slate-800 shadow-card outline-none transition-all duration-150 hover:-translate-y-0.5 hover:border-saffron-300 hover:bg-saffron-50 hover:text-saffron-800 focus-visible:ring-2 focus-visible:ring-saffron-500"
+              type="button" id="heatmap-zoom-out" aria-label="Zoom out">-</button>
+            <button
+              class="mt-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-xl border border-slate-200 bg-white/95 px-3 text-[10px] font-bold text-slate-800 shadow-card outline-none transition-all duration-150 hover:-translate-y-0.5 hover:border-saffron-300 hover:bg-saffron-50 hover:text-saffron-800 focus-visible:ring-2 focus-visible:ring-saffron-500"
+              type="button" id="heatmap-state-clear" aria-label="Clear state selection">Clear</button>
+          </div>
+
+          <div id="heatmap-svg-root"
+            class="flex h-full w-full touch-none select-none items-center justify-center overflow-hidden p-4 sm:p-6 rounded-b-2xl"
+            tabindex="0" aria-label="Interactive India heatmap">
+            <div id="heatmap-loading"
+              class="flex max-w-sm flex-col items-center justify-center px-6 text-center animate-pulse-soft">
+              <div class="h-14 w-14 animate-spin rounded-full border-4 border-ashoka-blue-200 border-t-ashoka-blue-500">
+              </div>
+              <p class="mt-6 text-lg font-extrabold text-slate-950 tracking-tight">Analyzing Signals</p>
+              <p class="mt-2 text-sm leading-6 text-slate-600 font-medium">Fetching real-time state risk indicators...
+              </p>
+            </div>
+          </div>
+
+          <div id="risk-legend-container" class="absolute bottom-4 left-4 z-20 w-40">
+            <div
+              class="overflow-hidden rounded-2xl border border-slate-200 bg-white/95 shadow-[0_10px_40px_rgba(0,0,0,0.1)] backdrop-blur-xl">
+              <button
+                class="flex w-full items-center justify-between gap-4 px-4 py-2.5 text-left text-[11px] font-bold text-slate-800 focus-visible:outline-none"
+                type="button" id="risk-legend-toggle" aria-expanded="true" aria-controls="risk-legend-panel">
+                <span>Risk levels</span>
+                <svg id="risk-legend-icon" class="h-3 w-3 transition-transform duration-300" fill="none"
+                  stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M19 9l-7 7-7-7"></path>
+                </svg>
+              </button>
+              <div class="max-h-[500px] overflow-hidden transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]"
+                id="risk-legend-panel">
+                <div class="grid gap-2 border-t border-slate-100 px-4 py-3 text-[11px] font-bold text-slate-600">
+                  <div class="flex items-center gap-3"><span
+                      class="h-3 w-3 shrink-0 rounded-full shadow-[0_0_8px_rgba(19,136,8,0.4)]" style="background-color: #138808;"></span><span>Least
+                      risk</span></div>
+                  <div class="flex items-center gap-3"><span
+                      class="h-3 w-3 shrink-0 rounded-full bg-yellow-400 shadow-[0_0_8px_rgba(250,204,21,0.4)]"></span><span>Low-Medium</span>
+                  </div>
+                  <div class="flex items-center gap-3"><span
+                      class="h-3 w-3 shrink-0 rounded-full bg-orange-500 shadow-[0_0_8px_rgba(249,115,22,0.4)]"></span><span>Medium-High</span>
+                  </div>
+                  <div class="flex items-center gap-3"><span
+                      class="h-3 w-3 shrink-0 rounded-full bg-red-600 shadow-[0_0_8px_rgba(220,38,38,0.4)]"></span><span>High
+                      risk</span></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+
+        </div>
+      </article>
+
+      <aside class="flex flex-col gap-6 lg:h-full lg:overflow-hidden" aria-label="Heatmap details">
+        <div
+          class="flex h-full flex-col overflow-hidden rounded-2xl border border-slate-200 bg-[#fffdf4] shadow-premium isolate">
+          <!-- Tab Header -->
+          <div class="flex border-b border-slate-200 bg-[#fefcf8] p-1.5">
+            <button id="tab-alerts"
+              class="flex-1 rounded-lg px-4 py-2.5 text-xs font-bold transition-all duration-200 bg-white text-red-600 shadow-sm border border-slate-200">
+              Alerts
+            </button>
+            <button id="tab-news"
+              class="flex-1 rounded-lg px-4 py-2.5 text-xs font-bold transition-all duration-200 text-slate-500 hover:text-slate-700">
+              Verified
+            </button>
+          </div>
+
+          <!-- Tab Content Containers -->
+          <div class="flex-1 lg:overflow-hidden flex flex-col lg:h-full">
+            <!-- Alerts Panel -->
+            <div class="flex-1 lg:overflow-y-auto px-4 py-5 sm:px-6 custom-scrollbar lg:h-full"
+              id="panel-alerts">
+              <div class="mb-5 flex items-center justify-between">
+                <h3 class="text-[10px] font-bold text-red-600">Misinformation alerts</h3>
+                <div class="flex items-center gap-2">
+                  <span class="rounded-full bg-red-50 px-2 py-0.5 text-[10px] font-bold text-red-600"
+                    id="heatmap-misinformation-count">--</span>
+                </div>
+              </div>
+              <div class="grid gap-4" id="heatmap-misinformation-feed"></div>
+            </div>
+
+            <!-- Verified News Panel (Hidden by default) -->
+            <div class="hidden flex-1 lg:overflow-y-auto px-4 py-5 sm:px-6 custom-scrollbar lg:h-full"
+              id="panel-news">
+              <div class="mb-5 flex items-center justify-between">
+                <h3 class="text-[10px] font-bold text-emerald-600">Verified reporting</h3>
+                <div class="flex items-center gap-2">
+                  <span class="rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-bold text-emerald-600"
+                    id="heatmap-real-news-count">--</span>
+                </div>
+              </div>
+              <div class="grid gap-4" id="heatmap-real-news-feed"></div>
+            </div>
+          </div>
+        </div>
+      </aside>
+    </section>
+  </main>
+  <style>
+    .custom-scrollbar::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    .custom-scrollbar {
+      scrollbar-width: thin;
+      scrollbar-color: #e2e8f0 transparent;
+      scroll-behavior: smooth;
+      -webkit-overflow-scrolling: touch;
+      overscroll-behavior: contain;
+      transform: translate3d(0, 0, 0);
+      backface-visibility: hidden;
+      contain: content;
+    }
+
+    .custom-scrollbar::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+      background: #e2e8f0;
+      border-radius: 10px;
+    }
+
+    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+      background: #cbd5e1;
+    }
+
+    .feed-filter-control {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      background: white !important;
+      border: 1px solid #e2e8f0 !important;
+      border-radius: 8px !important;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
+      padding-top: 4px !important;
+      padding-bottom: 4px !important;
+      font-size: 10px !important;
+      letter-spacing: 0.05em !important;
+      color: #475569 !important;
+      cursor: pointer !important;
+    }
+
+    .feed-filter-control:hover {
+      border-color: #fb923c !important;
+      background: #fffaf5 !important;
+      color: #9a3412 !important;
+      box-shadow: 0 4px 12px rgba(251, 146, 60, 0.08) !important;
+    }
+
+    .feed-filter-control:focus {
+      outline: none !important;
+      border-color: #FF9933 !important;
+      box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.15) !important;
+    }
+
+    /* Premium Tricolor Border for Scroll Button */
+    #scroll-down-btn {
+      border: 3.5px solid transparent !important;
+      background: linear-gradient(#fffdf4, #fffdf4) padding-box, 
+                  linear-gradient(to right, rgba(255, 153, 51, 0.65), #ffffff, rgba(19, 136, 8, 0.65)) border-box !important;
+      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    }
+
+    #scroll-down-btn:hover {
+      background: linear-gradient(#fffaf5, #fffaf5) padding-box, 
+                  linear-gradient(to right, rgba(255, 153, 51, 0.9), #ffffff, rgba(19, 136, 8, 0.9)) border-box !important;
+      box-shadow: 0 15px 45px rgba(255, 153, 51, 0.15) !important;
+    }
+
+    @media (max-width: 1023px) {
+
+      #heatmap-misinformation-count,
+      #heatmap-real-news-count {
+        display: none !important;
+      }
+    }
+
+    #event-detail-card {
+      border: 1.5px solid transparent !important;
+      background: linear-gradient(to bottom, #fffdf4, #fffdf4) padding-box, 
+                  linear-gradient(135deg, rgba(255, 153, 51, 0.4), rgba(0, 0, 128, 0.15), rgba(19, 136, 8, 0.4)) border-box !important;
+    }
+  </style>
+  <div id="heatmap-tooltip"
+    class="pointer-events-none fixed z-[60] hidden max-w-xs rounded-xl border border-slate-800 bg-slate-950/95 px-4 py-3 text-[11px] font-semibold leading-relaxed text-white shadow-2xl backdrop-blur-md"
+    role="status" aria-hidden="true"></div>
+
+  <!-- Event Details Modal -->
+  <div id="event-detail-modal"
+    class="fixed inset-0 z-[200] flex items-center justify-center p-4 opacity-0 pointer-events-none transition-all duration-300"
+    role="dialog" aria-modal="true" aria-labelledby="event-detail-title" aria-hidden="true">
+    <div class="absolute inset-0 bg-slate-950/40 backdrop-blur-sm" id="event-detail-overlay"></div>
+    <div
+      class="relative w-full max-w-2xl scale-95 transform rounded-3xl bg-[#fffdf4] shadow-2xl transition-transform duration-300"
+      style="border: 1.5px solid transparent !important; background: linear-gradient(to bottom, #fffdf4, #fffdf4) padding-box, linear-gradient(135deg, rgba(255, 153, 51, 0.4), rgba(0, 0, 128, 0.15), rgba(19, 136, 8, 0.4)) border-box !important;"
+      id="event-detail-card">
+      <div class="p-6 sm:p-8">
+        <div class="flex items-start justify-between gap-4 mb-4">
+          <div class="flex flex-wrap items-center gap-2" id="event-detail-badges">
+            <!-- Badges injected here -->
+          </div>
+          <button type="button" id="event-detail-close" aria-label="Close event details"
+            class="rounded-full bg-slate-100 p-2 text-slate-500 hover:bg-slate-200 hover:text-slate-700 transition">
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+
+        <h2 class="text-xl sm:text-2xl font-extrabold text-slate-950 leading-tight mb-4" id="event-detail-title"></h2>
+
+        <div class="prose prose-sm prose-slate max-w-none max-h-[40vh] overflow-y-auto custom-scrollbar pr-2"
+          id="event-detail-content">
+          <!-- Content injected here -->
+        </div>
+
+        <div class="mt-8 flex justify-end">
+          <a id="event-detail-link" target="_blank" rel="noopener noreferrer"
+            class="hidden rounded-xl bg-slate-950 px-6 py-2.5 text-sm font-bold text-white shadow-md transition hover:bg-slate-800 hover:-translate-y-0.5">
+            Read Full Article
+            <svg class="ml-2 inline-block h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
+                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>

frontend/index.html

@@ -1,580 +1,547 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Misinformation Heatmap — Real-Time AI Detection Across India</title>
-    <meta name="description" content="AI-powered platform detecting misinformation across all 36 Indian states in real-time using IndicBERT, satellite verification, and fact-checking networks.">
-    <link rel="icon" type="image/x-icon" href="/public/Misinfo.ico">
-    <link rel="shortcut icon" type="image/x-icon" href="/public/Misinfo.ico">
-    <link rel="icon" type="image/vnd.microsoft.icon" href="/public/Misinfo.ico">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --saffron:        #E87722;
-            --saffron-light:  #FF9933;
-            --saffron-dark:   #c4601a;
-            --green:          #138808;
-            --green-light:    #1ea50e;
-            --navy:           #000080;
-            --bg:             #FAFAF7;
-            --bg-card:        #FFFFFF;
-            --bg-card-hover:  #F5F5F0;
-            --border:         #E8E8E0;
-            --border-accent:  rgba(232,119,34,0.3);
-            --text-primary:   #1A1A1A;
-            --text-secondary: #555555;
-            --text-muted:     #888888;
-            --shadow-sm:      0 2px 8px rgba(0,0,0,0.08);
-            --shadow-md:      0 4px 20px rgba(0,0,0,0.10);
-            --shadow-lg:      0 8px 40px rgba(0,0,0,0.12);
-            --radius:         16px;
-            --radius-sm:      10px;
-        }
-
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        html { scroll-behavior: smooth; }
-
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: var(--bg);
-            color: var(--text-primary);
-            min-height: 100vh;
-            overflow-x: hidden;
-            max-width: 100vw;
-        }
-
-        /* ─── NAVBAR ─── */
-        .navbar {
-            position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
-            padding: 0 2rem; height: 62px;
-            display: flex; align-items: center;
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(20px);
-            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            transition: box-shadow 0.3s;
-        }
-        .navbar.scrolled { box-shadow: var(--shadow-sm); }
-        .nav-inner { width: 100%; max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
-        .logo { display: flex; align-items: center; gap: 4px; font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 800; text-decoration: none; color: var(--text-primary); }
-        .logo-badge { font-size: 0.65rem; font-weight: 700; background: var(--saffron); color: #fff; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; }
-        .logo .logo-name { color: var(--saffron); }
-
-        .nav-links { display: flex; align-items: center; gap: 0.25rem; }
-        .nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.88rem; font-weight: 500; padding: 0.4rem 0.9rem; border-radius: var(--radius-sm); transition: all 0.2s; }
-        .nav-link:hover { color: var(--saffron); background: rgba(232,119,34,0.07); }
-        .nav-link.active { color: var(--saffron); background: rgba(232,119,34,0.1); border: 1px solid rgba(232,119,34,0.2); }
-
-        .status-pill { display: flex; align-items: center; gap: 6px; background: rgba(19,136,8,0.08); border: 1px solid rgba(19,136,8,0.25); border-radius: 20px; padding: 5px 14px; font-size: 0.8rem; font-weight: 600; color: var(--green); }
-        .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
-        @keyframes pulse { 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(19,136,8,0.4);} 50%{opacity:0.8; box-shadow:0 0 0 5px rgba(19,136,8,0);} }
-
-        /* Hamburger Menu */
-        .hamburger-btn {
-            display: none;
-            flex-direction: column;
-            gap: 5px;
-            background: none;
-            border: none;
-            cursor: pointer;
-            padding: 8px;
-            z-index: 2001;
-            position: relative;
-        }
-        .hamburger-line {
-            width: 24px;
-            height: 2px;
-            background: var(--text-primary);
-            transition: all 0.3s;
-            border-radius: 2px;
-        }
-        .hamburger-btn.active .hamburger-line:nth-child(1) {
-            transform: rotate(45deg) translate(5px, 5px);
-        }
-        .hamburger-btn.active .hamburger-line:nth-child(2) {
-            opacity: 0;
-        }
-        .hamburger-btn.active .hamburger-line:nth-child(3) {
-            transform: rotate(-45deg) translate(5px, -5px);
-        }
-
-        /* Mobile Menu Overlay */
-        .mobile-menu-overlay {
-            position: fixed;
-            top: 0;
-            right: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, rgba(255, 153, 51, 0.98), rgba(232, 119, 34, 0.95));
-            z-index: 1500;
-            transform: translateX(100%);
-            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            padding: 80px 2rem 2rem;
-        }
-        .mobile-menu-overlay.active {
-            transform: translateX(0);
-        }
-        .mobile-menu-top {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
-        .mobile-menu-link {
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: #fff;
-            text-decoration: none;
-            padding: 1rem 0;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-            transition: all 0.3s ease;
-        }
-        .mobile-menu-link:hover {
-            padding-left: 1rem;
-            background: rgba(255, 255, 255, 0.1);
-        }
-        .mobile-menu-bottom {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-            padding-top: 2rem;
-            border-top: 1px solid rgba(255, 255, 255, 0.2);
-        }
-        .mobile-menu-brand {
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.2rem;
-            font-weight: 800;
-            color: #fff;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .mobile-menu-brand .logo-badge {
-            background: #fff;
-            color: var(--saffron);
-        }
-
-        /* ─── HERO ─── */
-        .hero {
-            position: relative; z-index: 1; padding: 140px 2rem 100px;
-            text-align: center;
-            /* Premium Indian Tricolor inspired gradient with smooth transitions */
-            background: linear-gradient(135deg,
-                #FF9933 0%,                    /* Saffron */
-                #FFB84D 15%,                   /* Light saffron transition */
-                #FFF5E6 30%,                   /* Warm cream */
-                #F8F8F8 45%,                   /* Soft off-white */
-                #F0F8F0 60%,                   /* Light green tint */
-                #E8F5E8 75%,                   /* Soft green */
-                #138808 100%                   /* Green */
-            );
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-        }
-        .hero::after {
-            content: '';
-            position: absolute;
-            top: 0; left: 0; right: 0; bottom: 0;
-            background: radial-gradient(ellipse at center, 
-                rgba(255,255,255,0.1) 0%, 
-                rgba(255,255,255,0) 70%);
-            pointer-events: none;
-        }
-        .hero::before {
-            content: '';
-            position: absolute;
-            top: 0; left: 0; right: 0; bottom: 0;
-            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="%23FF9933" opacity="0.1"/><circle cx="80" cy="40" r="1" fill="%23138808" opacity="0.1"/><circle cx="40" cy="80" r="1" fill="%23FF9933" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
-            opacity: 0.3;
-            pointer-events: none;
-        }
-        .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--saffron); background: rgba(255, 153, 51, 0.2); border: 1px solid rgba(255, 153, 51, 0.4); border-radius: 20px; padding: 6px 16px; margin-bottom: 2rem; letter-spacing: 0.5px; text-transform: uppercase; }
-        .hero h1 { font-family: 'Outfit', sans-serif; font-size: clamp(2.4rem,6vw,4rem); font-weight: 900; line-height: 1.1; letter-spacing: -1px; margin-bottom: 1.5rem; background: linear-gradient(135deg, #FF9933 0%, #B45309 50%, #138808 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
-        .hero p { font-size: 1.1rem; color: var(--text-secondary); max-width: 580px; margin: 0 auto 2.5rem; line-height: 1.7; }
-        .hero-actions { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
-        .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #FF9933 0%, #B45309 100%); color: white; font-weight: 700; font-size: 0.95rem; padding: 0.8rem 2rem; border-radius: var(--radius-sm); text-decoration: none; transition: all 0.2s; box-shadow: 0 4px 20px rgba(255, 153, 51, 0.3); }
-        .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(255, 153, 51, 0.4); }
-        .btn-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--text-primary); font-weight: 600; font-size: 0.95rem; padding: 0.75rem 1.75rem; border-radius: var(--radius-sm); border: 1.5px solid var(--border); text-decoration: none; transition: all 0.2s; }
-        .btn-outline:hover { border-color: var(--saffron); color: var(--saffron); background: rgba(232,119,34,0.04); }
-
-        /* ─── STATS STRIP ─── */
-        .stats-strip { position: relative; z-index: 1; padding: 5rem 2rem 5rem; background: rgba(255, 255, 255, 0.95); }
-        .stats-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
-        .stat-pill {
-            background: rgba(255, 255, 255, 0.8); border: 1px solid var(--border); border-radius: var(--radius);
-            padding: 1.75rem 1.5rem; text-align: center; box-shadow: var(--shadow-sm);
-            transition: all 0.25s;
-        }
-        .stat-pill:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-accent); }
-        .stat-pill .val { font-family: 'Outfit', sans-serif; font-size: 2.2rem; font-weight: 900; color: var(--saffron); line-height: 1; }
-        .stat-pill .lbl { font-size: 0.8rem; color: var(--text-muted); margin-top: 6px; font-weight: 500; }
-
-        /* ─── FEATURES ─── */
-        .features { position: relative; z-index: 1; padding: 5rem 2rem; background: rgba(255, 255, 255, 0.9); }
-        .section-header { text-align: center; margin-bottom: 3.5rem; }
-        .section-tag { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--green); background: rgba(19,136,8,0.08); border: 1px solid rgba(19,136,8,0.2); border-radius: 20px; padding: 4px 14px; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.5px; }
-        .section-title { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.75rem; }
-        .section-sub { color: var(--text-secondary); font-size: 1rem; }
-
-        .features-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
-        .feature-card {
-            background: white; border: 1px solid var(--border); border-radius: var(--radius);
-            padding: 2rem; transition: all 0.25s; box-shadow: var(--shadow-sm);
-        }
-        .feature-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-accent); transform: translateY(-2px); }
-        .feature-icon { font-size: 2rem; margin-bottom: 1rem; }
-        .feature-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; }
-        .feature-desc { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; }
-
-        /* ─── LIVE TICKER ─── */
-        .ticker-section { position: relative; z-index:1; padding: 3rem 2rem; }
-        .ticker-inner { max-width: 1100px; margin: 0 auto; }
-        .ticker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
-        .ticker-title { font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--text-primary); }
-        .ticker-live { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: #dc2626; }
-        .ticker-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #dc2626; animation: pulse-red 1.5s infinite; }
-        @keyframes pulse-red { 0%,100%{opacity:1;}50%{opacity:0.4;} }
-
-        .ticker-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
-        .ticker-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.2rem; border-left: 3px solid var(--green); box-shadow: var(--shadow-sm); }
-        .ticker-card.fake { border-left-color: #dc2626; }
-        .ticker-card.uncertain { border-left-color: #f59e0b; }
-        .ticker-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-bottom: 0.6rem; }
-        .ticker-badge.real { background: rgba(19,136,8,0.1); color: var(--green); }
-        .ticker-badge.fake { background: rgba(220,38,38,0.1); color: #dc2626; }
-        .ticker-badge.uncertain { background: rgba(245,158,11,0.1); color: #d97706; }
-        .ticker-text { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin-bottom: 0.4rem; }
-        .ticker-meta { font-size: 0.75rem; color: var(--text-muted); }
-
-        /* ─── CTA ─── */
-        .cta-section { position: relative; z-index:1; padding: 5rem 2rem; text-align: center; background: linear-gradient(135deg, rgba(232,119,34,0.06), rgba(19,136,8,0.04)); }
-        .cta-inner { max-width: 600px; margin: 0 auto; }
-        .cta-title { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 1rem; }
-        .cta-sub { color: var(--text-secondary); margin-bottom: 2rem; font-size: 1rem; line-height: 1.6; }
-
-        /* ─── FOOTER ─── */
-        .footer { position: relative; z-index:1; border-top: 1px solid var(--border); padding: 2rem; text-align: center; color: var(--text-muted); font-size: 0.82rem; }
-        .footer-flag { display: inline-flex; gap: 4px; margin-bottom: 8px; }
-        .flag-stripe { width: 18px; height: 8px; border-radius: 2px; }
-
-        /* ---- RESPONSIVE ---- */
-        @media (max-width: 1200px) {
-            .hero { padding: 120px 1.5rem 80px; }
-            .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
-            .features-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
-        }
-        
-        @media (max-width: 768px) {
-            .navbar { padding: 0 1rem; }
-            .nav-links { gap: 0.5rem; }
-            .nav-link { font-size: 0.8rem; padding: 0.3rem 0.7rem; }
-            .hero { 
-                padding: 80px 1rem 60px;
-                height: 100vh;
-                min-height: 100vh;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-            }
-            .hero h1 { font-size: 2.2rem; }
-            .hero p { font-size: 1rem; max-width: 100%; }
-            .hero-actions { gap: 0.75rem; }
-            .btn-primary, .btn-outline { font-size: 0.85rem; padding: 0.7rem 1.5rem; }
-            .stats-strip { padding: 4rem 1rem 4rem; }
-            .stats-inner { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
-            .stat-pill { padding: 1.25rem 1rem; }
-            .features-grid { grid-template-columns: 1fr; gap: 1rem; }
-            .feature-card { padding: 1.5rem; }
-            .ticker-cards { grid-template-columns: 1fr; gap: 0.75rem; }
-            .cta-section { padding: 3rem 1rem; }
-        }
-        
-        @media (max-width: 480px) {
-            .navbar { padding: 0 0.75rem; }
-            .logo { font-size: 1rem; }
-            .logo-badge { font-size: 0.55rem; }
-            .nav-links { display: none; }
-            .status-pill { display: none; }
-            .hamburger-btn { display: flex; }
-            .mobile-menu-overlay { 
-                padding: 100px 1rem 1rem;
-                z-index: 1499;
-            }
-            .mobile-menu-link { font-size: 1.3rem; padding: 0.8rem 0; }
-            .hero { 
-                padding: 60px 0.75rem 40px;
-                height: 100vh;
-                min-height: 100vh;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                position: relative;
-            }
-            .hero h1 { font-size: 1.8rem; line-height: 1.2; }
-            .hero p { font-size: 0.9rem; }
-            .hero-actions { flex-direction: column; align-items: stretch; }
-            .btn-primary, .btn-outline { width: 100%; justify-content: center; font-size: 0.8rem; padding: 0.8rem; }
-            .stats-strip { padding: 3rem 0.75rem 3rem; }
-            .stats-inner { grid-template-columns: 1fr; gap: 0.5rem; }
-            .stat-pill { padding: 1rem; }
-            .stat-pill .val { font-size: 1.8rem; }
-            .features { padding: 3rem 0.75rem; }
-            .feature-card { padding: 1.25rem; }
-            .ticker-section { padding: 2rem 0.75rem; }
-            .ticker-card { padding: 1rem; }
-            .footer { padding: 1.5rem 0.75rem; }
-        }
-    </style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
+  <meta name="referrer" content="strict-origin-when-cross-origin">
+  <meta http-equiv="Content-Security-Policy"
+    content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://ndg07-heatmap.hf.space; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests">
+  <style>
+    html,
+    body {
+      overflow-x: hidden;
+      width: 100%;
+      position: relative;
+    }
+
+    /* Surface Duo and Surface Pro 7 specific enhancements */
+
+    /* Base styles for all targeted 'Pro' and 'Duo' viewports */
+    @media screen and (device-width: 540px) and (device-height: 720px),
+    screen and (device-width: 1114px) and (device-height: 705px),
+    screen and (device-width: 912px) and (device-height: 1368px),
+    screen and (device-width: 912px) and (device-height: 608px) {
+
+      .hero-btn {
+        min-width: 210px !important;
+        border-radius: 12px !important;
+        /* Moderately curvy as requested */
+        padding: 0.875rem 2rem !important;
+        font-size: 0.95rem !important;
+        letter-spacing: 0.025em !important;
+        border-width: 2px !important;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      }
+
+      .hero-btn:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
+      }
+    }
+
+    /* Surface Duo Specific: Vertical Stacking & Horizontal Centering */
+    @media screen and (device-width: 540px) and (device-height: 720px),
+    screen and (device-width: 1114px) and (device-height: 705px) {
+      #hero-buttons {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        justify-content: center !important;
+        gap: 1.25rem !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+        width: 100% !important;
+      }
+
+      .hero-btn {
+        width: 280px !important;
+        /* Consistent width for stacked look */
+        max-width: 90% !important;
+      }
+    }
+
+    /* Surface Pro 7 Specific Typography & UI Enhancements (Portrait & Landscape) */
+    @media screen and (device-width: 912px) and (device-height: 1368px),
+    screen and (device-width: 912px) and (device-height: 608px) {
+      #hero-tagline {
+        font-size: 0.95rem !important;
+        /* Increased a bit */
+        letter-spacing: 0.28em !important;
+      }
+
+      #hero-title {
+        font-size: 4rem !important;
+        /* Kept at 4rem for impact */
+        line-height: 1.1 !important;
+      }
+
+      #hero-description {
+        font-size: 1.35rem !important;
+        /* Increased just a bit */
+        line-height: 1.8 !important;
+        max-width: 90% !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+      }
+
+      /* Slightly larger buttons for Pro 7 */
+      .hero-btn {
+        min-width: 230px !important;
+        padding: 1rem 2.5rem !important;
+        font-size: 1.05rem !important;
+      }
+
+      /* Pill Scaling for Pro 7 */
+      #bottom-premium-nav {
+        bottom: 3rem !important;
+        gap: 1.25rem !important;
+        padding: 0.75rem !important;
+        border-width: 2px !important;
+      }
+
+      #bottom-premium-nav a,
+      #bottom-premium-nav button {
+        height: 3.75rem !important;
+        width: 3.75rem !important;
+      }
+
+      #bottom-premium-nav a.w-20,
+      #bottom-premium-nav button.w-20 {
+        width: 6rem !important;
+      }
+
+      #bottom-premium-nav svg {
+        width: 1.75rem !important;
+        height: 1.75rem !important;
+      }
+    }
+
+    /* Large 'Pro' viewports (Duo Dual & Pro 7 Landscape) - Desktop-like layout */
+    @media screen and (device-width: 1114px) and (device-height: 705px),
+    screen and (device-width: 912px) and (device-height: 608px),
+    screen and (device-width: 1024px) and (device-height: 600px),
+    screen and (device-width: 1280px) and (device-height: 800px) {
+
+      #hero-main-layout {
+        grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr) !important;
+        gap: 3rem !important;
+        padding-top: 5rem !important;
+        padding-bottom: 5rem !important;
+      }
+
+      #hero-aside {
+        display: block !important;
+        opacity: 1 !important;
+        visibility: visible !important;
+        animation: fadeIn 0.8s ease-out forwards !important;
+      }
+
+      /* Desktop-style nav logic for non-Duo Pro devices or Duo Dual (if preferred side-by-side there, but user requested stacking for Duo) */
+      /* Note: Duo logic above overrides this for Duo specific viewports */
+      #hero-buttons {
+        display: flex !important;
+        flex-direction: row !important;
+        justify-content: flex-start !important;
+        gap: 1.5rem !important;
+        margin-top: 3rem !important;
+      }
+
+      /* Enable desktop navigation for these wider 'Pro' screens */
+      [data-desktop-nav] {
+        display: flex !important;
+      }
+
+      #menu-toggle {
+        display: none !important;
+      }
+
+      #bottom-premium-nav {
+        display: none !important;
+      }
+    }
+
+    /* Specific scaling for Nest Hub (1024x600) - Compact Desktop */
+    @media screen and (device-width: 1024px) and (device-height: 600px) {
+      #hero-main-layout {
+        gap: 2rem !important;
+        padding-top: 2.5rem !important;
+        padding-bottom: 2.5rem !important;
+      }
+
+      #hero-tagline {
+        font-size: 0.8rem !important;
+        letter-spacing: 0.2em !important;
+      }
+
+      #hero-title {
+        font-size: 2.5rem !important;
+        line-height: 1.05 !important;
+        margin-top: 0.5rem !important;
+      }
+
+      #hero-description {
+        font-size: 1rem !important;
+        line-height: 1.5 !important;
+        margin-top: 0.75rem !important;
+        max-width: 85% !important;
+      }
+
+      #hero-buttons {
+        margin-top: 1.5rem !important;
+        gap: 1rem !important;
+      }
+
+      .hero-btn {
+        min-width: 180px !important;
+        padding: 0.75rem 1.5rem !important;
+        font-size: 0.85rem !important;
+      }
+
+      #hero-aside {
+        padding: 1.125rem !important;
+        max-width: 380px !important;
+      }
+
+      #hero-aside h2 {
+        font-size: 1.25rem !important;
+      }
+
+      #hero-aside img {
+        height: 2.5rem !important;
+        width: 2.5rem !important;
+      }
+
+      #hero-aside .grid {
+        margin-top: 0.75rem !important;
+        gap: 0.5rem !important;
+      }
+
+      #hero-aside .rounded-lg {
+        padding: 0.625rem !important;
+      }
+
+      #hero-aside .text-2xl {
+        font-size: 1.25rem !important;
+      }
+
+      #hero-aside .text-xs {
+        font-size: 0.75rem !important;
+      }
+
+      #hero-aside .mt-6 {
+        margin-top: 0.75rem !important;
+      }
+
+      #home-data-state {
+        margin-top: 0.75rem !important;
+        font-size: 0.8rem !important;
+        line-height: 1.4 !important;
+      }
+    }
+
+    /* Specific scaling for Nest Hub Max (1280x800) - More breathing room */
+    @media screen and (device-width: 1280px) and (device-height: 800px) {
+      body #main-content {
+        padding-top: 6rem !important;
+        padding-bottom: 1.5rem !important;
+        min-height: calc(100vh - 1rem) !important;
+      }
+
+      #hero-main-layout {
+        gap: 2.75rem !important;
+      }
+    }
+
+    /* Mobile-specific fix for typewriter text wrapping (iPhone XR and similar) */
+    @media screen and (max-width: 430px) {
+      #hero-title {
+        max-width: 22ch !important;
+        /* Allow more characters per line */
+        font-size: 1.7rem !important;
+        /* Slightly smaller than text-3xl to prevent wrapping */
+      }
+
+      #hero-description {
+        font-size: 0.85rem !important;
+        /* Keep description balanced */
+      }
+    }
+
+    #hero-section {
+      background: linear-gradient(135deg, #FF9933 0%, #FFB84D 15%, #FFF5E6 30%, #F8F8F8 45%, #F0F8F0 60%, #E8F5E8 75%, #138808 100%) !important;
+    }
+
+    #hero-main-layout {
+      display: flex !important;
+      flex-direction: column !important;
+      align-items: center !important;
+      justify-content: center !important;
+      text-align: center !important;
+      padding-top: 5rem !important;
+      padding-bottom: 5rem !important;
+    }
+  </style>
+  <title>Misinformation Heatmap - Real-Time AI Detection Across India</title>
+  <meta name="description"
+    content="AI-powered platform detecting misinformation across Indian states in real time with multilingual analysis, source verification, and live heatmap monitoring.">
+  <link rel="icon" type="image/x-icon" href="/assets/Misinfo.ico">
+  <link rel="shortcut icon" type="image/x-icon" href="/assets/Misinfo.ico">
+  <link rel="manifest" href="/manifest.json">
+  <link rel="stylesheet" href="/assets/css/styles.css">
+  <script type="module" src="/assets/js/main.js"></script>
 </head>
-<body>
-    <!-- Navbar -->
-    <nav class="navbar" id="navbar">
-        <div class="nav-inner">
-            <a href="/" class="logo">
-                <span class="logo-badge">IN</span>
-                <span>Misinformation</span><span class="logo-name">&nbsp;Heatmap</span>
-            </a>
-            <div class="nav-links">
-                <a href="/" class="nav-link active">Home</a>
-                <a href="/dashboard" class="nav-link">Dashboard</a>
-                <a href="/map/enhanced-india-heatmap.html" class="nav-link">Heatmap</a>
-            </div>
-            <div class="status-pill">
-                <span class="status-dot"></span>
-                <span id="nav-status">System Ready</span>
-            </div>
-            <button class="hamburger-btn" id="hamburger-btn" aria-label="Toggle menu">
-                <span class="hamburger-line"></span>
-                <span class="hamburger-line"></span>
-                <span class="hamburger-line"></span>
-            </button>
-        </div>
-    </nav>
-
-    <!-- Mobile Menu Overlay -->
-    <div class="mobile-menu-overlay" id="mobile-menu">
-        <div class="mobile-menu-top">
-            <a href="/" class="mobile-menu-link">Home</a>
-            <a href="/dashboard" class="mobile-menu-link">Dashboard</a>
-            <a href="/map/enhanced-india-heatmap.html" class="mobile-menu-link">Heatmap</a>
-        </div>
-        <div class="mobile-menu-bottom">
-            <div class="mobile-menu-brand">
-                <span class="logo-badge">IN</span>
-                <span>Misinformation</span><span class="logo-name">&nbsp;Heatmap</span>
-            </div>
-            <div class="mobile-menu-tags">
-                <span class="menu-tag alpha">Alpha v1.0</span>
-                <span class="menu-tag live">● Live</span>
-            </div>
-        </div>
-    </div>
 
-    <!-- Hero -->
-    <section class="hero">
-        <div class="hero-eyebrow">⚡ Powered by IndicBERT &amp; 5-Model Ensemble AI</div>
-        <h1>
-            Combating Fake News<br>
-            Across India
-        </h1>
-        <p>An AI-powered platform that detects and tracks misinformation across <strong>34+ Indian news sources</strong>, covering all 36 states and union territories in real-time.</p>
-        <div class="hero-actions">
-            <a href="/map/enhanced-india-heatmap.html" class="btn-primary">🗺️ Explore Live Heatmap</a>
-            <a href="/dashboard" class="btn-outline">📊 View Dashboard</a>
+<body data-page="home" class="min-h-screen overflow-x-hidden text-slate-900 antialiased relative">
+  <div class="fixed inset-0 -z-10 bg-white"></div>
+  <a class="absolute w-[1px] h-[1px] p-0 m-[-1px] overflow-hidden clip-[rect(0,0,0,0)] whitespace-nowrap border-0 focus:static focus:w-auto focus:h-auto focus:p-0 focus:m-0 focus:overflow-visible focus:clip-auto focus:whitespace-normal focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-lg focus:bg-slate-950 focus:px-4 focus:py-2 focus:text-sm focus:font-bold focus:text-white focus:shadow-lg"
+    href="#main-content">Skip to content</a>
+  <div data-navbar></div>
+
+  <main id="main-content" class="pt-12">
+    <section id="hero-section" class="relative isolate min-h-[calc(100svh-4rem)] overflow-hidden">
+      <!-- Premium Hero Background Layer -->
+      <div class="absolute inset-0 -z-10 overflow-hidden [mask-image:linear-gradient(to_bottom,white_90%,transparent)]">
+        <!-- Main Saffron Glow -->
+        <div
+          class="absolute -top-[15%] -left-[10%] h-[600px] w-[600px] rounded-full bg-saffron-500/30 blur-[100px] animate-float opacity-90">
         </div>
-    </section>
 
-    <!-- Stats strip -->
-    <div class="stats-strip">
-        <div class="section-header">
-            <div class="section-tag">Real-Time Metrics</div>
-            <h2 class="section-title">Platform Performance Overview</h2>
-            <p class="section-sub">Live statistics showcasing our AI-powered misinformation detection capabilities across India</p>
+        <!-- Main Green Glow -->
+        <div
+          class="absolute top-[30%] -right-[10%] h-[550px] w-[550px] rounded-full bg-india-green-500/25 blur-[110px] animate-float opacity-80"
+          style="animation-delay: 2s"></div>
+
+        <!-- Ashoka Blue Glow -->
+        <div
+          class="absolute top-1/2 left-1/4 h-[400px] w-[400px] rounded-full bg-ashoka-blue-500/15 blur-[120px] animate-pulse opacity-60"
+          style="animation-delay: 4s"></div>
+
+        <!-- Subtle Saffron/Green Accent Gradients -->
+        <div
+          class="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(255,153,51,0.15),transparent_50%),radial-gradient(circle_at_80%_80%,rgba(19,136,8,0.15),transparent_50%)]">
         </div>
-        <div class="stats-inner">
-            <div class="stat-pill">
-                <div class="val" id="stat-events">—</div>
-                <div class="lbl">Events Analyzed</div>
-            </div>
-            <div class="stat-pill">
-                <div class="val" style="color:var(--green);">91%</div>
-                <div class="lbl">Detection Accuracy</div>
-            </div>
-            <div class="stat-pill">
-                <div class="val" style="color:var(--navy);">36</div>
-                <div class="lbl">States &amp; UTs</div>
-            </div>
-            <div class="stat-pill">
-                <div class="val">34+</div>
-                <div class="lbl">News Sources</div>
-            </div>
+
+        <!-- Refined noise and pattern -->
+        <div class="absolute inset-0 opacity-[0.04]"
+          style="background-image: radial-gradient(circle at 2px 2px, rgba(0,0,0,0.15) 1px, transparent 0); background-size: 48px 48px;">
         </div>
-    </div>
 
-    <!-- Features -->
-    <section class="features">
-        <div class="section-header">
-            <div class="section-tag">How It Works</div>
-            <h2 class="section-title">Multi-Layer Detection Engine</h2>
-            <p class="section-sub">Every article passes through 5 specialized models before a verdict is issued</p>
+        <!-- Diagonal Accent Overlay -->
+        <div
+          class="absolute inset-0 bg-gradient-to-br from-saffron-500/10 via-transparent to-india-green-500/10 opacity-70">
         </div>
-        <div class="features-grid">
-            <div class="feature-card">
-                <div class="feature-icon">🧠</div>
-                <div class="feature-title">IndicBERT NLP</div>
-                <div class="feature-desc">State-of-the-art multilingual transformer trained on Indian languages including Hindi, Tamil, Telugu, and 20+ more.</div>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">🔍</div>
-                <div class="feature-title">Fact-Check Engine</div>
-                <div class="feature-desc">Cross-references against debunked claims from Alt News, Boom Live, The Quint WebQoof, and India Today Fact Check.</div>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">📡</div>
-                <div class="feature-title">Real-Time RSS Ingestion</div>
-                <div class="feature-desc">Monitors 34+ Indian news sources including TOI, The Hindu, NDTV, Indian Express, and regional outlets every 2 minutes.</div>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">🗺️</div>
-                <div class="feature-title">Geographic Mapping</div>
-                <div class="feature-desc">200+ city-to-state mappings identify the precise geographic origin of each misinformation event.</div>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">📊</div>
-                <div class="feature-title">Ensemble Classifier</div>
-                <div class="feature-desc">5-model ensemble combining linguistic analysis, source credibility, ML classification, and cross-reference scoring.</div>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">🌐</div>
-                <div class="feature-title">GDELT Integration</div>
-                <div class="feature-desc">Pulls India-specific news from the Global Database of Events — the world's largest open-source news index. Zero cost, unlimited volume.</div>
-            </div>
+      </div>
+      <div id="hero-main-layout"
+        class="mx-auto flex flex-col justify-center items-center text-center min-h-[calc(100svh-4rem)] w-full max-w-7xl px-4 py-8 sm:px-6 sm:py-12 md:px-8 lg:py-16">
+        <div class="min-w-0 max-w-4xl flex flex-col justify-center items-center text-center mx-auto animate-fade-in-up">
+          <p id="hero-tagline" class="text-xs font-black text-saffron-500 mx-auto">
+            Ai monitoring
+            for India-wide news signals</p>
+          <h1 id="hero-title"
+            class="mt-4 max-w-[20ch] text-3xl font-black leading-tight tracking-normal sm:max-w-[25ch] sm:text-5xl lg:text-6xl mx-auto text-center">
+            <span class="block text-saffron-600">Track</span>
+            <span
+              class="block bg-clip-text text-transparent bg-gradient-to-b from-ashoka-blue-200 via-ashoka-blue-500 to-ashoka-blue-500">misinformation</span>
+            <span class="flex items-center justify-center min-h-[1.2em]">
+              <span id="typewriter-text" class="inline-block pb-2 text-india-green-500">before it spreads.</span>
+              <span class="w-[0.1em] h-[0.9em] bg-saffron-500 ml-1 animate-blink"></span>
+            </span>
+          </h1>
+          <p id="hero-description"
+            class="mt-4 max-w-2xl text-sm leading-6 text-slate-600 sm:text-lg mx-auto text-center leading-relaxed">
+            A real-time intelligence surface for reviewing state-wise misinformation signals, live classifications, and
+            source health across Indian news coverage.
+          </p>
+          <div id="hero-buttons" class="mt-8 flex flex-wrap justify-center gap-4 mt-6">
+            <a href="/heatmap.html"
+              class="hero-btn inline-flex min-h-11 items-center justify-center rounded-lg bg-ashoka-blue-500 px-5 py-2.5 text-sm font-bold text-white shadow-premium transition hover:-translate-y-1 hover:bg-ashoka-blue-600 hover:shadow-[0_0_20px_rgba(0,0,128,0.3)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-saffron-500 focus-visible:ring-offset-2">Explore
+              live heatmap</a>
+            <a href="/dashboard.html"
+              class="hero-btn inline-flex min-h-11 items-center justify-center rounded-lg border border-slate-200 bg-white px-5 py-2.5 text-sm font-bold text-slate-800 shadow-premium transition hover:-translate-y-1 hover:border-saffron-300 hover:bg-saffron-50 hover:text-saffron-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-saffron-500 focus-visible:ring-offset-2">Open
+              dashboard</a>
+          </div>
         </div>
+      </div>
     </section>
 
-    <!-- Live Ticker -->
-    <section class="ticker-section">
-        <div class="ticker-inner">
-            <div class="ticker-header">
-                <div class="ticker-title">Live Activity Feed</div>
-                <div class="ticker-live"><span class="ticker-live-dot"></span> LIVE</div>
-            </div>
-            <div class="ticker-cards" id="ticker-cards">
-                <div class="ticker-card"><div class="ticker-text" style="color:var(--text-muted); text-align:center;">⏳ Loading recent events…</div></div>
-            </div>
-        </div>
+    <section class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 sm:py-14 lg:px-8" aria-labelledby="performance-title">
+      <div class="mb-6 max-w-3xl">
+        <p class="text-xs font-black uppercase tracking-[0.18em] text-saffron-700">Platform performance overview</p>
+        <h2 id="performance-title" class="mt-2 text-2xl font-black tracking-normal text-slate-900 sm:text-3xl">Current
+          signal coverage in real time.</h2>
+        <p class="mt-3 text-sm leading-7 text-slate-600 sm:text-base">Every value below is populated from API responses.
+          Empty states stay visible when data is unavailable.</p>
+      </div>
+
+      <div class="grid grid-cols-2 gap-3 md:grid-cols-4">
+        <article
+          class="min-w-0 rounded-xl border border-t-4 border-slate-200 border-t-ashoka-blue-500 bg-white p-4 shadow-premium sm:p-5 transition hover:-translate-y-1">
+          <p class="text-xs font-black uppercase tracking-[0.14em] text-slate-500">Events analyzed</p>
+          <p class="mt-4 text-3xl font-black leading-none text-ashoka-blue-500 sm:text-4xl" id="home-total-events"
+            aria-live="polite">--</p>
+          <p class="mt-2 text-xs font-semibold leading-5 text-slate-500">Processed by the live pipeline</p>
+        </article>
+        <article
+          class="min-w-0 rounded-xl border border-t-4 border-slate-200 border-t-saffron-500 bg-white p-4 shadow-premium sm:p-5 transition hover:-translate-y-1">
+          <p class="text-xs font-black uppercase tracking-[0.14em] text-slate-500">Misinformation</p>
+          <p class="mt-4 text-3xl font-black leading-none text-red-600 sm:text-4xl" id="home-misinformation-events"
+            aria-live="polite">--</p>
+          <p class="mt-2 text-xs font-semibold leading-5 text-slate-500">High-confidence risk signals</p>
+        </article>
+        <article
+          class="min-w-0 rounded-xl border border-t-4 border-slate-200 border-t-india-green-500 bg-white p-4 shadow-premium sm:p-5 transition hover:-translate-y-1">
+          <p class="text-xs font-black uppercase tracking-[0.14em] text-slate-500">Verified news</p>
+          <p class="mt-4 text-3xl font-black leading-none text-india-green-600 sm:text-4xl" id="home-verified-events"
+            aria-live="polite">--</p>
+          <p class="mt-2 text-xs font-semibold leading-5 text-slate-500">Authenticated reporting signals</p>
+        </article>
+        <article
+          class="min-w-0 rounded-xl border border-t-4 border-slate-200 border-t-ashoka-blue-400 bg-white p-4 shadow-premium sm:p-5 transition hover:-translate-y-1">
+          <p class="text-xs font-black uppercase tracking-[0.14em] text-slate-500">AI Accuracy</p>
+          <p class="mt-4 text-3xl font-black leading-none text-ashoka-blue-600 sm:text-4xl" id="home-accuracy-events"
+            aria-live="polite">--</p>
+          <p class="mt-2 text-xs font-semibold leading-5 text-slate-500">Model classification confidence</p>
+        </article>
+      </div>
+    </section>
+
+    <section class="mx-auto w-full max-w-7xl mt-10 px-4 pb-12 sm:px-6 lg:px-8" aria-labelledby="capabilities-title">
+      <div class="mb-8 max-w-3xl">
+        <p class="text-xs font-black uppercase tracking-[0.18em] text-saffron-700">Detection workflow</p>
+        <h2 id="capabilities-title" class="mt-2 text-2xl font-black tracking-normal text-slate-900 sm:text-3xl">Built
+          for fast triage and careful verification.</h2>
+        <p class="mt-3 text-sm leading-7 text-slate-600 sm:text-base">The interface emphasizes scannable signals, clear
+          state, and traceable classifications without hiding uncertainty.</p>
+      </div>
+
+      <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mt-8">
+        <article
+          class="rounded-2xl border border-slate-200 bg-white p-6 shadow-premium transition hover:-translate-y-1 hover:border-saffron-300 hover:shadow-soft flex flex-col justify-start">
+          <div class="text-3xl leading-none" aria-hidden="true">🧠</div>
+          <h3 class="mt-4 text-lg font-black text-slate-900">IndicBERT NLP</h3>
+          <p class="mt-2 text-sm leading-relaxed text-slate-500">State-of-the-art multilingual transformer trained on
+            Indian languages including Hindi, Tamil, Telugu, and 20+ more.</p>
+        </article>
+        <article
+          class="rounded-2xl border border-slate-200 bg-white p-6 shadow-premium transition hover:-translate-y-1 hover:border-saffron-300 hover:shadow-soft flex flex-col justify-start">
+          <div class="text-3xl leading-none" aria-hidden="true">🔍</div>
+          <h3 class="mt-4 text-lg font-black text-slate-900">Fact-Check Engine</h3>
+          <p class="mt-2 text-sm leading-relaxed text-slate-500">Cross-references against debunked claims from Alt News,
+            Boom Live, The Quint WebQoof, and India Today Fact Check.</p>
+        </article>
+        <article
+          class="rounded-2xl border border-slate-200 bg-white p-6 shadow-premium transition hover:-translate-y-1 hover:border-saffron-300 hover:shadow-soft flex flex-col justify-start">
+          <div class="text-3xl leading-none" aria-hidden="true">📡</div>
+          <h3 class="mt-4 text-lg font-black text-slate-900">Real-Time RSS Ingestion</h3>
+          <p class="mt-2 text-sm leading-relaxed text-slate-500">Monitors 34+ Indian news sources including TOI, The
+            Hindu, NDTV, Indian Express, and regional outlets every 2 minutes.</p>
+        </article>
+        <article
+          class="rounded-2xl border border-slate-200 bg-white p-6 shadow-premium transition hover:-translate-y-1 hover:border-saffron-300 hover:shadow-soft flex flex-col justify-start">
+          <div class="text-3xl leading-none" aria-hidden="true">🗺️</div>
+          <h3 class="mt-4 text-lg font-black text-slate-900">Geographic Mapping</h3>
+          <p class="mt-2 text-sm leading-relaxed text-slate-500">200+ city-to-state mappings identify the precise
+            geographic origin of each misinformation event.</p>
+        </article>
+        <article
+          class="rounded-2xl border border-slate-200 bg-white p-6 shadow-premium transition hover:-translate-y-1 hover:border-saffron-300 hover:shadow-soft flex flex-col justify-start">
+          <div class="text-3xl leading-none" aria-hidden="true">📊</div>
+          <h3 class="mt-4 text-lg font-black text-slate-900">Ensemble Classifier</h3>
+          <p class="mt-2 text-sm leading-relaxed text-slate-500">5-model ensemble combining linguistic analysis, source
+            credibility, ML classification, and cross-reference scoring.</p>
+        </article>
+        <article
+          class="rounded-2xl border border-slate-200 bg-white p-6 shadow-premium transition hover:-translate-y-1 hover:border-saffron-300 hover:shadow-soft flex flex-col justify-start">
+          <div class="text-3xl leading-none" aria-hidden="true">🌐</div>
+          <h3 class="mt-4 text-lg font-black text-slate-900">GDELT Integration</h3>
+          <p class="mt-2 text-sm leading-relaxed text-slate-500">Pulls India-specific news from the Global Database of
+            Events — the world's largest open-source news index. Zero cost, unlimited volume.</p>
+        </article>
+      </div>
     </section>
 
-    <!-- CTA -->
-    <section class="cta-section">
-        <div class="cta-inner">
-            <div class="cta-title">See India's Misinformation Map</div>
-            <p class="cta-sub">Interact with the live India heatmap to explore state-wise risk levels, browse real-time alerts, and drill into individual events.</p>
-            <a href="/map/enhanced-india-heatmap.html" class="btn-primary" style="font-size:1rem; padding:1rem 2.5rem;">🗺️ Open Interactive Heatmap →</a>
+    <section class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 sm:py-14 lg:px-8">
+      <div
+        class="flex flex-col gap-5 rounded-2xl border border-slate-200 bg-slate-50 p-5 text-slate-900 shadow-card sm:p-8 lg:flex-row lg:items-center lg:justify-between">
+        <div class="min-w-0">
+          <p class="text-xs font-black uppercase tracking-[0.18em] text-saffron-600">Interactive map</p>
+          <h2 class="mt-2 text-2xl font-black text-slate-950 sm:text-3xl">Review state-level risk on the heatmap.</h2>
+          <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-600 sm:text-base">Move from the national overview into
+            geographic detail, then drill into recent activity for individual states.</p>
         </div>
+        <a href="/heatmap.html"
+          class="hero-btn inline-flex min-h-11 shrink-0 items-center justify-center rounded-lg bg-ashoka-blue-500 px-5 py-2.5 text-sm font-bold text-white shadow-premium transition hover:-translate-y-0.5 hover:bg-ashoka-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-saffron-500 focus-visible:ring-offset-2">Open
+          heatmap</a>
+      </div>
     </section>
+  </main>
+
+  <footer class="border-t border-slate-200 bg-slate-950 pt-16 pb-32 text-white">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="grid grid-cols-1 gap-12 md:grid-cols-3">
+        <!-- Brand Section -->
+        <div class="max-w-xs">
+          <div class="flex items-center gap-2">
+            <div class="h-8 w-8 rounded-lg bg-gradient-to-tr from-saffron-500 via-white to-india-green-500 p-1">
+              <div class="h-full w-full rounded-md bg-slate-950 flex items-center justify-center">
+                <span class="text-[10px] font-black">MH</span>
+              </div>
+            </div>
+            <span class="text-lg font-black tracking-tight">Misinfo<span class="text-saffron-500">Heatmap</span></span>
+          </div>
+          <p class="mt-6 text-sm leading-7 text-slate-400">
+            Advanced AI-powered platform for real-time misinformation detection and verification across India's digital
+            landscape.
+          </p>
+          <div class="mt-6 flex items-center gap-4">
+            <!-- India Badge -->
+            <span
+              class="inline-flex items-center gap-1.5 rounded-full bg-white/5 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-slate-300 border border-white/10">
+              <span class="h-1.5 w-1.5 rounded-full bg-saffron-500"></span>
+              Monitored in India
+            </span>
+          </div>
+        </div>
+
+        <!-- Platform Links -->
+        <div>
+          <h3 class="text-sm font-black uppercase tracking-[0.2em] text-saffron-500">Platform</h3>
+          <ul class="mt-6 space-y-4 text-sm text-slate-400">
+            <li><a href="/heatmap.html" class="transition hover:text-white font-medium">Live Heatmap</a></li>
+            <li><a href="/dashboard.html" class="transition hover:text-white font-medium">Intelligence Dashboard</a>
+            </li>
+          </ul>
+        </div>
 
-    <!-- Footer -->
-    <footer class="footer">
-        <div class="footer-flag">
-            <div class="flag-stripe" style="background:#FF9933;"></div>
-            <div class="flag-stripe" style="background:#FFFFFF; border:1px solid #ddd;"></div>
-            <div class="flag-stripe" style="background:#138808;"></div>
+        <!-- Support -->
+        <div>
+          <h3 class="text-sm font-black uppercase tracking-[0.2em] text-ashoka-blue-400">Support</h3>
+          <ul class="mt-6 space-y-4 text-sm text-slate-400">
+            <li><a href="/contact.html" class="transition hover:text-white font-black text-slate-300">Contact Us</a>
+            </li>
+          </ul>
         </div>
-        <div>Made with ❤️ for India &nbsp;·&nbsp; Powered by IndicBERT &amp; GDELT &nbsp;·&nbsp; Local-first, Zero-cost architecture</div>
-    </footer>
-
-    <script>
-        // ── API Configuration ──
-        // Defaults to relative paths (local). Put your HF Space URL here for Netlify deployments!
-        const API_BASE = window.location.hostname.includes('netlify.app') 
-            ? 'https://ndg07-heatmap.hf.space' 
-            : '';
-
-        // ── Navbar scroll effect ──
-        window.addEventListener('scroll', () => {
-            document.getElementById('navbar').classList.toggle('scrolled', window.scrollY > 20);
-        });
-
-        // ── Hamburger menu toggle ──
-        const hamburgerBtn = document.getElementById('hamburger-btn');
-        const mobileMenu = document.getElementById('mobile-menu');
-        
-        hamburgerBtn.addEventListener('click', () => {
-            hamburgerBtn.classList.toggle('active');
-            mobileMenu.classList.toggle('active');
-            document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : '';
-        });
-
-        // Close menu when clicking on a link
-        document.querySelectorAll('.mobile-menu-link').forEach(link => {
-            link.addEventListener('click', () => {
-                hamburgerBtn.classList.remove('active');
-                mobileMenu.classList.remove('active');
-                document.body.style.overflow = '';
-            });
-        });
-
-        // Close menu when clicking outside
-        mobileMenu.addEventListener('click', (e) => {
-            if (e.target === mobileMenu) {
-                hamburgerBtn.classList.remove('active');
-                mobileMenu.classList.remove('active');
-                document.body.style.overflow = '';
-            }
-        });
-
-        // ── Fetch and display stats ──
-        async function loadStats() {
-            try {
-                const r = await fetch(API_BASE + '/api/v1/stats');
-                if (!r.ok) return;
-                const d = await r.json();
-                const el = document.getElementById('stat-events');
-                const n = d.total_events || 0;
-                el.textContent = n >= 1000 ? (n/1000).toFixed(1)+'K' : n;
-                document.getElementById('nav-status').textContent = d.ml_ready ? 'System Ready' : 'Loading…';
-            } catch(_) {}
-        }
-
-        // ── Fetch and display live ticker ──
-        async function loadTicker() {
-            try {
-                const r = await fetch(API_BASE + '/api/v1/events/live?limit=6');
-                if (!r.ok) return;
-                const d = await r.json();
-                const events = d.events || [];
-                if (events.length === 0) return;
-
-                const container = document.getElementById('ticker-cards');
-                container.innerHTML = events.slice(0,6).map(ev => {
-                    const cls = ev.classification || 'uncertain';
-                    const icon = cls === 'fake' ? '🚨' : cls === 'real' ? '✅' : '⚠️';
-                    const title = (ev.title || '').substring(0, 90);
-                    return `<div class="ticker-card ${cls === 'fake' ? 'fake' : cls === 'uncertain' ? 'uncertain' : ''}">
-                        <div class="ticker-badge ${cls}">${icon} ${cls.toUpperCase()}</div>
-                        <div class="ticker-text">${title}</div>
-                        <div class="ticker-meta">${ev.source || 'Unknown'} · ${ev.state || 'India'}</div>
-                    </div>`;
-                }).join('');
-            } catch(_) {}
-        }
-
-        loadStats();
-        loadTicker();
-        setInterval(loadStats, 30000);
-        setInterval(loadTicker, 15000);
-    </script>
+      </div>
+
+      <!-- Bottom Bar -->
+      <div class="mt-16 border-t border-white/5 pt-8">
+        <div class="flex flex-col items-center justify-between gap-6 md:flex-row">
+          <p class="text-xs text-slate-500">
+            © 2026 Misinformation Heatmap. Powered by Advanced Neural Networks.
+          </p>
+          <div class="flex items-center gap-8">
+            <a href="/privacy-policy.html"
+              class="text-xs text-slate-400 hover:text-white font-medium transition">Privacy Policy</a>
+            <div
+              class="h-1 w-32 rounded-full bg-gradient-to-r from-saffron-500 via-white to-india-green-500 opacity-20">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
 </body>
+
 </html>

frontend/manifest.json

@@ -0,0 +1,28 @@
+{
+  "name": "Misinformation Heatmap - India",
+  "short_name": "Misinfo Heatmap",
+  "description": "Real-time misinformation detection and analysis across Indian states",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#FAFAF7",
+  "theme_color": "#E87722",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/assets/ind.png",
+      "sizes": "256x256",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/assets/Misinfo.ico",
+      "sizes": "256x256",
+      "type": "image/x-icon"
+    }
+  ],
+  "categories": ["news", "education", "utilities"],
+  "lang": "en",
+  "dir": "ltr",
+  "scope": "/",
+  "prefer_related_applications": false
+}

frontend/map/enhanced-india-heatmap.html

@@ -1,1971 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Misinformation Heatmap - India</title>
-    <link rel="icon" type="image/x-icon" href="/public/Misinfo.ico">
-    <style>
-        :root {
-            --saffron:       #E87722;
-            --saffron-light: #FF9933;
-            --green:         #138808;
-            --red:           #dc2626;
-            --amber:         #d97706;
-            --blue:          #2563eb;
-            --bg:            #F8F8F4;
-            --bg-card:       rgba(255,255,255,0.98);
-            --bg-card-hover: rgba(248,248,244,0.98);
-            --border:        rgba(0,0,0,0.10);
-            --border-accent: rgba(232,119,34,0.30);
-            --text-primary:  #1A1A1A;
-            --text-secondary:#555555;
-            --text-muted:    #888888;
-            --radius:        16px;
-            --radius-sm:     10px;
-            --accent:        #E87722;
-            --high-risk:     #dc2626;
-            --medium-risk:   #d97706;
-            --low-risk:      #138808;
-            --shadow:        0 4px 20px rgba(0,0,0,0.08);
-            --shadow-sm:     0 2px 8px rgba(0,0,0,0.08);
-            --shadow-lg:     0 8px 32px rgba(0,0,0,0.12);
-        }
-        
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
-        }
-        
-        @keyframes glow {
-            0%, 100% { 
-                box-shadow: 0 0 5px rgba(255, 153, 51, 0.3);
-            }
-            50% { 
-                box-shadow: 0 0 20px rgba(255, 153, 51, 0.6), 0 0 30px rgba(255, 153, 51, 0.4);
-            }
-        }
-        
-        @keyframes slideInFromRight {
-            from {
-                opacity: 0;
-                transform: translateX(30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-        
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: #F8F8F4;
-            color: #1A1A1A;
-            margin: 0;
-            padding: 0;
-            min-height: 100vh;
-            overflow-x: hidden;
-            max-width: 100vw;
-            scroll-behavior: smooth;
-        }
-        
-        /* Saffron and green gradient blobs for Indian flag feel */
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0; left: 0; width: 100%; height: 100%;
-            background:
-                radial-gradient(ellipse 55% 50% at -10% -10%, rgba(232,119,34,0.18) 0%, transparent 60%),
-                radial-gradient(ellipse 45% 45% at 110% 110%, rgba(19,136,8,0.14) 0%, transparent 60%);
-            pointer-events: none;
-            z-index: 0;
-        }
-        
-        /* Main layout structure - FULL SCREEN unified container */
-        .main-layout {
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-            width: 100vw;
-            background: transparent;
-            position: relative;
-            z-index: 1;
-        }
-        
-        /* Tricolor accent for the unified container */
-        .main-layout::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 2px;
-            background: linear-gradient(90deg, #FF9933, rgba(255,255,255,0.5), #138808);
-            z-index: 1;
-        }
-        
-        /* Navigation bar */
-        .navbar {
-            position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
-            padding: 0 2rem; height: 62px;
-            display: flex; align-items: center;
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(20px);
-            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-            transition: box-shadow 0.3s;
-        }
-        .navbar.scrolled { box-shadow: var(--shadow-sm); }
-        .nav-inner { width: 100%; max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
-        .logo { display: flex; align-items: center; gap: 4px; font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 800; text-decoration: none; color: var(--text-primary); }
-        .logo-badge { font-size: 0.65rem; font-weight: 700; background: var(--saffron); color: #fff; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; }
-        .logo .logo-name { color: var(--saffron); }
-
-        .nav-links { display: flex; align-items: center; gap: 0.25rem; }
-        .nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.88rem; font-weight: 500; padding: 0.4rem 0.9rem; border-radius: var(--radius-sm); transition: all 0.2s; }
-        .nav-link:hover { color: var(--saffron); background: rgba(232,119,34,0.07); }
-        .nav-link.active { color: var(--saffron); background: rgba(232,119,34,0.1); border: 1px solid rgba(232,119,34,0.2); }
-
-        .status-pill { display: flex; align-items: center; gap: 6px; background: rgba(19,136,8,0.08); border: 1px solid rgba(19,136,8,0.25); border-radius: 20px; padding: 5px 14px; font-size: 0.8rem; font-weight: 600; color: var(--green); }
-        .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
-        @keyframes pulse { 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(19,136,8,0.4);} 50%{opacity:0.8; box-shadow:0 0 0 5px rgba(19,136,8,0);} }
-
-        /* Hamburger button */
-        .hamburger-btn {
-            display: none;
-            flex-direction: column;
-            gap: 5px;
-            background: none;
-            border: none;
-            cursor: pointer;
-            padding: 8px;
-            z-index: 10000;
-        }
-        .hamburger-line {
-            width: 24px;
-            height: 2px;
-            background: var(--text-primary);
-            transition: all 0.3s ease;
-            border-radius: 2px;
-        }
-        .hamburger-btn.active .hamburger-line:nth-child(1) {
-            transform: rotate(45deg) translate(5px, 5px);
-        }
-        .hamburger-btn.active .hamburger-line:nth-child(2) {
-            opacity: 0;
-        }
-        .hamburger-btn.active .hamburger-line:nth-child(3) {
-            transform: rotate(-45deg) translate(5px, -5px);
-        }
-
-        /* Mobile Menu Overlay */
-        .mobile-menu-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, rgba(255, 153, 51, 0.98), rgba(232, 119, 34, 0.95));
-            z-index: 9999;
-            transform: translateX(-100%);
-            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            padding: 80px 2rem 2rem;
-            overflow-x: hidden;
-        }
-        .mobile-menu-overlay.active {
-            transform: translateX(0);
-        }
-        .mobile-menu-top {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
-        .mobile-menu-link {
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: #fff;
-            text-decoration: none;
-            padding: 1rem 0;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-            transition: all 0.3s ease;
-            width: 100%;
-            box-sizing: border-box;
-            display: block;
-        }
-        .mobile-menu-link:hover {
-            padding-left: 1rem;
-            background: rgba(255, 255, 255, 0.1);
-        }
-        .mobile-menu-bottom {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-            padding-top: 2rem;
-            border-top: 1px solid rgba(255, 255, 255, 0.2);
-            background: rgba(232, 119, 34, 0.3);
-            padding: 2rem;
-            margin: 0 -2rem -2rem -2rem;
-        }
-        .mobile-menu-brand {
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.2rem;
-            font-weight: 800;
-            color: #fff;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .mobile-menu-brand .logo-badge {
-            background: #fff;
-            color: var(--accent);
-        }
-        .mobile-menu-brand .logo-name {
-            color: #fff;
-        }
-        .mobile-menu-tags {
-            display: flex;
-            gap: 8px;
-            flex-wrap: wrap;
-        }
-        .menu-tag {
-            font-size: 0.7rem;
-            font-weight: 700;
-            padding: 4px 10px;
-            border-radius: 12px;
-            text-transform: uppercase;
-        }
-        .menu-tag.alpha {
-            background: rgba(255, 255, 255, 0.2);
-            color: #fff;
-        }
-        .menu-tag.live {
-            background: #fff;
-            color: var(--green);
-            animation: pulse 2s infinite;
-        }
-
-        /* Content area - NO separate container styling */
-        .content-area {
-            display: flex;
-            flex: 1;
-            overflow: hidden;
-            min-height: 0;
-            padding-top: 62px;
-        }
-        
-        /* Map section (left half) */
-        .map-section {
-            flex: 0 0 700px;
-            display: flex;
-            flex-direction: column;
-            padding: 16px;
-            padding-right: 8px;
-            overflow: hidden;
-        }
-        
-        /* Information section (right half) */
-        .info-section {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            padding: 16px;
-            padding-left: 8px;
-            border-left: 1px solid rgba(0, 0, 0, 0.1);
-            min-width: 400px;
-            overflow-y: auto;
-        }
-        
-        .map-container {
-            flex: 1;
-            overflow: hidden;
-            position: relative;
-            margin: 12px;
-            border-radius: 16px;
-            background: #FFFFFF;
-            box-shadow: 0 4px 20px rgba(0,0,0,0.07);
-            border: 1px solid var(--border);
-            max-height: 500px;
-        }
-        
-        #svgroot {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            touch-action: none;
-            cursor: grab;
-            transition: transform 0.2s ease;
-            position: relative;
-            overflow: hidden;
-            border-radius: 16px;
-        }
-        
-        #svgroot::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: 
-                radial-gradient(circle at 30% 30%, rgba(255, 153, 51, 0.03) 0%, transparent 50%),
-                radial-gradient(circle at 70% 70%, rgba(19, 136, 8, 0.03) 0%, transparent 50%);
-            pointer-events: none;
-        }
-        
-        #svgroot svg {
-            max-width: 90%;
-            max-height: 90%;
-            width: auto;
-            height: auto;
-            transform-origin: center center;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
-        }
-        
-        #svgroot:active {
-            cursor: grabbing;
-        }
-        
-        .zoom-controls {
-            position: absolute;
-            top: 24px;
-            right: 24px;
-            display: none;
-            flex-direction: column;
-            gap: 6px;
-            z-index: 1000;
-            transition: all 0.3s ease;
-            animation: slideInFromRight 0.5s ease-out;
-        }
-        
-        @media (min-width: 768px) {
-            .zoom-controls {
-                display: flex;
-            }
-        }
-        
-        /* Enhanced zoom control styling */
-        .center-btn {
-            background: linear-gradient(135deg, rgba(255, 153, 51, 0.2), rgba(255, 153, 51, 0.3));
-            border: 1px solid var(--accent);
-            color: var(--accent);
-            box-shadow: 0 2px 8px rgba(255, 153, 51, 0.2);
-        }
-        
-        .center-btn:hover {
-            background: linear-gradient(135deg, rgba(255, 153, 51, 0.3), rgba(255, 153, 51, 0.4));
-            box-shadow: 0 4px 12px rgba(255, 153, 51, 0.3);
-            transform: scale(1.05) translateY(-1px);
-        }
-        
-        .zoom-btn {
-            width: 44px;
-            height: 44px;
-            background: rgba(255,255,255,0.95);
-            border: 1px solid var(--border);
-            color: var(--text-primary);
-            border-radius: 12px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 18px;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.10);
-        }
-        
-        .zoom-btn:hover {
-            background: rgba(232,119,34,0.08);
-            border-color: var(--border-accent);
-            transform: scale(1.05) translateY(-1px);
-        }
-        
-        .zoom-btn:active {
-            transform: scale(0.98) translateY(0px);
-        }
-        
-        .zoom-level {
-            background: 
-                linear-gradient(135deg, 
-                    rgba(255, 153, 51, 0.2) 0%, 
-                    rgba(255, 153, 51, 0.1) 100%
-                );
-            border: 1px solid var(--accent);
-            color: var(--accent);
-            padding: 10px 14px;
-            border-radius: 12px;
-            font-size: 13px;
-            font-weight: 600;
-            text-align: center;
-            backdrop-filter: blur(15px);
-            box-shadow: 
-                0 4px 12px rgba(255, 153, 51, 0.2),
-                inset 0 1px 0 rgba(255, 153, 51, 0.3);
-        }
-        
-        #live-feed {
-            scrollbar-width: thin;
-            scrollbar-color: rgba(0,0,0,0.15) transparent;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-            hyphens: auto;
-        }
-        
-        #live-feed .activity-title {
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-            white-space: normal;
-            line-height: 1.3;
-        }
-        
-        #live-feed::-webkit-scrollbar { width: 4px; }
-        #live-feed::-webkit-scrollbar-track { background: transparent; }
-        #live-feed::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
-        #live-feed::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
-        
-        @keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateX(-20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-        
-        @keyframes newItem {
-            0% { background: rgba(103, 126, 234, 0.3); }
-            100% { background: rgba(255,255,255,0.03); }
-        }
-        
-        .loading {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            color: #e6eef8;
-            text-align: center;
-        }
-        
-        .loading-spinner {
-            width: 50px;
-            height: 50px;
-            border: 4px solid rgba(255, 153, 51, 0.3);
-            border-top: 4px solid #FF9933;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin-bottom: 20px;
-        }
-        
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        
-        .loading-text {
-            font-size: 18px;
-            font-weight: 600;
-            margin-bottom: 8px;
-            color: #FF9933;
-        }
-        
-        .loading-subtext {
-            font-size: 14px;
-            color: #a0a0a0;
-            margin-bottom: 20px;
-        }
-        
-        .loading-progress {
-            width: 200px;
-            height: 4px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .progress-bar {
-            height: 100%;
-            background: linear-gradient(90deg, #FF9933, #138808);
-            width: 0%;
-            transition: width 0.3s ease;
-            animation: progress 3s ease-in-out infinite;
-        }
-        
-        @keyframes progress {
-            0% { width: 0%; }
-            50% { width: 70%; }
-            100% { width: 100%; }
-        }
-        
-        /* Responsive design for navbar + two-section layout */
-        
-        /* Large screens (1440px+) */
-        @media (min-width: 1441px) {
-            .info-section {
-                width: 600px;
-                min-width: 600px;
-            }
-            
-            .navbar-title {
-                font-size: 26px;
-            }
-        }
-        
-        /* Medium screens (1200px - 1440px) */
-        @media (min-width: 1201px) and (max-width: 1440px) {
-            .info-section {
-                width: 480px;
-                min-width: 480px;
-            }
-        }
-
-        /* Mobile portrait (max 768px) */
-        @media (max-width: 768px) {
-            .navbar { padding: 0 1rem; }
-            .nav-links { display: none; }
-            .status-pill { display: none; }
-            .hamburger-btn { display: flex; }
-
-            .content-area {
-                flex-direction: column;
-                overflow-y: auto;
-                display: block;
-                overflow-x: hidden;
-                padding-top: 62px;
-            }
-
-            .map-section {
-                height: 55vh;
-                min-height: 350px;
-                padding: 12px;
-                padding-bottom: 8px;
-                border-left: none;
-                flex: none;
-            }
-
-            .map-container {
-                max-height: 55vh;
-            }
-
-            .info-section {
-                width: 100%;
-                min-width: 100%;
-                max-width: 100%;
-                height: auto;
-                padding: 16px 16px 16px 4px;
-                padding-top: 20px;
-                border-left: none;
-                border-top: 1px solid rgba(0, 0, 0, 0.1);
-                overflow-x: hidden;
-            }
-
-            .info-content {
-                padding: 16px 16px 16px 4px;
-                overflow-x: hidden;
-                max-width: 100%;
-                box-sizing: border-box;
-            }
-
-            .state-name {
-                font-size: 22px;
-                padding: 24px 0 24px 0;
-                text-align: left;
-            }
-
-            .zoom-controls {
-                display: flex;
-                top: 12px;
-                right: 12px;
-            }
-
-            .zoom-btn {
-                width: 36px;
-                height: 36px;
-                font-size: 16px;
-            }
-
-            .zoom-level {
-                font-size: 11px;
-                padding: 6px 10px;
-            }
-
-            /* Make status grid responsive on mobile */
-            .info-content > div:first-of-type {
-                display: grid !important;
-                grid-template-columns: repeat(2, 1fr) !important;
-                gap: 24px !important;
-                padding: 28px !important;
-                margin-bottom: 40px !important;
-            }
-
-            .info-content > div:first-of-type > div {
-                padding: 24px !important;
-            }
-
-            .info-content > div:first-of-type > div > div:first-child {
-                font-size: 16px !important;
-            }
-
-            .info-content > div:first-of-type > div > div:last-child {
-                font-size: 11px !important;
-            }
-
-            /* Add more spacing between content sections */
-            .info-content > div:nth-of-type(2) {
-                margin-top: 40px !important;
-            }
-
-            .info-content > div:nth-of-type(3) {
-                margin-top: 40px !important;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .navbar { padding: 0 0.75rem; }
-            .logo { font-size: 1rem; }
-            .logo-badge { font-size: 0.55rem; }
-            .nav-links { display: none; }
-            .status-pill { display: none; }
-            .hamburger-btn { display: flex; }
-        }
-        
-        #tooltip {
-            position: fixed;
-            pointer-events: none;
-            padding: 12px 16px;
-            background: rgba(255, 255, 255, 0.98);
-            color: #1A1A1A;
-            border-radius: 10px;
-            font-size: 13px;
-            box-shadow: 0 8px 24px rgba(0,0,0,0.2);
-            display: none;
-            max-width: 280px;
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 153, 51, 0.3);
-            z-index: 9999;
-            line-height: 1.4;
-        }
-        
-        .info-content {
-            padding: 24px;
-            overflow-y: auto;
-            flex: 1;
-            /* Enhanced scrollbar for better UX */
-            scrollbar-width: thin;
-            scrollbar-color: #FF9933 transparent;
-        }
-        
-        .info-content::-webkit-scrollbar {
-            width: 8px;
-        }
-        
-        .info-content::-webkit-scrollbar-track {
-            background: rgba(0, 0, 0, 0.05);
-            border-radius: 4px;
-        }
-        
-        .info-content::-webkit-scrollbar-thumb {
-            background: linear-gradient(180deg, #FF9933, #B45309);
-            border-radius: 4px;
-            border: 1px solid rgba(255, 153, 51, 0.3);
-        }
-        
-        .info-content::-webkit-scrollbar-thumb:hover {
-            background: linear-gradient(180deg, #ffb366, #FF9933);
-        }
-        
-        .state-name {
-            font-size: 28px;
-            font-weight: 800;
-            margin-bottom: 16px;
-            background: linear-gradient(135deg, #FF9933 0%, #B45309 50%, #138808 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            text-align: center;
-            padding: 16px 0;
-            border-bottom: 2px solid rgba(255, 153, 51, 0.3);
-            position: relative;
-            animation: fadeInUp 0.6s ease-out;
-            letter-spacing: -0.5px;
-        }
-        
-        .state-name::after {
-            content: '';
-            position: absolute;
-            bottom: -2px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 60px;
-            height: 2px;
-            background: linear-gradient(90deg, #FF9933, #138808);
-            border-radius: 1px;
-        }
-        
-        .state-stats {
-            background: rgba(255, 255, 255, 0.8);
-            backdrop-filter: blur(10px);
-            padding: 24px;
-            border-radius: 16px;
-            margin: 24px 0;
-            border: 1px solid rgba(255, 153, 51, 0.2);
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-            animation: fadeInUp 0.8s ease-out;
-            position: relative;
-            overflow: hidden;
-        }
-        
-        .state-stats::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 3px;
-            background: linear-gradient(90deg, #FF9933, #FFFFFF, #138808);
-            border-radius: 16px 16px 0 0;
-        }
-        
-        .stat-row {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin: 16px 0;
-            font-size: 15px;
-            padding: 12px 16px;
-            background: rgba(255, 255, 255, 0.6);
-            border-radius: 10px;
-            border: 1px solid rgba(0, 0, 0, 0.08);
-            transition: all 0.3s ease;
-            position: relative;
-        }
-        
-        .stat-row:hover {
-            background: rgba(255, 255, 255, 0.8);
-            transform: translateX(4px);
-            border-color: rgba(255, 153, 51, 0.2);
-            box-shadow: 0 4px 12px rgba(255, 153, 51, 0.1);
-        }
-        
-        .stat-row::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            width: 3px;
-            background: linear-gradient(180deg, #FF9933, #138808);
-            border-radius: 10px 0 0 10px;
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-        
-        .stat-row:hover::before {
-            opacity: 1;
-        }
-        
-        .stat-label {
-            font-weight: 600;
-            color: #718096;
-            font-size: 14px;
-        }
-        
-        .stat-value {
-            font-weight: 700;
-            font-size: 16px;
-            color: #2d3748;
-        }
-        
-        .risk-badge {
-            padding: 6px 12px;
-            border-radius: 16px;
-            font-size: 12px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-        }
-        
-        .risk-high { 
-            background: linear-gradient(135deg, var(--high-risk), #b02a37);
-            color: white;
-            box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
-        }
-        .risk-medium { 
-            background: linear-gradient(135deg, var(--medium-risk), #e0a800);
-            color: #1a1a1a;
-            box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
-        }
-        .risk-low { 
-            background: linear-gradient(135deg, var(--low-risk), var(--green-light));
-            color: white;
-            box-shadow: 0 2px 8px rgba(19, 136, 8, 0.3);
-        }
-        
-        /* Enhanced news feed sections */
-        .news-section {
-            margin: 28px 0;
-            animation: fadeInUp 1s ease-out;
-        }
-        
-        .news-section h3 {
-            font-size: 18px;
-            font-weight: 700;
-            margin-bottom: 16px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            padding: 12px 0;
-            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
-        }
-        
-        .news-feed {
-            background: rgba(255, 255, 255, 0.8);
-            backdrop-filter: blur(10px);
-            border-radius: 16px;
-            padding: 20px;
-            border: 1px solid rgba(255, 153, 51, 0.2);
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-            max-height: 400px;
-            overflow-y: auto;
-            scrollbar-width: thin;
-            scrollbar-color: rgba(255, 153, 51, 0.3) transparent;
-        }
-        
-        .news-feed::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .news-feed::-webkit-scrollbar-track {
-            background: rgba(0, 0, 0, 0.05);
-            border-radius: 3px;
-        }
-        
-        .news-feed::-webkit-scrollbar-thumb {
-            background: linear-gradient(180deg, #FF9933, #B45309);
-            border-radius: 3px;
-        }
-        
-        .misinformation-feed {
-            border-left: 4px solid var(--high-risk);
-        }
-        
-        .real-news-feed {
-            border-left: 4px solid var(--green);
-        }
-        
-        .trending-topics {
-            margin: 16px 0;
-        }
-        
-        .topic-tag {
-            display: inline-block;
-            background: rgba(59, 130, 246, 0.2);
-            color: #60a5fa;
-            padding: 4px 8px;
-            border-radius: 12px;
-            font-size: 12px;
-            margin: 2px;
-        }
-        
-        .recent-headlines {
-            margin: 16px 0;
-        }
-        
-        .headline {
-            background: rgba(255,255,255,0.03);
-            padding: 12px;
-            border-radius: 6px;
-            margin: 8px 0;
-            border-left: 3px solid var(--accent);
-            font-size: 13px;
-            line-height: 1.4;
-        }
-        
-        .legend {
-            margin-top: 20px;
-            padding: 16px;
-            background: rgba(255,255,255,0.05);
-            border-radius: 8px;
-        }
-        
-        .legend h4 {
-            margin: 0 0 12px 0;
-            font-size: 16px;
-        }
-        
-        .legend-item {
-            display: flex;
-            align-items: center;
-            margin: 8px 0;
-            font-size: 13px;
-        }
-        
-        .legend-color {
-            width: 20px;
-            height: 20px;
-            border-radius: 4px;
-            margin-right: 10px;
-        }
-        
-        /* Enhanced Map styling */
-        .map-path {
-            fill: #88A4BC;
-            stroke: #ffffff;
-            stroke-width: 0.8;
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            cursor: pointer;
-            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
-        }
-        
-        .map-path:hover {
-            stroke-width: 2;
-            stroke: var(--accent);
-            filter: 
-                brightness(1.2) 
-                drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))
-                drop-shadow(0 0 12px rgba(255, 153, 51, 0.4));
-            transform: scale(1.02);
-        }
-        
-        .selected {
-            stroke: var(--accent);
-            stroke-width: 3;
-            filter: 
-                brightness(1.3) 
-                drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4))
-                drop-shadow(0 0 20px rgba(255, 153, 51, 0.6));
-            animation: glow 2s infinite;
-        }
-        
-        .loading {
-            text-align: center;
-            padding: 40px;
-            opacity: 0.7;
-        }
-        
-        .error {
-            color: #ff6b6b;
-            text-align: center;
-            padding: 20px;
-        }
-        
-        /* Mobile Menu Overlay */
-        .mobile-menu-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, rgba(255, 153, 51, 0.98), rgba(232, 119, 34, 0.95));
-            z-index: 9999;
-            transform: translateX(-100%);
-            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            padding: 80px 2rem 2rem;
-            overflow-x: hidden;
-        }
-        .mobile-menu-overlay.active {
-            transform: translateX(0);
-        }
-        .mobile-menu-top {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
-        .mobile-menu-link {
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: #fff;
-            text-decoration: none;
-            padding: 1rem 0;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-            transition: all 0.3s ease;
-            width: 100%;
-            box-sizing: border-box;
-            display: block;
-        }
-        .mobile-menu-link:hover {
-            padding-left: 1rem;
-            background: rgba(255, 255, 255, 0.1);
-        }
-        .mobile-menu-bottom {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-            padding-top: 2rem;
-            border-top: 1px solid rgba(255, 255, 255, 0.2);
-            background: rgba(232, 119, 34, 0.3);
-            padding: 2rem;
-            margin: 0 -2rem -2rem -2rem;
-        }
-        .mobile-menu-brand {
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.2rem;
-            font-weight: 800;
-            color: #fff;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .mobile-menu-brand .logo-badge {
-            background: #fff;
-            color: var(--accent);
-        }
-        .mobile-menu-brand .logo-name {
-            color: #fff;
-        }
-        .mobile-menu-tags {
-            display: flex;
-            gap: 8px;
-            flex-wrap: wrap;
-        }
-        .menu-tag {
-            font-size: 0.7rem;
-            font-weight: 700;
-            padding: 4px 10px;
-            border-radius: 12px;
-            text-transform: uppercase;
-        }
-        .menu-tag.alpha {
-            background: rgba(255, 255, 255, 0.2);
-            color: #fff;
-        }
-        .menu-tag.live {
-            background: #fff;
-            color: var(--green);
-            animation: pulse 2s infinite;
-        }
-    </style>
-</head>
-<body>
-    <div class="main-layout">
-        <!-- Navigation Bar -->
-        <nav class="navbar" id="navbar">
-            <div class="nav-inner">
-                <a href="/" class="logo">
-                    <span class="logo-badge">IN</span>
-                    <span>Misinformation</span><span class="logo-name">&nbsp;Heatmap</span>
-                </a>
-                <div class="nav-links">
-                    <a href="/" class="nav-link">Home</a>
-                    <a href="/dashboard" class="nav-link">Dashboard</a>
-                    <a href="/map/enhanced-india-heatmap.html" class="nav-link active">Heatmap</a>
-                </div>
-                <div class="status-pill">
-                    <span class="status-dot"></span>
-                    <span id="nav-status">System Ready</span>
-                </div>
-                <button class="hamburger-btn" id="hamburger-btn" aria-label="Toggle menu">
-                    <span class="hamburger-line"></span>
-                    <span class="hamburger-line"></span>
-                    <span class="hamburger-line"></span>
-                </button>
-            </div>
-        </nav>
-
-    <!-- Mobile Menu Overlay -->
-    <div class="mobile-menu-overlay" id="mobile-menu">
-        <div class="mobile-menu-top">
-            <a href="/" class="mobile-menu-link">Home</a>
-            <a href="/dashboard" class="mobile-menu-link">Dashboard</a>
-            <a href="/map/enhanced-india-heatmap.html" class="mobile-menu-link">Heatmap</a>
-        </div>
-        <div class="mobile-menu-bottom">
-            <div class="mobile-menu-brand">
-                <span class="logo-badge">IN</span>
-                <span>Misinformation</span><span class="logo-name">&nbsp;Heatmap</span>
-            </div>
-            <div class="mobile-menu-tags">
-                <span class="menu-tag alpha">Alpha v1.0</span>
-                <span class="menu-tag live">● Live</span>
-            </div>
-        </div>
-    </div>
-
-        <!-- Content Area - ONE unified container -->
-        <div class="content-area">
-            <!-- Map Section (Left Half) -->
-            <div class="map-section">
-                <div class="map-container">
-                    <div class="zoom-controls">
-                        <button class="zoom-btn" onclick="zoomIn()" title="Zoom In">+</button>
-                        <div class="zoom-level" id="zoom-level">100%</div>
-                        <button class="zoom-btn" onclick="zoomOut()" title="Zoom Out">−</button>
-                        <button class="zoom-btn" onclick="resetZoom()" title="Reset View">⌂</button>
-                    </div>
-                    <div id="svgroot">
-                        <div class="loading" id="loading-screen">
-                            <div class="loading-spinner"></div>
-                            <div class="loading-text">🗺️ Loading Enhanced India Map...</div>
-                            <div class="loading-subtext">Fetching real-time misinformation data</div>
-                            <div class="loading-progress">
-                                <div class="progress-bar" id="progress-bar"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="tooltip"></div>
-                </div>
-            </div>
-            
-            <!-- Information Section (Right Half) -->
-            <div class="info-section">
-                <div class="info-content">
-                    <!-- Status Bar -->
-                    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; padding: 16px; background: rgba(255,255,255,0.8); border-radius: 8px; border: 1px solid rgba(255, 153, 51, 0.2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);">
-                        <div style="text-align: center; padding: 8px;">
-                            <div style="font-weight: 600; color: #FF9933; font-size: 18px;" id="total-events">Loading...</div>
-                            <div style="opacity: 0.7; font-size: 12px; color: #718096;">Total Events</div>
-                        </div>
-                        <div style="text-align: center; padding: 8px;">
-                            <div style="font-weight: 600; color: #138808; font-size: 18px;" id="active-states">Loading...</div>
-                            <div style="opacity: 0.7; font-size: 12px; color: #718096;">Active States</div>
-                        </div>
-                        <div style="text-align: center; padding: 8px;">
-                            <div style="font-weight: 600; color: #FF9933; font-size: 14px;" id="last-update">Loading...</div>
-                            <div style="opacity: 0.7; font-size: 12px; color: #718096;">Last Update</div>
-                        </div>
-                        <div style="text-align: center; padding: 8px;">
-                            <div style="font-weight: 600; color: #138808; font-size: 18px;" id="classification-accuracy">Loading...</div>
-                            <div style="opacity: 0.7; font-size: 12px; color: #718096;">Accuracy</div>
-                        </div>
-                    </div>
-                    
-                    <div class="state-name" id="stateName">Select a State</div>
-                    <div id="stateContent">
-                        <div style="margin-top: 20px;">
-                            <h4 style="font-size: 14px; margin-bottom: 10px; color: #667eea;">Risk Levels</h4>
-                            <div style="display: flex; flex-direction: column; gap: 8px; font-size: 12px;">
-                                <div style="display: flex; align-items: center; gap: 8px;">
-                                    <div style="width: 16px; height: 16px; background: #dc3545; border-radius: 2px;"></div>
-                                    <span>High Risk (≥60%)</span>
-                                </div>
-                                <div style="display: flex; align-items: center; gap: 8px;">
-                                    <div style="width: 16px; height: 16px; background: #ffc107; border-radius: 2px;"></div>
-                                    <span>Medium Risk (40-59%)</span>
-                                </div>
-                                <div style="display: flex; align-items: center; gap: 8px;">
-                                    <div style="width: 16px; height: 16px; background: #28a745; border-radius: 2px;"></div>
-                                    <span>Low Risk (<40%)</span>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div style="text-align: center; opacity: 0.7; margin-top: 20px; font-size: 12px;">
-                            Click on a state to view detailed fake news analysis
-                        </div>
-                        
-                        <div style="margin-top: 24px; border-top: 1px solid var(--border-accent); padding-top: 24px;">
-                            <div class="news-section">
-                                <h3 style="color: var(--high-risk);">
-                                    <span style="width: 12px; height: 12px; background: var(--high-risk); border-radius: 50%; animation: glow 2s infinite;"></span>
-                                    🚨 Misinformation Alerts
-                                </h3>
-                                <div id="misinformation-feed" class="news-feed misinformation-feed">
-                                    <div style="opacity: 0.7; text-align: center; padding: 40px 20px;">
-                                        <div style="font-size: 32px; margin-bottom: 16px;">🚨</div>
-                                        <div style="font-size: 16px; font-weight: 600; margin-bottom: 8px;">Loading misinformation alerts...</div>
-                                        <div style="font-size: 14px; color: var(--text-muted);">Scanning for fake news across India</div>
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <div class="news-section">
-                                <h3 style="color: var(--green);">
-                                    <span style="width: 12px; height: 12px; background: var(--green); border-radius: 50%; animation: glow 2s infinite;"></span>
-                                    ✅ Verified Real News
-                                </h3>
-                                <div id="real-news-feed" class="news-feed real-news-feed">
-                                    <div style="opacity: 0.7; text-align: center; padding: 40px 20px;">
-                                        <div style="font-size: 32px; margin-bottom: 16px;">📰</div>
-                                        <div style="font-size: 16px; font-weight: 600; margin-bottom: 8px;">Loading verified news...</div>
-                                        <div style="font-size: 14px; color: var(--text-muted);">Fetching latest authentic updates</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-
-    <script>
-        // ── API Configuration ──
-        const API_BASE = window.location.hostname.includes('netlify.app') 
-            ? 'https://ndg07-heatmap.hf.space' 
-            : '';
-
-        // ── Hamburger menu toggle ──
-        const hamburgerBtn = document.getElementById('hamburger-btn');
-        const mobileMenu = document.getElementById('mobile-menu');
-        
-        hamburgerBtn.addEventListener('click', () => {
-            hamburgerBtn.classList.toggle('active');
-            mobileMenu.classList.toggle('active');
-            document.body.style.overflow = mobileMenu.classList.contains('active') ? 'hidden' : '';
-        });
-
-        // Close menu when clicking on a link
-        document.querySelectorAll('.mobile-menu-link').forEach(link => {
-            link.addEventListener('click', () => {
-                hamburgerBtn.classList.remove('active');
-                mobileMenu.classList.remove('active');
-                document.body.style.overflow = '';
-            });
-        });
-
-        // Close menu when clicking outside
-        mobileMenu.addEventListener('click', (e) => {
-            if (e.target === mobileMenu) {
-                hamburgerBtn.classList.remove('active');
-                mobileMenu.classList.remove('active');
-                document.body.style.overflow = '';
-            }
-        });
-
-        // Global variables
-        let heatmapData = [];
-        let selectedState = null;
-        let svgMap = null;
-        
-        // Caching variables for performance
-        let dataCache = new Map();
-        let lastDataFetch = 0;
-        const CACHE_DURATION = 30000; // 30 seconds cache
-        
-        // Zoom and pan variables
-        let currentZoom = 1;
-        let currentX = 0;
-        let currentY = 0;
-        let isDragging = false;
-        let lastMouseX = 0;
-        let lastMouseY = 0;
-        const minZoom = 0.6;
-        const maxZoom = 4;
-        const zoomStep = 0.15;
-        
-        // Map bounds for consistent positioning
-        let mapBounds = {
-            width: 0,
-            height: 0,
-            centerX: 0,
-            centerY: 0
-        };
-        
-        // Initialize the enhanced heatmap
-        async function initializeEnhancedHeatmap() {
-            try {
-                // Load SVG first (map structure needed before colours)
-                await loadSVGMap();
-
-                // Fire all data fetches in parallel — no sequential waiting
-                await Promise.all([
-                    loadHeatmapData(),
-                    updateStatusBar(),
-                    updateLiveFeeds(),
-                ]);
-
-                // Optimized refresh intervals for better performance
-                setInterval(async () => {
-                    await loadHeatmapData();
-                }, 60000); // Update map every 60 seconds (less frequent)
-
-                setInterval(async () => {
-                    await updateStatusBar();
-                }, 30000); // Update status every 30 seconds
-
-                setInterval(updateLiveFeeds, 15000); // Update live feeds every 15 seconds (less frequent)
-
-            } catch (error) {
-                console.error('Failed to initialize heatmap:', error);
-                // Hide loading screen and show map without data
-                const loadingScreen = document.getElementById('loading-screen');
-                if (loadingScreen) {
-                    loadingScreen.style.display = 'none';
-                }
-            }
-        }
-        
-        async function loadSVGMap() {
-            try {
-                const response = await fetch('./in.svg');
-                const svgText = await response.text();
-                
-                const svgRoot = document.getElementById('svgroot');
-                svgRoot.innerHTML = svgText;
-                
-                svgMap = svgRoot.querySelector('svg');
-                if (svgMap) {
-                    svgMap.style.width = '100%';
-                    svgMap.style.height = '100%';
-                    
-                    // Add click handlers to all paths
-                    const paths = svgMap.querySelectorAll('path');
-                    console.log(`SVG loaded successfully with ${paths.length} paths`);
-                    
-                    paths.forEach(path => {
-                        path.classList.add('map-path');
-                        path.addEventListener('click', handleStateClick);
-                        path.addEventListener('mouseenter', handleStateHover);
-                        path.addEventListener('mouseleave', handleStateLeave);
-                    });
-                    
-                    // Initialize map bounds and setup zoom/pan
-                    initializeMapBounds();
-                    setupZoomAndPan();
-                    centerMap();
-                } else {
-                    console.error('SVG element not found in loaded content');
-                }
-            } catch (error) {
-                console.error('Failed to load SVG map:', error);
-                throw error;
-            }
-        }
-        
-        async function loadHeatmapData() {
-            try {
-                const now = Date.now();
-                
-                // Check cache first
-                if (dataCache.has('heatmap') && (now - lastDataFetch) < CACHE_DURATION) {
-                    heatmapData = dataCache.get('heatmap');
-                    applyHeatmapColors();
-                    return;
-                }
-                
-                // Show loading progress
-                updateLoadingProgress(30);
-                
-                const response = await fetch(API_BASE + '/api/v1/heatmap/data');
-                const data = await response.json();
-                
-                updateLoadingProgress(70);
-                
-                heatmapData = data.heatmap_data || [];
-                
-                // Cache the data
-                dataCache.set('heatmap', heatmapData);
-                lastDataFetch = now;
-                
-                updateLoadingProgress(90);
-                
-                // Apply colors to map
-                applyHeatmapColors();
-                
-                updateLoadingProgress(100);
-                
-                // Hide loading screen after first load
-                const loadingScreen = document.getElementById('loading-screen');
-                if (loadingScreen) {
-                    loadingScreen.style.display = 'none';
-                }
-                
-            } catch (error) {
-                console.error('Failed to load heatmap data:', error);
-            }
-        }
-        
-        function updateLoadingProgress(percent) {
-            const progressBar = document.getElementById('progress-bar');
-            if (progressBar) {
-                progressBar.style.width = percent + '%';
-            }
-        }
-        
-        function applyHeatmapColors() {
-            if (!svgMap || !heatmapData.length) {
-                console.log('Cannot apply colors:', { svgMap: !!svgMap, dataLength: heatmapData.length });
-                return;
-            }
-            
-            const paths = svgMap.querySelectorAll('path');
-            console.log(`Applying colors to ${paths.length} paths with ${heatmapData.length} data points`);
-            
-            let matchedCount = 0;
-            let unmatchedPaths = [];
-            
-            paths.forEach((path, index) => {
-                const stateData = findStateData(path);
-                
-                if (stateData) {
-                    const color = getColorForRisk(stateData.fake_probability, stateData.risk_level);
-                    path.style.fill = color;
-                    path.style.stroke = '#ffffff';
-                    path.style.strokeWidth = '0.5';
-                    path.setAttribute('data-state', stateData.state);
-                    path.setAttribute('data-events', stateData.event_count);
-                    path.setAttribute('data-risk', stateData.risk_level);
-                    
-                    // Debug logging for first few matches
-                    if (index < 5) {
-                        console.log(`State: ${stateData.state}, Fake Ratio: ${(stateData.fake_probability * 100).toFixed(2)}%, Risk: ${stateData.risk_level}, Color: ${color}`);
-                    }
-                    
-                    matchedCount++;
-                } else {
-                    path.style.fill = '#88A4BC'; // Default color for unmatched states
-                    path.style.stroke = '#ffffff';
-                    path.style.strokeWidth = '0.5';
-                    const pathName = path.getAttribute('name') || path.id || 'unknown';
-                    unmatchedPaths.push(pathName);
-                }
-            });
-            
-            console.log(`Matched ${matchedCount} states, unmatched: ${unmatchedPaths.length}`);
-            if (unmatchedPaths.length > 0) {
-                console.log('Unmatched paths:', unmatchedPaths);
-            }
-        }
-        
-        // State name mapping for better matching
-        const stateNameMapping = {
-            'andaman and nicobar': 'Andaman and Nicobar Islands',
-            'andhra pradesh': 'Andhra Pradesh',
-            'arunachal pradesh': 'Arunachal Pradesh',
-            'assam': 'Assam',
-            'bihar': 'Bihar',
-            'chandigarh': 'Chandigarh',
-            'chhattisgarh': 'Chhattisgarh',
-            'dādra and nagar haveli and damān and diu': 'Dadra and Nagar Haveli and Daman and Diu',
-            'delhi': 'Delhi',
-            'goa': 'Goa',
-            'gujarat': 'Gujarat',
-            'haryana': 'Haryana',
-            'himachal pradesh': 'Himachal Pradesh',
-            'jharkhand': 'Jharkhand',
-            'karnataka': 'Karnataka',
-            'kerala': 'Kerala',
-            'lakshadweep': 'Lakshadweep',
-            'madhya pradesh': 'Madhya Pradesh',
-            'maharashtra': 'Maharashtra',
-            'manipur': 'Manipur',
-            'meghalaya': 'Meghalaya',
-            'mizoram': 'Mizoram',
-            'nagaland': 'Nagaland',
-            'orissa': 'Odisha',
-            'punjab': 'Punjab',
-            'puducherry': 'Puducherry',
-            'rajasthan': 'Rajasthan',
-            'sikkim': 'Sikkim',
-            'tamil nadu': 'Tamil Nadu',
-            'telangana': 'Telangana',
-            'tripura': 'Tripura',
-            'uttar pradesh': 'Uttar Pradesh',
-            'uttaranchal': 'Uttarakhand',
-            'west bengal': 'West Bengal',
-            'jammu and kashmir': 'Jammu and Kashmir',
-            'ladakh': 'Ladakh'
-        };
-
-        function findStateData(pathElement) {
-            // Try to match state by various attributes
-            const pathId = pathElement.id;
-            const pathTitle = pathElement.getAttribute('title');
-            const pathName = pathElement.getAttribute('name');
-            
-            // Get the SVG state name (usually from name attribute)
-            let svgStateName = pathName || pathTitle || pathId;
-            if (!svgStateName) return null;
-            
-            svgStateName = svgStateName.toLowerCase();
-            
-            // Try direct mapping first
-            const mappedName = stateNameMapping[svgStateName];
-            if (mappedName) {
-                const found = heatmapData.find(state => state.state === mappedName);
-                if (found) return found;
-            }
-            
-            // Fallback to fuzzy matching
-            return heatmapData.find(state => {
-                const stateName = state.state.toLowerCase();
-                return (
-                    svgStateName.includes(stateName) ||
-                    stateName.includes(svgStateName) ||
-                    svgStateName.replace(/\s+/g, '') === stateName.replace(/\s+/g, '') ||
-                    // Handle common variations
-                    (svgStateName === 'orissa' && stateName === 'odisha') ||
-                    (svgStateName === 'uttaranchal' && stateName === 'uttarakhand')
-                );
-            });
-        }
-        
-        function getColorForRisk(fakeRatio, riskLevel) {
-            // Use actual fake news ratios for meaningful colors
-            if (riskLevel === 'insufficient_data') {
-                return '#88A4BC'; // Gray for insufficient data
-            }
-            
-            if (fakeRatio > 0.1) return '#dc3545'; // High risk - red (>10% fake)
-            if (fakeRatio > 0.05) return '#ff6b35'; // Medium risk - orange (5-10% fake)
-            if (fakeRatio > 0.02) return '#ffc107'; // Low-medium risk - yellow (2-5% fake)
-            if (fakeRatio > 0.001) return '#FF9933'; // Low risk - saffron (0.1-2% fake)
-            return '#138808'; // Very low risk - green (<0.1% fake)
-        }
-        
-        function handleStateClick(event) {
-            const path = event.target;
-            const stateData = findStateData(path);
-            
-            if (stateData) {
-                // Remove previous selection
-                svgMap.querySelectorAll('.selected').forEach(p => p.classList.remove('selected'));
-                
-                // Select current state
-                path.classList.add('selected');
-                selectedState = stateData.state;
-                
-                // Show state details
-                showStateDetails(stateData);
-                
-                // Load state-specific events
-                loadStateEvents(stateData.state);
-            }
-        }
-        
-        function handleStateHover(event) {
-            const path = event.target;
-            const stateData = findStateData(path);
-            
-            // Get state name from path
-            const pathName = path.getAttribute('name') || path.getAttribute('title') || path.id || 'Unknown';
-            
-            // Show tooltip with or without data
-            showTooltip(event, stateData || { state: pathName, event_count: 0, fake_count: 0, real_count: 0 });
-        }
-        
-        function handleStateLeave(event) {
-            hideTooltip();
-        }
-        
-        function showTooltip(event, stateData) {
-            let tooltip = document.getElementById('tooltip');
-            
-            // Create tooltip if it doesn't exist
-            if (!tooltip) {
-                tooltip = document.createElement('div');
-                tooltip.id = 'tooltip';
-                tooltip.style.cssText = `
-                    position: absolute;
-                    background: rgba(0, 0, 0, 0.9);
-                    color: white;
-                    padding: 10px;
-                    border-radius: 6px;
-                    font-size: 12px;
-                    z-index: 1000;
-                    pointer-events: none;
-                    max-width: 200px;
-                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-                `;
-                document.body.appendChild(tooltip);
-            }
-            
-            const fakePercentage = (stateData.fake_probability * 100).toFixed(2);
-            const aiConfidence = stateData.ai_confidence ? (stateData.ai_confidence * 100).toFixed(1) : 'N/A';
-            
-            // Check if state has data
-            const hasData = stateData && (stateData.event_count > 0 || stateData.fake_count > 0 || stateData.real_count > 0);
-            
-            if (!hasData) {
-                tooltip.innerHTML = `
-                    <div style="font-weight: bold; margin-bottom: 4px;">${stateData.state}</div>
-                    <div style="color: #888;">Currently no data available for this state</div>
-                `;
-            } else {
-                tooltip.innerHTML = `
-                    <div style="font-weight: bold; margin-bottom: 4px;">${stateData.state}</div>
-                    <div>Total Events: ${stateData.event_count || 0}</div>
-                    <div>Fake News: ${stateData.fake_count || 0} (${fakePercentage}%)</div>
-                    <div>Real News: ${stateData.real_count || 0}</div>
-                    <div>AI Confidence: ${aiConfidence}%</div>
-                    <div>Risk Level: <span style="color: ${stateData.risk_level === 'high' ? '#dc3545' : stateData.risk_level === 'medium' ? '#ffc107' : '#138808'};">${stateData.risk_level || 'low'}</span></div>
-                `;
-            }
-            
-            tooltip.style.display = 'block';
-            tooltip.style.left = event.clientX + 15 + 'px';
-            tooltip.style.top = event.clientY - 15 + 'px';
-        }
-        
-        function hideTooltip() {
-            const tooltip = document.getElementById('tooltip');
-            if (tooltip) {
-                tooltip.style.display = 'none';
-            }
-        }
-
-        // Test Colors Debug Function - Toggle between colored and default
-        let isTestColorsActive = false;
-        let originalColors = new Map();
-        
-        function testMapColors() {
-            if (!svgMap) {
-                console.log('SVG map not loaded yet');
-                return;
-            }
-            
-            const paths = svgMap.querySelectorAll('path');
-            
-            if (!isTestColorsActive) {
-                // First click - save original colors and apply test colors
-                paths.forEach(path => {
-                    originalColors.set(path, {
-                        fill: path.style.fill || getComputedStyle(path).fill,
-                        stroke: path.style.stroke || getComputedStyle(path).stroke,
-                        strokeWidth: path.style.strokeWidth || getComputedStyle(path).strokeWidth
-                    });
-                    
-                    // Apply different colors to test
-                    const colors = ['#dc3545', '#ff6b35', '#FF9933', '#ffc107', '#138808'];
-                    const pathIndex = Array.from(paths).indexOf(path);
-                    const color = colors[pathIndex % colors.length];
-                    path.style.fill = color;
-                    path.style.stroke = '#ffffff';
-                    path.style.strokeWidth = '1';
-                });
-                
-                isTestColorsActive = true;
-                console.log('Test colors applied');
-            } else {
-                // Second click - revert to original colors
-                paths.forEach(path => {
-                    const original = originalColors.get(path);
-                    if (original) {
-                        path.style.fill = original.fill;
-                        path.style.stroke = original.stroke;
-                        path.style.strokeWidth = original.strokeWidth;
-                    }
-                });
-                
-                isTestColorsActive = false;
-                originalColors.clear();
-                console.log('Original colors restored');
-            }
-        }
-
-        // Zoom and Pan Functions
-        function initializeMapBounds() {
-            if (!svgMap) return;
-
-            const svgRoot = document.getElementById('svgroot');
-            const rect = svgRoot.getBoundingClientRect();
-
-            mapBounds = {
-                width: rect.width,
-                height: rect.height,
-                centerX: rect.width / 2,
-                centerY: rect.height / 2
-            };
-
-            console.log('Map bounds initialized:', mapBounds);
-        }
-
-        function setupZoomAndPan() {
-            const svgRoot = document.getElementById('svgroot');
-            if (!svgRoot || !svgMap) return;
-
-            // Mouse wheel zoom
-            svgRoot.addEventListener('wheel', (e) => {
-                e.preventDefault();
-                const delta = e.deltaY > 0 ? -zoomStep : zoomStep;
-                const newZoom = Math.max(minZoom, Math.min(maxZoom, currentZoom + delta));
-
-                // Calculate zoom position relative to mouse
-                const rect = svgRoot.getBoundingClientRect();
-                const mouseX = e.clientX - rect.left;
-                const mouseY = e.clientY - rect.top;
-
-                const zoomRatio = newZoom / currentZoom;
-                currentX = mouseX - (mouseX - currentX) * zoomRatio;
-                currentY = mouseY - (mouseY - currentY) * zoomRatio;
-                currentZoom = newZoom;
-
-                updateTransform();
-                updateZoomLevel();
-            }, { passive: false });
-
-            // Mouse drag pan
-            svgRoot.addEventListener('mousedown', (e) => {
-                if (e.target !== svgRoot && !e.target.closest('svg')) return;
-                isDragging = true;
-                lastMouseX = e.clientX;
-                lastMouseY = e.clientY;
-                svgRoot.style.cursor = 'grabbing';
-            });
-
-            document.addEventListener('mousemove', (e) => {
-                if (!isDragging) return;
-
-                const dx = e.clientX - lastMouseX;
-                const dy = e.clientY - lastMouseY;
-
-                currentX += dx;
-                currentY += dy;
-
-                lastMouseX = e.clientX;
-                lastMouseY = e.clientY;
-
-                updateTransform();
-            });
-
-            document.addEventListener('mouseup', () => {
-                isDragging = false;
-                if (svgRoot) svgRoot.style.cursor = 'grab';
-            });
-
-            // Touch events for mobile
-            let touchStartDistance = 0;
-            let touchStartZoom = 1;
-
-            svgRoot.addEventListener('touchstart', (e) => {
-                if (e.touches.length === 2) {
-                    touchStartDistance = getTouchDistance(e.touches);
-                    touchStartZoom = currentZoom;
-                } else if (e.touches.length === 1) {
-                    isDragging = true;
-                    lastMouseX = e.touches[0].clientX;
-                    lastMouseY = e.touches[0].clientY;
-                }
-            });
-
-            svgRoot.addEventListener('touchmove', (e) => {
-                e.preventDefault();
-
-                if (e.touches.length === 2) {
-                    const distance = getTouchDistance(e.touches);
-                    const zoomRatio = distance / touchStartDistance;
-                    currentZoom = Math.max(minZoom, Math.min(maxZoom, touchStartZoom * zoomRatio));
-                    updateTransform();
-                    updateZoomLevel();
-                } else if (e.touches.length === 1 && isDragging) {
-                    const dx = e.touches[0].clientX - lastMouseX;
-                    const dy = e.touches[0].clientY - lastMouseY;
-
-                    currentX += dx;
-                    currentY += dy;
-
-                    lastMouseX = e.touches[0].clientX;
-                    lastMouseY = e.touches[0].clientY;
-
-                    updateTransform();
-                }
-            }, { passive: false });
-
-            svgRoot.addEventListener('touchend', () => {
-                isDragging = false;
-            });
-
-            console.log('Zoom and pan setup complete');
-        }
-
-        function getTouchDistance(touches) {
-            const dx = touches[0].clientX - touches[1].clientX;
-            const dy = touches[0].clientY - touches[1].clientY;
-            return Math.sqrt(dx * dx + dy * dy);
-        }
-
-        function updateTransform() {
-            if (!svgMap) return;
-            svgMap.style.transform = `translate(calc(-50% + ${currentX}px), calc(-50% + ${currentY}px)) scale(${currentZoom})`;
-        }
-
-        function updateZoomLevel() {
-            const zoomLevelEl = document.getElementById('zoom-level');
-            if (zoomLevelEl) {
-                zoomLevelEl.textContent = Math.round(currentZoom * 100) + '%';
-            }
-        }
-
-        function zoomIn() {
-            currentZoom = Math.min(maxZoom, currentZoom + zoomStep);
-            updateTransform();
-            updateZoomLevel();
-        }
-
-        function zoomOut() {
-            currentZoom = Math.max(minZoom, currentZoom - zoomStep);
-            updateTransform();
-            updateZoomLevel();
-        }
-
-        function resetZoom() {
-            currentZoom = 1;
-            currentX = 0;
-            currentY = 0;
-            updateTransform();
-            updateZoomLevel();
-        }
-
-        function centerMap() {
-            resetZoom();
-        }
-
-        // Add test colors button to zoom controls
-        function addTestColorsButton() {
-            const zoomControls = document.querySelector('.zoom-controls');
-            if (zoomControls && !document.querySelector('.test-colors-btn')) {
-                const testButton = document.createElement('button');
-                testButton.className = 'zoom-btn test-colors-btn';
-                testButton.onclick = testMapColors;
-                testButton.title = 'Test Colors';
-                testButton.textContent = '🎨';
-                zoomControls.appendChild(testButton);
-            }
-        }
-
-        // ── Update Status Bar from /api/v1/stats ──────────────────────────────
-        async function updateStatusBar() {
-            try {
-                const ctrl = new AbortController();
-                const timer = setTimeout(() => ctrl.abort(), 5000);
-                const res = await fetch(API_BASE + '/api/v1/stats', { signal: ctrl.signal });
-                clearTimeout(timer);
-                const data = await res.json();
-
-                const setText = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
-
-                setText('total-events', (data.total_events || 0).toLocaleString('en-IN'));
-                setText('active-states', (data.total_states || 0) + ' States');
-                const lastUpd = data.last_updated
-                    ? new Date(data.last_updated).toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit', timeZone: 'Asia/Kolkata' }) + ' IST'
-                    : 'Just now';
-                setText('last-update', lastUpd);
-                setText('classification-accuracy', ((data.classification_accuracy || 0) * 100).toFixed(1) + '%');
-
-                const navStatus = document.getElementById('nav-status');
-                if (navStatus) navStatus.textContent = data.processing_active ? 'Live — Ingesting' : 'System Ready';
-            } catch (err) {
-                console.warn('updateStatusBar failed:', err.message);
-            }
-        }
-
-        // ── Update Misinformation & Real News feeds ────────────────────────────
-        async function updateLiveFeeds() {
-            try {
-                const ctrl = new AbortController();
-                const timer = setTimeout(() => ctrl.abort(), 5000);
-                const res = await fetch(API_BASE + '/api/v1/events/live?limit=20', { signal: ctrl.signal });
-                clearTimeout(timer);
-                const data = await res.json();
-                const events = data.events || [];
-
-                const fake = events.filter(e => e.classification === 'fake');
-                const real = events.filter(e => e.classification === 'real');
-
-                renderFeed('misinformation-feed', fake, 'fake');
-                renderFeed('real-news-feed', real, 'real');
-            } catch (err) {
-                console.warn('updateLiveFeeds failed:', err.message);
-            }
-        }
-
-        function renderFeed(containerId, items, type) {
-            const el = document.getElementById(containerId);
-            if (!el) return;
-            if (!items.length) {
-                el.innerHTML = `<div style="opacity:0.6;text-align:center;padding:30px 20px;font-size:13px;">No ${type === 'fake' ? 'misinformation' : 'verified'} events found yet.</div>`;
-                return;
-            }
-            const accent = type === 'fake' ? '#dc3545' : '#138808';
-            el.innerHTML = items.map(ev => `
-                <div style="padding:12px;border-radius:8px;margin-bottom:10px;background:rgba(255,255,255,0.6);border-left:3px solid ${accent};font-size:13px;line-height:1.4;">
-                    <div style="font-weight:600;color:#2d3748;margin-bottom:4px;">${ev.title || 'Untitled'}</div>
-                    <div style="color:#718096;font-size:11px;">${ev.state || 'India'} · ${ev.source || 'Unknown'} · ${ev.timestamp ? new Date(ev.timestamp).toLocaleTimeString('en-IN', {hour:'2-digit',minute:'2-digit'}) : ''}</div>
-                </div>`).join('');
-        }
-
-        // ── Load state-specific events on map click ────────────────────────────
-        async function loadStateEvents(stateName) {
-            try {
-                const ctrl = new AbortController();
-                const timer = setTimeout(() => ctrl.abort(), 5000);
-                const res = await fetch(`${API_BASE}/api/v1/events/live?limit=40`, { signal: ctrl.signal });
-                clearTimeout(timer);
-                const data = await res.json();
-                const all = data.events || [];
-                const stateEvents = all.filter(e =>
-                    (e.state || '').toLowerCase() === stateName.toLowerCase() ||
-                    (e.state || '').toLowerCase() === 'national'
-                );
-                const fake = stateEvents.filter(e => e.classification === 'fake');
-                const real = stateEvents.filter(e => e.classification === 'real');
-                renderFeed('misinformation-feed', fake.length ? fake : all.filter(e => e.classification === 'fake').slice(0, 5), 'fake');
-                renderFeed('real-news-feed', real.length ? real : all.filter(e => e.classification === 'real').slice(0, 5), 'real');
-            } catch (err) {
-                console.warn('loadStateEvents failed:', err.message);
-            }
-        }
-
-        // ── Show state details in the info panel ──────────────────────────────
-        function showStateDetails(stateData) {
-            const nameEl = document.getElementById('stateName');
-            if (nameEl) nameEl.textContent = stateData.state;
-
-            const contentEl = document.getElementById('stateContent');
-            if (!contentEl) return;
-
-            const riskColor = stateData.risk_level === 'high' ? '#dc3545'
-                            : stateData.risk_level === 'medium' ? '#ffc107'
-                            : stateData.risk_level === 'low_medium' ? '#fd7e14'
-                            : '#138808';
-            const fakePercent = ((stateData.fake_probability || 0) * 100).toFixed(1);
-            const aiConf = ((stateData.ai_confidence || 0) * 100).toFixed(1);
-
-            contentEl.innerHTML = `
-                <div class="state-stats">
-                    <div class="stat-row"><span class="stat-label">Total Events</span><span class="stat-value">${(stateData.event_count || 0).toLocaleString('en-IN')}</span></div>
-                    <div class="stat-row"><span class="stat-label">Fake News</span><span class="stat-value" style="color:#dc3545;">${(stateData.fake_count || 0).toLocaleString('en-IN')} (${fakePercent}%)</span></div>
-                    <div class="stat-row"><span class="stat-label">Real News</span><span class="stat-value" style="color:#138808;">${(stateData.real_count || 0).toLocaleString('en-IN')}</span></div>
-                    <div class="stat-row"><span class="stat-label">AI Confidence</span><span class="stat-value">${aiConf}%</span></div>
-                    <div class="stat-row"><span class="stat-label">Risk Level</span><span class="risk-badge" style="background:${riskColor};color:${stateData.risk_level === 'medium' ? '#1a1a1a' : '#fff'}">${(stateData.risk_level || 'low').toUpperCase().replace('_',' ')}</span></div>
-                </div>
-                <div style="margin-top:24px;border-top:1px solid var(--border-accent);padding-top:24px;">
-                    <div class="news-section">
-                        <h3 style="color:var(--high-risk);"><span style="width:12px;height:12px;background:var(--high-risk);border-radius:50%;display:inline-block;margin-right:8px;"></span>🚨 Misinformation Alerts</h3>
-                        <div id="misinformation-feed" class="news-feed misinformation-feed"><div style="text-align:center;padding:20px;opacity:0.6;font-size:13px;">Loading...</div></div>
-                    </div>
-                    <div class="news-section">
-                        <h3 style="color:var(--green);"><span style="width:12px;height:12px;background:var(--green);border-radius:50%;display:inline-block;margin-right:8px;"></span>✅ Verified Real News</h3>
-                        <div id="real-news-feed" class="news-feed real-news-feed"><div style="text-align:center;padding:20px;opacity:0.6;font-size:13px;">Loading...</div></div>
-                    </div>
-                </div>`;
-        }
-
-        // Initialize when page loads
-        document.addEventListener('DOMContentLoaded', () => {
-            initializeEnhancedHeatmap();
-            setupZoomAndPan();
-            initializeMapBounds();
-            setTimeout(addTestColorsButton, 1000);
-        });
-    </script>
-</body>
-</html>

frontend/map/interactive-india-map.html

@@ -1,300 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>Interactive India Map</title>
-  <link rel="icon" type="image/x-icon" href="/public/Misinfo.ico">
-  <style>
-    :root{--bg:#0f1720;--panel:#0b1220;--accent:#3b82f6}
-    body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0f172a;color:#e2e8f0;margin:0;padding:0;display:flex;height:100vh;overflow:hidden;overflow-x:hidden;max-width:100vw}
-    #left{flex:1;display:flex;flex-direction:column}
-    header{padding:12px 16px;background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);display:flex;gap:12px;align-items:center}
-    header h1{font-size:18px;margin:0}
-    #mapwrap{flex:1;overflow:hidden;position:relative}
-    #svgroot{width:100%;height:100%;touch-action:none;cursor:grab;background:linear-gradient(180deg,#071027, #082035)}
-    #tooltip{position:absolute;pointer-events:none;padding:8px 10px;background:#fff;color:#041026;border-radius:6px;font-size:13px;box-shadow:0 6px 18px rgba(4,8,16,0.6);display:none}
-    aside{width:320px;background:var(--panel);border-left:1px solid rgba(255,255,255,0.03);padding:18px;box-sizing:border-box}
-    .state-name{font-size:20px;font-weight:600;margin-bottom:6px}
-    .meta{font-size:13px;opacity:0.85}
-    .controls{display:flex;gap:8px;align-items:center}
-    .btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:6px 8px;border-radius:8px;color:inherit;cursor:pointer}
-    input[type=search]{flex:1;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:inherit}
-    .legend{margin-top:12px;font-size:13px}
-    .hint{margin-top:18px;opacity:0.7;font-size:13px}
-    /* highlight style for svg paths */
-    .map-path{fill:#88A4BC;stroke:#ffffff;stroke-width:0.6}
-    .map-path:hover{fill:#3B729F}
-    .selected{fill:var(--accent) !important}
-    footer{padding-top:12px;font-size:12px;opacity:0.8}
-
-  /* Mobile Responsiveness */
-  @media (max-width: 768px) {
-    body { display: block; }
-    #left { width: 100%; height: 60vh; }
-    aside { 
-      width: 100%; 
-      border-left: none; 
-      border-top: 1px solid rgba(255,255,255,0.1);
-      padding: 12px;
-      height: 40vh;
-      overflow-y: auto;
-    }
-    header { padding: 8px 12px; }
-    header h1 { font-size: 16px; }
-    .controls { gap: 8px; }
-    input[type=search] { font-size: 14px; }
-    .btn { font-size: 12px; padding: 4px 6px; }
-    .state-name { font-size: 18px; }
-    .meta { font-size: 12px; }
-    .legend { font-size: 12px; }
-    .hint { font-size: 12px; }
-  }
-  
-  @media (max-width: 480px) {
-    #left { height: 50vh; }
-    aside { height: 50vh; padding: 8px; }
-    header { padding: 6px 8px; }
-    header h1 { font-size: 14px; }
-    .controls { flex-direction: column; gap: 6px; }
-    input[type=search] { padding: 6px; }
-    .btn { padding: 3px 6px; font-size: 11px; }
-    .state-name { font-size: 16px; }
-    .meta { font-size: 11px; }
-    .legend { font-size: 11px; margin-top: 8px; }
-    .hint { font-size: 11px; margin-top: 12px; }
-    footer { font-size: 10px; }
-  }
-  </style>
-</head>
-<body>
-  <div id="left">
-    <header>
-      <h1>Interactive India Map</h1>
-      <div class="controls" style="flex:1">
-        <input id="search" type="search" placeholder="Search state (e.g. Karnataka)" />
-        <button id="reset" class="btn">Reset</button>
-      </div>
-    </header>
-    <div id="mapwrap">
-      <div id="svgroot">Loading map...</div>
-      <div id="tooltip"></div>
-    </div>
-  </div>
-  <aside>
-    <div class="state-name" id="stateName">Click a state</div>
-    <div class="meta" id="stateDesc">State description will appear here. Hover or click a state on the map.</div>
-    <div class="legend" id="legend"></div>
-    <div class="hint">Use mouse wheel to zoom, drag to pan. On mobile: pinch to zoom (if supported).</div>
-    <footer>Files required: <code>in.svg</code> and <code>mapdata.js</code> in same folder.</footer>
-  </aside>
-
-  <script>
-    // Basic utility and UI
-    const svgRoot = document.getElementById('svgroot');
-    const tooltip = document.getElementById('tooltip');
-    const stateNameEl = document.getElementById('stateName');
-    const stateDescEl = document.getElementById('stateDesc');
-    const searchInput = document.getElementById('search');
-    const resetBtn = document.getElementById('reset');
-
-    // We'll load the SVG file (in.svg) and inject it so we can attach listeners
-    async function loadSVG(){
-      try{
-        const res = await fetch('in.svg');
-        if(!res.ok) throw new Error('SVG not found. Put in.svg beside this HTML file.');
-        const text = await res.text();
-        svgRoot.innerHTML = text;
-        initMap();
-      }catch(e){
-        svgRoot.innerHTML = '<div style="padding:18px;color:salmon">Error loading in.svg: '+e.message+'</div>';
-      }
-    }
-
-    // Load optional mapdata.js (user provided). It should define simplemaps_countrymap_mapdata
-    function loadMapData(){
-      return new Promise((resolve)=>{
-        if(window.simplemaps_countrymap_mapdata){
-          resolve(window.simplemaps_countrymap_mapdata);
-        }else{
-          // try to dynamically load mapdata.js
-          const s = document.createElement('script');
-          s.src = 'mapdata.js';
-          s.onload = ()=> resolve(window.simplemaps_countrymap_mapdata || {});
-          s.onerror = ()=> resolve({});
-          document.head.appendChild(s);
-        }
-      })
-    }
-
-    // Map interaction state (pan/zoom)
-    let scale = 1, tx = 0, ty = 0;
-    let isPanning = false, startX=0, startY=0;
-    let svgEl;
-    let mapData = {};
-    let selectedEl = null;
-
-    function initMap(){
-      // find the actual <svg>
-      svgEl = svgRoot.querySelector('svg');
-      if(!svgEl){ svgRoot.innerHTML = '<div style="padding:18px;color:salmon">in.svg does not contain an &lt;svg&gt; root.</div>'; return; }
-      // wrap paths with class map-path for styling
-      const paths = svgEl.querySelectorAll('path, polygon, rect, circle');
-      paths.forEach(p => {
-        if(!p.id) return;
-        p.classList.add('map-path');
-      });
-
-      // initial transform group
-      let g = document.createElementNS('http://www.w3.org/2000/svg','g');
-      // move all children into g
-      while(svgEl.firstChild){ g.appendChild(svgEl.firstChild); }
-      svgEl.appendChild(g);
-      svgEl.dataset.viewbox = svgEl.getAttribute('viewBox') || '';
-
-      // pan/zoom handlers
-      svgRoot.addEventListener('wheel', e=>{
-        e.preventDefault();
-        const delta = -e.deltaY * 0.001;
-        const oldScale = scale;
-        scale = Math.min(8, Math.max(0.5, scale * (1 + delta)));
-        // zoom towards cursor
-        const rect = svgRoot.getBoundingClientRect();
-        const cx = e.clientX - rect.left;
-        const cy = e.clientY - rect.top;
-        tx -= (cx/oldScale - cx/scale);
-        ty -= (cy/oldScale - cy/scale);
-        updateTransform();
-      }, {passive:false});
-
-      svgRoot.addEventListener('mousedown', e=>{
-        isPanning = true; startX = e.clientX; startY = e.clientY; svgRoot.style.cursor='grabbing';
-      });
-      window.addEventListener('mousemove', e=>{
-        if(!isPanning) return;
-        tx += (e.clientX - startX)/scale; ty += (e.clientY - startY)/scale; startX = e.clientX; startY = e.clientY; updateTransform();
-      });
-      window.addEventListener('mouseup', ()=>{ isPanning=false; svgRoot.style.cursor='grab'; });
-
-      // load map data and attach state listeners
-      loadMapData().then(md=>{
-        mapData = md || {};
-        attachStateHandlers();
-      });
-
-      // pointer hover for tooltip
-      svgRoot.addEventListener('mousemove', e=>{
-        const t = e.target;
-        if(t && t.classList && t.classList.contains('map-path')){
-          const id = t.id;
-          const info = lookupStateInfo(id);
-          showTooltip(e.clientX, e.clientY, info.name+(info.desc?('\n'+info.desc):''));
-        } else { hideTooltip(); }
-      });
-
-      svgRoot.addEventListener('mouseleave', hideTooltip);
-
-      // click to select
-      svgRoot.addEventListener('click', e=>{
-        const t = e.target;
-        if(t && t.classList && t.classList.contains('map-path')){
-          selectState(t.id, t);
-        }
-      });
-
-      // search
-      searchInput.addEventListener('keydown', e=>{ if(e.key==='Enter') doSearch(); });
-      resetBtn.addEventListener('click', resetView);
-    }
-
-    function updateTransform(){
-      const g = svgEl.querySelector('g');
-      g.setAttribute('transform', `translate(${tx} ${ty}) scale(${scale})`);
-    }
-
-    function showTooltip(cx, cy, html){
-      tooltip.style.display='block';
-      tooltip.innerText = html;
-      const mapRect = svgRoot.getBoundingClientRect();
-      const left = Math.min(mapRect.width - 180, Math.max(8, cx - mapRect.left + 12));
-      const top = Math.max(8, cy - mapRect.top + 12);
-      tooltip.style.left = left+'px'; tooltip.style.top = top+'px';
-    }
-    function hideTooltip(){ tooltip.style.display='none'; }
-
-    function lookupStateInfo(id){
-      const empty = {name:id || 'Unknown', desc:''};
-      if(!id) return empty;
-      if(mapData && mapData.state_specific && mapData.state_specific[id]){
-        const s = mapData.state_specific[id];
-        return {name: s.name || id, desc: (s.description && s.description!=='default')?s.description:''};
-      }
-      // fallback: try matching by common names
-      return {name: id, desc:''};
-    }
-
-    function selectState(id, el){
-      if(selectedEl) selectedEl.classList.remove('selected');
-      selectedEl = el;
-      selectedEl.classList.add('selected');
-      const info = lookupStateInfo(id);
-      stateNameEl.innerText = info.name || id;
-      stateDescEl.innerText = info.desc || (mapData.main_settings && mapData.main_settings.state_description) || 'No description available.';
-    }
-
-    function attachStateHandlers(){
-      // populate legend from mapData if available
-      if(mapData && mapData.legend && Array.isArray(mapData.legend.entries) && mapData.legend.entries.length){
-        const legend = document.getElementById('legend');
-        legend.innerHTML = '<strong>Legend</strong><br>' + mapData.legend.entries.join(', ');
-      }
-
-      // add pointer cursors
-      const paths = svgEl.querySelectorAll('.map-path');
-      paths.forEach(p=>{
-        p.style.cursor='pointer';
-        // attempt to set title attribute for accessibility
-        const info = lookupStateInfo(p.id);
-        p.setAttribute('data-name', info.name||p.id);
-        // if SVG path has no fill set or fill=none, set a default fill
-        if(!p.getAttribute('fill') || p.getAttribute('fill')==='none'){
-          p.setAttribute('fill','#88A4BC');
-        }
-      });
-    }
-
-    function doSearch(){
-      const q = searchInput.value.trim().toLowerCase();
-      if(!q) return;
-      // try to find a state in mapdata
-      const m = mapData.state_specific || {};
-      for(const k of Object.keys(m)){
-        const name = (m[k].name||'').toLowerCase();
-        if(name.includes(q) || k.toLowerCase()===q){
-          // find element with id k
-          const el = svgEl.querySelector('#'+CSS.escape(k));
-          if(el){
-            // center view on bbox
-            const bbox = el.getBBox();
-            // simple centering: move translate so bbox is roughly center
-            const rect = svgRoot.getBoundingClientRect();
-            const cx = bbox.x + bbox.width/2; const cy = bbox.y + bbox.height/2;
-            // compute desired tx/ty so that cx,cy appear near center of container
-            const targetScreenX = rect.width/2; const targetScreenY = rect.height/2;
-            tx = targetScreenX/scale - cx; ty = targetScreenY/scale - cy;
-            updateTransform();
-            selectState(k, el);
-            return;
-          }
-        }
-      }
-      alert('No state found for "'+q+'"');
-    }
-
-    function resetView(){ scale = 1; tx = 0; ty = 0; updateTransform(); if(selectedEl) { selectedEl.classList.remove('selected'); selectedEl=null; stateNameEl.innerText='Click a state'; stateDescEl.innerText='State description will appear here.'} }
-
-    // initial load
-    loadSVG();
-  </script>
-</body>
-</html>

frontend/privacy-policy.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
+  <style>
+    .page-hero { padding-top: 100px; padding-bottom: 60px; }
+    .legal-content { max-width: 800px; margin: 0 auto; padding: 40px; background: #fff; border-radius: 24px; border: 1px solid #e2e8f0; }
+    h3 { font-size: 20px; font-weight: 900; margin: 32px 0 16px; color: #0f172a; }
+    p { margin-bottom: 16px; color: #475569; line-height: 1.8; }
+    @media (min-width: 1024px) { .page-hero { padding-top: 140px; padding-bottom: 80px; } }
+  </style>
+  <title>Privacy Policy - Misinformation Heatmap</title>
+  <link rel="stylesheet" href="/assets/css/styles.css">
+  <script type="module" src="/assets/js/main.js"></script>
+</head>
+<body data-page="privacy-policy" class="min-h-screen bg-slate-50 antialiased">
+  <div data-navbar></div>
+  <main class="page-hero px-6">
+    <h1 class="text-4xl font-black text-center text-slate-950">Privacy Policy</h1>
+    <p class="text-center mt-4 text-slate-500 italic">Last updated: May 2026</p>
+  </main>
+  <section class="pb-32 px-6 lg:px-8">
+    <div class="legal-content shadow-sm">
+      <h3>1. Data Collection</h3>
+      <p>Misinformation Heatmap collects public digital signals for the purpose of identifying and verifying misinformation clusters. We do not collect private personal communications or non-public identifiable information.</p>
+      
+      <h3>2. Data Usage</h3>
+      <p>Processed data is used solely to generate geographical heatmaps and regional signal reports. Aggregated data may be shared with verified research and government partners.</p>
+      
+      <h3>3. Regional Sovereignty</h3>
+      <p>All data collected within India is stored and processed on local servers in compliance with national data protection regulations.</p>
+    </div>
+  </section>
+  <div data-footer-placeholder></div>
+  <script>
+    fetch('/contact.html').then(r => r.text()).then(html => {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(html, 'text/html');
+      const footer = doc.querySelector('footer');
+      if(footer) document.querySelector('[data-footer-placeholder]').replaceWith(footer);
+    });
+  </script>
+</body>
+</html>

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

server.py

@@ -218,6 +218,14 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+@app.middleware("http")
+async def add_security_headers(request, call_next):
+    response = await call_next(request)
+    response.headers["X-Frame-Options"] = "DENY"
+    response.headers["X-Content-Type-Options"] = "nosniff"
+    response.headers["X-XSS-Protection"] = "1; mode=block"
+    return response
+
 # Static files
 if MAP_DIR.exists():
     app.mount("/map", StaticFiles(directory=str(MAP_DIR)), name="map")
@@ -274,6 +282,7 @@ async def get_stats(response: Response = None):
         return cached
 
     total = fake_n = real_n = uncertain = 0
+    avg_fake_conf = avg_real_conf = avg_conf = 0.0
     try:
         with get_db() as conn:
             row = conn.execute("""
@@ -281,21 +290,35 @@ async def get_stats(response: Response = None):
                     COUNT(*)                                                          AS total,
                     SUM(CASE WHEN fake_news_verdict = 'fake'      THEN 1 ELSE 0 END) AS fake,
                     SUM(CASE WHEN fake_news_verdict = 'real'      THEN 1 ELSE 0 END) AS real,
-                    SUM(CASE WHEN fake_news_verdict = 'uncertain' THEN 1 ELSE 0 END) AS uncertain
+                    SUM(CASE WHEN fake_news_verdict = 'uncertain' THEN 1 ELSE 0 END) AS uncertain,
+                    AVG(CASE WHEN fake_news_verdict = 'fake' THEN fake_news_confidence END) AS avg_fake_conf,
+                    AVG(CASE WHEN fake_news_verdict = 'real' THEN fake_news_confidence END) AS avg_real_conf,
+                    AVG(fake_news_confidence)                                                AS avg_conf
                 FROM events
-                WHERE timestamp > datetime('now', '-24 hours')
             """).fetchone()
             total, fake_n, real_n, uncertain = (row[k] or 0 for k in ("total","fake","real","uncertain"))
+            avg_fake_conf = row["avg_fake_conf"] or 0.0
+            avg_real_conf = row["avg_real_conf"] or 0.0
+            avg_conf      = row["avg_conf"] or 0.0
     except Exception as exc:
         logger.error(f"Stats DB error: {exc}")
 
+    # Dynamic model performance metrics derived from actual confidence scores
+    precision_val = round(avg_fake_conf, 4) if total > 0 else 0.0
+    recall_val    = round(avg_real_conf, 4) if total > 0 else 0.0
+    f1_val        = round(2 * precision_val * recall_val / (precision_val + recall_val), 4) if (precision_val + recall_val) > 0 else 0.0
+    accuracy_val  = round(avg_conf, 4) if total > 0 else 0.0
+
     result = {
         "total_events":            total,
         "fake_events":             fake_n,
         "real_events":             real_n,
         "uncertain_events":        uncertain,
         "processing_active":       _is_processing_active(),
-        "classification_accuracy": 0.91 if total > 0 else 0.5,
+        "classification_accuracy": accuracy_val,
+        "precision":               precision_val,
+        "recall":                  recall_val,
+        "f1_score":                f1_val,
         "system_status":           "LIVE" if _is_processing_active() else "READY",
         "total_states":            len(_INDIAN_STATES) or 36,
         "ml_ready":                _ml_ready.is_set(),
@@ -365,9 +388,68 @@ async def get_heatmap_data(response: Response = None, days: int = Query(7, ge=1,
     _cache_set(cache_key, result)
     return result
 
+def fetch_balanced_events(conn, base_where_clause: str, params: tuple, limit: int):
+    """
+    Fetches a balanced mix of fake and non-fake events to prevent starvation.
+    Ensures that both categories are represented if they exist in the DB.
+    """
+    half_limit = max(1, limit // 2)
+    
+    # 1. Fetch fake events
+    fake_query = f"""
+        SELECT title, SUBSTR(content, 1, 150) as content, source, state,
+               fake_news_confidence, fake_news_verdict, timestamp
+        FROM events
+        WHERE {base_where_clause} AND fake_news_verdict = 'fake'
+        ORDER BY timestamp DESC
+        LIMIT ?
+    """
+    fake_rows = conn.execute(fake_query, params + (half_limit,)).fetchall()
+    
+    # 2. Fetch non-fake events (filling the remaining limit)
+    other_limit = max(1, limit - len(fake_rows))
+    other_query = f"""
+        SELECT title, SUBSTR(content, 1, 150) as content, source, state,
+               fake_news_confidence, fake_news_verdict, timestamp
+        FROM events
+        WHERE {base_where_clause} AND fake_news_verdict != 'fake'
+        ORDER BY timestamp DESC
+        LIMIT ?
+    """
+    other_rows = conn.execute(other_query, params + (other_limit,)).fetchall()
+    
+    # 3. If other_rows didn't fill the quota and we capped fake_rows, fetch more fake events
+    total_fetched = len(fake_rows) + len(other_rows)
+    if total_fetched < limit and len(fake_rows) == half_limit:
+        full_fake_query = f"""
+            SELECT title, SUBSTR(content, 1, 150) as content, source, state,
+                   fake_news_confidence, fake_news_verdict, timestamp
+            FROM events
+            WHERE {base_where_clause} AND fake_news_verdict = 'fake'
+            ORDER BY timestamp DESC
+            LIMIT ?
+        """
+        fake_rows = conn.execute(full_fake_query, params + (limit - len(other_rows),)).fetchall()
+        
+    combined = list(fake_rows) + list(other_rows)
+    
+    def _get_timestamp_sort_key(row):
+        ts = row["timestamp"]
+        if ts is None:
+            return ""
+        if isinstance(ts, str):
+            return ts
+        if hasattr(ts, "isoformat"):
+            return ts.isoformat()
+        return str(ts)
+        
+    combined.sort(key=_get_timestamp_sort_key, reverse=True)
+    return combined
+
+
 # ─── API: LIVE EVENTS ────────────────────────────────────────────────────────
 @app.get("/api/v1/events/live", tags=["Events"])
-async def get_live_events(response: Response = None, limit: int = Query(10, ge=1, le=100)):
+async def get_live_events(response: Response = None, limit: int = Query(10, ge=1, le=500)):
     """Recent events from the last hour."""
     if response:
         response.headers["Cache-Control"] = "public, max-age=30"
@@ -380,14 +462,7 @@ async def get_live_events(response: Response = None, limit: int = Query(10, ge=1
     rows = []
     try:
         with get_db() as conn:
-            rows = conn.execute("""
-                SELECT title, SUBSTR(content, 1, 150) as content, source, state,
-                       fake_news_confidence, fake_news_verdict, timestamp
-                FROM events
-                WHERE timestamp > datetime('now', '-24 hours')
-                ORDER BY timestamp DESC
-                LIMIT ?
-            """, (limit,)).fetchall()
+            rows = fetch_balanced_events(conn, "timestamp > datetime('now', '-24 hours')", (), limit)
     except Exception as exc:
         logger.error(f"Live events error: {exc}")
 
@@ -431,7 +506,7 @@ async def sse_stream():
 
 # ─── API: STATE EVENTS ───────────────────────────────────────────────────────
 @app.get("/api/v1/events/state/{state}", tags=["Events"])
-async def get_state_events(state: str, response: Response = None, limit: int = Query(10, ge=1, le=50)):
+async def get_state_events(state: str, response: Response = None, limit: int = Query(30, ge=1, le=100)):
     if response:
         response.headers["Cache-Control"] = "public, max-age=30"
         
@@ -443,12 +518,7 @@ async def get_state_events(state: str, response: Response = None, limit: int = Q
     rows = []
     try:
         with get_db() as conn:
-            rows = conn.execute("""
-                SELECT title, SUBSTR(content, 1, 150) as content, source,
-                       fake_news_confidence, fake_news_verdict, timestamp
-                FROM events WHERE state = ?
-                ORDER BY timestamp DESC LIMIT ?
-            """, (state, limit)).fetchall()
+            rows = fetch_balanced_events(conn, "LOWER(state) = LOWER(?)", (state,), limit)
     except Exception as exc:
         logger.error(f"State events error [{state}]: {exc}")
 
@@ -459,10 +529,11 @@ async def get_state_events(state: str, response: Response = None, limit: int = Q
             "title":            r["title"] or "Processing…",
             "content":          body[:200] + ("…" if len(body) > 200 else ""),
             "source":           r["source"] or "Unknown",
+            "state":            r["state"] or state,
             "fake_probability": round(r["fake_news_confidence"] or 0.5, 2),
             "classification":   r["fake_news_verdict"] or "uncertain",
             "confidence":       round(r["fake_news_confidence"] or 0.5, 2),
-            "timestamp":        r["timestamp"],
+            "timestamp":        r["timestamp"].isoformat() if hasattr(r["timestamp"], "isoformat") else str(r["timestamp"] or ""),
         })
 
     result = {"state": state, "events": events, "total_count": len(events)}

tailwind.config.js

@@ -0,0 +1,116 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './frontend/index.html',
+    './frontend/dashboard.html',
+    './frontend/heatmap.html',
+    './frontend/assets/js/**/*.js'
+  ],
+  theme: {
+    extend: {
+      colors: {
+        saffron: {
+          50: '#fff7ed',
+          100: '#ffedd5',
+          200: '#fed7aa',
+          300: '#fdba74',
+          400: '#fb923c',
+          500: '#FF9933', // Actual Indian flag saffron
+          600: '#ea580c',
+          700: '#c2410c',
+          800: '#9a3412',
+          900: '#7c2d12',
+          950: '#431407',
+        },
+        'india-green': {
+          50: '#f0fdf4',
+          100: '#dcfce7',
+          200: '#bbf7d0',
+          300: '#86efac',
+          400: '#4ade80',
+          500: '#138808', // Actual Indian flag green
+          600: '#16a34a',
+          700: '#15803d',
+          800: '#166534',
+          900: '#14532d',
+          950: '#052e16',
+        },
+        'ashoka-blue': {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#000080', // Actual Indian flag navy blue
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+          950: '#172554',
+        },
+      },
+      boxShadow: {
+        'soft': '0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.06)',
+        'card': '0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.06)',
+        'premium': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.05)',
+      },
+      animation: {
+        'fade-in-up': 'fadeInUp 0.6s ease-out forwards',
+        'fade-in': 'fadeIn 0.5s ease-out forwards',
+        'pulse-soft': 'pulseSoft 2s ease-in-out infinite',
+        'premium-fade': 'premiumFade 8s ease-in-out infinite alternate',
+        float: 'float 3s ease-in-out infinite',
+        blink: 'blink 1s step-end infinite',
+        'bounce-scroll': 'bounceScroll 4s ease-in-out infinite',
+      },
+      keyframes: {
+        bounceScroll: {
+          '0%, 15%, 100%': { transform: 'translateY(0)' },
+          '7.5%': { transform: 'translateY(-12px)' },
+        },
+        premiumFade: {
+          '0%': { opacity: '0.6' },
+          '100%': { opacity: '1' },
+        },
+        fadeInUp: {
+          '0%': { opacity: '0', transform: 'translateY(100vh) scale(0.1)', borderRadius: '10rem' },
+          '70%': { opacity: '1', transform: 'translateY(-20px) scale(1.02)' },
+          '100%': { opacity: '1', transform: 'translateY(0) scale(1)', borderRadius: '2.5rem' },
+        },
+        fadeOutDown: {
+          '0%': { opacity: '1', transform: 'translateY(0) scale(1)', borderRadius: '2.5rem' },
+          '100%': { opacity: '0', transform: 'translateY(100vh) scale(0.1)', borderRadius: '10rem' },
+        },
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        fadeOut: {
+          '0%': { opacity: '1' },
+          '100%': { opacity: '0' },
+        },
+        pulseSoft: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.7' },
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0) scale(1) rotate(0deg)' },
+          '50%': { transform: 'translateY(-20px) scale(1.05) rotate(1deg)' },
+        },
+        blink: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0' },
+        },
+        toastInRight: {
+          '0%': { opacity: '0', transform: 'translateX(100%)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' },
+        },
+        toastOutRight: {
+          '0%': { opacity: '1', transform: 'translateX(0)' },
+          '100%': { opacity: '0', transform: 'translateX(100%)' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}

vite.config.js

@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+
+export default defineConfig({
+  root: 'frontend',
+  publicDir: '../public',
+  build: {
+    outDir: '../dist',
+    emptyOutDir: true,
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'frontend/index.html'),
+        dashboard: resolve(__dirname, 'frontend/dashboard.html'),
+        heatmap: resolve(__dirname, 'frontend/heatmap.html')
+      }
+    }
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:8000',
+        changeOrigin: true,
+        timeout: 30000
+      },
+      '/health': {
+        target: 'http://127.0.0.1:8000',
+        changeOrigin: true,
+        timeout: 30000
+      }
+    }
+  }
+})