Resume x-ray

Prompt

You are an expert Senior Frontend Developer. I want you to build a complete, fully functional, client-side web application called "Resume X-Ray". 

Do NOT just output one massive, unreadable single HTML file. Instead, structure the code properly using separate files (index.html, style.css, and app.js) or clean, well-commented modular blocks so I can easily manage it in VS Code. The app must use Vanilla JavaScript (no React, Vue, or heavy frameworks) and pure CSS.

Here is the complete specification for the project:

### 1. Core Concept & Architecture
- **App Name:** Resume X-Ray
- **Purpose:** A free, local-first resume diagnostic lab. It simulates a 6-second recruiter skim, ATS parsing, and provides detailed evidence-based feedback.
- **Data Privacy:** All data must be processed 100% on the client side. Use `localStorage` for persistence. No backend.
- **PWA:** The app must be installable and work offline. Generate a dynamic manifest and a service worker within the JS.

### 2. UI / UX Design Guidelines
- **Style:** Solid UI, vibrant and rich colors. NO animated/motion wallpapers. Use bold gradients only for the main header. 
- **Colors:** Primary Indigo (#4f46e5), Pink (#db2777), Orange (#ea580c), Teal (#0d9488), Violet (#7c3aed), Lime (#4d7c0f), Cyan (#0e7490), Slate (#334155).
- **Layout:** Card-based layout with thick colored top borders indicating the category. 
- **Responsiveness:** Fully responsive. On mobile (< 600px), grids must collapse to a single column. Ensure no horizontal scrolling (use `box-sizing: border-box` and `min-width: 0` on grids).
- **Navigation:** A sticky top tab bar with 8 tabs (Input, Skim Scan, ATS View, Diagnostics, Tailor, Evidence Bank, Versions, Export).
- **Scoreboard:** A persistent dashboard showing 5 scores (Overall, Impact, Clarity, ATS-safe, JD match) with colored progress bars.

### 3. Tab Features & Logic

**Tab 1: Input**
- Textareas for Resume and Job Description (JD).
- Input for Target Role.
- File importer for .txt, .md, .pdf, and .docx. Use CDN libraries dynamically (pdf.js and mammoth.js) ONLY when a file is uploaded, to keep initial load light.
- "Load Demo" button that fills the fields with a dummy PM resume and JD.
- "Run Full Analysis" button that triggers the computation.

**Tab 2: Skim Scan (Heatmap)**
- Simulates a 6-second scan. 
- Algorithm: Split resume into lines. Score each line out of 100. Top lines get +30, lines with numbers get +18, lines starting with strong verbs get +12, lines with JD keywords get +10. Long lines (>160 chars) get -8.
- Display: Render each line with a background color based on its score (Red = Hot/Noticed, Blue = Cold/Skipped).

**Tab 3: ATS View**
- Display a normalized plain-text version of the resume (remove smart quotes, convert tabs to spaces, replace bullet symbols with hyphens).
- Generate "Parse Risks": Check for missing email, missing phone, tabs, pipe characters, missing standard headings (Experience, Education, Skills), all-caps lines, and non-ASCII characters.

**Tab 4: Diagnostics**
- **Fluff Detector:** Scan for cliché words (e.g., "team player", "hard worker", "responsible for"). Show as warning chips.
- **Weak Verbs:** Scan for weak verbs starting a bullet (e.g., "helped", "worked", "assisted").
- **Missing Metrics:** Find bullet points that contain no numbers (0-9, %, $).
- **Rewrite Prompts:** Generate 10-12 specific questions based on the weak/fluff bullets to guide the user to add metrics.

**Tab 5: Tailor**
- **JD Keyword Coverage:** Extract top 60 keywords from JD (ignoring stop words). Show Green chips for keywords found in resume, Red chips for missing keywords.
- **Tailoring Tips:** Give actionable bullet points (e.g., "Your match is under 50%. Mirror the job title in your summary", "Fix high severity ATS issues first").

**Tab 6: Evidence Bank**
- A local database where users can save achievements (Action, Metric, Role).
- Render as a list with copy-to-clipboard and delete buttons.
- Export bank as .txt.

**Tab 7: Versions**
- Allow users to snapshot the current resume with a custom name and date.
- Store in localStorage. Display a list with the score at the time of saving.
- Allow loading a snapshot back into the input or deleting it.

**Tab 8: Export**
- Download clean resume (.txt).
- Copy clean resume to clipboard.
- Print/Save as PDF (use `window.print()`).
- Download full diagnostic report (.txt) summarizing all scores and issues.
- Export/Import all app data (Resume, JD, Evidence, Versions) as a JSON file.

### 4. Scoring Algorithm
- **Impact:** % of bullets containing a number.
- **Clarity:** 100 minus penalties for fluff words and weak verbs.
- **ATS-Safe:** 100 minus penalties for parse risks (High: -16, Med: -9, Low: -4).
- **Overall:** Weighted average (Impact 35%, Clarity 25%, ATS 20%, JD Match 20%).

### 5. PWA & Initialization
- Generate a dynamic `manifest.json` using a canvas-generated icon to avoid external image dependencies.
- Register a service worker using a Blob URL to cache the app shell for offline use.
- On page load, load state from localStorage. If a resume exists, silently re-run the analysis to populate the scoreboard.

Please output the complete, production-ready code. Ensure the CSS is highly polished, modern, and uses CSS variables for the color palette. Make sure all event listeners are properly attached and the code is divided into logical sections.