diff --git a/COPYRIGHT b/COPYRIGHT
new file mode 100644
index 0000000..9beae2a
--- /dev/null
+++ b/COPYRIGHT
@@ -0,0 +1,7 @@
+Copyright (c) 2026 GreenLegacy
+
+All rights reserved.
+
+This source code is proprietary and confidential. No part of this software may be copied, reproduced, distributed, published, or modified, in whole or in part, in any form or by any means, without the prior written, explicit permission of the copyright owner. 
+
+Unauthorized copying of this file, via any medium, is strictly prohibited.
diff --git a/README.md b/README.md
index 2ee9a0e..2e71344 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,205 @@
-# GREEN-LEGACY
\ No newline at end of file
+<div align="center">
+
+# 🌍 CleanCred
+### Verified Waste Action & Green Credits Platform
+
+**Smart India Hackathon 2026** · Problem Statement **SIH26195** · Team **GreenLegacy** (ID: GSIH26015)
+Theme: *Clean & Green Technology* · Category: *Software*
+
+[![Live Demo](https://img.shields.io/badge/Live-Demo-059669?style=for-the-badge&logo=googlechrome&logoColor=white)](https://leaguestar.github.io/CleanCred/)
+[![SIH 2026](https://img.shields.io/badge/SIH-2026-0891B2?style=for-the-badge)](#-about)
+[![License](https://img.shields.io/badge/License-Proprietary-0F172A?style=for-the-badge)](#%EF%B8%8F-license--copyright)
+
+[🌐 Live Website](https://leaguestar.github.io/CleanCred/) · [✨ Features](#-features--portals) · [⚙️ How It Works](#%EF%B8%8F-how-it-works) · [🛠️ Tech Stack](#%EF%B8%8F-technology-stack) · [🚀 Setup](#-installation--local-setup) · [👥 Team](#-team-greenlegacy)
+
+</div>
+
+---
+
+## 📖 About
+
+**CleanCred** is a **proof-backed waste management and collection platform** built for Smart India Hackathon 2026. Instead of rewarding citizens for simply *reporting* waste, CleanCred only issues **Green Credits** once an action is independently **verified** — turning municipal waste tracking into a closed-loop, auditable system.
+
+Every claimed action is checked against multiple independent signals before a credit is minted, which means the credit ledger reflects real, confirmed cleanup activity rather than self-reported claims. This gives municipalities a trustworthy dataset for monitoring, accountability, and planning — while giving citizens a transparent, gamified reason to participate.
+
+> **Report → Verify → Collect → Record → Earn**
+
+## 🚨 The Problem
+
+Most civic waste-reporting apps stop at "report" — a citizen submits a complaint or photo, and there's no reliable way to confirm the waste was actually segregated, collected, or resolved. This creates:
+
+- Reward systems that can be gamed with fake or duplicate submissions
+- No verifiable link between a citizen's claimed action and the outcome on the ground
+- Municipalities with reporting data but no confidence in its accuracy
+
+## 💡 Our Solution
+
+CleanCred closes that gap with **multi-signal verification** — a claim only becomes a credit once it clears every checkpoint in the pipeline:
+
+| Signal | What It Confirms |
+| :--- | :--- |
+| 🤖 **AI Segregation Check** | Whether the submitted waste is properly segregated |
+| 📍 **GPS Proximity** | That the citizen was actually at the reported location |
+| ⏱️ **Timestamp Verification** | That the action happened when it was claimed to |
+| 🔳 **QR-Based Collection** | Sanitation staff confirm physical collection at source |
+
+### Why It's Different
+
+- **Proof-backed action** — every credit is tied to verifiable evidence, not a self-report
+- **Multi-signal verification** — AI + GPS + QR + timestamp working together, not any single check alone
+- **Closed-loop accountability** — a full Report → Verify → Collect → Record cycle, not a one-way complaint box
+- **Behaviour-linked rewards** — credits are issued *after* verification, never merely for submitting
+- **Municipal visibility** — the same verified event doubles as clean data for monitoring and analytics
+
+## ✨ Features & Portals
+
+CleanCred is a multi-portal ecosystem, with a dedicated experience for every stakeholder in the waste-management lifecycle:
+
+| Portal / Module | Description |
+| :--- | :--- |
+| 🧑‍🤝‍🧑 **Citizen Dashboard** | Login, profile, and a central home to track activity and impact |
+| 📝 **Waste & Dumping Reporting** | Report standard waste or flag illegal dumping sites with geolocation |
+| 🎁 **Rewards Wallet** | Verified green actions earn Green Credits, with confetti + audio feedback |
+| 🏆 **Leaderboard** | Community rankings that drive friendly competition and engagement |
+| 🗺️ **Live Tracking & Mapping** | Real-time view of collection routes and worker deployment |
+| 🔳 **Smart QR Integration** | QR generation and in-browser scanning for smart-bin and collection verification |
+| 🧹 **Worker Portal** | Sanitation staff view assigned tasks and mark bins/sites as cleared |
+| 🏢 **Institution Portal** | Institutions manage local sustainability goals and participation |
+| 📊 **Admin & Impact Analytics** | System-wide metrics, verified-report oversight, and environmental impact tracking |
+
+## ⚙️ How It Works
+
+```
+   ┌────────────┐     ┌─────────────┐     ┌────────────┐     ┌────────────┐     ┌──────────┐
+   │  1. REPORT │ ──▶ │  2. VERIFY  │ ──▶ │ 3. COLLECT │ ──▶ │ 4. RECORD  │ ──▶ │ 5. EARN  │
+   └────────────┘     └─────────────┘     └────────────┘     └────────────┘     └──────────┘
+   Citizen submits     AI + GPS +          Sanitation staff    Verified event      Green Credits
+   evidence of a       Timestamp check     confirm pickup      logged for city-    minted to the
+   segregated/         the claim           via QR scan         wide analytics      citizen's wallet
+   disposed action
+```
+
+1. **Report** — A citizen submits evidence (photo + location) of waste segregation, disposal, or an illegal dumping site.
+2. **Verify** — The system checks AI-based segregation quality, GPS proximity to the reported site, and timestamp authenticity.
+3. **Collect** — A waste collector arrives and confirms pickup by scanning a QR code, closing the loop physically.
+4. **Record** — The verified event is logged into city-wide monitoring and impact-analytics dashboards.
+5. **Earn** — Only now are Green Credits issued to the citizen's Rewards Wallet.
+
+## 🛠️ Technology Stack
+
+CleanCred uses a lightweight, dependency-light stack chosen for a smooth UI and rapid, judge-friendly deployment:
+
+| Layer | Technology |
+| :--- | :--- |
+| **Structure** | Semantic HTML5 |
+| **Styling** | Tailwind CSS (utility layer) + custom `main.css`, `components.css`, `animations.css`, `responsive.css` |
+| **Application Logic** | Modular Vanilla JavaScript — a lightweight client-side router and global state manager |
+| **Interactivity** | Custom utilities for QR generation/scanning, live-map rendering, confetti, and audio feedback |
+| **Backend / Local Server** | Python (`server.py`) — a zero-dependency HTTP server for local hosting and API endpoints |
+| **Deployment** | Static hosting via GitHub Pages |
+
+## 📂 Project Structure
+
+```bash
+CleanCred/
+├── index.html                  # Main entry point & app shell
+├── server.py                   # Python local dev / API server
+├── start.bat                   # Windows one-click startup script
+├── css/
+│   ├── main.css                 # Global styles & design tokens
+│   ├── components.css           # Component-level styling
+│   ├── animations.css           # Transitions & keyframes
+│   └── responsive.css           # Mobile / tablet responsiveness
+└── js/
+    ├── app.js                   # App router & controller
+    ├── state.js                 # Global state management
+    ├── components/               # One module per portal/view
+    │   ├── dashboard.js              # Citizen dashboard
+    │   ├── reportWaste.js            # Waste reporting flow
+    │   ├── illegalDumping.js         # Illegal dumping reports
+    │   ├── rewardsWallet.js          # Green Credits wallet
+    │   ├── leaderboard.js            # Community leaderboard
+    │   ├── liveTracking.js           # Live collection map
+    │   ├── workerPortal.js           # Sanitation worker portal
+    │   ├── institutionPortal.js      # Institution portal
+    │   ├── adminDashboard.js         # Admin controls
+    │   ├── impactDashboard.js        # Analytics & impact
+    │   ├── profile.js                # User profile
+    │   └── landing.js                # Landing page
+    └── utils/                     # Shared helpers
+        ├── qrCode.js                  # QR code generation
+        ├── qrScanner.js               # In-browser QR scanning
+        ├── mapHelper.js               # Map rendering utilities
+        ├── confetti.js                # Reward celebration effects
+        ├── audio.js                   # Sound feedback
+        └── formatters.js              # Shared formatting helpers
+```
+
+## 🚀 Installation & Local Setup
+
+**Prerequisites:** [Python 3.x](https://www.python.org/downloads/) installed on your system.
+
+1. **Clone the repository**
+   ```bash
+   git clone https://github.com/LeagueStar/CleanCred.git
+   cd CleanCred
+   ```
+
+2. **Launch the server**
+
+   - **Windows** — double-click `start.bat`, or run it from the command line
+   - **macOS / Linux / manual** —
+     ```bash
+     python3 server.py
+     ```
+
+3. **Open the app**
+
+   Navigate to `http://localhost:8081` (or the port printed in the server output).
+
+No build step, no package manager, no external services required — clone and run.
+
+## 🧭 Usage Workflow
+
+| Role | What They Do |
+| :--- | :--- |
+| **Citizens** | Log in, report waste or dumping sites with photo evidence, and track Green Credits and leaderboard rank in the Rewards Wallet |
+| **Sanitation Workers** | Open the Worker Portal to view assigned tasks, follow live collection routes, and confirm pickup via QR scan |
+| **Institutions** | Manage local sustainability goals and monitor participation from the Institution Portal |
+| **Admins** | Use the Admin & Impact Dashboards to verify reports, oversee credit distribution, and analyze city-wide environmental impact |
+
+## 🗺️ Roadmap
+
+- [ ] Live backend integration for persistent credit ledger and user accounts
+- [ ] Production AI model for automated segregation-quality scoring
+- [ ] Municipal-grade analytics exports for civic bodies
+- [ ] Native mobile app for on-the-go citizen reporting
+
+## 🤝 Contributing
+
+This project was developed exclusively for the **Smart India Hackathon 2026**. Outside contributions, pull requests, and forks are not accepted, in order to preserve the integrity of the submission.
+
+## 🛡️ License & Copyright
+
+**Copyright © 2026 Team GreenLegacy. All Rights Reserved.**
+
+This project was developed by **Team GreenLegacy** for the Smart India Hackathon (SIH) 2026. This source code is proprietary and confidential. No part of this software, code, or design may be copied, reproduced, distributed, published, or modified — in whole or in part, in any form or by any means — without the prior written, explicit permission of the copyright owners.
+
+Unauthorized copying, cloning, or use of this project is strictly prohibited.
+
+## 👥 Team GreenLegacy
+
+| Member | GitHub |
+| :--- | :--- |
+| **Kartik Devdhawala** | [@LeagueStar](https://github.com/LeagueStar) |
+| **Harshprit Bagga** | — |
+| **Shivansh Prajapati** | — |
+| **Suraj Singh** | — |
+| **Satyam Gupta** | — |
+| **Kreya Patel** | — |
+
+<div align="center">
+
+**🌐 [Live Website](https://leaguestar.github.io/CleanCred/)** · Built with 💚 for a cleaner tomorrow
+
+</div>
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 0000000..34450a5
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,23 @@
+# Security Policy
+
+## Supported Versions
+
+We currently provide security updates for the following versions of CleanCred:
+
+| Version | Supported          |
+| ------- | ------------------ |
+| > 1.0.0 | :white_check_mark: |
+| < 1.0.0 | :x:                |
+
+## Reporting a Vulnerability
+
+Please do not report security vulnerabilities through public GitHub issues. 
+
+If you believe you have found a security vulnerability in CleanCred, please report it privately through LinkedIn. 
+
+**What to include:**
+* A description of the vulnerability and its potential impact.
+* Detailed steps to reproduce the issue.
+* Any relevant logs, screenshots, or code snippets.
+
+We will acknowledge receipt of your vulnerability report within [e.g., 48 hours] and strive to send you regular updates about our progress. If the vulnerability is confirmed, we will release a patch as quickly as possible.
diff --git a/adminDashboard.js b/adminDashboard.js
deleted file mode 100644
index adcee5d..0000000
--- a/adminDashboard.js
+++ /dev/null
@@ -1,298 +0,0 @@
-/* ==========================================================================
-   GREEN KARMA — GOVERNMENT & MUNICIPAL ADMIN COMMAND CENTER
-   Connected to Municipal Waste Database & Smart City GIS Grid
-   ========================================================================== */
-
-import { State } from '../state.js';
-import { Formatters } from '../utils/formatters.js';
-import { MapHelper } from '../utils/mapHelper.js';
-import { SoundFX } from '../utils/audio.js';
-
-export const AdminDashboardView = {
-  charts: {},
-  mapInstance: null,
-
-  render() {
-    const container = document.getElementById('view-admin');
-    if (!container) return;
-
-    const stats = State.state.cityStats;
-
-    container.innerHTML = `
-      <div class="app-container">
-        
-        <!-- Header -->
-        <div class="flex-between" style="margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
-          <div>
-            <div class="badge badge-navy" style="margin-bottom: 0.35rem;">
-              <span>🏛️</span> Municipal Corporation Command Center &bull; Smart City Mission
-            </div>
-            <h2>City-Wide Waste Analytics & Oversight</h2>
-            <p>Real-time municipal telemetry, ward-wise segregation indices, and recycling efficiency.</p>
-          </div>
-
-          <!-- Connected DB Status Pill -->
-          <div style="background: #ECFDF5; border: 1.5px solid #10B981; padding: 0.6rem 1.2rem; border-radius: var(--radius-full); display: flex; align-items: center; gap: 0.6rem;">
-            <span style="width: 10px; height: 10px; border-radius: 50%; background: #10B981; animation: pulseGlow 1.5s infinite;"></span>
-            <strong style="color: #065F46; font-size: 0.85rem; letter-spacing: 0.04em;">MUNICIPAL DATABASE CONNECTED ✓</strong>
-          </div>
-        </div>
-
-        <!-- 5 Top Key Performance Statistics -->
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">
-          
-          <div class="glass-card" style="padding: 1.5rem;">
-            <div style="font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;">Total Waste Collected</div>
-            <div style="font-size: 2rem; font-weight: 800; color: var(--color-navy); margin: 0.25rem 0;">
-              ${Formatters.formatNumber(stats.totalWasteTons)} <span style="font-size: 0.9rem; color: var(--text-muted);">Tons</span>
-            </div>
-            <div style="font-size: 0.78rem; color: var(--color-primary); font-weight: 700;">↑ 14% vs last quarter</div>
-          </div>
-
-          <div class="glass-card" style="padding: 1.5rem;">
-            <div style="font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;">Recycled / Recovered</div>
-            <div style="font-size: 2rem; font-weight: 800; color: var(--color-primary-dark); margin: 0.25rem 0;">
-              ${stats.recycledPercentage}%
-            </div>
-            <div style="font-size: 0.78rem; color: var(--color-primary); font-weight: 700;">Zero-landfill target: 80%</div>
-          </div>
-
-          <div class="glass-card" style="padding: 1.5rem;">
-            <div style="font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;">Active Citizens</div>
-            <div style="font-size: 2rem; font-weight: 800; color: var(--color-navy); margin: 0.25rem 0;">
-              ${Formatters.formatNumber(stats.activeCitizens)}
-            </div>
-            <div style="font-size: 0.78rem; color: #2563EB; font-weight: 700;">Across 42 City Wards</div>
-          </div>
-
-          <div class="glass-card" style="padding: 1.5rem;">
-            <div style="font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;">Verified Pickups</div>
-            <div style="font-size: 2rem; font-weight: 800; color: var(--color-navy); margin: 0.25rem 0;">
-              ${Formatters.formatNumber(stats.verifiedPickups)}
-            </div>
-            <div style="font-size: 0.78rem; color: #16A34A; font-weight: 700;">99.4% Purity Verified</div>
-          </div>
-
-          <div class="glass-card" style="padding: 1.5rem;">
-            <div style="font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;">Waste Diversion Rate</div>
-            <div style="font-size: 2rem; font-weight: 800; color: #EA580C; margin: 0.25rem 0;">
-              ${stats.wasteDiversionRate}%
-            </div>
-            <div style="font-size: 0.78rem; color: #EA580C; font-weight: 700;">Saved from Dump Yards</div>
-          </div>
-
-        </div>
-
-        <!-- Dedicated Section: "Connected to Your City" Municipal Systems -->
-        <div class="glass-card" style="padding: 1.75rem; margin-bottom: 2.5rem; background: linear-gradient(135deg, #102A43, #0A1929); color: #FFFFFF;">
-          <div class="flex-between" style="margin-bottom: 1.25rem;">
-            <div>
-              <h3 style="color: #FFFFFF;">Connected to Your City — Government Infrastructure Grid</h3>
-              <p style="color: #CBD5E1; font-size: 0.85rem;">Integrated back-office endpoints for municipal databases, worker dispatch, and material recovery facilities.</p>
-            </div>
-            <span class="badge" style="background: rgba(132, 204, 22, 0.2); color: #84CC16; border: 1px solid #84CC16;">
-              4 / 4 Nodes Active
-            </span>
-          </div>
-
-          <div class="grid-cols-4">
-            ${stats.connectedDatabases.map(db => `
-              <div style="background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); padding: 1.15rem; border-radius: var(--radius-md);">
-                <div class="flex-between" style="margin-bottom: 0.5rem;">
-                  <strong style="color: #FFFFFF; font-size: 0.85rem;">${db.name}</strong>
-                  <span class="badge" style="background: #16A34A; color: #FFFFFF; font-size: 0.65rem; padding: 2px 6px;">${db.status}</span>
-                </div>
-                <div style="display: flex; justify-content: space-between; font-size: 0.75rem; color: #94A3B8; margin-top: 0.5rem;">
-                  <span>Latency: <strong style="color: #84CC16;">${db.ping}</strong></span>
-                  <span>Sync: <strong style="color: #FFFFFF;">${db.records}</strong></span>
-                </div>
-              </div>
-            `).join('')}
-          </div>
-        </div>
-
-        <!-- 2-Column Analytics Charts -->
-        <div style="display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; margin-bottom: 2.5rem;" class="hero-grid">
-          
-          <!-- Chart 1: Monthly Waste Collection Trends -->
-          <div class="glass-card" style="padding: 1.75rem;">
-            <div class="flex-between" style="margin-bottom: 1.25rem;">
-              <h4 style="color: var(--color-navy);">Monthly Waste Influx (Tons)</h4>
-              <span class="badge badge-green">Last 6 Months</span>
-            </div>
-            <div style="height: 280px; position: relative;">
-              <canvas id="chart-monthly-trends"></canvas>
-            </div>
-          </div>
-
-          <!-- Chart 2: Waste Breakdown (Wet vs Dry vs Harmful) -->
-          <div class="glass-card" style="padding: 1.75rem;">
-            <div class="flex-between" style="margin-bottom: 1.25rem;">
-              <h4 style="color: var(--color-navy);">Segregation Ratio</h4>
-              <span class="badge badge-navy">Citywide Total</span>
-            </div>
-            <div style="height: 280px; position: relative;">
-              <canvas id="chart-waste-ratio"></canvas>
-            </div>
-          </div>
-
-        </div>
-
-        <!-- Chart 3: Ward-Wise Collection & Interactive City Hotspot Heatmap -->
-        <div style="display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2rem; margin-bottom: 2.5rem;" class="hero-grid">
-          
-          <!-- Ward Bar Chart -->
-          <div class="glass-card" style="padding: 1.75rem;">
-            <h4 style="color: var(--color-navy); margin-bottom: 1.25rem;">Ward-Wise Collection Efficiency</h4>
-            <div style="height: 320px; position: relative;">
-              <canvas id="chart-ward-efficiency"></canvas>
-            </div>
-          </div>
-
-          <!-- Smart City Garbage Hotspot Heatmap -->
-          <div class="glass-card" style="padding: 1.75rem; display: flex; flex-direction: column;">
-            <div class="flex-between" style="margin-bottom: 1rem;">
-              <div>
-                <h4 style="color: var(--color-navy);">Garbage Hotspots & Fleet Heatmap</h4>
-                <p style="font-size: 0.8rem;">Live GPS telemetry of dumping complaints and collection vehicles.</p>
-              </div>
-              <button class="btn btn-sm btn-emerald-outline" onclick="window.AdminDashboardView.simulateHotspotRefresh()">
-                Refresh Map
-              </button>
-            </div>
-
-            <div id="admin-city-map" style="height: 320px; width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--color-border);"></div>
-          </div>
-
-        </div>
-
-      </div>
-    `;
-
-    setTimeout(() => {
-      this.initCharts();
-      this.initCityMap();
-    }, 150);
-  },
-
-  initCharts() {
-    if (!window.Chart) return;
-
-    // Destroy existing charts to prevent duplication on re-render
-    Object.values(this.charts).forEach(c => c.destroy());
-    this.charts = {};
-
-    // 1. Monthly Trends Line Chart
-    const ctxMonthly = document.getElementById('chart-monthly-trends');
-    if (ctxMonthly) {
-      this.charts.monthly = new window.Chart(ctxMonthly, {
-        type: 'line',
-        data: {
-          labels: ['Mar 2026', 'Apr 2026', 'May 2026', 'Jun 2026', 'Jul 2026', 'Aug 2026'],
-          datasets: [
-            {
-              label: 'Total Collected (Tons)',
-              data: [3200, 3650, 4100, 4350, 4700, 4850],
-              borderColor: '#0B5D3B',
-              backgroundColor: 'rgba(11, 93, 59, 0.1)',
-              fill: true,
-              tension: 0.4
-            },
-            {
-              label: 'Recycled / Diverted (Tons)',
-              data: [1950, 2300, 2750, 2980, 3200, 3300],
-              borderColor: '#16A34A',
-              backgroundColor: 'rgba(22, 163, 74, 0.1)',
-              fill: true,
-              tension: 0.4
-            }
-          ]
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: { legend: { position: 'top' } },
-          scales: { y: { beginAtZero: false } }
-        }
-      });
-    }
-
-    // 2. Waste Breakdown Doughnut
-    const ctxRatio = document.getElementById('chart-waste-ratio');
-    if (ctxRatio) {
-      this.charts.ratio = new window.Chart(ctxRatio, {
-        type: 'doughnut',
-        data: {
-          labels: ['🟢 Wet Waste (52%)', '🔵 Dry Waste (36%)', '🔴 Harmful Waste (12%)'],
-          datasets: [{
-            data: [52, 36, 12],
-            backgroundColor: ['#16A34A', '#2563EB', '#EF4444'],
-            borderWidth: 2
-          }]
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: { legend: { position: 'bottom' } }
-        }
-      });
-    }
-
-    // 3. Ward Efficiency Bar Chart
-    const ctxWard = document.getElementById('chart-ward-efficiency');
-    if (ctxWard) {
-      this.charts.ward = new window.Chart(ctxWard, {
-        type: 'bar',
-        data: {
-          labels: ['Ward 1A', 'Ward 2B', 'Ward 3C', 'Ward 4B (Bandra)', 'Ward 5A', 'Ward 6D'],
-          datasets: [{
-            label: 'Segregation Score (%)',
-            data: [78, 85, 72, 94, 68, 81],
-            backgroundColor: ['#16A34A', '#16A34A', '#16A34A', '#84CC16', '#16A34A', '#16A34A'],
-            borderRadius: 6
-          }]
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: { legend: { display: false } },
-          scales: { y: { min: 50, max: 100 } }
-        }
-      });
-    }
-  },
-
-  initCityMap() {
-    const mapElement = document.getElementById('admin-city-map');
-    if (!mapElement || !window.L) return;
-
-    this.mapInstance = MapHelper.initMap('admin-city-map', [19.0760, 72.8777], 13);
-    if (!this.mapInstance) return;
-
-    // Hotspot 1 (Red Warning)
-    const hot1 = MapHelper.createCustomPin('⚠️', 'Hotspot Link Rd', '#EF4444');
-    window.L.marker([19.0820, 72.8620], { icon: hot1 }).addTo(this.mapInstance);
-
-    // Hotspot 2 (Amber Resolving)
-    const hot2 = MapHelper.createCustomPin('🟡', 'Sector 9 Tank', '#F59E0B');
-    window.L.marker([19.0680, 72.8890], { icon: hot2 }).addTo(this.mapInstance);
-
-    // Fleet Vans
-    const van1 = MapHelper.createCustomPin('🚚', 'Van #4091', '#2563EB');
-    window.L.marker([19.0650, 72.8550], { icon: van1 }).addTo(this.mapInstance);
-
-    const van2 = MapHelper.createCustomPin('🚚', 'Van #2210', '#2563EB');
-    window.L.marker([19.0910, 72.8730], { icon: van2 }).addTo(this.mapInstance);
-  },
-
-  simulateHotspotRefresh() {
-    SoundFX.playClick();
-    State.addNotification({
-      title: '🛰️ Municipal GIS Sync',
-      message: 'Ward 4B telemetry refreshed. 12 garbage collection routes synchronized.',
-      type: 'info'
-    });
-  }
-};
-
-window.AdminDashboardView = AdminDashboardView;
diff --git a/animations.css b/animations.css
deleted file mode 100644
index f0b05e1..0000000
--- a/animations.css
+++ /dev/null
@@ -1,114 +0,0 @@
-/* ==========================================================================
-   GREEN KARMA — ANIMATIONS & MICRO-INTERACTIONS
-   ========================================================================== */
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes slideInRight {
-  from { opacity: 0; transform: translateX(40px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-
-@keyframes pulseGlow {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4);
-  }
-  50% {
-    box-shadow: 0 0 0 14px rgba(22, 163, 74, 0);
-  }
-}
-
-@keyframes floatGentle {
-  0%, 100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-8px);
-  }
-}
-
-@keyframes flameFlicker {
-  0%, 100% {
-    transform: scale(1) rotate(0deg);
-  }
-  25% {
-    transform: scale(1.1) rotate(-3deg);
-  }
-  75% {
-    transform: scale(1.05) rotate(3deg);
-  }
-}
-
-@keyframes rotateSlow {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-@keyframes shimmer {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-}
-
-/* Animation Utility Classes */
-.animate-fade-in {
-  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.animate-float {
-  animation: floatGentle 4s ease-in-out infinite;
-}
-
-.animate-pulse-glow {
-  animation: pulseGlow 2s infinite;
-}
-
-.animate-flame {
-  display: inline-block;
-  animation: flameFlicker 1.5s infinite;
-}
-
-.animate-spin-slow {
-  animation: rotateSlow 18s linear infinite;
-}
-
-/* Floating Metrics Card (Hero section) */
-.floating-stat-card {
-  position: absolute;
-  padding: 0.85rem 1.25rem;
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(12px);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 12px 30px rgba(16, 42, 67, 0.15);
-  border: 1px solid rgba(255, 255, 255, 0.8);
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  z-index: 10;
-  pointer-events: none;
-}
-
-/* Confetti Canvas Overlay */
-#confetti-canvas {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  pointer-events: none;
-  z-index: 9999;
-}
-
-/* Live Truck Route Polyline Pulsing */
-.leaflet-interactive-route {
-  stroke-dasharray: 8, 8;
-  animation: routeDash 1s linear infinite;
-}
-
-@keyframes routeDash {
-  to {
-    stroke-dashoffset: -16;
-  }
-}
diff --git a/app.js b/app.js
deleted file mode 100644
index d3b3e60..0000000
--- a/app.js
+++ /dev/null
@@ -1,200 +0,0 @@
-/* ==========================================================================
-   GREEN KARMA — MAIN APPLICATION ROUTER & CONTROLLER
-   Tagline: EARN. RECYCLE. REWARD.
-   ========================================================================== */
-
-import { State } from './state.js';
-import { Formatters } from './utils/formatters.js';
-import { Confetti } from './utils/confetti.js';
-import { SoundFX } from './utils/audio.js';
-
-// Components
-import { LandingPage } from './components/landing.js';
-import { DashboardView } from './components/dashboard.js';
-import { ReportWasteView } from './components/reportWaste.js';
-import { LiveTrackingView } from './components/liveTracking.js';
-import { RewardsWallet } from './components/rewardsWallet.js';
-import { LeaderboardView } from './components/leaderboard.js';
-import { WorkerPortalView } from './components/workerPortal.js';
-import { AdminDashboardView } from './components/adminDashboard.js';
-import { InstitutionPortalView } from './components/institutionPortal.js';
-import { IllegalDumpingView } from './components/illegalDumping.js';
-import { ImpactDashboardView } from './components/impactDashboard.js';
-import { ProfileView } from './components/profile.js';
-
-class AppRouterManager {
-  constructor() {
-    this.currentRoute = 'landing';
-    this.init();
-  }
-
-  init() {
-    // Listen for state changes to re-render active view and notification counts
-    State.subscribe(() => {
-      this.updateNavbarHeader();
-      this.renderCurrentView();
-    });
-
-    // Close notifications tray on outside click
-    document.addEventListener('click', (e) => {
-      const tray = document.getElementById('notifications-tray');
-      const bell = document.getElementById('notif-bell-btn');
-      if (tray && bell && !tray.contains(e.target) && !bell.contains(e.target)) {
-        tray.style.display = 'none';
-      }
-    });
-
-    // Handle initial route
-    const hash = window.location.hash.replace('#', '') || 'landing';
-    this.navigate(hash);
-  }
-
-  navigate(route, params = {}) {
-    SoundFX.playClick();
-    this.currentRoute = route;
-    window.location.hash = route;
-
-    // Hide all view sections
-    document.querySelectorAll('.view-section').forEach(sec => {
-      sec.classList.remove('active');
-    });
-
-    // Show target section
-    const targetSection = document.getElementById(`view-${route}`);
-    if (targetSection) {
-      targetSection.classList.add('active');
-    }
-
-    // Update active nav items
-    document.querySelectorAll('.nav-item').forEach(el => {
-      if (el.dataset.route === route) {
-        el.classList.add('active');
-      } else {
-        el.classList.remove('active');
-      }
-    });
-
-    // Update mobile bottom nav
-    document.querySelectorAll('.mobile-nav-btn').forEach(el => {
-      if (el.dataset.route === route) {
-        el.classList.add('active');
-      } else {
-        el.classList.remove('active');
-      }
-    });
-
-    // Scroll to top
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-
-    // Render Component
-    this.renderCurrentView(params);
-  }
-
-  renderCurrentView(params = {}) {
-    switch (this.currentRoute) {
-      case 'landing':
-        LandingPage.render();
-        break;
-      case 'dashboard':
-        DashboardView.render();
-        break;
-      case 'report-waste':
-        ReportWasteView.render(params);
-        break;
-      case 'live-tracking':
-        LiveTrackingView.render();
-        break;
-      case 'rewards':
-        RewardsWallet.render();
-        break;
-      case 'leaderboard':
-        LeaderboardView.render();
-        break;
-      case 'worker':
-        WorkerPortalView.render();
-        break;
-      case 'admin':
-        AdminDashboardView.render();
-        break;
-      case 'institutions':
-        InstitutionPortalView.render();
-        break;
-      case 'illegal-dumping':
-        IllegalDumpingView.render();
-        break;
-      case 'impact':
-        ImpactDashboardView.render();
-        break;
-      case 'profile':
-        ProfileView.render();
-        break;
-      default:
-        LandingPage.render();
-    }
-  }
-
-  handleRoleChange(role) {
-    SoundFX.playClick();
-    State.setRole(role);
-
-    // Auto-navigate to the primary view for that role
-    if (role === 'worker') {
-      this.navigate('worker');
-    } else if (role === 'admin') {
-      this.navigate('admin');
-    } else if (role === 'institution') {
-      this.navigate('institutions');
-    } else {
-      this.navigate('dashboard');
-    }
-  }
-
-  updateNavbarHeader() {
-    const user = State.state.user;
-    const notifs = State.state.notifications;
-    const unreadCount = notifs.filter(n => !n.read).length;
-
-    // Update user points chip in navbar
-    const pointsChip = document.getElementById('nav-user-points');
-    if (pointsChip) {
-      pointsChip.textContent = `${Formatters.formatNumber(user.greenPoints)} GP`;
-    }
-
-    // Update notification dot
-    const notifDot = document.getElementById('notif-dot');
-    if (notifDot) {
-      notifDot.style.display = unreadCount > 0 ? 'block' : 'none';
-    }
-
-    // Update notification tray list
-    const notifList = document.getElementById('notif-tray-list');
-    if (notifList) {
-      notifList.innerHTML = notifs.map(n => `
-        <div style="padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); background: ${n.read ? '#FFFFFF' : '#F0FDF4'};">
-          <strong style="font-size: 0.85rem; color: var(--color-navy); display: block; margin-bottom: 0.2rem;">${n.title}</strong>
-          <p style="font-size: 0.78rem; color: var(--text-muted); line-height: 1.4;">${n.message}</p>
-          <span style="font-size: 0.7rem; color: var(--text-light); margin-top: 0.35rem; display: block;">${Formatters.formatRelativeTime(n.timestamp)}</span>
-        </div>
-      `).join('');
-    }
-  }
-
-  toggleNotificationTray() {
-    SoundFX.playClick();
-    const tray = document.getElementById('notifications-tray');
-    if (tray) {
-      const isHidden = tray.style.display === 'none' || !tray.style.display;
-      tray.style.display = isHidden ? 'block' : 'none';
-      if (isHidden) {
-        State.markAllNotificationsRead();
-      }
-    }
-  }
-}
-
-// Global initialization
-window.addEventListener('DOMContentLoaded', () => {
-  window.AppRouter = new AppRouterManager();
-  window.Confetti = Confetti;
-  window.SoundFX = SoundFX;
-});
diff --git a/components.css b/components.css
deleted file mode 100644
index aab6396..0000000
--- a/components.css
+++ /dev/null
@@ -1,633 +0,0 @@
-/* ==========================================================================
-   GREEN KARMA — UI COMPONENTS
-   ========================================================================== */
-
-/* Navbar Header */
-.app-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: var(--nav-height);
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-}
-
-.header-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.brand-logo {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  font-family: var(--font-display);
-  font-weight: 800;
-  font-size: 1.35rem;
-  color: var(--color-primary-dark);
-  letter-spacing: -0.02em;
-  user-select: none;
-}
-
-.brand-logo .logo-icon {
-  width: 38px;
-  height: 38px;
-  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
-  color: #FFFFFF;
-  border-radius: var(--radius-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
-}
-
-.brand-logo .brand-tagline {
-  font-size: 0.65rem;
-  font-weight: 700;
-  color: var(--color-primary);
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  display: block;
-  line-height: 1;
-  margin-top: 2px;
-}
-
-.nav-links {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  list-style: none;
-}
-
-.nav-item {
-  padding: 0.55rem 0.95rem;
-  border-radius: var(--radius-md);
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--text-muted);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  transition: all 0.2s ease;
-}
-
-.nav-item:hover {
-  color: var(--color-primary-dark);
-  background: rgba(22, 163, 74, 0.08);
-}
-
-.nav-item.active {
-  color: var(--color-primary-dark);
-  background: var(--color-primary-subtle);
-  font-weight: 700;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.85rem;
-}
-
-/* Role Selector Dropdown */
-.role-pill-selector {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  background: rgba(16, 42, 67, 0.05);
-  border: 1px solid var(--color-border);
-  padding: 0.35rem 0.75rem;
-  border-radius: var(--radius-full);
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--color-navy);
-}
-
-.role-pill-selector select {
-  background: transparent;
-  font-weight: 700;
-  color: var(--color-primary-dark);
-  cursor: pointer;
-}
-
-/* Notification Bell */
-.notification-bell-btn {
-  position: relative;
-  width: 40px;
-  height: 40px;
-  border-radius: var(--radius-full);
-  background: #FFFFFF;
-  border: 1px solid var(--color-border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-muted);
-  transition: all 0.2s ease;
-}
-
-.notification-bell-btn:hover {
-  background: var(--color-primary-subtle);
-  color: var(--color-primary-dark);
-  border-color: var(--color-primary-light);
-}
-
-.notification-badge-dot {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  background: #EF4444;
-  border: 2px solid #FFFFFF;
-}
-
-/* User Quick Avatar */
-.user-avatar-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.3rem 0.6rem 0.3rem 0.3rem;
-  background: #FFFFFF;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-full);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.user-avatar-btn:hover {
-  border-color: var(--color-primary);
-  box-shadow: var(--shadow-xs);
-}
-
-.avatar-img {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  object-fit: cover;
-  background: #DCFCE7;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  color: var(--color-primary-dark);
-  font-size: 0.85rem;
-}
-
-/* Buttons */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.7rem 1.4rem;
-  border-radius: var(--radius-md);
-  font-size: 0.925rem;
-  font-weight: 600;
-  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-  white-space: nowrap;
-  user-select: none;
-}
-
-.btn-primary {
-  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
-  color: #FFFFFF;
-  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3);
-}
-
-.btn-primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.45);
-  background: linear-gradient(135deg, #094e31, #15803d);
-}
-
-.btn-secondary {
-  background: #FFFFFF;
-  color: var(--color-navy);
-  border: 1px solid var(--color-border);
-  box-shadow: var(--shadow-xs);
-}
-
-.btn-secondary:hover {
-  border-color: var(--color-navy-light);
-  background: #F8FAFC;
-  transform: translateY(-2px);
-}
-
-.btn-emerald-outline {
-  background: transparent;
-  color: var(--color-primary-dark);
-  border: 1.5px solid var(--color-primary);
-}
-
-.btn-emerald-outline:hover {
-  background: var(--color-primary-subtle);
-  transform: translateY(-2px);
-}
-
-.btn-sm {
-  padding: 0.45rem 0.9rem;
-  font-size: 0.825rem;
-  border-radius: var(--radius-sm);
-}
-
-.btn-lg {
-  padding: 0.9rem 1.9rem;
-  font-size: 1.05rem;
-  border-radius: var(--radius-lg);
-}
-
-.btn-block {
-  width: 100%;
-}
-
-/* Category Cards (Wet, Dry, Harmful) */
-.category-card {
-  padding: 1.75rem;
-  border-radius: var(--radius-xl);
-  transition: all 0.25s ease;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.category-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 5px;
-}
-
-.category-card-wet {
-  background: var(--waste-wet-bg);
-  border: 1.5px solid var(--waste-wet-border);
-}
-.category-card-wet::before {
-  background: linear-gradient(90deg, #0B5D3B, #16A34A, #84CC16);
-}
-
-.category-card-dry {
-  background: var(--waste-dry-bg);
-  border: 1.5px solid var(--waste-dry-border);
-}
-.category-card-dry::before {
-  background: linear-gradient(90deg, #1E40AF, #2563EB, #60A5FA);
-}
-
-.category-card-harmful {
-  background: var(--waste-harmful-bg);
-  border: 1.5px solid var(--waste-harmful-border);
-}
-.category-card-harmful::before {
-  background: linear-gradient(90deg, #991B1B, #EF4444, #F87171);
-}
-
-.category-icon-wrapper {
-  width: 56px;
-  height: 56px;
-  border-radius: var(--radius-lg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.75rem;
-  margin-bottom: 1.25rem;
-}
-
-.category-card-wet .category-icon-wrapper {
-  background: #D1FAE5;
-  color: var(--waste-wet);
-}
-.category-card-dry .category-icon-wrapper {
-  background: #DBEAFE;
-  color: var(--waste-dry);
-}
-.category-card-harmful .category-icon-wrapper {
-  background: #FEE2E2;
-  color: var(--waste-harmful);
-}
-
-/* Points Badge Pill */
-.category-points-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.35rem 0.85rem;
-  border-radius: var(--radius-full);
-  font-weight: 800;
-  font-size: 0.875rem;
-}
-
-.category-card-wet .category-points-tag {
-  background: #16A34A;
-  color: #FFFFFF;
-}
-.category-card-dry .category-points-tag {
-  background: #2563EB;
-  color: #FFFFFF;
-}
-.category-card-harmful .category-points-tag {
-  background: #EF4444;
-  color: #FFFFFF;
-}
-
-/* Form Controls */
-.form-group {
-  margin-bottom: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.45rem;
-}
-
-.form-label {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-navy);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.form-input, .form-select, .form-textarea {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  border-radius: var(--radius-md);
-  border: 1.5px solid var(--color-border);
-  background: #FFFFFF;
-  color: var(--text-main);
-  font-size: 0.95rem;
-  transition: all 0.2s ease;
-}
-
-.form-input:focus, .form-select:focus, .form-textarea:focus {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
-  background: #FFFFFF;
-}
-
-/* Multi-Step Wizard */
-.stepper-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  margin-bottom: 2rem;
-}
-
-.stepper-header::before {
-  content: '';
-  position: absolute;
-  top: 18px;
-  left: 30px;
-  right: 30px;
-  height: 3px;
-  background: var(--color-border);
-  z-index: 1;
-}
-
-.step-item {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.4rem;
-  cursor: pointer;
-}
-
-.step-circle {
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  background: #FFFFFF;
-  border: 2px solid var(--color-border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 0.9rem;
-  color: var(--text-muted);
-  transition: all 0.25s ease;
-}
-
-.step-item.active .step-circle {
-  background: var(--color-primary-dark);
-  border-color: var(--color-primary-light);
-  color: #FFFFFF;
-  box-shadow: 0 0 12px rgba(22, 163, 74, 0.4);
-}
-
-.step-item.completed .step-circle {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: #FFFFFF;
-}
-
-.step-label {
-  font-size: 0.775rem;
-  font-weight: 600;
-  color: var(--text-muted);
-}
-
-.step-item.active .step-label {
-  color: var(--color-primary-dark);
-  font-weight: 700;
-}
-
-/* Status Timeline (Tracking page) */
-.timeline-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  position: relative;
-  padding-left: 2rem;
-}
-
-.timeline-list::before {
-  content: '';
-  position: absolute;
-  top: 8px;
-  bottom: 8px;
-  left: 9px;
-  width: 2px;
-  background: var(--color-border);
-}
-
-.timeline-item {
-  position: relative;
-}
-
-.timeline-dot {
-  position: absolute;
-  left: -2rem;
-  top: 2px;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: #FFFFFF;
-  border: 2px solid var(--color-border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.65rem;
-}
-
-.timeline-item.done .timeline-dot {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: #FFFFFF;
-}
-
-.timeline-item.active .timeline-dot {
-  background: var(--status-pending);
-  border-color: #FFFFFF;
-  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35);
-  color: #FFFFFF;
-}
-
-/* Modal Dialog */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(16, 42, 67, 0.55);
-  backdrop-filter: blur(8px);
-  z-index: 2000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1.5rem;
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.25s ease;
-}
-
-.modal-overlay.active {
-  opacity: 1;
-  visibility: visible;
-}
-
-.modal-content {
-  background: #FFFFFF;
-  border-radius: var(--radius-xl);
-  max-width: 540px;
-  width: 100%;
-  max-height: 90vh;
-  overflow-y: auto;
-  padding: 2rem;
-  box-shadow: var(--shadow-lg);
-  transform: scale(0.95);
-  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
-  position: relative;
-}
-
-.modal-overlay.active .modal-content {
-  transform: scale(1);
-}
-
-.modal-close-btn {
-  position: absolute;
-  top: 1.25rem;
-  right: 1.25rem;
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  background: #F1F5F9;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-muted);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.modal-close-btn:hover {
-  background: #E2E8F0;
-  color: var(--color-navy);
-}
-
-/* Toast Container */
-.toast-container {
-  position: fixed;
-  bottom: 2rem;
-  right: 2rem;
-  z-index: 3000;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  pointer-events: none;
-}
-
-.toast {
-  pointer-events: auto;
-  background: #FFFFFF;
-  border-radius: var(--radius-lg);
-  padding: 0.9rem 1.25rem;
-  box-shadow: var(--shadow-lg);
-  border-left: 4px solid var(--color-primary);
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  min-width: 280px;
-  max-width: 400px;
-  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  transition: all 0.2s ease;
-}
-
-.toast-success { border-left-color: var(--color-primary); }
-.toast-points { border-left-color: #84CC16; background: #0B5D3B; color: #FFFFFF; }
-.toast-points p { color: #DCFCE7; }
-.toast-error { border-left-color: #EF4444; }
-
-/* Mobile Bottom Navigation */
-.mobile-bottom-nav {
-  display: none;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: var(--mobile-nav-height);
-  background: rgba(255, 255, 255, 0.96);
-  backdrop-filter: blur(16px);
-  border-top: 1px solid var(--color-border);
-  z-index: 1000;
-  box-shadow: 0 -4px 20px rgba(16, 42, 67, 0.05);
-}
-
-.mobile-nav-items {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  height: 100%;
-  list-style: none;
-}
-
-.mobile-nav-btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 3px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: var(--text-muted);
-  cursor: pointer;
-}
-
-.mobile-nav-btn.active {
-  color: var(--color-primary-dark);
-  font-weight: 700;
-}
-
-.mobile-nav-icon {
-  font-size: 1.25rem;
-}
diff --git a/css/animations.css b/css/animations.css
new file mode 100644
index 0000000..92bc752
--- /dev/null
+++ b/css/animations.css
@@ -0,0 +1,193 @@
+/* ==========================================================================
+   CLEANCRED — SURREAL SILICONE & KINETIC GAMIFICATION ANIMATIONS
+   Soft Matte Silicone // SIH 2026 Team GreenLegacy
+   ========================================================================== */
+
+/* Fade & Slide Transitions */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Bouncy Modal Pop In — silicone squish */
+@keyframes popInBounce {
+  0% {
+    opacity: 0;
+    transform: scale(0.75) translateY(30px);
+  }
+  70% {
+    opacity: 1;
+    transform: scale(1.04) translateY(-4px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.animate-pop-in {
+  animation: popInBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+/* Legacy alias */
+@keyframes popIn {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Pulse for status indicators */
+@keyframes statusPulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.15);
+  }
+}
+
+.animate-pulse {
+  animation: statusPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* ==========================================================================
+   FLOATING SURREAL BLOBS — abstract silicone shapes behind the canvas
+   ========================================================================== */
+@keyframes surrealBlobFloat1 {
+  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
+  33%      { transform: translate3d(40px, -60px, 0) rotate(25deg) scale(1.08); }
+  66%      { transform: translate3d(-35px, -30px, 0) rotate(-20deg) scale(0.94); }
+}
+
+@keyframes surrealBlobFloat2 {
+  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
+  40%      { transform: translate3d(-50px, 45px, 0) rotate(-35deg) scale(1.12); }
+  75%      { transform: translate3d(35px, 25px, 0) rotate(20deg) scale(0.96); }
+}
+
+@keyframes surrealBlobFloat3 {
+  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
+  50%      { transform: translate3d(45px, 40px, 0) scale(1.15); }
+}
+
+.surreal-blob {
+  position: fixed;
+  border-radius: 50%;
+  filter: blur(48px);
+  pointer-events: none;
+  z-index: 0;
+  opacity: 0.32;
+}
+
+.surreal-blob-green {
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, #10B981 0%, rgba(16, 185, 129, 0.18) 70%, transparent 100%);
+  top: 4%;
+  left: -9%;
+  animation: surrealBlobFloat1 24s ease-in-out infinite;
+}
+
+.surreal-blob-cyan {
+  width: 460px;
+  height: 460px;
+  background: radial-gradient(circle, #06B6D4 0%, rgba(6, 182, 212, 0.18) 70%, transparent 100%);
+  top: 42%;
+  right: -11%;
+  animation: surrealBlobFloat2 28s ease-in-out infinite;
+}
+
+.surreal-blob-orange {
+  width: 340px;
+  height: 340px;
+  background: radial-gradient(circle, #F97316 0%, rgba(249, 115, 22, 0.16) 70%, transparent 100%);
+  bottom: 4%;
+  left: 18%;
+  animation: surrealBlobFloat3 22s ease-in-out infinite;
+}
+
+/* ==========================================================================
+   SCANNER LASER SWEEP (AI verification wells)
+   ========================================================================== */
+@keyframes scanLaserSweep {
+  0%   { top: 5%; opacity: 0.8; }
+  50%  { top: 92%; opacity: 1; }
+  100% { top: 5%; opacity: 0.8; }
+}
+
+.scan-laser-beam {
+  position: absolute;
+  left: 8%;
+  right: 8%;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, #10B981 30%, #34D399 50%, #10B981 70%, transparent);
+  box-shadow: 0 0 16px rgba(16, 185, 129, 0.9);
+  border-radius: var(--radius-full);
+  pointer-events: none;
+  animation: scanLaserSweep 2.2s ease-in-out infinite;
+}
+
+/* Bouncing loader dots */
+@keyframes bounceDot {
+  0%, 80%, 100% { transform: scale(0); }
+  40%           { transform: scale(1); }
+}
+
+.bounce-dot-1 { animation: bounceDot 1.4s infinite ease-in-out both; animation-delay: -0.32s; }
+.bounce-dot-2 { animation: bounceDot 1.4s infinite ease-in-out both; animation-delay: -0.16s; }
+.bounce-dot-3 { animation: bounceDot 1.4s infinite ease-in-out both; }
+
+/* Confetti canvas */
+#confetti-canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+/* ==========================================================================
+   RESPECTING USER MOTION PREFERENCES (Vestibular Safety)
+   ========================================================================== */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  .surreal-blob,
+  .animate-pulse,
+  .scan-laser-beam,
+  .bounce-dot-1,
+  .bounce-dot-2,
+  .bounce-dot-3 {
+    animation: none !important;
+  }
+
+  .scan-laser-beam {
+    opacity: 0.6;
+  }
+}
diff --git a/css/components.css b/css/components.css
new file mode 100644
index 0000000..98c46e2
--- /dev/null
+++ b/css/components.css
@@ -0,0 +1,1493 @@
+/* ==========================================================================
+   CLEANCRED — COMPONENTS STYLESHEET
+   Smart India Hackathon 2026 // Team GreenLegacy
+   Surrealism × Neumorphism × Civic Tech // Zero Glassmorphism
+   ========================================================================== */
+
+/* ==========================================================================
+   1. TOP NAVIGATION BAR (SOLID MATTE // ZERO GLASS)
+   ========================================================================== */
+.app-topbar,
+.silicone-topbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 68px;
+  background: var(--bg-surface);
+  box-shadow: 0 4px 14px var(--shadow-dark), 0 1px 0 var(--color-border-highlight);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+}
+
+.topbar-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  overflow: hidden;
+}
+
+.brand-cluster {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+}
+
+.brand-icon-wrapper {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised-sm);
+  border: 1px solid var(--color-border-highlight);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-primary);
+  transition: var(--spring-tactile);
+}
+
+.brand-cluster:hover .brand-icon-wrapper {
+  transform: translateY(-2px);
+  box-shadow: var(--neu-raised);
+}
+
+.brand-title {
+  font-family: var(--font-heading);
+  font-size: 1.25rem;
+  font-weight: 800;
+  color: var(--color-navy);
+  letter-spacing: -0.03em;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.brand-badge {
+  font-family: var(--font-body);
+  font-size: 0.65rem;
+  font-weight: 800;
+  color: var(--color-primary-dark);
+  background: var(--color-primary-light);
+  border: 1px solid var(--waste-wet-border);
+  padding: 2px 7px;
+  border-radius: var(--radius-sm);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  box-shadow: var(--neu-raised-subtle);
+}
+
+/* 3-Role View Switcher in Header */
+.role-switcher-nav {
+  display: flex;
+  align-items: center;
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-inset-sm);
+  border: 1px solid rgba(209, 217, 230, 0.6);
+  padding: 4px;
+  border-radius: var(--radius-full);
+  gap: 3px;
+}
+
+.role-tab-btn,
+.mode-pill-btn {
+  font-family: var(--font-heading);
+  font-size: 0.8rem;
+  font-weight: 700;
+  padding: 0.45rem 1rem;
+  border-radius: var(--radius-full);
+  border: 1px solid transparent;
+  cursor: pointer;
+  background: transparent;
+  color: var(--text-muted);
+  transition: var(--spring-tactile);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  text-decoration: none;
+}
+
+.role-tab-btn:hover,
+.mode-pill-btn:hover {
+  color: var(--color-navy);
+}
+
+.role-tab-btn.active,
+.mode-pill-btn.active {
+  background: var(--bg-surface);
+  color: var(--color-navy);
+  box-shadow: var(--neu-raised-sm);
+  border: 1px solid var(--color-border-highlight);
+}
+
+/* Topbar Right Actions */
+.topbar-right-cluster {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.points-pill-top {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised-sm);
+  border: 1px solid var(--color-border-highlight);
+  padding: 0.45rem 0.95rem;
+  border-radius: var(--radius-full);
+  font-family: var(--font-heading);
+  font-weight: 800;
+  font-size: 0.9rem;
+  color: var(--color-primary);
+  cursor: pointer;
+  transition: var(--spring-tactile);
+}
+
+.points-pill-top:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--neu-raised);
+}
+
+.demo-reset-btn {
+  font-family: var(--font-body);
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-muted);
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised-subtle);
+  border: 1px solid var(--color-border-highlight);
+  padding: 0.4rem 0.75rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: var(--spring-tactile);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.demo-reset-btn:hover {
+  color: var(--color-navy);
+  transform: translateY(-1px);
+  box-shadow: var(--neu-raised-sm);
+}
+
+.topbar-profile-btn {
+  font-family: var(--font-heading);
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--color-navy);
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised-subtle);
+  border: 1px solid var(--color-border-highlight);
+  padding: 0.4rem 0.85rem;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  transition: var(--spring-tactile);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.topbar-profile-btn:hover,
+.topbar-profile-btn.active {
+  color: var(--color-primary-dark);
+  transform: translateY(-1px);
+  box-shadow: var(--neu-raised-sm);
+}
+
+/* ==========================================================================
+   2. CITIZEN HOME & DASHBOARD
+   ========================================================================== */
+.citizen-dashboard {
+  max-width: 960px;
+}
+
+.dashboard-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.eyebrow {
+  font-size: 0.75rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  margin-bottom: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+/* Hero Points Card */
+.hero-points-card {
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised);
+  border: 1px solid var(--color-border-highlight);
+  border-radius: var(--radius-xl);
+  padding: 1.75rem;
+  margin-bottom: 1.75rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.points-oversized-value {
+  font-family: var(--font-heading);
+  font-size: clamp(2.4rem, 4.5vw, 3.2rem);
+  font-weight: 900;
+  color: var(--color-navy);
+  line-height: 1.1;
+  margin: 0.5rem 0;
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+}
+
+/* Inset Progress Track */
+.neu-progress-track,
+.progress-track {
+  width: 100%;
+  height: 10px;
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-inset-sm);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  margin-top: 0.5rem;
+  border: 1px solid rgba(209, 217, 230, 0.4);
+}
+
+.neu-progress-fill,
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #059669, #10B981);
+  border-radius: var(--radius-full);
+  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.4);
+  transition: width 0.4s ease;
+}
+
+/* ==========================================================================
+   HERO SCAN COMPONENT (TACTILE CIRCULAR PRE-CHECK BUTTON)
+   Solid Matte Neumorphic Surface // Zero Glass // Zero Backdrop-Filter
+   ========================================================================== */
+.hero-scan-circle-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 1.75rem auto 2rem auto;
+  text-align: center;
+  width: 100%;
+}
+
+.btn-hero-scan-circular {
+  position: relative;
+  width: 210px;
+  height: 210px;
+  border-radius: 50%;
+  background: var(--bg-surface);
+  border: 4px solid var(--color-border-highlight);
+  box-shadow: 10px 10px 24px var(--shadow-dark), -8px -8px 20px var(--shadow-light);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
+  user-select: none;
+  padding: 1rem;
+}
+
+.btn-hero-scan-circular:hover {
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 14px 14px 30px var(--shadow-dark), -10px -10px 24px var(--shadow-light);
+}
+
+.btn-hero-scan-circular:active {
+  transform: translateY(1px) scale(0.98);
+  box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -3px -3px 8px var(--shadow-light);
+}
+
+.scan-icon-bubble {
+  width: 58px;
+  height: 58px;
+  border-radius: 50%;
+  background: #DCFCE7;
+  color: var(--color-primary-dark);
+  box-shadow: inset 2px 2px 5px rgba(22, 163, 74, 0.2), 0 4px 12px rgba(22, 163, 74, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.6rem;
+  transition: transform 0.3s ease;
+}
+
+.btn-hero-scan-circular:hover .scan-icon-bubble {
+  transform: scale(1.08);
+}
+
+.scan-icon-bubble svg {
+  width: 28px;
+  height: 28px;
+}
+
+.scan-btn-label {
+  font-family: var(--font-heading);
+  font-size: 0.95rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  color: var(--color-navy);
+  margin-bottom: 0.15rem;
+}
+
+.scan-btn-sublabel {
+  font-family: var(--font-body);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--color-primary-dark);
+  text-transform: uppercase;
+}
+
+.scan-supporting-note {
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-align: center;
+  margin-top: 0.85rem;
+  max-width: 420px;
+  line-height: 1.4;
+}
+
+.scan-supporting-note .mobile-note {
+  display: none;
+}
+
+.scan-supporting-note .desktop-note {
+  display: inline;
+}
+
+/* Hero Scan Pulse Ring */
+.hero-scan-pulse::before {
+  content: '';
+  position: absolute;
+  inset: -6px;
+  border-radius: 50%;
+  border: 2px solid rgba(5, 150, 105, 0.35);
+  animation: neuPulse 3s infinite ease-out;
+  pointer-events: none;
+}
+
+@keyframes neuPulse {
+  0% { transform: scale(0.97); opacity: 0.8; }
+  50% { transform: scale(1.03); opacity: 0.3; }
+  100% { transform: scale(0.97); opacity: 0.8; }
+}
+
+/* Mobile Primary CTA Button */
+.mobile-primary-cta-container {
+  display: none;
+}
+
+.btn-mobile-report-waste {
+  width: 100%;
+  height: 52px;
+  font-size: 1.05rem;
+  font-weight: 800;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+/* Mobile Segmented Role Strip (Fixed Beneath Topbar Header on Mobile) */
+.mobile-role-strip {
+  display: none;
+}
+
+.mobile-role-tabs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 380px;
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-inset-sm);
+  border: 1px solid rgba(209, 217, 230, 0.6);
+  padding: 3px;
+  border-radius: var(--radius-full);
+}
+
+.mobile-role-tabs .role-tab-btn {
+  flex: 1;
+  text-align: center;
+  justify-content: center;
+  font-size: 0.78rem;
+  padding: 0.4rem 0.6rem;
+}
+
+/* Dashboard Metrics Grid (Responsive 3-to-2 Column) */
+.dashboard-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+/* Helper Utilities for Responsive Cleanliness */
+.show-on-mobile {
+  display: none !important;
+}
+
+@media (max-width: 768px) {
+  .hide-on-mobile {
+    display: none !important;
+  }
+  .show-on-mobile {
+    display: flex !important;
+  }
+  .show-on-mobile.block {
+    display: block !important;
+  }
+}
+
+/* Active Pickup Card */
+.pickup-status-card {
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised);
+  border: 1.5px solid var(--waste-wet-border);
+  border-left: 5px solid var(--color-primary);
+  border-radius: var(--radius-lg);
+  padding: 1.35rem 1.6rem;
+  margin-bottom: 1.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1.25rem;
+}
+
+.pickup-status-info {
+  flex: 1;
+  min-width: 260px;
+}
+
+.pickup-status-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.pickup-otp-pill {
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-inset-sm);
+  border: 1px solid rgba(209, 217, 230, 0.7);
+  padding: 0.45rem 0.95rem;
+  border-radius: var(--radius-md);
+  text-align: center;
+}
+
+.pickup-otp-label {
+  font-size: 0.68rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.pickup-otp-val {
+  font-family: var(--font-heading);
+  font-size: 1.25rem;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  color: var(--color-navy);
+}
+
+/* Metric Cards */
+.metric-card {
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised);
+  border: 1px solid var(--color-border-highlight);
+  border-radius: var(--radius-lg);
+  padding: 1.4rem;
+  transition: var(--spring-tactile);
+}
+
+.metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--neu-raised-lg);
+}
+
+.metric-card span {
+  font-size: 0.78rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  display: block;
+  margin-bottom: 0.4rem;
+  letter-spacing: 0.03em;
+}
+
+.metric-card strong {
+  font-family: var(--font-heading);
+  font-size: 1.75rem;
+  font-weight: 900;
+  color: var(--color-navy);
+  display: block;
+}
+
+.metric-card em {
+  font-size: 0.8rem;
+  font-style: normal;
+  color: var(--color-primary);
+  font-weight: 700;
+  margin-top: 0.35rem;
+  display: block;
+}
+
+/* Category Selection Option Cards (SIH Taxonomy) */
+.waste-options-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.25rem;
+  margin: 1.25rem 0;
+}
+
+@media (max-width: 720px) {
+  .waste-options-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.waste-card-option {
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised);
+  border: 1.5px solid var(--color-border-highlight);
+  border-radius: var(--radius-lg);
+  padding: 1.35rem;
+  text-align: left;
+  cursor: pointer;
+  transition: var(--spring-tactile);
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  user-select: none;
+}
+
+.waste-card-option:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--neu-raised-lg);
+}
+
+.waste-card-option.wet {
+  border-top: 4px solid var(--waste-wet);
+}
+.waste-card-option.wet:hover,
+.waste-card-option.wet.selected {
+  background: var(--waste-wet-bg);
+  box-shadow: var(--neu-inset-sm);
+  border-color: var(--waste-wet-border);
+}
+
+.waste-card-option.dry {
+  border-top: 4px solid var(--waste-dry);
+}
+.waste-card-option.dry:hover,
+.waste-card-option.dry.selected {
+  background: var(--waste-dry-bg);
+  box-shadow: var(--neu-inset-sm);
+  border-color: var(--waste-dry-border);
+}
+
+.waste-card-option.harmful {
+  border-top: 4px solid var(--waste-harmful);
+}
+.waste-card-option.harmful:hover,
+.waste-card-option.harmful.selected {
+  background: var(--waste-harmful-bg);
+  box-shadow: var(--neu-inset-sm);
+  border-color: var(--waste-harmful-border);
+}
+
+/* Activity Lists */
+.activity-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.95rem 1.15rem;
+  border-bottom: 1px solid var(--color-border);
+  transition: var(--transition-smooth);
+}
+
+.activity-row:last-child {
+  border-bottom: none;
+}
+
+.activity-row:hover {
+  background: var(--bg-sunken);
+}
+
+/* Step & Wizard Refined Elements */
+.wizard-step-header {
+  margin-bottom: 1.5rem;
+}
+.wizard-step-eyebrow {
+  color: var(--color-primary-dark);
+  font-weight: 800;
+  font-size: 0.8rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  margin-bottom: 0.25rem;
+}
+.wizard-step-title {
+  color: var(--color-navy);
+  font-size: 1.55rem;
+  font-weight: 800;
+  margin: 0.25rem 0 0.35rem 0;
+}
+.wizard-step-desc {
+  font-size: 0.88rem;
+  color: var(--text-muted);
+  margin: 0 0 1.25rem 0;
+}
+
+/* Photo Upload & Explicit Demo Picker */
+.photo-upload-zone {
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-inset-sm);
+  border: 2px dashed #94A3B8;
+  border-radius: var(--radius-lg);
+  padding: 1.25rem;
+  text-align: center;
+  cursor: pointer;
+  transition: var(--spring-tactile);
+}
+.photo-upload-zone:hover {
+  border-color: var(--color-primary);
+  background: #E0E7EE;
+}
+.demo-picker-container {
+  margin-top: 1.25rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--color-border);
+}
+.demo-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+.demo-thumb-btn {
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised-subtle);
+  border: 2px solid transparent;
+  border-radius: var(--radius-md);
+  padding: 0.4rem;
+  cursor: pointer;
+  transition: var(--spring-tactile);
+  text-align: center;
+  color: var(--text-primary);
+}
+.demo-thumb-btn:hover {
+  box-shadow: var(--neu-raised-sm);
+  transform: translateY(-2px);
+}
+.demo-thumb-btn.active {
+  border-color: var(--color-primary);
+  box-shadow: var(--neu-inset-sm);
+  background: var(--bg-sunken);
+}
+.demo-thumb-img {
+  width: 100%;
+  height: 72px;
+  object-fit: cover;
+  border-radius: var(--radius-sm);
+  margin-bottom: 0.25rem;
+}
+.demo-thumb-label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+/* Geolocation Card & Inputs */
+.geo-status-box {
+  border-radius: var(--radius-lg);
+  padding: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+/* ==========================================================================
+   3. 5-STEP VERIFIED WASTE REPORTING WIZARD
+   ========================================================================== */
+.report-wizard-container {
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.wizard-progress-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2.25rem;
+  position: relative;
+}
+
+.wizard-step-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+  position: relative;
+  z-index: 2;
+  cursor: pointer;
+}
+
+.wizard-node-circle {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised-sm);
+  border: 1px solid var(--color-border-highlight);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  transition: var(--spring-tactile);
+}
+
+.wizard-step-node.active .wizard-node-circle {
+  background: var(--color-primary);
+  border-color: var(--color-primary-light);
+  color: #FFFFFF;
+  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.35);
+}
+
+.wizard-step-node.completed .wizard-node-circle {
+  background: var(--color-primary-light);
+  color: var(--color-primary-dark);
+  box-shadow: var(--neu-inset-sm);
+}
+
+.wizard-node-label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: var(--text-muted);
+}
+
+.wizard-step-node.active .wizard-node-label {
+  color: var(--color-navy);
+}
+
+/* Photo & AI Box */
+.photo-upload-zone {
+  border: 2px dashed var(--color-border-strong);
+  border-radius: var(--radius-lg);
+  padding: 2rem;
+  text-align: center;
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-inset-sm);
+  cursor: pointer;
+  transition: var(--spring-tactile);
+}
+
+.photo-upload-zone:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--neu-inset);
+}
+
+.ai-verification-badge-card {
+  background: var(--waste-wet-bg);
+  border: 1px solid var(--waste-wet-border);
+  border-radius: var(--radius-md);
+  padding: 1.15rem;
+  margin-top: 1.25rem;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  box-shadow: var(--neu-raised-subtle);
+}
+
+/* ==========================================================================
+   4. WORKER PORTAL
+   ========================================================================== */
+.worker-queue-card {
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised);
+  border: 1px solid var(--color-border-highlight);
+  border-radius: var(--radius-lg);
+  padding: 1.35rem 1.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+  transition: var(--spring-tactile);
+}
+
+.worker-queue-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--neu-raised-lg);
+}
+
+/* ==========================================================================
+   5. ADMIN COMMAND CENTER
+   ========================================================================== */
+.desktop-dashboard-grid {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 1.75rem;
+}
+
+@media (max-width: 1024px) {
+  .desktop-dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.admin-sidebar {
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised);
+  border: 1px solid var(--color-border-highlight);
+  border-radius: var(--radius-xl);
+  padding: 1.35rem;
+  height: fit-content;
+}
+
+.admin-sidebar-nav {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin-top: 1rem;
+}
+
+.admin-sidebar-nav a,
+.admin-sidebar-nav button,
+.sidebar-nav-link {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.7rem 0.95rem;
+  border-radius: var(--radius-md);
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  transition: var(--spring-tactile);
+}
+
+.admin-sidebar-nav a:hover,
+.admin-sidebar-nav button:hover,
+.sidebar-nav-link:hover {
+  color: var(--color-navy);
+  transform: translateX(2px);
+}
+
+.admin-sidebar-nav a.active,
+.sidebar-nav-link.active {
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-inset-sm);
+  color: var(--color-primary-dark);
+}
+
+.admin-metrics-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.25rem;
+}
+
+@media (max-width: 960px) {
+  .admin-metrics-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.admin-metric-card {
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised);
+  border: 1px solid var(--color-border-highlight);
+  border-radius: var(--radius-lg);
+  padding: 1.35rem;
+  transition: var(--spring-tactile);
+}
+
+.admin-metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--neu-raised-lg);
+}
+
+/* ==========================================================================
+   6. MOBILE BOTTOM NAVIGATION DOCK (SOLID MATTE // ZERO GLASS)
+   ========================================================================== */
+.mobile-bottom-dock {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
+  background: var(--bg-surface);
+  box-shadow: 0 -4px 14px var(--shadow-dark), 0 -1px 0 var(--color-border-highlight);
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  z-index: 1000;
+}
+
+.dock-item-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+  cursor: pointer;
+  padding: 0.4rem 0.85rem;
+  border-radius: var(--radius-md);
+  transition: var(--spring-tactile);
+}
+
+.dock-item-btn:hover,
+.dock-item-btn.active {
+  color: var(--color-primary);
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-inset-sm);
+}
+
+.dock-item-btn svg,
+.dock-lucide-icon {
+  width: 20px;
+  height: 20px;
+}
+
+/* ==========================================================================
+   7. MODAL SYSTEM (SOLID MATTE // ZERO BLUR)
+   ========================================================================== */
+.modal-overlay,
+.modal-overlay-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.72);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  padding: 1rem;
+}
+
+.modal-overlay.active,
+.modal-overlay-backdrop.active {
+  display: flex;
+}
+
+.modal-content,
+.neu-modal {
+  background: var(--bg-surface);
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--color-border-highlight);
+  box-shadow: 12px 12px 32px rgba(15, 23, 42, 0.35), -6px -6px 20px var(--shadow-light);
+  width: 100%;
+  max-width: 580px;
+  max-height: 90vh;
+  overflow-y: auto;
+  position: relative;
+  padding: 2rem;
+}
+
+.modal-close-btn {
+  position: absolute;
+  top: 1.25rem;
+  right: 1.25rem;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised-sm);
+  border: 1px solid var(--color-border-highlight);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-weight: 700;
+  color: var(--text-muted);
+  transition: var(--spring-tactile);
+}
+
+.modal-close-btn:hover {
+  transform: scale(1.05);
+  color: var(--color-navy);
+}
+
+.modal-close-btn:active {
+  box-shadow: var(--neu-inset-sm);
+}
+
+/* AI Scan Viewfinder Modal & Camera Preview Box */
+.scan-viewfinder-modal {
+  background: var(--bg-surface);
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--color-border-highlight);
+  box-shadow: 12px 12px 32px rgba(15, 23, 42, 0.35), -6px -6px 20px var(--shadow-light);
+  width: 100%;
+  max-width: 440px;
+  max-height: 90vh;
+  overflow-y: auto;
+  position: relative;
+  padding: 1.5rem;
+  box-sizing: border-box;
+}
+
+.camera-preview-box {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: #0D1117;
+  border-radius: var(--radius-lg);
+  border: 1.5px solid #1E293B;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.celebration-reward-card {
+  background: var(--bg-surface);
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--color-border-highlight);
+  box-shadow: 12px 12px 32px rgba(15, 23, 42, 0.35), -6px -6px 20px var(--shadow-light);
+  width: 100%;
+  max-width: 440px;
+  max-height: 90vh;
+  overflow-y: auto;
+  position: relative;
+  padding: 2rem 1.5rem;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+/* ==========================================================================
+   8. TIMELINE & LIVE TRACKING
+   ========================================================================== */
+.timeline-list {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding-left: 1.75rem;
+}
+
+.timeline-list::before {
+  content: '';
+  position: absolute;
+  top: 10px;
+  bottom: 20px;
+  left: 11px;
+  width: 2px;
+  background: var(--color-border);
+}
+
+.timeline-item {
+  position: relative;
+  padding-bottom: 1.5rem;
+}
+
+.timeline-item:last-child {
+  padding-bottom: 0;
+}
+
+.timeline-dot {
+  position: absolute;
+  left: -1.75rem;
+  top: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised-sm);
+  border: 1px solid var(--color-border-highlight);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 800;
+  color: var(--text-muted);
+  z-index: 2;
+}
+
+.timeline-item.done .timeline-dot {
+  background: var(--color-primary);
+  border-color: var(--color-primary-light);
+  color: #FFFFFF;
+}
+
+.timeline-item.active .timeline-dot {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary);
+  color: var(--color-primary-dark);
+}
+
+/* Icon utility helpers */
+.lucide-icon {
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.lucide-icon-lg {
+  width: 24px;
+  height: 24px;
+  vertical-align: middle;
+}
+
+.lucide-icon-sm {
+  width: 14px;
+  height: 14px;
+  vertical-align: middle;
+}
+
+/* ==========================================================================
+   HERO GRID VARIANTS & RESPONSIVE COMPONENT GRIDS
+   ========================================================================== */
+
+/* Hero Grid Column Overrides (Desktop) */
+.hero-grid-profile {
+  grid-template-columns: 1fr 1.6fr;
+}
+
+.hero-grid-admin {
+  grid-template-columns: 1.5fr 1fr;
+}
+
+.hero-grid-dumping {
+  grid-template-columns: 1.1fr 0.9fr;
+}
+
+.hero-grid-landing {
+  grid-template-columns: 1.15fr 0.85fr;
+}
+
+.hero-grid-leaderboard {
+  grid-template-columns: 1.15fr 0.85fr;
+}
+
+.hero-grid-2col {
+  grid-template-columns: 1fr 1fr;
+}
+
+/* Component Action & Step Grids */
+.step-nav-grid {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 0.75rem;
+}
+
+.modal-actions-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.6fr;
+  gap: 0.85rem;
+}
+
+.card-actions-grid-2col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.process-steps-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 1.5rem;
+}
+
+.badges-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 0.75rem;
+  text-align: center;
+}
+
+.dashboard-quick-links-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+/* Responsive Collapse Rules */
+@media (max-width: 960px) {
+  .hero-grid-profile,
+  .hero-grid-admin,
+  .hero-grid-dumping,
+  .hero-grid-landing,
+  .hero-grid-leaderboard,
+  .hero-grid-2col {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 640px) {
+  .step-nav-grid,
+  .modal-actions-grid,
+  .dashboard-quick-links-grid,
+  .process-steps-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .card-actions-grid-2col {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ==========================================================================
+   10. REWARDS OVERVIEW GRID (3-CARD DESKTOP, ADAPTIVE MOBILE)
+   ========================================================================== */
+.rewards-overview-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1.25rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.rewards-card-primary,
+.rewards-card-compact {
+  box-sizing: border-box;
+}
+
+.rewards-card-amount {
+  font-size: 2.8rem;
+  font-weight: 900;
+  line-height: 1;
+  margin-bottom: 0.5rem;
+}
+
+/* ==========================================================================
+   11. COMMAND TOOLS SECTION (MOBILE FULL-WIDTH TACTILE ROWS)
+   ========================================================================== */
+.command-tools-section {
+  display: none; /* Shown on <= 768px via responsive.css */
+  padding: 1.5rem;
+  border-radius: var(--radius-xl);
+  margin-bottom: 1.5rem;
+  box-sizing: border-box;
+}
+
+.command-tools-title {
+  font-size: 0.85rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin: 0 0 1rem 0;
+}
+
+.command-tools-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.command-tool-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.85rem 1rem;
+  border-radius: var(--radius-lg);
+  background: var(--bg-surface);
+  border: 1px solid var(--color-border-highlight);
+  box-shadow: var(--neu-raised-sm);
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  box-sizing: border-box;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.command-tool-row:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--neu-raised);
+}
+
+.command-tool-row:active {
+  transform: translateY(1px);
+  box-shadow: var(--neu-inset-sm);
+}
+
+.command-tool-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.command-tool-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.command-tool-info strong {
+  display: block;
+  font-size: 0.95rem;
+  color: var(--color-navy);
+  margin-bottom: 0.15rem;
+}
+
+.command-tool-info span {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.command-tool-row .tool-arrow {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+/* ==========================================================================
+   12. MOBILE BOTTOM DOCK (BASE ARCHITECTURE)
+   ========================================================================== */
+.mobile-bottom-dock {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: calc(64px + env(safe-area-inset-bottom, 0px));
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  background: var(--bg-surface);
+  border-top: 1px solid var(--color-border);
+  box-shadow: 0 -4px 14px var(--shadow-dark), 0 -1px 0 var(--color-border-highlight);
+  z-index: 1000;
+  box-sizing: border-box;
+}
+
+.dock-nav-group {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  height: 100%;
+}
+
+.dock-item-btn {
+  flex: 1;
+  padding: 0.35rem 0.2rem;
+  gap: 0.2rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.dock-item-btn.active {
+  color: var(--color-primary-dark);
+}
+
+.dock-item-btn .dock-lucide-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.dock-center-slot {
+  position: relative;
+  width: 64px;
+  flex: 0 0 64px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+  padding-bottom: 6px;
+  box-sizing: border-box;
+}
+
+.dock-floating-fab {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -22px;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  color: #FFFFFF;
+  border: 3.5px solid var(--bg-surface);
+  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.42), var(--neu-raised-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
+  z-index: 1001;
+}
+
+.dock-floating-fab:hover {
+  transform: translateX(-50%) scale(1.08);
+  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.5);
+}
+
+.dock-floating-fab:active {
+  transform: translateX(-50%) scale(0.94);
+  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4);
+}
+
+.dock-floating-fab .dock-fab-icon {
+  width: 24px;
+  height: 24px;
+  stroke-width: 2.5;
+  color: #FFFFFF;
+}
+
+.dock-fab-label {
+  font-size: 0.65rem;
+  font-weight: 800;
+  color: var(--color-primary-dark);
+  letter-spacing: 0.02em;
+  margin-top: 2px;
+}
+
diff --git a/glassmorphism.css b/css/glassmorphism.css
similarity index 54%
rename from glassmorphism.css
rename to css/glassmorphism.css
index 24261e4..5337ab2 100644
--- a/glassmorphism.css
+++ b/css/glassmorphism.css
@@ -1,13 +1,13 @@
 /* ==========================================================================
-   GREEN KARMA — GLASSMORPHISM & ELEVATIONS
+   GREEN LEGACY — GLASSMORPHISM & ELEVATIONS
    ========================================================================== */
 
 /* Glass Card Baseline */
 .glass-card {
-  background: var(--color-surface-translucent);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.7);
+  background: #FFFFFF;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border: 1px solid var(--color-border);
   box-shadow: var(--shadow-sm);
   border-radius: var(--radius-lg);
   position: relative;
@@ -17,8 +17,8 @@
 }
 
 .glass-card:hover {
-  box-shadow: var(--shadow-md);
-  border-color: rgba(22, 163, 74, 0.3);
+  box-shadow: var(--shadow-sm);
+  border-color: var(--color-border-hover);
 }
 
 .glass-card-interactive {
@@ -26,16 +26,16 @@
 }
 
 .glass-card-interactive:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--shadow-lg);
+  transform: none;
+  box-shadow: var(--shadow-sm);
 }
 
 /* Premium Dark Navy Glass (for Top Widgets & Hero Highlights) */
 .glass-card-navy {
-  background: linear-gradient(135deg, rgba(16, 42, 67, 0.96) 0%, rgba(11, 93, 59, 0.92) 100%);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: #173A26;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border: 1px solid #173A26;
   color: #FFFFFF;
   box-shadow: 0 12px 32px -4px rgba(10, 25, 41, 0.4);
 }
@@ -53,9 +53,9 @@
 
 /* Glowing Border Accent */
 .glass-card-emerald {
-  background: linear-gradient(135deg, #0B5D3B 0%, #16A34A 100%);
+  background: #14532D;
   color: #FFFFFF;
-  box-shadow: 0 10px 30px -4px rgba(22, 163, 74, 0.4);
+  box-shadow: none;
   border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
@@ -72,29 +72,29 @@
 
 /* Glass Header & Floating Nav */
 .glass-nav {
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
-  box-shadow: 0 4px 20px -2px rgba(16, 42, 67, 0.04);
+  background: #FFFFFF;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border-bottom: 1px solid var(--color-border);
+  box-shadow: none;
 }
 
 /* Glass Modal Dialog Overlay */
 .glass-overlay {
-  background: rgba(16, 42, 67, 0.45);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  background: rgba(23, 33, 27, 0.45);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
 
 /* Subtle Inner Glow Indicator */
 .indicator-glow-green {
-  box-shadow: 0 0 12px rgba(22, 163, 74, 0.6);
+  box-shadow: none;
 }
 
 .indicator-glow-amber {
-  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
+  box-shadow: none;
 }
 
 .indicator-glow-red {
-  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
+  box-shadow: none;
 }
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..bef3526
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,511 @@
+/* ==========================================================================
+   CLEANCRED — SURREALISM × NEUMORPHISM × CIVIC TECH
+   Smart India Hackathon 2026 // Team GreenLegacy
+   Solid Matte Dimensional Surfaces // Zero Glassmorphism
+   ========================================================================== */
+
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
+
+:root {
+  /* Warm Eco-Neutral Solid Matte Canvas */
+  --bg-canvas: #EEF3F8;
+  --bg-surface: #EEF3F8;
+  --bg-surface-pure: #FFFFFF;
+  --bg-surface-elevated: #F4F7FB;
+  --bg-sunken: #E3E9F1;
+
+  /* Sophisticated Neumorphic Directional Lighting (135° Natural Source) */
+  --shadow-light: #FFFFFF;
+  --shadow-dark: #D1D9E6;
+  --shadow-dark-deep: #BCC7D7;
+
+  /* State 1: RAISED (Soft Directional Elevation) */
+  --neu-raised: 6px 6px 14px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
+  --neu-raised-sm: 3px 3px 8px var(--shadow-dark), -3px -3px 8px var(--shadow-light);
+  --neu-raised-lg: 12px 12px 24px var(--shadow-dark), -12px -12px 24px var(--shadow-light);
+  --neu-raised-subtle: 2px 2px 5px var(--shadow-dark), -2px -2px 5px var(--shadow-light);
+
+  /* State 2: PRESSED / INSET (Recessed Tactile Depth) */
+  --neu-inset: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
+  --neu-inset-deep: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light);
+  --neu-inset-sm: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light);
+
+  /* State 3: FLAT (Minimal Elevation for Dense Data) */
+  --neu-flat: 0 1px 2px rgba(15, 23, 42, 0.05);
+
+  /* Deep Environmental Green (Primary) & Fresh Emerald (Secondary) */
+  --color-primary: #059669;
+  --color-primary-dark: #064E3B;
+  --color-primary-light: #D1FAE5;
+  --color-primary-subtle: #ECFDF5;
+
+  --color-emerald: #10B981;
+  --color-emerald-dark: #047857;
+
+  /* Authoritative Municipal Deep Navy */
+  --color-navy: #0F172A;
+  --color-navy-light: #1E293B;
+  --text-primary: #0F172A;
+  --text-secondary: #334155;
+  --text-muted: #64748B;
+  --text-subtle: #94A3B8;
+
+  /* Waste Category System (SIH Taxonomy) */
+  --waste-wet: #059669;
+  --waste-wet-bg: #E8F5EE;
+  --waste-wet-border: #A7F3D0;
+
+  --waste-dry: #0284C7;
+  --waste-dry-bg: #EAF4FB;
+  --waste-dry-border: #BAE6FD;
+
+  --waste-harmful: #DC2626;
+  --waste-harmful-bg: #FDE8E8;
+  --waste-harmful-border: #FECACA;
+
+  /* Accent Tones */
+  --color-amber: #D97706;
+  --color-amber-bg: #FEF3C7;
+  --color-amber-border: #FDE68A;
+
+  --color-cyan: #0284C7;
+  --color-cyan-bg: #E0F2FE;
+
+  /* Borders (Highlight Edges) */
+  --color-border: #DDE4ED;
+  --color-border-highlight: rgba(255, 255, 255, 0.85);
+  --color-border-strong: #CBD5E1;
+
+  /* Typography */
+  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  /* Organic Tactile Radii */
+  --radius-xs: 6px;
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 18px;
+  --radius-xl: 24px;
+  --radius-full: 9999px;
+
+  /* Micro-Interactions */
+  --spring-tactile: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+  --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ==========================================================================
+   GLOBAL RESET & SURREAL ECO ATMOSPHERE
+   ========================================================================== */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+html {
+  font-size: 15px;
+  scroll-behavior: smooth;
+  font-family: var(--font-body);
+  background-color: var(--bg-canvas);
+  color: var(--text-primary);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  background-color: var(--bg-canvas);
+  color: var(--text-primary);
+  /* Subtle Environmental Aura in deep background — solid cards sit above */
+  background-image: 
+    radial-gradient(at 15% 15%, rgba(5, 150, 105, 0.08) 0px, transparent 55%),
+    radial-gradient(at 85% 25%, rgba(2, 132, 199, 0.07) 0px, transparent 55%),
+    radial-gradient(at 50% 80%, rgba(16, 185, 129, 0.06) 0px, transparent 60%);
+  background-attachment: fixed;
+}
+
+/* Typography Hierarchy */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading);
+  font-weight: 800;
+  color: var(--color-navy);
+  line-height: 1.25;
+  letter-spacing: -0.025em;
+}
+
+h1 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
+h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
+h3 { font-size: 1.2rem; }
+h4 { font-size: 1.05rem; }
+
+p, span, label {
+  color: var(--text-secondary);
+  line-height: 1.55;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* ==========================================================================
+   APP CONTAINER & LAYOUT
+   ========================================================================== */
+.app-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1.25rem;
+  width: 100%;
+}
+
+.main-content {
+  margin-top: 74px;
+  padding-bottom: 5.5rem;
+  flex: 1;
+  position: relative;
+  z-index: 10;
+}
+
+.view-section {
+  display: none;
+}
+
+.view-section.active {
+  display: block;
+}
+
+.flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* ==========================================================================
+   SOPHISTICATED NEUMORPHIC SURFACES (SOLID MATTE // ZERO GLASS)
+   ========================================================================== */
+/* Primary Raised Card */
+.neu-card,
+.neu-card-raised {
+  background: var(--bg-surface);
+  box-shadow: var(--neu-raised);
+  border: 1px solid var(--color-border-highlight);
+  border-radius: var(--radius-lg);
+  color: var(--text-primary);
+  transition: var(--spring-tactile);
+  position: relative;
+}
+
+.neu-card-interactive {
+  cursor: pointer;
+  user-select: none;
+}
+
+.neu-card-interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--neu-raised-lg);
+}
+
+.neu-card-interactive:active {
+  transform: translateY(1px);
+  box-shadow: var(--neu-inset);
+}
+
+/* Sunken / Inset Recessed Well */
+.neu-card-sunken,
+.card-sunken {
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-inset);
+  border: 1px solid rgba(209, 217, 230, 0.5);
+  border-radius: var(--radius-md);
+  padding: 1.25rem;
+  position: relative;
+}
+
+/* Flat Card for Dense Data Modules */
+.neu-card-flat {
+  background: var(--bg-surface-pure);
+  box-shadow: var(--neu-flat);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+}
+
+/* Deep Environmental Navy Card */
+.neu-card-navy {
+  background: linear-gradient(145deg, #0F172A, #1E293B) !important;
+  color: #FFFFFF !important;
+  border: 1px solid #334155 !important;
+  box-shadow: 6px 6px 16px rgba(15, 23, 42, 0.25), -4px -4px 12px var(--shadow-light) !important;
+}
+
+.neu-card-navy h2,
+.neu-card-navy h3,
+.neu-card-navy p,
+.neu-card-navy span {
+  color: #FFFFFF;
+}
+
+/* Rich Emerald Card */
+.neu-card-forest {
+  background: linear-gradient(145deg, #065F46, #047857) !important;
+  color: #FFFFFF !important;
+  border: 1px solid #059669 !important;
+  box-shadow: 6px 6px 16px rgba(6, 95, 70, 0.25), -4px -4px 12px var(--shadow-light) !important;
+}
+
+.neu-card-forest h2,
+.neu-card-forest h3,
+.neu-card-forest p,
+.neu-card-forest span {
+  color: #FFFFFF;
+}
+
+/* Surreal Organic Design Tokens */
+:root {
+  --radius-surreal: 22px 30px 18px 26px;
+  --radius-surreal-sm: 12px 18px 10px 16px;
+}
+
+.neu-card-surreal {
+  border-radius: var(--radius-surreal);
+}
+
+/* Backward-compatibility aliases mapped strictly to solid matte neumorphic */
+.glass-card,
+.glass-panel,
+.glass-surface {
+  background: var(--bg-surface) !important;
+  box-shadow: var(--neu-raised) !important;
+  border: 1px solid var(--color-border-highlight) !important;
+  border-radius: var(--radius-lg) !important;
+  color: var(--text-primary) !important;
+}
+
+.glass-card-navy {
+  background: linear-gradient(145deg, #0F172A, #1E293B) !important;
+  color: #FFFFFF !important;
+  border: 1px solid #334155 !important;
+  box-shadow: 6px 6px 16px var(--shadow-dark), -4px -4px 12px var(--shadow-light) !important;
+}
+
+.glass-card-emerald,
+.glass-card-forest {
+  background: linear-gradient(145deg, #065F46, #047857) !important;
+  color: #FFFFFF !important;
+  border: 1px solid #059669 !important;
+  box-shadow: 6px 6px 16px var(--shadow-dark), -4px -4px 12px var(--shadow-light) !important;
+}
+
+/* ==========================================================================
+   TACTILE NEUMORPHIC BUTTONS
+   ========================================================================== */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-family: var(--font-heading);
+  font-size: 0.9rem;
+  font-weight: 700;
+  padding: 0.7rem 1.4rem;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--color-border-highlight);
+  cursor: pointer;
+  user-select: none;
+  transition: var(--spring-tactile);
+  text-decoration: none;
+  line-height: 1.2;
+  box-shadow: var(--neu-raised-sm);
+}
+
+.btn:hover {
+  text-decoration: none;
+  transform: translateY(-2px);
+  box-shadow: var(--neu-raised);
+}
+
+.btn:active {
+  transform: translateY(1px) scale(0.98);
+  box-shadow: var(--neu-inset);
+}
+
+.btn-primary {
+  background: linear-gradient(145deg, #059669, #047857);
+  color: #FFFFFF !important;
+  border-color: rgba(255, 255, 255, 0.3);
+  box-shadow: 4px 4px 10px rgba(5, 150, 105, 0.35), -3px -3px 8px var(--shadow-light);
+}
+
+.btn-primary:hover {
+  background: linear-gradient(145deg, #10B981, #059669);
+  box-shadow: 6px 6px 14px rgba(5, 150, 105, 0.45), -4px -4px 10px var(--shadow-light);
+}
+
+.btn-primary:active {
+  box-shadow: inset 3px 3px 6px rgba(4, 120, 87, 0.6), inset -2px -2px 4px rgba(16, 185, 129, 0.4) !important;
+}
+
+.btn-secondary {
+  background: var(--bg-surface);
+  color: var(--color-navy) !important;
+  border-color: var(--color-border-highlight);
+}
+
+.btn-secondary:hover {
+  color: var(--color-primary-dark) !important;
+}
+
+.btn-sm {
+  padding: 0.45rem 0.95rem;
+  font-size: 0.8rem;
+  border-radius: var(--radius-full);
+}
+
+.btn-lg {
+  padding: 0.9rem 1.8rem;
+  font-size: 1rem;
+  border-radius: var(--radius-full);
+}
+
+.btn-full {
+  width: 100%;
+}
+
+/* ==========================================================================
+   NEUMORPHIC INSET INPUTS & FORMS
+   ========================================================================== */
+.neu-input,
+.neu-select,
+.form-input,
+.form-select {
+  width: 100%;
+  background: var(--bg-sunken);
+  box-shadow: var(--neu-inset-sm);
+  border: 1px solid rgba(209, 217, 230, 0.7);
+  border-radius: var(--radius-md);
+  padding: 0.75rem 1rem;
+  font-family: var(--font-body);
+  font-size: 0.9rem;
+  color: var(--color-navy);
+  outline: none;
+  transition: var(--transition-smooth);
+}
+
+.neu-input:focus,
+.neu-select:focus,
+.form-input:focus,
+.form-select:focus {
+  border-color: var(--color-primary);
+  box-shadow: var(--neu-inset), 0 0 0 2px rgba(5, 150, 105, 0.15);
+}
+
+/* ==========================================================================
+   BADGES & PILLS
+   ========================================================================== */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.3rem 0.75rem;
+  border-radius: var(--radius-full);
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+  border: 1px solid transparent;
+  box-shadow: var(--neu-raised-subtle);
+}
+
+.badge-green {
+  background: var(--waste-wet-bg);
+  color: var(--waste-wet);
+  border-color: var(--waste-wet-border);
+}
+
+.badge-blue {
+  background: var(--waste-dry-bg);
+  color: var(--waste-dry);
+  border-color: var(--waste-dry-border);
+}
+
+.badge-red {
+  background: var(--waste-harmful-bg);
+  color: var(--waste-harmful);
+  border-color: var(--waste-harmful-border);
+}
+
+.badge-amber {
+  background: var(--color-amber-bg);
+  color: var(--color-amber);
+  border-color: var(--color-amber-border);
+}
+
+.badge-navy {
+  background: #E2E8F0;
+  color: var(--color-navy);
+  border-color: #CBD5E1;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.status-dot.green { background: #10B981; }
+.status-dot.amber { background: #F59E0B; }
+.status-dot.blue  { background: #0284C7; }
+.status-dot.red   { background: #DC2626; }
+
+/* ==========================================================================
+   GRID LAYOUTS
+   ========================================================================== */
+.grid-cols-2 {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.5rem;
+}
+
+.grid-cols-3 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1.5rem;
+}
+
+.grid-cols-4 {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1.25rem;
+}
+
+.hero-grid {
+  display: grid;
+  grid-template-columns: 1.25fr 0.75fr;
+  gap: 1.75rem;
+}
+
+@media (max-width: 960px) {
+  .hero-grid {
+    grid-template-columns: 1fr;
+  }
+  .grid-cols-3,
+  .grid-cols-4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .grid-cols-2,
+  .grid-cols-3,
+  .grid-cols-4 {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/css/responsive.css b/css/responsive.css
new file mode 100644
index 0000000..d099197
--- /dev/null
+++ b/css/responsive.css
@@ -0,0 +1,622 @@
+/* ==========================================================================
+   CLEANCRED — RESPONSIVE ADAPTATIONS
+   Smart India Hackathon 2026 // Team GreenLegacy
+   ========================================================================== */
+
+/* Breakpoint: Laptop / Tablet (<= 1024px) */
+@media (max-width: 1024px) {
+  .desktop-dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-sidebar {
+    position: static;
+  }
+
+  .admin-metrics-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Breakpoint: Mobile Viewport (<= 768px) */
+@media (max-width: 768px) {
+  /* Prevent horizontal overflow globally */
+  html,
+  body {
+    overflow-x: hidden;
+    max-width: 100vw;
+  }
+
+  /* Safe container guttering */
+  .app-container {
+    padding-left: 16px;
+    padding-right: 16px;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  /* Top Municipal Navigation Bar */
+  .app-topbar,
+  .silicone-topbar {
+    min-height: 64px;
+    height: auto;
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-top: env(safe-area-inset-top, 0px);
+    padding-bottom: 6px;
+    box-sizing: border-box;
+  }
+
+  .topbar-content {
+    overflow: hidden;
+  }
+
+  /* Hide center role switcher in topbar row (moved to .mobile-role-strip) */
+  .topbar-content .role-switcher-nav {
+    display: none !important;
+  }
+
+  .brand-badge {
+    display: none !important; /* Hide SBM-U 2.0 pill on mobile */
+  }
+
+  .demo-reset-btn {
+    display: none !important; /* Hide demo reset from topbar on mobile */
+  }
+
+  .topbar-profile-btn span {
+    display: none !important; /* Icon-only profile button on mobile */
+  }
+
+  .topbar-profile-btn {
+    padding: 0.4rem 0.6rem;
+  }
+
+  .points-pill-top {
+    padding: 0.38rem 0.75rem;
+    gap: 0.35rem;
+  }
+
+  .points-pill-top span {
+    font-size: 0.82rem; /* Keep points clearly visible */
+  }
+
+  /* Mobile Role Switcher Strip: Situated directly beneath fixed header */
+  .mobile-role-strip {
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    top: calc(64px + env(safe-area-inset-top, 0px));
+    left: 0;
+    right: 0;
+    background: var(--bg-surface);
+    padding: 6px 16px 8px 16px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
+    border-bottom: 1px solid var(--color-border);
+    z-index: 990;
+    box-sizing: border-box;
+  }
+
+  /* Main Content Offset: Starts cleanly below topbar + role strip */
+  .main-content {
+    margin-top: calc(112px + env(safe-area-inset-top, 0px));
+    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
+  }
+
+  /* Mobile Primary CTA Button */
+  .mobile-primary-cta-container {
+    display: block;
+    margin: 1.25rem 0;
+    width: 100%;
+  }
+
+  /* Tactile Hero Scan Component (AI Pre-Check) */
+  .hero-scan-circle-container {
+    margin: 1.5rem auto 1.75rem auto;
+  }
+
+  .btn-hero-scan-circular {
+    width: 165px;
+    height: 165px;
+    padding: 0.75rem;
+    border-width: 3.5px;
+    box-shadow: 7px 7px 18px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
+  }
+
+  .scan-icon-bubble {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 0.35rem;
+  }
+
+  .scan-icon-bubble svg {
+    width: 22px;
+    height: 22px;
+  }
+
+  .scan-btn-label {
+    font-size: 0.85rem;
+    letter-spacing: 0.06em;
+  }
+
+  .scan-btn-sublabel {
+    font-size: 0.65rem;
+  }
+
+  .scan-supporting-note {
+    font-size: 0.75rem;
+    margin-top: 0.65rem;
+    max-width: 290px;
+  }
+
+  .scan-supporting-note .desktop-note {
+    display: none !important;
+  }
+
+  .scan-supporting-note .mobile-note {
+    display: inline !important;
+  }
+
+  /* Green Credits Hero Card */
+  .hero-points-card {
+    padding: 1.25rem 1rem !important;
+    border-radius: 16px !important;
+    margin-bottom: 1.25rem;
+  }
+
+  .points-oversized-value {
+    font-size: 2.6rem;
+    margin: 0.25rem 0 0.5rem 0;
+  }
+
+  /* Active Pickup Card (Vertical Stacking) */
+  .pickup-status-card {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.85rem;
+    padding: 1.15rem 1rem !important;
+    margin-bottom: 1.25rem;
+    border-radius: 16px !important;
+  }
+
+  .pickup-status-info {
+    min-width: 0 !important;
+    width: 100% !important;
+  }
+
+  .pickup-status-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    gap: 0.65rem;
+  }
+
+  .pickup-status-actions .btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .pickup-otp-pill {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  /* Dashboard Metrics Grid (2-Column Compact) */
+  .dashboard-metrics-grid {
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 0.75rem !important;
+    margin-bottom: 1.5rem;
+  }
+
+  .metric-card {
+    padding: 0.85rem 0.75rem !important;
+    border-radius: 14px !important;
+  }
+
+  .metric-card span {
+    font-size: 0.72rem !important;
+    margin-bottom: 0.2rem !important;
+  }
+
+  .metric-card strong {
+    font-size: 1.45rem !important;
+  }
+
+  .metric-card em {
+    font-size: 0.7rem !important;
+  }
+
+  /* Standardized Mobile Card Sizing & Padding */
+  .neu-card,
+  .neu-card-raised {
+    padding: 1.15rem 1rem !important;
+    border-radius: 16px !important;
+    box-shadow: var(--neu-raised-sm) !important;
+  }
+
+  .neu-card .flex-between,
+  .neu-card-raised .flex-between,
+  .neu-card-flat .flex-between {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  /* Step 2 Demo Picker: Horizontal Scroll Row & Upload Button */
+  .btn-upload-photo {
+    width: 100% !important;
+    max-width: 100% !important;
+    justify-content: center;
+  }
+
+  .demo-picker-grid {
+    display: flex !important;
+    overflow-x: auto !important;
+    scroll-snap-type: x mandatory;
+    gap: 0.75rem;
+    padding-bottom: 0.5rem;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .demo-thumb-btn {
+    min-width: 120px;
+    flex-shrink: 0;
+    scroll-snap-align: start;
+  }
+
+  /* Surreal Background Blobs Calming on Mobile (prevent horizontal stretch & jitter) */
+  .surreal-blob {
+    animation: none !important;
+    filter: blur(40px) !important;
+    opacity: 0.16 !important;
+  }
+  .surreal-blob-green {
+    width: 180px !important;
+    height: 180px !important;
+    left: 0 !important;
+    top: 2% !important;
+  }
+  .surreal-blob-cyan {
+    width: 180px !important;
+    height: 180px !important;
+    right: 0 !important;
+    top: 45% !important;
+  }
+  .surreal-blob-orange {
+    width: 160px !important;
+    height: 160px !important;
+    bottom: 2% !important;
+    left: 5% !important;
+  }
+
+  /* Modals: Guaranteed Viewport Fit */
+  .modal-overlay,
+  .modal-overlay-backdrop {
+    padding: 12px;
+  }
+
+  .modal-content,
+  .neu-modal,
+  .celebration-reward-card {
+    max-width: calc(100vw - 24px) !important;
+    max-height: calc(100vh - 24px) !important;
+    padding: 1.25rem 1rem !important;
+    border-radius: var(--radius-lg) !important;
+    box-sizing: border-box !important;
+    overflow-y: auto !important;
+  }
+
+  .scan-viewfinder-modal {
+    width: calc(100vw - 32px) !important;
+    max-width: 360px !important;
+    padding: 1.25rem 1rem !important;
+  }
+
+  .camera-preview-box {
+    max-height: 200px !important;
+  }
+
+  /* Mobile Bottom Navigation Dock (Solid Matte Neumorphic) */
+  .mobile-bottom-dock {
+    display: flex !important;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: calc(64px + env(safe-area-inset-bottom, 0px));
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    background: var(--bg-surface);
+    border-top: 1px solid var(--color-border);
+    box-shadow: 0 -4px 14px var(--shadow-dark), 0 -1px 0 var(--color-border-highlight);
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 8px;
+    padding-right: 8px;
+    z-index: 1000;
+    box-sizing: border-box;
+  }
+
+  .dock-nav-group {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    justify-content: space-around;
+  }
+
+  .dock-item-btn {
+    flex: 1;
+    min-height: 48px;
+    padding: 0.4rem 0.2rem;
+    gap: 0.25rem;
+    font-size: 0.7rem;
+    font-weight: 500;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    touch-action: manipulation;
+  }
+
+  .dock-item-btn.active {
+    color: var(--color-primary);
+  }
+
+  .dock-item-btn svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .dock-center-slot {
+    position: relative;
+    width: 64px;
+    height: 64px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    padding-bottom: 6px;
+    flex-shrink: 0;
+  }
+
+  .dock-floating-fab {
+    position: absolute;
+    top: -22px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    color: #FFFFFF;
+    border: 3px solid var(--bg-surface);
+    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.45), 0 2px 6px rgba(0, 0, 0, 0.15);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    touch-action: manipulation;
+    z-index: 1005;
+  }
+
+  .dock-floating-fab:active {
+    transform: translateX(-50%) scale(0.94);
+  }
+
+  .dock-floating-fab svg {
+    width: 24px;
+    height: 24px;
+    stroke: #FFFFFF;
+    stroke-width: 2.5;
+  }
+
+  .dock-fab-label {
+    font-size: 0.65rem;
+    font-weight: 600;
+    color: var(--color-text-muted);
+    letter-spacing: 0.02em;
+    margin-top: auto;
+  }
+
+  /* Rewards Overview Grid (Mobile composition) */
+  .rewards-overview-grid {
+    grid-template-columns: 1fr 1fr !important;
+    gap: 0.85rem !important;
+  }
+
+  .rewards-card-primary {
+    grid-column: span 2;
+    padding: 1.35rem 1.15rem !important;
+  }
+
+  .rewards-card-compact {
+    padding: 1rem 0.85rem !important;
+  }
+
+  .rewards-card-amount {
+    font-size: 2.2rem !important;
+  }
+
+  /* Municipal Command Center (Admin View) */
+  .admin-sidebar {
+    display: none !important;
+  }
+
+  .command-tools-section {
+    display: block !important;
+  }
+
+  .admin-page-title {
+    font-size: clamp(1.3rem, 5.5vw, 1.85rem) !important;
+    line-height: 1.2 !important;
+    letter-spacing: -0.02em;
+  }
+
+  .admin-page-subtitle {
+    font-size: 0.82rem !important;
+  }
+
+  .admin-metrics-row {
+    grid-template-columns: 1fr;
+  }
+
+  .view-section.active {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+
+  .desktop-dashboard-grid {
+    grid-template-columns: 1fr !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+  }
+
+  .desktop-dashboard-grid > * {
+    min-width: 0 !important;
+    max-width: 100% !important;
+  }
+
+  .hero-grid,
+  .hero-grid-admin,
+  .hero-grid-profile,
+  .hero-grid-dumping,
+  .hero-grid-landing,
+  .hero-grid-leaderboard,
+  .hero-grid-2col {
+    grid-template-columns: 1fr !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+  }
+
+  .grid-cols-2,
+  .grid-cols-3,
+  .grid-cols-4 {
+    grid-template-columns: 1fr !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+  }
+
+  .hero-grid > *,
+  .hero-grid-admin > *,
+  .hero-grid-profile > *,
+  .hero-grid-dumping > *,
+  .hero-grid-landing > *,
+  .hero-grid-leaderboard > *,
+  .hero-grid-2col > *,
+  .grid-cols-2 > *,
+  .grid-cols-3 > *,
+  .grid-cols-4 > * {
+    min-width: 0 !important;
+    max-width: 100% !important;
+  }
+
+  canvas {
+    max-width: 100% !important;
+  }
+
+  .btn-block {
+    display: flex !important;
+    width: 100% !important;
+  }
+}
+
+/* Breakpoint: Compact Mobile (<= 380px) */
+@media (max-width: 380px) {
+  .rewards-overview-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  .rewards-card-primary,
+  .rewards-card-compact {
+    grid-column: span 1 !important;
+  }
+}
+
+/* Breakpoint: Small Mobile (<= 480px) */
+@media (max-width: 480px) {
+  .dashboard-heading {
+    margin-bottom: 1rem;
+  }
+
+  .btn-hero-scan-circular {
+    width: 155px;
+    height: 155px;
+  }
+
+  .points-oversized-value {
+    font-size: 2.35rem;
+  }
+
+  .waste-options-grid {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+/* Breakpoint: Ultra-Compact Mobile (<= 360px e.g. iPhone SE 1st Gen) */
+@media (max-width: 360px) {
+  .app-container {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .btn-hero-scan-circular {
+    width: 148px;
+    height: 148px;
+    padding: 0.5rem;
+  }
+
+  .scan-icon-bubble {
+    width: 40px;
+    height: 40px;
+    margin-bottom: 0.25rem;
+  }
+
+  .scan-icon-bubble svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .scan-btn-label {
+    font-size: 0.78rem;
+  }
+
+  .scan-btn-sublabel {
+    font-size: 0.6rem;
+  }
+
+  .points-pill-top {
+    padding: 0.35rem 0.55rem;
+  }
+
+  .points-pill-top span {
+    font-size: 0.75rem;
+  }
+
+  .points-oversized-value {
+    font-size: 2.1rem;
+  }
+
+  .dashboard-metrics-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  .rewards-overview-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  .rewards-card-primary,
+  .rewards-card-compact {
+    grid-column: span 1 !important;
+  }
+}
diff --git a/dashboard.js b/dashboard.js
deleted file mode 100644
index f0c4fee..0000000
--- a/dashboard.js
+++ /dev/null
@@ -1,277 +0,0 @@
-/* ==========================================================================
-   GREEN KARMA — CITIZEN DASHBOARD COMPONENT
-   Profile: Shivansh Prajapati | 1,250 GP = ₹125
-   ========================================================================== */
-
-import { State } from '../state.js';
-import { Formatters } from '../utils/formatters.js';
-
-export const DashboardView = {
-  render() {
-    const container = document.getElementById('view-dashboard');
-    if (!container) return;
-
-    const user = State.state.user;
-    const activePickup = State.state.pickups.find(p => p.status === 'on_the_way' || p.status === 'assigned' || p.status === 'created');
-    const inrValue = Formatters.gpToInr(user.greenPoints);
-
-    container.innerHTML = `
-      <div class="app-container">
-        
-        <!-- Dashboard Top Header Greeting -->
-        <div class="flex-between" style="margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
-          <div>
-            <div class="badge badge-green" style="margin-bottom: 0.5rem;">
-              <span>🌱</span> Citizen Eco Hub &bull; Ward 4B Mumbai
-            </div>
-            <h2>Good morning, ${user.name.split(' ')[0]} 👋</h2>
-            <p>Ready to make a greener impact today? You have an active pickup in progress.</p>
-          </div>
-
-          <div style="display: flex; gap: 0.85rem; align-items: center;">
-            <button class="btn btn-primary" onclick="window.AppRouter.navigate('report-waste')">
-              <span>♻️</span> Report Waste (+10 GP)
-            </button>
-            <button class="btn btn-secondary" onclick="window.AppRouter.navigate('rewards')">
-              <span>💳</span> Green Wallet
-            </button>
-          </div>
-        </div>
-
-        <!-- Active Live Pickup Tracking Banner (If any active pickup) -->
-        ${activePickup ? `
-          <div class="glass-card" style="background: linear-gradient(135deg, #102A43, #0B5D3B); color: #FFFFFF; padding: 1.5rem 1.75rem; margin-bottom: 2rem; border: 1.5px solid rgba(132, 204, 22, 0.4);">
-            <div class="flex-between" style="flex-wrap: wrap; gap: 1rem;">
-              <div style="display: flex; align-items: center; gap: 1.25rem;">
-                <div style="width: 52px; height: 52px; border-radius: 50%; background: rgba(22, 163, 74, 0.35); border: 2px solid #84CC16; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;" class="animate-pulse-glow">
-                  🚚
-                </div>
-                <div>
-                  <div style="display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.25rem;">
-                    <span class="badge" style="background: #84CC16; color: #0A1929; font-weight: 800;">LIVE PICKUP</span>
-                    <strong style="color: #FFFFFF; font-size: 0.95rem;">Request #${activePickup.id}</strong>
-                  </div>
-                  <div style="font-size: 0.85rem; color: #CBD5E1;">
-                    ${activePickup.categoryName} &bull; Worker <strong>${activePickup.workerName || 'Assigned Worker'}</strong> is on the way (ETA: ~${activePickup.etaMinutes || 12} mins)
-                  </div>
-                </div>
-              </div>
-
-              <div style="display: flex; align-items: center; gap: 1rem;">
-                <div style="background: rgba(255,255,255,0.12); padding: 0.4rem 0.85rem; border-radius: var(--radius-md); text-align: center;">
-                  <div style="font-size: 0.7rem; color: #94A3B8; font-weight: 700; text-transform: uppercase;">Pickup OTP</div>
-                  <div style="font-size: 1.15rem; font-weight: 800; color: #84CC16; letter-spacing: 0.1em;">${activePickup.otp || '8492'}</div>
-                </div>
-                <button class="btn btn-primary" onclick="window.AppRouter.navigate('live-tracking')">
-                  <span>📍</span> Live Track Map
-                </button>
-              </div>
-            </div>
-          </div>
-        ` : ''}
-
-        <!-- Top 4 Metrics Summary Grid -->
-        <div class="grid-cols-4" style="margin-bottom: 2rem;">
-          
-          <!-- Green Points & Rupee Valuation -->
-          <div class="glass-card glass-card-emerald" style="padding: 1.5rem; cursor: pointer;" onclick="window.AppRouter.navigate('rewards')">
-            <div class="flex-between" style="margin-bottom: 0.75rem;">
-              <span style="font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: #DCFCE7;">Green Wallet</span>
-              <span style="font-size: 1.25rem;">🌱</span>
-            </div>
-            <div style="font-size: 2.1rem; font-weight: 900; color: #FFFFFF; line-height: 1;">
-              ${Formatters.formatNumber(user.greenPoints)} <span style="font-size: 1rem; font-weight: 600;">GP</span>
-            </div>
-            <div style="margin-top: 0.5rem; font-size: 0.85rem; color: #DCFCE7; font-weight: 600;">
-              ≈ ${Formatters.formatCurrency(inrValue)} Real Value (100 GP = ₹10)
-            </div>
-          </div>
-
-          <!-- Total Waste Diverted -->
-          <div class="glass-card" style="padding: 1.5rem;">
-            <div class="flex-between" style="margin-bottom: 0.75rem;">
-              <span style="font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted);">Waste Diverted</span>
-              <span style="font-size: 1.25rem;">♻️</span>
-            </div>
-            <div style="font-size: 2.1rem; font-weight: 800; color: var(--color-navy); line-height: 1;">
-              ${user.lifetimeWasteKg} <span style="font-size: 1rem; font-weight: 600; color: var(--text-muted);">KG</span>
-            </div>
-            <div style="margin-top: 0.5rem; font-size: 0.825rem; color: var(--color-primary); font-weight: 600;">
-              ${user.pickupsCompleted} Verified Pickups
-            </div>
-          </div>
-
-          <!-- CO2 Impact & Trees -->
-          <div class="glass-card" style="padding: 1.5rem;">
-            <div class="flex-between" style="margin-bottom: 0.75rem;">
-              <span style="font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted);">Carbon Avoided</span>
-              <span style="font-size: 1.25rem;">🌍</span>
-            </div>
-            <div style="font-size: 2.1rem; font-weight: 800; color: var(--color-navy); line-height: 1;">
-              ${user.co2SavedKg} <span style="font-size: 1rem; font-weight: 600; color: var(--text-muted);">KG CO₂</span>
-            </div>
-            <div style="margin-top: 0.5rem; font-size: 0.825rem; color: var(--text-muted);">
-              🌳 ${user.treesEquivalent} Trees Equivalent
-            </div>
-          </div>
-
-          <!-- City Rank & Green Streak -->
-          <div class="glass-card" style="padding: 1.5rem;">
-            <div class="flex-between" style="margin-bottom: 0.75rem;">
-              <span style="font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted);">Leaderboard Rank</span>
-              <span style="font-size: 1.25rem;">🏆</span>
-            </div>
-            <div style="font-size: 2.1rem; font-weight: 800; color: var(--color-navy); line-height: 1;">
-              #${user.rank} <span style="font-size: 0.85rem; font-weight: 600; color: var(--text-muted);">/ Mumbai</span>
-            </div>
-            <div style="margin-top: 0.5rem; display: flex; align-items: center; gap: 0.35rem; font-size: 0.825rem; font-weight: 700; color: #EA580C;">
-              <span class="animate-flame">🔥</span> ${user.greenStreakDays} Days Green Streak
-            </div>
-          </div>
-
-        </div>
-
-        <!-- Main Dashboard Split: Left Column (Quick Segregate + Challenges) | Right Column (Recent Pickups & Wallet Ledger) -->
-        <div style="display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2rem;" class="hero-grid">
-          
-          <!-- Left Column -->
-          <div>
-            
-            <!-- Quick Segregate Cards -->
-            <div class="glass-card" style="padding: 1.75rem; margin-bottom: 2rem;">
-              <div class="flex-between" style="margin-bottom: 1.25rem;">
-                <div>
-                  <h3 style="color: var(--color-navy);">Quick Waste Disposal</h3>
-                  <p style="font-size: 0.85rem;">Select category to create instant pickup request.</p>
-                </div>
-                <span class="badge badge-green">Instant Dispatch</span>
-              </div>
-
-              <div class="grid-cols-3">
-                <div class="glass-card-interactive" style="background: var(--waste-wet-bg); border: 1.5px solid var(--waste-wet-border); padding: 1.25rem; border-radius: var(--radius-lg); text-align: center;" onclick="window.AppRouter.navigate('report-waste', { category: 'wet' })">
-                  <div style="font-size: 2rem; margin-bottom: 0.4rem;">🟢</div>
-                  <strong style="color: var(--waste-wet); display: block; font-size: 0.95rem;">Wet Waste</strong>
-                  <span class="badge" style="background: #16A34A; color: #FFFFFF; margin-top: 0.5rem; font-size: 0.72rem;">+10 GP</span>
-                </div>
-
-                <div class="glass-card-interactive" style="background: var(--waste-dry-bg); border: 1.5px solid var(--waste-dry-border); padding: 1.25rem; border-radius: var(--radius-lg); text-align: center;" onclick="window.AppRouter.navigate('report-waste', { category: 'dry' })">
-                  <div style="font-size: 2rem; margin-bottom: 0.4rem;">🔵</div>
-                  <strong style="color: var(--waste-dry); display: block; font-size: 0.95rem;">Dry Waste</strong>
-                  <span class="badge" style="background: #2563EB; color: #FFFFFF; margin-top: 0.5rem; font-size: 0.72rem;">+7 GP</span>
-                </div>
-
-                <div class="glass-card-interactive" style="background: var(--waste-harmful-bg); border: 1.5px solid var(--waste-harmful-border); padding: 1.25rem; border-radius: var(--radius-lg); text-align: center;" onclick="window.AppRouter.navigate('report-waste', { category: 'harmful' })">
-                  <div style="font-size: 2rem; margin-bottom: 0.4rem;">🔴</div>
-                  <strong style="color: var(--waste-harmful); display: block; font-size: 0.95rem;">Harmful Waste</strong>
-                  <span class="badge" style="background: #EF4444; color: #FFFFFF; margin-top: 0.5rem; font-size: 0.72rem;">+5 GP</span>
-                </div>
-              </div>
-            </div>
-
-            <!-- Active Gamification Challenges -->
-            <div class="glass-card" style="padding: 1.75rem;">
-              <div class="flex-between" style="margin-bottom: 1.25rem;">
-                <div>
-                  <h3 style="color: var(--color-navy);">Weekly Eco Challenges</h3>
-                  <p style="font-size: 0.85rem;">Complete challenges to earn bonus points and rank multipliers.</p>
-                </div>
-                <button class="btn btn-sm btn-emerald-outline" onclick="window.AppRouter.navigate('leaderboard')">
-                  View All
-                </button>
-              </div>
-
-              <div style="display: flex; flex-direction: column; gap: 1.25rem;">
-                ${State.state.challenges.slice(0, 2).map(ch => `
-                  <div style="background: #F8FAFC; border: 1px solid var(--color-border); padding: 1.15rem; border-radius: var(--radius-md);">
-                    <div class="flex-between" style="margin-bottom: 0.5rem;">
-                      <strong style="font-size: 0.92rem; color: var(--color-navy);">${ch.title}</strong>
-                      <span class="badge badge-points">+${ch.rewardGp} GP</span>
-                    </div>
-                    <p style="font-size: 0.82rem; margin-bottom: 0.75rem;">${ch.description}</p>
-                    
-                    <div style="display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.35rem;">
-                      <span>Progress (${ch.current}/${ch.target})</span>
-                      <span>${Math.round((ch.current / ch.target) * 100)}%</span>
-                    </div>
-                    <div style="height: 7px; background: #E2E8F0; border-radius: var(--radius-full); overflow: hidden;">
-                      <div style="height: 100%; width: ${(ch.current / ch.target) * 100}%; background: linear-gradient(90deg, #16A34A, #84CC16); border-radius: var(--radius-full);"></div>
-                    </div>
-                  </div>
-                `).join('')}
-              </div>
-            </div>
-
-          </div>
-
-          <!-- Right Column: Recent Pickups & Fast Wallet Redeem -->
-          <div>
-            
-            <!-- Green Wallet Quick Recharge Widget -->
-            <div class="glass-card" style="padding: 1.75rem; margin-bottom: 2rem;">
-              <div class="flex-between" style="margin-bottom: 1rem;">
-                <h3 style="color: var(--color-navy);">Redeem Rewards</h3>
-                <span style="font-size: 0.8rem; color: var(--color-primary-dark); font-weight: 700;">Balance: ${user.greenPoints} GP</span>
-              </div>
-              <p style="font-size: 0.85rem; margin-bottom: 1.25rem;">Instant one-click utility redemption with your Green Karma points.</p>
-
-              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem;">
-                <button class="btn btn-secondary" style="padding: 0.85rem; display: flex; flex-direction: column; gap: 0.25rem;" onclick="window.RewardsWallet.openRechargeModal()">
-                  <span style="font-size: 1.4rem;">📱</span>
-                  <span style="font-weight: 700; font-size: 0.85rem;">Mobile Recharge</span>
-                  <span style="font-size: 0.72rem; color: var(--text-muted);">From 100 GP (₹10)</span>
-                </button>
-
-                <button class="btn btn-secondary" style="padding: 0.85rem; display: flex; flex-direction: column; gap: 0.25rem;" onclick="window.RewardsWallet.openBillsModal()">
-                  <span style="font-size: 1.4rem;">💡</span>
-                  <span style="font-weight: 700; font-size: 0.85rem;">Utility Bills</span>
-                  <span style="font-size: 0.72rem; color: var(--text-muted);">Power / Water / Gas</span>
-                </button>
-              </div>
-            </div>
-
-            <!-- Recent Pickup Request History -->
-            <div class="glass-card" style="padding: 1.75rem;">
-              <div class="flex-between" style="margin-bottom: 1.25rem;">
-                <h3 style="color: var(--color-navy);">Recent Waste Pickups</h3>
-                <button class="btn btn-sm btn-emerald-outline" onclick="window.AppRouter.navigate('live-tracking')">
-                  Track All
-                </button>
-              </div>
-
-              <div style="display: flex; flex-direction: column; gap: 1rem;">
-                ${State.state.pickups.map(p => `
-                  <div style="display: flex; align-items: center; justify-content: space-between; padding: 0.85rem; background: #F8FAFC; border: 1px solid var(--color-border); border-radius: var(--radius-md);">
-                    <div style="display: flex; align-items: center; gap: 0.85rem;">
-                      <div style="font-size: 1.4rem;">
-                        ${p.category === 'wet' ? '🟢' : p.category === 'dry' ? '🔵' : '🔴'}
-                      </div>
-                      <div>
-                        <div style="font-size: 0.875rem; font-weight: 700; color: var(--color-navy);">${p.subType}</div>
-                        <div style="font-size: 0.75rem; color: var(--text-muted);">${Formatters.formatRelativeTime(p.createdAt)} &bull; ${p.quantityKg} kg</div>
-                      </div>
-                    </div>
-
-                    <div style="text-align: right;">
-                      ${p.status === 'verified' ? `
-                        <span class="badge" style="background: #D1FAE5; color: #065F46;">+${p.pointsReward} GP ✓</span>
-                      ` : p.status === 'on_the_way' ? `
-                        <span class="badge" style="background: #FEF3C7; color: #92400E;">On Way 🚚</span>
-                      ` : `
-                        <span class="badge" style="background: #E2E8F0; color: #475569;">Assigned</span>
-                      `}
-                    </div>
-                  </div>
-                `).join('')}
-              </div>
-            </div>
-
-          </div>
-
-        </div>
-
-      </div>
-    `;
-  }
-};
-
-window.DashboardView = DashboardView;
diff --git a/illegalDumping.js b/illegalDumping.js
deleted file mode 100644
index 8ec26ec..0000000
--- a/illegalDumping.js
+++ /dev/null
@@ -1,179 +0,0 @@
-/* ==========================================================================
-   GREEN KARMA — ILLEGAL DUMPING REPORTING & CIVIC ACTION
-   Citizen-powered Geo-Tagged Hotspot Spotting (+20 GP on Verification)
-   ========================================================================== */
-
-import { State } from '../state.js';
-import { Formatters } from '../utils/formatters.js';
-import { Confetti } from '../utils/confetti.js';
-import { SoundFX } from '../utils/audio.js';
-
-export const IllegalDumpingView = {
-  photoPreviewUrl: null,
-
-  render() {
-    const container = document.getElementById('view-illegal-dumping');
-    if (!container) return;
-
-    const reports = State.state.illegalDumpingReports;
-
-    container.innerHTML = `
-      <div class="app-container" style="max-width: 900px;">
-        
-        <!-- Header -->
-        <div class="flex-between" style="margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
-          <div>
-            <div class="badge" style="background: #FEE2E2; color: #991B1B; margin-bottom: 0.35rem;">
-              <span>🚨</span> Swachh Civic Vigilance
-            </div>
-            <h2>Report Illegal Garbage Hotspots</h2>
-            <p>Help the municipal authority identify and eliminate illegal dumping sites. Earn +20 GP once resolved.</p>
-          </div>
-
-          <span class="badge badge-points" style="font-size: 0.95rem; padding: 0.5rem 1rem;">
-            +20 Green Points / Report
-          </span>
-        </div>
-
-        <!-- 2-Column: Report Form (Left) & Active Status Tracker (Right) -->
-        <div style="display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem;" class="hero-grid">
-          
-          <!-- Left: Submission Form -->
-          <div class="glass-card" style="padding: 2rem;">
-            <h3 style="color: var(--color-navy); margin-bottom: 1.25rem;">Submit New Hotspot Report</h3>
-
-            <!-- Photo Upload -->
-            <div class="form-group">
-              <label class="form-label">Photo Proof of Illegal Dump</label>
-              <div style="border: 2px dashed var(--color-border); border-radius: var(--radius-md); padding: 1.25rem; text-align: center; background: #F8FAFC; cursor: pointer;" onclick="document.getElementById('dump-photo-input').click()">
-                <input type="file" id="dump-photo-input" accept="image/*" style="display: none;" onchange="window.IllegalDumpingView.handlePhotoUpload(event)">
-                <div id="dump-preview-box">
-                  ${this.photoPreviewUrl ? `
-                    <img src="${this.photoPreviewUrl}" style="max-height: 140px; border-radius: var(--radius-sm); margin-bottom: 0.5rem;" />
-                    <div style="font-size: 0.78rem; font-weight: 700; color: var(--color-primary-dark);">Photo Attached ✓</div>
-                  ` : `
-                    <div style="font-size: 2rem; margin-bottom: 0.25rem;">📷</div>
-                    <strong style="color: var(--color-navy); font-size: 0.85rem;">Click to Take or Upload Photo</strong>
-                    <div style="font-size: 0.75rem; color: var(--text-muted);">Captures GPS coordinates automatically</div>
-                  `}
-                </div>
-              </div>
-            </div>
-
-            <!-- Location -->
-            <div class="form-group">
-              <label class="form-label">Location / Street Landmark</label>
-              <input type="text" class="form-input" id="dump-location" placeholder="e.g. Under Flyover, Link Road, Ward 4B" value="Under Flyover, Link Road, Ward 4B">
-            </div>
-
-            <!-- Waste Category -->
-            <div class="form-group">
-              <label class="form-label">Type of Dumped Waste</label>
-              <select class="form-select" id="dump-type">
-                <option value="Construction & Demolition Debris">Construction & Demolition Debris</option>
-                <option value="Mixed Plastic Piles & Burning Waste">Mixed Plastic Piles & Burning Waste</option>
-                <option value="Abandoned Commercial / Industrial Waste">Abandoned Commercial / Industrial Waste</option>
-                <option value="Rotting Food & Dead Organic Waste">Rotting Food & Dead Organic Waste</option>
-              </select>
-            </div>
-
-            <!-- Description -->
-            <div class="form-group">
-              <label class="form-label">Additional Description</label>
-              <textarea class="form-textarea" id="dump-desc" rows="3" placeholder="Provide details like blocking pedestrian path, foul smell, or recurring dump..."></textarea>
-            </div>
-
-            <button class="btn btn-primary btn-block btn-lg" style="margin-top: 1rem;" onclick="window.IllegalDumpingView.submitReport()">
-              <span>🚨</span> Submit Hotspot Report (+20 GP)
-            </button>
-          </div>
-
-          <!-- Right: Public Resolution Pipeline & History -->
-          <div style="display: flex; flex-direction: column; gap: 1.5rem;">
-            
-            <div class="glass-card" style="padding: 1.75rem;">
-              <h4 style="color: var(--color-navy); margin-bottom: 0.5rem;">Resolution Lifecycle</h4>
-              <p style="font-size: 0.8rem; margin-bottom: 1.25rem;">Municipal response SLA: Under 24 hours for verified citizen alerts.</p>
-
-              <div style="display: flex; flex-direction: column; gap: 0.85rem; font-size: 0.8rem;">
-                <div style="display: flex; align-items: center; gap: 0.75rem; background: #F8FAFC; padding: 0.6rem 0.85rem; border-radius: var(--radius-md);">
-                  <span>1️⃣</span> <strong>Submitted</strong> — Geotagged to GIS map
-                </div>
-                <div style="display: flex; align-items: center; gap: 0.75rem; background: #F8FAFC; padding: 0.6rem 0.85rem; border-radius: var(--radius-md);">
-                  <span>2️⃣</span> <strong>Assigned</strong> — Dispatched to Ward Inspector
-                </div>
-                <div style="display: flex; align-items: center; gap: 0.75rem; background: #F8FAFC; padding: 0.6rem 0.85rem; border-radius: var(--radius-md);">
-                  <span>3️⃣</span> <strong>Investigating</strong> — Heavy vehicle cleanup
-                </div>
-                <div style="display: flex; align-items: center; gap: 0.75rem; background: #ECFDF5; padding: 0.6rem 0.85rem; border-radius: var(--radius-md); border: 1px solid var(--color-primary);">
-                  <span>4️⃣</span> <strong style="color: var(--color-primary-dark);">Resolved</strong> — Clean site photo + 20 GP credited!
-                </div>
-              </div>
-            </div>
-
-            <!-- Recent Reports Feed -->
-            <div class="glass-card" style="padding: 1.75rem; flex: 1;">
-              <h4 style="color: var(--color-navy); margin-bottom: 1rem;">Recent Civic Reports</h4>
-
-              <div style="display: flex; flex-direction: column; gap: 1rem;">
-                ${reports.map(r => `
-                  <div style="display: flex; align-items: center; justify-content: space-between; padding: 0.85rem; background: #F8FAFC; border: 1px solid var(--color-border); border-radius: var(--radius-md);">
-                    <div style="display: flex; align-items: center; gap: 0.85rem;">
-                      <img src="${r.photoUrl}" style="width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover;" />
-                      <div>
-                        <strong style="font-size: 0.85rem; color: var(--color-navy); display: block;">${r.wasteType}</strong>
-                        <div style="font-size: 0.75rem; color: var(--text-muted);">${r.location}</div>
-                        <div style="font-size: 0.72rem; color: var(--text-light);">${Formatters.formatRelativeTime(r.reportedAt)}</div>
-                      </div>
-                    </div>
-
-                    <div style="text-align: right;">
-                      <span class="badge" style="background: ${r.status === 'Resolved' ? '#D1FAE5' : '#FEF3C7'}; color: ${r.status === 'Resolved' ? '#065F46' : '#92400E'}; font-size: 0.75rem;">
-                        ${r.status === 'Resolved' ? '✓ Resolved (+20 GP)' : '🟡 ' + r.status}
-                      </span>
-                    </div>
-                  </div>
-                `).join('')}
-              </div>
-            </div>
-
-          </div>
-
-        </div>
-
-      </div>
-    `;
-  },
-
-  handlePhotoUpload(event) {
-    const file = event.target.files[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        this.photoPreviewUrl = e.target.result;
-        SoundFX.playClick();
-        this.render();
-      };
-      reader.readAsDataURL(file);
-    }
-  },
-
-  submitReport() {
-    const location = document.getElementById('dump-location').value;
-    const wasteType = document.getElementById('dump-type').value;
-
-    State.reportIllegalDumping({
-      location: location,
-      wasteType: wasteType,
-      photoUrl: this.photoPreviewUrl
-    });
-
-    SoundFX.playPointsEarned();
-    Confetti.trigger(80);
-    alert('Report submitted successfully! The Municipal Ward Inspector has been notified.');
-    this.photoPreviewUrl = null;
-    this.render();
-  }
-};
-
-window.IllegalDumpingView = IllegalDumpingView;
diff --git a/impactDashboard.js b/impactDashboard.js
deleted file mode 100644
index 9a3627c..0000000
--- a/impactDashboard.js
+++ /dev/null
@@ -1,154 +0,0 @@
-/* ==========================================================================
-   GREEN KARMA — ENVIRONMENTAL IMPACT DASHBOARD
-   Carbon Offset Calculator, Water Conservation, Trees, and Green Score
-   ========================================================================== */
-
-import { State } from '../state.js';
-import { Formatters } from '../utils/formatters.js';
-import { Confetti } from '../utils/confetti.js';
-import { SoundFX } from '../utils/audio.js';
-
-export const ImpactDashboardView = {
-  render() {
-    const container = document.getElementById('view-impact');
-    if (!container) return;
-
-    const user = State.state.user;
-
-    container.innerHTML = `
-      <div class="app-container">
-        
-        <!-- Header -->
-        <div class="flex-between" style="margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
-          <div>
-            <div class="badge badge-green" style="margin-bottom: 0.35rem;">
-              <span>🌍</span> Planetary Impact Telemetry
-            </div>
-            <h2>Your Environmental Footprint Saved</h2>
-            <p>Every segregated kilogram of waste logged on Green Karma directly avoids greenhouse emissions.</p>
-          </div>
-
-          <button class="btn btn-primary" onclick="window.ImpactDashboardView.generateImpactBadge()">
-            <span>🏆</span> Share Impact Certificate
-          </button>
-        </div>
-
-        <!-- 4 Top Ecological Impact Counters -->
-        <div class="grid-cols-4" style="margin-bottom: 2.5rem;">
-          
-          <div class="glass-card glass-card-emerald" style="padding: 1.75rem; border-radius: var(--radius-xl);">
-            <div class="flex-between" style="margin-bottom: 0.75rem;">
-              <span style="font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: #DCFCE7;">Total Waste Diverted</span>
-              <span style="font-size: 1.5rem;">♻️</span>
-            </div>
-            <div style="font-size: 2.6rem; font-weight: 900; color: #FFFFFF; line-height: 1;">
-              ${user.lifetimeWasteKg} <span style="font-size: 1rem; font-weight: 600;">KG</span>
-            </div>
-            <p style="font-size: 0.8rem; color: #DCFCE7; margin-top: 0.5rem;">Prevented from municipal dump yards</p>
-          </div>
-
-          <div class="glass-card" style="padding: 1.75rem; border-radius: var(--radius-xl);">
-            <div class="flex-between" style="margin-bottom: 0.75rem;">
-              <span style="font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted);">CO₂ Emissions Avoided</span>
-              <span style="font-size: 1.5rem;">☁️</span>
-            </div>
-            <div style="font-size: 2.6rem; font-weight: 900; color: var(--color-navy); line-height: 1;">
-              ${user.co2SavedKg} <span style="font-size: 1rem; font-weight: 600; color: var(--text-muted);">KG</span>
-            </div>
-            <p style="font-size: 0.8rem; color: var(--color-primary); font-weight: 600; margin-top: 0.5rem;">≈ 420 KM Car Travel Offset</p>
-          </div>
-
-          <div class="glass-card" style="padding: 1.75rem; border-radius: var(--radius-xl);">
-            <div class="flex-between" style="margin-bottom: 0.75rem;">
-              <span style="font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted);">Trees Equivalent</span>
-              <span style="font-size: 1.5rem;">🌳</span>
-            </div>
-            <div style="font-size: 2.6rem; font-weight: 900; color: var(--color-navy); line-height: 1;">
-              ${user.treesEquivalent} <span style="font-size: 1rem; font-weight: 600; color: var(--text-muted);">Trees</span>
-            </div>
-            <p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem;">Annual carbon absorption equivalent</p>
-          </div>
-
-          <div class="glass-card" style="padding: 1.75rem; border-radius: var(--radius-xl);">
-            <div class="flex-between" style="margin-bottom: 0.75rem;">
-              <span style="font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted);">Water Conserved</span>
-              <span style="font-size: 1.5rem;">💧</span>
-            </div>
-            <div style="font-size: 2.6rem; font-weight: 900; color: #2563EB; line-height: 1;">
-              ${user.waterSavedLitres} <span style="font-size: 1rem; font-weight: 600; color: var(--text-muted);">L</span>
-            </div>
-            <p style="font-size: 0.8rem; color: #2563EB; font-weight: 600; margin-top: 0.5rem;">Through recycled paper & plastics</p>
-          </div>
-
-        </div>
-
-        <!-- Waste Composition Breakdown -->
-        <div class="glass-card" style="padding: 2rem; margin-bottom: 2.5rem;">
-          <h3 style="color: var(--color-navy); margin-bottom: 1.25rem;">Your Segregated Material Breakdown</h3>
-
-          <div class="grid-cols-3">
-            <div style="background: var(--waste-wet-bg); border: 1.5px solid var(--waste-wet-border); padding: 1.5rem; border-radius: var(--radius-lg);">
-              <div class="flex-between" style="margin-bottom: 0.5rem;">
-                <strong style="color: var(--waste-wet); font-size: 1.1rem;">🟢 Organic Wet Waste</strong>
-                <span class="badge" style="background: var(--waste-wet); color: #FFFFFF;">48 KG (38%)</span>
-              </div>
-              <p style="font-size: 0.85rem; color: var(--color-navy); margin-bottom: 0.75rem;">Converted into 16 KG of organic compost fertilizer for city parks.</p>
-              <div style="font-size: 0.75rem; color: var(--color-primary-dark); font-weight: 700;">Methane Gas Avoided: ~32.4 kg</div>
-            </div>
-
-            <div style="background: var(--waste-dry-bg); border: 1.5px solid var(--waste-dry-border); padding: 1.5rem; border-radius: var(--radius-lg);">
-              <div class="flex-between" style="margin-bottom: 0.5rem;">
-                <strong style="color: var(--waste-dry); font-size: 1.1rem;">🔵 Clean Recyclables</strong>
-                <span class="badge" style="background: var(--waste-dry); color: #FFFFFF;">65 KG (52%)</span>
-              </div>
-              <p style="font-size: 0.85rem; color: var(--color-navy); margin-bottom: 0.75rem;">Reprocessed into industrial pellets, corrugated boxes, and recycled fiber.</p>
-              <div style="font-size: 0.75rem; color: #1E40AF; font-weight: 700;">Landfill Space Saved: 0.42 m³</div>
-            </div>
-
-            <div style="background: var(--waste-harmful-bg); border: 1.5px solid var(--waste-harmful-border); padding: 1.5rem; border-radius: var(--radius-lg);">
-              <div class="flex-between" style="margin-bottom: 0.5rem;">
-                <strong style="color: var(--waste-harmful); font-size: 1.1rem;">🔴 Hazardous & E-Waste</strong>
-                <span class="badge" style="background: var(--waste-harmful); color: #FFFFFF;">12 KG (10%)</span>
-              </div>
-              <p style="font-size: 0.85rem; color: var(--color-navy); margin-bottom: 0.75rem;">Safely extracted in authorized CPCB smelters, preventing groundwater toxic leeching.</p>
-              <div style="font-size: 0.75rem; color: #991B1B; font-weight: 700;">Groundwater Protected: ~4,200 L</div>
-            </div>
-          </div>
-        </div>
-
-      </div>
-
-      <!-- Impact Certificate Modal -->
-      <div class="modal-overlay" id="impact-cert-modal">
-        <div class="modal-content" style="max-width: 600px; text-align: center; border: 4px double #16A34A; padding: 2.5rem;">
-          <div class="modal-close-btn" onclick="document.getElementById('impact-cert-modal').classList.remove('active')">✕</div>
-          
-          <div style="font-size: 3rem; margin-bottom: 0.5rem;">🌍 📜</div>
-          <div style="font-size: 0.8rem; font-weight: 800; color: var(--color-primary-dark); letter-spacing: 0.15em; text-transform: uppercase;">
-            OFFICIAL CITIZEN IMPACT CERTIFICATE
-          </div>
-          <h2 style="color: var(--color-navy); margin: 0.75rem 0;">Shivansh Prajapati</h2>
-          <p style="font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.5rem;">
-            Has diverted <strong>125 KG of segregated waste</strong> and avoided <strong>84.5 KG of CO₂ emissions</strong> under the Green Karma Municipal Sustainability Program.
-          </p>
-
-          <div style="background: #ECFDF5; border: 1.5px solid #A7F3D0; padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;">
-            <strong style="color: var(--color-primary-dark); font-size: 1.1rem;">Rank #12 Mumbai Eco Citizen &bull; 8-Day Green Streak 🔥</strong>
-          </div>
-
-          <button class="btn btn-primary btn-block" onclick="window.print()">
-            🖨️ Download Certificate
-          </button>
-        </div>
-      </div>
-    `;
-  },
-
-  generateImpactBadge() {
-    SoundFX.playPointsEarned();
-    Confetti.trigger(90);
-    document.getElementById('impact-cert-modal').classList.add('active');
-  }
-};
-
-window.ImpactDashboardView = ImpactDashboardView;
diff --git a/index.html b/index.html
index 38c9123..1a3ae30 100644
--- a/index.html
+++ b/index.html
@@ -2,153 +2,221 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <title>GREEN KARMA — Smart Waste Management & Rewards Platform</title>
-  <meta name="description" content="EARN. RECYCLE. REWARD. India's premier gamified municipal waste-management network. Segregate waste, request pickups, earn Green Points, and redeem for mobile recharges and bills.">
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220%22%20width=%22100%22%20height=%22100%22><text y=%22.9em%22 font-size=%2290%22>🌱</text></svg>">
-
-  <!-- Leaflet CSS for Interactive Maps -->
-  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
-
-  <!-- Core Design System & Components CSS -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CleanCred — Verified Waste Action & Green Credits Platform (SIH 2026)</title>
+  <meta name="description" content="CleanCred: National Smart India Hackathon platform for verified municipal waste segregation, citizen tracking, and EPR Green Credits. Report → Verify → Collect → Record → Earn.">
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220%200%20100%20100%22><circle cx=%2250%22 cy=%2250%22 r=%2246%22 fill=%22%23059669%22 stroke=%22%23FFFFFF%22 stroke-width=%224%22/><text x=%2250%22 y=%2265%22 font-size=%2245%22 text-anchor=%22middle%22 fill=%22white%22>🌱</text></svg>">
+
+  <!-- Tailwind CSS CDN (Utility Classes) -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            brandGreen: '#059669',
+            brandNavy: '#0F172A',
+            brandBlue: '#0891B2',
+            canvas: '#E0E5EC'
+          },
+          fontFamily: {
+            heading: ['Outfit', 'sans-serif'],
+            body: ['Plus Jakarta Sans', 'sans-serif']
+          }
+        }
+      }
+    }
+  </script>
+
+  <!-- Google Fonts: Outfit & Plus Jakarta Sans -->
+  <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=Outfit:wght@500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+
+  <!-- Leaflet CSS for Map Views -->
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+
+  <!-- Design System Stylesheets -->
   <link rel="stylesheet" href="css/main.css">
-  <link rel="stylesheet" href="css/glassmorphism.css">
   <link rel="stylesheet" href="css/components.css">
   <link rel="stylesheet" href="css/animations.css">
   <link rel="stylesheet" href="css/responsive.css">
 
-  <!-- Chart.js for City Analytics & Waste Trends -->
+  <!-- Chart.js for Municipal Analytics -->
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
-  <!-- Leaflet JS for Geolocation & Fleet Tracking -->
+  <!-- Leaflet JS -->
   <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+
+  <!-- QR Code Generator & Scanner -->
+  <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
+
+  <!-- Lucide Icons -->
+  <script src="https://unpkg.com/lucide@latest"></script>
 </head>
 <body>
 
+  <!-- Floating Surreal Abstract Background Shapes -->
+  <div class="surreal-blob surreal-blob-green" aria-hidden="true"></div>
+  <div class="surreal-blob surreal-blob-cyan" aria-hidden="true"></div>
+  <div class="surreal-blob surreal-blob-orange" aria-hidden="true"></div>
+
   <!-- Confetti Canvas Layer -->
   <canvas id="confetti-canvas"></canvas>
 
-  <!-- Fixed Top Header Navigation -->
-  <header class="app-header glass-nav">
-    <div class="app-container header-container">
+  <!-- ==========================================================================
+       TOP MUNICIPAL NAVIGATION BAR (SOLID MATTE NEUMORPHIC)
+       ========================================================================== -->
+  <header class="app-topbar">
+    <div class="app-container topbar-content">
       
-      <!-- Brand Logo -->
-      <a href="#landing" class="brand-logo" onclick="window.AppRouter.navigate('landing')">
-        <div class="logo-icon">🌱</div>
-        <div>
-          <span>GREEN KARMA</span>
-          <span class="brand-tagline">EARN. RECYCLE. REWARD.</span>
+      <!-- Brand Logo Cluster -->
+      <div class="brand-cluster" onclick="window.AppRouter.navigate('dashboard')">
+        <div class="brand-icon-wrapper">
+          <i data-lucide="leaf" style="width: 22px; height: 22px; stroke-width: 2.5;"></i>
         </div>
-      </a>
-
-      <!-- Desktop Nav Links -->
-      <nav class="desktop-only-nav">
-        <ul class="nav-links">
-          <li class="nav-item active" data-route="landing" onclick="window.AppRouter.navigate('landing')">Home</li>
-          <li class="nav-item" data-route="dashboard" onclick="window.AppRouter.navigate('dashboard')">Dashboard</li>
-          <li class="nav-item" data-route="report-waste" onclick="window.AppRouter.navigate('report-waste')">Report Waste</li>
-          <li class="nav-item" data-route="live-tracking" onclick="window.AppRouter.navigate('live-tracking')">Live Pickup</li>
-          <li class="nav-item" data-route="rewards" onclick="window.AppRouter.navigate('rewards')">Green Wallet</li>
-          <li class="nav-item" data-route="leaderboard" onclick="window.AppRouter.navigate('leaderboard')">Leaderboard</li>
-          <li class="nav-item" data-route="admin" onclick="window.AppRouter.navigate('admin')">City Command</li>
-          <li class="nav-item" data-route="institutions" onclick="window.AppRouter.navigate('institutions')">Institutions</li>
-          <li class="nav-item" data-route="impact" onclick="window.AppRouter.navigate('impact')">Impact</li>
-        </ul>
-      </nav>
-
-      <!-- Right Header Actions -->
-      <div class="header-actions">
-        
-        <!-- Live Role Switcher (For Pitch & Demo Presentation) -->
-        <div class="role-pill-selector">
-          <span style="font-size: 0.85rem;">Role:</span>
-          <select id="app-role-select" onchange="window.AppRouter.handleRoleChange(this.value)">
-            <option value="citizen">👤 Citizen (Shivansh)</option>
-            <option value="worker">👨‍🔧 Worker (Ramesh)</option>
-            <option value="admin">🏛️ Govt Admin (Smart City)</option>
-            <option value="institution">🏫 School/College Admin</option>
-          </select>
-        </div>
-
-        <!-- Green Points Pill (Citizen) -->
-        <div class="badge badge-points" id="nav-user-points" style="cursor: pointer;" onclick="window.AppRouter.navigate('rewards')">
-          1,250 GP
-        </div>
-
-        <!-- Notification Bell -->
-        <div style="position: relative;">
-          <button class="notification-bell-btn" id="notif-bell-btn" onclick="window.AppRouter.toggleNotificationTray()">
-            🔔
-            <span class="notification-badge-dot" id="notif-dot"></span>
-          </button>
-
-          <!-- Notifications Dropdown Tray -->
-          <div id="notifications-tray" class="glass-card" style="display: none; position: absolute; top: calc(100% + 12px); right: 0; width: 320px; max-height: 400px; overflow-y: auto; z-index: 2000; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); padding: 0;">
-            <div class="flex-between" style="padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-border); background: #F8FAFC;">
-              <strong style="font-size: 0.85rem; color: var(--color-navy);">Civic Notifications</strong>
-              <span style="font-size: 0.72rem; color: var(--color-primary-dark); font-weight: 700;">Live Feed</span>
-            </div>
-            <div id="notif-tray-list"></div>
+        <div>
+          <div class="brand-title">
+            <span>CleanCred</span>
+            <span class="brand-badge">SBM-U 2.0</span>
           </div>
         </div>
+      </div>
 
-        <!-- User Avatar Button -->
-        <button class="user-avatar-btn" onclick="window.AppRouter.navigate('profile')">
-          <div class="avatar-img">SP</div>
+      <!-- Center 3-Role View Switcher (Lucide Controls) -->
+      <div class="role-switcher-nav" id="main-role-switcher">
+        <button class="role-tab-btn active" id="btn-mode-citizen" onclick="window.AppRouter.switchExperience('citizen')" title="Citizen Mobile Experience">
+          <i data-lucide="user" class="lucide-icon"></i>
+          <span>Citizen</span>
         </button>
+        <button class="role-tab-btn" id="btn-mode-worker" onclick="window.AppRouter.switchExperience('worker')" title="Municipal Worker Portal">
+          <i data-lucide="truck" class="lucide-icon"></i>
+          <span>Worker</span>
+        </button>
+        <button class="role-tab-btn" id="btn-mode-admin" onclick="window.AppRouter.switchExperience('admin')" title="City Command Center">
+          <i data-lucide="building-2" class="lucide-icon"></i>
+          <span>Command</span>
+        </button>
+      </div>
 
+      <!-- Right Action Cluster -->
+      <div class="topbar-right-cluster">
+        <div class="points-pill-top" id="topbar-user-points" onclick="window.AppRouter.navigate('rewards')" title="View Green Wallet & Rewards">
+          <i data-lucide="coins" class="lucide-icon"></i>
+          <span id="user-points-counter-top">1,250 GC</span>
+        </div>
+        <button class="topbar-profile-btn" id="btn-topbar-profile" onclick="window.AppRouter.navigate('profile')" title="Citizen Profile & Municipal KYC">
+          <i data-lucide="user-check" class="lucide-icon-sm"></i>
+          <span>Profile</span>
+        </button>
+        <button class="demo-reset-btn" id="btn-demo-reset" onclick="window.State.resetState()" title="Reset session to clean seed state">
+          <i data-lucide="rotate-ccw" class="lucide-icon-sm"></i>
+          <span>Reset</span>
+        </button>
       </div>
 
     </div>
   </header>
 
-  <!-- Main View Container -->
+  <!-- Mobile Segmented Role Strip (Visible on mobile <= 768px beneath fixed header) -->
+  <div class="mobile-role-strip" id="mobile-role-strip" role="tablist" aria-label="Role Switcher">
+    <div class="role-switcher-nav mobile-role-tabs">
+      <button class="role-tab-btn active" id="btn-mode-citizen-m" onclick="window.AppRouter.switchExperience('citizen')" title="Citizen Mobile Experience">
+        <i data-lucide="user" class="lucide-icon-sm"></i>
+        <span>Citizen</span>
+      </button>
+      <button class="role-tab-btn" id="btn-mode-worker-m" onclick="window.AppRouter.switchExperience('worker')" title="Municipal Worker Portal">
+        <i data-lucide="truck" class="lucide-icon-sm"></i>
+        <span>Worker</span>
+      </button>
+      <button class="role-tab-btn" id="btn-mode-admin-m" onclick="window.AppRouter.switchExperience('admin')" title="City Command Center">
+        <i data-lucide="building-2" class="lucide-icon-sm"></i>
+        <span>Command</span>
+      </button>
+    </div>
+  </div>
+
+  <!-- ==========================================================================
+       MAIN VIEW CONTAINERS (ALL ROUTES PERSISTED)
+       ========================================================================== -->
   <main class="main-content">
-    <div id="view-landing" class="view-section active"></div>
-    <div id="view-dashboard" class="view-section"></div>
+    <!-- Citizen Mobile Home Experience -->
+    <div id="view-dashboard" class="view-section active"></div>
+
+    <!-- 5-Step Verified Waste Reporting Flow -->
     <div id="view-report-waste" class="view-section"></div>
-    <div id="view-live-tracking" class="view-section"></div>
-    <div id="view-rewards" class="view-section"></div>
-    <div id="view-leaderboard" class="view-section"></div>
+
+    <!-- Municipal Worker Portal -->
     <div id="view-worker" class="view-section"></div>
+
+    <!-- Municipal Admin Dashboard -->
     <div id="view-admin" class="view-section"></div>
-    <div id="view-institutions" class="view-section"></div>
-    <div id="view-illegal-dumping" class="view-section"></div>
+
+    <!-- Fintech Green Wallet & Rewards -->
+    <div id="view-rewards" class="view-section"></div>
+
+    <!-- Live GPS & Status Tracking -->
+    <div id="view-live-tracking" class="view-section"></div>
+
+    <!-- Community Leaderboard -->
+    <div id="view-leaderboard" class="view-section"></div>
+
+    <!-- Environmental Impact Analytics -->
     <div id="view-impact" class="view-section"></div>
+
+    <!-- Citizen Account & KYC Profile -->
     <div id="view-profile" class="view-section"></div>
+
+    <!-- Illegal Dumping Hotline -->
+    <div id="view-illegal-dumping" class="view-section"></div>
+
+    <!-- Institution / School / Bulk Generator Portal -->
+    <div id="view-institutions" class="view-section"></div>
   </main>
 
-  <!-- Mobile Bottom Navigation (Responsive Mobile View) -->
-  <nav class="mobile-bottom-nav">
-    <ul class="mobile-nav-items">
-      <li class="mobile-nav-btn active" data-route="dashboard" onclick="window.AppRouter.navigate('dashboard')">
-        <span class="mobile-nav-icon">🏠</span>
+  <!-- Global Mobile Bottom Navigation Dock (Solid Matte Neumorphic) -->
+  <nav class="mobile-bottom-dock" id="global-mobile-dock" aria-label="Mobile Navigation">
+    <div class="dock-nav-group dock-left-group">
+      <button class="dock-item-btn active" id="dock-btn-dashboard" onclick="window.AppRouter.navigate('dashboard')" title="Home">
+        <i data-lucide="home" class="dock-lucide-icon"></i>
         <span>Home</span>
-      </li>
-      <li class="mobile-nav-btn" data-route="report-waste" onclick="window.AppRouter.navigate('report-waste')">
-        <span class="mobile-nav-icon">♻️</span>
-        <span>Report</span>
-      </li>
-      <li class="mobile-nav-btn" data-route="rewards" onclick="window.AppRouter.navigate('rewards')">
-        <span class="mobile-nav-icon">🌱</span>
-        <span>Points</span>
-      </li>
-      <li class="mobile-nav-btn" data-route="live-tracking" onclick="window.AppRouter.navigate('live-tracking')">
-        <span class="mobile-nav-icon">📍</span>
-        <span>Track</span>
-      </li>
-      <li class="mobile-nav-btn" data-route="leaderboard" onclick="window.AppRouter.navigate('leaderboard')">
-        <span class="mobile-nav-icon">🏆</span>
-        <span>Rank</span>
-      </li>
-      <li class="mobile-nav-btn" data-route="profile" onclick="window.AppRouter.navigate('profile')">
-        <span class="mobile-nav-icon">👤</span>
+      </button>
+      <button class="dock-item-btn" id="dock-btn-live-tracking" onclick="window.AppRouter.navigate('live-tracking')" title="Live Activity Tracking">
+        <i data-lucide="activity" class="dock-lucide-icon"></i>
+        <span>Activity</span>
+      </button>
+    </div>
+
+    <!-- Center Floating Action Button (Physically centered at 50vw, floating above dock) -->
+    <div class="dock-center-slot">
+      <button class="dock-floating-fab" id="dock-btn-report-waste" onclick="window.AppRouter.navigate('report-waste')" title="Report Waste" aria-label="Report Waste">
+        <i data-lucide="plus" class="dock-fab-icon"></i>
+      </button>
+      <span class="dock-fab-label">Report</span>
+    </div>
+
+    <div class="dock-nav-group dock-right-group">
+      <button class="dock-item-btn" id="dock-btn-rewards" onclick="window.AppRouter.navigate('rewards')" title="Green Wallet">
+        <i data-lucide="wallet" class="dock-lucide-icon"></i>
+        <span>Rewards</span>
+      </button>
+      <button class="dock-item-btn" id="dock-btn-profile" onclick="window.AppRouter.navigate('profile')" title="Citizen Profile">
+        <i data-lucide="user" class="dock-lucide-icon"></i>
         <span>Profile</span>
-      </li>
-    </ul>
+      </button>
+    </div>
   </nav>
 
+  <!-- Interactive Modal Container -->
+  <div id="modal-scan-container" style="display: none;"></div>
+
   <!-- ES6 Module App Entrypoint -->
   <script type="module" src="js/app.js"></script>
+  <script>
+    window.addEventListener('DOMContentLoaded', () => {
+      if (window.lucide) window.lucide.createIcons();
+    });
+  </script>
 </body>
 </html>
diff --git a/institutionPortal.js b/institutionPortal.js
deleted file mode 100644
index 64797d8..0000000
--- a/institutionPortal.js
+++ /dev/null
@@ -1,284 +0,0 @@
-/* ==========================================================================
-   GREEN KARMA — INSTITUTION SERVICES & DASHBOARD
-   Schools, Colleges, Hospitals, Corporate Offices, Residential Societies
-   ========================================================================== */
-
-import { State } from '../state.js';
-import { Formatters } from '../utils/formatters.js';
-import { Confetti } from '../utils/confetti.js';
-import { SoundFX } from '../utils/audio.js';
-
-export const InstitutionPortalView = {
-  selectedType: 'schools',
-
-  render() {
-    const container = document.getElementById('view-institutions');
-    if (!container) return;
-
-    container.innerHTML = `
-      <div class="app-container">
-        
-        <!-- Header -->
-        <div class="flex-between" style="margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
-          <div>
-            <div class="badge badge-green" style="margin-bottom: 0.35rem;">
-              <span>🏫</span> Institutional Sustainability Network
-            </div>
-            <h2>Enterprise & Campus Waste Management</h2>
-            <p>Custom bulk collection frameworks, student eco-incentives, biomedical compliance, and ESG reporting.</p>
-          </div>
-
-          <button class="btn btn-primary" onclick="window.InstitutionPortalView.downloadCertificate()">
-            <span>📜</span> Download Green Certificate
-          </button>
-        </div>
-
-        <!-- 5 Category Filter Tabs -->
-        <div style="display: flex; gap: 0.75rem; margin-bottom: 2.5rem; overflow-x: auto; padding-bottom: 0.5rem;">
-          <button class="btn btn-sm ${this.selectedType === 'schools' ? 'btn-primary' : 'btn-secondary'}" onclick="window.InstitutionPortalView.selectType('schools')">
-            🏫 Schools & Green Clubs
-          </button>
-          <button class="btn btn-sm ${this.selectedType === 'colleges' ? 'btn-primary' : 'btn-secondary'}" onclick="window.InstitutionPortalView.selectType('colleges')">
-            🎓 Colleges & Campuses
-          </button>
-          <button class="btn btn-sm ${this.selectedType === 'hospitals' ? 'btn-primary' : 'btn-secondary'}" onclick="window.InstitutionPortalView.selectType('hospitals')">
-            🏥 Hospitals (Medical Waste)
-          </button>
-          <button class="btn btn-sm ${this.selectedType === 'offices' ? 'btn-primary' : 'btn-secondary'}" onclick="window.InstitutionPortalView.selectType('offices')">
-            🏢 Corporate Offices (ESG)
-          </button>
-          <button class="btn btn-sm ${this.selectedType === 'societies' ? 'btn-primary' : 'btn-secondary'}" onclick="window.InstitutionPortalView.selectType('societies')">
-            🏘️ Residential Societies (RWAs)
-          </button>
-        </div>
-
-        <!-- Active Selected Institution Showcase -->
-        ${this.renderInstitutionContent()}
-
-      </div>
-
-      <!-- Printable Certificate Modal -->
-      <div class="modal-overlay" id="certificate-modal">
-        <div class="modal-content" style="max-width: 640px; text-align: center; border: 4px double #16A34A; padding: 2.5rem;">
-          <div class="modal-close-btn" onclick="document.getElementById('certificate-modal').classList.remove('active')">✕</div>
-          
-          <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">🌱 📜</div>
-          <div style="font-size: 0.85rem; font-weight: 800; color: var(--color-primary-dark); letter-spacing: 0.15em; text-transform: uppercase;">
-            MUNICIPAL CORPORATION OF GREATER MUMBAI & GREEN KARMA
-          </div>
-          <h2 style="color: var(--color-navy); margin: 0.75rem 0;">Certificate of Sustainability Excellence</h2>
-          <p style="font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.5rem;">
-            This certifies that <strong>Delhi Public School Green Club</strong> has achieved a <strong>94/100 Sustainability Index</strong> by diverting <strong>1,840 KG of waste</strong> with zero landfill contamination.
-          </p>
-
-          <div style="display: flex; justify-content: space-around; background: #F8FAFC; padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;">
-            <div>
-              <div style="font-size: 1.25rem; font-weight: 800; color: var(--color-primary-dark);">1,840 KG</div>
-              <div style="font-size: 0.72rem; color: var(--text-muted);">Waste Diverted</div>
-            </div>
-            <div>
-              <div style="font-size: 1.25rem; font-weight: 800; color: #2563EB;">1,240 KG</div>
-              <div style="font-size: 0.72rem; color: var(--text-muted);">CO₂ Avoided</div>
-            </div>
-            <div>
-              <div style="font-size: 1.25rem; font-weight: 800; color: #F59E0B;">94 / 100</div>
-              <div style="font-size: 0.72rem; color: var(--text-muted);">Eco Rating</div>
-            </div>
-          </div>
-
-          <div class="flex-between" style="border-top: 1px dashed var(--color-border); padding-top: 1rem; font-size: 0.8rem; color: var(--text-muted);">
-            <span>Authorized Officer: Municipal Commissioner</span>
-            <span>Date: 31 Aug 2026</span>
-          </div>
-
-          <button class="btn btn-primary btn-block" style="margin-top: 1.5rem;" onclick="window.print()">
-            🖨️ Print / Save as PDF
-          </button>
-        </div>
-      </div>
-    `;
-  },
-
-  renderInstitutionContent() {
-    switch (this.selectedType) {
-      case 'schools':
-        return `
-          <div class="glass-card" style="padding: 2.25rem; margin-bottom: 2rem;">
-            <div class="flex-between" style="margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
-              <div>
-                <span class="badge badge-green" style="margin-bottom: 0.35rem;">Rank #1 School Eco Club</span>
-                <h3 style="color: var(--color-navy);">Delhi Public School — Green Brigade</h3>
-                <p style="font-size: 0.85rem;">Student Body: 1,420 Active Recyclers &bull; Sustainability Score: 94/100</p>
-              </div>
-              <div class="badge badge-points" style="font-size: 1rem; padding: 0.5rem 1rem;">19,500 Total GP</div>
-            </div>
-
-            <div class="grid-cols-3" style="margin-bottom: 2rem;">
-              <div style="background: #F8FAFC; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);">
-                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Student Rewards</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted);">Students earn Green Karma points for bringing segregated paper and e-waste from home.</p>
-              </div>
-              <div style="background: #F8FAFC; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);">
-                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Classroom Battles</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted);">Grade 9A leads the inter-class recycling championship with 340 kg paper recycled.</p>
-              </div>
-              <div style="background: #F8FAFC; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);">
-                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Daily Bulk Van</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted);">Designated municipal electric van collects segregated cafeteria & dry waste daily at 3 PM.</p>
-              </div>
-            </div>
-
-            <button class="btn btn-primary" onclick="alert('Demo Request Sent: Delhi Public School Green Club consultation initiated.')">
-              Register New School / Club 🚀
-            </button>
-          </div>
-        `;
-
-      case 'colleges':
-        return `
-          <div class="glass-card" style="padding: 2.25rem; margin-bottom: 2rem;">
-            <div class="flex-between" style="margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
-              <div>
-                <span class="badge badge-green" style="margin-bottom: 0.35rem;">Higher Education Hub</span>
-                <h3 style="color: var(--color-navy);">IIT Bombay — Campus Eco Cell</h3>
-                <p style="font-size: 0.85rem;">Hostel Waste Decentralization & Tech-Driven Composting &bull; Score: 98/100</p>
-              </div>
-              <div class="badge badge-points" style="font-size: 1rem; padding: 0.5rem 1rem;">38,400 Total GP</div>
-            </div>
-
-            <div class="grid-cols-3" style="margin-bottom: 2rem;">
-              <div style="background: #F8FAFC; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);">
-                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Hostel Waste Auditing</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted);">Real-time weight sensors in 16 campus hostel messes tracking organic diversion.</p>
-              </div>
-              <div style="background: #F8FAFC; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);">
-                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Student Innovation Grants</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted);">Green Karma grants funded 3 student research prototypes on plastic pyrolysis.</p>
-              </div>
-              <div style="background: #F8FAFC; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);">
-                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Event Waste Zero-Target</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted);">100% waste recovery during cultural festivals (Mood Indigo & Techfest).</p>
-              </div>
-            </div>
-
-            <button class="btn btn-primary" onclick="alert('Demo: College onboarding wizard initiated.')">
-              Partner With Your College 🎓
-            </button>
-          </div>
-        `;
-
-      case 'hospitals':
-        return `
-          <div class="glass-card" style="padding: 2.25rem; margin-bottom: 2rem; border-top: 4px solid #EF4444;">
-            <div class="flex-between" style="margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
-              <div>
-                <span class="badge" style="background: #FEE2E2; color: #991B1B; margin-bottom: 0.35rem;">Biomedical Compliance</span>
-                <h3 style="color: var(--color-navy);">Max Super Speciality Hospital Network</h3>
-                <p style="font-size: 0.85rem;">Color-Coded Bio-Hazard Barcode Tracking & CPCB Compliance</p>
-              </div>
-              <div class="badge badge-green">100% CPCB Compliant ✓</div>
-            </div>
-
-            <div class="grid-cols-3" style="margin-bottom: 2rem;">
-              <div style="background: #FEF2F2; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid #FECACA;">
-                <strong style="color: #991B1B; font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">🔴 Red / Yellow Bag Segregation</strong>
-                <p style="font-size: 0.8rem; color: #7F1D1D;">Strict tracking of anatomical, soiled, and chemical medical waste bags with unique QR tags.</p>
-              </div>
-              <div style="background: #F8FAFC; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);">
-                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Authorized Incineration</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted);">Dedicated GPS-monitored hazardous disposal vehicles with digital manifest sign-off.</p>
-              </div>
-              <div style="background: #F8FAFC; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);">
-                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Pollution Control Audit</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted);">Instant one-click automated regulatory compliance report for State Pollution Control Board.</p>
-              </div>
-            </div>
-
-            <button class="btn btn-primary" onclick="alert('Demo: Hospital Medical Waste onboarding requested.')">
-              Request Hospital Compliance Setup 🏥
-            </button>
-          </div>
-        `;
-
-      case 'offices':
-        return `
-          <div class="glass-card" style="padding: 2.25rem; margin-bottom: 2rem;">
-            <div class="flex-between" style="margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
-              <div>
-                <span class="badge badge-navy" style="margin-bottom: 0.35rem;">Corporate ESG Platform</span>
-                <h3 style="color: var(--color-navy);">Infosys Technology Park — ESG Hub</h3>
-                <p style="font-size: 0.85rem;">Corporate Scope 3 Waste Analytics & Employee Green Leaderboards</p>
-              </div>
-              <div class="badge badge-green">ESG Gold Certified ✓</div>
-            </div>
-
-            <div class="grid-cols-3" style="margin-bottom: 2rem;">
-              <div style="background: #F8FAFC; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);">
-                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Desk & Pantry Bins</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted);">Smart contactless dry paper & beverage can recycling stations on all 8 floors.</p>
-              </div>
-              <div style="background: #F8FAFC; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);">
-                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Corporate BRSR Reports</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted);">Direct SEBI-aligned Business Responsibility and Sustainability data export.</p>
-              </div>
-              <div style="background: #F8FAFC; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);">
-                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Employee Green Perks</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted);">Top eco-performing teams receive company-matched gift cards and public accolades.</p>
-              </div>
-            </div>
-
-            <button class="btn btn-primary" onclick="alert('Demo: Corporate ESG demo initiated.')">
-              Setup Corporate Waste Solution 🏢
-            </button>
-          </div>
-        `;
-
-      case 'societies':
-        return `
-          <div class="glass-card" style="padding: 2.25rem; margin-bottom: 2rem;">
-            <div class="flex-between" style="margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
-              <div>
-                <span class="badge badge-green" style="margin-bottom: 0.35rem;">Residential RWA Network</span>
-                <h3 style="color: var(--color-navy);">Greenwood Heights Residential Society</h3>
-                <p style="font-size: 0.85rem;">240 Families &bull; 100% Door-to-Door Wet Waste Composting</p>
-              </div>
-              <div class="badge badge-points">₹12,400 Society Corpus Saved</div>
-            </div>
-
-            <div class="grid-cols-3" style="margin-bottom: 2rem;">
-              <div style="background: #F8FAFC; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);">
-                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Wing Leaderboard</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted);">Wing A vs Wing B vs Wing C monthly segregation accuracy competition.</p>
-              </div>
-              <div style="background: #F8FAFC; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);">
-                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Municipal Tax Rebate</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted);">100% segregating societies receive a 5% municipal property tax rebate from BMC.</p>
-              </div>
-              <div style="background: #F8FAFC; padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--color-border);">
-                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Community Organic Garden</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted);">Onsite compost powers a community organic vegetable and rooftop garden.</p>
-              </div>
-            </div>
-
-            <button class="btn btn-primary" onclick="alert('Demo: Society onboarding initiated.')">
-              Register Your Housing Society 🏘️
-            </button>
-          </div>
-        `;
-    }
-  },
-
-  selectType(type) {
-    SoundFX.playClick();
-    this.selectedType = type;
-    this.render();
-  },
-
-  downloadCertificate() {
-    SoundFX.playPointsEarned();
-    Confetti.trigger(100);
-    document.getElementById('certificate-modal').classList.add('active');
-  }
-};
-
-window.InstitutionPortalView = InstitutionPortalView;
diff --git a/js/app.js b/js/app.js
new file mode 100644
index 0000000..7b4c843
--- /dev/null
+++ b/js/app.js
@@ -0,0 +1,244 @@
+/* ==========================================================================
+   CLEANCRED — FRONTEND ROUTER & APP CONTROLLER
+   Smart India Hackathon 2026 // Team GreenLegacy
+   Client-Side Architecture for Static GitHub Pages Deployment
+   ========================================================================== */
+
+import { State } from './state.js';
+import { Formatters } from './utils/formatters.js';
+import { Confetti } from './utils/confetti.js';
+import { SoundFX } from './utils/audio.js';
+
+// Component Views
+import { DashboardView } from './components/dashboard.js';
+import { ReportWasteView } from './components/reportWaste.js';
+import { AdminDashboardView } from './components/adminDashboard.js';
+import { RewardsWallet } from './components/rewardsWallet.js';
+import { LiveTrackingView } from './components/liveTracking.js';
+import { WorkerPortalView } from './components/workerPortal.js';
+import { LeaderboardView } from './components/leaderboard.js';
+import { ImpactDashboardView } from './components/impactDashboard.js';
+import { ProfileView } from './components/profile.js';
+import { IllegalDumpingView } from './components/illegalDumping.js';
+import { InstitutionPortalView } from './components/institutionPortal.js';
+
+class AppRouterManager {
+  constructor() {
+    this.currentRoute = 'dashboard'; // Default to Citizen Home
+    this.init();
+  }
+
+  normalizeRoute(route) {
+    if (!route || route === 'citizen' || route === 'home' || route === 'dashboard') {
+      return 'dashboard';
+    }
+    const knownRoutes = [
+      'dashboard',
+      'report-waste',
+      'worker',
+      'admin',
+      'rewards',
+      'live-tracking',
+      'leaderboard',
+      'impact',
+      'profile',
+      'illegal-dumping',
+      'institutions'
+    ];
+    if (knownRoutes.includes(route)) {
+      return route;
+    }
+    return 'dashboard';
+  }
+
+  init() {
+    // Listen for state changes to re-render navbar and active view
+    State.subscribe(() => {
+      this.updateNavbarHeader();
+      this.renderCurrentView();
+    });
+
+    // Auto-detect initial route from hash or default to dashboard
+    const rawHash = window.location.hash.replace('#', '');
+    if (rawHash) {
+      this.navigate(rawHash);
+    } else {
+      this.navigate('dashboard');
+    }
+
+    // Listen to browser hash changes
+    window.addEventListener('hashchange', () => {
+      const newHash = window.location.hash.replace('#', '') || 'dashboard';
+      const norm = this.normalizeRoute(newHash);
+      if (norm !== this.currentRoute) {
+        this.navigate(newHash);
+      }
+    });
+  }
+
+  switchExperience(role) {
+    SoundFX.playClick();
+    if (role === 'worker') {
+      this.navigate('worker');
+    } else if (role === 'admin') {
+      this.navigate('admin');
+    } else {
+      this.navigate('dashboard');
+    }
+  }
+
+  navigate(route, params = {}) {
+    SoundFX.playClick();
+    const targetRoute = this.normalizeRoute(route);
+    this.currentRoute = targetRoute;
+    window.location.hash = route;
+
+    // Hide all view sections
+    document.querySelectorAll('.view-section').forEach(sec => {
+      sec.classList.remove('active');
+    });
+
+    // Show target section
+    const targetSection = document.getElementById(`view-${targetRoute}`);
+    if (targetSection) {
+      targetSection.classList.add('active');
+    }
+
+    // Update View Mode Switcher Active State (Desktop & Mobile Strip)
+    const roleButtons = [
+      { id: 'btn-mode-citizen', role: 'citizen' },
+      { id: 'btn-mode-worker', role: 'worker' },
+      { id: 'btn-mode-admin', role: 'admin' },
+      { id: 'btn-mode-citizen-m', role: 'citizen' },
+      { id: 'btn-mode-worker-m', role: 'worker' },
+      { id: 'btn-mode-admin-m', role: 'admin' }
+    ];
+
+    const activeRole = targetRoute === 'worker' ? 'worker' : targetRoute === 'admin' ? 'admin' : 'citizen';
+    roleButtons.forEach(btnInfo => {
+      const el = document.getElementById(btnInfo.id);
+      if (el) {
+        if (btnInfo.role === activeRole) {
+          el.classList.add('active');
+        } else {
+          el.classList.remove('active');
+        }
+      }
+    });
+
+    // Update Mobile Bottom Dock Active State
+    const dockButtons = [
+      { id: 'dock-btn-dashboard', routes: ['dashboard'] },
+      { id: 'dock-btn-report-waste', routes: ['report-waste'] },
+      { id: 'dock-btn-live-tracking', routes: ['live-tracking'] },
+      { id: 'dock-btn-rewards', routes: ['rewards'] },
+      { id: 'dock-btn-profile', routes: ['profile'] }
+    ];
+
+    dockButtons.forEach(dock => {
+      const el = document.getElementById(dock.id);
+      if (el) {
+        if (dock.routes.includes(targetRoute)) {
+          el.classList.add('active');
+        } else {
+          el.classList.remove('active');
+        }
+      }
+    });
+
+    const btnProfile = document.getElementById('btn-topbar-profile');
+    if (btnProfile) {
+      if (targetRoute === 'profile') {
+        btnProfile.classList.add('active');
+      } else {
+        btnProfile.classList.remove('active');
+      }
+    }
+
+    // Update Points display in topbar
+    this.updateNavbarHeader();
+
+    // Scroll to top
+    window.scrollTo({ top: 0, behavior: 'auto' });
+
+    // Render Target View Component
+    this.renderCurrentView(params);
+
+    // Re-create icons if Lucide is loaded
+    if (window.lucide) {
+      window.lucide.createIcons();
+    }
+  }
+
+  renderCurrentView(params = {}) {
+    switch (this.currentRoute) {
+      case 'dashboard':
+        DashboardView.render(params);
+        break;
+      case 'report-waste':
+        if (typeof ReportWasteView.startNewReport === 'function') {
+          ReportWasteView.startNewReport(params);
+        } else {
+          ReportWasteView.render(params);
+        }
+        break;
+      case 'worker':
+        WorkerPortalView.render();
+        break;
+      case 'admin':
+        AdminDashboardView.render();
+        break;
+      case 'rewards':
+        RewardsWallet.render();
+        break;
+      case 'live-tracking':
+        LiveTrackingView.render();
+        break;
+      case 'leaderboard':
+        LeaderboardView.render();
+        break;
+      case 'impact':
+        ImpactDashboardView.render();
+        break;
+      case 'profile':
+        ProfileView.render();
+        break;
+      case 'illegal-dumping':
+        IllegalDumpingView.render();
+        break;
+      case 'institutions':
+        InstitutionPortalView.render();
+        break;
+      default:
+        DashboardView.render(params);
+    }
+  }
+
+  showToast(message, type = 'info') {
+    let toast = document.getElementById('app-toast');
+    if (!toast) {
+      toast = document.createElement('div');
+      toast.id = 'app-toast';
+      toast.style.cssText = 'position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: #0F172A; color: #FFFFFF; padding: 0.65rem 1.25rem; border-radius: 9999px; font-size: 0.85rem; font-weight: 700; z-index: 9999; box-shadow: 0 4px 14px rgba(15,23,42,0.25); transition: opacity 0.3s ease; opacity: 0; pointer-events: none;';
+      document.body.appendChild(toast);
+    }
+    toast.innerText = message;
+    toast.style.opacity = '1';
+    setTimeout(() => {
+      if (toast) toast.style.opacity = '0';
+    }, 2800);
+  }
+
+  updateNavbarHeader() {
+    const user = State.state.user;
+    const topCounter = document.getElementById('user-points-counter-top');
+    if (topCounter && user) {
+      const pts = user.greenPoints || 1250;
+      topCounter.innerText = `${Formatters.formatNumber(pts)} GC`;
+    }
+  }
+}
+
+// Instantiate and expose globally
+window.AppRouter = new AppRouterManager();
+export { AppRouterManager };
diff --git a/js/components/adminDashboard.js b/js/components/adminDashboard.js
new file mode 100644
index 0000000..36566d0
--- /dev/null
+++ b/js/components/adminDashboard.js
@@ -0,0 +1,461 @@
+/* ==========================================================================
+   CLEANCRED — DESKTOP ADMIN & MUNICIPAL COMMAND CENTER
+   Smart India Hackathon 2026 // Team GreenLegacy
+   Real-Time Citywide Waste Diversion & Green Credit Telemetry
+   Tactile Neumorphism + Civic Technology
+   ========================================================================== */
+
+import { State } from '../state.js';
+import { Formatters } from '../utils/formatters.js';
+import { SoundFX } from '../utils/audio.js';
+
+export const AdminDashboardView = {
+  charts: {},
+  activeTab: 'overview',
+
+  render() {
+    const container = document.getElementById('view-admin');
+    if (!container) return;
+
+    const stats = State.state.cityStats;
+    const pickups = State.state.pickups;
+    const totalPointsMinted = (stats.greenPointsIssued / 1000000).toFixed(2); // e.g. 4.85M
+    const totalTons = Math.round(stats.totalWasteTons);
+
+    container.innerHTML = `
+      <div class="app-container animate-fade-in" style="max-width: 1280px; margin: 0 auto; padding-bottom: 5rem;">
+        
+        <!-- DESKTOP DUAL-COLUMN LAYOUT -->
+        <div class="desktop-dashboard-grid">
+          
+          <!-- LEFT SIDEBAR: MUNICIPAL COMMAND NAVIGATION -->
+          <aside class="admin-sidebar neu-card neu-card-raised">
+            
+            <!-- City Admin Profile Card -->
+            <div style="display: flex; align-items: center; gap: 0.85rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); margin-bottom: 1rem;">
+              <div style="width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-navy); color: #FFFFFF; display: flex; align-items: center; justify-content: center;">
+                <i data-lucide="building-2" class="lucide-icon-md"></i>
+              </div>
+              <div>
+                <div class="eyebrow" style="margin: 0; font-size: 0.68rem;">Operations Control</div>
+                <div style="font-size: 0.95rem; font-weight: 800; color: var(--color-navy);">Mumbai Central</div>
+                <div style="display: flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem;">
+                  <span class="status-dot green animate-pulse"></span>
+                  <span style="font-size: 0.72rem; font-weight: 700; color: var(--color-primary-dark);">42 Wards Active</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Sidebar Navigation Links -->
+            <ul class="admin-sidebar-nav">
+              <li>
+                <button class="sidebar-nav-link ${this.activeTab === 'overview' ? 'active' : ''}" onclick="window.AdminDashboardView.switchTab('overview')">
+                  <i data-lucide="bar-chart-3" class="lucide-icon-sm"></i>
+                  <span>Command Overview</span>
+                </button>
+              </li>
+              <li>
+                <button class="sidebar-nav-link ${this.activeTab === 'feed' ? 'active' : ''}" onclick="window.AdminDashboardView.switchTab('feed')">
+                  <i data-lucide="activity" class="lucide-icon-sm"></i>
+                  <span>Live Collection Feed</span>
+                </button>
+              </li>
+              <li>
+                <button class="sidebar-nav-link" onclick="window.AppRouter.navigate('worker')">
+                  <i data-lucide="truck" class="lucide-icon-sm"></i>
+                  <span>Worker Route Portal</span>
+                </button>
+              </li>
+              <li>
+                <button class="sidebar-nav-link" onclick="window.AppRouter.navigate('rewards')">
+                  <i data-lucide="gift" class="lucide-icon-sm"></i>
+                  <span>Green Credit Ledger</span>
+                </button>
+              </li>
+              <li>
+                <button class="sidebar-nav-link" onclick="window.AppRouter.navigate('illegal-dumping')">
+                  <i data-lucide="shield-alert" class="lucide-icon-sm"></i>
+                  <span>Illegal Dump Reports</span>
+                </button>
+              </li>
+              <li>
+                <button class="sidebar-nav-link" onclick="window.AppRouter.navigate('institutions')">
+                  <i data-lucide="school" class="lucide-icon-sm"></i>
+                  <span>Bulk Generators (Institutions)</span>
+                </button>
+              </li>
+            </ul>
+
+            <!-- Quick Action & Standards Badge -->
+            <div style="margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border);">
+              <button class="btn btn-secondary btn-sm btn-full" onclick="window.AdminDashboardView.triggerQuickExport()" style="margin-bottom: 0.75rem;">
+                <i data-lucide="download" class="lucide-icon-sm"></i>
+                <span>Export SBM Report (PDF)</span>
+              </button>
+              <div style="text-align: center; font-size: 0.7rem; color: var(--text-muted); font-weight: 600;">
+                CleanCred v3.0 &bull; MoHUA / SBM 2.0
+              </div>
+            </div>
+          </aside>
+
+          <!-- RIGHT SIDE: METRICS, CHARTS & LIVE INGESTION -->
+          <main style="display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; max-width: 100%;">
+            
+            <!-- Welcome Municipal Banner -->
+            <div class="neu-card neu-card-raised" style="border-radius: var(--radius-xl);">
+              <div class="flex-between" style="flex-wrap: wrap; gap: 1rem;">
+                <div>
+                  <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; flex-wrap: wrap;">
+                    <span class="badge badge-green">MUNICIPAL COMMAND ACTIVE</span>
+                    <span style="font-size: 0.75rem; color: var(--text-muted); font-weight: 600;">Telemetry Sync: Live (1s)</span>
+                  </div>
+                  <h2 class="admin-page-title" style="color: var(--color-navy); font-size: 1.5rem; font-weight: 800; margin: 0;">
+                    Municipal Waste Recovery
+                  </h2>
+                  <p class="admin-page-subtitle" style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem;">
+                    Green Telemetry &bull; SBM-U 2.0
+                  </p>
+                </div>
+
+                <div style="display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;">
+                  <button class="btn btn-secondary btn-sm" onclick="window.AdminDashboardView.render()">
+                    <i data-lucide="refresh-cw" class="lucide-icon-sm"></i>
+                    <span>Refresh Feed</span>
+                  </button>
+                  <button class="btn btn-primary btn-sm" onclick="window.AppRouter.switchExperience('citizen')">
+                    <i data-lucide="user" class="lucide-icon-sm"></i>
+                    <span>View Citizen App</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <!-- MOBILE COMMAND TOOLS SECTION (Shown on mobile <=768px, hidden on desktop via CSS) -->
+            <div class="command-tools-section neu-card neu-card-raised">
+              <h3 class="command-tools-title">Municipal Command Tools</h3>
+              <div class="command-tools-list">
+                <button class="command-tool-row" onclick="window.AppRouter.navigate('rewards')">
+                  <div class="command-tool-icon">
+                    <i data-lucide="gift" class="lucide-icon-md"></i>
+                  </div>
+                  <div class="command-tool-info">
+                    <strong class="command-tool-name">Green Credit Ledger</strong>
+                    <span class="command-tool-desc">EPR issuance &amp; transaction history</span>
+                  </div>
+                  <i data-lucide="chevron-right" class="command-tool-chevron"></i>
+                </button>
+                <button class="command-tool-row" onclick="window.AppRouter.navigate('illegal-dumping')">
+                  <div class="command-tool-icon">
+                    <i data-lucide="shield-alert" class="lucide-icon-md"></i>
+                  </div>
+                  <div class="command-tool-info">
+                    <strong class="command-tool-name">Illegal Dump Reports</strong>
+                    <span class="command-tool-desc">Citizen geo-flagged enforcement queue</span>
+                  </div>
+                  <i data-lucide="chevron-right" class="command-tool-chevron"></i>
+                </button>
+                <button class="command-tool-row" onclick="window.AppRouter.navigate('institutions')">
+                  <div class="command-tool-icon">
+                    <i data-lucide="school" class="lucide-icon-md"></i>
+                  </div>
+                  <div class="command-tool-info">
+                    <strong class="command-tool-name">Bulk Generators (Institutions)</strong>
+                    <span class="command-tool-desc">Colleges, tech parks &amp; hospital audits</span>
+                  </div>
+                  <i data-lucide="chevron-right" class="command-tool-chevron"></i>
+                </button>
+                <button class="command-tool-row" onclick="window.AdminDashboardView.triggerQuickExport()">
+                  <div class="command-tool-icon">
+                    <i data-lucide="download" class="lucide-icon-md"></i>
+                  </div>
+                  <div class="command-tool-info">
+                    <strong class="command-tool-name">Export SBM Report</strong>
+                    <span class="command-tool-desc">Download municipal MoHUA audit PDF</span>
+                  </div>
+                  <i data-lucide="chevron-right" class="command-tool-chevron"></i>
+                </button>
+              </div>
+            </div>
+
+            <!-- ROW 1: 4 TOP METRIC TILES -->
+            <div class="admin-metrics-row">
+              
+              <!-- Card 1: Total Credits Issued -->
+              <div class="admin-metric-card neu-card neu-card-raised">
+                <div class="flex-between" style="font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.35rem;">
+                  <span>TOTAL GREEN CREDITS</span>
+                  <i data-lucide="coins" class="lucide-icon-sm" style="color: var(--color-primary-dark);"></i>
+                </div>
+                <div style="font-family: var(--font-heading); font-size: 1.85rem; font-weight: 900; color: var(--color-navy);">
+                  ${totalPointsMinted}M <small style="font-size: 0.9rem; font-weight: 700; color: var(--color-primary);">GC</small>
+                </div>
+                <div style="font-size: 0.75rem; font-weight: 700; color: var(--color-primary-dark); margin-top: 0.25rem;">
+                  ↑ 24.8% issued this month
+                </div>
+              </div>
+
+              <!-- Card 2: Segregation Recovery Rate -->
+              <div class="admin-metric-card neu-card neu-card-raised">
+                <div class="flex-between" style="font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.35rem;">
+                  <span>RECOVERY RATE</span>
+                  <i data-lucide="activity" class="lucide-icon-sm" style="color: var(--color-primary);"></i>
+                </div>
+                <div style="font-family: var(--font-heading); font-size: 1.85rem; font-weight: 900; color: var(--color-primary);">
+                  84.4%
+                </div>
+                <div style="font-size: 0.75rem; font-weight: 700; color: var(--color-primary-dark); margin-top: 0.25rem;">
+                  Target 80% Exceeded!
+                </div>
+              </div>
+
+              <!-- Card 3: Verified Pickups -->
+              <div class="admin-metric-card neu-card neu-card-raised">
+                <div class="flex-between" style="font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.35rem;">
+                  <span>VERIFIED COLLECTIONS</span>
+                  <i data-lucide="check-circle-2" class="lucide-icon-sm" style="color: var(--waste-dry);"></i>
+                </div>
+                <div style="font-family: var(--font-heading); font-size: 1.85rem; font-weight: 900; color: var(--color-navy);">
+                  ${Formatters.formatNumber(stats.verifiedPickups)}
+                </div>
+                <div style="font-size: 0.75rem; font-weight: 700; color: var(--waste-dry); margin-top: 0.25rem;">
+                  99.2% Source Segregation Pure
+                </div>
+              </div>
+
+              <!-- Card 4: Landfill Waste Diverted -->
+              <div class="admin-metric-card neu-card neu-card-raised">
+                <div class="flex-between" style="font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.35rem;">
+                  <span>LANDFILL DIVERSION</span>
+                  <i data-lucide="truck" class="lucide-icon-sm" style="color: var(--color-amber);"></i>
+                </div>
+                <div style="font-family: var(--font-heading); font-size: 1.85rem; font-weight: 900; color: var(--color-navy);">
+                  ${Formatters.formatNumber(totalTons)} <small style="font-size: 0.9rem; font-weight: 700; color: var(--text-muted);">Tons</small>
+                </div>
+                <div style="font-size: 0.75rem; font-weight: 700; color: var(--color-amber); margin-top: 0.25rem;">
+                  42 Wards Reporting Daily
+                </div>
+              </div>
+
+            </div>
+
+            <!-- ROW 2: DUAL CHARTS (WEEKLY DIVERSION + SEGREGATION TAXONOMY) -->
+            <div class="hero-grid hero-grid-admin" style="gap: 1.25rem;">
+              
+              <!-- Chart 1: Weekly Trends Line Chart -->
+              <div class="neu-card neu-card-raised" style="border-radius: var(--radius-xl);">
+                <div class="flex-between" style="margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
+                  <div>
+                    <h3 style="font-size: 1.05rem; color: var(--color-navy); font-weight: 800; margin: 0;">Weekly Waste Diversion &amp; Credits</h3>
+                    <p style="font-size: 0.78rem; color: var(--text-muted); margin: 0.15rem 0 0 0;">Decentralized municipal ingestion across 42 wards</p>
+                  </div>
+                  <span class="badge badge-green">Past 7 Days</span>
+                </div>
+
+                <div style="height: 240px; position: relative; min-width: 0; max-width: 100%;">
+                  <canvas id="chart-admin-weekly"></canvas>
+                </div>
+              </div>
+
+              <!-- Chart 2: SIH Waste Taxonomy Doughnut Chart -->
+              <div class="neu-card neu-card-raised" style="border-radius: var(--radius-xl);">
+                <div class="flex-between" style="margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
+                  <div>
+                    <h3 style="font-size: 1.05rem; color: var(--color-navy); font-weight: 800; margin: 0;">Segregation Taxonomy</h3>
+                    <p style="font-size: 0.78rem; color: var(--text-muted); margin: 0.15rem 0 0 0;">Wet vs Dry vs Harmful</p>
+                  </div>
+                  <span class="badge badge-blue">SIH Standard</span>
+                </div>
+
+                <div style="height: 240px; position: relative; min-width: 0; max-width: 100%;">
+                  <canvas id="chart-admin-taxonomy"></canvas>
+                </div>
+              </div>
+
+            </div>
+
+            <!-- ROW 3: LIVE MUNICIPAL INGESTION FEED (REAL PICKUPS) -->
+            <div class="neu-card neu-card-raised" style="border-radius: var(--radius-xl);">
+              <div class="flex-between" style="margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.5rem;">
+                <div>
+                  <h3 style="font-size: 1.1rem; color: var(--color-navy); font-weight: 800; display: flex; align-items: center; gap: 0.5rem; margin: 0;">
+                    <i data-lucide="activity" class="lucide-icon-sm" style="color: var(--color-primary-dark);"></i>
+                    <span>Live Municipal Collection Ingestion Feed</span>
+                  </h3>
+                  <p style="font-size: 0.8rem; color: var(--text-muted); margin: 0.15rem 0 0 0;">
+                    Incoming verified pickups from citizen households and field worker inspection scales.
+                  </p>
+                </div>
+                <span class="badge badge-green">Real-time Stream ✓</span>
+              </div>
+
+              <!-- Ingestion Table -->
+              <div style="overflow-x: auto; max-width: 100%; min-width: 0;">
+                <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.82rem;">
+                  <thead>
+                    <tr style="border-bottom: 1.5px solid var(--color-border); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em;">
+                      <th style="padding: 0.75rem 0.5rem;">Request ID</th>
+                      <th style="padding: 0.75rem 0.5rem;">Category</th>
+                      <th style="padding: 0.75rem 0.5rem;">Material Sub-Type</th>
+                      <th style="padding: 0.75rem 0.5rem;">Citizen / Ward</th>
+                      <th style="padding: 0.75rem 0.5rem;">Weight</th>
+                      <th style="padding: 0.75rem 0.5rem;">Reward</th>
+                      <th style="padding: 0.75rem 0.5rem;">Status</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    ${pickups.map(p => `
+                      <tr style="border-bottom: 1px solid var(--color-border); transition: background 0.15s ease;">
+                        <td style="padding: 0.75rem 0.5rem; font-family: var(--font-mono); font-weight: 700; color: var(--color-navy);">
+                          ${p.id}
+                        </td>
+                        <td style="padding: 0.75rem 0.5rem;">
+                          <span class="badge ${p.category === 'wet' ? 'badge-green' : p.category === 'dry' ? 'badge-blue' : 'badge-red'}">
+                            ${p.categoryName || p.category.toUpperCase()}
+                          </span>
+                        </td>
+                        <td style="padding: 0.75rem 0.5rem; font-weight: 600; color: var(--color-navy);">
+                          ${p.subType || 'General segregated waste'}
+                        </td>
+                        <td style="padding: 0.75rem 0.5rem; color: var(--text-secondary);">
+                          ${p.address.split(',')[0]} (Ward 4B)
+                        </td>
+                        <td style="padding: 0.75rem 0.5rem; font-weight: 700; color: var(--color-navy);">
+                          ${p.quantityKg} KG
+                        </td>
+                        <td style="padding: 0.75rem 0.5rem; font-weight: 800; color: var(--color-primary-dark);">
+                          +${p.pointsReward} GC
+                        </td>
+                        <td style="padding: 0.75rem 0.5rem;">
+                          ${p.status === 'verified' ? `
+                            <span class="badge badge-green">Verified</span>
+                          ` : p.status === 'on_the_way' ? `
+                            <span class="badge badge-amber">En Route</span>
+                          ` : `
+                            <span class="badge badge-navy">Created</span>
+                          `}
+                        </td>
+                      </tr>
+                    `).join('')}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+          </main>
+
+        </div>
+
+      </div>
+    `;
+
+    setTimeout(() => {
+      this.initCharts();
+      if (window.lucide) window.lucide.createIcons();
+    }, 50);
+  },
+
+  switchTab(tab) {
+    SoundFX.playClick();
+    this.activeTab = tab;
+    this.render();
+  },
+
+  triggerQuickExport() {
+    SoundFX.playClick();
+    window.AppRouter.showToast('Generating Swachh Bharat Mission (Urban) compliance report...');
+    setTimeout(() => {
+      window.print();
+    }, 600);
+  },
+
+  initCharts() {
+    if (!window.Chart) return;
+
+    // Destroy existing chart instances
+    if (this.charts.weekly) this.charts.weekly.destroy();
+    if (this.charts.taxonomy) this.charts.taxonomy.destroy();
+
+    // Chart 1: Weekly Trends
+    const ctxWeekly = document.getElementById('chart-admin-weekly');
+    if (ctxWeekly) {
+      this.charts.weekly = new window.Chart(ctxWeekly, {
+        type: 'line',
+        data: {
+          labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          datasets: [
+            {
+              label: 'Waste Diverted (Tons)',
+              data: [38, 42, 45, 51, 48, 59, 64],
+              borderColor: '#16A34A',
+              backgroundColor: 'rgba(22, 163, 74, 0.08)',
+              fill: true,
+              tension: 0.35,
+              borderWidth: 2.5
+            },
+            {
+              label: 'Green Credits Minted (x1000)',
+              data: [28, 31, 35, 39, 37, 46, 52],
+              borderColor: '#2563EB',
+              backgroundColor: 'transparent',
+              borderDash: [5, 5],
+              tension: 0.35,
+              borderWidth: 2
+            }
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              position: 'top',
+              labels: { boxWidth: 12, font: { family: 'Plus Jakarta Sans', size: 11, weight: '600' } }
+            }
+          },
+          scales: {
+            y: {
+              grid: { color: 'rgba(184, 196, 212, 0.25)' },
+              ticks: { font: { family: 'Plus Jakarta Sans', size: 10 } }
+            },
+            x: {
+              grid: { display: false },
+              ticks: { font: { family: 'Plus Jakarta Sans', size: 10 } }
+            }
+          }
+        }
+      });
+    }
+
+    // Chart 2: SIH Waste Taxonomy Doughnut
+    const ctxTaxonomy = document.getElementById('chart-admin-taxonomy');
+    if (ctxTaxonomy) {
+      this.charts.taxonomy = new window.Chart(ctxTaxonomy, {
+        type: 'doughnut',
+        data: {
+          labels: ['Wet Waste (Organic)', 'Dry Waste (Recyclable)', 'Harmful (Hazardous)'],
+          datasets: [
+            {
+              data: [52, 36, 12],
+              backgroundColor: ['#16A34A', '#2563EB', '#DC2626'],
+              borderWidth: 3,
+              borderColor: '#FFFFFF'
+            }
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          cutout: '72%',
+          plugins: {
+            legend: {
+              position: 'bottom',
+              labels: { boxWidth: 10, font: { family: 'Plus Jakarta Sans', size: 10.5, weight: '600' } }
+            }
+          }
+        }
+      });
+    }
+  }
+};
+
+window.AdminDashboardView = AdminDashboardView;
diff --git a/js/components/dashboard.js b/js/components/dashboard.js
new file mode 100644
index 0000000..cb3a19f
--- /dev/null
+++ b/js/components/dashboard.js
@@ -0,0 +1,494 @@
+/* ==========================================================================
+   CLEANCRED — CITIZEN MOBILE HOME VIEW
+   Smart India Hackathon 2026 // Team GreenLegacy
+   Tactile Neumorphism + Civic Technology
+   Strict Workflow: Report → Verify → Collect → Record → Earn
+   ========================================================================== */
+
+import { State } from '../state.js';
+import { Formatters } from '../utils/formatters.js';
+import { SoundFX } from '../utils/audio.js';
+import { Confetti } from '../utils/confetti.js';
+
+export const DashboardView = {
+  isScanning: false,
+
+  render() {
+    const container = document.getElementById('view-dashboard');
+    if (!container) return;
+
+    const user = State.state.user;
+    const activePickups = State.state.pickups.filter(p => ['on_the_way', 'assigned', 'created'].includes(p.status));
+    const balance = user.greenPoints || 1250;
+    const inrValue = Formatters.gpToInr(balance);
+    const nextTierGc = 1500;
+    const progressPct = Math.min(100, Math.round((balance / nextTierGc) * 100));
+
+    container.innerHTML = `
+      <div class="app-container citizen-dashboard animate-fade-in" style="padding-bottom: 5.5rem;">
+        
+        <!-- TOP GREETING & STREAK BANNER -->
+        <div class="flex-between dashboard-heading" style="margin-bottom: 1.25rem; align-items: flex-start;">
+          <div>
+            <div class="eyebrow" style="color: var(--color-primary-dark); font-weight: 800; display: flex; align-items: center; gap: 0.35rem;">
+              <i data-lucide="map-pin" class="lucide-icon-sm"></i>
+              <span>Ward 4B &bull; Bandra West</span>
+            </div>
+            <h1 style="color: var(--color-navy); font-size: clamp(1.75rem, 3.5vw, 2.4rem); margin: 0.2rem 0;">
+              Good morning, ${user.name.split(' ')[0]}
+            </h1>
+            <p class="hide-on-mobile" style="font-size: 0.9rem; color: var(--text-muted); margin-top: 0.25rem;">
+              ${activePickups.length > 0 ? 'Your municipal collection is in progress. Hand over waste upon arrival to release credits.' : 'Keep your household waste segregated and earn verified Green Credits.'}
+            </p>
+          </div>
+
+          <div style="display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;">
+            <button class="btn btn-secondary btn-sm hide-on-mobile" onclick="window.AppRouter.navigate('profile')" title="View Citizen Profile & Settings" style="padding: 0.45rem 0.85rem;">
+              <i data-lucide="user" class="lucide-icon-sm"></i>
+              <span>${user.name.split(' ')[0]}</span>
+            </button>
+            <div class="badge badge-amber" style="padding: 0.45rem 0.85rem; font-size: 0.82rem; border-radius: var(--radius-full); display: flex; align-items: center; gap: 0.35rem;">
+              <i data-lucide="flame" class="lucide-icon-sm"></i>
+              <span>${user.greenStreakDays} Day Streak</span>
+            </div>
+            <button class="btn btn-primary hide-on-mobile" onclick="window.AppRouter.navigate('report-waste')" style="font-size: 0.9rem; padding: 0.65rem 1.25rem;">
+              <i data-lucide="plus" class="lucide-icon-sm"></i>
+              <span>Report Waste</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- 1. GREEN CREDITS HERO BALANCE CARD -->
+        <div class="hero-points-card neu-card neu-card-raised">
+          <div class="flex-between">
+            <span style="font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);">
+              Available Green Credits
+            </span>
+            <span class="badge badge-green hide-on-mobile" style="display: flex; align-items: center; gap: 0.3rem;">
+              <i data-lucide="shield-check" class="lucide-icon-sm"></i>
+              <span>Level 4 Eco Citizen</span>
+            </span>
+          </div>
+
+          <div class="points-oversized-value">
+            <span id="citizen-points-balance">${Formatters.formatNumber(balance)}</span>
+            <span style="font-size: 1.5rem; font-weight: 800; color: var(--color-primary);">GC</span>
+          </div>
+
+          <div style="margin-top: 0.25rem;">
+            <div class="flex-between" style="font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.35rem;">
+              <span>Next reward: ${Formatters.formatNumber(nextTierGc)} GC</span>
+              <span class="hide-on-mobile" style="color: var(--color-primary-dark); font-weight: 800;">${progressPct}% Reached</span>
+            </div>
+            <div class="progress-track neu-card-inset" role="progressbar" aria-valuenow="${progressPct}" aria-valuemin="0" aria-valuemax="100">
+              <div class="progress-fill" style="width: ${progressPct}%"></div>
+            </div>
+          </div>
+
+          <div class="flex-between" style="margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--color-border); font-size: 0.85rem; font-weight: 700;">
+            <span style="color: var(--text-muted);">
+              <span class="hide-on-mobile">Estimated INR Value: </span><strong style="color: var(--color-navy);">₹${inrValue} value</strong>
+            </span>
+            <button class="btn btn-secondary btn-sm" onclick="window.AppRouter.navigate('rewards')" style="color: var(--color-primary-dark); font-weight: 800;">
+              <span>Redeem</span>
+              <i data-lucide="arrow-right" class="lucide-icon-sm"></i>
+            </button>
+          </div>
+        </div>
+
+        <!-- PRIMARY REPORT WASTE ACTION (MOBILE FULL-WIDTH CTA) -->
+        <div class="mobile-primary-cta-container">
+          <button class="btn btn-primary btn-mobile-report-waste" onclick="window.AppRouter.navigate('report-waste')">
+            <i data-lucide="plus-circle" class="lucide-icon-md"></i>
+            <span>+ Report Waste</span>
+          </button>
+        </div>
+
+        <!-- 2. ACTIVE PICKUP CARDS (MULTI-REPORT COMPACT STACKING) -->
+        ${activePickups.length > 0 ? `
+          <div style="margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 1rem;">
+            ${activePickups.map(p => `
+              <div class="pickup-status-card neu-card neu-card-raised">
+                <div class="pickup-status-info">
+                  <div class="flex-between" style="margin-bottom: 0.4rem;">
+                    <span class="badge ${p.category === 'wet' ? 'badge-green' : p.category === 'dry' ? 'badge-blue' : 'badge-red'}">
+                      ${p.status === 'on_the_way' ? 'COLLECTION IN PROGRESS' : p.status === 'assigned' ? 'WORKER ASSIGNED' : 'COLLECTION STAGED'}
+                    </span>
+                    <span style="font-size: 0.78rem; font-weight: 700; color: var(--color-primary-dark); display: flex; align-items: center; gap: 0.3rem;">
+                      <i data-lucide="clock" class="lucide-icon-sm"></i>
+                      <span>ETA ${p.etaMinutes || 18} mins</span>
+                    </span>
+                  </div>
+                  <strong style="font-size: 1.15rem; color: var(--color-navy); display: block;">
+                    Request #${p.id} &bull; ${p.subType || p.categoryName}
+                  </strong>
+                  <p style="font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.25rem;">
+                    Assigned Worker: <strong>${p.workerName || 'Ramesh Kumar'}</strong> (${p.vehicleNo || 'Electric Van MH-02-GK-4091'})
+                  </p>
+                </div>
+
+                <div class="pickup-status-actions">
+                  <button class="btn btn-primary" onclick="window.AppRouter.navigate('live-tracking')">
+                    <i data-lucide="navigation" class="lucide-icon-sm"></i>
+                    <span>Track Live Pickup</span>
+                  </button>
+                  <div class="pickup-otp-pill neu-card-inset">
+                    <span class="pickup-otp-label">Handover OTP</span>
+                    <span class="pickup-otp-val">${p.otp || '8492'}</span>
+                  </div>
+                </div>
+              </div>
+            `).join('')}
+          </div>
+        ` : `
+          <div class="pickup-status-card neu-card neu-card-raised" style="border-left-color: var(--color-border-strong);">
+            <div class="pickup-status-info">
+              <div class="eyebrow" style="color: var(--text-muted);">Ready For Collection</div>
+              <strong style="font-size: 1.1rem; color: var(--color-navy);">No Active Pickup In Progress</strong>
+              <p style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem;">
+                Segregate your kitchen organic waste, clean recyclables, or hazardous batteries and schedule a verified pickup.
+              </p>
+            </div>
+            <button class="btn btn-primary" onclick="window.AppRouter.navigate('report-waste')">
+              <i data-lucide="plus" class="lucide-icon-sm"></i>
+              <span>Report Waste Now</span>
+            </button>
+          </div>
+        `}
+
+        <!-- 3. HERO FEATURE: TACTILE CIRCULAR "SCAN WASTE PRE-CHECK" BUTTON -->
+        <div class="hero-scan-circle-container">
+          <button class="btn-hero-scan-circular hero-scan-pulse" id="btn-hero-scan" onclick="window.DashboardView.startMockScan()" aria-label="Scan Waste for AI Pre-Check">
+            <div class="scan-icon-bubble">
+              <i data-lucide="camera" class="lucide-icon-lg"></i>
+            </div>
+            <span class="scan-btn-label">AI PRE-CHECK</span>
+            <span class="scan-btn-sublabel">SCAN &amp; STAGE PICKUP</span>
+          </button>
+          <div class="scan-supporting-note">
+            <span class="desktop-note">Computer-vision purity pre-check &bull; Credits awarded on physical worker verification</span>
+            <span class="mobile-note">Credits are awarded after worker verification.</span>
+          </div>
+        </div>
+
+        <!-- 4. VERIFIED CITIZEN IMPACT METRICS -->
+        <div class="dashboard-metrics-grid">
+          <div class="metric-card neu-card neu-card-flat">
+            <span>Landfill Waste Diverted</span>
+            <strong>
+              ${user.lifetimeWasteKg} <small style="font-size: 0.95rem; font-weight: 700; color: var(--text-muted);">kg</small>
+            </strong>
+            <em>${user.pickupsCompleted} verified collections</em>
+          </div>
+          <div class="metric-card neu-card neu-card-flat">
+            <span>Emissions Avoided</span>
+            <strong>
+              ${user.co2SavedKg} <small style="font-size: 0.95rem; font-weight: 700; color: var(--text-muted);">kg CO₂</small>
+            </strong>
+            <em>Equiv. to ${user.treesEquivalent} urban trees</em>
+          </div>
+          <div class="metric-card neu-card neu-card-flat">
+            <span>Groundwater Protected</span>
+            <strong style="color: #2563EB;">
+              ${user.waterSavedLitres || 480} <small style="font-size: 0.95rem; font-weight: 700; color: var(--text-muted);">L</small>
+            </strong>
+            <em style="color: #2563EB;">Safe hazardous extraction</em>
+          </div>
+        </div>
+
+        <!-- 4. WASTE CATEGORY QUICK LAUNCH CARDS (SIH TAXONOMY) -->
+        <div style="margin-bottom: 2rem;">
+          <div class="flex-between" style="margin-bottom: 0.75rem;">
+            <div>
+              <h3 style="color: var(--color-navy); font-size: 1.15rem; font-weight: 800; margin: 0;">Segregated Collection Categories</h3>
+              <p style="font-size: 0.82rem; color: var(--text-muted); margin: 0.15rem 0 0 0;">Select your waste category to initiate verified municipal collection.</p>
+            </div>
+            <span class="badge badge-green">SIH 2026 Taxonomy</span>
+          </div>
+
+          <div class="waste-options-grid">
+            <!-- Wet Waste -->
+            <div class="waste-card-option wet neu-card-flat" onclick="window.AppRouter.navigate('report-waste', { category: 'wet' })">
+              <div class="flex-between">
+                <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--waste-wet-bg); color: var(--waste-wet); display: flex; align-items: center; justify-content: center;">
+                  <i data-lucide="apple" class="lucide-icon-md"></i>
+                </div>
+                <span class="badge badge-green">+10 GC</span>
+              </div>
+              <strong style="font-size: 1.05rem; color: var(--color-navy); margin-top: 0.5rem; display: block;">Wet Waste</strong>
+              <p style="font-size: 0.8rem; color: var(--text-muted); margin: 0.25rem 0;">Kitchen scraps, vegetable peels, food leftovers, organic florals.</p>
+              <div style="font-size: 0.75rem; font-weight: 700; color: var(--waste-wet); margin-top: 0.25rem;">
+                Daily Morning Route &bull; Biomethanation Bound
+              </div>
+            </div>
+
+            <!-- Dry Waste -->
+            <div class="waste-card-option dry neu-card-flat" onclick="window.AppRouter.navigate('report-waste', { category: 'dry' })">
+              <div class="flex-between">
+                <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--waste-dry-bg); color: var(--waste-dry); display: flex; align-items: center; justify-content: center;">
+                  <i data-lucide="package" class="lucide-icon-md"></i>
+                </div>
+                <span class="badge badge-blue">+7 GC</span>
+              </div>
+              <strong style="font-size: 1.05rem; color: var(--color-navy); margin-top: 0.5rem; display: block;">Dry Waste</strong>
+              <p style="font-size: 0.8rem; color: var(--text-muted); margin: 0.25rem 0;">Clean cardboard cartons, PET bottles, tins, dry paper, textiles.</p>
+              <div style="font-size: 0.75rem; font-weight: 700; color: var(--waste-dry); margin-top: 0.25rem;">
+                MRF Sorting &bull; Material Recovery Center
+              </div>
+            </div>
+
+            <!-- Harmful Waste -->
+            <div class="waste-card-option harmful neu-card-flat" onclick="window.AppRouter.navigate('report-waste', { category: 'harmful' })">
+              <div class="flex-between">
+                <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--waste-harmful-bg); color: var(--waste-harmful); display: flex; align-items: center; justify-content: center;">
+                  <i data-lucide="battery-charging" class="lucide-icon-md"></i>
+                </div>
+                <span class="badge badge-red">+5 GC</span>
+              </div>
+              <strong style="font-size: 1.05rem; color: var(--color-navy); margin-top: 0.5rem; display: block;">Harmful Waste</strong>
+              <p style="font-size: 0.8rem; color: var(--text-muted); margin: 0.25rem 0;">Lithium batteries, electronics, circuit boards, CFLs, medicines.</p>
+              <div style="font-size: 0.75rem; font-weight: 700; color: var(--waste-harmful); margin-top: 0.25rem;">
+                Hazardous Protocol &bull; CPCB Authorized
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 5. RECENT ACTIVITY & COLLECTION LEDGER -->
+        <div class="neu-card neu-card-raised" style="padding: 1.75rem; margin-bottom: 2rem; border-radius: var(--radius-xl);">
+          <div class="flex-between" style="margin-bottom: 1.25rem;">
+            <div>
+              <h3 style="color: var(--color-navy); font-size: 1.15rem; font-weight: 800; margin: 0;">Recent Collection Ledger</h3>
+              <p style="font-size: 0.82rem; color: var(--text-muted); margin: 0.15rem 0 0 0;">Trace your verified submissions and audit status.</p>
+            </div>
+            <button class="btn btn-secondary btn-sm" onclick="window.AppRouter.navigate('live-tracking')">
+              <i data-lucide="navigation" class="lucide-icon-sm"></i>
+              <span>Live Map</span>
+            </button>
+          </div>
+
+          <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+            ${State.state.pickups.slice(0, 4).map(p => `
+              <div class="neu-card-flat" style="display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.25rem; border-radius: var(--radius-md);">
+                <div style="display: flex; align-items: center; gap: 0.85rem;">
+                  <div style="width: 38px; height: 38px; border-radius: var(--radius-md); background: ${p.category === 'wet' ? 'var(--waste-wet-bg)' : p.category === 'dry' ? 'var(--waste-dry-bg)' : 'var(--waste-harmful-bg)'}; color: ${p.category === 'wet' ? 'var(--waste-wet)' : p.category === 'dry' ? 'var(--waste-dry)' : 'var(--waste-harmful)'}; display: flex; align-items: center; justify-content: center;">
+                    <i data-lucide="${p.category === 'wet' ? 'apple' : p.category === 'dry' ? 'package' : 'battery-charging'}" class="lucide-icon-sm"></i>
+                  </div>
+                  <div>
+                    <strong style="color: var(--color-navy); font-size: 0.95rem;">${p.subType || p.categoryName}</strong>
+                    <div style="font-size: 0.78rem; color: var(--text-muted);">
+                      Ref: ${p.id} &bull; ${Formatters.formatRelativeTime(p.createdAt)} &bull; ${p.quantityKg} kg
+                    </div>
+                  </div>
+                </div>
+
+                <div>
+                  ${p.status === 'verified' ? `
+                    <span class="badge badge-green">+${p.pointsCredited || p.pointsReward} GC Verified</span>
+                  ` : p.status === 'on_the_way' ? `
+                    <span class="badge badge-amber">Collection En Route</span>
+                  ` : `
+                    <span class="badge badge-navy">Awaiting Handover</span>
+                  `}
+                </div>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+
+        <!-- 6. QUICK CIVIC LINKS -->
+        <div class="dashboard-quick-links-grid">
+          <div class="neu-card neu-card-raised" style="padding: 1.25rem; border-radius: var(--radius-lg); cursor: pointer;" onclick="window.AppRouter.navigate('leaderboard')">
+            <div style="width: 38px; height: 38px; border-radius: 50%; background: #FEF3C7; color: #B45309; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
+              <i data-lucide="trophy" class="lucide-icon-sm"></i>
+            </div>
+            <strong style="color: var(--color-navy); font-size: 0.95rem; display: block;">Ward Leaderboard</strong>
+            <p style="font-size: 0.78rem; color: var(--text-muted); margin: 0.25rem 0 0 0;">Rank #12 in Bandra West &bull; View standings →</p>
+          </div>
+          <div class="neu-card neu-card-raised" style="padding: 1.25rem; border-radius: var(--radius-lg); cursor: pointer;" onclick="window.AppRouter.navigate('impact')">
+            <div style="width: 38px; height: 38px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
+              <i data-lucide="bar-chart-3" class="lucide-icon-sm"></i>
+            </div>
+            <strong style="color: var(--color-navy); font-size: 0.95rem; display: block;">Impact Analytics</strong>
+            <p style="font-size: 0.78rem; color: var(--text-muted); margin: 0.25rem 0 0 0;">Download official carbon offset certificate →</p>
+          </div>
+          <div class="neu-card neu-card-raised" style="padding: 1.25rem; border-radius: var(--radius-lg); cursor: pointer;" onclick="window.AppRouter.navigate('illegal-dumping')">
+            <div style="width: 38px; height: 38px; border-radius: 50%; background: #FEE2E2; color: #DC2626; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
+              <i data-lucide="shield-alert" class="lucide-icon-sm"></i>
+            </div>
+            <strong style="color: var(--color-navy); font-size: 0.95rem; display: block;">Report Dump Site</strong>
+            <p style="font-size: 0.78rem; color: var(--text-muted); margin: 0.25rem 0 0 0;">Flag civic black spots and earn +20 GC →</p>
+          </div>
+          <div class="neu-card neu-card-raised" style="padding: 1.25rem; border-radius: var(--radius-lg); cursor: pointer;" onclick="window.AppRouter.navigate('institutions')">
+            <div style="width: 38px; height: 38px; border-radius: 50%; background: #E0E7FF; color: #4338CA; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
+              <i data-lucide="school" class="lucide-icon-sm"></i>
+            </div>
+            <strong style="color: var(--color-navy); font-size: 0.95rem; display: block;">Institutions Portal</strong>
+            <p style="font-size: 0.78rem; color: var(--text-muted); margin: 0.25rem 0 0 0;">Bulk generators & EPR accreditation →</p>
+          </div>
+        </div>
+
+      </div>
+    `;
+
+    if (window.lucide) window.lucide.createIcons();
+  },
+
+  // ==========================================================================
+  // INTERACTIVE AI SEGREGATION PRE-CHECK (Strict Workflow: Report -> Verify)
+  // No instant points awarded; creates a verified staged pickup request
+  // ==========================================================================
+  startMockScan() {
+    if (this.isScanning) return;
+    this.isScanning = true;
+    SoundFX.playClick();
+
+    const modalContainer = document.getElementById('modal-scan-container');
+    if (!modalContainer) return;
+
+    modalContainer.style.display = 'flex';
+    modalContainer.className = 'modal-overlay-backdrop';
+
+    // Step 1: simulated camera viewfinder with laser sweep
+    modalContainer.innerHTML = `
+      <div class="scan-viewfinder-modal neu-card neu-card-raised animate-pop-in" role="dialog" aria-label="AI Waste Scanner">
+        <div class="flex-between" style="margin-bottom: 0.85rem;">
+          <div style="display: flex; align-items: center; gap: 0.5rem;">
+            <span class="w-3 h-3 rounded-full animate-pulse" style="width: 10px; height: 10px; border-radius: 50%; background: #EF4444; display: inline-block;"></span>
+            <strong style="font-family: var(--font-heading); font-size: 0.9rem; color: var(--color-navy);">AI Waste Segregation Pre-Check</strong>
+          </div>
+          <button class="modal-close-btn" style="position: static;" onclick="window.DashboardView.closeModal()" aria-label="Close scanner">
+            <i data-lucide="x" class="lucide-icon-sm"></i>
+          </button>
+        </div>
+
+        <div class="camera-preview-box">
+          <div class="scan-laser-beam"></div>
+          <div style="display: flex; justify-content: space-between; font-size: 0.7rem; font-weight: 800; color: #34D399;">
+            <span>HD VIDEO STREAM</span>
+            <span>60 FPS &bull; COMPUTER VISION</span>
+          </div>
+          <div style="border: 2px dashed rgba(52, 211, 153, 0.8); border-radius: var(--radius-md); padding: 1.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: auto 0;">
+            <div style="width: 52px; height: 52px; border-radius: 50%; background: rgba(16, 185, 129, 0.2); color: #34D399; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem;">
+              <i data-lucide="apple" class="lucide-icon-lg"></i>
+            </div>
+            <span style="background: #10B981; color: #FFFFFF; font-family: var(--font-heading); font-weight: 900; font-size: 0.7rem; padding: 0.3rem 0.8rem; border-radius: 9999px;">
+              POINT AT SEGREGATED BAG
+            </span>
+          </div>
+          <div style="display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 700; color: #CBD5E1;">
+            <span id="scan-status-text">Analyzing material density, moisture &amp; purity...</span>
+            <span style="display: inline-flex; gap: 4px;">
+              <span class="bounce-dot-1" style="width: 7px; height: 7px; border-radius: 50%; background: #34D399; display: inline-block;"></span>
+              <span class="bounce-dot-2" style="width: 7px; height: 7px; border-radius: 50%; background: #34D399; display: inline-block;"></span>
+              <span class="bounce-dot-3" style="width: 7px; height: 7px; border-radius: 50%; background: #34D399; display: inline-block;"></span>
+            </span>
+          </div>
+        </div>
+
+        <div style="text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); margin-top: 0.75rem;">
+          Keep the segregated bag centered inside the targeting frame
+        </div>
+      </div>
+    `;
+
+    if (window.lucide) window.lucide.createIcons();
+
+    // Step 2: AI analysis progress
+    setTimeout(() => {
+      const statusText = document.getElementById('scan-status-text');
+      if (statusText) {
+        statusText.innerHTML = '✨ Match verified: <strong>Wet Waste (Organic)</strong> — 98.4% purity score';
+        statusText.style.color = '#34D399';
+      }
+    }, 1100);
+
+    // Step 3: Staged pickup creation (NO instant credits, creates real request)
+    setTimeout(() => {
+      this.triggerStagedPickupCreation();
+    }, 2200);
+
+    modalContainer.onclick = (e) => {
+      if (e.target === modalContainer) this.closeModal();
+    };
+    if (this._escHandler) document.removeEventListener('keydown', this._escHandler);
+    this._escHandler = (e) => {
+      if (e.key === 'Escape') this.closeModal();
+    };
+    document.addEventListener('keydown', this._escHandler);
+  },
+
+  triggerStagedPickupCreation() {
+    SoundFX.playPointsEarned();
+    Confetti.trigger(60);
+
+    // Create traceable waste request in State without instant point awarding
+    const newReq = State.createWasteRequest({
+      category: 'wet',
+      subType: 'AI-Scanned Organic Kitchen Waste',
+      quantity: 3.5,
+      address: State.state.user.address,
+      notes: 'AI Pre-Check 98.4% Pure',
+      photoUrl: 'https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?w=600&q=80'
+    });
+
+    const modalContainer = document.getElementById('modal-scan-container');
+    if (!modalContainer) return;
+
+    modalContainer.innerHTML = `
+      <div class="celebration-reward-card neu-card neu-card-raised animate-pop-in" role="dialog" aria-label="Scan pre-check confirmation" style="max-width: 380px;">
+        <div style="width: 58px; height: 58px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto; box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);">
+          <i data-lucide="check-circle-2" class="lucide-icon-lg"></i>
+        </div>
+        
+        <div class="badge badge-green" style="margin-bottom: 0.4rem;">AI Purity Pre-Check Passed (98.4%)</div>
+        <h3 style="font-size: 1.35rem; font-weight: 900; color: var(--color-navy); margin: 0;">Pickup Staged</h3>
+        <p style="font-size: 0.82rem; color: var(--text-muted); margin: 0.3rem 0 0.85rem 0; line-height: 1.35;">
+          Request <strong>#${newReq.id}</strong> scheduled. Hand over bag to collector to disburse <strong>+10 Green Credits</strong>.
+        </p>
+
+        <!-- Handover OTP Pill -->
+        <div class="neu-card-inset" style="margin: 0 auto 1rem auto; padding: 0.75rem 1rem; border-radius: var(--radius-md); text-align: center;">
+          <div style="font-size: 0.7rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em;">
+            Handover OTP for Collector
+          </div>
+          <div style="font-family: var(--font-heading); font-size: 2rem; font-weight: 900; letter-spacing: 0.15em; color: var(--color-primary-dark); margin: 0.15rem 0;">
+            ${newReq.otp}
+          </div>
+          <div style="font-size: 0.72rem; color: var(--text-muted);">
+            Worker: <strong>Ramesh Kumar</strong> &bull; ETA: ~18 mins
+          </div>
+        </div>
+
+        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+          <button class="btn btn-primary btn-block" onclick="window.DashboardView.closeModal(); window.AppRouter.navigate('live-tracking');">
+            <i data-lucide="navigation" class="lucide-icon-sm"></i>
+            <span>Track Pickup On Live Map</span>
+          </button>
+          <button class="btn btn-secondary btn-block" onclick="window.DashboardView.closeModal()">
+            <span>Done</span>
+          </button>
+        </div>
+      </div>
+    `;
+
+    if (window.lucide) window.lucide.createIcons();
+  },
+
+  closeModal() {
+    this.isScanning = false;
+    const modalContainer = document.getElementById('modal-scan-container');
+    if (modalContainer) {
+      modalContainer.style.display = 'none';
+      modalContainer.innerHTML = '';
+      modalContainer.onclick = null;
+    }
+    if (this._escHandler) {
+      document.removeEventListener('keydown', this._escHandler);
+      this._escHandler = null;
+    }
+    this.render();
+  }
+};
+
+window.DashboardView = DashboardView;
diff --git a/js/components/illegalDumping.js b/js/components/illegalDumping.js
new file mode 100644
index 0000000..1e4c107
--- /dev/null
+++ b/js/components/illegalDumping.js
@@ -0,0 +1,196 @@
+/* ==========================================================================
+   CLEANCRED — ILLEGAL DUMPING REPORTING & CIVIC ACTION
+   Tactile Neumorphism + Civic Technology
+   Citizen-powered Geo-Tagged Hotspot Spotting (+20 GC on Verification)
+   ========================================================================== */
+
+import { State } from '../state.js';
+import { Formatters } from '../utils/formatters.js';
+import { Confetti } from '../utils/confetti.js';
+import { SoundFX } from '../utils/audio.js';
+
+export const IllegalDumpingView = {
+  photoPreviewUrl: null,
+
+  render() {
+    const container = document.getElementById('view-illegal-dumping');
+    if (!container) return;
+
+    const reports = State.state.illegalDumpingReports;
+
+    container.innerHTML = `
+      <div class="app-container" style="max-width: 950px; margin: 0 auto; padding: 1.5rem 1rem 4rem 1rem;">
+        
+        <!-- Header -->
+        <div class="flex-between" style="margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
+          <div>
+            <div class="badge" style="background: #FEE2E2; color: #991B1B; margin-bottom: 0.35rem; display: inline-flex; align-items: center; gap: 0.35rem;">
+              <i data-lucide="shield-alert" class="lucide-icon-sm"></i>
+              <span>Civic Vigilance & Enforcement Hotline</span>
+            </div>
+            <h2 style="color: var(--color-navy); font-size: 1.85rem; font-weight: 800; margin: 0.25rem 0;">Report Illegal Dumping Hotspot</h2>
+            <p style="color: var(--text-muted); font-size: 0.9rem; margin: 0;">Help municipal authorities identify and clear illicit waste piles. Earn +20 GC once resolved.</p>
+          </div>
+
+          <div class="badge badge-points" style="font-size: 0.95rem; padding: 0.5rem 1rem; display: inline-flex; align-items: center; gap: 0.4rem;">
+            <i data-lucide="coins" class="lucide-icon-sm"></i>
+            <span>+20 Green Credits / Resolved Report</span>
+          </div>
+        </div>
+
+        <!-- 2-Column: Report Form (Left) & Active Status Tracker (Right) -->
+        <div class="hero-grid hero-grid-dumping" style="gap: 1.75rem;">
+          
+          <!-- Left: Submission Form -->
+          <div class="neu-card neu-card-raised" style="padding: 2rem; border-radius: var(--radius-xl);">
+            <h3 style="color: var(--color-navy); margin-bottom: 1.25rem; font-size: 1.25rem; font-weight: 800;">Submit Hotspot Report</h3>
+
+            <!-- Photo Upload Dropzone -->
+            <div class="form-group">
+              <label class="form-label">Photo Evidence of Illegal Dump</label>
+              <div class="neu-card-inset" style="border: 2px dashed #94A3B8; border-radius: var(--radius-md); padding: 1.5rem; text-align: center; cursor: pointer;" onclick="document.getElementById('dump-photo-input').click()">
+                <input type="file" id="dump-photo-input" accept="image/*" style="display: none;" onchange="window.IllegalDumpingView.handlePhotoUpload(event)">
+                <div id="dump-preview-box">
+                  ${this.photoPreviewUrl ? `
+                    <img src="${this.photoPreviewUrl}" style="max-height: 140px; border-radius: var(--radius-sm); margin-bottom: 0.5rem; object-fit: cover;" />
+                    <div style="font-size: 0.8rem; font-weight: 700; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; gap: 0.3rem;">
+                      <i data-lucide="check-circle-2" class="lucide-icon-sm"></i>
+                      <span>Photo Attached with GPS Metadata</span>
+                    </div>
+                  ` : `
+                    <div style="width: 44px; height: 44px; border-radius: 50%; background: #E2E8F0; color: #475569; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem auto;">
+                      <i data-lucide="camera" class="lucide-icon-md"></i>
+                    </div>
+                    <strong style="color: var(--color-navy); font-size: 0.9rem; display: block;">Click to Capture or Upload Evidence</strong>
+                    <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem;">Auto-attaches current ward GPS coordinates</div>
+                  `}
+                </div>
+              </div>
+            </div>
+
+            <!-- Location -->
+            <div class="form-group">
+              <label class="form-label">Location / Landmark</label>
+              <input type="text" class="form-input neu-input" id="dump-location" placeholder="e.g. Under Flyover, Link Road, Ward 4B" value="Under Flyover, Link Road, Ward 4B">
+            </div>
+
+            <!-- Waste Category -->
+            <div class="form-group">
+              <label class="form-label">Type of Dumped Waste</label>
+              <select class="form-select neu-input" id="dump-type">
+                <option value="Construction & Demolition Debris">Construction & Demolition Debris</option>
+                <option value="Mixed Plastic Piles & Burning Waste">Mixed Plastic Piles & Burning Waste</option>
+                <option value="Abandoned Commercial / Industrial Waste">Abandoned Commercial / Industrial Waste</option>
+                <option value="Rotting Food & Organic Carcasses">Rotting Food & Organic Waste</option>
+              </select>
+            </div>
+
+            <!-- Description -->
+            <div class="form-group">
+              <label class="form-label">Additional Observations</label>
+              <textarea class="form-textarea neu-input" id="dump-desc" rows="3" placeholder="Describe blocking pedestrian path, severe foul smell, open fire risk..."></textarea>
+            </div>
+
+            <button class="btn btn-primary btn-block btn-lg" style="margin-top: 1rem;" onclick="window.IllegalDumpingView.submitReport()">
+              <i data-lucide="send" class="lucide-icon-sm"></i>
+              <span>Dispatch Hotspot Report (+20 GC)</span>
+            </button>
+          </div>
+
+          <!-- Right: Public Resolution Pipeline & History -->
+          <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+            
+            <div class="neu-card neu-card-raised" style="padding: 1.75rem; border-radius: var(--radius-xl);">
+              <h4 style="color: var(--color-navy); margin-bottom: 0.35rem; font-size: 1.05rem; font-weight: 800;">Municipal SLA Pipeline</h4>
+              <p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.25rem;">Standard Municipal Response: Actioned within 24 hours of citizen alert.</p>
+
+              <div style="display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.825rem;">
+                <div class="neu-card-flat" style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-md);">
+                  <div style="width: 24px; height: 24px; border-radius: 50%; background: #E2E8F0; color: #475569; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem;">1</div>
+                  <div><strong>Submitted:</strong> Geotagged to BMC GIS spatial grid</div>
+                </div>
+                <div class="neu-card-flat" style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-md);">
+                  <div style="width: 24px; height: 24px; border-radius: 50%; background: #E2E8F0; color: #475569; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem;">2</div>
+                  <div><strong>Assigned:</strong> Dispatched to Ward 4B Sanitation Officer</div>
+                </div>
+                <div class="neu-card-flat" style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-md);">
+                  <div style="width: 24px; height: 24px; border-radius: 50%; background: #E2E8F0; color: #475569; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem;">3</div>
+                  <div><strong>Investigating:</strong> Heavy payload vehicle dispatched</div>
+                </div>
+                <div class="neu-card-inset" style="display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); border-left: 4px solid var(--color-primary);">
+                  <div style="width: 24px; height: 24px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem;">4</div>
+                  <div><strong style="color: var(--color-primary-dark);">Resolved:</strong> Clean site verified & +20 GC released</div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Recent Reports Feed -->
+            <div class="neu-card neu-card-raised" style="padding: 1.75rem; flex: 1; border-radius: var(--radius-xl);">
+              <h4 style="color: var(--color-navy); margin-bottom: 1rem; font-size: 1.05rem; font-weight: 800;">Recent Ward Alerts</h4>
+
+              <div style="display: flex; flex-direction: column; gap: 0.85rem;">
+                ${reports.map(r => `
+                  <div class="neu-card-flat" style="display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-radius: var(--radius-md);">
+                    <div style="display: flex; align-items: center; gap: 0.85rem;">
+                      <img src="${r.photoUrl}" style="width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--color-border);" />
+                      <div>
+                        <strong style="font-size: 0.85rem; color: var(--color-navy); display: block;">${r.wasteType}</strong>
+                        <div style="font-size: 0.75rem; color: var(--text-muted);">${r.location}</div>
+                        <div style="font-size: 0.7rem; color: var(--text-muted);">${Formatters.formatRelativeTime(r.reportedAt)}</div>
+                      </div>
+                    </div>
+
+                    <div style="text-align: right;">
+                      <span class="badge" style="background: ${r.status === 'Resolved' ? '#D1FAE5' : '#FEF3C7'}; color: ${r.status === 'Resolved' ? '#065F46' : '#92400E'}; font-size: 0.75rem; font-weight: 700;">
+                        ${r.status === 'Resolved' ? 'Resolved (+20 GC)' : r.status}
+                      </span>
+                    </div>
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+    `;
+
+    if (window.lucide) {
+      window.lucide.createIcons();
+    }
+  },
+
+  handlePhotoUpload(event) {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        this.photoPreviewUrl = e.target.result;
+        SoundFX.playClick();
+        this.render();
+      };
+      reader.readAsDataURL(file);
+    }
+  },
+
+  submitReport() {
+    const location = document.getElementById('dump-location').value;
+    const wasteType = document.getElementById('dump-type').value;
+
+    State.reportIllegalDumping({
+      location: location,
+      wasteType: wasteType,
+      photoUrl: this.photoPreviewUrl
+    });
+
+    SoundFX.playPointsEarned();
+    Confetti.trigger(80);
+    window.AppRouter.showToast('Report submitted! Ward Inspector notified.');
+    this.photoPreviewUrl = null;
+    this.render();
+  }
+};
+
+window.IllegalDumpingView = IllegalDumpingView;
diff --git a/js/components/impactDashboard.js b/js/components/impactDashboard.js
new file mode 100644
index 0000000..76f5d6a
--- /dev/null
+++ b/js/components/impactDashboard.js
@@ -0,0 +1,218 @@
+/* ==========================================================================
+   CLEANCRED — ENVIRONMENTAL IMPACT ANALYTICS
+   Tactile Neumorphism + Civic Technology
+   Carbon Offset Calculator, Water Conservation, Trees, and Green Score
+   ========================================================================== */
+
+import { State } from '../state.js';
+import { Formatters } from '../utils/formatters.js';
+import { Confetti } from '../utils/confetti.js';
+import { SoundFX } from '../utils/audio.js';
+
+export const ImpactDashboardView = {
+  render() {
+    const container = document.getElementById('view-impact');
+    if (!container) return;
+
+    const user = State.state.user;
+
+    // Derive composition breakdown from user.wasteByCategoryKg
+    const cat = user.wasteByCategoryKg;
+    const catTotal = cat.wet + cat.dry + cat.harmful;
+    const wetPct = catTotal > 0 ? Math.round((cat.wet / catTotal) * 100) : 0;
+    const dryPct = catTotal > 0 ? Math.round((cat.dry / catTotal) * 100) : 0;
+    const harmfulPct = catTotal > 0 ? Math.max(0, 100 - wetPct - dryPct) : 0;
+
+    // Secondary impact figures
+    const compostKg = Math.round((cat.wet / 3) * 10) / 10;
+    const methaneAvoidedKg = Math.round(cat.wet * 0.675 * 10) / 10;
+    const landfillSpaceSavedM3 = Math.round(cat.dry * 0.006462 * 100) / 100;
+    const groundwaterProtectedL = Math.round(cat.harmful * 350);
+
+    container.innerHTML = `
+      <div class="app-container" style="max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem 1rem;">
+        
+        <!-- Header -->
+        <div class="flex-between" style="margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
+          <div>
+            <div class="badge badge-green" style="margin-bottom: 0.35rem; display: inline-flex; align-items: center; gap: 0.35rem;">
+              <i data-lucide="leaf" class="lucide-icon-sm"></i>
+              <span>Verified Environmental Footprint</span>
+            </div>
+            <h2 style="color: var(--color-navy); font-size: 1.85rem; font-weight: 800; margin: 0.25rem 0;">Citizen Ecological Ledger</h2>
+            <p style="color: var(--text-muted); font-size: 0.9rem; margin: 0;">Quantifiable lifecycle audit of diverted municipal waste, avoided landfill emissions, and resource recovery.</p>
+          </div>
+
+          <button class="btn btn-primary" onclick="window.ImpactDashboardView.generateImpactBadge()">
+            <i data-lucide="award" class="lucide-icon-sm"></i>
+            <span>View Impact Certificate</span>
+          </button>
+        </div>
+
+        <!-- 4 Top Ecological Impact Counters -->
+        <div class="grid-cols-4" style="margin-bottom: 2.5rem; gap: 1.25rem;">
+          
+          <!-- Diverted (Forest) -->
+          <div class="neu-card neu-card-forest" style="padding: 1.75rem; border-radius: var(--radius-xl); color: #FFFFFF;">
+            <div class="flex-between" style="margin-bottom: 0.75rem;">
+              <span style="font-size: 0.78rem; font-weight: 800; text-transform: uppercase; color: #DCFCE7;">Total Waste Diverted</span>
+              <div style="width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center;">
+                <i data-lucide="scale" class="lucide-icon-sm" style="color: #FFFFFF;"></i>
+              </div>
+            </div>
+            <div style="font-size: 2.6rem; font-weight: 900; line-height: 1; margin-bottom: 0.35rem;">
+              ${user.lifetimeWasteKg} <span style="font-size: 1.1rem; font-weight: 600; opacity: 0.9;">KG</span>
+            </div>
+            <p style="font-size: 0.78rem; color: #DCFCE7; margin: 0;">Prevented from open municipal dumps</p>
+          </div>
+
+          <!-- CO2 Emissions Avoided -->
+          <div class="neu-card neu-card-raised" style="padding: 1.75rem; border-radius: var(--radius-xl);">
+            <div class="flex-between" style="margin-bottom: 0.75rem;">
+              <span style="font-size: 0.78rem; font-weight: 800; text-transform: uppercase; color: var(--text-muted);">CO₂ Emissions Avoided</span>
+              <div style="width: 32px; height: 32px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center;">
+                <i data-lucide="cloud-sun" class="lucide-icon-sm"></i>
+              </div>
+            </div>
+            <div style="font-size: 2.6rem; font-weight: 900; color: var(--color-navy); line-height: 1; margin-bottom: 0.35rem;">
+              ${user.co2SavedKg} <span style="font-size: 1.1rem; font-weight: 600; color: var(--text-muted);">KG</span>
+            </div>
+            <p style="font-size: 0.78rem; color: var(--color-primary-dark); font-weight: 700; margin: 0;">≈ 420 KM of car travel offset</p>
+          </div>
+
+          <!-- Trees Equivalent -->
+          <div class="neu-card neu-card-raised" style="padding: 1.75rem; border-radius: var(--radius-xl);">
+            <div class="flex-between" style="margin-bottom: 0.75rem;">
+              <span style="font-size: 0.78rem; font-weight: 800; text-transform: uppercase; color: var(--text-muted);">Trees Equivalent</span>
+              <div style="width: 32px; height: 32px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center;">
+                <i data-lucide="trees" class="lucide-icon-sm"></i>
+              </div>
+            </div>
+            <div style="font-size: 2.6rem; font-weight: 900; color: var(--color-navy); line-height: 1; margin-bottom: 0.35rem;">
+              ${user.treesEquivalent} <span style="font-size: 1.1rem; font-weight: 600; color: var(--text-muted);">Trees</span>
+            </div>
+            <p style="font-size: 0.78rem; color: var(--text-muted); margin: 0;">Annual carbon absorption basis</p>
+          </div>
+
+          <!-- Water Conserved -->
+          <div class="neu-card neu-card-raised" style="padding: 1.75rem; border-radius: var(--radius-xl);">
+            <div class="flex-between" style="margin-bottom: 0.75rem;">
+              <span style="font-size: 0.78rem; font-weight: 800; text-transform: uppercase; color: var(--text-muted);">Water Conserved</span>
+              <div style="width: 32px; height: 32px; border-radius: 50%; background: #DBEAFE; color: #1E40AF; display: flex; align-items: center; justify-content: center;">
+                <i data-lucide="droplets" class="lucide-icon-sm"></i>
+              </div>
+            </div>
+            <div style="font-size: 2.6rem; font-weight: 900; color: #2563EB; line-height: 1; margin-bottom: 0.35rem;">
+              ${user.waterSavedLitres} <span style="font-size: 1.1rem; font-weight: 600; color: var(--text-muted);">L</span>
+            </div>
+            <p style="font-size: 0.78rem; color: #2563EB; font-weight: 700; margin: 0;">Via recycled paper & polymers</p>
+          </div>
+
+        </div>
+
+        <!-- Waste Composition Breakdown -->
+        <div class="neu-card neu-card-raised" style="padding: 2rem; border-radius: var(--radius-xl); margin-bottom: 2.5rem;">
+          <h3 style="color: var(--color-navy); margin-bottom: 1.25rem; font-size: 1.25rem; font-weight: 800;">Segregated Material Lifecycle Breakdown</h3>
+
+          <div class="grid-cols-3" style="gap: 1.25rem;">
+            <!-- Wet -->
+            <div class="neu-card-flat" style="padding: 1.5rem; border-radius: var(--radius-lg); border-top: 4px solid var(--waste-wet);">
+              <div class="flex-between" style="margin-bottom: 0.75rem;">
+                <strong style="color: var(--waste-wet); font-size: 1.1rem; display: flex; align-items: center; gap: 0.4rem;">
+                  <i data-lucide="apple" class="lucide-icon-sm"></i>
+                  <span>Organic Wet Waste</span>
+                </strong>
+                <span class="badge" style="background: var(--waste-wet); color: #FFFFFF; font-weight: 700;">${cat.wet} KG (${wetPct}%)</span>
+              </div>
+              <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.75rem; line-height: 1.4;">
+                Converted into ${compostKg} KG of municipal organic compost fertilizer for city public gardens.
+              </p>
+              <div style="font-size: 0.78rem; color: var(--color-primary-dark); font-weight: 700;">
+                Methane Gas Prevented: ~${methaneAvoidedKg} kg
+              </div>
+            </div>
+
+            <!-- Dry -->
+            <div class="neu-card-flat" style="padding: 1.5rem; border-radius: var(--radius-lg); border-top: 4px solid var(--waste-dry);">
+              <div class="flex-between" style="margin-bottom: 0.75rem;">
+                <strong style="color: var(--waste-dry); font-size: 1.1rem; display: flex; align-items: center; gap: 0.4rem;">
+                  <i data-lucide="package" class="lucide-icon-sm"></i>
+                  <span>Clean Recyclables</span>
+                </strong>
+                <span class="badge" style="background: var(--waste-dry); color: #FFFFFF; font-weight: 700;">${cat.dry} KG (${dryPct}%)</span>
+              </div>
+              <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.75rem; line-height: 1.4;">
+                Reprocessed into industrial pellets, corrugated boxes, and recycled polyester fiber.
+              </p>
+              <div style="font-size: 0.78rem; color: #1E40AF; font-weight: 700;">
+                Landfill Space Saved: ${landfillSpaceSavedM3} m³
+              </div>
+            </div>
+
+            <!-- Harmful -->
+            <div class="neu-card-flat" style="padding: 1.5rem; border-radius: var(--radius-lg); border-top: 4px solid var(--waste-harmful);">
+              <div class="flex-between" style="margin-bottom: 0.75rem;">
+                <strong style="color: var(--waste-harmful); font-size: 1.1rem; display: flex; align-items: center; gap: 0.4rem;">
+                  <i data-lucide="shield-alert" class="lucide-icon-sm"></i>
+                  <span>Hazardous & E-Waste</span>
+                </strong>
+                <span class="badge" style="background: var(--waste-harmful); color: #FFFFFF; font-weight: 700;">${cat.harmful} KG (${harmfulPct}%)</span>
+              </div>
+              <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.75rem; line-height: 1.4;">
+                Safely recovered in authorized CPCB smelters, preventing heavy metal groundwater contamination.
+              </p>
+              <div style="font-size: 0.78rem; color: #991B1B; font-weight: 700;">
+                Groundwater Protected: ~${Formatters.formatNumber(groundwaterProtectedL)} L
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- Impact Certificate Modal -->
+      <div class="modal-overlay" id="impact-cert-modal">
+        <div class="modal-content neu-card neu-card-raised" style="max-width: 580px; text-align: center; padding: 2.5rem; border: 3px double #16A34A; border-radius: var(--radius-xl);">
+          <div class="modal-close-btn" onclick="document.getElementById('impact-cert-modal').classList.remove('active')">
+            <i data-lucide="x" class="lucide-icon-sm"></i>
+          </div>
+          
+          <div style="width: 56px; height: 56px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto; box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25);">
+            <i data-lucide="award" class="lucide-icon-lg"></i>
+          </div>
+          <div style="font-size: 0.75rem; font-weight: 800; color: var(--color-primary-dark); letter-spacing: 0.15em; text-transform: uppercase;">
+            MUNICIPAL CORPORATION OF GREATER MUMBAI & CLEANCRED
+          </div>
+          <h2 style="color: var(--color-navy); font-size: 1.6rem; margin: 0.5rem 0 0.75rem 0;">Citizen Impact Certificate</h2>
+          <p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.5;">
+            This certifies that <strong>${user.name}</strong> has responsibly diverted <strong>${user.lifetimeWasteKg} KG of segregated waste</strong> and avoided <strong>${user.co2SavedKg} KG of CO₂ emissions</strong> under Ward 4B municipal sustainability monitoring.
+          </p>
+
+          <div class="neu-card-inset" style="padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;">
+            <strong style="color: var(--color-primary-dark); font-size: 1rem;">
+              Rank #${user.rank} Ward 4B Citizen &bull; ${user.greenStreakDays}-Day Segregation Streak
+            </strong>
+          </div>
+
+          <button class="btn btn-primary btn-block" onclick="window.print()">
+            <i data-lucide="printer" class="lucide-icon-sm"></i>
+            <span>Print Official Certificate</span>
+          </button>
+        </div>
+      </div>
+    `;
+
+    if (window.lucide) {
+      window.lucide.createIcons();
+    }
+  },
+
+  generateImpactBadge() {
+    SoundFX.playPointsEarned();
+    Confetti.trigger(90);
+    document.getElementById('impact-cert-modal').classList.add('active');
+    if (window.lucide) window.lucide.createIcons();
+  }
+};
+
+window.ImpactDashboardView = ImpactDashboardView;
diff --git a/js/components/institutionPortal.js b/js/components/institutionPortal.js
new file mode 100644
index 0000000..572673f
--- /dev/null
+++ b/js/components/institutionPortal.js
@@ -0,0 +1,307 @@
+/* ==========================================================================
+   CLEANCRED — BULK GENERATORS & INSTITUTIONAL PORTAL
+   Tactile Neumorphism + Civic Technology
+   Schools, Colleges, Hospitals, Corporate Offices, Residential Societies
+   ========================================================================== */
+
+import { State } from '../state.js';
+import { Formatters } from '../utils/formatters.js';
+import { Confetti } from '../utils/confetti.js';
+import { SoundFX } from '../utils/audio.js';
+
+export const InstitutionPortalView = {
+  selectedType: 'schools',
+
+  render() {
+    const container = document.getElementById('view-institutions');
+    if (!container) return;
+
+    container.innerHTML = `
+      <div class="app-container" style="max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem 1rem;">
+        
+        <!-- Header -->
+        <div class="flex-between" style="margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
+          <div>
+            <div class="badge badge-green" style="margin-bottom: 0.35rem; display: inline-flex; align-items: center; gap: 0.35rem;">
+              <i data-lucide="building-2" class="lucide-icon-sm"></i>
+              <span>Institutional Bulk Generator Framework</span>
+            </div>
+            <h2 style="color: var(--color-navy); font-size: 1.85rem; font-weight: 800; margin: 0.25rem 0;">Institutional Waste Management</h2>
+            <p style="color: var(--text-muted); font-size: 0.9rem; margin: 0;">Bulk collection logistics, student eco-incentives, biomedical compliance, and corporate ESG reporting.</p>
+          </div>
+
+          <button class="btn btn-primary" onclick="window.InstitutionPortalView.downloadCertificate()">
+            <i data-lucide="award" class="lucide-icon-sm"></i>
+            <span>Download Accreditation Certificate</span>
+          </button>
+        </div>
+
+        <!-- 5 Category Filter Tabs -->
+        <div style="display: flex; gap: 0.75rem; margin-bottom: 2rem; overflow-x: auto; padding-bottom: 0.5rem;">
+          <button class="btn btn-sm ${this.selectedType === 'schools' ? 'btn-primary' : 'btn-secondary'}" onclick="window.InstitutionPortalView.selectType('schools')">
+            <i data-lucide="book-open" class="lucide-icon-sm"></i>
+            <span>Schools & Eco Clubs</span>
+          </button>
+          <button class="btn btn-sm ${this.selectedType === 'colleges' ? 'btn-primary' : 'btn-secondary'}" onclick="window.InstitutionPortalView.selectType('colleges')">
+            <i data-lucide="graduation-cap" class="lucide-icon-sm"></i>
+            <span>Colleges & Campuses</span>
+          </button>
+          <button class="btn btn-sm ${this.selectedType === 'hospitals' ? 'btn-primary' : 'btn-secondary'}" onclick="window.InstitutionPortalView.selectType('hospitals')">
+            <i data-lucide="hospital" class="lucide-icon-sm"></i>
+            <span>Hospitals (Biomedical)</span>
+          </button>
+          <button class="btn btn-sm ${this.selectedType === 'offices' ? 'btn-primary' : 'btn-secondary'}" onclick="window.InstitutionPortalView.selectType('offices')">
+            <i data-lucide="briefcase" class="lucide-icon-sm"></i>
+            <span>Corporate ESG</span>
+          </button>
+          <button class="btn btn-sm ${this.selectedType === 'societies' ? 'btn-primary' : 'btn-secondary'}" onclick="window.InstitutionPortalView.selectType('societies')">
+            <i data-lucide="home" class="lucide-icon-sm"></i>
+            <span>Housing Societies (RWAs)</span>
+          </button>
+        </div>
+
+        <!-- Active Selected Institution Showcase -->
+        ${this.renderInstitutionContent()}
+
+      </div>
+
+      <!-- Printable Certificate Modal -->
+      <div class="modal-overlay" id="certificate-modal">
+        <div class="modal-content neu-card neu-card-raised" style="max-width: 640px; text-align: center; border: 3px double #16A34A; padding: 2.5rem; border-radius: var(--radius-xl);">
+          <div class="modal-close-btn" onclick="document.getElementById('certificate-modal').classList.remove('active')">
+            <i data-lucide="x" class="lucide-icon-sm"></i>
+          </div>
+          
+          <div style="width: 56px; height: 56px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto; box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25);">
+            <i data-lucide="award" class="lucide-icon-lg"></i>
+          </div>
+          <div style="font-size: 0.8rem; font-weight: 800; color: var(--color-primary-dark); letter-spacing: 0.15em; text-transform: uppercase;">
+            MUNICIPAL CORPORATION OF GREATER MUMBAI & CLEANCRED
+          </div>
+          <h2 style="color: var(--color-navy); font-size: 1.6rem; margin: 0.5rem 0 0.75rem 0;">Certificate of Sustainability Excellence</h2>
+          <p style="font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.5;">
+            This certifies that <strong>Delhi Public School Green Club</strong> has achieved a <strong>94/100 Municipal Sustainability Index</strong> by diverting <strong>1,840 KG of waste</strong> with zero landfill contamination.
+          </p>
+
+          <div style="display: flex; justify-content: space-around; background: var(--bg-surface-subtle); padding: 1.25rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; border: 1px solid var(--color-border);">
+            <div>
+              <div style="font-size: 1.25rem; font-weight: 900; color: var(--color-primary-dark);">1,840 KG</div>
+              <div style="font-size: 0.75rem; color: var(--text-muted);">Waste Diverted</div>
+            </div>
+            <div>
+              <div style="font-size: 1.25rem; font-weight: 900; color: #2563EB;">1,240 KG</div>
+              <div style="font-size: 0.75rem; color: var(--text-muted);">CO₂ Avoided</div>
+            </div>
+            <div>
+              <div style="font-size: 1.25rem; font-weight: 900; color: #F59E0B;">94 / 100</div>
+              <div style="font-size: 0.75rem; color: var(--text-muted);">Eco Rating</div>
+            </div>
+          </div>
+
+          <div class="flex-between" style="border-top: 1px dashed var(--color-border); padding-top: 1rem; font-size: 0.8rem; color: var(--text-muted);">
+            <span>Authorized: Municipal Commissioner</span>
+            <span>Accredited: SBM Urban 2.0</span>
+          </div>
+
+          <button class="btn btn-primary btn-block" style="margin-top: 1.5rem;" onclick="window.print()">
+            <i data-lucide="printer" class="lucide-icon-sm"></i>
+            <span>Print Official Certificate</span>
+          </button>
+        </div>
+      </div>
+    `;
+
+    if (window.lucide) {
+      window.lucide.createIcons();
+    }
+  },
+
+  renderInstitutionContent() {
+    switch (this.selectedType) {
+      case 'schools':
+        return `
+          <div class="neu-card neu-card-raised" style="padding: 2.25rem; margin-bottom: 2rem; border-radius: var(--radius-xl);">
+            <div class="flex-between" style="margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+              <div>
+                <span class="badge badge-green" style="margin-bottom: 0.35rem;">Rank #1 School Eco Club</span>
+                <h3 style="color: var(--color-navy); font-size: 1.4rem; font-weight: 800;">Delhi Public School — Green Brigade</h3>
+                <p style="font-size: 0.85rem; color: var(--text-muted);">Student Body: 1,420 Active Recyclers &bull; Sustainability Score: 94/100</p>
+              </div>
+              <div class="badge badge-points" style="font-size: 1rem; padding: 0.5rem 1rem;">19,500 Total GC</div>
+            </div>
+
+            <div class="grid-cols-3" style="margin-bottom: 2rem; gap: 1.25rem;">
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md);">
+                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Student Rewards</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">Students earn Green Credits for bringing segregated paper and e-waste from home.</p>
+              </div>
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md);">
+                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Classroom Battles</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">Grade 9A leads inter-class recycling championship with 340 kg paper recovered.</p>
+              </div>
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md);">
+                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Daily Bulk Van</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">Designated municipal electric van collects segregated cafeteria & dry waste daily at 3 PM.</p>
+              </div>
+            </div>
+
+            <button class="btn btn-primary" onclick="window.AppRouter.showToast('School onboarding consultation scheduled.')">
+              <i data-lucide="plus-circle" class="lucide-icon-sm"></i>
+              <span>Register New School / Club</span>
+            </button>
+          </div>
+        `;
+
+      case 'colleges':
+        return `
+          <div class="neu-card neu-card-raised" style="padding: 2.25rem; margin-bottom: 2rem; border-radius: var(--radius-xl);">
+            <div class="flex-between" style="margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+              <div>
+                <span class="badge badge-green" style="margin-bottom: 0.35rem;">Higher Education Campus</span>
+                <h3 style="color: var(--color-navy); font-size: 1.4rem; font-weight: 800;">IIT Bombay — Campus Eco Cell</h3>
+                <p style="font-size: 0.85rem; color: var(--text-muted);">Hostel Waste Decentralization & Tech-Driven Composting &bull; Score: 98/100</p>
+              </div>
+              <div class="badge badge-points" style="font-size: 1rem; padding: 0.5rem 1rem;">38,400 Total GC</div>
+            </div>
+
+            <div class="grid-cols-3" style="margin-bottom: 2rem; gap: 1.25rem;">
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md);">
+                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Hostel Waste Auditing</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">Real-time weight sensors in 16 campus hostel messes tracking organic diversion.</p>
+              </div>
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md);">
+                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Student Innovation Grants</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">CleanCred grants funded 3 student research prototypes on plastic pyrolysis.</p>
+              </div>
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md);">
+                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Fest Waste Zero-Target</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">100% waste recovery during cultural festivals (Mood Indigo & Techfest).</p>
+              </div>
+            </div>
+
+            <button class="btn btn-primary" onclick="window.AppRouter.showToast('College onboarding inquiry dispatched.')">
+              <i data-lucide="graduation-cap" class="lucide-icon-sm"></i>
+              <span>Partner With Your College</span>
+            </button>
+          </div>
+        `;
+
+      case 'hospitals':
+        return `
+          <div class="neu-card neu-card-raised" style="padding: 2.25rem; margin-bottom: 2rem; border-radius: var(--radius-xl); border-top: 4px solid #DC2626;">
+            <div class="flex-between" style="margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+              <div>
+                <span class="badge" style="background: #FEE2E2; color: #991B1B; margin-bottom: 0.35rem;">Biomedical Compliance</span>
+                <h3 style="color: var(--color-navy); font-size: 1.4rem; font-weight: 800;">Max Super Speciality Hospital Network</h3>
+                <p style="font-size: 0.85rem; color: var(--text-muted);">Color-Coded Bio-Hazard Barcode Tracking & CPCB Compliance</p>
+              </div>
+              <div class="badge badge-green">100% CPCB Compliant ✓</div>
+            </div>
+
+            <div class="grid-cols-3" style="margin-bottom: 2rem; gap: 1.25rem;">
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md); border-left: 3px solid #DC2626;">
+                <strong style="color: #991B1B; font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Red / Yellow Bag Segregation</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">Strict tracking of anatomical, soiled, and chemical medical waste with unique QR tags.</p>
+              </div>
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md);">
+                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Authorized Incineration</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">Dedicated GPS-monitored hazardous disposal vehicles with digital manifest sign-off.</p>
+              </div>
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md);">
+                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Pollution Control Audit</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">Instant one-click automated regulatory compliance report for State Pollution Control Board.</p>
+              </div>
+            </div>
+
+            <button class="btn btn-primary" onclick="window.AppRouter.showToast('Hospital Biomedical protocol requested.')">
+              <i data-lucide="hospital" class="lucide-icon-sm"></i>
+              <span>Request Hospital Compliance Setup</span>
+            </button>
+          </div>
+        `;
+
+      case 'offices':
+        return `
+          <div class="neu-card neu-card-raised" style="padding: 2.25rem; margin-bottom: 2rem; border-radius: var(--radius-xl);">
+            <div class="flex-between" style="margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+              <div>
+                <span class="badge badge-navy" style="margin-bottom: 0.35rem;">Corporate ESG Platform</span>
+                <h3 style="color: var(--color-navy); font-size: 1.4rem; font-weight: 800;">Infosys Technology Park — ESG Hub</h3>
+                <p style="font-size: 0.85rem; color: var(--text-muted);">Corporate Scope 3 Waste Analytics & Employee Green Leaderboards</p>
+              </div>
+              <div class="badge badge-green">ESG Gold Certified ✓</div>
+            </div>
+
+            <div class="grid-cols-3" style="margin-bottom: 2rem; gap: 1.25rem;">
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md);">
+                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Smart Recycling Hubs</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">Smart contactless dry paper & beverage can recycling stations on all 8 corporate floors.</p>
+              </div>
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md);">
+                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Corporate BRSR Reports</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">Direct SEBI-aligned Business Responsibility and Sustainability data export.</p>
+              </div>
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md);">
+                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Employee Green Perks</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">Top eco-performing teams receive company-matched gift cards and public accolades.</p>
+              </div>
+            </div>
+
+            <button class="btn btn-primary" onclick="window.AppRouter.showToast('Corporate ESG onboarding initiated.')">
+              <i data-lucide="briefcase" class="lucide-icon-sm"></i>
+              <span>Setup Corporate Waste Solution</span>
+            </button>
+          </div>
+        `;
+
+      case 'societies':
+        return `
+          <div class="neu-card neu-card-raised" style="padding: 2.25rem; margin-bottom: 2rem; border-radius: var(--radius-xl);">
+            <div class="flex-between" style="margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+              <div>
+                <span class="badge badge-green" style="margin-bottom: 0.35rem;">Residential RWA Network</span>
+                <h3 style="color: var(--color-navy); font-size: 1.4rem; font-weight: 800;">Greenwood Heights Residential Society</h3>
+                <p style="font-size: 0.85rem; color: var(--text-muted);">240 Families &bull; 100% Door-to-Door Wet Waste Composting</p>
+              </div>
+              <div class="badge badge-points">₹12,400 Society Corpus Saved</div>
+            </div>
+
+            <div class="grid-cols-3" style="margin-bottom: 2rem; gap: 1.25rem;">
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md);">
+                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Wing Leaderboard</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">Wing A vs Wing B monthly segregation accuracy and organic compost yield competition.</p>
+              </div>
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md);">
+                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Municipal Tax Rebate</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">100% segregating societies receive a 5% municipal property tax rebate from BMC.</p>
+              </div>
+              <div class="neu-card-flat" style="padding: 1.25rem; border-radius: var(--radius-md);">
+                <strong style="color: var(--color-navy); font-size: 0.95rem; display: block; margin-bottom: 0.35rem;">Community Compost</strong>
+                <p style="font-size: 0.8rem; color: var(--text-muted); line-height: 1.4;">Onsite compost powers community organic vegetable and rooftop garden.</p>
+              </div>
+            </div>
+
+            <button class="btn btn-primary" onclick="window.AppRouter.showToast('Society RWA consultation registered.')">
+              <i data-lucide="home" class="lucide-icon-sm"></i>
+              <span>Register Your Housing Society</span>
+            </button>
+          </div>
+        `;
+    }
+  },
+
+  selectType(type) {
+    SoundFX.playClick();
+    this.selectedType = type;
+    this.render();
+  },
+
+  downloadCertificate() {
+    SoundFX.playPointsEarned();
+    Confetti.trigger(100);
+    document.getElementById('certificate-modal').classList.add('active');
+    if (window.lucide) window.lucide.createIcons();
+  }
+};
+
+window.InstitutionPortalView = InstitutionPortalView;
diff --git a/landing.js b/js/components/landing.js
similarity index 73%
rename from landing.js
rename to js/components/landing.js
index 70611bd..031dd36 100644
--- a/landing.js
+++ b/js/components/landing.js
@@ -1,5 +1,5 @@
 /* ==========================================================================
-   GREEN KARMA — LANDING PAGE COMPONENT
+   GREEN LEGACY — LANDING PAGE COMPONENT
    Tagline: EARN. RECYCLE. REWARD.
    ========================================================================== */
 
@@ -16,32 +16,30 @@ export const LandingPage = {
         <!-- Hero Section -->
         <section class="hero-section" style="padding: 2.5rem 0 4rem 0; position: relative;">
           <div class="app-container">
-            <div class="hero-grid" style="display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; align-items: center;">
+            <div class="hero-grid hero-grid-landing" style="gap: 3.5rem; align-items: center;">
               
               <!-- Left Column: Copy & CTAs -->
               <div class="hero-content">
                 <div class="badge badge-green" style="margin-bottom: 1.25rem;">
-                  <span>🌱</span> Smart Waste-To-Credit Platform
+                  Verified waste recovery for cleaner cities
                 </div>
                 
                 <h1 style="margin-bottom: 1.25rem; font-size: clamp(2.4rem, 4.5vw, 3.8rem); line-height: 1.12;">
-                  Turn Your Waste <br/>
-                  <span style="background: linear-gradient(135deg, #0B5D3B, #16A34A, #84CC16); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
-                    Into Rewards.
-                  </span>
+                  CleanCred<br/>
+                  <span style="color: var(--color-primary-dark);">Verified waste collection for cleaner cities.</span>
                 </h1>
                 
                 <p style="font-size: 1.15rem; margin-bottom: 2rem; max-width: 520px; color: var(--text-muted); line-height: 1.6;">
-                  Segregate. Dispose. Earn Green Points. Build a cleaner tomorrow with India's premier gamified municipal waste-management network.
+                  Make responsible waste segregation traceable—from your doorstep to recovery. Green Credits reward verified participation.
                 </p>
 
                 <!-- Action Buttons -->
                 <div class="hero-buttons" style="display: flex; gap: 1rem; align-items: center; margin-bottom: 2.5rem; flex-wrap: wrap;">
                   <button class="btn btn-primary btn-lg" onclick="window.AppRouter.navigate('report-waste')">
-                    <span>♻️</span> Report Waste Now
+                    Report Waste
                   </button>
-                  <button class="btn btn-secondary btn-lg" onclick="window.AppRouter.navigate('rewards')">
-                    <span>🌱</span> Start Earning (100 GP = ₹10)
+                  <button class="btn btn-secondary btn-lg" onclick="window.AppRouter.navigate('impact')">
+                    See How It Works
                   </button>
                 </div>
 
@@ -64,49 +62,27 @@ export const LandingPage = {
                 </div>
               </div>
 
-              <!-- Right Column: Animated Visual Journey Graphic & Floating Cards -->
+              <!-- Right Column: Traceability workflow -->
               <div class="hero-visual" style="position: relative;">
                 
-                <!-- Floating Card 1: Points Earned -->
-                <div class="floating-stat-card animate-float" style="top: -20px; left: -20px; border-left: 4px solid var(--color-primary);">
-                  <div style="width: 40px; height: 40px; border-radius: 50%; background: #DCFCE7; display: flex; align-items: center; justify-content: center; font-size: 1.25rem;">
-                    ✨
-                  </div>
-                  <div>
-                    <div style="font-weight: 800; color: var(--color-primary-dark); font-size: 0.95rem;">+10 Green Points</div>
-                    <div style="font-size: 0.75rem; color: var(--text-muted);">Waste Pickup Verified</div>
-                  </div>
-                </div>
-
-                <!-- Floating Card 2: Active Citizens -->
-                <div class="floating-stat-card animate-float" style="bottom: -15px; right: -10px; animation-delay: 1.5s; border-left: 4px solid #2563EB;">
-                  <div style="width: 40px; height: 40px; border-radius: 50%; background: #DBEAFE; display: flex; align-items: center; justify-content: center; font-size: 1.25rem;">
-                    👥
-                  </div>
-                  <div>
-                    <div style="font-weight: 800; color: #1E40AF; font-size: 0.95rem;">12,450 Verified</div>
-                    <div style="font-size: 0.75rem; color: var(--text-muted);">Active Green Citizens</div>
-                  </div>
-                </div>
-
-                <!-- Main Glassmorphic Hero Journey Visual Card -->
-                <div class="glass-card glass-card-navy" style="padding: 2.25rem; border-radius: var(--radius-xl); position: relative; overflow: hidden;">
+                <!-- Main workflow card -->
+                <div class="neu-card neu-card-navy" style="padding: 2.25rem; border-radius: var(--radius-xl); position: relative; overflow: hidden;">
                   <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem;">
                     <div style="font-size: 0.85rem; font-weight: 700; color: #84CC16; text-transform: uppercase; letter-spacing: 0.08em;">
-                      ⚡ LIVE WASTE-TO-CREDIT ENGINE
+                      VERIFIED RECOVERY WORKFLOW
                     </div>
                     <div class="badge" style="background: rgba(22, 163, 74, 0.25); color: #84CC16; border: 1px solid #16A34A;">
-                      <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #84CC16; animation: pulseGlow 1.5s infinite;"></span> Municipal Connected
+                      Municipal service
                     </div>
                   </div>
 
                   <!-- Animated Journey Flow Steps -->
                   <div style="display: flex; flex-direction: column; gap: 1rem;">
                     <div style="display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,0.08); padding: 0.85rem 1rem; border-radius: var(--radius-md);">
-                      <div style="font-size: 1.35rem;">🏠</div>
+                      <div class="workflow-step-number">1</div>
                       <div style="flex: 1;">
-                        <div style="font-size: 0.85rem; font-weight: 700; color: #FFFFFF;">Citizen Segregates Waste</div>
-                        <div style="font-size: 0.75rem; color: #94A3B8;">Wet 🟢 / Dry 🔵 / Harmful 🔴</div>
+                        <div style="font-size: 0.85rem; font-weight: 700; color: #FFFFFF;">Citizen reports segregated waste</div>
+                        <div style="font-size: 0.75rem; color: #94A3B8;">Request details create a traceable record</div>
                       </div>
                       <span style="font-size: 0.8rem; font-weight: 800; color: #84CC16;">STEP 1</span>
                     </div>
@@ -114,23 +90,23 @@ export const LandingPage = {
                     <div style="text-align: center; color: rgba(255,255,255,0.3); line-height: 0.5;">↓</div>
 
                     <div style="display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,0.08); padding: 0.85rem 1rem; border-radius: var(--radius-md);">
-                      <div style="font-size: 1.35rem;">🚚</div>
+                      <div class="workflow-step-number">2</div>
                       <div style="flex: 1;">
-                        <div style="font-size: 0.85rem; font-weight: 700; color: #FFFFFF;">Municipal Worker Collects & Verifies</div>
-                        <div style="font-size: 0.75rem; color: #94A3B8;">GPS Tracking + QR / Photo Check</div>
+                        <div style="font-size: 0.85rem; font-weight: 700; color: #FFFFFF;">Collection is verified</div>
+                        <div style="font-size: 0.75rem; color: #94A3B8;">Worker verification confirms the pickup</div>
                       </div>
                       <span style="font-size: 0.8rem; font-weight: 800; color: #84CC16;">STEP 2</span>
                     </div>
 
                     <div style="text-align: center; color: rgba(255,255,255,0.3); line-height: 0.5;">↓</div>
 
-                    <div style="display: flex; align-items: center; gap: 1rem; background: linear-gradient(135deg, rgba(22, 163, 74, 0.35), rgba(132, 204, 22, 0.2)); padding: 1rem; border-radius: var(--radius-md); border: 1px solid rgba(132, 204, 22, 0.4);">
-                      <div style="font-size: 1.5rem;">💳</div>
+                    <div style="display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,0.1); padding: 1rem; border-radius: var(--radius-md); border: 1px solid rgba(132, 204, 22, 0.4);">
+                      <div class="workflow-step-number">3</div>
                       <div style="flex: 1;">
-                        <div style="font-size: 0.9rem; font-weight: 800; color: #FFFFFF;">Green Wallet Credited (Instant)</div>
-                        <div style="font-size: 0.75rem; color: #DCFCE7;">100 GP = ₹10 (Recharge, Bills, Discounts)</div>
+                        <div style="font-size: 0.9rem; font-weight: 800; color: #FFFFFF;">Recovery is recorded</div>
+                        <div style="font-size: 0.75rem; color: #DCFCE7;">Green Credits are issued after verified collection</div>
                       </div>
-                      <span class="badge badge-points">+10 GP</span>
+                      <span class="badge badge-points">+10 GC</span>
                     </div>
                   </div>
 
@@ -145,57 +121,57 @@ export const LandingPage = {
         <section style="padding: 4rem 0; background: #FFFFFF; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);">
           <div class="app-container">
             <div style="text-align: center; max-width: 680px; margin: 0 auto 3.5rem auto;">
-              <div class="badge badge-green" style="margin-bottom: 0.75rem;">HOW GREEN KARMA WORKS</div>
-              <h2>From Household Bin to Instant Rewards in 5 Steps</h2>
-              <p style="margin-top: 0.5rem;">Our streamlined end-to-end framework verifies correct segregation and provides transparent civic incentives.</p>
+              <div class="badge badge-green" style="margin-bottom: 0.75rem;">HOW CLEANCRED WORKS</div>
+              <h2>A clear chain of custody for every collection</h2>
+              <p style="margin-top: 0.5rem;">From report to recovery, each step keeps citizens and municipal teams informed.</p>
             </div>
 
             <!-- 5 Steps Grid -->
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.5rem;">
+            <div class="process-steps-grid">
               
               <!-- Step 1 -->
-              <div class="glass-card" style="padding: 1.75rem 1.25rem; text-align: center;">
+              <div class="neu-card neu-card-raised" style="padding: 1.75rem 1.25rem; text-align: center;">
                 <div style="width: 48px; height: 48px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem auto;">
-                  1️⃣
+                  <span class="process-step-marker">01</span>
                 </div>
                 <h4 style="margin-bottom: 0.5rem; color: var(--color-navy);">1. Segregate</h4>
                 <p style="font-size: 0.85rem; color: var(--text-muted);">Separate your daily household waste into Wet, Dry, and Harmful bins.</p>
               </div>
 
               <!-- Step 2 -->
-              <div class="glass-card" style="padding: 1.75rem 1.25rem; text-align: center;">
+              <div class="neu-card neu-card-raised" style="padding: 1.75rem 1.25rem; text-align: center;">
                 <div style="width: 48px; height: 48px; border-radius: 50%; background: #DBEAFE; color: #1E40AF; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem auto;">
-                  2️⃣
+                  <span class="process-step-marker is-info">02</span>
                 </div>
                 <h4 style="margin-bottom: 0.5rem; color: var(--color-navy);">2. Report & Request</h4>
                 <p style="font-size: 0.85rem; color: var(--text-muted);">Log waste type, approximate weight, location pin, and photo on the app.</p>
               </div>
 
               <!-- Step 3 -->
-              <div class="glass-card" style="padding: 1.75rem 1.25rem; text-align: center;">
+              <div class="neu-card neu-card-raised" style="padding: 1.75rem 1.25rem; text-align: center;">
                 <div style="width: 48px; height: 48px; border-radius: 50%; background: #FEF3C7; color: #B45309; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem auto;">
-                  3️⃣
+                  <span class="process-step-marker is-warning">03</span>
                 </div>
                 <h4 style="margin-bottom: 0.5rem; color: var(--color-navy);">3. Doorstep Pickup</h4>
-                <p style="font-size: 0.85rem; color: var(--text-muted);">Municipal or authorized partner arrives at your location with real-time GPS tracking.</p>
+                <p style="font-size: 0.85rem; color: var(--text-muted);">A collection worker arrives at your location with real-time GPS tracking.</p>
               </div>
 
               <!-- Step 4 -->
-              <div class="glass-card" style="padding: 1.75rem 1.25rem; text-align: center;">
+              <div class="neu-card neu-card-raised" style="padding: 1.75rem 1.25rem; text-align: center;">
                 <div style="width: 48px; height: 48px; border-radius: 50%; background: #EDE9FE; color: #6D28D9; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem auto;">
-                  4️⃣
+                  <span class="process-step-marker">04</span>
                 </div>
                 <h4 style="margin-bottom: 0.5rem; color: var(--color-navy);">4. Verification</h4>
                 <p style="font-size: 0.85rem; color: var(--text-muted);">Worker verifies category purity, weight, and scans disposal confirmation.</p>
               </div>
 
               <!-- Step 5 -->
-              <div class="glass-card" style="padding: 1.75rem 1.25rem; text-align: center; border: 1.5px solid var(--color-primary); background: #F0FDF4;">
+              <div class="neu-card neu-card-raised" style="padding: 1.75rem 1.25rem; text-align: center; border: 1.5px solid var(--color-primary); background: #F0FDF4;">
                 <div style="width: 48px; height: 48px; border-radius: 50%; background: #16A34A; color: #FFFFFF; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem auto; box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);">
-                  5️⃣
+                  <span class="process-step-marker is-recovery">05</span>
                 </div>
                 <h4 style="margin-bottom: 0.5rem; color: var(--color-primary-dark);">5. Earn & Redeem</h4>
-                <p style="font-size: 0.85rem; color: var(--text-muted);">Green Points instantly credited. Redeem for mobile recharges and utility bills.</p>
+                <p style="font-size: 0.85rem; color: var(--text-muted);">Green Credits instantly credited. Redeem for mobile recharges and utility bills.</p>
               </div>
 
             </div>
@@ -207,21 +183,21 @@ export const LandingPage = {
           <div class="app-container">
             <div style="text-align: center; max-width: 680px; margin: 0 auto 3.5rem auto;">
               <div class="badge badge-green" style="margin-bottom: 0.75rem;">WASTE SEGREGATION GUIDE</div>
-              <h2>Know Your Waste Categories & Points</h2>
-              <p style="margin-top: 0.5rem;">Select your waste correctly to maximize points and prevent hazardous contamination.</p>
+              <h2>Know Your Waste Categories & Credits</h2>
+              <p style="margin-top: 0.5rem;">Select your waste correctly to maximize credits and prevent hazardous contamination.</p>
             </div>
 
             <!-- 3 Large Category Cards -->
             <div class="grid-cols-3">
               
               <!-- 🟢 WET WASTE -->
-              <div class="category-card category-card-wet glass-card">
+              <div class="category-card category-card-wet neu-card neu-card-raised">
                 <div>
                   <div class="flex-between" style="margin-bottom: 1.5rem;">
                     <div class="category-icon-wrapper">🍏</div>
-                    <span class="category-points-tag">+10 POINTS</span>
+                    <span class="category-points-tag">+10 CREDITS</span>
                   </div>
-                  <h3 style="color: var(--waste-wet); margin-bottom: 0.5rem;">🟢 WET WASTE</h3>
+                  <h3 style="color: var(--waste-wet); margin-bottom: 0.5rem;">Wet waste</h3>
                   <p style="font-size: 0.875rem; color: var(--color-navy); font-weight: 600; margin-bottom: 1rem;">
                     Organic & Biodegradable Material
                   </p>
@@ -239,18 +215,18 @@ export const LandingPage = {
                 </div>
 
                 <button class="btn btn-primary btn-block" onclick="window.AppRouter.navigate('report-waste', { category: 'wet' })">
-                  <span>🟢</span> Report Wet Waste (+10 GP)
+                  Report Wet Waste (+10 GC)
                 </button>
               </div>
 
               <!-- 🔵 DRY WASTE -->
-              <div class="category-card category-card-dry glass-card">
+              <div class="category-card category-card-dry neu-card neu-card-raised">
                 <div>
                   <div class="flex-between" style="margin-bottom: 1.5rem;">
                     <div class="category-icon-wrapper">📦</div>
-                    <span class="category-points-tag">+7 POINTS</span>
+                    <span class="category-points-tag">+7 CREDITS</span>
                   </div>
-                  <h3 style="color: var(--waste-dry); margin-bottom: 0.5rem;">🔵 DRY WASTE</h3>
+                  <h3 style="color: var(--waste-dry); margin-bottom: 0.5rem;">Dry waste</h3>
                   <p style="font-size: 0.875rem; color: var(--color-navy); font-weight: 600; margin-bottom: 1rem;">
                     Clean Recyclable Packaging & Goods
                   </p>
@@ -268,18 +244,18 @@ export const LandingPage = {
                 </div>
 
                 <button class="btn btn-block" style="background: var(--waste-dry); color: #FFFFFF;" onclick="window.AppRouter.navigate('report-waste', { category: 'dry' })">
-                  <span>🔵</span> Report Dry Waste (+7 GP)
+                  Report Dry Waste (+7 GC)
                 </button>
               </div>
 
               <!-- 🔴 HARMFUL WASTE -->
-              <div class="category-card category-card-harmful glass-card">
+              <div class="category-card category-card-harmful neu-card neu-card-raised">
                 <div>
                   <div class="flex-between" style="margin-bottom: 1.5rem;">
                     <div class="category-icon-wrapper">⚠️</div>
-                    <span class="category-points-tag">+5 POINTS</span>
+                    <span class="category-points-tag">+5 CREDITS</span>
                   </div>
-                  <h3 style="color: var(--waste-harmful); margin-bottom: 0.5rem;">🔴 HARMFUL WASTE</h3>
+                  <h3 style="color: var(--waste-harmful); margin-bottom: 0.5rem;">Harmful waste</h3>
                   <p style="font-size: 0.875rem; color: var(--color-navy); font-weight: 600; margin-bottom: 1rem;">
                     Hazardous, Biomedical & E-Waste
                   </p>
@@ -296,12 +272,12 @@ export const LandingPage = {
                   </div>
 
                   <div style="background: #FEE2E2; border: 1px solid #FECACA; padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.75rem; color: #991B1B; font-weight: 700; margin-bottom: 1.5rem;">
-                    ⚠️ Never mix harmful waste with regular household waste.
+                    Important: never mix harmful waste with regular household waste.
                   </div>
                 </div>
 
                 <button class="btn btn-block" style="background: var(--waste-harmful); color: #FFFFFF;" onclick="window.AppRouter.navigate('report-waste', { category: 'harmful' })">
-                  <span>🔴</span> Report Harmful Waste (+5 GP)
+                  Report Harmful Waste (+5 GC)
                 </button>
               </div>
 
@@ -310,42 +286,42 @@ export const LandingPage = {
         </section>
 
         <!-- Interactive Points & Reward Conversion Calculator -->
-        <section style="padding: 4rem 0; background: linear-gradient(135deg, #0B5D3B, #102A43); color: #FFFFFF;">
+        <section style="padding: 4rem 0; background: #173A26; color: #FFFFFF;">
           <div class="app-container">
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;" class="hero-grid">
+            <div class="hero-grid hero-grid-2col" style="gap: 3rem; align-items: center;">
               <div>
                 <div class="badge" style="background: rgba(132, 204, 22, 0.2); color: #84CC16; border: 1px solid #84CC16; margin-bottom: 1rem;">
-                  🌱 TRANSPARENT FINTECH VALUATION
+                  GREEN CREDITS, SIMPLY EXPLAINED
                 </div>
-                <h2 style="color: #FFFFFF; margin-bottom: 1rem;">100 Green Points = ₹10 Real Value</h2>
+                <h2 style="color: #FFFFFF; margin-bottom: 1rem;">100 Green Credits = ₹10 Real Value</h2>
                 <p style="color: #CBD5E1; margin-bottom: 1.5rem;">
-                  Every kilogram of segregated waste you report directly accumulates cash-convertible Green Points in your Green Karma Wallet. Use it for instant prepaid recharges, electricity and water bills, or eco-friendly shopping vouchers.
+                  Green Credits are the incentive layer. The core service is verified, accountable collection and responsible recovery.
                 </p>
 
                 <div style="display: flex; flex-direction: column; gap: 0.85rem;">
                   <div style="display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.08); padding: 0.75rem 1.25rem; border-radius: var(--radius-md);">
-                    <span>🟢 500 Green Points</span>
+                    <span>🟢 500 Green Credits</span>
                     <strong style="color: #84CC16; font-size: 1.1rem;">= ₹50 Direct Credit</strong>
                   </div>
                   <div style="display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.08); padding: 0.75rem 1.25rem; border-radius: var(--radius-md);">
-                    <span>🔵 1,000 Green Points</span>
+                    <span>🔵 1,000 Green Credits</span>
                     <strong style="color: #84CC16; font-size: 1.1rem;">= ₹100 Direct Credit</strong>
                   </div>
                   <div style="display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.08); padding: 0.75rem 1.25rem; border-radius: var(--radius-md);">
-                    <span>⭐ 2,500 Green Points</span>
+                    <span>⭐ 2,500 Green Credits</span>
                     <strong style="color: #84CC16; font-size: 1.1rem;">= ₹250 Direct Credit</strong>
                   </div>
                 </div>
               </div>
 
               <!-- Interactive Simulator Card -->
-              <div class="glass-card" style="background: rgba(255,255,255,0.96); padding: 2.25rem; border-radius: var(--radius-xl); color: var(--text-main);">
+              <div class="neu-card neu-card-raised" style="padding: 2.25rem; border-radius: var(--radius-xl); color: var(--text-main);">
                 <h3 style="color: var(--color-navy); margin-bottom: 1.25rem;">Estimate Your Monthly Earnings</h3>
                 
                 <div class="form-group">
                   <div class="flex-between">
                     <label class="form-label" style="margin: 0;">Wet Waste (Pickups / Month):</label>
-                    <span id="calc-wet-val" style="font-weight: 800; color: var(--waste-wet);">8 pickups (80 GP)</span>
+                    <span id="calc-wet-val" style="font-weight: 800; color: var(--waste-wet);">8 pickups (80 GC)</span>
                   </div>
                   <input type="range" id="calc-wet-slider" min="0" max="30" value="8" style="width: 100%; accent-color: var(--waste-wet);" oninput="window.LandingPage.updateCalculator()">
                 </div>
@@ -353,7 +329,7 @@ export const LandingPage = {
                 <div class="form-group">
                   <div class="flex-between">
                     <label class="form-label" style="margin: 0;">Dry Recyclable Waste (Pickups / Month):</label>
-                    <span id="calc-dry-val" style="font-weight: 800; color: var(--waste-dry);">6 pickups (42 GP)</span>
+                    <span id="calc-dry-val" style="font-weight: 800; color: var(--waste-dry);">6 pickups (42 GC)</span>
                   </div>
                   <input type="range" id="calc-dry-slider" min="0" max="30" value="6" style="width: 100%; accent-color: var(--waste-dry);" oninput="window.LandingPage.updateCalculator()">
                 </div>
@@ -361,7 +337,7 @@ export const LandingPage = {
                 <div class="form-group">
                   <div class="flex-between">
                     <label class="form-label" style="margin: 0;">Weekly Streaks & Challenges:</label>
-                    <span id="calc-bonus-val" style="font-weight: 800; color: #F59E0B;">+75 GP Bonus</span>
+                    <span id="calc-bonus-val" style="font-weight: 800; color: #F59E0B;">+75 GC Bonus</span>
                   </div>
                   <input type="range" id="calc-bonus-slider" min="0" max="200" value="75" step="25" style="width: 100%; accent-color: #F59E0B;" oninput="window.LandingPage.updateCalculator()">
                 </div>
@@ -370,11 +346,11 @@ export const LandingPage = {
                 <div style="background: var(--waste-wet-bg); border: 1.5px solid var(--waste-wet-border); border-radius: var(--radius-md); padding: 1.25rem; text-align: center; margin-top: 1.5rem;">
                   <div style="font-size: 0.8rem; font-weight: 700; color: var(--color-primary-dark); text-transform: uppercase;">Estimated Monthly Reward</div>
                   <div style="font-size: 2rem; font-weight: 800; color: var(--color-primary-dark); margin: 0.25rem 0;" id="calc-total-inr">₹19.70 / month</div>
-                  <div style="font-size: 0.85rem; color: var(--text-muted);" id="calc-total-gp">(197 Green Points)</div>
+                  <div style="font-size: 0.85rem; color: var(--text-muted);" id="calc-total-gp">(197 Green Credits)</div>
                 </div>
 
                 <button class="btn btn-primary btn-block" style="margin-top: 1.5rem;" onclick="window.AppRouter.navigate('report-waste')">
-                  Start Earning Green Points 🚀
+                  Report Waste
                 </button>
               </div>
 
@@ -385,21 +361,21 @@ export const LandingPage = {
         <!-- Final Landing Call To Action -->
         <section style="padding: 5rem 0; text-align: center; background: #FFFFFF;">
           <div class="app-container" style="max-width: 800px;">
-            <div class="badge badge-green" style="margin-bottom: 1rem;">🌱 JOIN THE REVOLUTION</div>
-            <h1 style="margin-bottom: 1.25rem; font-size: clamp(2.2rem, 3.8vw, 3.2rem);">“Your Waste Has Value.”</h1>
+            <div class="badge badge-green" style="margin-bottom: 1rem;">CLEANCRED</div>
+            <h1 style="margin-bottom: 1.25rem; font-size: clamp(2.2rem, 3.8vw, 3.2rem);">Waste recovery you can verify.</h1>
             <p style="font-size: 1.15rem; color: var(--text-muted); margin-bottom: 2rem;">
               Every correctly segregated piece of waste is one step toward a cleaner city and an empowered community.
             </p>
             <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
               <button class="btn btn-primary btn-lg" onclick="window.AppRouter.navigate('report-waste')">
-                <span>♻️</span> START EARNING
+                Report Waste
               </button>
               <button class="btn btn-secondary btn-lg" onclick="window.AppRouter.navigate('dashboard')">
-                <span>👤</span> VIEW DEMO DASHBOARD
+                View dashboard
               </button>
             </div>
             <div style="margin-top: 3rem; font-weight: 800; letter-spacing: 0.18em; color: var(--color-primary-dark); font-size: 0.9rem;">
-              🌱 GREEN KARMA &bull; EARN. RECYCLE. REWARD.
+              CleanCred &bull; Built by Green Legacy
             </div>
           </div>
         </section>
@@ -424,11 +400,11 @@ export const LandingPage = {
     const totalGp = wetGp + dryGp + bonusGp;
     const totalInr = (totalGp / 10).toFixed(2);
 
-    document.getElementById('calc-wet-val').textContent = `${wetCount} pickups (${wetGp} GP)`;
-    document.getElementById('calc-dry-val').textContent = `${dryCount} pickups (${dryGp} GP)`;
-    document.getElementById('calc-bonus-val').textContent = `+${bonusGp} GP Bonus`;
+    document.getElementById('calc-wet-val').textContent = `${wetCount} pickups (${wetGp} GC)`;
+    document.getElementById('calc-dry-val').textContent = `${dryCount} pickups (${dryGp} GC)`;
+    document.getElementById('calc-bonus-val').textContent = `+${bonusGp} GC Bonus`;
     document.getElementById('calc-total-inr').textContent = `₹${totalInr} / month`;
-    document.getElementById('calc-total-gp').textContent = `(${totalGp} Green Points)`;
+    document.getElementById('calc-total-gp').textContent = `(${totalGp} Green Credits)`;
   }
 };
 
diff --git a/leaderboard.js b/js/components/leaderboard.js
similarity index 50%
rename from leaderboard.js
rename to js/components/leaderboard.js
index 4211d2a..9dc4b15 100644
--- a/leaderboard.js
+++ b/js/components/leaderboard.js
@@ -1,5 +1,6 @@
 /* ==========================================================================
-   GREEN KARMA — GAMIFIED LEADERBOARD, BADGES & CHALLENGES
+   CLEANCRED — GAMIFIED LEADERBOARD, BADGES & CIVIC CHALLENGES
+   Tactile Neumorphism + Civic Technology
    ========================================================================== */
 
 import { State } from '../state.js';
@@ -14,68 +15,99 @@ export const LeaderboardView = {
     const container = document.getElementById('view-leaderboard');
     if (!container) return;
 
-    const list = State.state.leaderboards[this.currentTab] || State.state.leaderboards.city;
+    const rawList = State.state.leaderboards[this.currentTab] || State.state.leaderboards.city;
+
+    // Keep the citizen's own row in sync with their live wallet/impact stats
+    const list = rawList.map(u => u.isUser ? {
+      ...u,
+      points: State.state.user.greenPoints,
+      wasteKg: State.state.user.lifetimeWasteKg,
+      streak: State.state.user.greenStreakDays
+    } : u);
+
     const top3 = list.slice(0, 3);
-    const rest = list.slice(3);
+    const currentUserEntry = list.find(u => u.isUser);
+    const currentUserIndex = currentUserEntry ? list.indexOf(currentUserEntry) : -1;
+    const aheadOfUser = currentUserIndex > 0 ? list[currentUserIndex - 1] : null;
+    const gapToNextRank = (currentUserEntry && aheadOfUser) ? (aheadOfUser.points - currentUserEntry.points) : 0;
 
     container.innerHTML = `
-      <div class="app-container">
+      <div class="app-container" style="max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem 1rem;">
         
         <!-- Header -->
         <div class="flex-between" style="margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
           <div>
-            <div class="badge badge-green" style="margin-bottom: 0.35rem;">
-              <span>🏆</span> Gamified Citizen Ranking
+            <div class="badge badge-green" style="margin-bottom: 0.35rem; display: inline-flex; align-items: center; gap: 0.35rem;">
+              <i data-lucide="trophy" class="lucide-icon-sm"></i>
+              <span>Civic Participation & Gamification</span>
             </div>
-            <h2>Eco Leaderboard & Badges</h2>
-            <p>Compete with citizens, colleges, and neighborhoods to build a cleaner future.</p>
+            <h2 style="color: var(--color-navy); font-size: 1.85rem; font-weight: 800; margin: 0.25rem 0;">Community Impact Standings</h2>
+            <p style="color: var(--text-muted); font-size: 0.9rem; margin: 0;">Verified recovery contributions across citizens, neighborhoods, and academic institutions.</p>
           </div>
 
-          <!-- Highlight Current Rank Pill -->
-          <div style="background: linear-gradient(135deg, #0B5D3B, #16A34A); color: #FFFFFF; padding: 0.75rem 1.25rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 1rem;">
-            <div style="font-size: 1.8rem;">🔥</div>
+          <!-- Highlight Current Rank Pill (Tactile Raised) -->
+          <div class="neu-card neu-card-raised" style="padding: 0.85rem 1.25rem; border-radius: var(--radius-lg); display: flex; align-items: center; gap: 1rem; border-left: 4px solid var(--color-primary);">
+            <div style="width: 38px; height: 38px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 900;">
+              <i data-lucide="award" class="lucide-icon-md"></i>
+            </div>
             <div>
-              <div style="font-size: 0.75rem; color: #DCFCE7; font-weight: 700; text-transform: uppercase;">Your Current Standing</div>
-              <strong style="font-size: 1.1rem; color: #FFFFFF;">#12 Shivansh Prajapati (1,250 GP)</strong>
-              <div style="font-size: 0.75rem; color: #84CC16;">You are only 120 points away from #10! 🚀</div>
+              <div style="font-size: 0.75rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase;">Your Standing</div>
+              ${currentUserEntry ? `
+                <strong style="font-size: 1rem; color: var(--color-navy); display: block;">
+                  #${currentUserEntry.rank} ${State.state.user.name} (${Formatters.formatNumber(currentUserEntry.points)} GC)
+                </strong>
+                <div style="font-size: 0.75rem; color: var(--color-primary-dark); font-weight: 600;">
+                  ${gapToNextRank > 0 ? `${Formatters.formatNumber(gapToNextRank)} GC needed to reach #${aheadOfUser.rank}` : "You currently lead this standing"}
+                </div>
+              ` : `
+                <strong style="font-size: 1rem; color: var(--color-navy); display: block;">Not Ranked Here</strong>
+                <div style="font-size: 0.75rem; color: var(--text-muted);">Enrolled in Ward 4B Resident category</div>
+              `}
             </div>
           </div>
         </div>
 
         <!-- Filter Tabs -->
-        <div style="display: flex; gap: 0.5rem; margin-bottom: 2.5rem; overflow-x: auto; padding-bottom: 0.5rem;">
+        <div style="display: flex; gap: 0.5rem; margin-bottom: 2rem; overflow-x: auto; padding-bottom: 0.5rem;">
           <button class="btn btn-sm ${this.currentTab === 'city' ? 'btn-primary' : 'btn-secondary'}" onclick="window.LeaderboardView.switchTab('city')">
-            🏙️ City (Mumbai)
+            <i data-lucide="map-pin" class="lucide-icon-sm"></i>
+            <span>Mumbai Metro</span>
           </button>
           <button class="btn btn-sm ${this.currentTab === 'neighborhood' ? 'btn-primary' : 'btn-secondary'}" onclick="window.LeaderboardView.switchTab('neighborhood')">
-            🏘️ Ward 4B Neighborhood
+            <i data-lucide="home" class="lucide-icon-sm"></i>
+            <span>Ward 4B</span>
           </button>
           <button class="btn btn-sm ${this.currentTab === 'global' ? 'btn-primary' : 'btn-secondary'}" onclick="window.LeaderboardView.switchTab('global')">
-            🌍 Global National
+            <i data-lucide="globe" class="lucide-icon-sm"></i>
+            <span>National SBM</span>
           </button>
           <button class="btn btn-sm ${this.currentTab === 'college' ? 'btn-primary' : 'btn-secondary'}" onclick="window.LeaderboardView.switchTab('college')">
-            🎓 Colleges & Universities
+            <i data-lucide="graduation-cap" class="lucide-icon-sm"></i>
+            <span>Colleges</span>
           </button>
           <button class="btn btn-sm ${this.currentTab === 'school' ? 'btn-primary' : 'btn-secondary'}" onclick="window.LeaderboardView.switchTab('school')">
-            🏫 Schools & Green Clubs
+            <i data-lucide="book-open" class="lucide-icon-sm"></i>
+            <span>Schools</span>
           </button>
         </div>
 
-        <!-- 3-Place Podium Section -->
-        <div style="background: linear-gradient(180deg, rgba(22,163,74,0.06) 0%, rgba(255,255,255,0.9) 100%); border-radius: var(--radius-xl); padding: 2.5rem 1.5rem 1.5rem 1.5rem; margin-bottom: 2.5rem; border: 1px solid var(--color-border);">
+        <!-- 3-Place Neumorphic Podium Section -->
+        <div class="neu-card neu-card-raised" style="border-radius: var(--radius-xl); padding: 2.5rem 1.5rem 1.5rem 1.5rem; margin-bottom: 2.5rem;">
           <div style="display: flex; justify-content: center; align-items: flex-end; gap: 1.5rem; max-width: 720px; margin: 0 auto;" class="points-podium">
             
             <!-- Rank 2 (Silver) -->
             ${top3[1] ? `
               <div style="flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center;">
-                <div style="font-size: 1.8rem; margin-bottom: 0.25rem;">🥈</div>
+                <div style="width: 32px; height: 32px; border-radius: 50%; background: #E2E8F0; color: #475569; display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 0.5rem;">
+                  <i data-lucide="medal" class="lucide-icon-sm"></i>
+                </div>
                 <div style="width: 56px; height: 56px; border-radius: 50%; background: #E2E8F0; border: 3px solid #94A3B8; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: #475569; margin-bottom: 0.5rem;">
                   ${top3[1].avatar}
                 </div>
                 <strong style="font-size: 0.95rem; color: var(--color-navy); display: block;">${top3[1].name}</strong>
                 <span style="font-size: 0.78rem; color: var(--text-muted);">${top3[1].location}</span>
-                <div style="background: #E2E8F0; width: 100%; height: 110px; border-radius: var(--radius-md) var(--radius-md) 0 0; margin-top: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; color: #334155;">
-                  <span style="font-size: 1.15rem;">${top3[1].points} GP</span>
+                <div class="neu-card-raised" style="width: 100%; height: 110px; border-radius: var(--radius-md) var(--radius-md) 0 0; margin-top: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; color: #334155; border-top: 4px solid #94A3B8;">
+                  <span style="font-size: 1.15rem;">${top3[1].points} GC</span>
                   <span style="font-size: 0.75rem; color: #64748B;">${top3[1].wasteKg} KG Waste</span>
                 </div>
               </div>
@@ -84,14 +116,16 @@ export const LeaderboardView = {
             <!-- Rank 1 (Gold) -->
             ${top3[0] ? `
               <div style="flex: 1.15; text-align: center; display: flex; flex-direction: column; align-items: center;">
-                <div style="font-size: 2.4rem; margin-bottom: 0.25rem;">👑 🥇</div>
-                <div style="width: 72px; height: 72px; border-radius: 50%; background: #FEF3C7; border: 4px solid #F59E0B; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.4rem; color: #B45309; margin-bottom: 0.5rem; box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);" class="animate-pulse-glow">
+                <div style="width: 38px; height: 38px; border-radius: 50%; background: #FEF3C7; color: #B45309; display: flex; align-items: center; justify-content: center; font-weight: 900; margin-bottom: 0.5rem; box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);">
+                  <i data-lucide="crown" class="lucide-icon-md"></i>
+                </div>
+                <div style="width: 72px; height: 72px; border-radius: 50%; background: #FEF3C7; border: 4px solid #F59E0B; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.4rem; color: #B45309; margin-bottom: 0.5rem; box-shadow: 0 6px 16px rgba(245, 158, 11, 0.25);">
                   ${top3[0].avatar}
                 </div>
                 <strong style="font-size: 1.05rem; color: var(--color-navy); display: block;">${top3[0].name}</strong>
                 <span style="font-size: 0.8rem; color: var(--text-muted);">${top3[0].location}</span>
-                <div style="background: linear-gradient(180deg, #FDE68A, #F59E0B); width: 100%; height: 145px; border-radius: var(--radius-md) var(--radius-md) 0 0; margin-top: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; color: #78350F; box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);">
-                  <span style="font-size: 1.35rem;">${top3[0].points} GP</span>
+                <div class="neu-card-raised" style="width: 100%; height: 145px; border-radius: var(--radius-md) var(--radius-md) 0 0; margin-top: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; color: #78350F; border-top: 4px solid #F59E0B; background: linear-gradient(180deg, #FEF3C7 0%, var(--bg-surface) 100%);">
+                  <span style="font-size: 1.35rem; color: #B45309;">${top3[0].points} GC</span>
                   <span style="font-size: 0.8rem; color: #92400E;">${top3[0].wasteKg} KG Waste</span>
                 </div>
               </div>
@@ -100,14 +134,16 @@ export const LeaderboardView = {
             <!-- Rank 3 (Bronze) -->
             ${top3[2] ? `
               <div style="flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center;">
-                <div style="font-size: 1.8rem; margin-bottom: 0.25rem;">🥉</div>
+                <div style="width: 32px; height: 32px; border-radius: 50%; background: #FED7AA; color: #9A3412; display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 0.5rem;">
+                  <i data-lucide="medal" class="lucide-icon-sm"></i>
+                </div>
                 <div style="width: 56px; height: 56px; border-radius: 50%; background: #FED7AA; border: 3px solid #EA580C; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; color: #9A3412; margin-bottom: 0.5rem;">
                   ${top3[2].avatar}
                 </div>
                 <strong style="font-size: 0.95rem; color: var(--color-navy); display: block;">${top3[2].name}</strong>
                 <span style="font-size: 0.78rem; color: var(--text-muted);">${top3[2].location}</span>
-                <div style="background: #FED7AA; width: 100%; height: 85px; border-radius: var(--radius-md) var(--radius-md) 0 0; margin-top: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; color: #7C2D12;">
-                  <span style="font-size: 1.15rem;">${top3[2].points} GP</span>
+                <div class="neu-card-raised" style="width: 100%; height: 85px; border-radius: var(--radius-md) var(--radius-md) 0 0; margin-top: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; color: #7C2D12; border-top: 4px solid #EA580C;">
+                  <span style="font-size: 1.15rem;">${top3[2].points} GC</span>
                   <span style="font-size: 0.75rem; color: #9A3412;">${top3[2].wasteKg} KG Waste</span>
                 </div>
               </div>
@@ -117,17 +153,17 @@ export const LeaderboardView = {
         </div>
 
         <!-- 2-Column Section: Detailed Ranked List (Left) & Collectible Badges + Challenges (Right) -->
-        <div style="display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2rem;" class="hero-grid">
+        <div class="hero-grid hero-grid-leaderboard" style="gap: 1.75rem;">
           
           <!-- Left: Full Leaderboard List -->
-          <div class="glass-card" style="padding: 1.75rem;">
-            <h3 style="color: var(--color-navy); margin-bottom: 1.25rem;">Full Standings</h3>
+          <div class="neu-card neu-card-raised" style="padding: 1.75rem; border-radius: var(--radius-xl);">
+            <h3 style="color: var(--color-navy); margin-bottom: 1.25rem; font-size: 1.25rem; font-weight: 800;">Full Standings</h3>
 
             <div style="display: flex; flex-direction: column; gap: 0.75rem;">
               ${list.map(u => `
-                <div style="display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.25rem; border-radius: var(--radius-md); border: 1.5px solid ${u.isUser ? 'var(--color-primary)' : 'var(--color-border)'}; background: ${u.isUser ? '#ECFDF5' : '#F8FAFC'};">
+                <div class="${u.isUser ? 'neu-card-inset' : 'neu-card-flat'}" style="display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.25rem; border-radius: var(--radius-md); ${u.isUser ? 'border-left: 4px solid var(--color-primary);' : ''}">
                   <div style="display: flex; align-items: center; gap: 1rem;">
-                    <span style="font-size: 1.1rem; font-weight: 800; color: ${u.rank <= 3 ? '#F59E0B' : 'var(--text-muted)'}; width: 28px;">
+                    <span style="font-size: 1.1rem; font-weight: 900; color: ${u.rank <= 3 ? '#F59E0B' : 'var(--text-muted)'}; width: 28px;">
                       #${u.rank}
                     </span>
                     <div style="width: 38px; height: 38px; border-radius: 50%; background: ${u.isUser ? 'var(--color-primary-dark)' : '#E2E8F0'}; color: ${u.isUser ? '#FFFFFF' : '#1E293B'}; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem;">
@@ -135,17 +171,18 @@ export const LeaderboardView = {
                     </div>
                     <div>
                       <strong style="color: var(--color-navy); font-size: 0.95rem; display: block;">
-                        ${u.name} ${u.isUser ? '<span class="badge badge-green" style="font-size: 0.65rem; padding: 2px 6px;">You</span>' : ''}
+                        ${u.name} ${u.isUser ? '<span class="badge badge-green" style="font-size: 0.65rem; padding: 2px 6px; margin-left: 4px;">You</span>' : ''}
                       </strong>
                       <span style="font-size: 0.75rem; color: var(--text-muted);">${u.location} &bull; ${u.wasteKg} KG Segregated</span>
                     </div>
                   </div>
 
                   <div style="text-align: right;">
-                    <span class="badge badge-points" style="font-size: 0.85rem;">${Formatters.formatNumber(u.points)} GP</span>
+                    <span class="badge badge-points" style="font-size: 0.85rem;">${Formatters.formatNumber(u.points)} GC</span>
                     ${u.streak ? `
-                      <div style="font-size: 0.72rem; color: #EA580C; font-weight: 700; margin-top: 2px;">
-                        🔥 ${u.streak}d streak
+                      <div style="font-size: 0.72rem; color: #EA580C; font-weight: 700; margin-top: 2px; display: flex; align-items: center; justify-content: flex-end; gap: 0.2rem;">
+                        <i data-lucide="flame" style="width: 12px; height: 12px;"></i>
+                        <span>${u.streak}d streak</span>
                       </div>
                     ` : ''}
                   </div>
@@ -155,24 +192,24 @@ export const LeaderboardView = {
           </div>
 
           <!-- Right: Badges Showcase & Weekly Challenges -->
-          <div style="display: flex; flex-direction: column; gap: 2rem;">
+          <div style="display: flex; flex-direction: column; gap: 1.75rem;">
             
             <!-- Badges Section -->
-            <div class="glass-card" style="padding: 1.75rem;">
+            <div class="neu-card neu-card-raised" style="padding: 1.75rem; border-radius: var(--radius-xl);">
               <div class="flex-between" style="margin-bottom: 1.25rem;">
-                <h3 style="color: var(--color-navy);">Collectible Badges</h3>
+                <h3 style="color: var(--color-navy); font-size: 1.2rem; font-weight: 800; margin: 0;">Verified Badges</h3>
                 <span class="badge badge-green">4 / 7 Unlocked</span>
               </div>
 
-              <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 1rem; text-align: center;">
+              <div class="badges-grid">
                 ${State.state.badges.map(b => `
-                  <div class="glass-card-interactive" style="padding: 0.85rem 0.5rem; border-radius: var(--radius-md); border: 1px solid ${b.unlocked ? 'var(--color-primary-light)' : '#CBD5E1'}; background: ${b.unlocked ? '#F0FDF4' : '#F1F5F9'}; opacity: ${b.unlocked ? '1' : '0.65'};" onclick="window.LeaderboardView.showBadgeDetails('${b.id}')">
-                    <div style="font-size: 2rem; margin-bottom: 0.25rem; filter: ${b.unlocked ? 'none' : 'grayscale(100%)'};">
-                      ${b.icon}
+                  <div class="${b.unlocked ? 'neu-card-flat' : 'neu-card-inset'}" style="padding: 0.85rem 0.5rem; border-radius: var(--radius-md); opacity: ${b.unlocked ? '1' : '0.6'}; cursor: pointer;" onclick="window.LeaderboardView.showBadgeDetails('${b.id}')">
+                    <div style="width: 36px; height: 36px; border-radius: 50%; background: ${b.unlocked ? '#DCFCE7' : '#E2E8F0'}; color: ${b.unlocked ? 'var(--color-primary-dark)' : '#64748B'}; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.35rem auto;">
+                      <i data-lucide="${b.unlocked ? 'award' : 'lock'}" class="lucide-icon-sm"></i>
                     </div>
                     <strong style="font-size: 0.75rem; color: var(--color-navy); display: block; line-height: 1.2;">${b.name}</strong>
-                    <div style="font-size: 0.65rem; color: ${b.unlocked ? 'var(--color-primary)' : 'var(--text-muted)'}; margin-top: 0.25rem;">
-                      ${b.unlocked ? 'Unlocked ✓' : `${b.progress || 0}%`}
+                    <div style="font-size: 0.65rem; color: ${b.unlocked ? 'var(--color-primary-dark)' : 'var(--text-muted)'}; margin-top: 0.25rem; font-weight: 700;">
+                      ${b.unlocked ? 'Unlocked' : `${b.progress || 0}%`}
                     </div>
                   </div>
                 `).join('')}
@@ -180,24 +217,24 @@ export const LeaderboardView = {
             </div>
 
             <!-- Active Challenges -->
-            <div class="glass-card" style="padding: 1.75rem;">
-              <h3 style="color: var(--color-navy); margin-bottom: 1rem;">Active Civic Challenges</h3>
+            <div class="neu-card neu-card-raised" style="padding: 1.75rem; border-radius: var(--radius-xl);">
+              <h3 style="color: var(--color-navy); font-size: 1.2rem; font-weight: 800; margin-bottom: 1rem;">Active Civic Challenges</h3>
 
               <div style="display: flex; flex-direction: column; gap: 1rem;">
                 ${State.state.challenges.map(c => `
-                  <div style="padding: 1rem; background: #F8FAFC; border: 1px solid var(--color-border); border-radius: var(--radius-md);">
+                  <div class="neu-card-flat" style="padding: 1rem; border-radius: var(--radius-md);">
                     <div class="flex-between" style="margin-bottom: 0.35rem;">
                       <strong style="color: var(--color-navy); font-size: 0.88rem;">${c.title}</strong>
-                      <span class="badge badge-points">+${c.rewardGp} GP</span>
+                      <span class="badge badge-points">+${c.rewardGp} GC</span>
                     </div>
                     <p style="font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.65rem;">${c.description}</p>
                     
-                    <div class="flex-between" style="font-size: 0.72rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.25rem;">
+                    <div class="flex-between" style="font-size: 0.72rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.35rem;">
                       <span>Progress: ${c.current} / ${c.target}</span>
                       <span>${Math.round((c.current / c.target) * 100)}%</span>
                     </div>
-                    <div style="height: 6px; background: #E2E8F0; border-radius: var(--radius-full); overflow: hidden;">
-                      <div style="height: 100%; width: ${(c.current / c.target) * 100}%; background: linear-gradient(90deg, #16A34A, #84CC16);"></div>
+                    <div class="neu-card-inset" style="height: 8px; border-radius: 9999px; overflow: hidden; padding: 1px;">
+                      <div style="height: 100%; width: ${(c.current / c.target) * 100}%; background: linear-gradient(90deg, #16A34A, #84CC16); border-radius: 9999px;"></div>
                     </div>
                   </div>
                 `).join('')}
@@ -212,12 +249,18 @@ export const LeaderboardView = {
 
       <!-- Badge Detail Modal -->
       <div class="modal-overlay" id="badge-modal">
-        <div class="modal-content" style="text-align: center;">
-          <div class="modal-close-btn" onclick="document.getElementById('badge-modal').classList.remove('active')">✕</div>
+        <div class="modal-content neu-card neu-card-raised" style="text-align: center; max-width: 440px;">
+          <div class="modal-close-btn" onclick="document.getElementById('badge-modal').classList.remove('active')">
+            <i data-lucide="x" class="lucide-icon-sm"></i>
+          </div>
           <div id="badge-modal-body"></div>
         </div>
       </div>
     `;
+
+    if (window.lucide) {
+      window.lucide.createIcons();
+    }
   },
 
   switchTab(tab) {
@@ -234,13 +277,15 @@ export const LeaderboardView = {
     const modalBody = document.getElementById('badge-modal-body');
     if (modalBody) {
       modalBody.innerHTML = `
-        <div style="font-size: 3.5rem; margin-bottom: 0.75rem;">${badge.icon}</div>
-        <h2 style="color: var(--color-navy); margin-bottom: 0.5rem;">${badge.name}</h2>
-        <p style="color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.5rem;">${badge.description}</p>
+        <div style="width: 64px; height: 64px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto; box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);">
+          <i data-lucide="${badge.unlocked ? 'award' : 'lock'}" class="lucide-icon-lg"></i>
+        </div>
+        <h2 style="color: var(--color-navy); font-size: 1.4rem; font-weight: 800; margin-bottom: 0.5rem;">${badge.name}</h2>
+        <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.25rem;">${badge.description}</p>
         
-        <div style="background: #F8FAFC; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1.5rem; font-size: 0.85rem;">
+        <div class="neu-card-inset" style="border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1.5rem; font-size: 0.85rem;">
           ${badge.unlocked ? `
-            <span style="color: var(--color-primary-dark); font-weight: 800;">🎉 Unlocked on ${badge.unlockedAt}</span>
+            <span style="color: var(--color-primary-dark); font-weight: 800;">Unlocked on ${badge.unlockedAt}</span>
           ` : `
             <span style="color: var(--text-muted); font-weight: 700;">Locked &bull; Current Progress: ${badge.progress}%</span>
           `}
@@ -248,7 +293,7 @@ export const LeaderboardView = {
 
         ${badge.unlocked ? `
           <button class="btn btn-primary btn-block" onclick="window.Confetti.trigger(100); SoundFX.playPointsEarned();">
-            Celebrate Badge 🎊
+            Celebrate Badge
           </button>
         ` : `
           <button class="btn btn-secondary btn-block" onclick="document.getElementById('badge-modal').classList.remove('active')">
@@ -258,6 +303,7 @@ export const LeaderboardView = {
       `;
 
       document.getElementById('badge-modal').classList.add('active');
+      if (window.lucide) window.lucide.createIcons();
     }
   }
 };
diff --git a/js/components/liveTracking.js b/js/components/liveTracking.js
new file mode 100644
index 0000000..f3ef014
--- /dev/null
+++ b/js/components/liveTracking.js
@@ -0,0 +1,300 @@
+/* ==========================================================================
+   CLEANCRED — LIVE PICKUP TRACKING COMPONENT
+   Tactile Neumorphism + Civic Technology
+   Swiggy/Uber-Style Interactive Delivery Map & Status Progression
+   ========================================================================== */
+
+import { State } from '../state.js';
+import { Formatters } from '../utils/formatters.js';
+import { MapHelper } from '../utils/mapHelper.js';
+import { Confetti } from '../utils/confetti.js';
+import { SoundFX } from '../utils/audio.js';
+import { QRCode } from '../utils/qrCode.js';
+
+export const LiveTrackingView = {
+  mapInstance: null,
+  truckMarker: null,
+  routePolyline: null,
+  animationTimer: null,
+
+  render() {
+    const container = document.getElementById('view-live-tracking');
+    if (!container) return;
+
+    const pickup = State.state.pickups[0] || {
+      id: 'GK-2026-89421',
+      category: 'wet',
+      categoryName: 'Wet Waste (Organic)',
+      pointsReward: 10,
+      quantityKg: 4.5,
+      subType: 'Kitchen Scraps',
+      address: 'Flat 402, Green Meadows, Ward 4B, Mumbai',
+      status: 'on_the_way',
+      workerName: 'Ramesh Kumar',
+      workerPhone: '+91 98111 22334',
+      vehicleNo: 'MH-02-GK-4091',
+      otp: '8492',
+      etaMinutes: 12
+    };
+
+    container.innerHTML = `
+      <div class="app-container" style="max-width: 1150px; margin: 0 auto; padding: 1.5rem 1rem 4rem 1rem;">
+        
+        <!-- Header -->
+        <div class="flex-between" style="margin-bottom: 1.75rem; flex-wrap: wrap; gap: 1rem;">
+          <div>
+            <div class="badge badge-green" style="margin-bottom: 0.35rem; display: inline-flex; align-items: center; gap: 0.35rem;">
+              <i data-lucide="navigation" class="lucide-icon-sm"></i>
+              <span>Simulated Fleet Telemetry Route &bull; Ward 4B</span>
+            </div>
+            <h2 style="color: var(--color-navy); font-size: 1.85rem; font-weight: 800; margin: 0.25rem 0;">Live Pickup Tracking</h2>
+            <p style="color: var(--text-muted); font-size: 0.9rem; margin: 0;">Trace collection van dispatch from depot departure to doorstep verification.</p>
+          </div>
+
+          <div style="display: flex; gap: 0.75rem; align-items: center;">
+            <button class="btn btn-secondary btn-sm" onclick="window.LiveTrackingView.simulateWorkerMove()">
+              <i data-lucide="refresh-cw" class="lucide-icon-sm"></i>
+              <span>Simulate Route Step</span>
+            </button>
+            <button class="btn btn-primary btn-sm" onclick="window.LiveTrackingView.fastForwardPickup('${pickup.id}')">
+              <i data-lucide="check-circle" class="lucide-icon-sm"></i>
+              <span>Complete Verification</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- 2-Column Layout: Map (Left) & Status Timeline + Worker Card (Right) -->
+        <div class="hero-grid" style="gap: 1.75rem;">
+          
+          <!-- Left Column: Map -->
+          <div class="neu-card neu-card-raised" style="padding: 1.25rem; overflow: hidden; border-radius: var(--radius-xl);">
+            <div id="live-tracking-map" style="height: 520px; width: 100%; border-radius: var(--radius-lg); border: 1.5px solid #CBD5E1; box-shadow: inset 0 2px 6px rgba(0,0,0,0.06);"></div>
+            
+            <div class="flex-between" style="margin-top: 1rem; padding: 0.75rem 1rem; background: var(--bg-surface-elevated); border-radius: var(--radius-md); font-size: 0.8rem; color: var(--text-muted); border: 1px solid var(--color-border); flex-wrap: wrap; gap: 0.6rem;">
+              <span style="display: flex; align-items: center; gap: 0.35rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+                <i data-lucide="map-pin" class="lucide-icon-sm" style="color: var(--color-primary-dark);"></i>
+                <span title="${pickup.address}">Pickup: ${pickup.address || 'Flat 402, Ward 4B'}</span>
+              </span>
+              <span style="display: flex; align-items: center; gap: 0.35rem;">
+                <i data-lucide="truck" class="lucide-icon-sm" style="color: #2563EB;"></i>
+                <span>Electric Van: ${pickup.vehicleNo || 'MH-02-GK-4091'}</span>
+              </span>
+              <span style="display: flex; align-items: center; gap: 0.35rem;">
+                <i data-lucide="activity" class="lucide-icon-sm" style="color: var(--color-primary);"></i>
+                <span>Telemetry: Live Sync</span>
+              </span>
+            </div>
+          </div>
+
+          <!-- Right Column: Status Timeline & Driver Card -->
+          <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+            
+            <!-- Worker Info Card -->
+            <div class="neu-card neu-card-raised" style="padding: 1.5rem; border-radius: var(--radius-xl);">
+              <div class="flex-between" style="margin-bottom: 1rem;">
+                <div style="display: flex; align-items: center; gap: 0.85rem;">
+                  <div style="width: 48px; height: 48px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; box-shadow: 0 2px 6px rgba(22, 163, 74, 0.2);">
+                    <i data-lucide="user-check" class="lucide-icon-md"></i>
+                  </div>
+                  <div>
+                    <strong style="color: var(--color-navy); font-size: 1rem; display: block;">${pickup.workerName || 'Ramesh Kumar'}</strong>
+                    <div style="font-size: 0.78rem; color: var(--text-muted);">Municipal Sanitation Officer &bull; 4.9 Rating</div>
+                  </div>
+                </div>
+                <span class="badge badge-green" style="display: inline-flex; align-items: center; gap: 0.25rem;">
+                  <i data-lucide="shield-check" class="lucide-icon-sm"></i>
+                  <span>Verified Staff</span>
+                </span>
+              </div>
+
+              <div class="neu-card-inset" style="padding: 0.85rem 1rem; border-radius: var(--radius-md); margin-bottom: 1rem;">
+                <div class="flex-between" style="margin-bottom: 0.35rem; font-size: 0.85rem;">
+                  <span style="color: var(--text-muted); font-weight: 600;">Assigned Vehicle</span>
+                  <strong style="color: var(--color-navy);">${pickup.vehicleNo || 'Electric Van MH-02-GK-4091'}</strong>
+                </div>
+                <div class="flex-between" style="font-size: 0.85rem;">
+                  <span style="color: var(--text-muted); font-weight: 600;">Pickup Handshake OTP</span>
+                  <strong style="color: var(--color-primary-dark); font-size: 1.2rem; letter-spacing: 0.12em; font-family: var(--font-mono);">${pickup.otp || '8492'}</strong>
+                </div>
+              </div>
+
+              ${pickup.status !== 'verified' ? `
+              <div class="neu-card-flat" style="padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1rem; text-align: center;">
+                <div style="font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em;">
+                  Present this QR to Ramesh Kumar on arrival
+                </div>
+                <div id="live-tracking-qr" style="display: flex; justify-content: center;"></div>
+              </div>
+              ` : `
+              <div class="neu-card-flat" style="padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1rem; text-align: center; background: #DCFCE7; border-color: #86EFAC;">
+                <div style="color: var(--color-primary-dark); font-weight: 800; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem;">
+                  <i data-lucide="check-circle-2" class="lucide-icon-sm"></i>
+                  <span>Pickup Completed & Verified</span>
+                </div>
+              </div>
+              `}
+
+              <div class="card-actions-grid-2col">
+                <button class="btn btn-secondary btn-sm" onclick="window.AppRouter.showToast('Calling Ramesh Kumar at ${pickup.workerPhone || '+91 98111 22334'}...')">
+                  <i data-lucide="phone" class="lucide-icon-sm"></i>
+                  <span>Call Worker</span>
+                </button>
+                <button class="btn btn-secondary btn-sm" onclick="window.AppRouter.showToast('Message sent: Please buzz Flat 402 upon arrival.')">
+                  <i data-lucide="message-square" class="lucide-icon-sm"></i>
+                  <span>Message</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- Milestone Progress Timeline -->
+            <div class="neu-card neu-card-raised" style="padding: 1.75rem; flex: 1; border-radius: var(--radius-xl);">
+              <h4 style="color: var(--color-navy); margin-bottom: 1.25rem; font-weight: 800; font-size: 1.05rem;">Chain of Custody Timeline</h4>
+
+              <div class="timeline-list">
+                
+                <!-- 1. Created -->
+                <div class="timeline-item done">
+                  <div class="timeline-dot">
+                    <i data-lucide="check" style="width: 12px; height: 12px;"></i>
+                  </div>
+                  <strong style="font-size: 0.875rem; color: var(--color-navy);">Request Created</strong>
+                  <div style="font-size: 0.75rem; color: var(--text-muted);">Pickup #${pickup.id} registered on ledger</div>
+                </div>
+
+                <!-- 2. Assigned -->
+                <div class="timeline-item done">
+                  <div class="timeline-dot">
+                    <i data-lucide="check" style="width: 12px; height: 12px;"></i>
+                  </div>
+                  <strong style="font-size: 0.875rem; color: var(--color-navy);">Worker Assigned</strong>
+                  <div style="font-size: 0.75rem; color: var(--text-muted);">Ramesh Kumar accepted Ward 4B route</div>
+                </div>
+
+                <!-- 3. On The Way -->
+                <div class="timeline-item ${pickup.status === 'on_the_way' ? 'active' : pickup.status === 'verified' || pickup.status === 'collected' ? 'done' : ''}">
+                  <div class="timeline-dot">
+                    <i data-lucide="${pickup.status === 'verified' || pickup.status === 'collected' ? 'check' : 'truck'}" style="width: 12px; height: 12px;"></i>
+                  </div>
+                  <strong style="font-size: 0.875rem; color: var(--color-navy);">Pickup On The Way</strong>
+                  <div style="font-size: 0.75rem; color: var(--text-muted);">
+                    ${pickup.status === 'verified' || pickup.status === 'collected' ? 'Reached location' : `Approaching doorstep (~${pickup.etaMinutes || 12} mins away)`}
+                  </div>
+                </div>
+
+                <!-- 4. Collected -->
+                <div class="timeline-item ${pickup.status === 'collected' ? 'active' : pickup.status === 'verified' ? 'done' : ''}">
+                  <div class="timeline-dot">
+                    <i data-lucide="${pickup.status === 'verified' ? 'check' : 'package-check'}" style="width: 12px; height: 12px;"></i>
+                  </div>
+                  <strong style="font-size: 0.875rem; color: var(--color-navy);">Waste Collected</strong>
+                  <div style="font-size: 0.75rem; color: var(--text-muted);">Loaded into segregated compartment</div>
+                </div>
+
+                <!-- 5. Verified -->
+                <div class="timeline-item ${pickup.status === 'verified' ? 'done' : ''}">
+                  <div class="timeline-dot">
+                    <i data-lucide="${pickup.status === 'verified' ? 'check' : 'scale'}" style="width: 12px; height: 12px;"></i>
+                  </div>
+                  <strong style="font-size: 0.875rem; color: var(--color-navy);">Purity Verified & Weighed</strong>
+                  <div style="font-size: 0.75rem; color: var(--text-muted);">Segregation purity approved by worker</div>
+                </div>
+
+                <!-- 6. Points Credited -->
+                <div class="timeline-item ${pickup.status === 'verified' ? 'done' : ''}">
+                  <div class="timeline-dot">
+                    <i data-lucide="${pickup.status === 'verified' ? 'coins' : 'circle'}" style="width: 12px; height: 12px;"></i>
+                  </div>
+                  <strong style="font-size: 0.875rem; color: var(--color-primary-dark);">Green Credits Credited</strong>
+                  <div style="font-size: 0.75rem; color: var(--color-primary-dark); font-weight: 700;">+${pickup.pointsReward} GC awarded to your wallet</div>
+                </div>
+
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+    `;
+
+    setTimeout(() => this.initMap(), 100);
+    if (pickup.status !== 'verified') {
+      setTimeout(() => QRCode.renderInto('live-tracking-qr', pickup.id), 50);
+    }
+    if (window.lucide) {
+      window.lucide.createIcons();
+    }
+  },
+
+  initMap() {
+    const mapElement = document.getElementById('live-tracking-map');
+    if (!mapElement || !window.L) return;
+
+    const userCoord = [19.0760, 72.8777];
+    const vanCoord = [19.0650, 72.8550];
+    const mrfCoord = [19.0880, 72.8950];
+
+    this.mapInstance = MapHelper.initMap('live-tracking-map', [19.0720, 72.8650], 14);
+    if (!this.mapInstance) return;
+
+    // User Home Pin
+    const homePin = MapHelper.createCustomPin('H', 'Shivansh (Home)', '#16A34A');
+    window.L.marker(userCoord, { icon: homePin }).addTo(this.mapInstance);
+
+    // Van Pin
+    const vanPin = MapHelper.createCustomPin('V', 'Waste Van (ETA 12m)', '#2563EB');
+    this.truckMarker = window.L.marker(vanCoord, { icon: vanPin }).addTo(this.mapInstance);
+
+    // MRF Facility Pin
+    const mrfPin = MapHelper.createCustomPin('M', 'Municipal MRF Hub', '#102A43');
+    window.L.marker(mrfCoord, { icon: mrfPin }).addTo(this.mapInstance);
+
+    // Route Polyline
+    const routeCoords = [
+      vanCoord,
+      [19.0690, 72.8620],
+      [19.0730, 72.8710],
+      userCoord,
+      [19.0810, 72.8840],
+      mrfCoord
+    ];
+
+    this.routePolyline = window.L.polyline(routeCoords, {
+      color: '#16A34A',
+      weight: 5,
+      opacity: 0.85,
+      dashArray: '8, 8'
+    }).addTo(this.mapInstance);
+  },
+
+  simulateWorkerMove() {
+    SoundFX.playClick();
+    if (this.truckMarker) {
+      const newLat = 19.0710 + (Math.random() - 0.5) * 0.005;
+      const newLng = 72.8680 + (Math.random() - 0.5) * 0.005;
+      this.truckMarker.setLatLng([newLat, newLng]);
+      State.addNotification({
+        title: 'Van Location Updated',
+        message: 'Ramesh Kumar is now entering Green Park Avenue (~8 mins away).',
+        type: 'pickup'
+      });
+      window.AppRouter.showToast('Telemetry updated: Ramesh is ~8 mins away.');
+    }
+  },
+
+  fastForwardPickup(pickupId) {
+    const result = State.awardCredits(pickupId, 4.5);
+    if (result.alreadyVerified) {
+      SoundFX.playClick();
+      window.AppRouter.showToast('Pickup was already verified — credits are on record.');
+      return;
+    }
+    SoundFX.playPointsEarned();
+    Confetti.trigger(100);
+    window.AppRouter.showToast(`Verified! +${result.points} Green Credits credited.`);
+    this.render();
+  }
+};
+
+window.LiveTrackingView = LiveTrackingView;
diff --git a/js/components/profile.js b/js/components/profile.js
new file mode 100644
index 0000000..edcfc81
--- /dev/null
+++ b/js/components/profile.js
@@ -0,0 +1,162 @@
+/* ==========================================================================
+   CLEANCRED — CITIZEN PROFILE & CIVIC SETTINGS
+   Tactile Neumorphism + Civic Technology
+   ========================================================================== */
+
+import { State } from '../state.js';
+import { Formatters } from '../utils/formatters.js';
+import { SoundFX } from '../utils/audio.js';
+
+export const ProfileView = {
+  render() {
+    const container = document.getElementById('view-profile');
+    if (!container) return;
+
+    const user = State.state.user;
+
+    container.innerHTML = `
+      <div class="app-container" style="max-width: 900px; margin: 0 auto; padding: 1.5rem 1rem 4rem 1rem;">
+        
+        <!-- Header -->
+        <div style="margin-bottom: 2rem;">
+          <div class="badge badge-green" style="margin-bottom: 0.35rem; display: inline-flex; align-items: center; gap: 0.35rem;">
+            <i data-lucide="user" class="lucide-icon-sm"></i>
+            <span>Citizen Profile & Municipal Registry</span>
+          </div>
+          <h2 style="color: var(--color-navy); font-size: 1.85rem; font-weight: 800; margin: 0.25rem 0;">Account & Verification</h2>
+          <p style="color: var(--text-muted); font-size: 0.9rem; margin: 0;">Manage your linked municipal KYC, notification preferences, and civic credentials.</p>
+        </div>
+
+        <!-- 2-Column Profile Layout -->
+        <div class="hero-grid hero-grid-profile" style="gap: 1.75rem;">
+          
+          <!-- Left: Profile Summary Card -->
+          <div class="neu-card neu-card-raised" style="padding: 2rem; text-align: center; border-radius: var(--radius-xl);">
+            <div style="width: 80px; height: 80px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); font-size: 1.8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto; border: 3px solid var(--color-primary); box-shadow: 0 4px 14px rgba(22, 163, 74, 0.2);">
+              ${user.avatar}
+            </div>
+
+            <h3 style="color: var(--color-navy); font-size: 1.3rem; margin: 0 0 0.25rem 0;">${user.name}</h3>
+            <p style="font-size: 0.8rem; color: var(--text-muted); margin: 0 0 1rem 0;">Citizen Member since ${user.joinDate}</p>
+
+            <div style="margin-bottom: 1.5rem;">
+              <span class="badge badge-green" style="display: inline-flex; align-items: center; gap: 0.35rem;">
+                <i data-lucide="shield-check" class="lucide-icon-sm"></i>
+                <span>Aadhaar / SBM KYC Verified</span>
+              </span>
+            </div>
+
+            <div class="neu-card-inset" style="border-radius: var(--radius-md); padding: 1rem; text-align: left; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.6rem;">
+              <div class="flex-between">
+                <span style="color: var(--text-muted);">Green Credits:</span>
+                <strong style="color: var(--color-primary-dark);">${user.greenPoints} GC (₹${Formatters.gpToInr(user.greenPoints)})</strong>
+              </div>
+              <div class="flex-between">
+                <span style="color: var(--text-muted);">Current Ward Rank:</span>
+                <strong style="color: var(--color-navy);">#${user.rank} (Ward 4B)</strong>
+              </div>
+              <div class="flex-between">
+                <span style="color: var(--text-muted);">Segregation Streak:</span>
+                <strong style="color: #B45309; display: flex; align-items: center; gap: 0.25rem;">
+                  <i data-lucide="flame" class="lucide-icon-sm"></i>
+                  <span>${user.greenStreakDays} active days</span>
+                </strong>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right: Details Form & Settings -->
+          <div class="neu-card neu-card-raised" style="padding: 2rem; border-radius: var(--radius-xl);">
+            <h3 style="color: var(--color-navy); margin-bottom: 1.25rem; font-size: 1.25rem; font-weight: 800;">Account Information</h3>
+
+            <div class="form-group">
+              <label class="form-label">Full Name</label>
+              <input type="text" class="form-input neu-input" id="profile-name" value="${user.name}">
+            </div>
+
+            <div class="grid-cols-2" style="gap: 1rem;">
+              <div class="form-group">
+                <label class="form-label">Email Address</label>
+                <input type="email" class="form-input neu-input" id="profile-email" value="${user.email}">
+              </div>
+              <div class="form-group">
+                <label class="form-label">Mobile Number</label>
+                <input type="tel" class="form-input neu-input" id="profile-phone" value="${user.phone}">
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label class="form-label">Registered Residential Address</label>
+              <input type="text" class="form-input neu-input" id="profile-address" value="${user.address}">
+            </div>
+
+            <div style="border-top: 1px solid var(--color-border); padding-top: 1.25rem; margin-top: 1.25rem;">
+              <h4 style="color: var(--color-navy); margin-bottom: 0.75rem; font-size: 0.95rem; font-weight: 800;">Civic Notification Preferences</h4>
+              <label style="display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; margin-bottom: 0.5rem; cursor: pointer; color: var(--text-main);">
+                <input type="checkbox" checked style="accent-color: var(--color-primary);"> Receive real-time SMS & WhatsApp alerts for incoming waste van
+              </label>
+              <label style="display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; margin-bottom: 0.5rem; cursor: pointer; color: var(--text-main);">
+                <input type="checkbox" checked style="accent-color: var(--color-primary);"> Auto-enroll in Weekly Ward 4B Segregation Challenges
+              </label>
+            </div>
+
+            <button class="btn btn-primary" style="margin-top: 1.5rem;" onclick="window.ProfileView.saveProfile()">
+              <i data-lucide="save" class="lucide-icon-sm"></i>
+              <span>Save Changes</span>
+            </button>
+
+            <!-- Demo Controls -->
+            <div style="border-top: 1px solid var(--color-border); padding-top: 1rem; margin-top: 1.75rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;">
+              <span style="font-size: 0.75rem; color: var(--text-muted);">Testing the demo? You can reset state back to seed data.</span>
+              <button class="btn btn-sm btn-secondary" onclick="window.ProfileView.resetDemo()">
+                <i data-lucide="rotate-ccw" class="lucide-icon-sm"></i>
+                <span>Reset Demo State</span>
+              </button>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+    `;
+
+    if (window.lucide) {
+      window.lucide.createIcons();
+    }
+  },
+
+  saveProfile() {
+    SoundFX.playClick();
+    const name = document.getElementById('profile-name').value;
+    const email = document.getElementById('profile-email').value;
+    const phone = document.getElementById('profile-phone').value;
+    const address = document.getElementById('profile-address').value;
+
+    State.state.user.name = name;
+    State.state.user.email = email;
+    State.state.user.phone = phone;
+    State.state.user.address = address;
+
+    State.addNotification({
+      title: 'Profile Updated',
+      message: 'Your account details and municipal pickup address were saved.',
+      type: 'info'
+    });
+
+    State.notify();
+    window.AppRouter.showToast('Profile changes saved successfully.');
+    this.render();
+  },
+
+  resetDemo() {
+    SoundFX.playClick();
+    const confirmed = confirm('Reset all demo data back to its original starting state? This cannot be undone.');
+    if (!confirmed) return;
+
+    State.resetState();
+    window.AppRouter.showToast('Demo reset to initial seed state.');
+    window.AppRouter.navigate('profile');
+  }
+};
+
+window.ProfileView = ProfileView;
diff --git a/js/components/reportWaste.js b/js/components/reportWaste.js
new file mode 100644
index 0000000..cc6c9de
--- /dev/null
+++ b/js/components/reportWaste.js
@@ -0,0 +1,658 @@
+/* ==========================================================================
+   CLEANCRED — 5-STEP VERIFIED WASTE REPORTING FLOW
+   Smart India Hackathon 2026 // Team GreenLegacy
+   Model: Report → Verify → Collect → Record → Earn
+   Tactile Neumorphism + Civic Technology
+   ========================================================================== */
+
+import { State } from '../state.js';
+import { Formatters } from '../utils/formatters.js';
+import { SoundFX } from '../utils/audio.js';
+import { MapHelper } from '../utils/mapHelper.js';
+
+export const ReportWasteView = {
+  currentStep: 1,
+  formData: {
+    category: 'wet', // 'wet' | 'dry' | 'harmful'
+    subType: 'Kitchen Vegetable & Fruit Scraps',
+    quantity: 3.5,
+    address: 'Flat 402, Green Meadows, Ward 4B, Mumbai',
+    ward: 'Ward 4B (Bandra West)',
+    pickupSlot: 'Morning Route (08:00 AM - 11:00 AM)',
+    notes: '',
+    photoUrl: 'https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?w=600&q=80',
+    aiVerified: true,
+    aiPurityScore: 98.4,
+    geoCoords: null,
+    geoStatus: 'idle', // 'idle' | 'loading' | 'success' | 'error'
+    geoLabel: null,
+    geoError: null,
+    geoRequested: false
+  },
+
+  categoryConfig: {
+    wet: {
+      name: 'Wet Waste (Organic)',
+      points: 10,
+      icon: 'apple',
+      color: 'var(--waste-wet)',
+      bg: 'var(--waste-wet-bg)',
+      border: 'var(--waste-wet-border)',
+      destination: 'Ward 4B Biomethanation & Aerobic Composting Facility',
+      subTypes: [
+        'Kitchen Vegetable & Fruit Scraps',
+        'Cooked Food Waste & Leftovers',
+        'Tea Leaves & Coffee Grounds',
+        'Garden Trimmings & Fallen Leaves'
+      ]
+    },
+    dry: {
+      name: 'Dry Waste (Recyclable)',
+      points: 7,
+      icon: 'package',
+      color: 'var(--waste-dry)',
+      bg: 'var(--waste-dry-bg)',
+      border: 'var(--waste-dry-border)',
+      destination: 'Bandra MRF (Material Recovery Facility) & Baler Unit',
+      subTypes: [
+        'Cardboard Shipping Cartons & Paper',
+        'PET Water & Soda Bottles',
+        'Aluminium & Steel Beverage Cans',
+        'Clean Glass Containers & Jars'
+      ]
+    },
+    harmful: {
+      name: 'Harmful Waste (Hazardous)',
+      points: 5,
+      icon: 'battery-charging',
+      color: 'var(--waste-harmful)',
+      bg: 'var(--waste-harmful-bg)',
+      border: 'var(--waste-harmful-border)',
+      destination: 'Authorized State Hazardous & E-Waste Processing Plant',
+      subTypes: [
+        'Used Lithium & Alkaline Batteries',
+        'Discarded Electronics & Circuit Boards',
+        'Fluorescent Tubes & CFL Bulbs',
+        'Expired Domestic Pharmaceutical Medicines'
+      ]
+    }
+  },
+
+  demoCatalog: {
+    wet: [
+      { label: 'Vegetable Scraps', url: 'https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?w=600&q=80' },
+      { label: 'Fruit Peels', url: 'https://images.unsplash.com/photo-1615485290382-441e4d049cb5?w=600&q=80' },
+      { label: 'Compost Mix', url: 'https://images.unsplash.com/photo-1592417817098-8f3d6ef23efc?w=600&q=80' }
+    ],
+    dry: [
+      { label: 'Cardboard & Paper', url: 'https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?w=600&q=80' },
+      { label: 'Plastic Bottles', url: 'https://images.unsplash.com/photo-1604187351574-c75ca79f5807?w=600&q=80' },
+      { label: 'Beverage Cans', url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&q=80' }
+    ],
+    harmful: [
+      { label: 'Used Batteries', url: 'https://images.unsplash.com/photo-1588872657578-7efd1f1555ed?w=600&q=80' },
+      { label: 'E-Waste Circuits', url: 'https://images.unsplash.com/photo-1550009158-9ebf69173e03?w=600&q=80' },
+      { label: 'CFL / Fluorescent', url: 'https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?w=600&q=80' }
+    ]
+  },
+
+  startNewReport(params = {}) {
+    this.currentStep = 1;
+    const cat = (params.category && this.categoryConfig[params.category]) ? params.category : 'wet';
+    const initialPhoto = this.demoCatalog[cat] ? this.demoCatalog[cat][0].url : this.demoCatalog.wet[0].url;
+
+    this.formData = {
+      category: cat,
+      subType: this.categoryConfig[cat].subTypes[0],
+      quantity: 3.5,
+      address: State.state.user.address || 'Flat 402, Green Meadows, Ward 4B, Mumbai',
+      ward: 'Ward 4B (Bandra West)',
+      pickupSlot: 'Morning Route (08:00 AM - 11:00 AM)',
+      notes: '',
+      photoUrl: initialPhoto,
+      aiVerified: true,
+      aiPurityScore: 98.4,
+      geoCoords: null,
+      geoStatus: 'idle',
+      geoLabel: null,
+      geoError: null,
+      geoRequested: false
+    };
+
+    this.render(params);
+  },
+
+  render(params = {}) {
+    const container = document.getElementById('view-report-waste');
+    if (!container) return;
+
+    if (params.category && this.categoryConfig[params.category]) {
+      this.formData.category = params.category;
+      this.formData.subType = this.categoryConfig[params.category].subTypes[0];
+    }
+
+    container.innerHTML = `
+      <div class="app-container report-wizard-container animate-fade-in" style="max-width: 820px; margin: 0 auto; padding-bottom: 5rem;">
+        
+        <!-- Header -->
+        <div class="wizard-step-header">
+          <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem;">
+            <button class="btn btn-secondary btn-sm" onclick="window.AppRouter.navigate('dashboard')">
+              <i data-lucide="arrow-left" class="lucide-icon-sm"></i>
+              <span>Back to Home</span>
+            </button>
+            <span class="badge badge-green" style="display: inline-flex; align-items: center; gap: 0.3rem;">
+              <i data-lucide="shield-check" class="lucide-icon-sm"></i>
+              <span>Swachh Bharat Mission (Urban)</span>
+            </span>
+          </div>
+          <h1 class="wizard-step-title">Report Waste Collection</h1>
+          <p class="wizard-step-desc">
+            Schedule verified municipal collection. Green Credits are credited upon scale verification by Ramesh Kumar.
+          </p>
+        </div>
+
+        <!-- 5-Step Progress Bar -->
+        <div class="wizard-progress-bar neu-card-inset" style="padding: 1.25rem 1rem; border-radius: var(--radius-lg); margin-bottom: 1.5rem; position: relative;">
+          <div style="position: absolute; top: 32px; left: 10%; right: 10%; height: 3px; background: #CBD5E1; z-index: 1;">
+            <div style="width: ${(this.currentStep - 1) * 25}%; height: 100%; background: var(--color-primary); transition: width 0.3s ease;"></div>
+          </div>
+
+          <div style="display: flex; justify-content: space-between; position: relative; z-index: 2;">
+            <div class="wizard-step-node ${this.currentStep === 1 ? 'active' : this.currentStep > 1 ? 'completed' : ''}" onclick="window.ReportWasteView.goToStep(1)">
+              <div class="wizard-node-circle">${this.currentStep > 1 ? '✓' : '1'}</div>
+              <span class="wizard-node-label">Category</span>
+            </div>
+
+            <div class="wizard-step-node ${this.currentStep === 2 ? 'active' : this.currentStep > 2 ? 'completed' : ''}" onclick="window.ReportWasteView.goToStep(2)">
+              <div class="wizard-node-circle">${this.currentStep > 2 ? '✓' : '2'}</div>
+              <span class="wizard-node-label">AI Purity</span>
+            </div>
+
+            <div class="wizard-step-node ${this.currentStep === 3 ? 'active' : this.currentStep > 3 ? 'completed' : ''}" onclick="window.ReportWasteView.goToStep(3)">
+              <div class="wizard-node-circle">${this.currentStep > 3 ? '✓' : '3'}</div>
+              <span class="wizard-node-label">Location</span>
+            </div>
+
+            <div class="wizard-step-node ${this.currentStep === 4 ? 'active' : this.currentStep > 4 ? 'completed' : ''}" onclick="window.ReportWasteView.goToStep(4)">
+              <div class="wizard-node-circle">${this.currentStep > 4 ? '✓' : '4'}</div>
+              <span class="wizard-node-label">Review</span>
+            </div>
+
+            <div class="wizard-step-node ${this.currentStep === 5 ? 'active' : ''}">
+              <div class="wizard-node-circle">5</div>
+              <span class="wizard-node-label">Status</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Step Content -->
+        <div class="neu-card neu-card-raised" style="padding: 2rem; border-radius: var(--radius-xl);">
+          ${this.renderStepContent()}
+        </div>
+
+      </div>
+    `;
+
+    if (window.lucide) window.lucide.createIcons();
+  },
+
+  renderStepContent() {
+    const config = this.categoryConfig[this.formData.category];
+
+    switch (this.currentStep) {
+      case 1:
+        return `
+          <div>
+            <div class="wizard-step-eyebrow">Step 1 of 4 &bull; Categorization</div>
+            <h2 class="wizard-step-title">Select Waste Category</h2>
+            <p class="wizard-step-desc">
+              Source segregation ensures high recovery efficiency and unlocks Green Credits.
+            </p>
+
+            <!-- 3 Category Options -->
+            <div style="display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.5rem;">
+              
+              <div class="waste-card-option wet neu-card-flat ${this.formData.category === 'wet' ? 'selected' : ''}" onclick="window.ReportWasteView.setCategory('wet')" style="cursor: pointer; min-height: 52px;">
+                <div class="flex-between">
+                  <div style="display: flex; align-items: center; gap: 0.75rem;">
+                    <div style="width: 44px; height: 44px; border-radius: 50%; background: var(--waste-wet-bg); color: var(--waste-wet); display: flex; align-items: center; justify-content: center;">
+                      <i data-lucide="apple" class="lucide-icon-md"></i>
+                    </div>
+                    <div>
+                      <strong style="font-size: 1.05rem; color: var(--color-navy); display: flex; align-items: center; gap: 0.35rem;">
+                        Wet Waste (Organic)
+                        ${this.formData.category === 'wet' ? '<i data-lucide="check" class="lucide-icon-xs" style="color: var(--waste-wet);"></i>' : ''}
+                      </strong>
+                      <div style="font-size: 0.78rem; color: var(--text-muted);">Vegetable peels, food scraps, cooked leftovers, garden leaves</div>
+                    </div>
+                  </div>
+                  <span class="badge badge-green" style="font-size: 0.85rem; padding: 0.35rem 0.75rem;">+10 GC/KG</span>
+                </div>
+              </div>
+
+              <div class="waste-card-option dry neu-card-flat ${this.formData.category === 'dry' ? 'selected' : ''}" onclick="window.ReportWasteView.setCategory('dry')" style="cursor: pointer; min-height: 52px;">
+                <div class="flex-between">
+                  <div style="display: flex; align-items: center; gap: 0.75rem;">
+                    <div style="width: 44px; height: 44px; border-radius: 50%; background: var(--waste-dry-bg); color: var(--waste-dry); display: flex; align-items: center; justify-content: center;">
+                      <i data-lucide="package" class="lucide-icon-md"></i>
+                    </div>
+                    <div>
+                      <strong style="font-size: 1.05rem; color: var(--color-navy); display: flex; align-items: center; gap: 0.35rem;">
+                        Dry Waste (Recyclable)
+                        ${this.formData.category === 'dry' ? '<i data-lucide="check" class="lucide-icon-xs" style="color: var(--waste-dry);"></i>' : ''}
+                      </strong>
+                      <div style="font-size: 0.78rem; color: var(--text-muted);">Cardboard cartons, PET plastic, beverage cans, clean paper</div>
+                    </div>
+                  </div>
+                  <span class="badge badge-blue" style="font-size: 0.85rem; padding: 0.35rem 0.75rem;">+7 GC/KG</span>
+                </div>
+              </div>
+
+              <div class="waste-card-option harmful neu-card-flat ${this.formData.category === 'harmful' ? 'selected' : ''}" onclick="window.ReportWasteView.setCategory('harmful')" style="cursor: pointer; min-height: 52px;">
+                <div class="flex-between">
+                  <div style="display: flex; align-items: center; gap: 0.75rem;">
+                    <div style="width: 44px; height: 44px; border-radius: 50%; background: var(--waste-harmful-bg); color: var(--waste-harmful); display: flex; align-items: center; justify-content: center;">
+                      <i data-lucide="battery-charging" class="lucide-icon-md"></i>
+                    </div>
+                    <div>
+                      <strong style="font-size: 1.05rem; color: var(--color-navy); display: flex; align-items: center; gap: 0.35rem;">
+                        Harmful Waste (Hazardous)
+                        ${this.formData.category === 'harmful' ? '<i data-lucide="check" class="lucide-icon-xs" style="color: var(--waste-harmful);"></i>' : ''}
+                      </strong>
+                      <div style="font-size: 0.78rem; color: var(--text-muted);">Batteries, domestic e-waste, fluorescent lamps, expired medicines</div>
+                    </div>
+                  </div>
+                  <span class="badge badge-red" style="font-size: 0.85rem; padding: 0.35rem 0.75rem;">+5 GC/KG</span>
+                </div>
+              </div>
+
+            </div>
+
+            <!-- Subtype Selection -->
+            <div class="form-group" style="margin-bottom: 1.5rem;">
+              <label class="form-label">Specify Waste Material Sub-Type</label>
+              <select id="select-waste-subtype" class="form-select neu-input" onchange="window.ReportWasteView.setSubType(this.value)">
+                ${config.subTypes.map(st => `
+                  <option value="${st}" ${this.formData.subType === st ? 'selected' : ''}>${st}</option>
+                `).join('')}
+              </select>
+            </div>
+
+            <!-- Estimated Quantity (BUG 1 FIX: Smooth non-destructive slider) -->
+            <div style="margin-bottom: 1.75rem;">
+              <div class="flex-between" style="margin-bottom: 0.35rem;">
+                <label class="form-label" style="margin: 0;">Estimated Weight</label>
+                <strong id="display-weight-val" style="font-size: 1.1rem; color: var(--color-primary-dark);">${this.formData.quantity} KG</strong>
+              </div>
+              <input type="range" min="1" max="15" step="0.5" value="${this.formData.quantity}" style="width: 100%; accent-color: var(--color-primary);" oninput="window.ReportWasteView.setQuantity(this.value)">
+              <div class="flex-between" style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;">
+                <span>1 KG (Small Bin)</span>
+                <span>5 KG (Standard Bin)</span>
+                <span>15 KG (Bulk Collection)</span>
+              </div>
+            </div>
+
+            <button class="btn btn-primary btn-lg btn-full" onclick="window.ReportWasteView.goToStep(2)">
+              <span>Next: Photo &amp; AI Purity Check</span>
+              <i data-lucide="arrow-right" class="lucide-icon-sm"></i>
+            </button>
+          </div>
+        `;
+
+      case 2:
+        const demos = this.demoCatalog[this.formData.category] || this.demoCatalog.wet;
+        return `
+          <div>
+            <div class="wizard-step-eyebrow">Step 2 of 4 &bull; Visual Purity Verification</div>
+            <h2 class="wizard-step-title">Upload Photo Proof</h2>
+            <p class="wizard-step-desc">
+              Computer vision validates segregation compliance for <strong>${config.name}</strong>.
+            </p>
+
+            <!-- Main Photo Upload & Preview Box -->
+            <div class="photo-upload-zone" style="margin-bottom: 1.25rem;">
+              <!-- Upload Action at Top -->
+              <input type="file" id="waste-photo-file-input" accept="image/*" style="display: none;" onchange="window.ReportWasteView.handleFileUpload(this)">
+              <button type="button" class="btn btn-primary btn-upload-photo" onclick="document.getElementById('waste-photo-file-input').click()" style="width: 100%; margin-bottom: 0.85rem;">
+                <i data-lucide="upload" class="lucide-icon-sm"></i>
+                <span>Upload Photo from Device</span>
+              </button>
+
+              <div style="position: relative; width: 100%; border-radius: var(--radius-md); overflow: hidden; border: 1.5px solid var(--color-border); background: var(--bg-surface); margin-bottom: 0.5rem;">
+                <img src="${this.formData.photoUrl}" alt="Waste Preview" style="width: 100%; max-height: 200px; object-fit: cover; display: block;" />
+              </div>
+              
+              <div style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--color-navy);">
+                <i data-lucide="camera" class="lucide-icon-sm"></i>
+                <span>Attached: ${this.formData.subType}</span>
+              </div>
+            </div>
+
+            <!-- Explicit Demo Image Selection Grid (BUG 2 FIX) -->
+            <div class="demo-picker-container">
+              <label class="form-label" style="display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem;">
+                <i data-lucide="image" class="lucide-icon-sm"></i>
+                <span>Or select a sample demonstration image:</span>
+              </label>
+              <div class="demo-picker-grid">
+                ${demos.map(d => `
+                  <div class="demo-thumb-btn ${this.formData.photoUrl === d.url ? 'active' : ''}" onclick="window.ReportWasteView.selectDemoImage('${d.url}')">
+                    <img src="${d.url}" alt="${d.label}" class="demo-thumb-img" />
+                    <span class="demo-thumb-label">${d.label}</span>
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+
+            <!-- AI Automated Verification Card -->
+            <div class="neu-card-flat" style="display: flex; gap: 1rem; padding: 1.25rem; border-radius: var(--radius-md); border-left: 4px solid var(--color-primary); margin-top: 1.25rem;">
+              <div style="width: 44px; height: 44px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
+                <i data-lucide="sparkles" class="lucide-icon-md"></i>
+              </div>
+              <div>
+                <strong style="color: var(--color-primary-dark); font-size: 0.95rem; display: block;">
+                  AI Purity Pre-Check Passed (${this.formData.aiPurityScore}% Score)
+                </strong>
+                <p style="font-size: 0.82rem; color: var(--text-muted); margin: 0.2rem 0 0.4rem 0;">
+                  Waste matches <strong>${this.formData.category.toUpperCase()}</strong> classification with zero cross-contamination detected.
+                </p>
+                <span class="badge badge-green">✓ Segregation Verified</span>
+              </div>
+            </div>
+
+            <div class="step-nav-grid" style="margin-top: 1.5rem;">
+              <button class="btn btn-secondary btn-lg" onclick="window.ReportWasteView.goToStep(1)">
+                <i data-lucide="arrow-left" class="lucide-icon-sm"></i>
+                <span>Back</span>
+              </button>
+              <button class="btn btn-primary btn-lg" onclick="window.ReportWasteView.goToStep(3)">
+                <span>Confirm Location &amp; Schedule</span>
+                <i data-lucide="arrow-right" class="lucide-icon-sm"></i>
+              </button>
+            </div>
+          </div>
+        `;
+
+      case 3:
+        return `
+          <div>
+            <div class="wizard-step-eyebrow">Step 3 of 4 &bull; Municipal Routing</div>
+            <h2 class="wizard-step-title">Pickup Location &amp; Time Slot</h2>
+            <p class="wizard-step-desc">
+              Your location ensures direct route dispatch to Ramesh Kumar's electric collection van.
+            </p>
+
+            <!-- Real Geolocation Card (BUG 3 FIX) -->
+            <div class="neu-card-inset geo-status-box" style="margin-bottom: 1.25rem;">
+              <div class="flex-between" style="flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem;">
+                ${this.formData.geoStatus === 'loading' ? `
+                  <span class="badge badge-amber" style="display: inline-flex; align-items: center; gap: 0.35rem;">
+                    <i data-lucide="loader-2" class="lucide-icon-sm animate-spin"></i>
+                    <span>Detecting Device Coordinates...</span>
+                  </span>
+                ` : this.formData.geoStatus === 'success' && this.formData.geoCoords ? `
+                  <span class="badge badge-green" style="display: inline-flex; align-items: center; gap: 0.35rem;">
+                    <i data-lucide="map-pin" class="lucide-icon-sm"></i>
+                    <span>Location detected: ${this.formData.geoLabel || 'GPS Accurate (±8m)'}</span>
+                  </span>
+                ` : `
+                  <span class="badge badge-green" style="display: inline-flex; align-items: center; gap: 0.35rem;">
+                    <i data-lucide="map-pin" class="lucide-icon-sm"></i>
+                    <span>Location detected &bull; High Accuracy (GPS ±12m)</span>
+                  </span>
+                `}
+
+                <button type="button" class="btn btn-secondary btn-sm" onclick="window.ReportWasteView.detectLocation()">
+                  <i data-lucide="crosshair" class="lucide-icon-sm"></i>
+                  <span>${this.formData.geoCoords ? 'Update Location' : 'Refresh GPS'}</span>
+                </button>
+              </div>
+
+              <!-- Editable Pickup Address Input -->
+              <div class="form-group" style="margin: 0;">
+                <label class="form-label">Doorstep Pickup Address</label>
+                <input type="text" id="report-address-input" class="form-input neu-input" value="${this.formData.address}" oninput="window.ReportWasteView.formData.address = this.value" placeholder="Enter flat/house no., building, street">
+              </div>
+            </div>
+
+            <!-- Route Slot Selection -->
+            <div style="margin-bottom: 1.25rem;">
+              <label class="form-label">Select Designated Collection Slot</label>
+              <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+                <label class="neu-card-inset" style="display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--color-navy);">
+                  <input type="radio" name="pickupSlot" value="Morning Route (08:00 AM - 11:00 AM)" ${this.formData.pickupSlot.includes('Morning') ? 'checked' : ''} onchange="window.ReportWasteView.formData.pickupSlot = this.value" style="accent-color: var(--color-primary);">
+                  <span>Morning Municipal Route &bull; 08:00 AM - 11:00 AM (Standard)</span>
+                </label>
+                <label class="neu-card-flat" style="display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); cursor: pointer; font-size: 0.85rem; color: var(--text-secondary);">
+                  <input type="radio" name="pickupSlot" value="Afternoon Route (02:00 PM - 05:00 PM)" ${this.formData.pickupSlot.includes('Afternoon') ? 'checked' : ''} onchange="window.ReportWasteView.formData.pickupSlot = this.value" style="accent-color: var(--color-primary);">
+                  <span>Afternoon Route &bull; 02:00 PM - 05:00 PM (Special Recovery)</span>
+                </label>
+              </div>
+            </div>
+
+            <!-- Notes -->
+            <div class="form-group" style="margin-bottom: 1.5rem;">
+              <label class="form-label">Doorstep Handover Note (Optional)</label>
+              <input type="text" class="form-input neu-input" value="${this.formData.notes}" oninput="window.ReportWasteView.formData.notes = this.value" placeholder="e.g. Leave at gate or ring bell">
+            </div>
+
+            <div class="step-nav-grid">
+              <button class="btn btn-secondary btn-lg" onclick="window.ReportWasteView.goToStep(2)">
+                <i data-lucide="arrow-left" class="lucide-icon-sm"></i>
+                <span>Back</span>
+              </button>
+              <button class="btn btn-primary btn-lg" onclick="window.ReportWasteView.goToStep(4)">
+                <span>Review &amp; Confirm Request</span>
+                <i data-lucide="arrow-right" class="lucide-icon-sm"></i>
+              </button>
+            </div>
+          </div>
+        `;
+
+      case 4:
+        return `
+          <div>
+            <div class="wizard-step-eyebrow">Step 4 of 4 &bull; Final Verification Summary</div>
+            <h2 class="wizard-step-title">Review Report Details</h2>
+            <p class="wizard-step-desc">
+              Please review your pickup summary. A municipal officer will verify weight and purity at handover.
+            </p>
+
+            <div class="neu-card-flat" style="border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1.25rem;">
+              <div style="padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); background: var(--bg-surface-elevated); display: flex; align-items: center; justify-content: space-between;">
+                <span class="badge ${this.formData.category === 'wet' ? 'badge-green' : this.formData.category === 'dry' ? 'badge-blue' : 'badge-red'}">
+                  ${config.name}
+                </span>
+                <strong style="font-size: 1.05rem; color: var(--color-primary-dark);">+${config.points} GC/KG (Gated on Verification)</strong>
+              </div>
+
+              <div style="padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.85rem;">
+                <div class="flex-between">
+                  <span style="color: var(--text-muted);">Material Sub-type:</span>
+                  <strong style="color: var(--color-navy);">${this.formData.subType}</strong>
+                </div>
+                <div class="flex-between">
+                  <span style="color: var(--text-muted);">Estimated Quantity:</span>
+                  <strong style="color: var(--color-navy);">${this.formData.quantity} KG</strong>
+                </div>
+                <div class="flex-between">
+                  <span style="color: var(--text-muted);">Handover Address:</span>
+                  <strong style="color: var(--color-navy); text-align: right;">${this.formData.address}</strong>
+                </div>
+                <div class="flex-between">
+                  <span style="color: var(--text-muted);">Selected Slot:</span>
+                  <span style="color: var(--text-secondary); text-align: right;">${this.formData.pickupSlot}</span>
+                </div>
+                <div class="flex-between">
+                  <span style="color: var(--text-muted);">Destination Facility:</span>
+                  <span style="color: var(--text-secondary); text-align: right;">${config.destination}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Official Rule Notice -->
+            <div class="neu-card-inset" style="border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1.5rem; font-size: 0.825rem; border-left: 4px solid var(--color-amber);">
+              <strong style="color: #92400E; display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.25rem;">
+                <i data-lucide="alert-triangle" class="lucide-icon-sm"></i>
+                <span>Verification Rule:</span>
+              </strong>
+              <span style="color: #78350F;">
+                Green Credits are <em>not</em> credited on report submission. They will be deposited into your wallet once municipal worker Ramesh Kumar verifies segregation on his digital scale.
+              </span>
+            </div>
+
+            <div class="step-nav-grid">
+              <button class="btn btn-secondary btn-lg" onclick="window.ReportWasteView.goToStep(3)">
+                <i data-lucide="arrow-left" class="lucide-icon-sm"></i>
+                <span>Edit</span>
+              </button>
+              <button class="btn btn-primary btn-lg" onclick="window.ReportWasteView.submitRequest()">
+                <span>Confirm &amp; Submit Request</span>
+                <i data-lucide="check" class="lucide-icon-sm"></i>
+              </button>
+            </div>
+          </div>
+        `;
+
+      case 5:
+        const latest = State.state.pickups[0];
+        return `
+          <div style="text-align: center; padding: 1.5rem 0;">
+            <div style="width: 64px; height: 64px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); font-size: 1.8rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto; box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25);">
+              <i data-lucide="check" class="lucide-icon-lg"></i>
+            </div>
+
+            <span class="badge badge-green" style="margin-bottom: 0.5rem;">Request Registered Successfully</span>
+            <h2 style="color: var(--color-navy); font-size: 1.6rem; font-weight: 800; margin-bottom: 0.25rem;">Awaiting Municipal Collection</h2>
+            <p style="font-size: 0.88rem; color: var(--text-muted); max-width: 480px; margin: 0 auto 1.5rem auto;">
+              Your waste collection request has been dispatched to <strong>Worker Ramesh Kumar</strong>. Hand over your waste bag and share the OTP below.
+            </p>
+
+            <div class="neu-card-inset" style="border-radius: var(--radius-lg); padding: 1.5rem; max-width: 380px; margin: 0 auto 1.75rem auto;">
+              <div class="eyebrow" style="margin-bottom: 0.25rem; font-size: 0.75rem;">Collection Handover OTP</div>
+              <div style="font-family: var(--font-heading); font-size: 2.5rem; font-weight: 900; letter-spacing: 0.15em; color: var(--color-primary-dark); margin: 0.25rem 0;">
+                ${latest ? latest.otp : '8492'}
+              </div>
+              <div style="font-size: 0.78rem; color: var(--text-muted);">
+                Request ID: <strong>${latest ? latest.id : 'GK-2026-NEW'}</strong> &bull; Worker ETA: <strong>18 mins</strong>
+              </div>
+            </div>
+
+            <div style="display: flex; flex-direction: column; gap: 0.75rem; max-width: 380px; margin: 0 auto;">
+              <button class="btn btn-primary btn-block btn-lg" onclick="window.AppRouter.navigate('live-tracking')">
+                <i data-lucide="navigation" class="lucide-icon-sm"></i>
+                <span>Track Pickup</span>
+              </button>
+              <button class="btn btn-secondary btn-block btn-lg" onclick="window.ReportWasteView.startNewReport()">
+                <i data-lucide="plus" class="lucide-icon-sm"></i>
+                <span>Report Another Waste</span>
+              </button>
+              <button class="btn btn-secondary btn-block btn-sm" onclick="window.AppRouter.navigate('dashboard')" style="border: none; background: transparent; box-shadow: none; color: var(--text-muted); padding: 0.35rem;">
+                <span>Return to Home</span>
+              </button>
+            </div>
+          </div>
+        `;
+
+      default:
+        return `<p>Invalid step</p>`;
+    }
+  },
+
+  setCategory(cat) {
+    SoundFX.playClick();
+    this.formData.category = cat;
+    this.formData.subType = this.categoryConfig[cat].subTypes[0];
+    const catalog = this.demoCatalog[cat] || this.demoCatalog.wet;
+    this.formData.photoUrl = catalog[0].url;
+    this.render();
+  },
+
+  setSubType(val) {
+    this.formData.subType = val;
+  },
+
+  setQuantity(val) {
+    this.formData.quantity = parseFloat(val);
+    const lbl = document.getElementById('display-weight-val');
+    if (lbl) {
+      lbl.textContent = `${this.formData.quantity} KG`;
+    }
+  },
+
+  goToStep(step) {
+    SoundFX.playClick();
+    this.currentStep = step;
+    this.render();
+
+    // If entering Step 3 and location hasn't been requested, trigger GPS detection
+    if (step === 3 && !this.formData.geoRequested) {
+      this.formData.geoRequested = true;
+      this.detectLocation();
+    }
+  },
+
+  handleFileUpload(input) {
+    const file = input && input.files ? input.files[0] : null;
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      this.formData.photoUrl = e.target.result;
+      this.formData.aiPurityScore = Math.round((96 + Math.random() * 3.5) * 10) / 10;
+      SoundFX.playClick();
+      this.render();
+      if (window.AppRouter && window.AppRouter.showToast) {
+        window.AppRouter.showToast('Photo proof uploaded & purity checked.');
+      }
+    };
+    reader.readAsDataURL(file);
+  },
+
+  selectDemoImage(url) {
+    SoundFX.playClick();
+    this.formData.photoUrl = url;
+    this.formData.aiPurityScore = Math.round((96 + Math.random() * 3.8) * 10) / 10;
+    this.render();
+  },
+
+  async detectLocation() {
+    this.formData.geoStatus = 'loading';
+    this.render();
+
+    try {
+      const pos = await MapHelper.getUserLocation();
+      this.formData.geoCoords = { lat: pos.lat, lng: pos.lng };
+      this.formData.geoLabel = MapHelper.formatCoords(pos.lat, pos.lng);
+      this.formData.geoStatus = 'success';
+      this.formData.geoError = null;
+      this.render();
+      if (window.AppRouter && window.AppRouter.showToast) {
+        window.AppRouter.showToast('GPS coordinates locked successfully.');
+      }
+    } catch (err) {
+      this.formData.geoStatus = 'error';
+      this.formData.geoError = err.message || 'GPS access denied or unavailable.';
+      this.render();
+    }
+  },
+
+  submitRequest() {
+    SoundFX.playPointsEarned();
+    State.createWasteRequest({
+      category: this.formData.category,
+      subType: this.formData.subType,
+      quantity: this.formData.quantity,
+      address: this.formData.address,
+      notes: this.formData.notes,
+      photoUrl: this.formData.photoUrl,
+      geoCoords: this.formData.geoCoords
+    });
+
+    this.currentStep = 5;
+    this.render();
+  }
+};
+
+window.ReportWasteView = ReportWasteView;
diff --git a/rewardsWallet.js b/js/components/rewardsWallet.js
similarity index 51%
rename from rewardsWallet.js
rename to js/components/rewardsWallet.js
index fe3ef4d..7f51524 100644
--- a/rewardsWallet.js
+++ b/js/components/rewardsWallet.js
@@ -1,6 +1,7 @@
 /* ==========================================================================
-   GREEN KARMA — FINTECH GREEN WALLET & REWARDS STORE
-   Points Conversion: 100 Green Points = ₹10 INR
+   CLEANCRED — FINTECH GREEN WALLET & REWARDS STORE
+   Tactile Neumorphism + Civic Technology
+   Points Conversion: 100 Green Credits = ₹10 INR
    ========================================================================== */
 
 import { State } from '../state.js';
@@ -18,79 +19,108 @@ export const RewardsWallet = {
     const user = State.state.user;
     const inrValue = Formatters.gpToInr(user.greenPoints);
 
+    // Derive lifetime earnings / redeemed value from ledger
+    const lifetimeEarnedGp = State.state.transactions
+      .filter(t => t.type === 'credit')
+      .reduce((sum, t) => sum + t.amountGp, 0);
+    const lifetimeEarnedInr = Formatters.gpToInr(lifetimeEarnedGp);
+    const avgEarningPerPickupInr = user.pickupsCompleted > 0
+      ? Math.round((lifetimeEarnedInr / user.pickupsCompleted) * 100) / 100
+      : 0;
+
+    const totalRedeemedGp = State.state.transactions
+      .filter(t => t.type === 'debit')
+      .reduce((sum, t) => sum + t.amountGp, 0);
+    const totalRedeemedInr = Formatters.gpToInr(totalRedeemedGp);
+
     container.innerHTML = `
-      <div class="app-container">
+      <div class="app-container" style="max-width: 1100px; margin: 0 auto; padding-top: 1rem; padding-bottom: 4rem;">
         
         <!-- Header -->
         <div class="flex-between" style="margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
           <div>
-            <div class="badge badge-green" style="margin-bottom: 0.35rem;">
-              <span>🌱</span> Green Karma Fintech Wallet
+            <div class="badge badge-green" style="margin-bottom: 0.35rem; display: inline-flex; align-items: center; gap: 0.35rem;">
+              <i data-lucide="wallet" class="lucide-icon-sm"></i>
+              <span>CleanCred Rewards Account</span>
             </div>
-            <h2>Green Points & Rewards Store</h2>
-            <p>Convert responsible waste disposal into real-world utility savings and shopping vouchers.</p>
+            <h2 style="color: var(--color-navy); font-size: 1.85rem; font-weight: 800; margin: 0.25rem 0;">Green Credits Wallet</h2>
+            <p style="color: var(--text-muted); font-size: 0.9rem; margin: 0;">Verified recovery balance, municipal credits, and civic redemption catalog.</p>
           </div>
 
           <!-- Fast Conversion Banner -->
-          <div style="background: rgba(22, 163, 74, 0.1); border: 1.5px solid var(--color-primary); padding: 0.5rem 1rem; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 700; color: var(--color-primary-dark);">
-            ⚡ Conversion Rate: 100 GP = ₹10 INR
+          <div class="neu-card-inset" style="padding: 0.6rem 1rem; border-radius: 9999px; font-size: 0.85rem; font-weight: 700; color: var(--color-primary-dark); display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; box-sizing: border-box;">
+            <i data-lucide="scale" class="lucide-icon-sm"></i>
+            <span>Standard Rate: 100 GC = ₹10 INR</span>
           </div>
         </div>
 
         <!-- 3-Card Wallet Overview -->
-        <div class="grid-cols-3" style="margin-bottom: 2.5rem;">
+        <div class="rewards-overview-grid">
           
-          <!-- Balance Card -->
-          <div class="glass-card glass-card-emerald" style="padding: 2rem; border-radius: var(--radius-xl);">
+          <!-- Balance Card (Forest Raised) -->
+          <div class="neu-card neu-card-forest rewards-card-primary" style="color: #FFFFFF;">
             <div class="flex-between" style="margin-bottom: 1rem;">
-              <span style="font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: #DCFCE7;">Available Green Balance</span>
-              <span style="font-size: 1.5rem;">💳</span>
+              <span style="font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #DCFCE7;">Available Balance</span>
+              <div style="width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center;">
+                <i data-lucide="coins" class="lucide-icon-sm" style="color: #FFFFFF;"></i>
+              </div>
             </div>
-            <div style="font-size: 2.8rem; font-weight: 900; color: #FFFFFF; line-height: 1;">
-              ${Formatters.formatNumber(user.greenPoints)} <span style="font-size: 1.25rem; font-weight: 600;">GP</span>
+            <div class="rewards-card-amount">
+              ${Formatters.formatNumber(user.greenPoints)} <span style="font-size: 1.25rem; font-weight: 600; opacity: 0.9;">GC</span>
             </div>
-            <div style="margin-top: 0.75rem; font-size: 1.05rem; font-weight: 700; color: #DCFCE7;">
-              ≈ ${Formatters.formatCurrency(inrValue)} Real Cash Value
+            <div style="font-size: 1rem; font-weight: 700; color: #DCFCE7;">
+              ≈ ${Formatters.formatCurrency(inrValue)} real value
             </div>
-            <div style="display: flex; gap: 0.75rem; margin-top: 1.5rem;">
-              <button class="btn btn-secondary btn-sm" style="background: #FFFFFF; color: var(--color-primary-dark);" onclick="window.RewardsWallet.openRechargeModal()">
-                📱 Recharge
+            <div style="display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap;">
+              <button class="btn btn-secondary btn-sm" style="background: #FFFFFF; color: var(--color-primary-dark); font-weight: 800; border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.15);" onclick="window.RewardsWallet.openRechargeModal()">
+                <i data-lucide="smartphone" class="lucide-icon-sm"></i>
+                <span>Recharge</span>
               </button>
-              <button class="btn btn-secondary btn-sm" style="background: rgba(255,255,255,0.2); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.4);" onclick="window.RewardsWallet.openBillsModal()">
-                💡 Pay Bills
+              <button class="btn btn-secondary btn-sm" style="background: rgba(255,255,255,0.18); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.35);" onclick="window.RewardsWallet.openBillsModal()">
+                <i data-lucide="file-text" class="lucide-icon-sm"></i>
+                <span>Pay Bills</span>
               </button>
             </div>
           </div>
 
-          <!-- Total Earned All-Time -->
-          <div class="glass-card" style="padding: 2rem; border-radius: var(--radius-xl);">
+          <!-- Total Earned All-Time (Raised Tactile) -->
+          <div class="neu-card neu-card-raised rewards-card-compact">
             <div class="flex-between" style="margin-bottom: 1rem;">
-              <span style="font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted);">Lifetime Earnings</span>
-              <span style="font-size: 1.5rem;">📈</span>
+              <span style="font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);">Lifetime Earnings</span>
+              <div style="width: 32px; height: 32px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center;">
+                <i data-lucide="trending-up" class="lucide-icon-sm"></i>
+              </div>
             </div>
-            <div style="font-size: 2.8rem; font-weight: 900; color: var(--color-navy); line-height: 1;">
-              1,680 <span style="font-size: 1.25rem; font-weight: 600; color: var(--text-muted);">GP</span>
+            <div class="rewards-card-amount" style="color: var(--color-navy);">
+              ${Formatters.formatNumber(lifetimeEarnedGp)} <span style="font-size: 1.25rem; font-weight: 600; color: var(--text-muted);">GC</span>
             </div>
-            <div style="margin-top: 0.75rem; font-size: 0.9rem; color: var(--color-primary); font-weight: 700;">
-              ≈ ₹168.00 Earned via 18 Pickups
+            <div style="font-size: 0.9rem; color: var(--color-primary-dark); font-weight: 700;">
+              ≈ ${Formatters.formatCurrency(lifetimeEarnedInr)} via ${user.pickupsCompleted} verified pickups
             </div>
-            <p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 1rem;">Average earning: ₹28.50 per week through segregated disposal.</p>
+            <p style="font-size: 0.78rem; color: var(--text-muted); margin-top: 1rem; line-height: 1.4;">
+              Average earning: ${Formatters.formatCurrency(avgEarningPerPickupInr)} per verified collection.
+            </p>
           </div>
 
-          <!-- Total Redeemed -->
-          <div class="glass-card" style="padding: 2rem; border-radius: var(--radius-xl);">
+          <!-- Total Redeemed (Raised Tactile) -->
+          <div class="neu-card neu-card-raised rewards-card-compact">
             <div class="flex-between" style="margin-bottom: 1rem;">
-              <span style="font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted);">Redeemed Value</span>
-              <span style="font-size: 1.5rem;">🎁</span>
+              <span style="font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);">Redeemed Value</span>
+              <div style="width: 32px; height: 32px; border-radius: 50%; background: #DBEAFE; color: #1E40AF; display: flex; align-items: center; justify-content: center;">
+                <i data-lucide="check-circle-2" class="lucide-icon-sm"></i>
+              </div>
             </div>
-            <div style="font-size: 2.8rem; font-weight: 900; color: var(--color-navy); line-height: 1;">
-              430 <span style="font-size: 1.25rem; font-weight: 600; color: var(--text-muted);">GP</span>
+            <div class="rewards-card-amount" style="color: var(--color-navy);">
+              ${Formatters.formatNumber(totalRedeemedGp)} <span style="font-size: 1.25rem; font-weight: 600; color: var(--text-muted);">GC</span>
             </div>
-            <div style="margin-top: 0.75rem; font-size: 0.9rem; color: var(--text-muted); font-weight: 600;">
-              ₹43.00 Redeemed (Recharge & Vouchers)
+            <div style="font-size: 0.9rem; color: var(--text-muted); font-weight: 600;">
+              ${Formatters.formatCurrency(totalRedeemedInr)} redeemed (Recharge & Vouchers)
             </div>
             <div style="margin-top: 1.25rem;">
-              <span class="badge badge-green">KYC Verified Wallet ✓</span>
+              <span class="badge badge-green" style="display: inline-flex; align-items: center; gap: 0.35rem;">
+                <i data-lucide="shield-check" class="lucide-icon-sm"></i>
+                <span>Aadhaar KYC Verified</span>
+              </span>
             </div>
           </div>
 
@@ -98,201 +128,212 @@ export const RewardsWallet = {
 
         <!-- Reward Store Catalogue Sections -->
         <div style="margin-bottom: 3.5rem;">
-          <h3 style="color: var(--color-navy); margin-bottom: 1.5rem;">Explore Instant Redemptions</h3>
+          <h3 style="color: var(--color-navy); font-size: 1.35rem; font-weight: 800; margin-bottom: 1.5rem;">Explore Instant Redemptions</h3>
 
           <!-- Category 1: Mobile Recharge -->
           <div style="margin-bottom: 2.5rem;">
-            <div class="flex-between" style="margin-bottom: 1rem;">
-              <div style="display: flex; align-items: center; gap: 0.5rem;">
-                <span style="font-size: 1.4rem;">📱</span>
-                <strong style="font-size: 1.15rem; color: var(--color-navy);">Mobile Prepaid Recharges</strong>
+            <div class="flex-between" style="margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
+              <div style="display: flex; align-items: center; gap: 0.6rem;">
+                <div style="width: 28px; height: 28px; border-radius: 6px; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center;">
+                  <i data-lucide="smartphone" class="lucide-icon-sm"></i>
+                </div>
+                <strong style="font-size: 1.1rem; color: var(--color-navy);">Mobile Prepaid Recharges</strong>
               </div>
-              <span style="font-size: 0.8rem; color: var(--text-muted);">Instant OTP Credit (Jio, Airtel, Vi)</span>
+              <span style="font-size: 0.8rem; color: var(--text-muted); font-weight: 600;">Instant Telecom Credit (Jio, Airtel, Vi)</span>
             </div>
 
-            <div class="grid-cols-4">
-              
+            <div class="grid-cols-4" style="gap: 1rem;">
               <!-- ₹10 Plan -->
-              <div class="glass-card" style="padding: 1.25rem; text-align: center; border-top: 4px solid var(--color-primary);">
-                <div style="font-size: 1.6rem; font-weight: 800; color: var(--color-navy); margin-bottom: 0.25rem;">₹10</div>
-                <div style="font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1rem;">Talktime / Topup</div>
-                <div class="badge badge-points" style="margin-bottom: 1rem;">100 GP</div>
+              <div class="neu-card neu-card-raised" style="text-align: center; border-top: 3px solid var(--color-primary);">
+                <div style="font-size: 1.5rem; font-weight: 900; color: var(--color-navy); margin-bottom: 0.25rem;">₹10</div>
+                <div style="font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.85rem;">Talktime / Topup</div>
+                <div class="badge badge-points" style="margin-bottom: 1rem;">100 GC</div>
                 <button class="btn btn-primary btn-sm btn-block" onclick="window.RewardsWallet.redeemQuick('RECHARGE', 'Mobile Topup ₹10', 100)">
                   Redeem ₹10
                 </button>
               </div>
 
               <!-- ₹50 Plan -->
-              <div class="glass-card" style="padding: 1.25rem; text-align: center; border-top: 4px solid var(--color-primary);">
-                <div style="font-size: 1.6rem; font-weight: 800; color: var(--color-navy); margin-bottom: 0.25rem;">₹50</div>
-                <div style="font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1rem;">Talktime + 5GB Data</div>
-                <div class="badge badge-points" style="margin-bottom: 1rem;">500 GP</div>
+              <div class="neu-card neu-card-raised" style="text-align: center; border-top: 3px solid var(--color-primary);">
+                <div style="font-size: 1.5rem; font-weight: 900; color: var(--color-navy); margin-bottom: 0.25rem;">₹50</div>
+                <div style="font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.85rem;">Talktime + 5GB Data</div>
+                <div class="badge badge-points" style="margin-bottom: 1rem;">500 GC</div>
                 <button class="btn btn-primary btn-sm btn-block" onclick="window.RewardsWallet.redeemQuick('RECHARGE', 'Mobile Data Pack ₹50', 500)">
                   Redeem ₹50
                 </button>
               </div>
 
               <!-- ₹100 Plan -->
-              <div class="glass-card" style="padding: 1.25rem; text-align: center; border-top: 4px solid var(--color-primary);">
-                <div style="font-size: 1.6rem; font-weight: 800; color: var(--color-navy); margin-bottom: 0.25rem;">₹100</div>
-                <div style="font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1rem;">Full Talktime Pack</div>
-                <div class="badge badge-points" style="margin-bottom: 1rem;">1,000 GP</div>
+              <div class="neu-card neu-card-raised" style="text-align: center; border-top: 3px solid var(--color-primary);">
+                <div style="font-size: 1.5rem; font-weight: 900; color: var(--color-navy); margin-bottom: 0.25rem;">₹100</div>
+                <div style="font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.85rem;">Full Talktime Pack</div>
+                <div class="badge badge-points" style="margin-bottom: 1rem;">1,000 GC</div>
                 <button class="btn btn-primary btn-sm btn-block" onclick="window.RewardsWallet.redeemQuick('RECHARGE', 'Full Talktime Pack ₹100', 1000)">
                   Redeem ₹100
                 </button>
               </div>
 
               <!-- ₹200 Plan -->
-              <div class="glass-card" style="padding: 1.25rem; text-align: center; border-top: 4px solid var(--color-primary);">
-                <div style="font-size: 1.6rem; font-weight: 800; color: var(--color-navy); margin-bottom: 0.25rem;">₹200</div>
-                <div style="font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1rem;">Unlimited 28-Day Plan</div>
-                <div class="badge badge-points" style="margin-bottom: 1rem;">2,000 GP</div>
+              <div class="neu-card neu-card-raised" style="text-align: center; border-top: 3px solid var(--color-primary);">
+                <div style="font-size: 1.5rem; font-weight: 900; color: var(--color-navy); margin-bottom: 0.25rem;">₹200</div>
+                <div style="font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.85rem;">Unlimited 28-Day Plan</div>
+                <div class="badge badge-points" style="margin-bottom: 1rem;">2,000 GC</div>
                 <button class="btn btn-secondary btn-sm btn-block" onclick="window.RewardsWallet.redeemQuick('RECHARGE', 'Unlimited 28-Day Plan ₹200', 2000)">
                   Redeem ₹200
                 </button>
               </div>
-
             </div>
           </div>
 
           <!-- Category 2: Utility Bills & Municipal Fees -->
           <div style="margin-bottom: 2.5rem;">
-            <div class="flex-between" style="margin-bottom: 1rem;">
-              <div style="display: flex; align-items: center; gap: 0.5rem;">
-                <span style="font-size: 1.4rem;">💡</span>
-                <strong style="font-size: 1.15rem; color: var(--color-navy);">Utility Bills & Municipal Services</strong>
+            <div class="flex-between" style="margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
+              <div style="display: flex; align-items: center; gap: 0.6rem;">
+                <div style="width: 28px; height: 28px; border-radius: 6px; background: #FEF3C7; color: #B45309; display: flex; align-items: center; justify-content: center;">
+                  <i data-lucide="lightbulb" class="lucide-icon-sm"></i>
+                </div>
+                <strong style="font-size: 1.1rem; color: var(--color-navy);">Utility Bills &amp; Municipal Services</strong>
               </div>
-              <span style="font-size: 0.8rem; color: var(--text-muted);">Direct Bill Deduction</span>
+              <span style="font-size: 0.8rem; color: var(--text-muted); font-weight: 600;">Direct Municipal Bill Credit</span>
             </div>
 
-            <div class="grid-cols-4">
-              
-              <div class="glass-card" style="padding: 1.25rem; text-align: center;">
-                <div style="font-size: 2rem; margin-bottom: 0.35rem;">⚡</div>
+            <div class="grid-cols-4" style="gap: 1rem;">
+              <!-- Electricity -->
+              <div class="neu-card neu-card-raised" style="text-align: center;">
+                <div style="width: 44px; height: 44px; border-radius: 50%; background: #FEF3C7; color: #B45309; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto;">
+                  <i data-lucide="zap" class="lucide-icon-md"></i>
+                </div>
                 <strong style="color: var(--color-navy); display: block; font-size: 0.95rem;">Electricity Bill</strong>
                 <p style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.85rem;">Tata Power / BESCOM / Adani</p>
-                <div class="badge badge-points" style="margin-bottom: 1rem;">₹50 Off (500 GP)</div>
+                <div class="badge badge-points" style="margin-bottom: 1rem;">₹50 Off (500 GC)</div>
                 <button class="btn btn-emerald-outline btn-sm btn-block" onclick="window.RewardsWallet.openBillsModal('Electricity')">
                   Pay Bill
                 </button>
               </div>
 
-              <div class="glass-card" style="padding: 1.25rem; text-align: center;">
-                <div style="font-size: 2rem; margin-bottom: 0.35rem;">💧</div>
+              <!-- Water -->
+              <div class="neu-card neu-card-raised" style="text-align: center;">
+                <div style="width: 44px; height: 44px; border-radius: 50%; background: #DBEAFE; color: #1E40AF; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto;">
+                  <i data-lucide="droplets" class="lucide-icon-md"></i>
+                </div>
                 <strong style="color: var(--color-navy); display: block; font-size: 0.95rem;">Water Board Bill</strong>
                 <p style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.85rem;">Municipal Corporation Jal Board</p>
-                <div class="badge badge-points" style="margin-bottom: 1rem;">₹50 Off (500 GP)</div>
+                <div class="badge badge-points" style="margin-bottom: 1rem;">₹50 Off (500 GC)</div>
                 <button class="btn btn-emerald-outline btn-sm btn-block" onclick="window.RewardsWallet.openBillsModal('Water')">
                   Pay Bill
                 </button>
               </div>
 
-              <div class="glass-card" style="padding: 1.25rem; text-align: center;">
-                <div style="font-size: 2rem; margin-bottom: 0.35rem;">🔥</div>
+              <!-- Piped Gas -->
+              <div class="neu-card neu-card-raised" style="text-align: center;">
+                <div style="width: 44px; height: 44px; border-radius: 50%; background: #FEE2E2; color: #DC2626; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto;">
+                  <i data-lucide="flame" class="lucide-icon-md"></i>
+                </div>
                 <strong style="color: var(--color-navy); display: block; font-size: 0.95rem;">Piped Gas Bill</strong>
                 <p style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.85rem;">Mahanagar Gas / IGL / Adani</p>
-                <div class="badge badge-points" style="margin-bottom: 1rem;">₹50 Off (500 GP)</div>
+                <div class="badge badge-points" style="margin-bottom: 1rem;">₹50 Off (500 GC)</div>
                 <button class="btn btn-emerald-outline btn-sm btn-block" onclick="window.RewardsWallet.openBillsModal('Gas')">
                   Pay Bill
                 </button>
               </div>
 
-              <div class="glass-card" style="padding: 1.25rem; text-align: center;">
-                <div style="font-size: 2rem; margin-bottom: 0.35rem;">🌐</div>
+              <!-- Broadband -->
+              <div class="neu-card neu-card-raised" style="text-align: center;">
+                <div style="width: 44px; height: 44px; border-radius: 50%; background: #EDE9FE; color: #6D28D9; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto;">
+                  <i data-lucide="wifi" class="lucide-icon-md"></i>
+                </div>
                 <strong style="color: var(--color-navy); display: block; font-size: 0.95rem;">Broadband Bill</strong>
                 <p style="font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.85rem;">Airtel Fiber / JioFiber / ACT</p>
-                <div class="badge badge-points" style="margin-bottom: 1rem;">₹100 Off (1,000 GP)</div>
+                <div class="badge badge-points" style="margin-bottom: 1rem;">₹100 Off (1,000 GC)</div>
                 <button class="btn btn-emerald-outline btn-sm btn-block" onclick="window.RewardsWallet.openBillsModal('Broadband')">
                   Pay Bill
                 </button>
               </div>
-
             </div>
           </div>
 
           <!-- Category 3: Eco Shopping & Cafes -->
           <div>
-            <div class="flex-between" style="margin-bottom: 1rem;">
-              <div style="display: flex; align-items: center; gap: 0.5rem;">
-                <span style="font-size: 1.4rem;">🛍️</span>
-                <strong style="font-size: 1.15rem; color: var(--color-navy);">Eco-Friendly Brand Vouchers & Cafes</strong>
+            <div class="flex-between" style="margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
+              <div style="display: flex; align-items: center; gap: 0.6rem;">
+                <div style="width: 28px; height: 28px; border-radius: 6px; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center;">
+                  <i data-lucide="shopping-bag" class="lucide-icon-sm"></i>
+                </div>
+                <strong style="font-size: 1.1rem; color: var(--color-navy);">Eco-Friendly Brand Vouchers & Cafes</strong>
               </div>
-              <span style="font-size: 0.8rem; color: var(--text-muted);">Partner Discounts</span>
+              <span style="font-size: 0.8rem; color: var(--text-muted); font-weight: 600;">EPR Partner Merchant Network</span>
             </div>
 
-            <div class="grid-cols-4">
-              
-              <div class="glass-card" style="padding: 1.25rem;">
-                <div class="badge badge-green" style="margin-bottom: 0.5rem;">Organic Store</div>
+            <div class="grid-cols-4" style="gap: 1rem;">
+              <div class="neu-card neu-card-raised">
+                <div class="badge badge-green" style="margin-bottom: 0.5rem;">Organic Grocery</div>
                 <strong style="color: var(--color-navy); display: block;">BigBasket Organic</strong>
                 <p style="font-size: 0.78rem; color: var(--text-muted); margin: 0.25rem 0 1rem 0;">₹100 Voucher on min ₹500 grocery.</p>
                 <div class="flex-between">
-                  <span class="badge badge-points">1,000 GP</span>
+                  <span class="badge badge-points">1,000 GC</span>
                   <button class="btn btn-primary btn-sm" onclick="window.RewardsWallet.redeemQuick('SHOPPING', 'BigBasket Organic ₹100 Voucher', 1000)">
                     Claim
                   </button>
                 </div>
               </div>
 
-              <div class="glass-card" style="padding: 1.25rem;">
+              <div class="neu-card neu-card-raised">
                 <div class="badge" style="background: #FEF3C7; color: #B45309; margin-bottom: 0.5rem;">Sustainable</div>
                 <strong style="color: var(--color-navy); display: block;">Bamboo India Store</strong>
                 <p style="font-size: 0.78rem; color: var(--text-muted); margin: 0.25rem 0 1rem 0;">₹50 Gift Card for eco toothbrushes & kits.</p>
                 <div class="flex-between">
-                  <span class="badge badge-points">500 GP</span>
+                  <span class="badge badge-points">500 GC</span>
                   <button class="btn btn-primary btn-sm" onclick="window.RewardsWallet.redeemQuick('SHOPPING', 'Bamboo India ₹50 Voucher', 500)">
                     Claim
                   </button>
                 </div>
               </div>
 
-              <div class="glass-card" style="padding: 1.25rem;">
+              <div class="neu-card neu-card-raised">
                 <div class="badge badge-navy" style="margin-bottom: 0.5rem;">Cafe Partner</div>
                 <strong style="color: var(--color-navy); display: block;">Starbucks Coffee</strong>
                 <p style="font-size: 0.78rem; color: var(--text-muted); margin: 0.25rem 0 1rem 0;">Free reusable bamboo tumbler with refill.</p>
                 <div class="flex-between">
-                  <span class="badge badge-points">1,200 GP</span>
+                  <span class="badge badge-points">1,200 GC</span>
                   <button class="btn btn-primary btn-sm" onclick="window.RewardsWallet.redeemQuick('CAFE', 'Starbucks Eco Tumbler Voucher', 1200)">
                     Claim
                   </button>
                 </div>
               </div>
 
-              <div class="glass-card" style="padding: 1.25rem;">
+              <div class="neu-card neu-card-raised">
                 <div class="badge badge-green" style="margin-bottom: 0.5rem;">Healthy Food</div>
                 <strong style="color: var(--color-navy); display: block;">Subway Green Meal</strong>
                 <p style="font-size: 0.78rem; color: var(--text-muted); margin: 0.25rem 0 1rem 0;">₹50 discount on organic salad subs.</p>
                 <div class="flex-between">
-                  <span class="badge badge-points">500 GP</span>
+                  <span class="badge badge-points">500 GC</span>
                   <button class="btn btn-primary btn-sm" onclick="window.RewardsWallet.redeemQuick('CAFE', 'Subway ₹50 Meal Discount', 500)">
                     Claim
                   </button>
                 </div>
               </div>
-
             </div>
           </div>
-
         </div>
 
         <!-- Real-Time Transaction Ledger -->
-        <div class="glass-card" style="padding: 2rem;">
+        <div class="neu-card neu-card-raised" style="border-radius: var(--radius-xl);">
           <div class="flex-between" style="margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
             <div>
-              <h3 style="color: var(--color-navy);">Wallet Transaction Ledger</h3>
-              <p style="font-size: 0.85rem;">Transparent record of all waste earnings and reward disbursements.</p>
+              <h3 style="color: var(--color-navy); font-size: 1.3rem; font-weight: 800; margin: 0 0 0.25rem 0;">Wallet Transaction Ledger</h3>
+              <p style="font-size: 0.85rem; color: var(--text-muted); margin: 0;">Immutable client-side record of verified waste earnings and civic redemptions.</p>
             </div>
 
-            <!-- Filters -->
-            <div style="display: flex; gap: 0.5rem;">
+            <!-- Filter Tabs -->
+            <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
               <button class="btn btn-sm ${this.currentTab === 'all' ? 'btn-primary' : 'btn-secondary'}" onclick="window.RewardsWallet.filterLedger('all')">
                 All
               </button>
               <button class="btn btn-sm ${this.currentTab === 'credit' ? 'btn-primary' : 'btn-secondary'}" onclick="window.RewardsWallet.filterLedger('credit')">
-                Credits (+GP)
+                Credits (+GC)
               </button>
               <button class="btn btn-sm ${this.currentTab === 'debit' ? 'btn-primary' : 'btn-secondary'}" onclick="window.RewardsWallet.filterLedger('debit')">
-                Debits (-GP)
+                Debits (-GC)
               </button>
             </div>
           </div>
@@ -301,22 +342,22 @@ export const RewardsWallet = {
             ${State.state.transactions
               .filter(t => this.currentTab === 'all' || t.type === this.currentTab)
               .map(t => `
-                <div style="display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: #F8FAFC; border: 1px solid var(--color-border); border-radius: var(--radius-md);">
-                  <div style="display: flex; align-items: center; gap: 1rem;">
-                    <div style="width: 42px; height: 42px; border-radius: 50%; background: ${t.type === 'credit' ? '#DCFCE7' : '#FEE2E2'}; color: ${t.type === 'credit' ? '#16A34A' : '#EF4444'}; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 800;">
-                      ${t.type === 'credit' ? '↓' : '↑'}
+                <div class="neu-card-flat" style="display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-radius: var(--radius-md); flex-wrap: wrap; gap: 0.75rem;">
+                  <div style="display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: 1 1 130px;">
+                    <div style="width: 40px; height: 40px; border-radius: 50%; background: ${t.type === 'credit' ? '#DCFCE7' : '#FEE2E2'}; color: ${t.type === 'credit' ? '#16A34A' : '#EF4444'}; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0;">
+                      <i data-lucide="${t.type === 'credit' ? 'arrow-down-left' : 'arrow-up-right'}" class="lucide-icon-sm"></i>
                     </div>
-                    <div>
+                    <div style="min-width: 0; word-break: break-word;">
                       <strong style="color: var(--color-navy); font-size: 0.95rem; display: block;">${t.title}</strong>
-                      <div style="font-size: 0.78rem; color: var(--text-muted);">
+                      <div style="font-size: 0.75rem; color: var(--text-muted); word-break: break-all;">
                         ${Formatters.formatDateTime(t.date)} &bull; Ref: ${t.id} ${t.meta ? `&bull; ${t.meta}` : ''}
                       </div>
                     </div>
                   </div>
 
-                  <div style="text-align: right;">
+                  <div style="text-align: right; margin-left: auto;">
                     <div style="font-size: 1.15rem; font-weight: 800; color: ${t.type === 'credit' ? 'var(--color-primary-dark)' : '#EF4444'};">
-                      ${t.type === 'credit' ? '+' : '-'}${t.amountGp} GP
+                      ${t.type === 'credit' ? '+' : '-'}${t.amountGp} GC
                     </div>
                     <div style="font-size: 0.78rem; color: var(--text-muted); font-weight: 600;">
                       ${t.type === 'credit' ? '+' : '-'}${Formatters.formatCurrency(t.equivalentInr)}
@@ -331,25 +372,29 @@ export const RewardsWallet = {
 
       <!-- Mobile Recharge Modal Shell -->
       <div class="modal-overlay" id="recharge-modal">
-        <div class="modal-content">
-          <div class="modal-close-btn" onclick="window.RewardsWallet.closeModals()">✕</div>
+        <div class="modal-content neu-card neu-card-raised" style="max-width: 460px;">
+          <div class="modal-close-btn" onclick="window.RewardsWallet.closeModals()">
+            <i data-lucide="x" class="lucide-icon-sm"></i>
+          </div>
           
           <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem;">
-            <span style="font-size: 2rem;">📱</span>
+            <div style="width: 44px; height: 44px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center;">
+              <i data-lucide="smartphone" class="lucide-icon-md"></i>
+            </div>
             <div>
-              <h3 style="color: var(--color-navy);">Instant Mobile Recharge</h3>
-              <p style="font-size: 0.85rem;">Recharge prepaid numbers using your Green Points balance.</p>
+              <h3 style="color: var(--color-navy); margin: 0; font-size: 1.2rem;">Instant Mobile Recharge</h3>
+              <p style="font-size: 0.8rem; color: var(--text-muted); margin: 0.2rem 0 0 0;">Recharge prepaid numbers using your Green Credits balance.</p>
             </div>
           </div>
 
           <div class="form-group">
             <label class="form-label">Mobile Number</label>
-            <input type="tel" class="form-input" id="recharge-phone" placeholder="Enter 10-digit mobile number" value="9876543210">
+            <input type="tel" class="form-input neu-input" id="recharge-phone" placeholder="Enter 10-digit mobile number" value="9876543210">
           </div>
 
           <div class="form-group">
             <label class="form-label">Telecom Operator</label>
-            <select class="form-select" id="recharge-operator">
+            <select class="form-select neu-input" id="recharge-operator">
               <option value="Jio">Reliance Jio Prepaid</option>
               <option value="Airtel">Bharti Airtel</option>
               <option value="Vi">Vodafone Idea (Vi)</option>
@@ -359,43 +404,47 @@ export const RewardsWallet = {
 
           <div class="form-group">
             <label class="form-label">Select Recharge Plan</label>
-            <select class="form-select" id="recharge-amount">
-              <option value="100">₹10 Talktime (100 Green Points)</option>
-              <option value="500">₹50 Data Pack (500 Green Points)</option>
-              <option value="1000">₹100 Full Talktime (1,000 Green Points)</option>
-              <option value="2000">₹200 28-Day Unlimited (2,000 Green Points)</option>
+            <select class="form-select neu-input" id="recharge-amount">
+              <option value="100">₹10 Talktime (100 Green Credits)</option>
+              <option value="500">₹50 Data Pack (500 Green Credits)</option>
+              <option value="1000">₹100 Full Talktime (1,000 Green Credits)</option>
+              <option value="2000">₹200 28-Day Unlimited (2,000 Green Credits)</option>
             </select>
           </div>
 
-          <div style="background: var(--waste-wet-bg); border: 1.5px solid var(--waste-wet-border); padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; font-size: 0.85rem;">
+          <div class="neu-card-inset" style="padding: 0.85rem 1rem; border-radius: var(--radius-md); margin-bottom: 1.25rem; font-size: 0.85rem;">
             <div class="flex-between">
-              <span>Your GP Balance:</span>
-              <strong>${user.greenPoints} GP (₹${inrValue})</strong>
+              <span style="color: var(--text-muted);">Current Available Balance:</span>
+              <strong style="color: var(--color-primary-dark);">${user.greenPoints} GC (₹${inrValue})</strong>
             </div>
           </div>
 
           <button class="btn btn-primary btn-block btn-lg" onclick="window.RewardsWallet.submitRecharge()">
-            Proceed & Deduct Points ⚡
+            Proceed & Deduct Points
           </button>
         </div>
       </div>
 
       <!-- Utility Bills Modal Shell -->
       <div class="modal-overlay" id="bills-modal">
-        <div class="modal-content">
-          <div class="modal-close-btn" onclick="window.RewardsWallet.closeModals()">✕</div>
+        <div class="modal-content neu-card neu-card-raised" style="max-width: 460px;">
+          <div class="modal-close-btn" onclick="window.RewardsWallet.closeModals()">
+            <i data-lucide="x" class="lucide-icon-sm"></i>
+          </div>
           
           <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem;">
-            <span style="font-size: 2rem;">💡</span>
+            <div style="width: 44px; height: 44px; border-radius: 50%; background: #FEF3C7; color: #B45309; display: flex; align-items: center; justify-content: center;">
+              <i data-lucide="lightbulb" class="lucide-icon-md"></i>
+            </div>
             <div>
-              <h3 style="color: var(--color-navy);">Pay Utility Bill</h3>
-              <p style="font-size: 0.85rem;">Apply Green Karma points as direct discount on municipal bills.</p>
+              <h3 style="color: var(--color-navy); margin: 0; font-size: 1.2rem;">Pay Utility Bill</h3>
+              <p style="font-size: 0.8rem; color: var(--text-muted); margin: 0.2rem 0 0 0;">Apply Green Credits as direct discount on municipal bills.</p>
             </div>
           </div>
 
           <div class="form-group">
             <label class="form-label">Service Type</label>
-            <select class="form-select" id="bill-service">
+            <select class="form-select neu-input" id="bill-service">
               <option value="Electricity">Electricity Board (Tata Power / BESCOM)</option>
               <option value="Water">Municipal Water Board</option>
               <option value="Gas">Piped Gas (MGL / IGL)</option>
@@ -405,29 +454,36 @@ export const RewardsWallet = {
 
           <div class="form-group">
             <label class="form-label">Consumer / Account ID</label>
-            <input type="text" class="form-input" id="bill-consumer-id" placeholder="e.g. 1029481029" value="1092834019">
+            <input type="text" class="form-input neu-input" id="bill-consumer-id" placeholder="e.g. 1029481029" value="1092834019">
           </div>
 
           <div class="form-group">
             <label class="form-label">Redeem Value</label>
-            <select class="form-select" id="bill-gp-amount">
-              <option value="500">₹50 Bill Discount (500 Green Points)</option>
-              <option value="1000">₹100 Bill Discount (1,000 Green Points)</option>
+            <select class="form-select neu-input" id="bill-gp-amount">
+              <option value="500">₹50 Bill Discount (500 Green Credits)</option>
+              <option value="1000">₹100 Bill Discount (1,000 Green Credits)</option>
             </select>
           </div>
 
           <button class="btn btn-primary btn-block btn-lg" onclick="window.RewardsWallet.submitBillPayment()">
-            Confirm Bill Payment ⚡
+            Confirm Bill Payment
           </button>
         </div>
       </div>
     `;
+
+    if (window.lucide) {
+      window.lucide.createIcons();
+    }
   },
 
   openRechargeModal() {
     SoundFX.playClick();
     const modal = document.getElementById('recharge-modal');
-    if (modal) modal.classList.add('active');
+    if (modal) {
+      modal.classList.add('active');
+      if (window.lucide) window.lucide.createIcons();
+    }
   },
 
   openBillsModal(serviceName = null) {
@@ -439,6 +495,7 @@ export const RewardsWallet = {
         if (select) select.value = serviceName;
       }
       modal.classList.add('active');
+      if (window.lucide) window.lucide.createIcons();
     }
   },
 
@@ -452,9 +509,10 @@ export const RewardsWallet = {
     if (res.success) {
       SoundFX.playRedeemCash();
       Confetti.trigger(75);
+      window.AppRouter.showToast(`Redeemed ${title} (-${amountGp} GC)`);
       this.render();
     } else {
-      alert(res.message || 'Insufficient Green Points balance');
+      alert(res.message || 'Insufficient Green Credits balance');
     }
   },
 
@@ -468,6 +526,7 @@ export const RewardsWallet = {
       this.closeModals();
       SoundFX.playRedeemCash();
       Confetti.trigger(90);
+      window.AppRouter.showToast(`Recharge of ₹${Formatters.gpToInr(amountGp)} successful!`);
       this.render();
     } else {
       alert(res.message);
@@ -484,6 +543,7 @@ export const RewardsWallet = {
       this.closeModals();
       SoundFX.playRedeemCash();
       Confetti.trigger(90);
+      window.AppRouter.showToast(`${service} bill discount applied (-${amountGp} GC)`);
       this.render();
     } else {
       alert(res.message);
diff --git a/js/components/workerPortal.js b/js/components/workerPortal.js
new file mode 100644
index 0000000..98b9a1b
--- /dev/null
+++ b/js/components/workerPortal.js
@@ -0,0 +1,484 @@
+/* ==========================================================================
+   CLEANCRED — MUNICIPAL WORKER VERIFICATION PORTAL
+   Smart India Hackathon 2026 // Team GreenLegacy
+   Tactile Neumorphism + Civic Technology
+   Role: Ramesh Kumar | Zone 4 - Ward 4B | Electric Van MH-02-GK-4091
+   ========================================================================== */
+
+import { State } from '../state.js';
+import { Formatters } from '../utils/formatters.js';
+import { Confetti } from '../utils/confetti.js';
+import { SoundFX } from '../utils/audio.js';
+import { QRCode } from '../utils/qrCode.js';
+import { QRScanner } from '../utils/qrScanner.js';
+
+export const WorkerPortalView = {
+  selectedPickup: null,
+
+  render() {
+    const container = document.getElementById('view-worker');
+    if (!container) return;
+
+    const worker = State.state.worker;
+    const queue = State.state.workerQueue;
+
+    container.innerHTML = `
+      <div class="app-container" style="max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem 1rem;">
+        
+        <!-- Header & Worker Identity Banner -->
+        <div class="neu-card neu-card-navy" style="padding: 2rem; border-radius: var(--radius-xl); margin-bottom: 2rem; color: #FFFFFF;">
+          <div class="flex-between" style="flex-wrap: wrap; gap: 1.5rem;">
+            <div style="display: flex; align-items: center; gap: 1.25rem;">
+              <div style="width: 64px; height: 64px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; border: 3px solid #84CC16; box-shadow: 0 4px 14px rgba(0,0,0,0.25);">
+                <i data-lucide="truck" class="lucide-icon-lg"></i>
+              </div>
+              <div>
+                <div style="display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.25rem;">
+                  <h2 style="color: #FFFFFF; font-size: 1.6rem; font-weight: 800; margin: 0;">${worker.name}</h2>
+                  <span class="badge" style="background: #84CC16; color: #0A1929; font-weight: 800;">Municipal Officer</span>
+                </div>
+                <p style="color: #CBD5E1; font-size: 0.88rem; margin: 0;">
+                  ${worker.zone} &bull; Vehicle: ${worker.vehicle} &bull; ${worker.rating} service rating
+                </p>
+              </div>
+            </div>
+
+            <!-- Fast Stats for Worker -->
+            <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
+              <div style="background: rgba(255,255,255,0.08); padding: 0.75rem 1.25rem; border-radius: var(--radius-md); text-align: center; border: 1px solid rgba(255,255,255,0.12);">
+                <div style="font-size: 1.4rem; font-weight: 800; color: #84CC16;">${worker.todayCollections}</div>
+                <div style="font-size: 0.72rem; color: #CBD5E1; font-weight: 600;">Today's Pickups</div>
+              </div>
+              <div style="background: rgba(255,255,255,0.08); padding: 0.75rem 1.25rem; border-radius: var(--radius-md); text-align: center; border: 1px solid rgba(255,255,255,0.12);">
+                <div style="font-size: 1.4rem; font-weight: 800; color: #FFFFFF;">${worker.totalVerifiedKg} KG</div>
+                <div style="font-size: 0.72rem; color: #CBD5E1; font-weight: 600;">Verified Waste</div>
+              </div>
+              <button class="btn btn-primary btn-lg" style="background: #84CC16; color: #0A1929; border-color: #84CC16; font-weight: 800;" onclick="window.WorkerPortalView.openScanModal()">
+                <i data-lucide="qr-code" class="lucide-icon-sm"></i>
+                <span>Scan Handover QR</span>
+              </button>
+              <button class="btn btn-secondary btn-sm" style="background: rgba(255,255,255,0.15); color: #FFFFFF; border-color: rgba(255,255,255,0.25);" onclick="window.AppRouter.navigate('illegal-dumping')">
+                <i data-lucide="shield-alert" class="lucide-icon-sm"></i>
+                <span>Report Hotspot</span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Assigned Route Pickups Queue -->
+        <div class="neu-card neu-card-raised" style="padding: 2rem; border-radius: var(--radius-xl);">
+          <div class="flex-between" style="margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
+            <div>
+              <h3 style="color: var(--color-navy); font-size: 1.3rem; font-weight: 800; margin: 0 0 0.25rem 0;">Assigned Route Collection Queue</h3>
+              <p style="font-size: 0.85rem; color: var(--text-muted); margin: 0;">Inspect waste bags, confirm segregation purity, and disburse Green Credits upon physical weighing.</p>
+            </div>
+            <span class="badge badge-green">${queue.filter(q => q.status !== 'verified' && q.status !== 'rejected').length} Pending Verifications</span>
+          </div>
+
+          <div style="display: flex; flex-direction: column; gap: 1rem;">
+            ${queue.map(item => `
+              <div class="neu-card-flat" style="display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; border-radius: var(--radius-lg); flex-wrap: wrap; gap: 1rem;">
+                
+                <div style="display: flex; align-items: center; gap: 1.25rem;">
+                  <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: ${item.category === 'wet' ? 'var(--waste-wet-bg)' : item.category === 'dry' ? 'var(--waste-dry-bg)' : 'var(--waste-harmful-bg)'}; color: ${item.category === 'wet' ? 'var(--waste-wet)' : item.category === 'dry' ? 'var(--waste-dry)' : 'var(--waste-harmful)'}; display: flex; align-items: center; justify-content: center;">
+                    <i data-lucide="${item.category === 'wet' ? 'apple' : item.category === 'dry' ? 'package' : 'battery-charging'}" class="lucide-icon-md"></i>
+                  </div>
+                  <div>
+                    <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;">
+                      <strong style="color: var(--color-navy); font-size: 1.05rem;">${item.subType}</strong>
+                      <span class="badge" style="background: ${item.category === 'wet' ? 'var(--waste-wet-bg)' : item.category === 'dry' ? 'var(--waste-dry-bg)' : 'var(--waste-harmful-bg)'}; color: ${item.category === 'wet' ? 'var(--waste-wet)' : item.category === 'dry' ? 'var(--waste-dry)' : 'var(--waste-harmful)'}; font-weight: 700;">
+                        ${item.quantityKg} KG
+                      </span>
+                    </div>
+                    <div style="font-size: 0.85rem; color: var(--text-muted);">
+                      Citizen: <strong>${item.userName}</strong> &bull; ${item.address}
+                    </div>
+                    <div style="font-size: 0.78rem; color: var(--color-primary-dark); font-weight: 700; margin-top: 0.25rem;">
+                      Request ID: ${item.id} &bull; OTP: <span style="font-family: var(--font-mono);">${item.otp}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div style="display: flex; align-items: center; gap: 0.75rem;">
+                  ${item.status === 'verified' ? `
+                    <span class="badge" style="background: #D1FAE5; color: #065F46; font-size: 0.88rem; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.35rem;">
+                      <i data-lucide="check-circle-2" class="lucide-icon-sm"></i>
+                      <span>Verified (+${item.pointsReward} GC)</span>
+                    </span>
+                  ` : item.status === 'rejected' ? `
+                    <span class="badge" style="background: #FEE2E2; color: #991B1B; font-size: 0.88rem; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.35rem;">
+                      <i data-lucide="x-circle" class="lucide-icon-sm"></i>
+                      <span>Rejected (Contaminated)</span>
+                    </span>
+                  ` : `
+                    <button class="btn btn-primary" onclick="window.WorkerPortalView.openVerificationModal('${item.id}')">
+                      <i data-lucide="scale" class="lucide-icon-sm"></i>
+                      <span>Inspect &amp; Verify</span>
+                    </button>
+                  `}
+                </div>
+
+              </div>
+            `).join('')}
+          </div>
+        </div>
+
+      </div>
+
+      <!-- Worker Inspection Modal Shell -->
+      <div class="modal-overlay" id="worker-inspect-modal">
+        <div class="modal-content neu-card neu-card-raised" style="max-width: 560px;">
+          <div class="modal-close-btn" onclick="window.WorkerPortalView.closeModal()">
+            <i data-lucide="x" class="lucide-icon-sm"></i>
+          </div>
+          <div id="worker-modal-body"></div>
+        </div>
+      </div>
+
+      <!-- QR Scan Modal Shell -->
+      <div class="modal-overlay" id="worker-scan-modal">
+        <div class="modal-content neu-card neu-card-raised" style="max-width: 440px;">
+          <div class="modal-close-btn" onclick="window.WorkerPortalView.closeScanModal()">
+            <i data-lucide="x" class="lucide-icon-sm"></i>
+          </div>
+          <div id="worker-scan-body"></div>
+        </div>
+      </div>
+    `;
+
+    if (window.lucide) window.lucide.createIcons();
+  },
+
+  openVerificationModal(pickupId) {
+    SoundFX.playClick();
+    const item = State.state.workerQueue.find(q => q.id === pickupId);
+    if (!item) return;
+
+    this.selectedPickup = item;
+    const modalBody = document.getElementById('worker-modal-body');
+    if (modalBody) {
+      modalBody.innerHTML = `
+        <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem;">
+          <div style="width: 42px; height: 42px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center;">
+            <i data-lucide="scale" class="lucide-icon-md"></i>
+          </div>
+          <div>
+            <h3 style="color: var(--color-navy); margin: 0; font-size: 1.25rem;">Scale Verification &amp; Inspection</h3>
+            <p style="font-size: 0.82rem; color: var(--text-muted); margin: 0.15rem 0 0 0;">Request #${item.id} &bull; Citizen: ${item.userName}</p>
+          </div>
+        </div>
+
+        <!-- Photo Check -->
+        <div style="margin-bottom: 1.25rem; text-align: center;">
+          <img src="${item.photoUrl}" style="max-height: 180px; width: 100%; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border);" />
+          <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;">Citizen Photo Proof for ${item.subType}</div>
+        </div>
+
+        <!-- Segregation Quality Checklist -->
+        <div class="neu-card-inset" style="padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.25rem;">
+          <strong style="color: var(--color-navy); font-size: 0.85rem; display: block; margin-bottom: 0.5rem;">Physical Segregation Checklist:</strong>
+          <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; margin-bottom: 0.35rem; cursor: pointer;">
+            <input type="checkbox" checked id="chk-clean" style="accent-color: var(--color-primary);"> Zero hazardous / non-biodegradable cross-contamination
+          </label>
+          <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; margin-bottom: 0.35rem; cursor: pointer;">
+            <input type="checkbox" checked id="chk-category" style="accent-color: var(--color-primary);"> Material matches designated ${item.category.toUpperCase()} category
+          </label>
+          <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; cursor: pointer;">
+            <input type="checkbox" checked id="chk-bin" style="accent-color: var(--color-primary);"> Packed in standardized municipal color-coded bag
+          </label>
+        </div>
+
+        <!-- Weight Validation Slider -->
+        <div class="form-group" style="margin-bottom: 1.5rem;">
+          <div class="flex-between">
+            <label class="form-label">Scale Verified Weight:</label>
+            <strong id="modal-weight-val" style="color: var(--color-primary-dark); font-size: 1.15rem;">${item.quantityKg} KG</strong>
+          </div>
+          <input type="range" id="modal-weight-slider" min="0.5" max="15" step="0.5" value="${item.quantityKg}" style="width: 100%; accent-color: var(--color-primary);" oninput="document.getElementById('modal-weight-val').textContent = this.value + ' KG'">
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="modal-actions-grid">
+          <button class="btn btn-secondary" style="border-color: #EF4444; color: #EF4444;" onclick="window.WorkerPortalView.processVerification('${item.id}', false)">
+            <i data-lucide="x-circle" class="lucide-icon-sm"></i>
+            <span>Reject Waste</span>
+          </button>
+          <button class="btn btn-primary btn-lg" onclick="window.WorkerPortalView.processVerification('${item.id}', true)">
+            <i data-lucide="check-circle-2" class="lucide-icon-sm"></i>
+            <span>Approve &amp; Release Credits</span>
+          </button>
+        </div>
+      `;
+
+      document.getElementById('worker-inspect-modal').classList.add('active');
+      if (window.lucide) window.lucide.createIcons();
+    }
+  },
+
+  closeModal() {
+    SoundFX.playClick();
+    document.getElementById('worker-inspect-modal').classList.remove('active');
+  },
+
+  processVerification(pickupId, approved) {
+    if (approved) {
+      SoundFX.playPointsEarned();
+      Confetti.trigger(90);
+      const slider = document.getElementById('modal-weight-slider');
+      const verifiedWeight = slider ? parseFloat(slider.value) : undefined;
+      State.awardCredits(pickupId, verifiedWeight);
+      window.AppRouter.showToast('Pickup verified! Green Credits released.');
+    } else {
+      SoundFX.playClick();
+      State.updatePickupStatus(pickupId, 'rejected');
+      window.AppRouter.showToast('Pickup marked as rejected.');
+    }
+
+    this.closeModal();
+    this.render();
+  },
+
+  // ------------------------------------------------------------------
+  // QR Scan Verification
+  // ------------------------------------------------------------------
+  openScanModal() {
+    SoundFX.playClick();
+    const modal = document.getElementById('worker-scan-modal');
+    if (!modal) return;
+    modal.classList.add('active');
+    this.renderScanCameraView();
+  },
+
+  closeScanModal() {
+    SoundFX.playClick();
+    QRScanner.stop();
+    const modal = document.getElementById('worker-scan-modal');
+    if (modal) modal.classList.remove('active');
+    this.render();
+  },
+
+  renderScanCameraView() {
+    const body = document.getElementById('worker-scan-body');
+    if (!body) return;
+
+    body.innerHTML = `
+      <div style="text-align: center;">
+        <h3 style="color: var(--color-navy); margin-bottom: 0.25rem;">Scan Citizen Pickup QR</h3>
+        <p style="font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1rem;">Align citizen QR code inside the camera viewfinder.</p>
+
+        <div style="position: relative; width: 100%; aspect-ratio: 1 / 1; background: #0A1929; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1rem;">
+          <video id="worker-scan-video" style="width: 100%; height: 100%; object-fit: cover;" muted></video>
+          <canvas id="worker-scan-canvas" style="display: none;"></canvas>
+          <div style="position: absolute; inset: 0; border: 3px solid rgba(132, 204, 22, 0.85); border-radius: var(--radius-lg); margin: 15%; pointer-events: none;"></div>
+        </div>
+
+        <span class="badge badge-green" style="margin-bottom: 1rem;">Camera Active</span>
+
+        <button class="btn btn-secondary btn-block" onclick="window.WorkerPortalView.useManualFallback()">
+          <i data-lucide="keyboard" class="lucide-icon-sm"></i>
+          <span>Enter Request ID Manually</span>
+        </button>
+      </div>
+    `;
+
+    if (window.lucide) window.lucide.createIcons();
+
+    QRScanner.start(
+      'worker-scan-video',
+      'worker-scan-canvas',
+      (decodedText) => this.handleScannedText(decodedText),
+      (errorMessage) => this.renderManualFallback(errorMessage)
+    );
+  },
+
+  renderManualFallback(errorMessage) {
+    QRScanner.stop();
+    const body = document.getElementById('worker-scan-body');
+    if (!body) return;
+
+    body.innerHTML = `
+      <div style="text-align: center;">
+        <h3 style="color: var(--color-navy); margin-bottom: 0.25rem;">Manual Request Verification</h3>
+        <span class="badge" style="background: #FEF3C7; color: #92400E; font-weight: 700; margin-bottom: 1rem;">Enter Request ID</span>
+        ${errorMessage ? `<p style="font-size: 0.78rem; color: var(--text-muted); margin-bottom: 1rem;">${errorMessage}</p>` : ''}
+
+        <div class="form-group" style="text-align: left;">
+          <label class="form-label">Pickup Request ID</label>
+          <input type="text" id="manual-pickup-id" class="form-input neu-input" placeholder="e.g. GK-2026-89421" style="text-transform: uppercase;" onkeydown="if(event.key==='Enter') window.WorkerPortalView.submitManualId()">
+        </div>
+
+        <button class="btn btn-primary btn-lg btn-block" style="margin-top: 0.5rem;" onclick="window.WorkerPortalView.submitManualId()">
+          <i data-lucide="check" class="lucide-icon-sm"></i>
+          <span>Verify Pickup</span>
+        </button>
+        <button class="btn btn-secondary btn-block" style="margin-top: 0.5rem;" onclick="window.WorkerPortalView.renderScanCameraView()">
+          <i data-lucide="camera" class="lucide-icon-sm"></i>
+          <span>Try Camera Again</span>
+        </button>
+      </div>
+    `;
+
+    if (window.lucide) window.lucide.createIcons();
+    setTimeout(() => document.getElementById('manual-pickup-id')?.focus(), 50);
+  },
+
+  useManualFallback() {
+    SoundFX.playClick();
+    this.renderManualFallback(null);
+  },
+
+  submitManualId() {
+    const input = document.getElementById('manual-pickup-id');
+    if (!input || !input.value.trim()) return;
+    this.handleScannedText(input.value.trim());
+  },
+
+  handleScannedText(rawText) {
+    SoundFX.playClick();
+    const pickupId = QRCode.extractPickupId(rawText);
+
+    if (!pickupId) {
+      this.renderScanResult({ state: 'invalid', raw: rawText });
+      return;
+    }
+
+    const queueItem = State.state.workerQueue.find(q => q.id === pickupId);
+    const pickupRecord = State.state.pickups.find(p => p.id === pickupId);
+
+    if (!queueItem && !pickupRecord) {
+      this.renderScanResult({ state: 'invalid', raw: rawText, pickupId });
+      return;
+    }
+
+    const isVerified = (queueItem && queueItem.status === 'verified') || (pickupRecord && pickupRecord.status === 'verified');
+    if (isVerified) {
+      this.renderScanResult({
+        state: 'already-verified',
+        item: {
+          id: pickupId,
+          userName: (queueItem && queueItem.userName) || State.state.user.name,
+          pointsCredited: (pickupRecord && pickupRecord.pointsCredited) || (queueItem && queueItem.pointsReward) || 0
+        }
+      });
+      return;
+    }
+
+    if (!queueItem) {
+      this.renderScanResult({ state: 'invalid', raw: rawText, pickupId });
+      return;
+    }
+
+    this.renderScanResult({ state: 'confirm', item: queueItem });
+  },
+
+  renderScanResult({ state, item, raw, pickupId }) {
+    const body = document.getElementById('worker-scan-body');
+    if (!body) return;
+
+    if (state === 'invalid') {
+      body.innerHTML = `
+        <div style="text-align: center;">
+          <div style="width: 52px; height: 52px; border-radius: 50%; background: #FEE2E2; color: #DC2626; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto;">
+            <i data-lucide="x-circle" class="lucide-icon-lg"></i>
+          </div>
+          <h3 style="color: #991B1B; margin-bottom: 0.25rem;">Invalid QR / Request ID</h3>
+          <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.25rem;">
+            "${pickupId || raw}" doesn't match any pickup assigned to you.
+          </p>
+          <button class="btn btn-primary btn-block" onclick="window.WorkerPortalView.renderScanCameraView()">
+            Try Again
+          </button>
+        </div>
+      `;
+      if (window.lucide) window.lucide.createIcons();
+      return;
+    }
+
+    if (state === 'already-verified') {
+      body.innerHTML = `
+        <div style="text-align: center;">
+          <div style="width: 52px; height: 52px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto;">
+            <i data-lucide="check-circle-2" class="lucide-icon-lg"></i>
+          </div>
+          <h3 style="color: var(--color-primary-dark); margin-bottom: 0.25rem;">Already Verified</h3>
+          <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.25rem;">
+            Pickup #${item.id}${item.userName ? ` (${item.userName})` : ''} was already verified${item.pointsCredited ? ` — ${item.pointsCredited} GC were already credited` : ''}. No duplicate points awarded.
+          </p>
+          <button class="btn btn-secondary btn-block" onclick="window.WorkerPortalView.closeScanModal()">
+            Close
+          </button>
+        </div>
+      `;
+      if (window.lucide) window.lucide.createIcons();
+      return;
+    }
+
+    // state === 'confirm'
+    body.innerHTML = `
+      <div style="text-align: center;">
+        <div style="width: 52px; height: 52px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto;">
+          <i data-lucide="qr-code" class="lucide-icon-lg"></i>
+        </div>
+        <span class="badge badge-green" style="margin-bottom: 0.75rem;">QR Verified &bull; Authentic Request</span>
+        <h3 style="color: var(--color-navy); margin-bottom: 0.75rem;">${item.subType}</h3>
+
+        <div class="neu-card-inset" style="padding: 1rem; border-radius: var(--radius-md); text-align: left; margin-bottom: 1.25rem; font-size: 0.85rem;">
+          <div class="flex-between" style="margin-bottom: 0.4rem;"><span style="color: var(--text-muted);">Request ID:</span><strong>${item.id}</strong></div>
+          <div class="flex-between" style="margin-bottom: 0.4rem;"><span style="color: var(--text-muted);">Citizen:</span><strong>${item.userName}</strong></div>
+          <div class="flex-between" style="margin-bottom: 0.4rem;"><span style="color: var(--text-muted);">Declared Weight:</span><strong>${item.quantityKg} KG</strong></div>
+          <div class="flex-between"><span style="color: var(--text-muted);">Points Reward:</span><strong style="color: var(--color-primary-dark);">+${item.pointsReward} GC</strong></div>
+        </div>
+
+        <button class="btn btn-primary btn-lg btn-block" onclick="window.WorkerPortalView.confirmScannedPickup('${item.id}')">
+          <i data-lucide="check" class="lucide-icon-sm"></i>
+          <span>Confirm Collection &amp; Issue Credits</span>
+        </button>
+      </div>
+    `;
+    if (window.lucide) window.lucide.createIcons();
+  },
+
+  confirmScannedPickup(pickupId) {
+    const result = State.awardCredits(pickupId);
+
+    const modal = document.getElementById('worker-scan-modal');
+    if (modal) modal.classList.add('active');
+    const body = document.getElementById('worker-scan-body');
+    if (!body) return;
+
+    if (!result.success) {
+      const queueItem = State.state.workerQueue.find(q => q.id === pickupId);
+      const pickupRecord = State.state.pickups.find(p => p.id === pickupId);
+      this.renderScanResult({
+        state: 'already-verified',
+        item: {
+          id: pickupId,
+          userName: (queueItem && queueItem.userName) || State.state.user.name,
+          pointsCredited: result.points || (pickupRecord && pickupRecord.pointsCredited) || 0
+        }
+      });
+      return;
+    }
+
+    SoundFX.playPointsEarned();
+    Confetti.trigger(90);
+
+    body.innerHTML = `
+      <div style="text-align: center;">
+        <div style="width: 56px; height: 56px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem auto;">
+          <i data-lucide="check-circle-2" class="lucide-icon-lg"></i>
+        </div>
+        <h3 style="color: var(--color-primary-dark); margin-bottom: 0.5rem;">Collection Verified</h3>
+        <p style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.25rem;">
+          +${result.points} Green Credits disbursed to citizen. Lifecycle status updated to Verified.
+        </p>
+        <button class="btn btn-primary btn-lg btn-block" onclick="window.WorkerPortalView.closeScanModal()">
+          Done
+        </button>
+      </div>
+    `;
+    if (window.lucide) window.lucide.createIcons();
+  }
+};
+
+window.WorkerPortalView = WorkerPortalView;
diff --git a/state.js b/js/state.js
similarity index 71%
rename from state.js
rename to js/state.js
index ef219b1..36531de 100644
--- a/state.js
+++ b/js/state.js
@@ -1,18 +1,24 @@
 /* ==========================================================================
-   GREEN KARMA — REACTIVE STATE STORE
+   GREEN LEGACY — REACTIVE STATE STORE
    Persistent State, Role-Based Access, & Event Subscriptions
    ========================================================================== */
 
 import { Formatters } from './utils/formatters.js';
 
+// Demo persistence (localStorage) — see saveState()/restoreState()/resetState()
+const STORAGE_KEY = 'greenLegacyDemoState';
+const STORAGE_VERSION = 1;
+
 class StateStore {
   constructor() {
     this.listeners = new Set();
-    this.loadInitialState();
+    this.state = this.restoreState() || this.getSeedState();
   }
 
-  loadInitialState() {
-    this.state = {
+  // Original seed/demo dataset. Also used by resetState() to restore
+  // the app to its starting condition.
+  getSeedState() {
+    return {
       // Current User Role: 'citizen' | 'worker' | 'admin' | 'institution'
       currentRole: 'citizen',
 
@@ -24,12 +30,18 @@ class StateStore {
         phone: '+91 98765 43210',
         avatar: 'SP',
         address: 'Flat 402, Green Meadows, Ward 4B, Mumbai',
-        greenPoints: 1250, // 100 GP = ₹10 => ₹125
+        greenPoints: 1250, // 100 GC = ₹10 => ₹125
+        get greenCredits() { return this.greenPoints; },
+        set greenCredits(val) { this.greenPoints = val; },
         lifetimeWasteKg: 125,
         pickupsCompleted: 18,
         co2SavedKg: 84.5,
         treesEquivalent: 6.2,
         waterSavedLitres: 480,
+        // Category breakdown of lifetimeWasteKg — kept in sync with it
+        // (wet + dry + harmful === lifetimeWasteKg) so the Impact
+        // Dashboard's composition card can derive real percentages.
+        wasteByCategoryKg: { wet: 48, dry: 65, harmful: 12 },
         rank: 12,
         greenStreakDays: 8,
         kycVerified: true,
@@ -58,11 +70,14 @@ class StateStore {
         greenPointsIssued: 4850000,
         greenPointsRedeemed: 3920000,
         hotspotsResolved: 342,
+        // Category breakdown of totalWasteTons — kept in sync with it
+        // so the admin Segregation Ratio chart derives real percentages.
+        wasteByCategoryTons: { wet: 12922, dry: 8946, harmful: 2982 },
         connectedDatabases: [
-          { name: 'Municipal Waste Registry (BMC-GIS)', status: 'ONLINE', ping: '18ms', records: '1.4M' },
-          { name: 'National Citizen Green Ledger (UIDAI / SBM)', status: 'ONLINE', ping: '24ms', records: '125K' },
-          { name: 'Smart City Fleet & Worker Dispatch API', status: 'ONLINE', ping: '12ms', records: '480 Vans' },
-          { name: 'Authorized Material Recovery Facilities (MRF)', status: 'ONLINE', ping: '32ms', records: '18 Hubs' }
+          { name: 'Application', status: 'LOCAL DEMO', detail: 'Interactive prototype running in this browser' },
+          { name: 'Data Store', status: 'BROWSER PERSISTENCE', detail: 'Demo state is saved locally on this device' },
+          { name: 'Municipal Integration', status: 'PROTOTYPE', detail: 'Workflow demonstration; no live city system is connected' },
+          { name: 'MRF Network', status: 'DEMO DATASET', detail: 'Recovery stages are represented with sample data' }
         ]
       },
 
@@ -233,7 +248,7 @@ class StateStore {
           id: 'badge_4',
           name: 'Eco Champion',
           icon: '🏆',
-          description: 'Accumulate more than 2,000 Green Points.',
+          description: 'Accumulate more than 2,000 Green Credits.',
           unlocked: false,
           progress: 62.5 // 1250/2000
         },
@@ -375,7 +390,7 @@ class StateStore {
         },
         {
           id: 'notif_2',
-          title: '🌱 You Earned +10 Green Points!',
+          title: '+10 Green Credits issued',
           message: 'Wet waste collection #GK-2026-89210 verified successfully by municipal inspector.',
           timestamp: new Date(Date.now() - 3 * 3600 * 1000).toISOString(),
           read: false,
@@ -384,7 +399,7 @@ class StateStore {
         {
           id: 'notif_3',
           title: '🔥 8-Day Green Streak!',
-          message: 'Keep logging segregated waste daily to unlock the Eco Master +50 GP milestone.',
+          message: 'Keep logging segregated waste daily to unlock the Eco Master +50 GC milestone.',
           timestamp: new Date(Date.now() - 24 * 3600 * 1000).toISOString(),
           read: true,
           type: 'streak'
@@ -392,7 +407,7 @@ class StateStore {
         {
           id: 'notif_4',
           title: '📱 Recharge Successful',
-          message: '₹10 Jio recharge applied successfully using 100 Green Points.',
+          message: '₹10 Jio recharge applied successfully using 100 Green Credits.',
           timestamp: new Date(Date.now() - 48 * 3600 * 1000).toISOString(),
           read: true,
           type: 'reward'
@@ -401,6 +416,74 @@ class StateStore {
     };
   }
 
+  // ------------------------------------------------------------------
+  // Demo persistence (localStorage)
+  // ------------------------------------------------------------------
+
+  // Attempt to restore a previously saved demo session. Returns null
+  // (falling back to the seed state) if nothing is saved, or if what's
+  // saved is missing/corrupted/from an incompatible schema version.
+  restoreState() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return null;
+
+      const parsed = JSON.parse(raw);
+      const looksValid = parsed
+        && parsed.version === STORAGE_VERSION
+        && parsed.state
+        && parsed.state.user
+        && parsed.state.cityStats
+        && Array.isArray(parsed.state.pickups)
+        && Array.isArray(parsed.state.transactions);
+
+      if (!looksValid) {
+        console.warn('Green Legacy: saved demo state was missing/invalid — starting from the seed state.');
+        return null;
+      }
+
+      if (parsed.state.user && typeof parsed.state.user.greenPoints === 'number') {
+        Object.defineProperty(parsed.state.user, 'greenCredits', {
+          get() { return this.greenPoints; },
+          set(v) { this.greenPoints = v; },
+          configurable: true,
+          enumerable: true
+        });
+      }
+
+      return parsed.state;
+    } catch (e) {
+      console.warn('Green Legacy: saved demo state was corrupted — starting from the seed state.', e);
+      return null;
+    }
+  }
+
+  // Persist the current state. Called automatically after every
+  // state-mutating action (see notify()). Best-effort: a demo should
+  // keep working even if localStorage is unavailable or full.
+  saveState() {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        version: STORAGE_VERSION,
+        state: this.state
+      }));
+    } catch (e) {
+      console.warn('Green Legacy: could not save demo state to localStorage.', e);
+    }
+  }
+
+  // Wipe the saved session and restore the original seed data.
+  resetState() {
+    try {
+      localStorage.removeItem(STORAGE_KEY);
+    } catch (e) {
+      // Ignore — saveState() below will just overwrite it if it still exists.
+    }
+    this.state = this.getSeedState();
+    this.saveState();
+    this.notify();
+  }
+
   // Subscribe to state changes
   subscribe(listener) {
     this.listeners.add(listener);
@@ -408,6 +491,7 @@ class StateStore {
   }
 
   notify() {
+    this.saveState();
     this.listeners.forEach(fn => fn(this.state));
   }
 
@@ -437,7 +521,8 @@ class StateStore {
       status: 'created',
       otp: Math.floor(1000 + Math.random() * 9000).toString(),
       etaMinutes: 18,
-      photoUrl: formData.photoUrl || null
+      photoUrl: formData.photoUrl || null,
+      geoCoords: formData.geoCoords || null
     };
 
     this.state.pickups.unshift(newRequest);
@@ -453,7 +538,8 @@ class StateStore {
       pointsReward: newRequest.pointsReward,
       status: 'created',
       otp: newRequest.otp,
-      photoUrl: newRequest.photoUrl || 'https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?w=300&q=80'
+      photoUrl: newRequest.photoUrl || 'https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?w=300&q=80',
+      geoCoords: newRequest.geoCoords
     });
 
     this.addNotification({
@@ -466,21 +552,41 @@ class StateStore {
     return newRequest;
   }
 
-  // Worker Verifies Waste & Credits GP
+  // Worker Verifies Waste & Credits GC
   verifyWasteSubmission(pickupId, approved = true, adjustedWeightKg = null) {
     const pickup = this.state.pickups.find(p => p.id === pickupId);
     const workerItem = this.state.workerQueue.find(p => p.id === pickupId);
 
+    // Guard against double-crediting: if this pickup was already verified
+    // (via any workflow — QR scan, manual inspection, or fast-forward),
+    // report that back instead of awarding credits a second time.
+    const alreadyVerified = (pickup && pickup.status === 'verified') || (workerItem && workerItem.status === 'verified');
+    if (alreadyVerified) {
+      return {
+        success: false,
+        alreadyVerified: true,
+        points: (pickup && pickup.pointsCredited) || (pickup && pickup.pointsReward) || 0,
+        weight: pickup ? pickup.quantityKg : null
+      };
+    }
+
     if (approved) {
-      const points = pickup ? pickup.pointsReward : 10;
-      const weight = adjustedWeightKg || (pickup ? pickup.quantityKg : 4.0);
+      const rateMap = { wet: 10, dry: 7, harmful: 5 };
+      const rate = pickup ? (rateMap[pickup.category] || pickup.pointsReward || 10) : 10;
+      const weight = (adjustedWeightKg !== null && adjustedWeightKg !== undefined) ? adjustedWeightKg : (pickup ? pickup.quantityKg : 4.0);
+      const points = (adjustedWeightKg !== null && adjustedWeightKg !== undefined) ? Math.round(weight * rate) : (pickup ? pickup.pointsReward : 10);
 
       // Update Pickup Status
       if (pickup) {
         pickup.status = 'verified';
         pickup.quantityKg = weight;
+        pickup.pointsCredited = points;
+      }
+      if (workerItem) {
+        workerItem.status = 'verified';
+        workerItem.quantityKg = weight;
+        workerItem.pointsReward = points;
       }
-      if (workerItem) workerItem.status = 'verified';
 
       // Credit User Points & Impact
       this.state.user.greenPoints += points;
@@ -489,15 +595,25 @@ class StateStore {
       this.state.user.co2SavedKg += Math.round(weight * 0.65 * 10) / 10;
       this.state.user.treesEquivalent = Math.round((this.state.user.co2SavedKg / 13.5) * 10) / 10;
 
+      const category = pickup ? pickup.category : 'wet';
+      if (this.state.user.wasteByCategoryKg && this.state.user.wasteByCategoryKg[category] !== undefined) {
+        this.state.user.wasteByCategoryKg[category] = Math.round((this.state.user.wasteByCategoryKg[category] + weight) * 10) / 10;
+      }
+
       // Update Municipal Stats
       this.state.cityStats.verifiedPickups += 1;
       this.state.cityStats.greenPointsIssued += points;
+      this.state.cityStats.totalWasteTons = Math.round((this.state.cityStats.totalWasteTons + weight / 1000) * 100) / 100;
+      if (this.state.cityStats.wasteByCategoryTons && this.state.cityStats.wasteByCategoryTons[category] !== undefined) {
+        this.state.cityStats.wasteByCategoryTons[category] = Math.round((this.state.cityStats.wasteByCategoryTons[category] + weight / 1000) * 100) / 100;
+      }
 
       // Add Ledger Transaction
       this.state.transactions.unshift({
         id: `TXN-${Math.floor(100000 + Math.random() * 900000)}`,
         title: `${pickup ? pickup.categoryName : 'Waste'} Pickup Verified`,
-        category: 'EARN',
+        category: category,
+        amount: points,
         amountGp: points,
         equivalentInr: Formatters.gpToInr(points),
         date: new Date().toISOString(),
@@ -508,19 +624,19 @@ class StateStore {
 
       // Add Notification
       this.addNotification({
-        title: `🌱 +${points} Green Points Credited!`,
+        title: `+${points} Green Credits issued`,
         message: `Waste pickup #${pickupId} (${weight} kg) has been verified. Green Wallet updated.`,
         type: 'points'
       });
 
       this.notify();
-      return { success: true, points, weight };
+      return { success: true, points, awardedPoints: points, weight };
     } else {
       if (pickup) pickup.status = 'rejected';
       if (workerItem) workerItem.status = 'rejected';
 
       this.addNotification({
-        title: `⚠️ Waste Submission Rejected`,
+        title: `Waste submission rejected`,
         message: `Pickup #${pickupId} was rejected due to improper segregation. Please re-segregate and try again.`,
         type: 'error'
       });
@@ -530,10 +646,44 @@ class StateStore {
     }
   }
 
-  // Redeem Green Points (Mobile Recharge, Utility Bills, Vouchers)
+  // Alias for awardCredits adhering to idempotency and scale weight
+  awardCredits(pickupId, weight = null) {
+    const res = this.verifyWasteSubmission(pickupId, true, weight);
+    return {
+      success: res.success,
+      alreadyVerified: res.alreadyVerified || false,
+      awardedPoints: res.awardedPoints || res.points || 0,
+      points: res.points || 0,
+      weight: res.weight
+    };
+  }
+
+  // Lifecycle status updates: created -> assigned -> on_the_way -> collected -> verified/rejected
+  updatePickupStatus(pickupId, newStatus) {
+    const validStatuses = ['created', 'assigned', 'on_the_way', 'collected', 'verified', 'rejected'];
+    if (!validStatuses.includes(newStatus)) {
+      console.warn(`CleanCred: Invalid status ${newStatus}`);
+      return { success: false, message: `Invalid status ${newStatus}` };
+    }
+
+    const pickup = this.state.pickups.find(p => p.id === pickupId);
+    const workerItem = this.state.workerQueue.find(p => p.id === pickupId);
+
+    if (!pickup && !workerItem) {
+      return { success: false, message: `Pickup ${pickupId} not found` };
+    }
+
+    if (pickup) pickup.status = newStatus;
+    if (workerItem) workerItem.status = newStatus;
+
+    this.notify();
+    return { success: true, status: newStatus };
+  }
+
+  // Redeem Green Credits (Mobile Recharge, Utility Bills, Vouchers)
   redeemPoints(category, title, amountGp, metadata = '') {
     if (this.state.user.greenPoints < amountGp) {
-      return { success: false, message: 'Insufficient Green Points balance' };
+      return { success: false, message: 'Insufficient Green Credits balance' };
     }
 
     const inrValue = Formatters.gpToInr(amountGp);
@@ -556,7 +706,7 @@ class StateStore {
 
     this.addNotification({
       title: `🎁 Redemption Successful`,
-      message: `${title} applied for ₹${inrValue} (${amountGp} GP deducted).`,
+      message: `${title} applied for ₹${inrValue} (${amountGp} GC deducted).`,
       type: 'reward'
     });
 
@@ -579,7 +729,7 @@ class StateStore {
     this.state.illegalDumpingReports.unshift(newReport);
     this.addNotification({
       title: '🚨 Illegal Dumping Reported',
-      message: `Report #${newReport.id} registered. Once municipal inspection resolves this site, +20 GP will be credited.`,
+      message: `Report #${newReport.id} registered. Once municipal inspection resolves this site, +20 GC will be credited.`,
       type: 'info'
     });
 
@@ -607,3 +757,4 @@ class StateStore {
 }
 
 export const State = new StateStore();
+window.State = State;
diff --git a/audio.js b/js/utils/audio.js
similarity index 93%
rename from audio.js
rename to js/utils/audio.js
index 44e8de6..c3e5e55 100644
--- a/audio.js
+++ b/js/utils/audio.js
@@ -1,5 +1,5 @@
 /* ==========================================================================
-   GREEN KARMA — WEB AUDIO API SYNTHESIZER
+   GREEN LEGACY — WEB AUDIO API SYNTHESIZER
    Delightful micro-interactions & feedback sounds
    ========================================================================== */
 
@@ -19,7 +19,7 @@ class SoundEffectsManager {
   }
 
   /**
-   * Sound: Earn Green Points Chime (Upward cheerful arpeggio)
+   * Sound: Earn Green Credits Chime (Upward cheerful arpeggio)
    */
   playPointsEarned() {
     if (!this.enabled) return;
@@ -113,3 +113,6 @@ class SoundEffectsManager {
 }
 
 export const SoundFX = new SoundEffectsManager();
+
+// Inline HTML onclick handlers reference SoundFX directly — expose on window.
+window.SoundFX = SoundFX;
diff --git a/confetti.js b/js/utils/confetti.js
similarity index 91%
rename from confetti.js
rename to js/utils/confetti.js
index d8f9c0b..644df2a 100644
--- a/confetti.js
+++ b/js/utils/confetti.js
@@ -1,5 +1,5 @@
 /* ==========================================================================
-   GREEN KARMA — CANVAS CONFETTI PARTICLE ENGINE
+   GREEN LEGACY — CANVAS CONFETTI PARTICLE ENGINE
    ========================================================================== */
 
 export class ConfettiManager {
@@ -24,6 +24,10 @@ export class ConfettiManager {
     this.canvas.height = window.innerHeight;
   }
 
+  fire(count = 70, duration = 3000) {
+    this.trigger(count, duration);
+  }
+
   trigger(count = 70, duration = 3000) {
     const colors = ['#16A34A', '#84CC16', '#0B5D3B', '#F59E0B', '#3B82F6', '#10B981', '#FBBF24'];
     this.particles = [];
@@ -84,3 +88,6 @@ export class ConfettiManager {
 }
 
 export const Confetti = new ConfettiManager();
+
+// Inline HTML onclick handlers reference Confetti directly — expose on window.
+window.Confetti = Confetti;
diff --git a/formatters.js b/js/utils/formatters.js
similarity index 87%
rename from formatters.js
rename to js/utils/formatters.js
index 7965e4d..5334a3d 100644
--- a/formatters.js
+++ b/js/utils/formatters.js
@@ -1,20 +1,20 @@
 /* ==========================================================================
-   GREEN KARMA — UTILITY FORMATTERS
-   Points Conversion Rule: 100 Green Points (GP) = ₹10 (INR)
+   GREEN LEGACY — UTILITY FORMATTERS
+   Points Conversion Rule: 100 Green Credits (GC) = ₹10 (INR)
    ========================================================================== */
 
 export const Formatters = {
   /**
-   * Convert Green Points to Indian Rupees (INR)
-   * 100 GP = ₹10
+   * Convert Green Credits to Indian Rupees (INR)
+   * 100 GC = ₹10
    */
   gpToInr(gp) {
     return Math.floor((gp / 100) * 10);
   },
 
   /**
-   * Convert INR to Green Points
-   * ₹10 = 100 GP
+   * Convert INR to Green Credits
+   * ₹10 = 100 GC
    */
   inrToGp(inr) {
     return inr * 10;
diff --git a/mapHelper.js b/js/utils/mapHelper.js
similarity index 65%
rename from mapHelper.js
rename to js/utils/mapHelper.js
index 43d05b8..d5b572d 100644
--- a/mapHelper.js
+++ b/js/utils/mapHelper.js
@@ -1,5 +1,5 @@
 /* ==========================================================================
-   GREEN KARMA — LEAFLET MAP HELPER
+   GREEN LEGACY — LEAFLET MAP HELPER
    Interactive Geolocation, Vehicle Tracking, and City Hotspots
    ========================================================================== */
 
@@ -81,5 +81,45 @@ export const MapHelper = {
     }).addTo(map);
 
     return map;
+  },
+
+  /**
+   * Request real device coordinates via HTML5 Geolocation API
+   */
+  getUserLocation() {
+    return new Promise((resolve, reject) => {
+      if (!navigator.geolocation) {
+        reject(new Error('Geolocation is not supported by this browser.'));
+        return;
+      }
+
+      navigator.geolocation.getCurrentPosition(
+        position => {
+          resolve({
+            lat: position.coords.latitude,
+            lng: position.coords.longitude,
+            accuracy: position.coords.accuracy
+          });
+        },
+        error => {
+          let msg = 'Unable to retrieve location.';
+          if (error.code === 1) msg = 'Location access permission denied.';
+          else if (error.code === 2) msg = 'Position unavailable.';
+          else if (error.code === 3) msg = 'Location request timed out.';
+          reject(new Error(msg));
+        },
+        { enableHighAccuracy: true, timeout: 8000, maximumAge: 60000 }
+      );
+    });
+  },
+
+  /**
+   * Format latitude and longitude coordinates
+   */
+  formatCoords(lat, lng) {
+    if (typeof lat !== 'number' || typeof lng !== 'number') return '';
+    const latDir = lat >= 0 ? 'N' : 'S';
+    const lngDir = lng >= 0 ? 'E' : 'W';
+    return `${Math.abs(lat).toFixed(4)}° ${latDir}, ${Math.abs(lng).toFixed(4)}° ${lngDir}`;
   }
 };
diff --git a/js/utils/qrCode.js b/js/utils/qrCode.js
new file mode 100644
index 0000000..ed901ff
--- /dev/null
+++ b/js/utils/qrCode.js
@@ -0,0 +1,69 @@
+/* ==========================================================================
+   GREEN LEGACY — QR CODE UTILITIES
+   Thin wrapper around the "qrcode-generator" library (loaded via CDN in
+   index.html, exposed as the global window.qrcode function). Encodes and
+   decodes the payload printed on a citizen's pickup QR code.
+   ========================================================================== */
+
+// Every Green Legacy pickup QR encodes this fixed prefix + the request ID.
+// The prefix lets us recognize "this looks like one of our QR codes" before
+// even checking whether the request ID exists in state.
+const QR_PREFIX = 'GREENLEGACY:';
+
+export const QRCode = {
+  // The exact string encoded into a pickup's QR code.
+  payloadFor(pickupId) {
+    return `${QR_PREFIX}${pickupId}`;
+  },
+
+  // Extract a pickup ID from scanned or manually-typed text. Accepts the
+  // full prefixed payload ("GREENLEGACY:GK-2026-89421") from a real scan,
+  // or a bare request ID ("GK-2026-89421") typed into the manual fallback.
+  // Returns null if the text doesn't look like a Green Legacy pickup ID at all.
+  extractPickupId(rawText) {
+    if (!rawText) return null;
+    const text = String(rawText).trim();
+
+    if (text.toUpperCase().startsWith(QR_PREFIX)) {
+      return text.slice(QR_PREFIX.length).trim().toUpperCase();
+    }
+    if (/^GK-\d{4}-\d+$/i.test(text)) {
+      return text.toUpperCase();
+    }
+    return null;
+  },
+
+  // Render an actual scannable QR code (SVG) into a container element.
+  // Honest about failure: if the vendored library didn't load (e.g. no
+  // internet at demo time), shows the plain-text request ID instead of
+  // pretending a QR code is there.
+  renderInto(containerId, pickupId) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+
+    if (typeof window.qrcode !== 'function') {
+      container.innerHTML = `
+        <div style="font-family: monospace; font-size: 0.75rem; color: var(--text-muted); padding: 0.75rem; border: 1px dashed var(--color-border); border-radius: var(--radius-md); text-align: center;">
+          QR library unavailable (possibly offline).<br>Show Request ID <strong>${pickupId}</strong> to the collector instead.
+        </div>
+      `;
+      return;
+    }
+
+    try {
+      const qr = window.qrcode(0, 'M');
+      qr.addData(this.payloadFor(pickupId));
+      qr.make();
+      container.innerHTML = qr.createSvgTag(4, 2);
+    } catch (e) {
+      console.warn('Green Legacy: could not render QR code.', e);
+      container.innerHTML = `
+        <div style="font-family: monospace; font-size: 0.75rem; color: var(--text-muted); padding: 0.75rem; border: 1px dashed var(--color-border); border-radius: var(--radius-md); text-align: center;">
+          QR could not be rendered.<br>Show Request ID <strong>${pickupId}</strong> to the collector instead.
+        </div>
+      `;
+    }
+  }
+};
+
+window.QRCode = QRCode;
diff --git a/js/utils/qrScanner.js b/js/utils/qrScanner.js
new file mode 100644
index 0000000..65dbee1
--- /dev/null
+++ b/js/utils/qrScanner.js
@@ -0,0 +1,103 @@
+/* ==========================================================================
+   GREEN LEGACY — LIVE CAMERA QR SCANNER
+   Thin wrapper around getUserMedia + the "jsQR" decoding library (loaded
+   via CDN in index.html, exposed as the global window.jsQR function).
+
+   This module is deliberately honest about camera availability: start()
+   calls onError() (rather than silently doing nothing) whenever the camera
+   can't actually be used, so the calling UI can fall back to manual entry
+   instead of showing a scanner that will never find anything.
+   ========================================================================== */
+
+export const QRScanner = {
+  stream: null,
+  videoEl: null,
+  canvasEl: null,
+  rafId: null,
+  running: false,
+
+  // Returns true only if this browser/context could plausibly support a
+  // live camera scan at all (secure context + getUserMedia + jsQR present).
+  isSupported() {
+    return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) && typeof window.jsQR === 'function';
+  },
+
+  // Start scanning. onDecode(text) fires once with the raw decoded string
+  // the first time a QR code is found (the loop stops itself after that —
+  // call start() again to scan another code). onError(message) fires if the
+  // camera can't be accessed for any reason.
+  async start(videoElementId, canvasElementId, onDecode, onError) {
+    this.stop();
+
+    if (!this.isSupported()) {
+      onError('Camera scanning isn\u2019t supported in this browser/context.');
+      return;
+    }
+
+    this.videoEl = document.getElementById(videoElementId);
+    this.canvasEl = document.getElementById(canvasElementId);
+    if (!this.videoEl || !this.canvasEl) {
+      onError('Scanner UI not ready.');
+      return;
+    }
+
+    try {
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: 'environment' }
+      });
+    } catch (e) {
+      onError('Camera access unavailable or denied.');
+      return;
+    }
+
+    this.videoEl.srcObject = this.stream;
+    this.videoEl.setAttribute('playsinline', 'true');
+    await this.videoEl.play();
+
+    this.running = true;
+    const ctx = this.canvasEl.getContext('2d');
+
+    const tick = () => {
+      if (!this.running) return;
+
+      if (this.videoEl.readyState === this.videoEl.HAVE_ENOUGH_DATA) {
+        this.canvasEl.width = this.videoEl.videoWidth;
+        this.canvasEl.height = this.videoEl.videoHeight;
+        ctx.drawImage(this.videoEl, 0, 0, this.canvasEl.width, this.canvasEl.height);
+
+        const imageData = ctx.getImageData(0, 0, this.canvasEl.width, this.canvasEl.height);
+        const code = window.jsQR(imageData.data, imageData.width, imageData.height, {
+          inversionAttempts: 'dontInvert'
+        });
+
+        if (code && code.data) {
+          this.stop();
+          onDecode(code.data);
+          return;
+        }
+      }
+
+      this.rafId = requestAnimationFrame(tick);
+    };
+
+    this.rafId = requestAnimationFrame(tick);
+  },
+
+  // Stop the scan loop and release the camera. Safe to call even if not running.
+  stop() {
+    this.running = false;
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    if (this.stream) {
+      this.stream.getTracks().forEach(track => track.stop());
+      this.stream = null;
+    }
+    if (this.videoEl) {
+      this.videoEl.srcObject = null;
+    }
+  }
+};
+
+window.QRScanner = QRScanner;
diff --git a/js/utils/scrambler.js b/js/utils/scrambler.js
new file mode 100644
index 0000000..f8d77ba
--- /dev/null
+++ b/js/utils/scrambler.js
@@ -0,0 +1,89 @@
+/* ==========================================================================
+   CLEANCRED — KINETIC TYPOGRAPHY & TELEMETRY SCRAMBLER ENGINE
+   High-framerate mechanical number scramble & alphanumeric lock
+   ========================================================================== */
+
+export const KineticScrambler = {
+  chars: '0123456789ABCDEF0123456789',
+  symbols: '!<>-_\\/[]{}—=+*^?#________',
+
+  /**
+   * Scramble an HTML element's text content to a target value.
+   * @param {HTMLElement|string} target - DOM element or selector
+   * @param {string|number} finalValue - Target text/number to reveal
+   * @param {Object} options - Configuration options
+   */
+  scramble(target, finalValue, options = {}) {
+    const el = typeof target === 'string' ? document.querySelector(target) : target;
+    if (!el) return;
+
+    const strValue = String(finalValue);
+    const duration = options.duration || 650;
+    const fps = options.fps || 60;
+    const interval = 1000 / fps;
+    const totalFrames = Math.round(duration / interval);
+    let frame = 0;
+
+    const originalText = el.innerText || '';
+
+    // Cancel existing animation on element if any
+    if (el._scrambleTimer) {
+      cancelAnimationFrame(el._scrambleTimer);
+    }
+
+    const startTime = performance.now();
+
+    function update() {
+      const now = performance.now();
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / duration, 1.0);
+
+      // Number of locked characters from left to right
+      const lockedLength = Math.floor(progress * strValue.length);
+
+      let output = '';
+      for (let i = 0; i < strValue.length; i++) {
+        const char = strValue[i];
+        if (i < lockedLength || progress >= 1.0) {
+          output += char;
+        } else if (char === ' ' || char === ',' || char === '.' || char === ':' || char === '-' || char === '/' || char === '°') {
+          output += char;
+        } else {
+          // Scramble characters
+          const pool = (options.numbersOnly && /[0-9]/.test(char)) ? '0123456789' : KineticScrambler.chars;
+          output += pool[Math.floor(Math.random() * pool.length)];
+        }
+      }
+
+      el.innerText = output;
+
+      if (progress < 1.0) {
+        el._scrambleTimer = requestAnimationFrame(update);
+      } else {
+        el.innerText = strValue;
+        el._scrambleTimer = null;
+        if (options.onComplete) options.onComplete();
+      }
+    }
+
+    el._scrambleTimer = requestAnimationFrame(update);
+  },
+
+  /**
+   * Scramble all elements matching a selector with data-scramble attribute.
+   */
+  scrambleAll(root = document) {
+    const elements = root.querySelectorAll('[data-scramble]');
+    elements.forEach((el, idx) => {
+      const targetVal = el.getAttribute('data-scramble') || el.innerText;
+      setTimeout(() => {
+        this.scramble(el, targetVal, {
+          duration: 500 + Math.random() * 300,
+          numbersOnly: el.hasAttribute('data-scramble-numeric')
+        });
+      }, idx * 40);
+    });
+  }
+};
+
+window.KineticScrambler = KineticScrambler;
diff --git a/liveTracking.js b/liveTracking.js
deleted file mode 100644
index b73abd4..0000000
--- a/liveTracking.js
+++ /dev/null
@@ -1,242 +0,0 @@
-/* ==========================================================================
-   GREEN KARMA — LIVE PICKUP TRACKING COMPONENT
-   Swiggy/Uber-Style Interactive Delivery Map & Status Progression
-   ========================================================================== */
-
-import { State } from '../state.js';
-import { Formatters } from '../utils/formatters.js';
-import { MapHelper } from '../utils/mapHelper.js';
-import { Confetti } from '../utils/confetti.js';
-import { SoundFX } from '../utils/audio.js';
-
-export const LiveTrackingView = {
-  mapInstance: null,
-  truckMarker: null,
-  routePolyline: null,
-  animationTimer: null,
-
-  render() {
-    const container = document.getElementById('view-live-tracking');
-    if (!container) return;
-
-    const pickup = State.state.pickups[0] || {
-      id: 'GK-2026-89421',
-      category: 'wet',
-      categoryName: 'Wet Waste (Organic)',
-      pointsReward: 10,
-      quantityKg: 4.5,
-      subType: 'Kitchen Scraps',
-      address: 'Flat 402, Green Meadows, Ward 4B, Mumbai',
-      status: 'on_the_way',
-      workerName: 'Ramesh Kumar',
-      workerPhone: '+91 98111 22334',
-      vehicleNo: 'MH-02-GK-4091',
-      otp: '8492',
-      etaMinutes: 12
-    };
-
-    container.innerHTML = `
-      <div class="app-container">
-        
-        <!-- Header -->
-        <div class="flex-between" style="margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
-          <div>
-            <div class="badge badge-green" style="margin-bottom: 0.35rem;">
-              <span>📍</span> GPS Fleet Tracking &bull; Municipal Smart Grid
-            </div>
-            <h2>Live Pickup Tracking</h2>
-            <p>Track your authorized waste collection worker in real-time.</p>
-          </div>
-
-          <div style="display: flex; gap: 0.75rem; align-items: center;">
-            <button class="btn btn-secondary" onclick="window.LiveTrackingView.simulateWorkerMove()">
-              <span>🔄</span> Refresh GPS
-            </button>
-            <button class="btn btn-primary" onclick="window.LiveTrackingView.fastForwardPickup('${pickup.id}')">
-              <span>⚡</span> Fast-Forward & Verify
-            </button>
-          </div>
-        </div>
-
-        <!-- 2-Column Layout: Map (Left) & Status Timeline + Worker Card (Right) -->
-        <div style="display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 2rem;" class="hero-grid">
-          
-          <!-- Left Column: Map -->
-          <div class="glass-card" style="padding: 1.25rem; overflow: hidden;">
-            <div id="live-tracking-map" style="height: 520px; width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--color-border);"></div>
-            
-            <div class="flex-between" style="margin-top: 1rem; padding: 0.5rem 0.75rem; background: #F8FAFC; border-radius: var(--radius-md); font-size: 0.8rem; color: var(--text-muted);">
-              <span>🟢 Home: Flat 402, Ward 4B</span>
-              <span>🚚 Electric Van: MH-02-GK-4091</span>
-              <span>🏢 MRF Hub: Bandra West</span>
-            </div>
-          </div>
-
-          <!-- Right Column: Status Timeline & Driver Card -->
-          <div style="display: flex; flex-direction: column; gap: 1.5rem;">
-            
-            <!-- Worker Info Card -->
-            <div class="glass-card" style="padding: 1.5rem;">
-              <div class="flex-between" style="margin-bottom: 1rem;">
-                <div style="display: flex; align-items: center; gap: 0.85rem;">
-                  <div style="width: 48px; height: 48px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem;">
-                    👨‍🔧
-                  </div>
-                  <div>
-                    <strong style="color: var(--color-navy); font-size: 1rem; display: block;">${pickup.workerName || 'Ramesh Kumar'}</strong>
-                    <div style="font-size: 0.8rem; color: var(--text-muted);">Municipal Worker &bull; ⭐ 4.9 Rating</div>
-                  </div>
-                </div>
-                <div style="text-align: right;">
-                  <span class="badge" style="background: #D1FAE5; color: #065F46; font-weight: 700;">Verified Staff ✓</span>
-                </div>
-              </div>
-
-              <div style="background: #F8FAFC; border: 1px solid var(--color-border); padding: 0.85rem 1rem; border-radius: var(--radius-md); margin-bottom: 1rem;">
-                <div class="flex-between" style="margin-bottom: 0.35rem; font-size: 0.85rem;">
-                  <span style="color: var(--text-muted);">Vehicle</span>
-                  <strong style="color: var(--color-navy);">${pickup.vehicleNo || 'Electric Van MH-02-GK-4091'}</strong>
-                </div>
-                <div class="flex-between" style="font-size: 0.85rem;">
-                  <span style="color: var(--text-muted);">Pickup OTP</span>
-                  <strong style="color: var(--color-primary-dark); font-size: 1.15rem; letter-spacing: 0.1em;">${pickup.otp || '8492'}</strong>
-                </div>
-              </div>
-
-              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
-                <button class="btn btn-secondary btn-sm" onclick="alert('Calling Municipal Worker Ramesh Kumar at ${pickup.workerPhone || '+91 98111 22334'}...')">
-                  <span>📞</span> Call Worker
-                </button>
-                <button class="btn btn-secondary btn-sm" onclick="alert('Messaging Municipal Worker: Please buzz Flat 402 on arrival.')">
-                  <span>💬</span> Message
-                </button>
-              </div>
-            </div>
-
-            <!-- Milestone Progress Timeline -->
-            <div class="glass-card" style="padding: 1.75rem; flex: 1;">
-              <h4 style="color: var(--color-navy); margin-bottom: 1.25rem;">Collection Progress</h4>
-
-              <div class="timeline-list">
-                
-                <!-- 1. Created -->
-                <div class="timeline-item done">
-                  <div class="timeline-dot">✓</div>
-                  <strong style="font-size: 0.875rem; color: var(--color-navy);">Request Created</strong>
-                  <div style="font-size: 0.75rem; color: var(--text-muted);">Pickup #${pickup.id} registered</div>
-                </div>
-
-                <!-- 2. Assigned -->
-                <div class="timeline-item done">
-                  <div class="timeline-dot">✓</div>
-                  <strong style="font-size: 0.875rem; color: var(--color-navy);">Worker Assigned</strong>
-                  <div style="font-size: 0.75rem; color: var(--text-muted);">Ramesh Kumar accepted the route</div>
-                </div>
-
-                <!-- 3. On The Way -->
-                <div class="timeline-item ${pickup.status === 'on_the_way' ? 'active' : pickup.status === 'verified' || pickup.status === 'collected' ? 'done' : ''}">
-                  <div class="timeline-dot">${pickup.status === 'verified' || pickup.status === 'collected' ? '✓' : '●'}</div>
-                  <strong style="font-size: 0.875rem; color: var(--color-navy);">Pickup On The Way</strong>
-                  <div style="font-size: 0.75rem; color: var(--text-muted);">
-                    ${pickup.status === 'verified' || pickup.status === 'collected' ? 'Reached location' : `Approaching doorstep (~${pickup.etaMinutes || 12} mins)`}
-                  </div>
-                </div>
-
-                <!-- 4. Collected -->
-                <div class="timeline-item ${pickup.status === 'collected' ? 'active' : pickup.status === 'verified' ? 'done' : ''}">
-                  <div class="timeline-dot">${pickup.status === 'verified' ? '✓' : '○'}</div>
-                  <strong style="font-size: 0.875rem; color: var(--color-navy);">Waste Collected</strong>
-                  <div style="font-size: 0.75rem; color: var(--text-muted);">Loaded into segregated compartment</div>
-                </div>
-
-                <!-- 5. Verified -->
-                <div class="timeline-item ${pickup.status === 'verified' ? 'done' : ''}">
-                  <div class="timeline-dot">${pickup.status === 'verified' ? '✓' : '○'}</div>
-                  <strong style="font-size: 0.875rem; color: var(--color-navy);">Verified & Weighed</strong>
-                  <div style="font-size: 0.75rem; color: var(--text-muted);">Segregation purity approved</div>
-                </div>
-
-                <!-- 6. Points Credited -->
-                <div class="timeline-item ${pickup.status === 'verified' ? 'done' : ''}">
-                  <div class="timeline-dot">${pickup.status === 'verified' ? '✓' : '○'}</div>
-                  <strong style="font-size: 0.875rem; color: var(--color-primary-dark);">Green Points Credited</strong>
-                  <div style="font-size: 0.75rem; color: var(--color-primary-dark); font-weight: 700;">+${pickup.pointsReward} GP added to Green Wallet</div>
-                </div>
-
-              </div>
-            </div>
-
-          </div>
-
-        </div>
-
-      </div>
-    `;
-
-    setTimeout(() => this.initMap(), 100);
-  },
-
-  initMap() {
-    const mapElement = document.getElementById('live-tracking-map');
-    if (!mapElement || !window.L) return;
-
-    const userCoord = [19.0760, 72.8777];
-    const vanCoord = [19.0650, 72.8550];
-    const mrfCoord = [19.0880, 72.8950];
-
-    this.mapInstance = MapHelper.initMap('live-tracking-map', [19.0720, 72.8650], 14);
-    if (!this.mapInstance) return;
-
-    // User Home Pin
-    const homePin = MapHelper.createCustomPin('🏠', 'Shivansh (Home)', '#16A34A');
-    window.L.marker(userCoord, { icon: homePin }).addTo(this.mapInstance);
-
-    // Van Pin
-    const vanPin = MapHelper.createCustomPin('🚚', 'Waste Van (ETA 12m)', '#2563EB');
-    this.truckMarker = window.L.marker(vanCoord, { icon: vanPin }).addTo(this.mapInstance);
-
-    // MRF Facility Pin
-    const mrfPin = MapHelper.createCustomPin('🏢', 'Municipal MRF Hub', '#102A43');
-    window.L.marker(mrfCoord, { icon: mrfPin }).addTo(this.mapInstance);
-
-    // Route Polyline
-    const routeCoords = [
-      vanCoord,
-      [19.0690, 72.8620],
-      [19.0730, 72.8710],
-      userCoord,
-      [19.0810, 72.8840],
-      mrfCoord
-    ];
-
-    this.routePolyline = window.L.polyline(routeCoords, {
-      color: '#16A34A',
-      weight: 5,
-      opacity: 0.8,
-      dashArray: '8, 8'
-    }).addTo(this.mapInstance);
-  },
-
-  simulateWorkerMove() {
-    SoundFX.playClick();
-    if (this.truckMarker) {
-      const newLat = 19.0710 + (Math.random() - 0.5) * 0.005;
-      const newLng = 72.8680 + (Math.random() - 0.5) * 0.005;
-      this.truckMarker.setLatLng([newLat, newLng]);
-      State.addNotification({
-        title: '🚚 Van Location Updated',
-        message: 'Ramesh Kumar is now entering Green Park Avenue (~8 mins away).',
-        type: 'pickup'
-      });
-    }
-  },
-
-  fastForwardPickup(pickupId) {
-    SoundFX.playPointsEarned();
-    Confetti.trigger(100);
-    State.verifyWasteSubmission(pickupId, true, 4.5);
-    this.render();
-  }
-};
-
-window.LiveTrackingView = LiveTrackingView;
diff --git a/main.css b/main.css
deleted file mode 100644
index 364c1ff..0000000
--- a/main.css
+++ /dev/null
@@ -1,252 +0,0 @@
-/* ==========================================================================
-   GREEN KARMA — CSS DESIGN SYSTEM & TOKENS
-   Tagline: EARN. RECYCLE. REWARD.
-   ========================================================================== */
-
-@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');
-
-:root {
-  /* Primary Brand Colors */
-  --color-primary-dark: #0B5D3B;     /* Deep Forest Green */
-  --color-primary: #16A34A;          /* Emerald Green */
-  --color-primary-light: #84CC16;    /* Lime Green Accent */
-  --color-primary-subtle: #DCFCE7;   /* Mint Tint */
-  --color-primary-glow: rgba(22, 163, 74, 0.25);
-
-  /* Dark Navy & Neutrals */
-  --color-navy: #102A43;             /* Dark Navy */
-  --color-navy-light: #1E3A5F;
-  --color-navy-dark: #0A1929;
-  --color-bg: #F4F8F5;               /* Clean Light Green-tinted Background */
-  --color-surface: #FFFFFF;          /* Pure Card White */
-  --color-surface-translucent: rgba(255, 255, 255, 0.88);
-  --color-border: #E2E8F0;
-  --color-border-hover: #CBD5E1;
-
-  /* Typography Colors */
-  --text-main: #0F172A;              /* Slate 900 */
-  --text-muted: #64748B;             /* Soft Gray Slate 500 */
-  --text-light: #94A3B8;             /* Slate 400 */
-  --text-inverse: #FFFFFF;
-
-  /* Waste Category Specific Colors */
-  --waste-wet: #16A34A;              /* Green (10 Points) */
-  --waste-wet-bg: #ECFDF5;
-  --waste-wet-border: #A7F3D0;
-  
-  --waste-dry: #2563EB;              /* Blue (7 Points) */
-  --waste-dry-bg: #EFF6FF;
-  --waste-dry-border: #BFDBFE;
-
-  --waste-harmful: #EF4444;          /* Red / Amber (5 Points) */
-  --waste-harmful-bg: #FEF2F2;
-  --waste-harmful-border: #FECACA;
-
-  /* Status Colors */
-  --status-pending: #F59E0B;
-  --status-pending-bg: #FEF3C7;
-  --status-verified: #10B981;
-  --status-verified-bg: #D1FAE5;
-  --status-rejected: #EF4444;
-  --status-rejected-bg: #FEE2E2;
-  --status-info: #3B82F6;
-  --status-info-bg: #DBEAFE;
-
-  /* Elevation Shadows */
-  --shadow-xs: 0 1px 2px 0 rgba(16, 42, 67, 0.05);
-  --shadow-sm: 0 2px 8px -2px rgba(16, 42, 67, 0.08);
-  --shadow-md: 0 8px 24px -4px rgba(16, 42, 67, 0.1);
-  --shadow-lg: 0 16px 36px -6px rgba(16, 42, 67, 0.12);
-  --shadow-glow: 0 0 24px -2px rgba(22, 163, 74, 0.35);
-
-  /* Radius Tokens */
-  --radius-sm: 8px;
-  --radius-md: 14px;
-  --radius-lg: 20px;
-  --radius-xl: 28px;
-  --radius-full: 9999px;
-
-  /* Layout */
-  --nav-height: 72px;
-  --mobile-nav-height: 64px;
-  --container-max: 1280px;
-
-  /* Font Families */
-  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-display: 'Outfit', var(--font-sans);
-}
-
-/* Global Reset & Base */
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  -webkit-tap-highlight-color: transparent;
-}
-
-html {
-  font-size: 16px;
-  scroll-behavior: smooth;
-  font-family: var(--font-sans);
-  background-color: var(--color-bg);
-  color: var(--text-main);
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-}
-
-body {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  overflow-x: hidden;
-  background-color: var(--color-bg);
-  background-image: 
-    radial-gradient(circle at 15% 15%, rgba(22, 163, 74, 0.06) 0%, transparent 40%),
-    radial-gradient(circle at 85% 85%, rgba(132, 204, 22, 0.05) 0%, transparent 40%);
-  background-attachment: fixed;
-}
-
-/* Typography Defaults */
-h1, h2, h3, h4, h5, h6 {
-  font-family: var(--font-display);
-  font-weight: 700;
-  color: var(--color-navy);
-  line-height: 1.25;
-}
-
-h1 { font-size: clamp(2rem, 4vw + 1rem, 3.2rem); letter-spacing: -0.025em; }
-h2 { font-size: clamp(1.5rem, 2.5vw + 0.8rem, 2.2rem); letter-spacing: -0.02em; }
-h3 { font-size: clamp(1.2rem, 1.8vw + 0.6rem, 1.6rem); }
-h4 { font-size: 1.15rem; }
-
-p {
-  color: var(--text-muted);
-  line-height: 1.65;
-  font-size: 0.975rem;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-  transition: all 0.2s ease;
-}
-
-button, input, select, textarea {
-  font-family: inherit;
-  font-size: inherit;
-  border: none;
-  outline: none;
-}
-
-button {
-  cursor: pointer;
-  background: none;
-}
-
-/* Layout Utilities */
-.app-container {
-  width: 100%;
-  max-width: var(--container-max);
-  margin: 0 auto;
-  padding: 0 1.5rem;
-}
-
-.main-content {
-  flex: 1;
-  padding-top: calc(var(--nav-height) + 1.5rem);
-  padding-bottom: 3rem;
-  width: 100%;
-}
-
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.flex-between {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.grid-cols-2 {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 1.5rem;
-}
-
-.grid-cols-3 {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1.5rem;
-}
-
-.grid-cols-4 {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 1.25rem;
-}
-
-/* Badges & Tags */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.35rem 0.8rem;
-  border-radius: var(--radius-full);
-  font-size: 0.775rem;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-}
-
-.badge-green {
-  background: var(--color-primary-subtle);
-  color: var(--color-primary-dark);
-  border: 1px solid rgba(22, 163, 74, 0.2);
-}
-
-.badge-navy {
-  background: rgba(16, 42, 67, 0.08);
-  color: var(--color-navy);
-}
-
-.badge-points {
-  background: linear-gradient(135deg, #16A34A, #84CC16);
-  color: #FFFFFF;
-  font-weight: 700;
-  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
-}
-
-.badge-streak {
-  background: linear-gradient(135deg, #FF6B00, #FFA800);
-  color: #FFFFFF;
-  font-weight: 700;
-  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3);
-}
-
-/* View Sections */
-.view-section {
-  display: none;
-  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.view-section.active {
-  display: block;
-}
-
-/* Custom Scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.03);
-}
-::-webkit-scrollbar-thumb {
-  background: #CBD5E1;
-  border-radius: var(--radius-full);
-}
-::-webkit-scrollbar-thumb:hover {
-  background: #94A3B8;
-}
diff --git a/profile.js b/profile.js
deleted file mode 100644
index 6abe535..0000000
--- a/profile.js
+++ /dev/null
@@ -1,131 +0,0 @@
-/* ==========================================================================
-   GREEN KARMA — CITIZEN PROFILE & ACCOUNT SETTINGS
-   ========================================================================== */
-
-import { State } from '../state.js';
-import { Formatters } from '../utils/formatters.js';
-import { SoundFX } from '../utils/audio.js';
-
-export const ProfileView = {
-  render() {
-    const container = document.getElementById('view-profile');
-    if (!container) return;
-
-    const user = State.state.user;
-
-    container.innerHTML = `
-      <div class="app-container" style="max-width: 860px;">
-        
-        <!-- Header -->
-        <div style="margin-bottom: 2rem;">
-          <div class="badge badge-green" style="margin-bottom: 0.35rem;">
-            <span>👤</span> Citizen Credentials & Settings
-          </div>
-          <h2>User Profile & Civic Identity</h2>
-          <p>Manage your linked municipal KYC, notification preferences, and green achievements.</p>
-        </div>
-
-        <!-- 2-Column Profile Layout -->
-        <div style="display: grid; grid-template-columns: 1fr 1.6fr; gap: 2rem;" class="hero-grid">
-          
-          <!-- Left: Profile Summary Card -->
-          <div class="glass-card" style="padding: 2rem; text-align: center;">
-            <div style="width: 80px; height: 80px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); font-size: 2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto; border: 3px solid var(--color-primary);">
-              ${user.avatar}
-            </div>
-
-            <h3 style="color: var(--color-navy); margin-bottom: 0.25rem;">${user.name}</h3>
-            <p style="font-size: 0.825rem; color: var(--text-muted); margin-bottom: 1rem;">Member since ${user.joinDate}</p>
-
-            <div style="margin-bottom: 1.5rem;">
-              <span class="badge" style="background: #D1FAE5; color: #065F46; font-weight: 700;">
-                ✓ Aadhaar / SBM KYC Verified
-              </span>
-            </div>
-
-            <div style="background: #F8FAFC; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem; text-align: left; font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.5rem;">
-              <div class="flex-between">
-                <span style="color: var(--text-muted);">Green Wallet:</span>
-                <strong style="color: var(--color-primary-dark);">${user.greenPoints} GP (₹${Formatters.gpToInr(user.greenPoints)})</strong>
-              </div>
-              <div class="flex-between">
-                <span style="color: var(--text-muted);">Current Rank:</span>
-                <strong>#${user.rank} (Ward 4B)</strong>
-              </div>
-              <div class="flex-between">
-                <span style="color: var(--text-muted);">Streak:</span>
-                <strong style="color: #EA580C;">🔥 ${user.greenStreakDays} Days</strong>
-              </div>
-            </div>
-          </div>
-
-          <!-- Right: Details Form & Settings -->
-          <div class="glass-card" style="padding: 2rem;">
-            <h3 style="color: var(--color-navy); margin-bottom: 1.25rem;">Account Information</h3>
-
-            <div class="form-group">
-              <label class="form-label">Full Name</label>
-              <input type="text" class="form-input" id="profile-name" value="${user.name}">
-            </div>
-
-            <div class="grid-cols-2">
-              <div class="form-group">
-                <label class="form-label">Email Address</label>
-                <input type="email" class="form-input" id="profile-email" value="${user.email}">
-              </div>
-              <div class="form-group">
-                <label class="form-label">Mobile Number</label>
-                <input type="tel" class="form-input" id="profile-phone" value="${user.phone}">
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label class="form-label">Registered Residential Address</label>
-              <input type="text" class="form-input" id="profile-address" value="${user.address}">
-            </div>
-
-            <div style="border-top: 1px solid var(--color-border); padding-top: 1.25rem; margin-top: 1.25rem;">
-              <h4 style="color: var(--color-navy); margin-bottom: 0.75rem;">Civic Preferences</h4>
-              <label style="display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; margin-bottom: 0.5rem; cursor: pointer;">
-                <input type="checkbox" checked> Receive real-time SMS & WhatsApp alerts for incoming waste van
-              </label>
-              <label style="display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; margin-bottom: 0.5rem; cursor: pointer;">
-                <input type="checkbox" checked> Auto-enroll in Weekly Ward 4B Segregation Challenges
-              </label>
-            </div>
-
-            <button class="btn btn-primary" style="margin-top: 1.5rem;" onclick="window.ProfileView.saveProfile()">
-              Save Changes ✓
-            </button>
-          </div>
-
-        </div>
-
-      </div>
-    `;
-  },
-
-  saveProfile() {
-    SoundFX.playClick();
-    const name = document.getElementById('profile-name').value;
-    const email = document.getElementById('profile-email').value;
-    const phone = document.getElementById('profile-phone').value;
-    const address = document.getElementById('profile-address').value;
-
-    State.state.user.name = name;
-    State.state.user.email = email;
-    State.state.user.phone = phone;
-    State.state.user.address = address;
-
-    State.addNotification({
-      title: '👤 Profile Updated',
-      message: 'Your account details and municipal pickup address were saved.',
-      type: 'info'
-    });
-
-    alert('Profile information updated successfully!');
-    this.render();
-  }
-};
-
-window.ProfileView = ProfileView;
diff --git a/qa-desktop.html b/qa-desktop.html
new file mode 100644
index 0000000..c40d6de
--- /dev/null
+++ b/qa-desktop.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>CleanCred — Desktop QA Harness (1440 &amp; 1280)</title>
+<style>
+  body { margin: 0; background: #26292e; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px; font-family: monospace; }
+  .label { color: #d7dce2; font-size: 11px; }
+  .frame-wrap { overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 2px #4a4f57; }
+  iframe { border: 0; transform-origin: 0 0; background: #E0E5EC; }
+  #f1440 { width: 1440px; height: 1100px; transform: scale(0.29); }
+  #f1280 { width: 1280px; height: 1100px; transform: scale(0.29); }
+</style>
+</head>
+<body>
+  <div class="label">1440 × 1100 (scaled 0.29)</div>
+  <div class="frame-wrap" style="width: 418px; height: 319px;"><iframe id="f1440" src="/index.html#admin"></iframe></div>
+  <div class="label">1280 × 1100 (scaled 0.29)</div>
+  <div class="frame-wrap" style="width: 371px; height: 319px;"><iframe id="f1280" src="/index.html#admin"></iframe></div>
+  <script>
+    // Re-render each frame after fonts settle so charts and text layout are final
+    window.addEventListener('load', () => {
+      setTimeout(() => {
+        document.querySelectorAll('iframe').forEach(f => {
+          try { f.contentWindow.location.reload(); } catch (e) {}
+        });
+      }, 2500);
+    });
+  </script>
+</body>
+</html>
diff --git a/reportWaste.js b/reportWaste.js
deleted file mode 100644
index 05fe78e..0000000
--- a/reportWaste.js
+++ /dev/null
@@ -1,470 +0,0 @@
-/* ==========================================================================
-   GREEN KARMA — REPORT WASTE 5-STEP WIZARD COMPONENT
-   Interactive Category Selection, Photo Simulation, Map Pin, and Request ID
-   ========================================================================== */
-
-import { State } from '../state.js';
-import { Formatters } from '../utils/formatters.js';
-import { MapHelper } from '../utils/mapHelper.js';
-import { Confetti } from '../utils/confetti.js';
-import { SoundFX } from '../utils/audio.js';
-
-export const ReportWasteView = {
-  currentStep: 1,
-  formData: {
-    category: 'wet',
-    subType: 'Kitchen Food & Vegetable Scraps',
-    quantity: 4.5,
-    description: '',
-    photoUrl: null,
-    address: 'Flat 402, Green Meadows, Ward 4B, Mumbai',
-    landmark: 'Opposite Green Park Avenue',
-    pickupType: 'doorstep',
-    scheduledDate: 'Today',
-    scheduledTime: 'Slot 10:00 AM - 12:00 PM'
-  },
-  mapInstance: null,
-  markerInstance: null,
-
-  render(initialParams = {}) {
-    const container = document.getElementById('view-report-waste');
-    if (!container) return;
-
-    if (initialParams.category) {
-      this.formData.category = initialParams.category;
-    }
-    this.currentStep = 1;
-
-    container.innerHTML = `
-      <div class="app-container" style="max-width: 860px;">
-        
-        <!-- Header -->
-        <div style="text-align: center; margin-bottom: 2rem;">
-          <div class="badge badge-green" style="margin-bottom: 0.5rem;">EARN. RECYCLE. REWARD.</div>
-          <h2>Report Waste & Request Pickup</h2>
-          <p>Complete the 5-step verification process to earn guaranteed Green Points.</p>
-        </div>
-
-        <!-- Stepper Navigation Bar -->
-        <div class="stepper-header">
-          <div class="step-item ${this.currentStep === 1 ? 'active' : this.currentStep > 1 ? 'completed' : ''}" onclick="window.ReportWasteView.goToStep(1)">
-            <div class="step-circle">${this.currentStep > 1 ? '✓' : '1'}</div>
-            <span class="step-label">Category</span>
-          </div>
-
-          <div class="step-item ${this.currentStep === 2 ? 'active' : this.currentStep > 2 ? 'completed' : ''}" onclick="window.ReportWasteView.goToStep(2)">
-            <div class="step-circle">${this.currentStep > 2 ? '✓' : '2'}</div>
-            <span class="step-label">Details & Photo</span>
-          </div>
-
-          <div class="step-item ${this.currentStep === 3 ? 'active' : this.currentStep > 3 ? 'completed' : ''}" onclick="window.ReportWasteView.goToStep(3)">
-            <div class="step-circle">${this.currentStep > 3 ? '✓' : '3'}</div>
-            <span class="step-label">Location Map</span>
-          </div>
-
-          <div class="step-item ${this.currentStep === 4 ? 'active' : this.currentStep > 4 ? 'completed' : ''}" onclick="window.ReportWasteView.goToStep(4)">
-            <div class="step-circle">${this.currentStep > 4 ? '✓' : '4'}</div>
-            <span class="step-label">Pickup Time</span>
-          </div>
-
-          <div class="step-item ${this.currentStep === 5 ? 'active' : ''}">
-            <div class="step-circle">5</div>
-            <span class="step-label">Confirmation</span>
-          </div>
-        </div>
-
-        <!-- Dynamic Wizard Step Container -->
-        <div class="glass-card" style="padding: 2.25rem; background: #FFFFFF;" id="wizard-step-content">
-          ${this.renderStepContent()}
-        </div>
-
-      </div>
-    `;
-
-    if (this.currentStep === 3) {
-      setTimeout(() => this.initStepMap(), 100);
-    }
-  },
-
-  renderStepContent() {
-    switch (this.currentStep) {
-      case 1:
-        return this.renderStep1();
-      case 2:
-        return this.renderStep2();
-      case 3:
-        return this.renderStep3();
-      case 4:
-        return this.renderStep4();
-      case 5:
-        return this.renderStep5();
-      default:
-        return this.renderStep1();
-    }
-  },
-
-  // STEP 1: Waste Category Selection
-  renderStep1() {
-    return `
-      <div>
-        <h3 style="margin-bottom: 0.5rem; color: var(--color-navy);">Step 1: Select Waste Category</h3>
-        <p style="font-size: 0.9rem; margin-bottom: 1.75rem;">Choose the segregated waste type you are reporting to see available points reward.</p>
-
-        <div class="grid-cols-3" style="margin-bottom: 2rem;">
-          
-          <!-- Wet Card -->
-          <div class="glass-card-interactive" style="padding: 1.5rem; border-radius: var(--radius-xl); border: 2px solid ${this.formData.category === 'wet' ? 'var(--waste-wet)' : 'var(--color-border)'}; background: ${this.formData.category === 'wet' ? 'var(--waste-wet-bg)' : '#FFFFFF'};" onclick="window.ReportWasteView.setCategory('wet')">
-            <div class="flex-between" style="margin-bottom: 1rem;">
-              <span style="font-size: 2rem;">🟢</span>
-              <span class="badge" style="background: var(--waste-wet); color: #FFFFFF; font-weight: 800;">+10 GP</span>
-            </div>
-            <h4 style="color: var(--waste-wet); margin-bottom: 0.35rem;">Wet Waste</h4>
-            <p style="font-size: 0.8rem; color: var(--text-muted);">Organic kitchen scraps, vegetable peels, food leftovers & garden waste.</p>
-          </div>
-
-          <!-- Dry Card -->
-          <div class="glass-card-interactive" style="padding: 1.5rem; border-radius: var(--radius-xl); border: 2px solid ${this.formData.category === 'dry' ? 'var(--waste-dry)' : 'var(--color-border)'}; background: ${this.formData.category === 'dry' ? 'var(--waste-dry-bg)' : '#FFFFFF'};" onclick="window.ReportWasteView.setCategory('dry')">
-            <div class="flex-between" style="margin-bottom: 1rem;">
-              <span style="font-size: 2rem;">🔵</span>
-              <span class="badge" style="background: var(--waste-dry); color: #FFFFFF; font-weight: 800;">+7 GP</span>
-            </div>
-            <h4 style="color: var(--waste-dry); margin-bottom: 0.35rem;">Dry Waste</h4>
-            <p style="font-size: 0.8rem; color: var(--text-muted);">Paper, cardboard boxes, plastic containers, beverage bottles, glass & metal.</p>
-          </div>
-
-          <!-- Harmful Card -->
-          <div class="glass-card-interactive" style="padding: 1.5rem; border-radius: var(--radius-xl); border: 2px solid ${this.formData.category === 'harmful' ? 'var(--waste-harmful)' : 'var(--color-border)'}; background: ${this.formData.category === 'harmful' ? 'var(--waste-harmful-bg)' : '#FFFFFF'};" onclick="window.ReportWasteView.setCategory('harmful')">
-            <div class="flex-between" style="margin-bottom: 1rem;">
-              <span style="font-size: 2rem;">🔴</span>
-              <span class="badge" style="background: var(--waste-harmful); color: #FFFFFF; font-weight: 800;">+5 GP</span>
-            </div>
-            <h4 style="color: var(--waste-harmful); margin-bottom: 0.35rem;">Harmful Waste</h4>
-            <p style="font-size: 0.8rem; color: var(--text-muted);">Batteries, expired medicines, chemical sprays, old electronic gadgets & CFLs.</p>
-          </div>
-
-        </div>
-
-        <div style="text-align: right;">
-          <button class="btn btn-primary btn-lg" onclick="window.ReportWasteView.goToStep(2)">
-            Continue to Details & Photo →
-          </button>
-        </div>
-      </div>
-    `;
-  },
-
-  // STEP 2: Waste Details & Photo Upload
-  renderStep2() {
-    const subTypesMap = {
-      wet: ['Kitchen Vegetable & Fruit Scraps', 'Cooked Food Leftovers', 'Garden & Fallen Leaves Waste', 'Organic Compostables'],
-      dry: ['Cardboard Cartons & Packaging', 'Plastic Bottles & Containers (PET/HDPE)', 'Paper, Magazines & Newspapers', 'Glass Jars & Metal Cans', 'Old Clothes & Textiles'],
-      harmful: ['Used Lithium & Alkaline Batteries', 'Expired Medications & Syringes', 'E-Waste (Old Phones, Cables, Chargers)', 'Paints, Aerosols & Chemical Solvents']
-    };
-
-    const currentSubTypes = subTypesMap[this.formData.category] || subTypesMap.wet;
-
-    return `
-      <div>
-        <h3 style="margin-bottom: 0.5rem; color: var(--color-navy);">Step 2: Waste Details & Photo</h3>
-        <p style="font-size: 0.9rem; margin-bottom: 1.75rem;">Specify the exact material and upload a photo for verification.</p>
-
-        <!-- Sub-type Selection -->
-        <div class="form-group">
-          <label class="form-label">Specific Material Sub-Category</label>
-          <select class="form-select" id="form-sub-type" onchange="window.ReportWasteView.formData.subType = this.value">
-            ${currentSubTypes.map(st => `
-              <option value="${st}" ${this.formData.subType === st ? 'selected' : ''}>${st}</option>
-            `).join('')}
-          </select>
-        </div>
-
-        <!-- Quantity Slider -->
-        <div class="form-group" style="margin-top: 1.25rem;">
-          <div class="flex-between">
-            <label class="form-label">Approximate Weight / Quantity</label>
-            <span id="weight-display" style="font-weight: 800; color: var(--color-primary-dark); font-size: 1.1rem;">
-              ${this.formData.quantity} KG
-            </span>
-          </div>
-          <input type="range" min="0.5" max="25" step="0.5" value="${this.formData.quantity}" style="width: 100%; accent-color: var(--color-primary);" oninput="window.ReportWasteView.updateWeight(this.value)">
-          <div class="flex-between" style="font-size: 0.75rem; color: var(--text-muted);">
-            <span>0.5 kg (Small Bag)</span>
-            <span>10 kg (Large Box)</span>
-            <span>25 kg (Bulk)</span>
-          </div>
-        </div>
-
-        <!-- Photo Upload Preview & Camera Simulation -->
-        <div class="form-group" style="margin-top: 1.5rem;">
-          <label class="form-label">Upload Waste Photo for Verification</label>
-          
-          <div style="border: 2px dashed var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; text-align: center; background: #F8FAFC; cursor: pointer;" onclick="document.getElementById('waste-photo-input').click()">
-            <input type="file" id="waste-photo-input" accept="image/*" style="display: none;" onchange="window.ReportWasteView.handlePhotoUpload(event)">
-            
-            <div id="photo-preview-box">
-              ${this.formData.photoUrl ? `
-                <img src="${this.formData.photoUrl}" style="max-height: 160px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 0.5rem;" />
-                <div style="font-size: 0.8rem; font-weight: 700; color: var(--color-primary-dark);">Photo Attached ✓ (Click to change)</div>
-              ` : `
-                <div style="font-size: 2.2rem; margin-bottom: 0.5rem;">📸</div>
-                <strong style="color: var(--color-navy); display: block; font-size: 0.95rem;">Click to Take or Upload Waste Photo</strong>
-                <p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">Shows municipal worker that waste is properly segregated.</p>
-              `}
-            </div>
-          </div>
-        </div>
-
-        <div class="flex-between" style="margin-top: 2rem;">
-          <button class="btn btn-secondary" onclick="window.ReportWasteView.goToStep(1)">
-            ← Back
-          </button>
-          <button class="btn btn-primary btn-lg" onclick="window.ReportWasteView.goToStep(3)">
-            Confirm Location →
-          </button>
-        </div>
-      </div>
-    `;
-  },
-
-  // STEP 3: Location Map Pin
-  renderStep3() {
-    return `
-      <div>
-        <h3 style="margin-bottom: 0.5rem; color: var(--color-navy);">Step 3: Confirm Pickup Location</h3>
-        <p style="font-size: 0.9rem; margin-bottom: 1.25rem;">Pinpoint your doorstep location so the nearest collection vehicle can reach seamlessly.</p>
-
-        <!-- Use My Location Trigger -->
-        <div style="margin-bottom: 1rem; display: flex; gap: 0.75rem; align-items: center;">
-          <button class="btn btn-sm btn-emerald-outline" onclick="window.ReportWasteView.detectLocation()">
-            <span>📍</span> Auto-Detect My Current GPS Location
-          </button>
-          <span style="font-size: 0.8rem; color: var(--text-muted);">or drag the pin on map</span>
-        </div>
-
-        <!-- Interactive Map Container -->
-        <div id="report-location-map" style="height: 260px; width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--color-border); margin-bottom: 1.25rem;"></div>
-
-        <!-- Address Text Fields -->
-        <div class="grid-cols-2">
-          <div class="form-group">
-            <label class="form-label">Full Street Address</label>
-            <input type="text" class="form-input" id="form-address" value="${this.formData.address}" onchange="window.ReportWasteView.formData.address = this.value">
-          </div>
-          <div class="form-group">
-            <label class="form-label">Nearby Landmark</label>
-            <input type="text" class="form-input" id="form-landmark" value="${this.formData.landmark}" onchange="window.ReportWasteView.formData.landmark = this.value">
-          </div>
-        </div>
-
-        <div class="flex-between" style="margin-top: 2rem;">
-          <button class="btn btn-secondary" onclick="window.ReportWasteView.goToStep(2)">
-            ← Back
-          </button>
-          <button class="btn btn-primary btn-lg" onclick="window.ReportWasteView.goToStep(4)">
-            Select Pickup Preference →
-          </button>
-        </div>
-      </div>
-    `;
-  },
-
-  // STEP 4: Pickup Preference
-  renderStep4() {
-    return `
-      <div>
-        <h3 style="margin-bottom: 0.5rem; color: var(--color-navy);">Step 4: Pickup Method & Schedule</h3>
-        <p style="font-size: 0.9rem; margin-bottom: 1.75rem;">Choose whether you want doorstep van collection or drop-off at a municipal MRF kiosk.</p>
-
-        <div class="grid-cols-3" style="margin-bottom: 2rem;">
-          
-          <div class="glass-card-interactive" style="padding: 1.5rem; border-radius: var(--radius-lg); border: 2px solid ${this.formData.pickupType === 'doorstep' ? 'var(--color-primary)' : 'var(--color-border)'};" onclick="window.ReportWasteView.setPickupType('doorstep')">
-            <div style="font-size: 1.8rem; margin-bottom: 0.5rem;">🚚</div>
-            <strong style="color: var(--color-navy); display: block;">Doorstep Pickup</strong>
-            <p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">Electric waste van collects from your gate.</p>
-          </div>
-
-          <div class="glass-card-interactive" style="padding: 1.5rem; border-radius: var(--radius-lg); border: 2px solid ${this.formData.pickupType === 'center' ? 'var(--color-primary)' : 'var(--color-border)'};" onclick="window.ReportWasteView.setPickupType('center')">
-            <div style="font-size: 1.8rem; margin-bottom: 0.5rem;">🏢</div>
-            <strong style="color: var(--color-navy); display: block;">Drop at Center</strong>
-            <p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">Drop at Ward 4B Smart Waste Kiosk.</p>
-          </div>
-
-          <div class="glass-card-interactive" style="padding: 1.5rem; border-radius: var(--radius-lg); border: 2px solid ${this.formData.pickupType === 'scheduled' ? 'var(--color-primary)' : 'var(--color-border)'};" onclick="window.ReportWasteView.setPickupType('scheduled')">
-            <div style="font-size: 1.8rem; margin-bottom: 0.5rem;">📅</div>
-            <strong style="color: var(--color-navy); display: block;">Schedule Slot</strong>
-            <p style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem;">Pick specific date and convenient time.</p>
-          </div>
-
-        </div>
-
-        <div class="grid-cols-2">
-          <div class="form-group">
-            <label class="form-label">Preferred Date</label>
-            <select class="form-select" onchange="window.ReportWasteView.formData.scheduledDate = this.value">
-              <option value="Today">Today (Within 30 mins)</option>
-              <option value="Tomorrow Morning">Tomorrow Morning (09:00 AM - 12:00 PM)</option>
-              <option value="Tomorrow Evening">Tomorrow Evening (04:00 PM - 07:00 PM)</option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label class="form-label">Preferred Time Window</label>
-            <select class="form-select" onchange="window.ReportWasteView.formData.scheduledTime = this.value">
-              <option value="Slot 10:00 AM - 12:00 PM">Morning (10:00 AM - 12:00 PM)</option>
-              <option value="Slot 02:00 PM - 04:00 PM">Afternoon (02:00 PM - 04:00 PM)</option>
-              <option value="Slot 05:00 PM - 07:00 PM">Evening (05:00 PM - 07:00 PM)</option>
-            </select>
-          </div>
-        </div>
-
-        <div class="flex-between" style="margin-top: 2rem;">
-          <button class="btn btn-secondary" onclick="window.ReportWasteView.goToStep(3)">
-            ← Back
-          </button>
-          <button class="btn btn-primary btn-lg" onclick="window.ReportWasteView.submitRequest()">
-            <span>🚀</span> Confirm & Submit Request
-          </button>
-        </div>
-      </div>
-    `;
-  },
-
-  // STEP 5: Request Confirmation & Request ID
-  renderStep5() {
-    const lastRequest = State.state.pickups[0];
-    return `
-      <div style="text-align: center; padding: 1.5rem 0;">
-        <div style="width: 72px; height: 72px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); font-size: 2.2rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem auto;" class="animate-pulse-glow">
-          🎉
-        </div>
-
-        <h2 style="color: var(--color-primary-dark); margin-bottom: 0.5rem;">Waste Request Created Successfully!</h2>
-        <p style="font-size: 1rem; color: var(--text-muted); max-width: 520px; margin: 0 auto 1.75rem auto;">
-          Your request is officially queued in the Municipal Waste Grid. A collection worker has been assigned.
-        </p>
-
-        <!-- Request Details Box -->
-        <div style="background: #F8FAFC; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; max-width: 480px; margin: 0 auto 2rem auto; text-align: left;">
-          <div class="flex-between" style="margin-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.75rem;">
-            <span style="font-size: 0.85rem; color: var(--text-muted); font-weight: 600;">Request ID</span>
-            <strong style="color: var(--color-navy); font-size: 1rem; letter-spacing: 0.05em;">${lastRequest ? lastRequest.id : 'GK-2026-89421'}</strong>
-          </div>
-
-          <div class="flex-between" style="margin-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.75rem;">
-            <span style="font-size: 0.85rem; color: var(--text-muted); font-weight: 600;">Status</span>
-            <span class="badge" style="background: #FEF3C7; color: #92400E; font-weight: 700;">🟡 Awaiting Verification</span>
-          </div>
-
-          <div class="flex-between" style="margin-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.75rem;">
-            <span style="font-size: 0.85rem; color: var(--text-muted); font-weight: 600;">Pickup Verification OTP</span>
-            <strong style="color: var(--color-primary-dark); font-size: 1.25rem; letter-spacing: 0.15em;">${lastRequest ? lastRequest.otp : '8492'}</strong>
-          </div>
-
-          <div class="flex-between">
-            <span style="font-size: 0.85rem; color: var(--text-muted); font-weight: 600;">Expected Points</span>
-            <span class="badge badge-points">+${lastRequest ? lastRequest.pointsReward : 10} Green Points</span>
-          </div>
-        </div>
-
-        <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
-          <button class="btn btn-primary btn-lg" onclick="window.AppRouter.navigate('live-tracking')">
-            <span>📍</span> Track Live Collection On Map
-          </button>
-          <button class="btn btn-secondary btn-lg" onclick="window.AppRouter.navigate('dashboard')">
-            Back to Dashboard
-          </button>
-        </div>
-      </div>
-    `;
-  },
-
-  goToStep(step) {
-    SoundFX.playClick();
-    this.currentStep = step;
-    const contentBox = document.getElementById('wizard-step-content');
-    if (contentBox) {
-      contentBox.innerHTML = this.renderStepContent();
-    }
-    this.render();
-  },
-
-  setCategory(cat) {
-    SoundFX.playClick();
-    this.formData.category = cat;
-    this.goToStep(1);
-  },
-
-  setPickupType(type) {
-    SoundFX.playClick();
-    this.formData.pickupType = type;
-    this.goToStep(4);
-  },
-
-  updateWeight(val) {
-    this.formData.quantity = parseFloat(val);
-    const display = document.getElementById('weight-display');
-    if (display) display.textContent = `${this.formData.quantity} KG`;
-  },
-
-  handlePhotoUpload(event) {
-    const file = event.target.files[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        this.formData.photoUrl = e.target.result;
-        SoundFX.playClick();
-        this.goToStep(2);
-      };
-      reader.readAsDataURL(file);
-    }
-  },
-
-  initStepMap() {
-    const mapElement = document.getElementById('report-location-map');
-    if (!mapElement || !window.L) return;
-
-    this.mapInstance = MapHelper.initMap('report-location-map', [19.0760, 72.8777], 15);
-    if (!this.mapInstance) return;
-
-    const pin = MapHelper.createCustomPin('🏠', 'Your Location', '#16A34A');
-    this.markerInstance = window.L.marker([19.0760, 72.8777], { icon: pin, draggable: true }).addTo(this.mapInstance);
-
-    this.markerInstance.on('dragend', (e) => {
-      const pos = e.target.getLatLng();
-      this.formData.address = `Near Coordinates (${pos.lat.toFixed(4)}, ${pos.lng.toFixed(4)}), Ward 4B`;
-      const addrField = document.getElementById('form-address');
-      if (addrField) addrField.value = this.formData.address;
-    });
-  },
-
-  detectLocation() {
-    SoundFX.playClick();
-    if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition(
-        (pos) => {
-          const lat = pos.coords.latitude;
-          const lng = pos.coords.longitude;
-          if (this.mapInstance && this.markerInstance) {
-            this.mapInstance.setView([lat, lng], 16);
-            this.markerInstance.setLatLng([lat, lng]);
-            this.formData.address = `GPS Detected Location (${lat.toFixed(4)}, ${lng.toFixed(4)}), Ward 4B`;
-            const addrField = document.getElementById('form-address');
-            if (addrField) addrField.value = this.formData.address;
-          }
-        },
-        () => {
-          alert('Using default city coordinates for Ward 4B.');
-        }
-      );
-    }
-  },
-
-  submitRequest() {
-    const newReq = State.createWasteRequest(this.formData);
-    SoundFX.playPointsEarned();
-    Confetti.trigger(80);
-    this.currentStep = 5;
-    this.render();
-  }
-};
-
-window.ReportWasteView = ReportWasteView;
diff --git a/responsive.css b/responsive.css
deleted file mode 100644
index 35a12c2..0000000
--- a/responsive.css
+++ /dev/null
@@ -1,112 +0,0 @@
-/* ==========================================================================
-   GREEN KARMA — RESPONSIVE DESIGN & MOBILE OPTIMIZATIONS
-   ========================================================================== */
-
-/* Tablet Breakpoint (<= 1024px) */
-@media (max-width: 1024px) {
-  :root {
-    --container-max: 960px;
-  }
-
-  .grid-cols-4 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .grid-cols-3 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .hero-grid {
-    grid-template-columns: 1fr !important;
-    gap: 2.5rem !important;
-  }
-
-  .hero-visual {
-    order: -1;
-  }
-}
-
-/* Mobile Breakpoint (<= 768px) */
-@media (max-width: 768px) {
-  :root {
-    --nav-height: 64px;
-  }
-
-  body {
-    padding-bottom: var(--mobile-nav-height);
-  }
-
-  .mobile-bottom-nav {
-    display: block;
-  }
-
-  .desktop-only-nav {
-    display: none !important;
-  }
-
-  .grid-cols-2,
-  .grid-cols-3,
-  .grid-cols-4 {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-  }
-
-  .app-container {
-    padding: 0 1rem;
-  }
-
-  .main-content {
-    padding-top: calc(var(--nav-height) + 1rem);
-    padding-bottom: 5rem;
-  }
-
-  .stepper-header::before {
-    display: none;
-  }
-
-  .stepper-header {
-    overflow-x: auto;
-    padding-bottom: 0.5rem;
-    gap: 1rem;
-    justify-content: flex-start;
-  }
-
-  .step-label {
-    display: none;
-  }
-
-  .modal-content {
-    padding: 1.5rem;
-    border-radius: var(--radius-lg);
-  }
-
-  .toast-container {
-    left: 1rem;
-    right: 1rem;
-    bottom: calc(var(--mobile-nav-height) + 1rem);
-  }
-
-  .toast {
-    min-width: unset;
-    width: 100%;
-  }
-
-  /* Hide decorative floating cards on small screens */
-  .floating-stat-card {
-    display: none;
-  }
-
-  .hero-buttons {
-    flex-direction: column;
-    width: 100%;
-  }
-
-  .hero-buttons .btn {
-    width: 100%;
-  }
-
-  .points-podium {
-    flex-direction: column !important;
-    align-items: stretch !important;
-  }
-}
diff --git a/server.py b/server.py
index 8b310c0..e64bbd9 100644
--- a/server.py
+++ b/server.py
@@ -1,6 +1,6 @@
 #!/usr/bin/env python3
 """
-GREEN KARMA — Smart Waste Management & Rewards Platform
+CleanCred — Smart Waste Management
 Local Development & REST API Server
 """
 
@@ -23,7 +23,7 @@
 PORT = 8081
 DIRECTORY = os.path.dirname(os.path.abspath(__file__))
 
-class GreenKarmaHandler(http.server.SimpleHTTPRequestHandler):
+class CleanCredHandler(http.server.SimpleHTTPRequestHandler):
     def __init__(self, *args, **kwargs):
         super().__init__(*args, directory=DIRECTORY, **kwargs)
 
@@ -38,38 +38,58 @@ def do_OPTIONS(self):
         self.send_response(200)
         self.end_headers()
 
+    def do_POST(self):
+        parsed_url = urllib.parse.urlparse(self.path)
+        if parsed_url.path == '/api/report_test':
+            content_length = int(self.headers.get('Content-Length', 0))
+            body = self.rfile.read(content_length)
+            with open(os.path.join(DIRECTORY, 'test_results.json'), 'wb') as f:
+                f.write(body)
+            resp_data = b'{"status":"received"}'
+            self.send_response(200)
+            self.send_header('Content-Type', 'application/json')
+            self.send_header('Content-Length', str(len(resp_data)))
+            self.end_headers()
+            self.wfile.write(resp_data)
+            return
+        self.send_response(404)
+        self.end_headers()
+
     def do_GET(self):
         parsed_url = urllib.parse.urlparse(self.path)
         
         # API Health Check
         if parsed_url.path == '/api/health':
-            self.send_response(200)
-            self.send_header('Content-Type', 'application/json')
-            self.end_headers()
             response = {
                 "status": "healthy",
-                "platform": "GREEN KARMA — Smart Waste Management",
-                "tagline": "EARN. RECYCLE. REWARD.",
+                "environment": "local_demo",
+                "platform": "CleanCred — Smart Waste Management",
+                "tagline": "Verified waste recovery",
                 "timestamp": datetime.now().isoformat(),
-                "databases": {
-                    "municipal_waste_db": "CONNECTED",
-                    "citizen_ledger_db": "CONNECTED",
-                    "smart_city_api": "CONNECTED",
-                    "mrf_recyclers_net": "CONNECTED"
+                "services": {
+                    "application": "LOCAL DEMO",
+                    "data_store": "Browser Persistence",
+                    "municipal_integration": "Prototype",
+                    "mrf_network": "Demo Dataset"
                 }
             }
-            self.wfile.write(json.dumps(response, indent=2).encode('utf-8'))
+            resp_bytes = json.dumps(response, indent=2).encode('utf-8')
+            self.send_response(200)
+            self.send_header('Content-Type', 'application/json')
+            self.send_header('Content-Length', str(len(resp_bytes)))
+            self.end_headers()
+            self.wfile.write(resp_bytes)
             return
             
         return super().do_GET()
 
 def run_server():
     os.chdir(DIRECTORY)
-    socketserver.TCPServer.allow_reuse_address = True
-    with socketserver.TCPServer(("", PORT), GreenKarmaHandler) as httpd:
+    socketserver.ThreadingTCPServer.allow_reuse_address = True
+    with socketserver.ThreadingTCPServer(("", PORT), CleanCredHandler) as httpd:
         print("==================================================")
-        print("  GREEN KARMA Web Platform Running")
-        print("  Tagline: EARN. RECYCLE. REWARD.")
+        print("  CleanCred Web Platform Running")
+        print("  Tagline: Verified waste recovery")
         print(f"  URL: http://127.0.0.1:{PORT}")
         print(f"  Serving directory: {DIRECTORY}")
         print("==================================================")
@@ -80,3 +100,4 @@ def run_server():
 
 if __name__ == "__main__":
     run_server()
+
diff --git a/start.bat b/start.bat
index 090fda6..2b1666f 100644
--- a/start.bat
+++ b/start.bat
@@ -1,8 +1,8 @@
 @echo off
-title GREEN KARMA Platform
+title CLEANCRED — Municipal Waste Command Center
 echo ===================================================
-echo   Starting GREEN KARMA Platform...
-echo   Tagline: EARN. RECYCLE. REWARD.
+echo   Starting CLEANCRED Platform...
+echo   ISRO Telemetry Command Center Aesthetic
 echo ===================================================
 
 cd /d "%~dp0"
diff --git a/workerPortal.js b/workerPortal.js
deleted file mode 100644
index fa79db9..0000000
--- a/workerPortal.js
+++ /dev/null
@@ -1,206 +0,0 @@
-/* ==========================================================================
-   GREEN KARMA — MUNICIPAL WORKER VERIFICATION PORTAL
-   Role: Ramesh Kumar | Zone 4 - Ward 4B | Electric Van MH-02-GK-4091
-   ========================================================================== */
-
-import { State } from '../state.js';
-import { Formatters } from '../utils/formatters.js';
-import { Confetti } from '../utils/confetti.js';
-import { SoundFX } from '../utils/audio.js';
-
-export const WorkerPortalView = {
-  selectedPickup: null,
-
-  render() {
-    const container = document.getElementById('view-worker');
-    if (!container) return;
-
-    const worker = State.state.worker;
-    const queue = State.state.workerQueue;
-
-    container.innerHTML = `
-      <div class="app-container">
-        
-        <!-- Header & Worker Identity Banner -->
-        <div class="glass-card glass-card-navy" style="padding: 2rem; border-radius: var(--radius-xl); margin-bottom: 2rem;">
-          <div class="flex-between" style="flex-wrap: wrap; gap: 1.5rem;">
-            <div style="display: flex; align-items: center; gap: 1.25rem;">
-              <div style="width: 64px; height: 64px; border-radius: 50%; background: #DCFCE7; color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; border: 3px solid #84CC16;">
-                👨‍🔧
-              </div>
-              <div>
-                <div style="display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.25rem;">
-                  <h2 style="color: #FFFFFF; font-size: 1.6rem;">${worker.name}</h2>
-                  <span class="badge" style="background: #84CC16; color: #0A1929; font-weight: 800;">Municipal Officer</span>
-                </div>
-                <p style="color: #CBD5E1; font-size: 0.9rem;">
-                  ${worker.zone} &bull; 🚚 ${worker.vehicle} &bull; ⭐ ${worker.rating} Rating
-                </p>
-              </div>
-            </div>
-
-            <!-- Fast Stats for Worker -->
-            <div style="display: flex; gap: 1.5rem; align-items: center;">
-              <div style="background: rgba(255,255,255,0.08); padding: 0.75rem 1.25rem; border-radius: var(--radius-md); text-align: center;">
-                <div style="font-size: 1.4rem; font-weight: 800; color: #84CC16;">${worker.todayCollections}</div>
-                <div style="font-size: 0.72rem; color: #CBD5E1; font-weight: 600;">Today's Pickups</div>
-              </div>
-              <div style="background: rgba(255,255,255,0.08); padding: 0.75rem 1.25rem; border-radius: var(--radius-md); text-align: center;">
-                <div style="font-size: 1.4rem; font-weight: 800; color: #FFFFFF;">${worker.totalVerifiedKg} KG</div>
-                <div style="font-size: 0.72rem; color: #CBD5E1; font-weight: 600;">Verified Waste</div>
-              </div>
-              <button class="btn btn-secondary btn-sm" onclick="window.AppRouter.navigate('illegal-dumping')">
-                🚨 Report Dumping
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Assigned Route Pickups Queue -->
-        <div class="glass-card" style="padding: 2rem;">
-          <div class="flex-between" style="margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
-            <div>
-              <h3 style="color: var(--color-navy);">Assigned Collection Route Queue</h3>
-              <p style="font-size: 0.85rem;">Inspect waste bags, verify segregation compliance, and approve points disbursement.</p>
-            </div>
-            <span class="badge badge-green">${queue.filter(q => q.status !== 'verified' && q.status !== 'rejected').length} Pending Verifications</span>
-          </div>
-
-          <div style="display: flex; flex-direction: column; gap: 1rem;">
-            ${queue.map(item => `
-              <div style="display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; background: #F8FAFC; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); flex-wrap: wrap; gap: 1rem;">
-                
-                <div style="display: flex; align-items: center; gap: 1.25rem;">
-                  <div style="width: 52px; height: 52px; border-radius: var(--radius-md); overflow: hidden; background: #E2E8F0; display: flex; align-items: center; justify-content: center; font-size: 1.75rem;">
-                    ${item.category === 'wet' ? '🟢' : item.category === 'dry' ? '🔵' : '🔴'}
-                  </div>
-                  <div>
-                    <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;">
-                      <strong style="color: var(--color-navy); font-size: 1.05rem;">${item.subType}</strong>
-                      <span class="badge" style="background: ${item.category === 'wet' ? 'var(--waste-wet-bg)' : item.category === 'dry' ? 'var(--waste-dry-bg)' : 'var(--waste-harmful-bg)'}; color: ${item.category === 'wet' ? 'var(--waste-wet)' : item.category === 'dry' ? 'var(--waste-dry)' : 'var(--waste-harmful)'}; font-weight: 700;">
-                        ${item.quantityKg} KG
-                      </span>
-                    </div>
-                    <div style="font-size: 0.85rem; color: var(--text-muted);">
-                      Citizen: <strong>${item.userName}</strong> &bull; 📍 ${item.address}
-                    </div>
-                    <div style="font-size: 0.78rem; color: var(--color-primary-dark); font-weight: 600; margin-top: 0.25rem;">
-                      Request ID: ${item.id} &bull; OTP: ${item.otp}
-                    </div>
-                  </div>
-                </div>
-
-                <div style="display: flex; align-items: center; gap: 0.75rem;">
-                  ${item.status === 'verified' ? `
-                    <span class="badge" style="background: #D1FAE5; color: #065F46; font-size: 0.9rem; padding: 0.5rem 1rem;">
-                      ✓ Verified (+${item.pointsReward} GP)
-                    </span>
-                  ` : item.status === 'rejected' ? `
-                    <span class="badge" style="background: #FEE2E2; color: #991B1B; font-size: 0.9rem; padding: 0.5rem 1rem;">
-                      ✕ Rejected (Improper)
-                    </span>
-                  ` : `
-                    <button class="btn btn-primary" onclick="window.WorkerPortalView.openVerificationModal('${item.id}')">
-                      <span>🔍</span> Inspect & Verify
-                    </button>
-                  `}
-                </div>
-
-              </div>
-            `).join('')}
-          </div>
-        </div>
-
-      </div>
-
-      <!-- Worker Inspection Modal Shell -->
-      <div class="modal-overlay" id="worker-inspect-modal">
-        <div class="modal-content" style="max-width: 580px;">
-          <div class="modal-close-btn" onclick="window.WorkerPortalView.closeModal()">✕</div>
-          <div id="worker-modal-body"></div>
-        </div>
-      </div>
-    `;
-  },
-
-  openVerificationModal(pickupId) {
-    SoundFX.playClick();
-    const item = State.state.workerQueue.find(q => q.id === pickupId);
-    if (!item) return;
-
-    this.selectedPickup = item;
-    const modalBody = document.getElementById('worker-modal-body');
-    if (modalBody) {
-      modalBody.innerHTML = `
-        <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem;">
-          <span style="font-size: 2rem;">🔍</span>
-          <div>
-            <h3 style="color: var(--color-navy);">Disposal Verification Check</h3>
-            <p style="font-size: 0.85rem;">Request #${item.id} &bull; Citizen: ${item.userName}</p>
-          </div>
-        </div>
-
-        <!-- Photo Check -->
-        <div style="margin-bottom: 1.25rem; text-align: center;">
-          <img src="${item.photoUrl}" style="max-height: 180px; width: 100%; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border);" />
-          <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem;">Citizen Photo Proof for ${item.subType}</div>
-        </div>
-
-        <!-- Segregation Quality Checklist -->
-        <div style="background: #F8FAFC; border: 1px solid var(--color-border); padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.25rem;">
-          <strong style="color: var(--color-navy); font-size: 0.85rem; display: block; margin-bottom: 0.5rem;">Segregation Compliance Checks:</strong>
-          <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; margin-bottom: 0.35rem; cursor: pointer;">
-            <input type="checkbox" checked id="chk-clean"> Zero hazardous/cross-contamination detected
-          </label>
-          <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; margin-bottom: 0.35rem; cursor: pointer;">
-            <input type="checkbox" checked id="chk-category"> Material matches designated ${item.category.toUpperCase()} category
-          </label>
-          <label style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; cursor: pointer;">
-            <input type="checkbox" checked id="chk-bin"> Placed in standardized municipal green/blue bag
-          </label>
-        </div>
-
-        <!-- Weight Validation Slider -->
-        <div class="form-group" style="margin-bottom: 1.5rem;">
-          <div class="flex-between">
-            <label class="form-label">Verified Scale Weight:</label>
-            <strong id="modal-weight-val" style="color: var(--color-primary-dark); font-size: 1.1rem;">${item.quantityKg} KG</strong>
-          </div>
-          <input type="range" min="0.5" max="15" step="0.5" value="${item.quantityKg}" style="width: 100%; accent-color: var(--color-primary);" oninput="document.getElementById('modal-weight-val').textContent = this.value + ' KG'">
-        </div>
-
-        <!-- Action Buttons -->
-        <div style="display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem;">
-          <button class="btn btn-secondary" style="border-color: #EF4444; color: #EF4444;" onclick="window.WorkerPortalView.processVerification('${item.id}', false)">
-            Reject Submission
-          </button>
-          <button class="btn btn-primary btn-lg" onclick="window.WorkerPortalView.processVerification('${item.id}', true)">
-            Approve & Credit +${item.pointsReward} GP ⚡
-          </button>
-        </div>
-      `;
-
-      document.getElementById('worker-inspect-modal').classList.add('active');
-    }
-  },
-
-  closeModal() {
-    SoundFX.playClick();
-    document.getElementById('worker-inspect-modal').classList.remove('active');
-  },
-
-  processVerification(pickupId, approved) {
-    if (approved) {
-      SoundFX.playPointsEarned();
-      Confetti.trigger(90);
-    } else {
-      SoundFX.playClick();
-    }
-
-    State.verifyWasteSubmission(pickupId, approved);
-    this.closeModal();
-    this.render();
-  }
-};
-
-window.WorkerPortalView = WorkerPortalView;