Upload 23 files

.gitignore

@@ -0,0 +1,9 @@
+# .vercelignore
+.env
+.venv/
+venv/
+__pycache__/
+*.pyc
+*.pyo
+.git
+.vscode/

README.md

@@ -1,10 +1,237 @@
----
-title: Passowrd Manager
-emoji: 🌖
-colorFrom: yellow
-colorTo: gray
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Secure E2EE Password Manager & Analyzer
+
+This project combines a Flask web application with a Chrome browser extension to provide a secure password management solution featuring End-to-End Encryption (E2EE), password strength analysis, and breach detection. User credentials are encrypted client-side before being sent to a Supabase backend, ensuring the server never sees plaintext passwords.
+
+**Core Principles:**
+
+*   **End-to-End Encryption:** Passwords and associated data are encrypted/decrypted *only* in the user's browser using a key derived from their Master Password.
+*   **Zero Knowledge (Server):** The backend stores only encrypted data and cannot decrypt user passwords.
+*   **Client-Side Security Focus:** Critical cryptographic operations happen client-side (Web Crypto API in the browser/extension).
+
+## Features
+
+*   **User Authentication:** Secure registration and login system using Flask-Login and Bcrypt for hashing Master Passwords.
+*   **End-to-End Encryption:** AES-GCM encryption using Web Crypto API, with keys derived using PBKDF2HMAC-SHA256.
+*   **Supabase Backend:** Utilizes Supabase (PostgreSQL) for user management and encrypted credential storage.
+*   **Chrome Extension:**
+    *   Popup interface for quick access to credentials.
+    *   Login/Unlock directly within the popup.
+    *   View, search, copy, and auto-fill credentials.
+    *   Add new credentials directly from the popup.
+    *   Integrated password generator.
+    *   Password strength analysis (ZXCVBN + HIBP breach check) in the "Add New" form.
+    *   Theme toggle (light/dark).
+    *   Content script for interacting with web pages (auto-fill).
+*   **Web Application (Flask):**
+    *   User registration and login pages.
+    *   Interface to add new credentials.
+    *   Page to view/decrypt stored credentials.
+    *   Password analysis page:
+        *   Analyze strength and breach status of a single password.
+        *   Analyze *all* stored passwords (decrypts client-side for analysis).
+        *   Optional AI-powered insights via Google Gemini API.
+*   **Password Generation:** Secure password generator with customizable options (length, character sets).
+*   **Password Strength Analysis:** Uses the robust ZXCVBN library (client-side in popup/web app, server-side via API).
+*   **Breach Detection:** Integrates with the **free** Have I Been Pwned (HIBP) Pwned Passwords API (using k-Anonymity for privacy) on the client-side.
+*   **"Remember Me" Functionality:** Secure session persistence using Flask-Login.
+*   **Theme Toggle:** Light/Dark mode support in the web app and extension popup.
+
+## Tech Stack
+
+*   **Backend:** Python 3, Flask, Supabase (Python Client), Flask-Login, Flask-Bcrypt, python-dotenv, cryptography, zxcvbn-python, google-generativeai (optional)
+*   **Frontend (Web App):** HTML, CSS, JavaScript, Jinja2, ZXCVBN.js
+*   **Frontend (Extension):** HTML, CSS, JavaScript (Web Crypto API), ZXCVBN.js, Chrome Extension APIs
+*   **Database:** Supabase (PostgreSQL backend)
+*   **APIs:**
+    *   Have I Been Pwned (HIBP) Pwned Passwords API (Range Endpoint - Free)
+    *   Google Gemini API (Optional - Requires API Key)
+
+## Prerequisites
+
+*   Python 3.9+
+*   `pip` (Python package installer)
+*   A Supabase Account (Free tier is sufficient)
+*   Google Chrome (or other Chromium-based browser like Edge, Brave)
+*   (Optional) Google Gemini API Key for enhanced password analysis features.
+
+## Setup & Installation
+
+1.  **Clone the Repository:**
+    ```bash
+    git clone <repository-url>
+    cd <repository-directory>
+    ```
+
+2.  **Set up Supabase:**
+    *   Go to [Supabase](https://supabase.com/) and create a new project.
+    *   Navigate to **Project Settings** > **API**.
+    *   Find your **Project URL** and the **`anon` public API Key**. You'll need these for the `.env` file.
+    *   Go to the **SQL Editor** in your Supabase dashboard.
+    *   Create the necessary tables by running the following SQL (or use a schema migration tool):
+
+        ```sql
+        -- users table
+        CREATE TABLE users (
+            id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+            email character varying UNIQUE NOT NULL,
+            password_hash character varying NOT NULL,
+            created_at timestamp with time zone DEFAULT timezone('utc'::text, now()) NOT NULL
+        );
+
+        -- Ensure email is lowercase for consistency
+        ALTER TABLE users ADD CONSTRAINT users_email_check CHECK ((email = lower((email)::text)));
+
+        -- credentials table
+        CREATE TABLE credentials (
+            id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+            user_id uuid NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+            encrypted_data text NOT NULL,
+            service_hint character varying, -- For easier identification without decryption
+            created_at timestamp with time zone DEFAULT timezone('utc'::text, now()) NOT NULL
+        );
+
+        -- Index for faster lookups by user_id
+        CREATE INDEX idx_credentials_user_id ON public.credentials USING btree (user_id);
+
+        -- Enable Row Level Security (VERY IMPORTANT)
+        ALTER TABLE users ENABLE ROW LEVEL SECURITY;
+        ALTER TABLE credentials ENABLE ROW LEVEL SECURITY;
+
+        -- RLS Policy: Users can only see/manage their own credentials
+        CREATE POLICY "Users can manage their own credentials"
+        ON credentials
+        FOR ALL
+        USING (auth.uid() = user_id);
+
+        -- RLS Policy: Users can see their own user record (e.g., for profile info if needed)
+        CREATE POLICY "Users can view their own user record"
+        ON users
+        FOR SELECT
+        USING (auth.uid() = id);
+
+        -- RLS Policy: Allow users to update their own record (if needed, e.g., change email - requires more logic)
+        -- CREATE POLICY "Users can update their own user record"
+        -- ON users
+        -- FOR UPDATE
+        -- USING (auth.uid() = id);
+
+        -- NOTE: Inserting new users requires the service_role key or disabling RLS temporarily
+        -- during backend registration if using anon key, OR handle user creation via Supabase Auth.
+        -- The current Python code uses the anon key to insert directly, assuming RLS might
+        -- need adjustment or you handle auth differently in production.
+        -- For simplicity in this setup, we assume direct insert works, but review RLS for inserts.
+
+        ```
+
+3.  **Configure Backend (`.env` file):**
+    *   Create a file named `.env` in the root project directory (where `app.py` is).
+    *   Add the following environment variables:
+
+        ```dotenv
+        SUPABASE_URL=YOUR_SUPABASE_PROJECT_URL
+        SUPABASE_KEY=YOUR_SUPABASE_ANON_PUBLIC_KEY
+        FLASK_SECRET_KEY=generate_a_very_strong_random_secret_key_here # Use os.urandom(24).hex() in Python to generate one
+        GEMINI_API_KEY=YOUR_GOOGLE_GEMINI_API_KEY # Optional: Leave blank or remove if not using Gemini
+
+        # Optional: Set to 'development' for debug mode, 'production' otherwise
+        FLASK_ENV=development
+        ```
+    *   **Important:** Replace placeholders with your actual Supabase URL/Key and generate a strong `FLASK_SECRET_KEY`.
+
+4.  **Install Backend Dependencies:**
+    *   Open your terminal in the project root directory.
+    *   (Recommended) Create and activate a virtual environment:
+        ```bash
+        python -m venv venv
+        # Windows
+        venv\Scripts\activate
+        # macOS/Linux
+        source venv/bin/activate
+        ```
+    *   Install the required packages:
+        ```bash
+        pip install -r requirements.txt
+        ```
+
+5.  **Load Chrome Extension:**
+    *   Open Google Chrome.
+    *   Go to `chrome://extensions/`.
+    *   Enable "Developer mode" (usually a toggle in the top-right corner).
+    *   Click "Load unpacked".
+    *   Navigate to and select the directory containing the extension's `manifest.json` file (e.g., an `extension` subfolder if you have one).
+    *   The extension icon should appear in your Chrome toolbar.
+
+## Running the Application
+
+1.  **Start the Flask Backend:**
+    *   Make sure your virtual environment is activated (if you created one).
+    *   Run the Flask app from the project root directory:
+        ```bash
+        python app.py
+        ```
+    *   The backend should start, typically on `http://127.0.0.1:5000`.
+
+2.  **Use the Web Application:**
+    *   Open your web browser and navigate to `http://127.0.0.1:5000`.
+    *   You can register a new user or log in if you already have an account.
+
+3.  **Use the Chrome Extension:**
+    *   Click the extension's icon in your Chrome toolbar.
+    *   If you are logged into the web application *in the same browser session*, the extension might automatically detect the session (via background script communication). If not, log in via the popup.
+    *   The popup allows adding, viewing, copying, and filling credentials.
+
+## Usage Guide
+
+*   **Registration/Login:** Use the web interface (`http://127.0.0.1:5000/register` or `/login`) or the extension popup to create an account or log in. Your Master Password is crucial and **cannot be recovered**.
+*   **Adding Credentials:**
+    *   **Web App:** Navigate to `/add` after logging in.
+    *   **Extension:** Click the extension icon, then click "+ Add New Credential". Fill in the details and confirm with your Master Password.
+*   **Generating Passwords:** Use the "Generate" button in the "Add New Credential" forms (web app or extension popup). Customize options as needed.
+*   **Viewing/Decrypting:**
+    *   **Web App:** Navigate to `/storage`. Click "Show" on an entry to decrypt and view details client-side.
+    *   **Extension:** Click the icon. Click "Show" on an entry. Strength and breach status are checked upon showing.
+*   **Copying Passwords:** In the extension popup or `/storage` page, click "Show" first, then a "Copy" button will appear.
+*   **Filling Passwords:**
+    *   **Extension:** When on a login page, click the extension icon. Entries matching the domain appear first. Click the list item (if it's a domain match) or click "Show" then "Fill".
+    *   **Content Script Icon (Optional):** If enabled/working, an icon may appear in password fields. Clicking it can trigger the popup or directly fill credentials (depending on implementation).
+*   **Analyzing Passwords:**
+    *   Navigate to `/analyse` in the web app.
+    *   Enter a single password for immediate analysis.
+    *   Click "Load & Analyse All Stored Credentials" to decrypt (client-side) and analyze all your saved passwords for strength and potential breaches.
+*   **Logging Out:** Click the "Logout" link available in the header of the web app pages or within the extension popup. This clears the session key.
+
+## Security Considerations
+
+*   **Master Password:** This is the most critical piece of information. Choose a strong, unique Master Password that you don't use anywhere else. **If you forget it, your encrypted data is irrecoverable.**
+*   **End-to-End Encryption:** The design ensures the server (Flask backend and Supabase) only ever handles encrypted data blobs. Decryption keys are derived client-side from the Master Password and ideally only held in memory (sessionStorage or background script memory) during an active session.
+*   **Backend Security:** While the backend doesn't handle decryption, it's vital to secure it against unauthorized access, ensure dependencies are up-to-date, and use HTTPS for any real-world deployment. Master Password *hashes* (using Bcrypt) are stored for login verification.
+*   **Supabase Row Level Security (RLS):** RLS policies **must** be enabled and correctly configured in Supabase to prevent users from accessing each other's encrypted data. The provided SQL includes basic policies, but review and test them thoroughly.
+*   **API Keys (`.env`):** Keep your `.env` file secure and **never commit it to version control**. Ensure `FLASK_SECRET_KEY` is strong and random. The `GEMINI_API_KEY` should also be treated as sensitive.
+*   **HTTPS:** For any non-local deployment, HTTPS is **mandatory** to protect login credentials and session cookies during transit.
+*   **XSS/CSRF:** Standard web security practices should be followed in the Flask application to prevent Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF) attacks. Use Flask-WTF or similar libraries if forms are more complex. Ensure Jinja2 autoescaping is enabled (default).
+*   **Extension Permissions:** The extension requests permissions like `activeTab`, `scripting`, `storage`, and `cookies`. These are necessary for its core functions (filling passwords, storing session state, communicating with the backend). Be aware of what permissions extensions request.
+*   **k-Anonymity (HIBP):** Password breach checking via HIBP uses k-Anonymity, meaning your full password hash is *not* sent to the HIBP server, preserving privacy for that specific check.
+*   **Session Management:** The Flask session stores the *derived* encryption key (Base64URL encoded). Session security (cookie flags like HttpOnly, Secure, SameSite) is important. The "Remember Me" feature extends session lifetime but relies on secure cookie handling. The background script also holds the key temporarily.
+*   **Disclaimer:** This project is primarily for educational/demonstration purposes. While it implements strong E2EE concepts, deploying it for highly sensitive data requires thorough security audits and hardening beyond this basic setup.
+
+## Development
+
+*   **Backend:** Modify `app.py` and related files. The Flask development server usually auto-reloads on changes (`FLASK_ENV=development`).
+*   **Extension:**
+    *   Modify HTML, CSS, or JS files within the extension directory.
+    *   Go back to `chrome://extensions/`.
+    *   Find the extension card and click the refresh icon (circular arrow).
+    *   Close and reopen the popup or refresh the web page where the content script runs to see changes.
+
+## Future Improvements
+
+*   Implement Email Breach Checking (requires HIBP paid API or alternative service).
+*   Add Secure Notes storage feature.
+*   Implement Two-Factor Authentication (2FA) for login.
+*   Add Password History (store previous encrypted versions).
+*   More robust error handling and user feedback.
+*   UI/UX enhancements for both web app and extension.
+*   Option for users to host their own backend easily (e.g., Docker setup).
+*   Detailed deployment guide (e.g., Heroku, Render, Docker).
+*   Formal security audit.
+*   Cross-browser compatibility testing (Firefox support would require manifest/API changes).

app.py

@@ -0,0 +1,521 @@
+# --- START OF FILE app.py ---
+
+import os
+import json
+import hashlib
+import time
+import re
+import base64
+import traceback # For detailed error logging
+import secrets  # Use secrets for cryptographic randomness
+import string   # For character sets
+import random   # For shuffling (secrets doesn't have shuffle)
+from datetime import timedelta # ** IMPORT timedelta **
+from flask import Flask, render_template, request, jsonify, redirect, url_for, flash, session
+from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
+from flask_bcrypt import Bcrypt
+from supabase import create_client, Client # Use v2 import style
+# Note: cryptography library parts are only needed for derive_key now
+from cryptography.hazmat.primitives import hashes
+from cryptography.hazmat.primitives.kdf.pbkdf2 import PBKDF2HMAC
+from dotenv import load_dotenv
+import google.generativeai as genai
+from zxcvbn import zxcvbn
+load_dotenv()
+
+app = Flask(__name__)
+# Make sure FLASK_SECRET_KEY is set strong in your .env!
+app.config['SECRET_KEY'] = os.environ.get('FLASK_SECRET_KEY', 'default_secret_key_please_change')
+app.config['ENV'] = os.environ.get('FLASK_ENV', 'production')
+app.config['DEBUG'] = app.config['ENV'] == 'development'
+
+# ** SET PERMANENT SESSION LIFETIME (e.g., 7 days) **
+# This applies *only* when 'Remember Me' is checked.
+app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=7)
+
+
+# --- Supabase Configuration ---
+supabase_url = os.environ.get("SUPABASE_URL")
+supabase_key = os.environ.get("SUPABASE_KEY") # Anon key
+
+if not supabase_url or not supabase_key:
+    raise ValueError("Supabase URL and Key must be set in .env file")
+
+supabase: Client = create_client(supabase_url, supabase_key)
+print("Supabase client initialized.")
+
+# --- Authentication Setup ---
+bcrypt = Bcrypt(app)
+login_manager = LoginManager()
+login_manager.init_app(app)
+login_manager.login_view = 'login'
+login_manager.login_message_category = 'info'
+print("Flask-Login initialized.")
+
+# --- User Model for Flask-Login ---
+class User(UserMixin):
+    def __init__(self, id, email):
+        self.id = id
+        self.email = email
+
+@login_manager.user_loader
+def load_user(user_id):
+    user_data = session.get('user_data')
+    if user_data and user_data['id'] == user_id:
+        return User(id=user_data['id'], email=user_data['email'])
+    # print(f"User {user_id} not found in session.") # Reduced verbosity
+    return None
+
+
+# --- Gemini LLM Configuration ---
+GEMINI_API_KEY = os.environ.get("GEMINI_API_KEY")
+genai_available = False
+if GEMINI_API_KEY and GEMINI_API_KEY.startswith("AIza"):
+    try:
+        genai.configure(api_key=GEMINI_API_KEY)
+        genai_available = True
+        print("Gemini API configured successfully.")
+    except Exception as e:
+        print(f"Warning: Failed to configure Gemini API: {e}")
+else:
+     print("Warning: Gemini API key not found or looks invalid. LLM features will use mock/basic analysis.")
+
+
+# --- E2EE Helper Functions ---
+def derive_key(master_password: str, salt_or_email: str) -> bytes:
+    """
+    Derives a 32-byte key suitable for AES using PBKDF2HMAC.
+    Uses email (lowercase) as salt for simplicity - *replace with stored unique salt in production*.
+    Returns the key BASE64 URL-SAFE ENCODED (suitable for session/storage).
+    """
+    salt = salt_or_email.lower().encode('utf-8')
+    iterations = 390000 # Match JS side
+    kdf = PBKDF2HMAC( algorithm=hashes.SHA256(), length=32, salt=salt, iterations=iterations )
+    key_bytes = kdf.derive(master_password.encode('utf-8')) # Raw 32 bytes
+
+    # --- ADDED LOGGING ---
+    # Log the standard Base64 representation for easier comparison with JS console log
+    try:
+        raw_key_standard_b64 = base64.b64encode(key_bytes).decode('utf-8')
+        # print(f"DEBUG: PY Derived Key (Raw -> Standard Base64): {raw_key_standard_b64}") # Keep commented unless debugging
+    except Exception as log_e:
+        print(f"DEBUG: Error logging derived key: {log_e}")
+    # --- END LOGGING ---
+
+    # Return URL-safe Base64 encoded key for session storage
+    key_b64url_encoded = base64.urlsafe_b64encode(key_bytes)
+    return key_b64url_encoded
+
+# --- Password Analysis Functions ---
+# (get_character_composition, get_llm_password_insights, get_basic_password_analysis_from_chars, get_mock_llm_insights_from_chars)
+def get_character_composition(password):
+    """Generates character composition dict."""
+    composition = { 'lowercase': 0, 'uppercase': 0, 'digits': 0, 'special': 0 }
+    if not password: return composition # Handle None or empty string
+    for char in password:
+        if char.islower(): composition['lowercase'] += 1
+        elif char.isupper(): composition['uppercase'] += 1
+        elif char.isdigit(): composition['digits'] += 1
+        elif not char.isalnum() and not char.isspace(): composition['special'] += 1 # More specific special char check
+    return composition
+
+def get_llm_password_insights(password_characteristics: dict):
+    """ Get password analysis insights from Gemini API based on characteristics."""
+    global genai_available
+    try:
+        use_mock = app.config['DEBUG'] or not genai_available
+        if use_mock:
+            return get_mock_llm_insights_from_chars(password_characteristics)
+
+        generation_config = { "temperature": 0.2, "top_p": 0.8, "top_k": 40, "max_output_tokens": 512 }
+        safety_settings = [
+            {"category": "HARM_CATEGORY_HARASSMENT", "threshold": "BLOCK_MEDIUM_AND_ABOVE"},
+            {"category": "HARM_CATEGORY_HATE_SPEECH", "threshold": "BLOCK_MEDIUM_AND_ABOVE"},
+            {"category": "HARM_CATEGORY_SEXUALLY_EXPLICIT", "threshold": "BLOCK_MEDIUM_AND_ABOVE"},
+            {"category": "HARM_CATEGORY_DANGEROUS_CONTENT", "threshold": "BLOCK_MEDIUM_AND_ABOVE"},
+        ]
+        model = genai.GenerativeModel('gemini-1.5-flash', generation_config=generation_config, safety_settings=safety_settings)
+
+        prompt = f"""
+        Analyze a password based *only* on the following characteristics. Provide a security assessment.
+        DO NOT attempt to guess the password or ask for it.
+        Return ONLY a valid JSON object with the exact structure below, no other text or explanations.
+        {{
+            "strength_score": 1-5 (integer, 1=very weak, 5=very strong),
+            "assessment": "Very Weak/Weak/Medium/Strong/Very Strong",
+            "insights": ["Specific observations based on characteristics provided"],
+            "suggestions": ["Actionable improvement tips based on characteristics"]
+        }}
+
+        Password Characteristics:
+        Length: {password_characteristics.get('length', 0)}
+        Contains Lowercase: {'Yes' if password_characteristics.get('composition', {}).get('lowercase', 0) > 0 else 'No'}
+        Contains Uppercase: {'Yes' if password_characteristics.get('composition', {}).get('uppercase', 0) > 0 else 'No'}
+        Contains Digits: {'Yes' if password_characteristics.get('composition', {}).get('digits', 0) > 0 else 'No'}
+        Contains Special Chars: {'Yes' if password_characteristics.get('composition', {}).get('special', 0) > 0 else 'No'}
+        """
+        response = model.generate_content(prompt)
+
+        if not response.candidates or not hasattr(response.candidates[0], 'content') or not response.candidates[0].content.parts:
+             print(f"Gemini response blocked or empty. Reason: {response.prompt_feedback}")
+             return get_basic_password_analysis_from_chars(password_characteristics)
+
+        response_text = response.text
+        json_match = re.search(r'```(?:json)?\s*({.*?})\s*```', response_text, re.DOTALL | re.IGNORECASE)
+        if not json_match: json_match = re.search(r'({.*})', response_text, re.DOTALL)
+
+        if json_match:
+            try:
+                insights_json = json.loads(json_match.group(1))
+                if all(k in insights_json for k in ['strength_score', 'assessment', 'insights', 'suggestions']):
+                    return { 'strength': insights_json.get('strength_score', 1), 'assessment': insights_json.get('assessment', 'Weak'),
+                             'insights': insights_json.get('insights', []), 'suggestions': insights_json.get('suggestions', []) }
+                else: raise ValueError("Missing keys in JSON response")
+            except (json.JSONDecodeError, ValueError) as json_err:
+                 print(f"LLM JSON processing Error: {json_err}. Falling back.")
+                 return get_basic_password_analysis_from_chars(password_characteristics)
+        else:
+            print("LLM JSON pattern not found. Falling back.")
+            return get_basic_password_analysis_from_chars(password_characteristics)
+    except Exception as e:
+        print(f"Error getting Gemini insights: {type(e).__name__} - {e}")
+        return get_basic_password_analysis_from_chars(password_characteristics)
+
+def get_basic_password_analysis_from_chars(characteristics: dict):
+    """ Basic password analysis based on characteristics. Returns same structure as LLM."""
+    strength = 0; insights = []; suggestions = []
+    length = characteristics.get('length', 0)
+    composition = characteristics.get('composition', {})
+    # Score Calculation (simple example)
+    if length < 8: insights.append("Short (< 8 chars)"); suggestions.append("Use 12+ chars.")
+    elif length < 12: strength += 1; insights.append("Okay length (8-11)") ; suggestions.append("Use 12+ chars.")
+    else: strength += 2; insights.append("Good length (12+)")
+    if composition.get('uppercase', 0) > 0: strength += 1
+    else: insights.append("No uppercase"); suggestions.append("Add A-Z.")
+    if composition.get('lowercase', 0) > 0: strength += 1
+    else: insights.append("No lowercase"); suggestions.append("Add a-z.")
+    if composition.get('digits', 0) > 0: strength += 1
+    else: insights.append("No numbers"); suggestions.append("Add 0-9.")
+    if composition.get('special', 0) > 0: strength += 1
+    else: insights.append("No special chars"); suggestions.append("Add !@#$.")
+    # Map score (0-6) to 1-5 rating
+    score_map = {0: 1, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 5}
+    final_score = score_map.get(strength, 1)
+    assessment_map = {1: "Very Weak", 2: "Weak", 3: "Medium", 4: "Strong", 5: "Very Strong"}
+    assessment = assessment_map.get(final_score, "Weak")
+    if final_score == 5 and not insights: insights.append("Meets basic complexity.")
+    return {'strength': final_score, 'assessment': assessment, 'insights': insights, 'suggestions': suggestions}
+
+def get_mock_llm_insights_from_chars(characteristics: dict):
+    """ Generates mock LLM insights based on characteristics."""
+    basic_analysis = get_basic_password_analysis_from_chars(characteristics)
+    if basic_analysis['strength'] < 4: basic_analysis['suggestions'].append("Consider passphrase.")
+    if not basic_analysis['insights'] and basic_analysis['strength'] >= 4: basic_analysis['insights'].append("Good length/variety.")
+    return basic_analysis
+
+
+# --- NEW: Password Generation Function ---
+def generate_secure_password(length=16, use_lowercase=True, use_uppercase=True, use_digits=True, use_symbols=True):
+    """Generates a secure password ensuring character set inclusion."""
+    character_pool = []
+    required_chars = []
+
+    if use_lowercase:
+        character_pool.extend(string.ascii_lowercase)
+        required_chars.append(secrets.choice(string.ascii_lowercase))
+    if use_uppercase:
+        character_pool.extend(string.ascii_uppercase)
+        required_chars.append(secrets.choice(string.ascii_uppercase))
+    if use_digits:
+        character_pool.extend(string.digits)
+        required_chars.append(secrets.choice(string.digits))
+    if use_symbols:
+        # Define a standard set of symbols, avoid potentially problematic ones like `'"\
+        symbols = '!@#$%^&*()_-+={}[]|:;<>,.?/~'
+        character_pool.extend(symbols)
+        required_chars.append(secrets.choice(symbols))
+
+    if not character_pool:
+        raise ValueError("No character types selected for password generation.")
+
+    if length < len(required_chars):
+        raise ValueError(f"Length ({length}) is too short to include all required character types ({len(required_chars)}).")
+
+    # Fill the rest of the password length
+    remaining_length = length - len(required_chars)
+    password_chars = required_chars + [secrets.choice(character_pool) for _ in range(remaining_length)]
+
+    # Shuffle the list to ensure randomness
+    random.SystemRandom().shuffle(password_chars) # Use system random for better shuffling
+
+    return "".join(password_chars)
+
+
+# --- Routes ---
+
+@app.route('/')
+def home():
+    if current_user.is_authenticated: return redirect(url_for('add_password_page'))
+    else: return redirect(url_for('login'))
+
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    if current_user.is_authenticated: return redirect(url_for('add_password_page'))
+    if request.method == 'POST':
+        email = request.form.get('email', '').strip(); password = request.form.get('password', '')
+        # ** GET REMEMBER ME VALUE **
+        remember_me = 'remember' in request.form # True if checkbox was ticked
+
+        if not email or not password:
+            flash('Email and Master Password are required.', 'danger'); return render_template('login.html'), 400
+        try:
+            response = supabase.table('users').select("id, email, password_hash").eq('email', email).maybe_single().execute()
+            if hasattr(response, 'data') and response.data:
+                user_data = response.data; stored_hash = user_data['password_hash']
+                if bcrypt.check_password_hash(stored_hash, password):
+                    user_obj = User(id=user_data['id'], email=user_data['email'])
+                    # ** PASS REMEMBER ME TO login_user **
+                    login_user(user_obj, remember=remember_me)
+                    # Flask-Login sets session.permanent based on 'remember' flag
+
+                    session['user_data'] = {'id': user_data['id'], 'email': user_data['email']}
+                    # Derive key and store URL-safe Base64 version in session
+                    derived_key_b64url = derive_key(password, user_data['email'])
+                    session['encryption_key'] = derived_key_b64url.decode('utf-8')
+                    flash('Logged in successfully!', 'success')
+                    next_page = request.args.get('next')
+                    return redirect(next_page or url_for('add_password_page'))
+                else: flash('Login failed. Invalid email or password.', 'danger')
+            else: flash('Login failed. Invalid email or password.', 'danger')
+            return render_template('login.html'), 401
+        except Exception as e:
+            flash(f'An error occurred during login. Please try again.', 'danger')
+            print(f"Login Exception for {email}: {type(e).__name__} - {e}"); traceback.print_exc()
+            return render_template('login.html'), 500
+    return render_template('login.html')
+
+@app.route('/register', methods=['GET', 'POST'])
+def register():
+    if current_user.is_authenticated: return redirect(url_for('add_password_page'))
+    if request.method == 'POST':
+        email = request.form.get('email', '').strip()
+        password = request.form.get('password', ''); confirm_password = request.form.get('confirm_password', '')
+        if not email or not password or not confirm_password: flash('All fields are required.', 'danger'); return render_template('register.html'), 400
+        if password != confirm_password: flash('Passwords do not match.', 'danger'); return render_template('register.html'), 400
+        try:
+            check_response = supabase.table('users').select("id", count='exact').eq('email', email).execute()
+            if hasattr(check_response, 'count') and check_response.count is not None and check_response.count > 0:
+                flash('Email address is already registered. Please login.', 'warning'); return redirect(url_for('login'))
+            elif not hasattr(check_response, 'count'): print(f"WARNING: Supabase check for {email} lacked 'count': {check_response}")
+
+            hashed_password = bcrypt.generate_password_hash(password).decode('utf-8')
+            insert_response = supabase.table('users').insert({'email': email, 'password_hash': hashed_password}).execute()
+            if hasattr(insert_response, 'data') and insert_response.data:
+                 flash('Registration successful! Please log in.', 'success'); return redirect(url_for('login'))
+            else:
+                 print(f"ERROR: Registration failed for {email}. Response: {insert_response}")
+                 flash("Registration failed due to a server error.", 'danger')
+                 return render_template('register.html'), 500
+        except Exception as e:
+            flash(f'An error occurred during registration. Please try again.', 'danger')
+            print(f"Registration Exception for {email}: {type(e).__name__} - {e}"); traceback.print_exc()
+            return render_template('register.html'), 500
+    return render_template('register.html')
+
+@app.route('/logout')
+@login_required
+def logout():
+    session.pop('encryption_key', None); session.pop('user_data', None)
+    logout_user()
+    flash('You have been logged out successfully.', 'success')
+    return redirect(url_for('login'))
+
+# --- Main Application Pages (Require Login) ---
+
+@app.route('/add')
+@login_required
+def add_password_page(): return render_template('index.html')
+
+@app.route('/storage')
+@login_required
+def storage(): return render_template('storage.html')
+
+@app.route('/analyse')
+@login_required
+def analyse(): return render_template('analyse.html')
+
+# --- API Endpoints (Require Login) ---
+
+@app.route('/api/credentials', methods=['GET'])
+@login_required
+def get_credentials():
+    user_id = current_user.id
+    try:
+        response = supabase.table('credentials').select("id, encrypted_data, service_hint, created_at").eq('user_id', user_id).order('created_at', desc=True).execute()
+        # Check response structure for Supabase v2 (data attribute is primary)
+        if hasattr(response, 'data'):
+            return jsonify(response.data)
+        else: # Fallback or error logging if structure changes
+            print(f"Supabase get credentials unexpected response for user {user_id}. Response: {response}")
+            return jsonify({'error': 'Failed to retrieve credentials'}), 500
+    except Exception as e:
+        print(f"Error in get_credentials for user {user_id}: {e}"); traceback.print_exc()
+        return jsonify({'error': 'Server error retrieving credentials'}), 500
+
+@app.route('/api/credentials', methods=['POST'])
+@login_required
+def add_credential():
+    data = request.json; user_id = current_user.id
+    encrypted_data = data.get('encrypted_data'); service_hint = data.get('service_hint')
+    if not encrypted_data: return jsonify({'success': False, 'message': 'Encrypted data payload is required.'}), 400
+    try:
+        insert_response = supabase.table('credentials').insert({'user_id': user_id, 'encrypted_data': encrypted_data, 'service_hint': service_hint}).execute()
+        # Check response structure for Supabase v2
+        if hasattr(insert_response, 'data') and insert_response.data:
+            return jsonify({'success': True, 'message': 'Credential saved successfully.'})
+        else:
+            print(f"Supabase insert credentials error for user {user_id}. Response: {insert_response}")
+            # Attempt to get more specific error if available (structure might vary)
+            error_msg = "Failed to save credential"
+            if hasattr(insert_response, 'error') and insert_response.error and hasattr(insert_response.error, 'message'):
+                error_msg += f": {insert_response.error.message}"
+            return jsonify({'success': False, 'message': error_msg}), 500
+    except Exception as e:
+        print(f"Error in add_credential for user {user_id}: {e}"); traceback.print_exc()
+        return jsonify({'success': False, 'message': 'Server error saving credential'}), 500
+
+@app.route('/api/analyse_password', methods=['POST'])
+@login_required
+def analyse_password_api():
+    data = request.json; characteristics = data.get('characteristics')
+    if not characteristics or not isinstance(characteristics, dict):
+         return jsonify({'error': 'Password characteristics payload is required.'}), 400
+    analysis = get_llm_password_insights(characteristics)
+    feedback = []
+    if 'insights' in analysis: feedback.extend([f"Issue: {ins}" for ins in analysis['insights'] if ins])
+    if 'suggestions' in analysis: feedback.extend([f"Tip: {sug}" for sug in analysis['suggestions'] if sug])
+    if not feedback:
+        if analysis.get('strength', 0) == 5: feedback.append("Tip: Looks good based on characteristics!")
+        else: feedback.append("Issue: Review password based on assessment.")
+    return jsonify({ 'strength': analysis.get('strength', 1), 'assessment': analysis.get('assessment', 'Weak'), 'feedback': feedback })
+
+
+# --- NEW: Password Generation API Endpoint ---
+@app.route('/api/generate_password', methods=['POST']) # Using POST for consistency
+@login_required
+def generate_password_api():
+    try:
+        data = request.get_json(silent=True)
+
+        if data is None:
+            data = request.args.to_dict()
+            if not data:
+                data = {}
+
+        # Safely get length
+        try:
+            length_str = data.get('length', '16') # Default to string '16'
+            length = int(length_str)
+            if not (4 <= length <= 128):
+                 return jsonify({'error': 'Length must be between 4 and 128.'}), 400
+        except (ValueError, TypeError):
+             return jsonify({'error': f'Invalid length parameter: "{length_str}". Must be an integer.'}), 400
+
+        # Helper for robust boolean parsing from various request inputs
+        def parse_bool(key, default_value):
+            value = data.get(key, default_value) # Get value or default
+            if isinstance(value, bool): return value
+            if isinstance(value, str):
+                low_val = value.lower()
+                if low_val in ['true', '1', 'yes', 'y']: return True
+                if low_val in ['false', '0', 'no', 'n']: return False
+            # Check for integer 1/0 as well
+            if isinstance(value, int) and value in [0, 1]:
+                return bool(value)
+            # If it's none of the above, return the original default
+            # print(f"Warning: Unexpected type for boolean parse '{key}': {type(value)}, using default: {default_value}")
+            return default_value
+
+        use_lowercase = parse_bool('use_lowercase', True)
+        use_uppercase = parse_bool('use_uppercase', True)
+        use_digits    = parse_bool('use_digits', True)
+        use_symbols   = parse_bool('use_symbols', True)
+
+        if not any([use_lowercase, use_uppercase, use_digits, use_symbols]):
+             return jsonify({'error': 'At least one character type must be selected.'}), 400
+
+        password = generate_secure_password(length, use_lowercase, use_uppercase, use_digits, use_symbols)
+        return jsonify({'password': password})
+
+    except ValueError as ve:
+        print(f"Password generation validation error: {ve}")
+        return jsonify({'error': str(ve)}), 400
+    except Exception as e:
+        print(f"Unexpected error in generate_password_api: {type(e).__name__} - {e}")
+        traceback.print_exc()
+        return jsonify({'error': 'Server error generating password.'}), 500
+
+# --- Helper for zxcvbn analysis ---
+# (Keep the import from zxcvbn at the top)
+# from zxcvbn import zxcvbn # Already should be there
+
+def get_zxcvbn_feedback(password):
+    """Analyzes password using zxcvbn and formats feedback."""
+    results = zxcvbn(password)
+    score = results['score'] # Score 0-4
+    feedback_items = []
+
+    # Map score to assessment
+    assessment_map = {
+        0: "Very Weak", 1: "Weak", 2: "Medium", 3: "Strong", 4: "Very Strong"
+    }
+    assessment = assessment_map.get(score, "Unknown")
+
+    # Add warning if present
+    if results['feedback']['warning']:
+        feedback_items.append(f"Warning: {results['feedback']['warning']}")
+    # Add suggestions
+    if results['feedback']['suggestions']:
+        feedback_items.extend([f"Suggestion: {s}" for s in results['feedback']['suggestions']])
+
+    # Add a generic suggestion if feedback is empty but score is low
+    if not feedback_items and score < 3:
+        feedback_items.append("Suggestion: Add more variety (uppercase, numbers, symbols) or increase length.")
+    elif not feedback_items and score >= 3:
+         feedback_items.append("Suggestion: Looks reasonably strong!")
+
+
+    # Return without calc_time which is not JSON serializable
+    return {
+        'score': score, # 0-4
+        'assessment': assessment,
+        'feedback': feedback_items,
+        'guesses': results['guesses'], # Optional: include estimated guesses if needed
+    }
+
+@app.route('/api/strength_check', methods=['POST'])
+@login_required
+def strength_check_api():
+    """Receives a password and returns its zxcvbn strength analysis."""
+    data = request.get_json()
+    if not data or 'password' not in data:
+        return jsonify({'error': 'Password key missing in request body.'}), 400
+
+    password = data['password']
+    if not password: # Handle empty password case
+        return jsonify({'score': 0, 'assessment': 'Very Weak', 'feedback': ['Suggestion: Please enter a password.']})
+
+    try:
+        analysis = get_zxcvbn_feedback(password)
+        return jsonify(analysis)
+    except Exception as e:
+        print(f"Error during zxcvbn strength check: {e}")
+        traceback.print_exc()
+        # Return a generic low score on error, rather than crashing
+        return jsonify({'score': 0, 'assessment': 'Error', 'feedback': ['Error analyzing password strength.']}), 500
+
+
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 5000))
+    app.run(host='0.0.0.0', port=port, debug=app.config['DEBUG'])
+# --- END OF FILE app.py ---

extension/README.md

@@ -0,0 +1,53 @@
+# Blockchain Password Manager Extension
+
+A Chrome extension for the Blockchain Password Manager that allows you to securely store and manage your passwords.
+
+## Features
+
+- Secure password storage using blockchain technology
+- Auto-fill passwords on websites
+- Easy password management through browser extension
+- One-click password copying
+- Secure login system
+
+## Installation
+
+1. Make sure the Blockchain Password Manager backend is running on `http://localhost:5000`
+2. Open Chrome and go to `chrome://extensions/`
+3. Enable "Developer mode" in the top right corner
+4. Click "Load unpacked" and select the `extension` folder
+5. The extension should now be installed and visible in your Chrome toolbar
+
+## Usage
+
+1. Click the extension icon in your Chrome toolbar
+2. Log in with your credentials
+3. To add a new password:
+   - Click "Add New Password"
+   - Fill in the service, username, and password
+   - Click "Save"
+4. To use a saved password:
+   - Click on the password in the list to copy it to clipboard
+   - Or visit the website and click the green icon that appears on the login form
+
+## Security Notes
+
+- All passwords are stored securely in the blockchain
+- Passwords are never stored in plain text
+- The extension only communicates with your local blockchain instance
+- Make sure to keep your login credentials secure
+
+## Development
+
+To modify the extension:
+
+1. Make changes to the files in the `extension` folder
+2. Go to `chrome://extensions/`
+3. Find the extension and click the refresh icon
+4. The changes will be applied
+
+## Requirements
+
+- Chrome browser
+- Running instance of the Blockchain Password Manager backend
+- Internet connection (for blockchain operations) 

extension/background.js

@@ -0,0 +1,111 @@
+// --- background.js ---
+
+let inMemoryKeyB64 = null;      // Store Base64 string
+let userEmailForSession = null;
+let keyExpiryTimer = null;
+const KEY_EXPIRY_MINUTES = 30;
+
+// --- Helper Functions ---
+// Necessary for converting back when GETTING the key if needed elsewhere,
+// but not strictly needed for storing/retrieving the B64 string itself.
+// Including for completeness/potential future use.
+function base64ToArrayBuffer(base64) {
+    try {
+        const binary_string = atob(base64); // Use global atob
+        const len = binary_string.length;
+        const bytes = new Uint8Array(len);
+        for (let i = 0; i < len; i++) { bytes[i] = binary_string.charCodeAt(i); }
+        return bytes.buffer;
+    } catch (e) {
+        console.error("[Background] Base64 decoding failed:", e);
+        throw new Error("Invalid Base64 string.");
+    }
+}
+
+function clearKeyAndTimer() {
+    console.log("[Background] Clearing key and timer...");
+    inMemoryKeyB64 = null; // Clear the B64 string
+    userEmailForSession = null;
+    if (keyExpiryTimer) { clearTimeout(keyExpiryTimer); keyExpiryTimer = null; }
+    console.log("[Background] In-memory key cleared.");
+    // chrome.action.setIcon({ path: "icons/icon128_locked.png" }).catch(e => console.warn("Error setting icon:", e));
+}
+
+function resetKeyExpiryTimer() {
+    if (keyExpiryTimer) { clearTimeout(keyExpiryTimer); }
+    if (inMemoryKeyB64) { // Check if B64 string exists
+        keyExpiryTimer = setTimeout(clearKeyAndTimer, KEY_EXPIRY_MINUTES * 60 * 1000);
+        console.log(`[Background] Key expiry timer reset (${KEY_EXPIRY_MINUTES} mins). Timer ID: ${keyExpiryTimer}`);
+    } else {
+        console.log("[Background] No key exists, expiry timer not set.");
+    }
+}
+
+// Listener for messages
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    const senderType = sender.tab ? `content script (${sender.tab.url})` : `popup/extension (${sender.id})`;
+    console.log(`[Background] Received message: ACTION=${request.action} from ${senderType}`);
+
+    if (!sender.tab) { resetKeyExpiryTimer(); }
+
+    try {
+        if (request.action === 'storeKey') {
+            console.log("[Background] Handling 'storeKey'");
+             // *** THIS IS THE CORRECTED CHECK ***
+            if (typeof request.keyB64 === 'string' && request.keyB64.length > 10 && request.email) { // Check for keyB64 string
+                inMemoryKeyB64 = request.keyB64; // Store Base64 string
+                userEmailForSession = request.email;
+                console.log("[Background] Key (Base64) stored successfully for", userEmailForSession);
+                resetKeyExpiryTimer();
+                sendResponse({ success: true });
+            } else {
+                // *** THIS LOG MATCHES THE EXPECTATION OF keyB64 ***
+                console.error("[Background] StoreKey request missing valid keyB64 (string) or email.");
+                sendResponse({ success: false, error: "Missing valid keyB64 or email" });
+            }
+            return false; // Synchronous response
+
+        } else if (request.action === 'getKey') {
+             console.log("[Background] Handling 'getKey'. Key (B64) exists?", !!inMemoryKeyB64);
+             if (inMemoryKeyB64 && userEmailForSession) {
+                 console.log("[Background] Key (Base64) found for", userEmailForSession);
+                 // Send Base64 string back
+                 sendResponse({ success: true, keyB64: inMemoryKeyB64, email: userEmailForSession });
+             } else {
+                 console.log("[Background] Key not found in memory.");
+                 sendResponse({ success: false });
+             }
+             // **MUST return true for potential async response pathway**
+             // Although sendResponse is called synchronously here, message listeners
+             // should generally return true if they might ever call sendResponse later.
+             return true;
+
+        } else if (request.action === 'clearKey') {
+            console.log("[Background] Handling 'clearKey'");
+            clearKeyAndTimer();
+            sendResponse({ success: true });
+             return false; // Synchronous response
+
+        } else if (request.action === 'getEmail') {
+             console.log("[Background] Handling 'getEmail'. Email stored?", userEmailForSession || "No");
+             sendResponse({success: true, email: userEmailForSession });
+              return false; // Synchronous response
+        }
+        else {
+            console.log("[Background] Unknown action received:", request.action);
+        }
+
+    } catch (error) {
+         console.error(`[Background] Error handling action '${request.action}':`, error);
+         try { sendResponse({ success: false, error: `Background script error: ${error.message}` }); }
+         catch (responseError) { console.error("[Background] Failed to send error response:", responseError); }
+         return false;
+    }
+
+    // If no specific handler matched and returned, return false by default.
+    // However, the 'getKey' handler MUST return true.
+    // The structure above handles this correctly now.
+});
+
+// Initial setup log
+console.log("[Background] Service worker script loaded and listener attached.");

extension/content.js

@@ -0,0 +1,192 @@
+// Listen for messages from the popup (for autofill)
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.action === 'fillPassword' && request.password) {
+        fillPassword(request.password, request.username); // Pass username too
+        sendResponse({ success: true }); // Acknowledge message received
+    } else if (request.action === 'getDomain') {
+        // Respond with the current page's domain if requested (e.g., by popup)
+         sendResponse({ domain: window.location.hostname });
+     }
+     // Keep the listener alive for asynchronous responses if needed
+     // return true; 
+});
+
+// Function to fill username and password in the current page
+function fillPassword(password, username) {
+    // --- Password Field Detection ---
+    // Prioritize specific attributes often used for login
+    let passwordInput = document.querySelector('input[type="password"][autocomplete*="current-password"]');
+    if (!passwordInput) {
+        // More robust fallback: Find any visible password field
+        const visiblePasswordFields = Array.from(document.querySelectorAll('input[type="password"]'))
+                                            .filter(el => el.offsetParent !== null && !el.disabled && !el.readOnly);
+        if(visiblePasswordFields.length > 0) {
+            passwordInput = visiblePasswordFields[0]; // Use the first visible one
+            // If multiple, could try to find one near the username field later
+        }
+    }
+
+    // --- Username Field Detection (More Heuristic) ---
+    let usernameInput = null;
+    if (passwordInput) { // Try finding username relative to password field
+        const form = passwordInput.closest('form');
+        if (form) {
+            // Look within the same form first
+            usernameInput = form.querySelector('input[type="email"], input[type="text"][autocomplete*="username"], input[type="tel"][autocomplete*="username"]');
+            if (!usernameInput) {
+                // Fallback: Look for any email/text/tel field before the password field in the form
+                const inputs = Array.from(form.querySelectorAll('input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"])'));
+                const passwordIndex = inputs.indexOf(passwordInput);
+                if (passwordIndex > 0) {
+                    // Look backwards from password field
+                    for(let i = passwordIndex - 1; i >= 0; i--) {
+                         if(inputs[i].type === 'text' || inputs[i].type === 'email' || inputs[i].type === 'tel'){
+                             usernameInput = inputs[i];
+                             break;
+                         }
+                    }
+                }
+            }
+        }
+    }
+     // Absolute fallback if no form or no input found yet
+     if (!usernameInput) {
+         usernameInput = document.querySelector('input[type="email"], input[type="text"][autocomplete*="username"], input[type="tel"][autocomplete*="username"]');
+     }
+     // Final fallback: first visible text/email/tel input if still nothing
+     if(!usernameInput){
+        const visibleUserFields = Array.from(document.querySelectorAll('input[type="text"], input[type="email"], input[type="tel"]'))
+                                         .filter(el => el.offsetParent !== null && !el.disabled && !el.readOnly && el.type !== 'search');
+         if(visibleUserFields.length > 0){
+             // Maybe check if it's *before* the password field in the DOM as a final heuristic?
+              const passwordFieldDomOrder = passwordInput ? Array.from(document.querySelectorAll('input')).indexOf(passwordInput) : Infinity;
+              const potentialUserField = visibleUserFields.find(uf => Array.from(document.querySelectorAll('input')).indexOf(uf) < passwordFieldDomOrder);
+              usernameInput = potentialUserField || visibleUserFields[0];
+         }
+     }
+
+
+    // --- Filling Logic ---
+    let filledPassword = false;
+    let filledUsername = false;
+
+    if (passwordInput) {
+        setInputValue(passwordInput, password);
+        filledPassword = true;
+        console.log("Secure PWM: Password field found and filled.");
+    } else {
+        console.warn("Secure PWM: No suitable password input field found on this page.");
+    }
+
+    if (username && usernameInput) {
+        setInputValue(usernameInput, username);
+        filledUsername = true;
+        console.log("Secure PWM: Username field found and filled.");
+    } else if (username && !usernameInput) {
+         console.warn("Secure PWM: Username provided but no suitable input field found.");
+    } else if (!username) {
+        console.log("Secure PWM: No username provided to fill.");
+    }
+
+
+    // Optional: Attempt to focus the next logical element (e.g., login button)
+    // if (filledPassword && filledUsername) {
+    //    // Try finding a submit button in the same form
+    // }
+}
+
+// Helper to set value and dispatch events for better compatibility
+function setInputValue(inputElement, value) {
+     inputElement.focus();
+     inputElement.value = value;
+     inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+     inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+     // inputElement.blur(); // Sometimes needed, sometimes breaks things. Test carefully.
+}
+
+
+// --- (Optional but Recommended) Icon Injection ---
+
+// Function to detect login forms and add an icon
+function detectAndMarkForms() {
+    // Remove existing icons first to avoid duplicates on dynamic updates
+     document.querySelectorAll('.secure-pwm-icon').forEach(icon => icon.remove());
+
+    const forms = document.querySelectorAll('form');
+    forms.forEach((form) => {
+        const hasPasswordField = form.querySelector('input[type="password"]');
+        // Simple check for a potential username/email field nearby
+        const hasUsernameField = form.querySelector('input[type="email"], input[type="text"], input[type="tel"]');
+
+        if (hasPasswordField && hasUsernameField) {
+            // Check if form or password field is likely visible
+             if(hasPasswordField.offsetParent === null) return; // Skip hidden fields
+
+            const passwordField = hasPasswordField;
+
+            // Create and style the icon
+             const icon = document.createElement('div');
+             icon.className = 'secure-pwm-icon'; // Class for identification and removal
+             icon.title = 'Fill with Secure Password Manager';
+             icon.style.cssText = `
+                 position: absolute;
+                 width: 18px;
+                 height: 18px;
+                 background-color: #28a745; /* Green */
+                 background-image: url('${chrome.runtime.getURL("icons/icon16.png")}'); /* Use extension icon */
+                 background-size: 12px 12px; /* Adjust size */
+                 background-repeat: no-repeat;
+                 background-position: center;
+                 border: 1px solid #1e7e34;
+                 border-radius: 50%;
+                 cursor: pointer;
+                 z-index: 9999;
+                 box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+                 /* Attempt to position inside/near the right edge of the password field */
+                 top: ${passwordField.offsetTop + (passwordField.offsetHeight / 2) - 9}px;
+                 left: ${passwordField.offsetLeft + passwordField.offsetWidth - 22}px;
+             `;
+
+             // Ensure the *parent* of the input allows absolute positioning relative to it
+              const inputWrapper = passwordField.parentElement;
+              if (inputWrapper && getComputedStyle(inputWrapper).position === 'static') {
+                  inputWrapper.style.position = 'relative'; // Make parent relative if needed
+              }
+             // Append the icon to the input's parent wrapper if possible, or form
+             if (inputWrapper) {
+                inputWrapper.appendChild(icon);
+             } else if (form && getComputedStyle(form).position !== 'static') {
+                 form.appendChild(icon); // Fallback to form if parent is tricky
+             } else {
+                 // Less ideal: append to body, requires calculating absolute coords
+             }
+
+
+            // Add click handler to the icon (optional - could trigger popup)
+            icon.addEventListener('click', (e) => {
+                 e.stopPropagation(); // Prevent form submission if icon is inside button area
+                // Send message to background/popup to show relevant entries for this domain
+                 console.log("Secure PWM icon clicked. Requesting relevant passwords.");
+                 chrome.runtime.sendMessage({ action: 'showRelevantPasswords', domain: window.location.hostname });
+             });
+        }
+    });
+}
+
+// Run form detection with debouncing
+let debounceTimer;
+const observer = new MutationObserver(() => {
+     clearTimeout(debounceTimer);
+     debounceTimer = setTimeout(detectAndMarkForms, 300); // Adjust delay as needed
+});
+
+// Initial detection and observation setup
+if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+        detectAndMarkForms();
+        observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['type', 'style', 'class', 'hidden', 'disabled'] });
+    });
+} else {
+    detectAndMarkForms(); // Already loaded
+    observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['type', 'style', 'class', 'hidden', 'disabled'] });
+}

extension/crypto-helpers.js

@@ -0,0 +1,230 @@
+// --- crypto-helpers.js ---
+// Helper functions for Web Crypto API and Base64 Handling
+
+/**
+ * Converts a Base64URL encoded string to an ArrayBuffer.
+ * Needed for decoding the key stored in Flask session.
+ * @param {string} b64url - Base64URL encoded string.
+ * @returns {ArrayBuffer}
+ */
+function base64UrlDecode(b64url) {
+    try {
+        let b64 = b64url.replace(/-/g, '+').replace(/_/g, '/');
+        while (b64.length % 4) {
+            b64 += '=';
+        }
+        return base64ToArrayBuffer(b64);
+    } catch (e) {
+        console.error("Base64URL decoding failed:", e);
+        throw new Error("Invalid Base64URL string for key decoding.");
+    }
+}
+
+/**
+ * Converts a standard Base64 string to an ArrayBuffer.
+ * @param {string} base64 - Standard Base64 encoded string.
+ * @returns {ArrayBuffer}
+ */
+function base64ToArrayBuffer(base64) {
+    try {
+        const binary_string = window.atob(base64);
+        const len = binary_string.length;
+        const bytes = new Uint8Array(len);
+        for (let i = 0; i < len; i++) {
+            bytes[i] = binary_string.charCodeAt(i);
+        }
+        return bytes.buffer;
+    } catch (e) {
+        console.error("Base64 decoding failed:", e);
+        throw new Error("Invalid Base64 string.");
+    }
+}
+
+/**
+ * Converts an ArrayBuffer to a standard Base64 string.
+ * Used for logging raw keys consistently.
+ * @param {ArrayBuffer} buffer - The ArrayBuffer to encode.
+ * @returns {string}
+ */
+function arrayBufferToBase64(buffer) {
+    let binary = '';
+    const bytes = new Uint8Array(buffer);
+    const len = bytes.byteLength;
+    for (let i = 0; i < len; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return window.btoa(binary);
+}
+
+/**
+ * Derives a 32-byte AES key from a password and salt using PBKDF2.
+ * Logs the standard Base64 representation of the raw key.
+ * @param {string} password - The master password.
+ * @param {string} saltString - The salt (e.g., user's email).
+ * @returns {Promise<ArrayBuffer>} - Promise resolving to the raw key bytes (ArrayBuffer).
+ */
+async function deriveKeyRawBytes(password, saltString) {
+    try {
+        const salt = new TextEncoder().encode(saltString.toLowerCase()); // Use consistent casing for salt
+        const passwordBuffer = new TextEncoder().encode(password);
+        const iterations = 390000; // Match Python backend KDF iterations
+
+        const keyMaterial = await crypto.subtle.importKey(
+            'raw', passwordBuffer, { name: 'PBKDF2' }, false, ['deriveBits']
+        );
+
+        const derivedBits = await crypto.subtle.deriveBits(
+            { name: 'PBKDF2', salt: salt, iterations: iterations, hash: 'SHA-256' },
+            keyMaterial,
+            256 // Derive 256 bits (32 bytes)
+        );
+
+        // --- ADDED LOGGING ---
+        try {
+            console.log(`DEBUG: JS Derived Key (Raw -> Standard Base64): ${arrayBufferToBase64(derivedBits)}`);
+        } catch(logErr) { console.error("DEBUG: Error logging JS derived key", logErr); }
+        // --- END LOGGING ---
+
+        return derivedBits; // Return raw ArrayBuffer
+    } catch (error) {
+        console.error("Key derivation failed:", error);
+        throw new Error("Could not derive encryption key.");
+    }
+}
+
+/**
+ * Encrypts data (object) using AES-GCM with the provided raw key bytes.
+ * @param {ArrayBuffer} keyBuffer - The raw 32-byte AES key.
+ * @param {object} data - The JavaScript object to encrypt.
+ * @returns {Promise<string>} - Promise resolving to the Base64 encoded encrypted data (IV + Ciphertext).
+ */
+async function encryptData(keyBuffer, data) {
+    try {
+        const iv = crypto.getRandomValues(new Uint8Array(12));
+        const dataString = JSON.stringify(data);
+        const encodedData = new TextEncoder().encode(dataString);
+        const cryptoKey = await crypto.subtle.importKey("raw", keyBuffer, { name: "AES-GCM", length: 256 }, false, ["encrypt"]);
+        const encryptedContent = await crypto.subtle.encrypt({ name: "AES-GCM", iv: iv }, cryptoKey, encodedData);
+        const combinedBuffer = new Uint8Array(iv.length + encryptedContent.byteLength);
+        combinedBuffer.set(iv, 0);
+        combinedBuffer.set(new Uint8Array(encryptedContent), iv.length);
+        return arrayBufferToBase64(combinedBuffer); // Return standard Base64
+    } catch (error) {
+        console.error("Encryption failed:", error);
+        throw new Error("Could not encrypt data.");
+    }
+}
+
+/**
+ * Decrypts Base64 encoded data using AES-GCM with the provided raw key bytes.
+ * @param {ArrayBuffer} keyBuffer - The raw 32-byte AES key.
+ * @param {string} encryptedB64Data - Base64 encoded data (IV + Ciphertext).
+ * @returns {Promise<object|null>} - Promise resolving to the decrypted object, or null on failure.
+ */
+async function decryptData(keyBuffer, encryptedB64Data) {
+    try {
+        const combinedData = base64ToArrayBuffer(encryptedB64Data);
+        if (combinedData.byteLength < 12) throw new Error("Encrypted data too short.");
+        const iv = combinedData.slice(0, 12);
+        const ciphertext = combinedData.slice(12);
+        const cryptoKey = await crypto.subtle.importKey("raw", keyBuffer, { name: "AES-GCM", length: 256 }, false, ["decrypt"]);
+        const decryptedContent = await crypto.subtle.decrypt({ name: "AES-GCM", iv: iv }, cryptoKey, ciphertext);
+        const decodedString = new TextDecoder().decode(decryptedContent);
+        return JSON.parse(decodedString);
+    } catch (error) {
+        // Log the specific crypto error, helpful for debugging (e.g., Authentication tag mismatch)
+        console.error(`Decryption failed: ${error.name} - ${error.message}`);
+        return null; // Indicate failure
+    }
+}
+
+/**
+ * Escapes HTML special characters in a string.
+ * @param {string} unsafe - The potentially unsafe string.
+ * @returns {string} - The escaped string.
+ */
+function escapeHtml(unsafe) {
+    if (typeof unsafe !== 'string') return '';
+    return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+
+/**
+ * Computes the SHA-1 hash of a string.
+ * @param {string} text - The string to hash.
+ * @returns {Promise<string>} - Promise resolving to the SHA-1 hash as an uppercase hex string.
+ */
+async function sha1Hash(text) {
+    // ... (implementation as previously provided)
+    try {
+        const encoder = new TextEncoder();
+        const data = encoder.encode(text);
+        const hashBuffer = await crypto.subtle.digest('SHA-1', data);
+        const hashArray = Array.from(new Uint8Array(hashBuffer));
+        const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+        return hashHex.toUpperCase(); // HIBP API uses uppercase hex
+    } catch (error) {
+        console.error("SHA-1 Hashing failed:", error);
+        throw new Error("Could not compute SHA-1 hash.");
+    }
+}
+
+/**
+ * Checks if a password has been exposed in known data breaches using HIBP Pwned Passwords API (FREE version).
+ * Uses k-Anonymity.
+ * @param {string} password - The password to check.
+ * @returns {Promise<{isPwned: boolean, count: number | null, error: string | null}>}
+ */
+async function checkHIBPPassword(password) {
+    // ... (implementation as previously provided)
+    if (!password) {
+        return { isPwned: false, count: null, error: null }; // Cannot check empty password
+    }
+    try {
+        const hash = await sha1Hash(password);
+        const prefix = hash.substring(0, 5);
+        const suffix = hash.substring(5);
+        const apiUrl = `https://api.pwnedpasswords.com/range/${prefix}`; // FREE endpoint
+
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout
+
+        const response = await fetch(apiUrl, {
+             method: 'GET',
+             signal: controller.signal
+         });
+
+        clearTimeout(timeoutId);
+
+        if (!response.ok) {
+             if (response.status === 404) {
+                 // 404 means the prefix wasn't found (good!)
+                 return { isPwned: false, count: 0, error: null };
+             }
+             throw new Error(`HIBP API Error: ${response.status} ${response.statusText}`);
+        }
+
+        const text = await response.text();
+        const lines = text.split('\r\n');
+
+        for (const line of lines) {
+            const [lineSuffix, lineCountStr] = line.split(':');
+            if (lineSuffix === suffix) {
+                const count = parseInt(lineCountStr, 10);
+                console.warn(`Password found in HIBP database ${count} times!`);
+                return { isPwned: true, count: count, error: null };
+            }
+        }
+        return { isPwned: false, count: 0, error: null };
+
+    } catch (error) {
+        let errorMessage = "Could not check password breach status.";
+        if (error.name === 'AbortError') {
+            errorMessage = "Breach check timed out.";
+        } else if (error instanceof Error) {
+             errorMessage = `Breach check failed: ${error.message}`;
+        }
+        console.error("HIBP Check Error:", error);
+        return { isPwned: false, count: null, error: errorMessage };
+    }
+}
+// --- END OF crypto-helpers.js additions ---

extension/manifest.json

@@ -0,0 +1,39 @@
+{
+  "manifest_version": 3,
+  "name": "Secure E2EE Password Manager",
+  "version": "1.2", 
+  "description": "A secure password manager using E2EE and a Supabase backend.",
+  "permissions": [
+    "storage",
+    "activeTab",
+    "scripting",
+    "cookies",
+    "alarms" 
+  ],
+  "host_permissions": [
+    "http://127.0.0.1:5000/*",
+    "http://localhost:5000/*"
+  ],
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js", "crypto-helpers.js"] 
+    }
+  ]
+}

extension/popup.html

@@ -0,0 +1,406 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Secure Manager</title>
+    <style>
+        /* Define theme variables locally for the popup */
+        :root {
+            --popup-primary-color: #007bff;
+            --popup-primary-darker: #0056b3;
+            --popup-secondary-color: #6c757d;
+            --popup-secondary-darker: #5a6268;
+            --popup-success-color: #28a745;
+            --popup-success-darker: #1e7e34;
+            --popup-danger-color: #dc3545;
+
+            --popup-light-bg: #f8f9fa;
+            --popup-light-card-bg: #ffffff;
+            --popup-light-text: #212529;
+            --popup-light-text-secondary: #6c757d;
+            --popup-light-border: #dee2e6;
+            --popup-light-input-bg: #ffffff;
+            --popup-light-input-border: #ced4da;
+            --popup-light-focus-shadow: rgba(0, 123, 255, 0.2);
+            --popup-light-hover-bg: #e9ecef;
+            --popup-light-item-hover: #f1f1f1;
+            --popup-strength-bg: #f0f0f0;
+            --popup-strength-border: #ddd;
+
+            --popup-dark-bg: #212529;
+            --popup-dark-card-bg: #343a40;
+            --popup-dark-text: #f8f9fa;
+            --popup-dark-text-secondary: #adb5bd;
+            --popup-dark-border: #495057;
+            --popup-dark-input-bg: #495057;
+            --popup-dark-input-border: #6c757d;
+            --popup-dark-focus-shadow: rgba(13, 110, 253, 0.3);
+            --popup-dark-hover-bg: #495057;
+            --popup-dark-item-hover: #454b51;
+            --popup-strength-bg: #495057;
+            --popup-strength-border: #6c757d;
+
+            /* Default to light */
+            --popup-bg: var(--popup-light-bg);
+            --popup-card-bg: var(--popup-light-card-bg);
+            --popup-text: var(--popup-light-text);
+            --popup-text-secondary: var(--popup-light-text-secondary);
+            --popup-border: var(--popup-light-border);
+            --popup-input-bg: var(--popup-light-input-bg);
+            --popup-input-border: var(--popup-light-input-border);
+            --popup-focus-shadow: var(--popup-light-focus-shadow);
+            --popup-hover-bg: var(--popup-light-hover-bg);
+            --popup-item-hover: var(--popup-light-item-hover);
+            --popup-hdr-bg: var(--popup-primary-color);
+            --popup-hdr-text: white;
+            --popup-strength-bg-color: var(--popup-strength-bg);
+            --popup-strength-border-color: var(--popup-strength-border);
+
+
+            --popup-border-radius: 4px;
+            --popup-transition: 0.2s ease;
+            --popup-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        }
+
+        body[data-theme="dark"] {
+            --popup-bg: var(--popup-dark-bg);
+            --popup-card-bg: var(--popup-dark-card-bg);
+            --popup-text: var(--popup-dark-text);
+            --popup-text-secondary: var(--popup-dark-text-secondary);
+            --popup-border: var(--popup-dark-border);
+            --popup-input-bg: var(--popup-dark-input-bg);
+            --popup-input-border: var(--popup-dark-input-border);
+            --popup-focus-shadow: var(--popup-dark-focus-shadow);
+            --popup-hover-bg: var(--popup-dark-hover-bg);
+            --popup-item-hover: var(--popup-dark-item-hover);
+            --popup-hdr-bg: #2c3e50; /* Darker header for dark mode */
+            --popup-hdr-text: #e9ecef;
+            --popup-strength-bg-color: var(--popup-dark-strength-bg);
+            --popup-strength-border-color: var(--popup-dark-strength-border);
+        }
+
+        body {
+            width: 370px; /* Adjusted width */
+            padding: 0;
+            margin: 0;
+            font-family: var(--popup-font);
+            font-size: 14px;
+            background-color: var(--popup-bg);
+            color: var(--popup-text);
+            transition: background-color var(--popup-transition), color var(--popup-transition);
+        }
+        .container { display: flex; flex-direction: column; max-height: 550px; /* Limit total popup height */ }
+
+        /* Header */
+        .popup-header {
+            background-color: var(--popup-hdr-bg);
+            color: var(--popup-hdr-text);
+            padding: 10px 15px; /* Slightly less padding */
+            display: flex; justify-content: space-between; align-items: center;
+            transition: background-color var(--popup-transition), color var(--popup-transition);
+        }
+        .popup-header h2 { font-size: 1.05em; margin: 0; font-weight: 500; }
+        .popup-header button#logout-btn,
+        .popup-header button#popup-theme-toggle {
+            background-color: rgba(255, 255, 255, 0.15); color: var(--popup-hdr-text); border: 1px solid rgba(255, 255, 255, 0.3); padding: 4px 8px; font-size: 0.8em; border-radius: var(--popup-border-radius); cursor: pointer; transition: background-color var(--popup-transition); line-height: 1;
+        }
+        .popup-header button#logout-btn:hover,
+        .popup-header button#popup-theme-toggle:hover { background-color: rgba(255, 255, 255, 0.25); }
+        body[data-theme="dark"] .popup-header button#logout-btn,
+        body[data-theme="dark"] .popup-header button#popup-theme-toggle {
+            background-color: rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.2);
+        }
+        body[data-theme="dark"] .popup-header button#logout-btn:hover,
+        body[data-theme="dark"] .popup-header button#popup-theme-toggle:hover {
+            background-color: rgba(0, 0, 0, 0.3);
+        }
+        #theme-toggle-container { /* Container for the theme toggle */
+             margin-left: auto; /* Push it right */
+             padding-left: 10px;
+        }
+
+        /* Content Area */
+        .content-area { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; overflow-y: auto; }
+
+        /* Login View */
+        #login-view .content-area { background-color: var(--popup-card-bg); border-radius: 0 0 var(--popup-border-radius) var(--popup-border-radius); box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 20px;}
+        #login-view label { display: block; margin-bottom: 5px; font-weight: 500; color: var(--popup-text-secondary); font-size: 0.9em; }
+        #login-view input { width: 100%; padding: 10px; margin-bottom: 12px; border: 1px solid var(--popup-input-border); border-radius: var(--popup-border-radius); box-sizing: border-box; background-color: var(--popup-input-bg); color: var(--popup-text); transition: border-color var(--popup-transition), box-shadow var(--popup-transition); }
+        #login-view input:focus { border-color: var(--popup-primary-color); outline: none; box-shadow: 0 0 0 2px var(--popup-focus-shadow); }
+        #login-view button { width: 100%; padding: 10px; background-image: linear-gradient(135deg, var(--popup-primary-color), var(--popup-primary-darker)); color: white; border: none; border-radius: var(--popup-border-radius); font-size: 1em; cursor: pointer; transition: all var(--popup-transition); margin-top: 10px; background-size: 200% auto; }
+        #login-view button:hover { background-position: right center; box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2); }
+        #login-view button:active { transform: translateY(1px); }
+
+
+        /* Main View */
+        .main-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+            padding: 0 5px; /* Add padding */
+        }
+        #current-domain {
+            font-size: 0.85em;
+            color: var(--popup-text-secondary);
+            font-style: italic;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 220px; /* Adjust as needed */
+        }
+        #search-input { width: 100%; padding: 9px 12px; border: 1px solid var(--popup-input-border); border-radius: var(--popup-border-radius); box-sizing: border-box; font-size: 0.95em; margin-bottom: 10px; background-color: var(--popup-input-bg); color: var(--popup-text); transition: all var(--popup-transition); }
+        #search-input:focus { border-color: var(--popup-primary-color); outline: none; box-shadow: 0 0 0 2px var(--popup-focus-shadow); }
+
+        .password-list-container { flex-grow: 1; max-height: 220px; /* Max height for scroll */ overflow-y: auto; border: 1px solid var(--popup-border); border-radius: var(--popup-border-radius); background-color: var(--popup-card-bg); margin-bottom: 10px; transition: all var(--popup-transition); }
+        .password-list { list-style: none; padding: 0; margin: 0; }
+        .password-item { padding: 10px 12px; border-bottom: 1px solid var(--popup-border); display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; transition: background-color 0.15s ease; }
+        .password-item:last-child { border-bottom: none; }
+        .password-item:hover { background-color: var(--popup-item-hover); }
+        .password-item > div:first-child { flex-grow: 1; overflow: hidden; }
+        .item-info { display: flex; flex-direction: column; line-height: 1.4; }
+        .item-info strong { font-weight: 600; color: var(--popup-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
+        .item-info span { color: var(--popup-text-secondary); font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
+        .item-actions {
+            flex-shrink: 0;
+            display: flex;
+            gap: 5px; /* Adjust gap */
+            align-items: center; /* Vertically align buttons */
+        }
+        .item-actions button {
+            font-size: 0.8em;
+            padding: 4px 6px; /* Adjust padding */
+            background-color: var(--popup-hover-bg);
+            color: var(--popup-text-secondary);
+            border: 1px solid var(--popup-border);
+            border-radius: var(--popup-border-radius);
+            cursor: pointer;
+            transition: all var(--popup-transition);
+        }
+        .item-actions button:hover { background-color: #d3d9df; color: var(--popup-text); border-color: var(--popup-secondary-color); }
+        body[data-theme="dark"] .item-actions button:hover { background-color: #5a6268; }
+
+
+        /* Add Form */
+        .add-form { border: 1px solid var(--popup-border); padding: 15px; border-radius: var(--popup-border-radius); background-color: var(--popup-card-bg); margin-top: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: all var(--popup-transition); }
+        .add-form h3 { font-size: 1.05em; margin: 0 0 15px 0; text-align: center; color: var(--popup-text-secondary); font-weight: 500; }
+        .add-form label { margin-bottom: 4px; font-size: 0.9em; font-weight: 500; display: block; color: var(--popup-text-secondary); }
+        .add-form input[type="text"], .add-form input[type="password"] { width: 100%; padding: 9px; margin-bottom: 10px; font-size: 0.95em; border: 1px solid var(--popup-input-border); border-radius: var(--popup-border-radius); box-sizing: border-box; background-color: var(--popup-input-bg); color: var(--popup-text); transition: all var(--popup-transition); }
+         .add-form input[type="range"] { width: 100%; padding: 0; height: 18px; margin-bottom: 5px; accent-color: var(--popup-primary-color); }
+         .add-form input:focus { border-color: var(--popup-primary-color); outline: none; box-shadow: 0 0 0 2px var(--popup-focus-shadow); }
+        .add-form .form-buttons { display: flex; gap: 10px; margin-top: 15px; }
+        .add-form .form-buttons button { flex-grow: 1; padding: 9px; }
+
+        /* Buttons within Add Form */
+        .btn { border: none; border-radius: var(--popup-border-radius); cursor: pointer; font-size: 0.95em; font-weight: 500; transition: all var(--popup-transition); }
+        .label-button-group { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
+        .label-button-group label { margin-bottom: 0; }
+        .label-button-group button { padding: 2px 6px; font-size: 0.8em; }
+        .btn-primary { background-image: linear-gradient(135deg, var(--popup-primary-color), var(--popup-primary-darker)); color: white; background-size: 200% auto; }
+        .btn-primary:hover { background-position: right center; box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2); }
+        .btn-secondary { background-image: linear-gradient(135deg, var(--popup-secondary-color), var(--popup-secondary-darker)); color: white; background-size: 200% auto; }
+        .btn-secondary:hover { background-position: right center; box-shadow: 0 2px 5px rgba(108, 117, 125, 0.2); }
+        .btn-outline-secondary { background-color: transparent; border: 1px solid var(--popup-secondary-color); color: var(--popup-secondary-color); }
+        .btn-outline-secondary:hover { background-color: var(--popup-secondary-color); color: white; }
+        .btn-add-toggle { width: 100%; padding: 10px; margin-top: 5px; background-image: linear-gradient(135deg, var(--popup-success-color), var(--popup-success-darker)); color: white; background-size: 200% auto; }
+        .btn-add-toggle:hover { background-position: right center; box-shadow: 0 2px 5px rgba(40, 167, 69, 0.2); }
+
+
+         /* Popup Generator Options Styles */
+        .popup-generator-options { border-top: 1px solid var(--popup-border); margin-top: 15px; padding-top: 15px; }
+        .popup-generator-options h4 { margin: 0 0 10px 0; font-size: 0.95em; color: var(--popup-text-secondary); font-weight: 500; }
+        .popup-length-control { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+        .popup-length-control label { margin-bottom: 0; font-size: 0.85em; }
+        .popup-length-control input[type="range"] { flex-grow: 1; margin-bottom: 0; }
+        .popup-length-display { font-weight: 600; font-size: 0.9em; min-width: 20px; text-align: right; color: var(--popup-primary-color); }
+        .popup-char-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
+        .popup-option-group { display: flex; align-items: center; gap: 4px; }
+        .popup-option-group label { margin-bottom: 0; font-weight: normal; font-size: 0.85em; color: var(--popup-text); cursor: pointer;}
+        .popup-option-group input[type="checkbox"] { cursor: pointer; margin-top: 0px; width: 14px; height: 14px; padding: 0; margin-bottom: 0; accent-color: var(--popup-primary-color);}
+
+        /* Popup Strength Display Styles */
+        .popup-strength-area {
+            margin-top: 8px; margin-bottom: 12px; padding: 8px; border-radius: var(--popup-border-radius); background-color: var(--popup-strength-bg-color); border: 1px solid var(--popup-strength-border-color); min-height: 45px; font-size: 0.9em;
+            transition: all var(--popup-transition);
+        }
+        /* Scored Backgrounds (Light Theme) */
+        .popup-strength-area.strength-0 { background-color: #f8d7da; border-color: #f5c6cb;}
+        .popup-strength-area.strength-1 { background-color: #fff3cd; border-color: #ffeeba;}
+        .popup-strength-area.strength-2 { background-color: #d1ecf1; border-color: #bee5eb;}
+        .popup-strength-area.strength-3 { background-color: #d4edda; border-color: #c3e6cb;}
+        .popup-strength-area.strength-4 { background-color: #c8e6c9; border-color: #a5d6a7;}
+        /* Scored Backgrounds (Dark Theme) */
+        body[data-theme="dark"] .popup-strength-area.strength-0 { background-color: #58151c; border-color: #842029;}
+        body[data-theme="dark"] .popup-strength-area.strength-1 { background-color: #664d03; border-color: #997404;}
+        body[data-theme="dark"] .popup-strength-area.strength-2 { background-color: #055160; border-color: #087990;}
+        body[data-theme="dark"] .popup-strength-area.strength-3 { background-color: #0f5132; border-color: #146c43;}
+        body[data-theme="dark"] .popup-strength-area.strength-4 { background-color: #1f6322; border-color: #28832c;}
+
+        .popup-strength-meter-container { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
+        .popup-strength-label { font-weight: 600; font-size: 0.9em; width: 85px; flex-shrink: 0; color: var(--popup-text-secondary); }
+        .popup-strength-bar { height: 8px; background-color: var(--popup-hover-bg); border-radius: 4px; overflow: hidden; flex-grow: 1; transition: background-color var(--popup-transition); }
+        .popup-strength-indicator { height: 100%; width: 0%; transition: width 0.4s ease, background-image 0.4s ease; border-radius: 4px; background-image: linear-gradient(to right, #e74c3c, #dc3545); /* Default gradient */ }
+        /* Strength Colors - Use gradient */
+        .popup-strength-indicator.very-weak { background-image: linear-gradient(to right, #dc3545, #c82333); width: 10%; }
+        .popup-strength-indicator.weak { background-image: linear-gradient(to right, #fd7e14, #e67e22); width: 30%; }
+        .popup-strength-indicator.medium { background-image: linear-gradient(to right, #ffc107, #dda600); width: 55%; }
+        .popup-strength-indicator.strong { background-image: linear-gradient(to right, #20c997, #1aa07f); width: 80%; }
+        .popup-strength-indicator.very-strong { background-image: linear-gradient(to right, #198754, #13653f); width: 100%; }
+
+        #popup-strength-feedback { font-size: 0.85em; color: var(--popup-text-secondary); line-height: 1.3; transition: color var(--popup-transition); }
+        #popup-strength-feedback ul { list-style: none; padding-left: 0; margin: 3px 0 0 0; }
+        #popup-strength-feedback li { margin-bottom: 2px; padding-left: 12px; position: relative; }
+        #popup-strength-feedback li::before { content: ''; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 50%; background-color: currentColor; opacity: 0.7; }
+        /* Light Theme Feedback */
+        #popup-strength-feedback li.warning { color: #856404; font-weight: 500;}
+        #popup-strength-feedback li.suggestion { color: #0c5460; }
+        /* Dark Theme Feedback */
+        body[data-theme="dark"] #popup-strength-feedback li.warning { color: var(--warning-color); }
+        body[data-theme="dark"] #popup-strength-feedback li.suggestion { color: var(--info-color); }
+
+        /* Style for strength in list items */
+        .strength-display-popup {
+             font-size: 0.8em; text-align: right; margin-top: 4px; padding-right: 5px; display: none; /* Hide initially */
+             font-weight: 500;
+             transition: color var(--popup-transition);
+        }
+         .strength-display-popup.score-0 { color: var(--popup-danger-color); }
+         .strength-display-popup.score-1 { color: #fd7e14; }
+         .strength-display-popup.score-2 { color: #ffc107; }
+         .strength-display-popup.score-3 { color: #20c997; }
+         .strength-display-popup.score-4 { color: var(--popup-success-color); }
+
+
+        /* Status/Error Messages */
+        .status-message { padding: 8px 10px; margin: 10px 0 5px 0; border-radius: var(--popup-border-radius); text-align: center; font-size: 0.9em; border: 1px solid transparent; transition: all var(--popup-transition); }
+        .status-error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
+        .status-success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
+        .status-info { background-color: #d1ecf1; color: #0c5460; border-color: #bee5eb;}
+        body[data-theme="dark"] .status-error { background-color: #58151c; color: #f1aeb5; border-color: #842029; }
+        body[data-theme="dark"] .status-success { background-color: #0f5132; color: #75b798; border-color: #146c43; }
+        body[data-theme="dark"] .status-info { background-color: #055160; color: #6edff6; border-color: #087990;}
+
+        .hidden { display: none !important; } /* Use important to ensure override */
+
+        /* Scrollbar styling (optional, webkit only) */
+        ::-webkit-scrollbar { width: 6px; height: 6px; }
+        ::-webkit-scrollbar-track { background: var(--popup-hover-bg); border-radius: 3px; }
+        ::-webkit-scrollbar-thumb { background: var(--popup-secondary-color); border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: var(--popup-secondary-darker); }
+    </style>
+</head>
+<body>
+    <div class="container">
+
+        <!-- Login View -->
+        <div id="login-view">
+             <div class="popup-header">
+                 <h2>Secure Login</h2>
+             </div>
+            <div class="content-area">
+                <div id="login-error" class="status-message status-error hidden"></div>
+                <label for="email">Email:</label>
+                <input type="email" id="email" placeholder="Enter your email" required>
+                <label for="masterPasswordLogin">Master Password:</label>
+                <input type="password" id="masterPasswordLogin" placeholder="Enter Master Password" required>
+                <button id="login-btn" class="btn btn-primary">Login</button> <!-- Applied general button style -->
+            </div>
+        </div>
+
+        <!-- Main Logged-In View -->
+        <div id="main-view" class="hidden">
+             <div class="popup-header">
+                 <h2>Credentials</h2>
+                 <!-- Add Theme Toggle Button -->
+                 <div id="theme-toggle-container">
+                    <button id="popup-theme-toggle" title="Toggle light/dark theme">☀️</button>
+                 </div>
+                 <button id="logout-btn">Logout</button>
+             </div>
+             <div class="content-area">
+                 <!-- Display Current Domain -->
+                 <div class="main-header">
+                    <span id="current-domain" title="Current Tab Domain">Domain: N/A</span>
+                 </div>
+                <input type="search" id="search-input" placeholder="Filter by service name...">
+                <div id="status-indicator" class="status-message status-info hidden"></div>
+                <div class="password-list-container">
+                    <ul id="password-list">
+                        <!-- List items are generated by popup.js -->
+                        <!-- Example Structure (for reference):
+                        <li class="password-item" data-encrypted="..." data-service-hint="...">
+                            <div style="flex-grow: 1; overflow: hidden;">
+                                <div class="item-info">
+                                    <strong>Service Hint</strong>
+                                    <span class="username-display">(Username Hidden)</span>
+                                </div>
+                                <div class="strength-display-popup score-x">Strength: ...</div>
+                                <div class="breach-display-popup">Breach: ...</div> // <-- Add this
+                            </div>
+                            <div class="item-actions">
+                                <button>Show</button>
+                                <button style="display: none;">Copy</button>
+                                <button style="display: none;">Fill</button>
+                            </div>
+                        </li>
+                        -->
+                    </ul>
+                </div>
+                <button id="add-password-btn" class="btn btn-secondary btn-add-toggle">+ Add New Credential</button>
+
+                <!-- Add/Edit Form -->
+                <div id="add-password-form" class="add-form hidden">
+                    <h3>Add New Credential</h3>
+                    <div id="save-error" class="status-message status-error hidden"></div>
+                    <label for="service">Service/Website:</label>
+                    <input type="text" id="service" placeholder="e.g., Google, Example.com" required>
+                    <label for="new-username">Username/Email:</label>
+                    <input type="text" id="new-username" placeholder="Your username or email" required>
+
+                    <div class="label-button-group">
+                         <label for="new-password">Password:</label>
+                         <button type="button" id="generate-popup-password-btn" class="btn btn-outline-secondary">Generate</button>
+                    </div>
+                    <input type="password" id="new-password" placeholder="Enter or generate password" required>
+
+                    <!-- Popup Strength Display -->
+                    <div id="popup-strength-area" class="popup-strength-area" style="display: none;">
+                        <!-- ... strength meter ... -->
+                        <div id="popup-strength-feedback"></div>
+                        <!-- ** NEW: Popup Breach Status ** -->
+                        <div id="popup-breach-status" class="breach-status-area" style="display: none; margin-top: 5px; font-size: 0.85em;">
+                             <span class="breach-label">Breach:</span>
+                             <span id="popup-breach-indicator" class="breach-indicator">Checking...</span>
+                        </div>
+                         <!-- ** END Popup Breach Status ** -->
+                    </div>
+
+                    <!-- Generator Options -->
+                    <div class="popup-generator-options">
+                         <h4>Generator Options</h4>
+                         <div class="popup-length-control"> <label for="popup-gen-length">Length:</label> <input type="range" id="popup-gen-length" name="popup-gen-length" min="8" max="64" value="16"> <span class="popup-length-display" id="popup-gen-length-value">16</span> </div>
+                         <div class="popup-char-options">
+                             <div class="popup-option-group"> <input type="checkbox" id="popup-gen-lowercase" checked> <label for="popup-gen-lowercase">a-z</label> </div>
+                             <div class="popup-option-group"> <input type="checkbox" id="popup-gen-uppercase" checked> <label for="popup-gen-uppercase">A-Z</label> </div>
+                             <div class="popup-option-group"> <input type="checkbox" id="popup-gen-digits" checked> <label for="popup-gen-digits">0-9</label> </div>
+                             <div class="popup-option-group"> <input type="checkbox" id="popup-gen-symbols" checked> <label for="popup-gen-symbols">!@#</label> </div>
+                         </div>
+                     </div>
+
+                    <label for="masterPasswordSave">Confirm Master Password:</label>
+                    <input type="password" id="masterPasswordSave" placeholder="Enter Master Password to save" required>
+                    <div class="form-buttons">
+                        <button id="save-password-btn" class="btn btn-primary">Encrypt & Save</button>
+                        <button type="button" id="cancel-add-btn" class="btn btn-secondary">Cancel</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Include zxcvbn library FIRST -->
+    <script src="zxcvbn.js"></script>
+    <!-- Then other helpers and main popup script -->
+    <script src="crypto-helpers.js"></script>
+    <script src="popup.js"></script>
+</body>
+</html>

extension/popup.js

@@ -0,0 +1,389 @@
+// --- START OF FILE popup.js ---
+
+// --- Global Variables ---
+const API_BASE_URL = 'http://127.0.0.1:5000'; // Adjust if your backend runs elsewhere
+let derivedEncryptionKey = null; // ArrayBuffer | null - Key used for crypto ops after login/unlock
+let userEmail = null; // string | null - Email of the logged-in/remembered user
+let allCredentials = []; // Array to hold fetched credential objects {id, encrypted_data, service_hint}
+let currentDomain = 'N/A'; // Domain of the active browser tab
+
+// --- DOM Elements (Define references early, check existence before use) ---
+const loginView = document.getElementById('login-view');
+const mainView = document.getElementById('main-view');
+const emailInput = document.getElementById('email');
+const masterPasswordLoginInput = document.getElementById('masterPasswordLogin');
+const loginBtn = document.getElementById('login-btn');
+const loginError = document.getElementById('login-error');
+const statusIndicator = document.getElementById('status-indicator');
+const passwordList = document.getElementById('password-list');
+const searchInput = document.getElementById('search-input');
+const addPasswordBtn = document.getElementById('add-password-btn');
+const addPasswordForm = document.getElementById('add-password-form');
+const savePasswordBtn = document.getElementById('save-password-btn');
+const cancelAddBtn = document.getElementById('cancel-add-btn');
+const serviceInput = document.getElementById('service');
+const newUsernameInput = document.getElementById('new-username');
+const newPasswordInput = document.getElementById('new-password'); // Reference needed early
+const masterPasswordSaveInput = document.getElementById('masterPasswordSave');
+const saveError = document.getElementById('save-error');
+const logoutBtn = document.getElementById('logout-btn');
+const currentDomainSpan = document.getElementById('current-domain');
+const generatePopupPasswordBtn = document.getElementById('generate-popup-password-btn');
+const popupThemeToggleBtn = document.getElementById('popup-theme-toggle');
+// Generator Options Elements
+const popupGenLengthSlider = document.getElementById('popup-gen-length');
+const popupGenLengthValueSpan = document.getElementById('popup-gen-length-value');
+const popupGenLowercaseCheckbox = document.getElementById('popup-gen-lowercase');
+const popupGenUppercaseCheckbox = document.getElementById('popup-gen-uppercase');
+const popupGenDigitsCheckbox = document.getElementById('popup-gen-digits');
+const popupGenSymbolsCheckbox = document.getElementById('popup-gen-symbols');
+// Popup Add Form Analysis Elements
+const popupStrengthArea = document.getElementById('popup-strength-area');
+const popupStrengthIndicator = document.getElementById('popup-strength-indicator');
+const popupStrengthTextLabel = document.getElementById('popup-strength-text-label');
+const popupStrengthFeedbackDiv = document.getElementById('popup-strength-feedback');
+const popupBreachStatusArea = document.getElementById('popup-breach-status');
+const popupBreachIndicator = document.getElementById('popup-breach-indicator');
+
+
+// --- Utility & Helper Functions (Defined Outside DOMContentLoaded) ---
+
+// Debounce function specific to popup analysis
+let debounceTimerPopup;
+function debouncePopup(func, delay) {
+    return function(...args) {
+        clearTimeout(debounceTimerPopup);
+        debounceTimerPopup = setTimeout(() => {
+            func.apply(this, args); // Pass 'this' and arguments
+        }, delay);
+    };
+}
+
+// Helper to format zxcvbn feedback for the popup
+function formatZxcvbnFeedbackPopup(result) {
+     if (!result || !result.feedback) return '';
+     let html = '<ul>';
+     if (result.feedback.warning) { html += `<li class="warning">${escapeHtml(result.feedback.warning)}</li>`; }
+     if (result.feedback.suggestions && result.feedback.suggestions.length > 0) { result.feedback.suggestions.forEach(s => { html += `<li class="suggestion">${escapeHtml(s)}</li>`; }); }
+     else if (!result.feedback.warning) { if (result.score < 3) { html += '<li class="suggestion">Add length or variety (caps, nums, symbols).</li>'; } }
+     html += '</ul>';
+     return html;
+ }
+
+// Helper to map zxcvbn score (0-4) to CSS class
+function getStrengthClassFromScore(score) {
+     const classes = ['very-weak', 'weak', 'medium', 'strong', 'very-strong'];
+     const validScore = Math.max(0, Math.min(score ?? 0, 4));
+     return classes[validScore];
+ }
+
+// Helper to compare two ArrayBuffers
+function compareArrayBuffers(buf1, buf2) {
+    if (!buf1 || !buf2 || buf1.byteLength !== buf2.byteLength) return false;
+    const view1 = new Uint8Array(buf1);
+    const view2 = new Uint8Array(buf2);
+    for (let i = 0; i < buf1.byteLength; i++) { if (view1[i] !== view2[i]) return false; }
+    return true;
+}
+
+// --- Theme Handling ---
+function applyPopupTheme() {
+    chrome.storage.local.get(['popupTheme'], (result) => {
+        const theme = result.popupTheme || 'light';
+        document.body.setAttribute('data-theme', theme);
+        if (popupThemeToggleBtn) {
+            popupThemeToggleBtn.textContent = theme === 'dark' ? '☀️' : '🌙';
+            popupThemeToggleBtn.title = `Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`;
+        }
+    });
+}
+function togglePopupTheme() {
+    const currentTheme = document.body.getAttribute('data-theme') || 'light';
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    chrome.storage.local.set({ popupTheme: newTheme }, () => { applyPopupTheme(); });
+}
+
+// --- Communication with Background Script ---
+async function sendMessageToBackground(message) {
+    console.log("[Popup] Sending message to background ->", message.action, message);
+    return new Promise((resolve, reject) => {
+        chrome.runtime.sendMessage(message, (response) => {
+            const lastError = chrome.runtime.lastError;
+            if (lastError) {
+                console.error(`[Popup] Error sending '${message.action}':`, lastError.message);
+                let errorMsg = `Error contacting background: ${lastError.message}. Reload extension?`;
+                if (lastError.message.includes("Receiving end does not exist")) {
+                    errorMsg = "Background service not running. Try reloading the extension.";
+                }
+                reject(new Error(errorMsg));
+            } else {
+                 console.log("[Popup] Received response from background for ->", message.action, response);
+                 if (response && response.success === false && response.error) {
+                     reject(new Error(response.error));
+                 } else {
+                    resolve(response);
+                 }
+            }
+        });
+    });
+}
+
+// --- Authentication Functions ---
+async function checkLoginStatus() { /* ... (code as before) ... */
+    console.log("Popup: Checking login status...");
+    try {
+        const response = await sendMessageToBackground({ action: 'getKey' });
+        if (response && response.success && typeof response.keyB64 === 'string' && response.email) {
+            derivedEncryptionKey = base64ToArrayBuffer(response.keyB64);
+            userEmail = response.email;
+            showMainView(true); updateDomainDisplay();
+        } else {
+             const emailCheckResponse = await sendMessageToBackground({ action: 'getEmail' });
+             if (emailCheckResponse?.success && emailCheckResponse.email) {
+                  userEmail = emailCheckResponse.email;
+                  showLoginView(`Unlock Manager for ${userEmail}`);
+                  if(emailInput) emailInput.value = userEmail;
+                  if(masterPasswordLoginInput) masterPasswordLoginInput.focus();
+             } else {
+                  userEmail = null; derivedEncryptionKey = null; showLoginView(); if(emailInput) emailInput.focus();
+             }
+        }
+    } catch (error) { console.error("Popup: checkLoginStatus failed:", error); showLoginView(error.message || 'Background error.'); userEmail = null; derivedEncryptionKey = null; }
+}
+async function handleLoginAttempt() { /* ... (code as before) ... */
+    const emailToUse = userEmail || (emailInput ? emailInput.value.trim() : '');
+    const masterPassword = masterPasswordLoginInput ? masterPasswordLoginInput.value : '';
+    if (!emailToUse || !masterPassword) { showLoginError("Email and Master Password required."); return; }
+    if (loginBtn) { loginBtn.disabled = true; loginBtn.textContent = userEmail ? 'Unlocking...' : 'Logging in...'; }
+    hideLoginError();
+    let keyBuffer = null;
+    try {
+        keyBuffer = await deriveKeyRawBytes(masterPassword, emailToUse);
+        const keyB64 = arrayBufferToBase64(keyBuffer);
+        await sendMessageToBackground({ action: 'storeKey', keyB64: keyB64, email: emailToUse });
+        derivedEncryptionKey = keyBuffer; userEmail = emailToUse;
+        showMainView(true); updateDomainDisplay();
+    } catch (error) {
+        console.error('Popup: Login/Unlock error:', error); derivedEncryptionKey = null; showLoginError(`Error: ${error.message}`);
+        if(userEmail && !derivedEncryptionKey) { showLoginView(`Unlock Failed: ${userEmail}`); if (emailInput) emailInput.value = userEmail; }
+        else { showLoginView(); if (emailInput) emailInput.value = emailToUse; }
+        if (masterPasswordLoginInput) masterPasswordLoginInput.value = '';
+    } finally { if (loginBtn) { loginBtn.disabled = false; loginBtn.textContent = (userEmail && !derivedEncryptionKey) ? 'Unlock' : 'Login'; } if (masterPasswordLoginInput) masterPasswordLoginInput.value = ''; }
+}
+async function handleLogout() { /* ... (code as before) ... */
+    console.log("Popup: Logging out."); const emailBefore = userEmail;
+    derivedEncryptionKey = null; userEmail = null; allCredentials = [];
+    try { await sendMessageToBackground({ action: 'clearKey' }); } catch (error) { console.error("Popup: Error clearing background key:", error.message); }
+    try { await fetch(`${API_BASE_URL}/logout`, { method: 'GET', credentials: 'include' }); } catch (error) { console.warn("Popup: Backend logout failed:", error); }
+    showLoginView(`Logged out: ${emailBefore || 'session'}.`); if(emailInput) emailInput.value = ''; if(masterPasswordLoginInput) masterPasswordLoginInput.value = '';
+}
+
+// --- UI View Management Functions ---
+function showLoginView(message = null) { /* ... (code as before) ... */
+    if (loginView) loginView.classList.remove('hidden'); if (mainView) mainView.classList.add('hidden');
+    if (message) showLoginError(message); else hideLoginError();
+    if (!userEmail && emailInput) emailInput.focus(); else if (userEmail && masterPasswordLoginInput) masterPasswordLoginInput.focus();
+}
+function showLoginError(message) { if(loginError) { loginError.textContent = message; loginError.classList.remove('hidden'); } }
+function hideLoginError() { if(loginError) { loginError.classList.add('hidden'); loginError.textContent = ''; } }
+function showMainView(fetchData = false) { /* ... (code as before) ... */
+    if (loginView) loginView.classList.add('hidden'); if (mainView) mainView.classList.remove('hidden'); hideAddForm();
+    if (fetchData && derivedEncryptionKey) loadAndDisplayCredentials();
+    else if (!derivedEncryptionKey) { console.error("showMainView: Key missing!"); showLoginView("Error: Key missing. Unlock."); }
+    updateDomainDisplay();
+}
+function updateDomainDisplay() { /* ... (code as before) ... */
+    if (currentDomainSpan) { currentDomainSpan.textContent = `Domain: ${currentDomain}`; currentDomainSpan.title = `Current Tab: ${currentDomain}`; }
+}
+function showAddForm() { /* ... (code as before - CORRECTED CALL) ... */
+    if (addPasswordForm) addPasswordForm.classList.remove('hidden');
+    if (addPasswordBtn) addPasswordBtn.classList.add('hidden');
+    hideSaveError();
+    if (currentDomain !== 'N/A' && serviceInput && !serviceInput.value) { let dN = currentDomain.replace(/^www\./, ''); serviceInput.value = dN.charAt(0).toUpperCase() + dN.slice(1); }
+    if (newPasswordInput) newPasswordInput.value = '';
+    // ***** CORRECTED: Dispatch event instead of calling function directly *****
+    if (newPasswordInput) {
+        newPasswordInput.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    // ***** END CORRECTION *****
+    if (masterPasswordSaveInput) masterPasswordSaveInput.value = '';
+    if(serviceInput) serviceInput.focus();
+}
+function hideAddForm() { /* ... (code as before) ... */
+    if (addPasswordForm) addPasswordForm.classList.add('hidden'); if (addPasswordBtn) addPasswordBtn.classList.remove('hidden');
+    if (serviceInput) serviceInput.value = ''; if (newUsernameInput) newUsernameInput.value = ''; if (newPasswordInput) newPasswordInput.value = ''; if (masterPasswordSaveInput) masterPasswordSaveInput.value = '';
+    hideSaveError();
+    if (popupGenLengthSlider) popupGenLengthSlider.value = 16; if (popupGenLengthValueSpan) popupGenLengthValueSpan.textContent = '16';
+    if (popupGenLowercaseCheckbox) popupGenLowercaseCheckbox.checked = true; if (popupGenUppercaseCheckbox) popupGenUppercaseCheckbox.checked = true;
+    if (popupGenDigitsCheckbox) popupGenDigitsCheckbox.checked = true; if (popupGenSymbolsCheckbox) popupGenSymbolsCheckbox.checked = true;
+    if (popupStrengthArea) popupStrengthArea.style.display = 'none'; if (popupBreachStatusArea) popupBreachStatusArea.style.display = 'none';
+}
+function showSaveError(message) { /* ... (code as before) ... */ if(saveError) { saveError.textContent = message; saveError.classList.remove('hidden'); } }
+function hideSaveError() { /* ... (code as before) ... */ if(saveError) { saveError.textContent = ''; saveError.classList.add('hidden'); } }
+function setPopupStatus(message, isError = false, duration = 0) { /* ... (code as before) ... */
+     if (statusIndicator) { statusIndicator.textContent = message; statusIndicator.className = `status-message ${isError ? 'status-error' : (message.includes("copied") || message.includes("saved") ? 'status-success' : 'status-info')}`; statusIndicator.classList.remove('hidden'); if (duration > 0) { if (window.statusClearTimer) clearTimeout(window.statusClearTimer); window.statusClearTimer = setTimeout(clearPopupStatus, duration); }}
+}
+function clearPopupStatus() { /* ... (code as before) ... */ if(statusIndicator) { statusIndicator.classList.add('hidden'); statusIndicator.textContent = ''; statusIndicator.className = 'status-message status-info'; }}
+
+// --- Credential Handling Functions ---
+async function loadAndDisplayCredentials() { /* ... (code as before) ... */
+    if (!derivedEncryptionKey) { console.error("loadDisplay: Key missing."); setPopupStatus("Key missing.", true); return; }
+    setPopupStatus("Loading...", false); if (passwordList) passwordList.innerHTML = '';
+    try { const resp = await fetch(`${API_BASE_URL}/api/credentials`, { method: 'GET', credentials: 'include' }); if (!resp.ok) { if (resp.status === 401) { await handleLogout(); showLoginView("Session expired."); } else { throw new Error(`Fetch failed (${resp.status})`); } return; } const txt = await resp.text(); try { allCredentials = JSON.parse(txt) || []; clearPopupStatus(); if (allCredentials.length === 0) { if (passwordList) passwordList.innerHTML = `<li style="padding: 10px; text-align: center; color: var(--popup-text-secondary); list-style: none;">None saved.</li>`; } else { filterAndRenderList(); } } catch (jsonErr) { console.error("JSON Err:", jsonErr, "Resp:", txt); throw new Error(`Invalid server response (${resp.status})`); } }
+    catch (error) { setPopupStatus(`Load Error: ${error.message}`, true); console.error('Load cred error:', error); }
+}
+function filterAndRenderList() { /* ... (code as before) ... */
+     if (!passwordList) return; passwordList.innerHTML = ''; const term = searchInput ? searchInput.value.toLowerCase().trim() : ''; let filtered = []; let domainMatches = [];
+     if (currentDomain !== 'N/A' && !term) { const lcDomain = currentDomain.replace(/^www\./, '').toLowerCase(); domainMatches = allCredentials.filter(c => c.service_hint?.toLowerCase().includes(lcDomain)); const others = allCredentials.filter(c => !domainMatches.includes(c)); domainMatches.sort((a, b) => (a.service_hint || '').localeCompare(b.service_hint || '')); others.sort((a, b) => (a.service_hint || '').localeCompare(b.service_hint || '')); filtered = [...domainMatches, ...others]; }
+     else { filtered = allCredentials.filter(c => term ? (c.service_hint?.toLowerCase().includes(term)) : true); filtered.sort((a, b) => (a.service_hint || '').localeCompare(b.service_hint || '')); }
+     if (filtered.length === 0) { const msg = term ? "No match." : (allCredentials.length === 0 ? "None saved." : "No credentials."); passwordList.innerHTML = `<li style="padding: 10px; text-align: center; color: var(--popup-text-secondary); list-style: none;">${msg}</li>`; return; }
+     filtered.forEach(cred => renderCredentialItem(cred, domainMatches.includes(cred)));
+}
+function renderCredentialItem(credential, isDomainMatch = false) { /* ... (code as before) ... */
+     if (!passwordList) return; const li = document.createElement('li'); li.className = 'password-item'; li.dataset.encrypted = credential.encrypted_data; li.dataset.serviceHint = credential.service_hint || '(No Hint)';
+     if (isDomainMatch) { li.style.setProperty('--popup-item-hover', 'rgba(0, 123, 255, 0.1)'); li.style.borderLeft = '3px solid var(--popup-primary-color)'; li.style.paddingLeft = '9px'; }
+     const itemCont = document.createElement('div'); itemCont.style.flexGrow = '1'; itemCont.style.overflow = 'hidden';
+     const infoDiv = document.createElement('div'); infoDiv.className = 'item-info'; infoDiv.innerHTML = `<strong>${escapeHtml(credential.service_hint || '(No Hint)')}</strong><span class="username-display">(Username Hidden)</span>`;
+     const strDiv = document.createElement('div'); strDiv.className = 'strength-display-popup'; strDiv.style.display = 'none';
+     const brchDiv = document.createElement('div'); brchDiv.className = 'breach-display-popup'; brchDiv.style.display = 'none'; brchDiv.style.fontSize = '0.8em'; brchDiv.style.marginTop = '4px'; brchDiv.style.paddingRight = '5px';
+     itemCont.append(infoDiv, strDiv, brchDiv);
+     const actsDiv = document.createElement('div'); actsDiv.className = 'item-actions';
+     const showBtn = document.createElement('button'); showBtn.textContent = 'Show'; showBtn.title = 'Decrypt/show details'; showBtn.onclick = (e) => { e.stopPropagation(); handleShowDetails(li); };
+     const copyBtn = document.createElement('button'); copyBtn.textContent = 'Copy'; copyBtn.title = 'Copy password'; copyBtn.style.display = 'none'; copyBtn.onclick = (e) => { e.stopPropagation(); handleCopyPassword(li); };
+     const fillBtn = document.createElement('button'); fillBtn.textContent = 'Fill'; fillBtn.title = 'Fill on current page'; fillBtn.style.display = 'none'; fillBtn.onclick = (e) => { e.stopPropagation(); handleFillPassword(li); };
+     if (isDomainMatch) { li.title = `Click to fill ${escapeHtml(credential.service_hint || '')}`; li.style.cursor = 'pointer'; li.addEventListener('click', async (e) => { if (e.target === li || infoDiv.contains(e.target)) { if (!derivedEncryptionKey) { alert("Unlock first."); return; } const dec = await decryptData(derivedEncryptionKey, credential.encrypted_data); if (dec?.password) { handleDirectFill(dec.username || '', dec.password); } else { alert("Decrypt failed."); } } }); }
+     actsDiv.append(showBtn, copyBtn, fillBtn); li.append(itemCont, actsDiv); passwordList.appendChild(li);
+}
+async function handleShowDetails(listItem) { /* ... (code as before) ... */
+    if (!derivedEncryptionKey) { alert("Unlock first."); return; }
+    const encData = listItem.dataset.encrypted; const itemCont = listItem.querySelector('div[style*="flex-grow"]'); if (!itemCont) return;
+    const infoD = itemCont.querySelector('.item-info'); const userSpan = infoD?.querySelector('.username-display'); const strDiv = itemCont.querySelector('.strength-display-popup'); const brchDiv = itemCont.querySelector('.breach-display-popup'); const actsDiv = listItem.querySelector('.item-actions');
+    const showBtn = actsDiv?.querySelector('button:nth-child(1)'); const copyBtn = actsDiv?.querySelector('button:nth-child(2)'); const fillBtn = actsDiv?.querySelector('button:nth-child(3)');
+    if (!infoD || !userSpan || !strDiv || !brchDiv || !actsDiv || !showBtn || !copyBtn || !fillBtn) { console.error("Missing list item elements."); return; }
+    const assessmentMap = ["Very Weak", "Weak", "Medium", "Strong", "Very Strong"];
+    if (showBtn.textContent === 'Show') {
+        showBtn.textContent = '...'; showBtn.disabled = true; strDiv.style.display = 'none'; brchDiv.style.display = 'none'; brchDiv.textContent = 'Breach: Checking...'; brchDiv.className = 'breach-display-popup loading';
+        const dec = await decryptData(derivedEncryptionKey, encData); showBtn.disabled = false;
+        if (dec) {
+            const svc = dec.service || '(No Service)'; const user = dec.username || '(No Username)'; const pass = dec.password || '';
+            listItem.dataset.decryptedPassword = pass; listItem.dataset.decryptedUsername = user;
+            infoD.querySelector('strong').textContent = escapeHtml(svc); userSpan.textContent = escapeHtml(user); userSpan.style.color = '';
+            showBtn.textContent = 'Hide'; copyBtn.style.display = 'inline-block'; fillBtn.style.display = 'inline-block';
+            let strScore = -1;
+            if (pass && typeof zxcvbn === 'function') { try { const r = zxcvbn(pass); strScore = r.score; strDiv.textContent = `Strength: ${assessmentMap[strScore]}`; strDiv.className = `strength-display-popup score-${strScore}`; strDiv.style.display = 'block'; } catch(e){ strDiv.textContent = 'Strength: Error'; strDiv.className = 'strength-display-popup score-0'; strDiv.style.display = 'block';} } else { strDiv.style.display = 'none'; }
+            if (pass && typeof checkHIBPPassword === 'function') {
+                 brchDiv.style.display = 'block'; try { const br = await checkHIBPPassword(pass); if (br.error) { brchDiv.textContent = `Breach: Error`; brchDiv.className = 'breach-display-popup error'; brchDiv.title = escapeHtml(br.error); } else if (br.isPwned) { brchDiv.textContent = `Breach: Compromised! (${br.count})`; brchDiv.className = 'breach-display-popup pwned'; brchDiv.title = `Found in ${br.count} breach(es).`; } else { brchDiv.textContent = 'Breach: Not Found'; brchDiv.className = 'breach-display-popup safe'; brchDiv.title = 'Not found.'; } } catch (be) { brchDiv.textContent = `Breach: Error`; brchDiv.className = 'breach-display-popup error'; brchDiv.title = 'Check failed.'; } }
+             else { brchDiv.style.display = 'none'; }
+        } else { userSpan.textContent = '(Decrypt Failed)'; userSpan.style.color = 'var(--popup-danger-color)'; showBtn.textContent = 'Error'; strDiv.style.display = 'none'; brchDiv.style.display = 'none'; copyBtn.style.display = 'none'; fillBtn.style.display = 'none'; delete listItem.dataset.decryptedPassword; delete listItem.dataset.decryptedUsername; }
+    } else { const origHint = listItem.dataset.serviceHint; infoD.querySelector('strong').textContent = escapeHtml(origHint); userSpan.textContent = '(Username Hidden)'; userSpan.style.color = ''; showBtn.textContent = 'Show'; copyBtn.style.display = 'none'; fillBtn.style.display = 'none'; strDiv.style.display = 'none'; brchDiv.style.display = 'none'; delete listItem.dataset.decryptedPassword; delete listItem.dataset.decryptedUsername; }
+}
+async function handleCopyPassword(listItem) { /* ... (code as before) ... */
+     let pass = listItem.dataset.decryptedPassword; if (!pass) { setPopupStatus("Decrypting...", false); await handleShowDetails(listItem); pass = listItem.dataset.decryptedPassword; clearPopupStatus(); if (!pass) { alert("Decrypt failed."); return; } } try { await navigator.clipboard.writeText(pass); setPopupStatus("Password copied!", false, 1500); } catch (err) { setPopupStatus("Copy failed.", true); console.error('Clipboard err:', err); alert("Copy failed."); }
+}
+async function handleFillPassword(listItem) { /* ... (code as before) ... */
+     let pass = listItem.dataset.decryptedPassword; let user = listItem.dataset.decryptedUsername; if (!pass) { setPopupStatus("Decrypting...", false); await handleShowDetails(listItem); pass = listItem.dataset.decryptedPassword; user = listItem.dataset.decryptedUsername; clearPopupStatus(); if (!pass) { alert("Decrypt failed."); return; } } handleDirectFill(user || '', pass);
+}
+async function handleDirectFill(username, password) { /* ... (code as before) ... */
+     setPopupStatus(`Filling ${currentDomain}...`, false); try { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); if (tab?.id) { chrome.tabs.sendMessage(tab.id, { action: 'fillPassword', username: username, password: password }, (resp) => { if (chrome.runtime.lastError) { console.error("Fill Send Error:", chrome.runtime.lastError.message); setPopupStatus("Error sending fill.", true, 3000); } else if (resp?.success) { window.close(); } else { console.warn("Fill failed/not ack."); setPopupStatus("Fill sent.", false, 2000); } }); } else { throw new Error("No active tab."); } } catch (error) { setPopupStatus(`Fill Error: ${error.message}`, true); console.error("Fill error:", error); }
+}
+
+// --- Password Generation ---
+async function handleGeneratePopupPassword() { /* ... (code as before - uses dispatchEvent now) ... */
+     hideSaveError(); if (generatePopupPasswordBtn) { generatePopupPasswordBtn.disabled = true; generatePopupPasswordBtn.textContent = '...'; }
+     const opts = { length: popupGenLengthSlider ? parseInt(popupGenLengthSlider.value, 10) : 16, use_lowercase: popupGenLowercaseCheckbox?.checked ?? true, use_uppercase: popupGenUppercaseCheckbox?.checked ?? true, use_digits: popupGenDigitsCheckbox?.checked ?? true, use_symbols: popupGenSymbolsCheckbox?.checked ?? true };
+     if (!opts.use_lowercase && !opts.use_uppercase && !opts.use_digits && !opts.use_symbols) { showSaveError("Select character type."); if (generatePopupPasswordBtn) { generatePopupPasswordBtn.disabled = false; generatePopupPasswordBtn.textContent = 'Generate'; } return; }
+     try { const resp = await fetch(`${API_BASE_URL}/api/generate_password`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify(opts) }); const res = await resp.json(); if (resp.ok && res.password) { if (newPasswordInput) { newPasswordInput.value = res.password; newPasswordInput.type = 'text'; newPasswordInput.dispatchEvent(new Event('input', { bubbles: true })); setTimeout(() => { if (newPasswordInput?.type === 'text') newPasswordInput.type = 'password'; }, 2000); } } else { throw new Error(res.error || 'API gen failed.'); } } catch (error) { showSaveError(`Generate Error: ${error.message}`); console.error('Generate Err:', error); } finally { if (generatePopupPasswordBtn) { generatePopupPasswordBtn.disabled = false; generatePopupPasswordBtn.textContent = 'Generate'; } }
+}
+
+// --- Save New Password ---
+async function handleSavePassword() { /* ... (code as before) ... */
+    const service = serviceInput ? serviceInput.value.trim() : ''; const username = newUsernameInput ? newUsernameInput.value.trim() : ''; const password = newPasswordInput ? newPasswordInput.value : ''; const masterPassword = masterPasswordSaveInput ? masterPasswordSaveInput.value : '';
+    if (!service || !username || !password || !masterPassword) { showSaveError("All fields & Master PW required."); return; }
+    hideSaveError(); if (savePasswordBtn) { savePasswordBtn.disabled = true; savePasswordBtn.textContent = 'Saving...'; }
+    try { if (!userEmail || !derivedEncryptionKey) throw new Error("Session key missing."); const confirmKey = await deriveKeyRawBytes(masterPassword, userEmail); if (!compareArrayBuffers(confirmKey, derivedEncryptionKey)) throw new Error("Master PW mismatch."); const dataToEnc = { service, username, password }; const encData = await encryptData(derivedEncryptionKey, dataToEnc); const resp = await fetch(`${API_BASE_URL}/api/credentials`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ encrypted_data: encData, service_hint: service }) }); const res = await resp.json(); if (resp.ok && res.success) { setPopupStatus("Saved!", false, 2000); hideAddForm(); await loadAndDisplayCredentials(); } else { throw new Error(res.message || `Save failed (${resp.status})`); } }
+    catch (error) { showSaveError(`Save failed: ${error.message}`); console.error('Save error:', error); }
+    finally { if (savePasswordBtn) { savePasswordBtn.disabled = false; savePasswordBtn.textContent = 'Encrypt & Save'; } if (masterPasswordSaveInput) masterPasswordSaveInput.value = ''; }
+}
+
+// --- Search/Filter ---
+function handleSearchFilter() { /* ... (code as before) ... */
+    if (window.searchDebounceTimer) clearTimeout(window.searchDebounceTimer);
+    window.searchDebounceTimer = setTimeout(filterAndRenderList, 250);
+}
+
+// --- Utility: Get Current Tab Domain ---
+async function getCurrentTabDomain() { /* ... (code as before) ... */
+    try { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); if (tab?.id && tab.url?.startsWith('http')) { currentDomain = await new Promise((resolve) => { let resolved = false; const timer = setTimeout(() => { if (!resolved) { resolved = true; resolve(new URL(tab.url).hostname); } }, 350); chrome.tabs.sendMessage(tab.id, { action: 'getDomain' }, (resp) => { clearTimeout(timer); if (resolved) return; resolved = true; if (chrome.runtime.lastError || !resp?.domain) { resolve(new URL(tab.url).hostname); } else { resolve(resp.domain); } }); }); } else if (tab?.url?.startsWith('http')) { currentDomain = new URL(tab.url).hostname; } else { currentDomain = 'N/A'; } } catch (error) { console.warn("Get domain error:", error); currentDomain = 'Error'; } console.log("Domain:", currentDomain); updateDomainDisplay();
+}
+
+
+// --- DOMContentLoaded Listener (Main Entry Point) ---
+document.addEventListener('DOMContentLoaded', async () => {
+    console.log("Popup: DOMContentLoaded - Initializing...");
+    applyPopupTheme();
+
+    // --- Check Dependencies ---
+    let cryptoHelpersLoaded = typeof arrayBufferToBase64 !== 'undefined' && typeof base64ToArrayBuffer !== 'undefined' && typeof base64UrlDecode !== 'undefined' && typeof deriveKeyRawBytes !== 'undefined' && typeof decryptData !== 'undefined' && typeof encryptData !== 'undefined' && typeof sha1Hash !== 'undefined' && typeof checkHIBPPassword !== 'undefined' && typeof escapeHtml !== 'undefined';
+    let zxcvbnLoaded = typeof zxcvbn !== 'undefined';
+
+    if (!cryptoHelpersLoaded) { console.error("CRITICAL: Crypto helpers missing!"); showLoginView("Error: Missing functions."); return; }
+    if (!zxcvbnLoaded) { console.warn("zxcvbn missing."); if(popupStrengthArea) popupStrengthArea.style.display = 'none'; }
+
+    // --- Define Debounced Analysis Function (INSIDE DOMContentLoaded) ---
+    const debouncePopupAnalysis = debouncePopup(async function() {
+        const password = this.value; // 'this' is the input
+        const assessmentMap = ["Very Weak", "Weak", "Medium", "Strong", "Very Strong"];
+
+        if (!password) {
+            if (popupStrengthArea) popupStrengthArea.style.display = 'none';
+            if (popupBreachStatusArea) popupBreachStatusArea.style.display = 'none';
+            return;
+        }
+        if (popupStrengthArea) popupStrengthArea.style.display = 'block';
+        if (popupBreachStatusArea) popupBreachStatusArea.style.display = 'flex';
+        if (popupStrengthIndicator) popupStrengthIndicator.className = 'popup-strength-indicator';
+        if (popupStrengthTextLabel) popupStrengthTextLabel.textContent = 'Strength: Checking...';
+        if (popupStrengthFeedbackDiv) popupStrengthFeedbackDiv.innerHTML = '';
+        if (popupStrengthArea) popupStrengthArea.className = 'popup-strength-area';
+        if (popupBreachIndicator) { popupBreachIndicator.textContent = 'Checking...'; popupBreachIndicator.className = 'breach-indicator loading'; }
+
+        let strengthResult = null; let breachResultPromise = null;
+        if (zxcvbnLoaded) { try { strengthResult = zxcvbn(password); } catch(e) { console.error(e);}}
+        else { if(popupStrengthArea) popupStrengthArea.style.display = 'none'; }
+        if (cryptoHelpersLoaded) { breachResultPromise = checkHIBPPassword(password).catch(e => ({error: "Check failed"})); }
+        else { if(popupBreachStatusArea) popupBreachStatusArea.style.display = 'none'; breachResultPromise = Promise.resolve({ error: "Checker N/A" }); }
+
+        // Process Strength
+        if (strengthResult && popupStrengthIndicator && popupStrengthTextLabel && popupStrengthFeedbackDiv) {
+            const score = strengthResult.score;
+            popupStrengthIndicator.className = `popup-strength-indicator ${getStrengthClassFromScore(score)}`;
+            popupStrengthTextLabel.textContent = `Strength: ${assessmentMap[score]}`;
+            popupStrengthFeedbackDiv.innerHTML = formatZxcvbnFeedbackPopup(strengthResult);
+            popupStrengthArea.className = `popup-strength-area strength-${score}`;
+        }
+        // Process Breach
+        if (breachResultPromise && popupBreachIndicator) {
+            try { const br = await breachResultPromise; if (br.error) { popupBreachIndicator.textContent = `Error: ${escapeHtml(br.error)}`; popupBreachIndicator.className = 'breach-indicator error'; } else if (br.isPwned) { popupBreachIndicator.textContent = `Compromised! (${br.count})`; popupBreachIndicator.className = 'breach-indicator pwned'; } else { popupBreachIndicator.textContent = 'Not in breaches.'; popupBreachIndicator.className = 'breach-indicator safe'; } }
+            catch (error) { popupBreachIndicator.textContent = 'Error checking.'; popupBreachIndicator.className = 'breach-indicator error'; }
+        }
+    }, 600); // Debounce time
+
+    // --- Attach Event Listeners (INSIDE DOMContentLoaded) ---
+    if (loginBtn) loginBtn.addEventListener('click', handleLoginAttempt);
+    if (logoutBtn) logoutBtn.addEventListener('click', handleLogout);
+    if (addPasswordBtn) addPasswordBtn.addEventListener('click', showAddForm);
+    if (cancelAddBtn) cancelAddBtn.addEventListener('click', hideAddForm);
+    if (savePasswordBtn) savePasswordBtn.addEventListener('click', handleSavePassword);
+    if (searchInput) searchInput.addEventListener('input', handleSearchFilter);
+    if (generatePopupPasswordBtn) generatePopupPasswordBtn.addEventListener('click', handleGeneratePopupPassword);
+    if (popupGenLengthSlider && popupGenLengthValueSpan) { popupGenLengthSlider.addEventListener('input', () => { popupGenLengthValueSpan.textContent = popupGenLengthSlider.value; }); }
+    if (newPasswordInput) { newPasswordInput.addEventListener('input', debouncePopupAnalysis); } // Attach listener here
+    if (popupThemeToggleBtn) popupThemeToggleBtn.addEventListener('click', togglePopupTheme);
+
+    // --- Initial Actions ---
+    await getCurrentTabDomain();
+    await checkLoginStatus();
+
+}); // --- END OF DOMContentLoaded ---
+
+// --- END OF FILE popup.js ---

static/css/style.css

@@ -0,0 +1,870 @@
+/* --- START OF FILE static/style.css --- */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+    --primary-color: #007bff;
+    --primary-color-darker: #0056b3;
+    --primary-gradient: linear-gradient(135deg, #007bff, #0056b3);
+    --secondary-color: #6c757d;
+    --secondary-color-darker: #5a6268;
+    --success-color: #28a745;
+    --success-color-darker: #1e7e34;
+    --danger-color: #dc3545;
+    --danger-color-darker: #c82333;
+    --info-color: #17a2b8;
+    --warning-color: #ffc107;
+    --warning-text-color: #333; /* Darker text for yellow background */
+
+    --light-bg: #f8f9fa;
+    --light-card-bg: #ffffff;
+    --light-text: #212529;
+    --light-text-secondary: #6c757d;
+    --light-border: #dee2e6;
+    --light-input-bg: #ffffff;
+    --light-input-border: #ced4da;
+    --light-focus-shadow: rgba(0, 123, 255, 0.25);
+    --light-hover-bg: #e9ecef;
+    --light-active-bg: #cfe2ff; /* Active nav background */
+    --light-strength-bg: #f8f9fa; /* Default strength area bg */
+    --light-strength-border: #e9ecef;
+
+    --dark-bg: #1a1a1a; /* Darker background */
+    --dark-card-bg: #2c2c2c; /* Slightly lighter dark for cards */
+    --dark-text: #f8f9fa;
+    --dark-text-secondary: #adb5bd;
+    --dark-border: #495057;
+    --dark-input-bg: #343a40;
+    --dark-input-border: #495057;
+    --dark-focus-shadow: rgba(13, 110, 253, 0.35); /* Brighter shadow */
+    --dark-hover-bg: #343a40;
+    --dark-active-bg: #003c80; /* Darker active nav background */
+    --dark-strength-bg: #343a40; /* Dark strength area bg */
+    --dark-strength-border: #495057;
+
+
+    /* Default to light theme */
+    --bg-color: var(--light-bg);
+    --card-bg-color: var(--light-card-bg);
+    --text-color: var(--light-text);
+    --text-secondary-color: var(--light-text-secondary);
+    --border-color: var(--light-border);
+    --input-bg-color: var(--light-input-bg);
+    --input-border-color: var(--light-input-border);
+    --focus-shadow-color: var(--light-focus-shadow);
+    --hover-bg-color: var(--light-hover-bg);
+    --active-bg-color: var(--light-active-bg);
+    --strength-bg-color: var(--light-strength-bg);
+    --strength-border-color: var(--light-strength-border);
+    --nav-bg-color: var(--light-card-bg);
+
+    --border-radius: 6px;
+    --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+    --transition-speed: 0.25s;
+    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+/* Apply dark theme variables when data-theme is 'dark' */
+body[data-theme="dark"] {
+    --bg-color: var(--dark-bg);
+    --card-bg-color: var(--dark-card-bg);
+    --text-color: var(--dark-text);
+    --text-secondary-color: var(--dark-text-secondary);
+    --border-color: var(--dark-border);
+    --input-bg-color: var(--dark-input-bg);
+    --input-border-color: var(--dark-input-border);
+    --focus-shadow-color: var(--dark-focus-shadow);
+    --hover-bg-color: var(--dark-hover-bg);
+    --active-bg-color: var(--dark-active-bg);
+    --strength-bg-color: var(--dark-strength-bg);
+    --strength-border-color: var(--dark-strength-border);
+    --nav-bg-color: var(--dark-card-bg);
+
+    /* Adjust specific component colors for dark mode */
+    --warning-bg: #332a00; /* Darker warning bg */
+    --warning-border: #665100;
+    --warning-text: #ffeeba; /* Lighter text for dark warning */
+}
+
+/* Basic Reset & Global Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: var(--font-family);
+    line-height: 1.6;
+    color: var(--text-color);
+    background-color: var(--bg-color);
+    padding-bottom: 80px; /* Footer space */
+    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
+}
+
+.container {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 25px;
+}
+
+/* Header & Navigation */
+header {
+    margin-bottom: 40px;
+    position: relative; /* For positioning toggle */
+}
+
+h1 {
+    color: var(--text-color);
+    margin-bottom: 25px;
+    text-align: center;
+    font-weight: 600;
+}
+
+.llm-badge {
+    display: inline-block;
+    background-color: var(--info-color);
+    color: white;
+    padding: 3px 8px;
+    border-radius: var(--border-radius);
+    font-size: 12px;
+    font-weight: 500;
+    margin-left: 10px;
+    vertical-align: middle;
+}
+
+nav ul {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+    background-color: var(--nav-bg-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    overflow: hidden;
+    padding: 0;
+    transition: background-color var(--transition-speed) ease;
+}
+
+nav li {
+    flex: 1;
+    text-align: center;
+}
+
+nav a {
+    display: block;
+    padding: 16px 0;
+    color: var(--text-secondary-color);
+    text-decoration: none;
+    transition: all var(--transition-speed) ease;
+    font-weight: 500;
+    border-bottom: 3px solid transparent;
+    position: relative;
+    overflow: hidden;
+}
+nav a::before { /* Add subtle hover effect */
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 3px;
+    background-color: var(--primary-color);
+    transition: all var(--transition-speed) ease-out;
+    transform: translateX(-50%);
+}
+
+nav a:hover {
+    background-color: var(--hover-bg-color);
+    color: var(--text-color);
+}
+nav a:hover::before {
+    width: 60%; /* Animate underline on hover */
+}
+
+nav a.active {
+    background-color: var(--active-bg-color);
+    color: var(--primary-color-darker);
+    border-bottom-color: var(--primary-color);
+    font-weight: 600;
+}
+body[data-theme="dark"] nav a.active {
+    color: var(--light-bg); /* Make active text lighter in dark mode */
+}
+nav a.active::before {
+     width: 100%; /* Full underline for active */
+}
+
+
+/* Logout & Theme Toggle */
+.header-controls {
+    position: absolute;
+    top: -10px; /* Adjust as needed */
+    right: 0;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+.logout-link {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color var(--transition-speed) ease;
+    font-size: 0.9em;
+}
+.logout-link:hover {
+    color: var(--primary-color-darker);
+    text-decoration: underline;
+}
+#theme-toggle {
+    background: none;
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary-color);
+    padding: 5px 8px;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    font-size: 1.1em; /* Slightly larger icon */
+    line-height: 1;
+    transition: all var(--transition-speed) ease;
+}
+#theme-toggle:hover {
+    background-color: var(--hover-bg-color);
+    border-color: var(--text-secondary-color);
+    color: var(--text-color);
+}
+
+/* Card Styles */
+.card {
+    background-color: var(--card-bg-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    padding: 35px;
+    margin-bottom: 35px;
+    border: 1px solid var(--border-color);
+    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
+}
+
+h2, h3 {
+    color: var(--text-color);
+    margin-bottom: 25px;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 12px;
+    font-weight: 600;
+    transition: color var(--transition-speed) ease, border-color var(--transition-speed) ease;
+}
+h3 {
+    margin-top: 30px;
+    font-size: 1.35em;
+}
+p {
+    color: var(--text-secondary-color);
+    margin-bottom: 20px;
+    transition: color var(--transition-speed) ease;
+}
+
+/* Form Styles */
+.form-group {
+    margin-bottom: 28px;
+    position: relative;
+}
+
+label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: var(--text-secondary-color);
+    font-size: 0.95em;
+    transition: color var(--transition-speed) ease;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="number"],
+.search-bar input /* Apply to search too */ {
+    width: 100%;
+    padding: 12px 15px;
+    border: 1px solid var(--input-border-color);
+    border-radius: var(--border-radius);
+    font-size: 1rem;
+    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-color var(--transition-speed) ease, color var(--transition-speed) ease;
+    box-sizing: border-box;
+    background-color: var(--input-bg-color);
+    color: var(--text-color);
+}
+
+input[type="range"] {
+    width: 100%;
+    cursor: pointer;
+    accent-color: var(--primary-color); /* Modern way to color range slider */
+}
+
+input:focus {
+    border-color: var(--primary-color);
+    outline: none;
+    box-shadow: 0 0 0 3px var(--focus-shadow-color);
+}
+
+/* Button Styles */
+.btn {
+    border: none;
+    border-radius: var(--border-radius);
+    padding: 12px 25px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all var(--transition-speed) ease;
+    font-weight: 500;
+    background-image: var(--primary-gradient);
+    color: white;
+    background-size: 200% auto; /* For gradient animation */
+    text-align: center;
+    display: inline-block; /* Ensure it behaves well */
+}
+
+.btn:hover {
+    background-position: right center; /* Change gradient direction on hover */
+    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
+    transform: translateY(-1px);
+}
+
+.btn:active {
+     transform: translateY(0px);
+     box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
+}
+
+.btn:disabled {
+    background-image: none;
+    background-color: var(--secondary-color);
+    opacity: 0.65;
+    cursor: not-allowed;
+    box-shadow: none;
+    transform: none;
+}
+
+.btn-secondary {
+    background-image: linear-gradient(135deg, var(--secondary-color), var(--secondary-color-darker));
+}
+.btn-secondary:hover {
+     box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
+}
+.btn-secondary:active {
+    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
+}
+
+.btn-outline-secondary {
+    background-color: transparent;
+    background-image: none;
+    border: 1px solid var(--secondary-color);
+    color: var(--secondary-color);
+}
+.btn-outline-secondary:hover {
+    background-color: var(--secondary-color);
+    color: white;
+    background-image: none; /* Ensure no gradient */
+    box-shadow: none;
+    transform: none;
+}
+
+.btn-sm {
+    padding: 0.3rem 0.6rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    border-radius: 0.2rem;
+}
+
+.password-input-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    position: relative; /* For absolute positioning of toggle */
+}
+.password-input-group input[type="password"],
+.password-input-group input[type="text"] { /* Handle toggled state */
+    flex-grow: 1;
+    padding-right: 100px; /* Space for both buttons */
+}
+
+.password-input-group .toggle-button {
+    position: absolute;
+    right: 100px; /* Adjust based on generate button width */
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: var(--primary-color);
+    cursor: pointer;
+    font-size: 14px;
+    padding: 5px;
+    transition: color var(--transition-speed) ease;
+}
+.password-input-group .toggle-button:hover {
+    color: var(--primary-color-darker);
+}
+
+.password-input-group .generate-button {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    flex-shrink: 0;
+}
+
+/* Generator Options */
+.generator-options {
+    border: 1px dashed var(--border-color);
+    padding: 20px 25px;
+    margin-top: -10px;
+    margin-bottom: 25px;
+    border-radius: var(--border-radius);
+    background-color: rgba(0,0,0,0.02); /* Subtle background */
+    transition: border-color var(--transition-speed) ease, background-color var(--transition-speed) ease;
+}
+body[data-theme="dark"] .generator-options {
+    background-color: rgba(255,255,255,0.03);
+}
+.generator-options h4 {
+    margin-top: 0;
+    margin-bottom: 18px;
+    font-size: 1.05em;
+    color: var(--text-secondary-color);
+    font-weight: 600;
+    border-bottom: none; /* Remove border */
+    padding-bottom: 0;
+}
+.length-control {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 18px;
+}
+.length-control label {
+    margin-bottom: 0;
+    flex-basis: 60px; /* Shorter label */
+    flex-shrink: 0;
+    font-size: 0.9em;
+}
+.length-control input[type="range"] {
+    flex-grow: 1;
+}
+.length-control .length-display {
+    font-weight: 600;
+    min-width: 30px;
+    text-align: right;
+    color: var(--primary-color);
+}
+.char-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px 25px; /* Row and column gap */
+}
+.option-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.option-group label {
+    margin-bottom: 0;
+    font-weight: normal;
+    color: var(--text-color);
+    cursor: pointer;
+    font-size: 0.9em;
+    transition: color var(--transition-speed) ease;
+}
+.option-group input[type="checkbox"] {
+    cursor: pointer;
+    accent-color: var(--primary-color);
+    width: 16px;
+    height: 16px;
+}
+
+/* Password Strength Display */
+.password-strength-area {
+    margin-top: 10px;
+    margin-bottom: 25px; /* Add space before next element */
+    padding: 15px;
+    border-radius: var(--border-radius);
+    background-color: var(--strength-bg-color);
+    border: 1px solid var(--strength-border-color);
+    min-height: 65px; /* Ensure space */
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+/* Scored Backgrounds (Light Theme) */
+.password-strength-area.strength-0 { background-color: #f8d7da; border-color: #f5c6cb;} /* Very Weak */
+.password-strength-area.strength-1 { background-color: #fff3cd; border-color: #ffeeba;} /* Weak */
+.password-strength-area.strength-2 { background-color: #d1ecf1; border-color: #bee5eb;} /* Medium */
+.password-strength-area.strength-3 { background-color: #d4edda; border-color: #c3e6cb;} /* Strong */
+.password-strength-area.strength-4 { background-color: #c8e6c9; border-color: #a5d6a7;} /* Very Strong */
+/* Scored Backgrounds (Dark Theme) */
+body[data-theme="dark"] .password-strength-area.strength-0 { background-color: #58151c; border-color: #842029;}
+body[data-theme="dark"] .password-strength-area.strength-1 { background-color: #664d03; border-color: #997404;}
+body[data-theme="dark"] .password-strength-area.strength-2 { background-color: #055160; border-color: #087990;}
+body[data-theme="dark"] .password-strength-area.strength-3 { background-color: #0f5132; border-color: #146c43;}
+body[data-theme="dark"] .password-strength-area.strength-4 { background-color: #1f6322; border-color: #28832c;}
+
+
+.strength-meter-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 10px;
+}
+.strength-label {
+    font-weight: 600;
+    font-size: 0.95em;
+    width: 110px; /* Fixed width */
+    flex-shrink: 0;
+    color: var(--text-secondary-color);
+}
+.strength-bar {
+    height: 10px;
+    background-color: var(--hover-bg-color);
+    border-radius: 5px;
+    overflow: hidden;
+    flex-grow: 1;
+    transition: background-color var(--transition-speed) ease;
+}
+.strength-indicator {
+    height: 100%;
+    width: 0%;
+    transition: width 0.4s ease, background-color 0.4s ease;
+    border-radius: 5px;
+    background-image: linear-gradient(to right, #e74c3c, #dc3545); /* Default gradient */
+}
+/* Strength Colors - Use gradient for smoother look */
+.strength-indicator.very-weak { background-image: linear-gradient(to right, #e74c3c, #dc3545); width: 10%; } /* Score 0 */
+.strength-indicator.weak { background-image: linear-gradient(to right, #fd7e14, #f39c12); width: 30%; }      /* Score 1 */
+.strength-indicator.medium { background-image: linear-gradient(to right, #ffc107, #f1c40f); width: 55%; }    /* Score 2 */
+.strength-indicator.strong { background-image: linear-gradient(to right, #20c997, #28a745); width: 80%; }    /* Score 3 */
+.strength-indicator.very-strong { background-image: linear-gradient(to right, #198754, #146c43); width: 100%; } /* Score 4 */
+
+#password-strength-feedback {
+    font-size: 0.9em;
+    color: var(--text-secondary-color);
+    line-height: 1.5;
+    transition: color var(--transition-speed) ease;
+}
+#password-strength-feedback ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 5px 0 0 0;
+}
+#password-strength-feedback li {
+    margin-bottom: 4px;
+    padding-left: 15px;
+    position: relative;
+}
+#password-strength-feedback li::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 7px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: currentColor; /* Use text color */
+    opacity: 0.6;
+}
+/* Adjust colors based on theme */
+body[data-theme="light"] #password-strength-feedback li.warning { color: #856404; font-weight: 500;}
+body[data-theme="light"] #password-strength-feedback li.suggestion { color: #0c5460; }
+body[data-theme="dark"] #password-strength-feedback li.warning { color: var(--warning-color); font-weight: 500;}
+body[data-theme="dark"] #password-strength-feedback li.suggestion { color: var(--info-color); }
+
+
+/* Messages (Flash messages, API responses) */
+.message, .alert {
+    padding: 15px 20px;
+    border-radius: var(--border-radius);
+    margin-top: 20px;
+    font-size: 0.95rem;
+    text-align: center;
+    display: none; /* Hidden by default, shown by JS/Flask */
+    border: 1px solid transparent;
+    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease;
+}
+.message.success, .alert-success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; display: block; }
+.message.error, .alert-danger { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; display: block; }
+.alert-warning { background-color: #fff3cd; color: var(--warning-text-color); border-color: #ffeeba; display: block; }
+.alert-info { background-color: #d1ecf1; color: #0c5460; border-color: #bee5eb; display: block; }
+
+body[data-theme="dark"] .message.success,
+body[data-theme="dark"] .alert-success { background-color: #0f5132; color: #75b798; border-color: #146c43; }
+body[data-theme="dark"] .message.error,
+body[data-theme="dark"] .alert-danger { background-color: #58151c; color: #f1aeb5; border-color: #842029; }
+body[data-theme="dark"] .alert-warning { background-color: #664d03; color: #ffda6a; border-color: #997404; }
+body[data-theme="dark"] .alert-info { background-color: #055160; color: #6edff6; border-color: #087990; }
+
+
+/* Footer */
+footer {
+    text-align: center;
+    padding: 25px 0;
+    margin-top: 40px;
+    color: var(--text-secondary-color);
+    font-size: 14px;
+    border-top: 1px solid var(--border-color);
+    transition: color var(--transition-speed) ease, border-color var(--transition-speed) ease;
+}
+
+/* Loading Spinner (Enhanced) */
+.loading-indicator { display: none; text-align: center; margin: 30px 0; }
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid rgba(0, 123, 255, 0.2); /* Lighter border */
+    border-left-color: var(--primary-color);
+    border-radius: 50%;
+    display: inline-block;
+    animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+.loading-indicator p { margin-top: 15px; color: var(--text-secondary-color); font-style: italic; transition: color var(--transition-speed) ease;}
+.status-message { text-align: center; padding: 15px; color: var(--text-secondary-color); font-style: italic; transition: color var(--transition-speed) ease;}
+
+/* Table Styles (Storage & Analyse) */
+.table-container,
+.analysis-table-container /* Generic container for analysis table */ {
+    overflow-x: auto;
+    margin-top: 20px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    transition: border-color var(--transition-speed) ease;
+}
+table, .analysis-table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+th, td {
+    padding: 14px 16px;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+    vertical-align: middle;
+    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease;
+    word-wrap: break-word;
+}
+th {
+    background-color: var(--hover-bg-color);
+    font-weight: 600;
+    color: var(--text-color);
+    white-space: nowrap;
+}
+tr:last-child td {
+    border-bottom: none;
+}
+tr:hover td {
+    background-color: var(--hover-bg-color);
+}
+
+/* Specific Table Cell Styles */
+.password-cell span { display: inline-block; min-width: 80px; word-break: break-all; font-family: monospace; }
+.password-hidden { letter-spacing: 2px; color: var(--text-secondary-color); }
+.password-cell .toggle-button {
+    background: none; border: none; color: var(--primary-color); cursor: pointer; font-size: 0.9em; margin-left: 10px; padding: 2px 5px; vertical-align: middle;
+    transition: color var(--transition-speed) ease;
+}
+.password-cell .toggle-button:hover { text-decoration: underline; color: var(--primary-color-darker); }
+.password-cell .toggle-button:disabled { color: var(--secondary-color); cursor: default; text-decoration: none; opacity: 0.6; }
+
+/* Analyse Page Specifics */
+.analysis-table th:nth-child(1) { width: 20%; } /* Service */
+.analysis-table th:nth-child(2) { width: 20%; } /* Username */
+.analysis-table th:nth-child(3) { width: 15%; } /* Strength Bar */
+.analysis-table th:nth-child(4) { width: 15%; } /* Assessment */
+.analysis-table th:nth-child(5) { width: 30%; } /* Feedback */
+
+.strength-bar-table { /* Style for strength bar within table */
+    height: 10px; background-color: var(--hover-bg-color); border-radius: 5px; overflow: hidden; margin: 5px 0; display: inline-block; width: 100%; position: relative;
+}
+.strength-indicator-table { /* Style for indicator within table */
+    height: 100%; width: 0%; transition: width 0.5s ease, background-color 0.5s ease; border-radius: 5px; background-image: linear-gradient(to right, #e74c3c, #dc3545); /* Default */
+}
+/* Apply strength classes directly to the indicator div */
+.strength-indicator-table.very-weak { background-image: linear-gradient(to right, #e74c3c, #dc3545); width: 20%; }
+.strength-indicator-table.weak { background-image: linear-gradient(to right, #e67e22, #f39c12); width: 40%; }
+.strength-indicator-table.medium { background-image: linear-gradient(to right, #f1c40f, #e6b800); width: 60%; }
+.strength-indicator-table.strong { background-image: linear-gradient(to right, #2ecc71, #28a745); width: 80%; }
+.strength-indicator-table.very-strong { background-image: linear-gradient(to right, #27ae60, #1e7e34); width: 100%; }
+
+.feedback-section { margin-top: 5px; }
+.feedback-item {
+    margin-bottom: 6px; padding: 6px 10px; border-radius: var(--border-radius); font-size: 0.9rem; border-left: 3px solid; line-height: 1.4;
+    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease;
+}
+/* Light Theme Feedback Items */
+.feedback-item.issue { background-color: #fff0f0; border-left-color: #e74c3c; color: #721c24; }
+.feedback-item.tip { background-color: #f0f8ff; border-left-color: #3498db; color: #0c5460; }
+/* Dark Theme Feedback Items */
+body[data-theme="dark"] .feedback-item.issue { background-color: #4a1e23; border-left-color: #dc3545; color: #f1aeb5; }
+body[data-theme="dark"] .feedback-item.tip { background-color: #0e3842; border-left-color: #3498db; color: #9eeaf9; }
+
+
+/* Login/Register Specific Styles */
+.auth-container {
+    max-width: 420px; margin: 50px auto; padding: 40px; background-color: var(--card-bg-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); border: 1px solid var(--border-color);
+    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
+}
+.auth-container h2 { text-align: center; color: var(--text-color); margin-bottom: 30px; font-weight: 600; border-bottom: none; padding-bottom: 0; }
+.auth-container .form-group { margin-bottom: 22px; }
+.auth-container label { display: block; margin-bottom: 7px; font-weight: 500; color: var(--text-secondary-color); font-size: 0.9em; }
+.auth-container input[type="email"], .auth-container input[type="password"] {
+    width: 100%; padding: 12px; border: 1px solid var(--input-border-color); border-radius: var(--border-radius); box-sizing: border-box; font-size: 1rem; background-color: var(--input-bg-color); color: var(--text-color);
+    transition: all var(--transition-speed) ease;
+}
+.auth-container input:focus { border-color: var(--primary-color); outline: 0; box-shadow: 0 0 0 3px var(--focus-shadow-color); }
+.auth-container .btn { display: block; width: 100%; padding: 12px 15px; font-size: 1rem; font-weight: 500; margin-top: 10px; }
+.auth-container .btn-register { background-image: linear-gradient(135deg, var(--success-color), var(--success-color-darker)); }
+.auth-container .btn-register:hover { box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3); }
+.auth-container .btn-register:active { box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2); }
+.text-center { text-align: center; }
+.mt-3 { margin-top: 1.5rem !important; }
+.link { color: var(--primary-color); text-decoration: none; transition: color var(--transition-speed) ease; }
+.link:hover { text-decoration: underline; color: var(--primary-color-darker); }
+.password-rules { font-size: 0.85rem; color: var(--text-secondary-color); margin-top: -10px; margin-bottom: 15px; transition: color var(--transition-speed) ease; }
+/* Remember Me Checkbox */
+.form-group.remember-me { display: flex; align-items: center; gap: 8px; margin-bottom: 25px; }
+.form-group.remember-me label { margin-bottom: 0; font-weight: normal; color: var(--text-secondary-color); cursor: pointer; transition: color var(--transition-speed) ease;}
+.form-group.remember-me input[type="checkbox"] { width: auto; margin-top: 0px; cursor: pointer; accent-color: var(--primary-color); }
+
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+    .container { padding: 15px; }
+    header { margin-bottom: 25px; }
+    .header-controls { top: 5px; right: 5px; gap: 10px;}
+    nav ul { flex-direction: column; border-radius: var(--border-radius); }
+    nav a { border-bottom: 1px solid var(--border-color); padding: 14px 0; }
+    nav a:hover::before { width: 0; } /* Disable underline animation on mobile */
+    nav a.active { border-bottom-color: var(--primary-color); }
+    .logout-link { font-size: 0.85em; }
+    #theme-toggle { padding: 4px 6px; font-size: 1em; }
+
+    .card { padding: 25px; margin-bottom: 25px; }
+    h2, h3 { margin-bottom: 20px; padding-bottom: 10px; font-size: 1.4em;}
+    h3 { margin-top: 25px; font-size: 1.2em;}
+
+    .password-input-group input[type="password"],
+    .password-input-group input[type="text"] { padding-right: 85px; } /* Less space needed on mobile */
+    .password-input-group .toggle-button { right: 85px; /* Adjust generate button pos */ }
+    .password-input-group .generate-button { right: 5px; }
+
+    .length-control { flex-wrap: wrap; }
+    .length-control label { flex-basis: auto; width: 100%; margin-bottom: 5px; }
+    .char-options { gap: 10px 15px; }
+
+    .analysis-table { display: block; overflow-x: auto; white-space: nowrap; }
+    .analysis-table th, .analysis-table td { white-space: normal; font-size: 0.9em; } /* Allow wrapping */
+    .analysis-table th:nth-child(n), .analysis-table td:nth-child(n) { width: auto; } /* Reset fixed widths */
+    .analysis-table td:last-child { min-width: 180px; } /* Give feedback some space */
+
+    .auth-container { margin: 20px auto; padding: 30px; }
+}
+
+@media (max-width: 480px) {
+    .header-controls { position: static; justify-content: space-between; margin-top: 15px; }
+    .container { padding: 10px; }
+    .card { padding: 20px; }
+    .btn { padding: 10px 20px; font-size: 0.95rem;}
+    .password-input-group input[type="password"],
+    .password-input-group input[type="text"] { padding: 10px 12px; padding-right: 75px; font-size: 0.95rem;}
+    .password-input-group .generate-button { padding: 0.2rem 0.4rem; font-size: 0.8rem; }
+    .password-input-group .toggle-button { right: 70px; font-size: 13px;}
+    .generator-options { padding: 15px 20px; }
+    .char-options { grid-template-columns: 1fr; gap: 8px; } /* Stack checkboxes */
+    .table-container, .analysis-table-container { margin-top: 15px; }
+    th, td { padding: 10px 12px; font-size: 0.85em; }
+    .auth-container { padding: 25px; }
+}
+/* --- Add to static/style.css --- */
+
+/* Breach Status Area (General) */
+.breach-status-area {
+    display: flex; /* Use flex for alignment */
+    align-items: center;
+    gap: 8px;
+    font-size: 0.9em; /* Slightly smaller font */
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px dashed var(--strength-border-color); /* Separator line */
+}
+.breach-label {
+    font-weight: 600;
+    color: var(--text-secondary-color);
+    flex-shrink: 0; /* Prevent label from shrinking */
+}
+.breach-indicator {
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+/* Breach Indicator States */
+.breach-indicator.loading {
+    color: var(--text-secondary-color);
+    font-style: italic;
+}
+.breach-indicator.safe {
+    color: var(--success-color); /* Green for safe */
+}
+body[data-theme="dark"] .breach-indicator.safe {
+    color: #75b798; /* Lighter green for dark mode */
+}
+.breach-indicator.pwned {
+    color: var(--danger-color); /* Red for pwned */
+    font-weight: 700; /* Make it bold */
+}
+body[data-theme="dark"] .breach-indicator.pwned {
+    color: #f1aeb5; /* Lighter red for dark mode */
+}
+.breach-indicator.error {
+    color: var(--warning-color); /* Orange/yellow for error */
+    font-style: italic;
+}
+body[data-theme="dark"] .breach-indicator.error {
+    color: #ffda6a; /* Lighter warning color */
+}
+
+
+/* Popup Specific Breach Styles */
+#popup-breach-status {
+    margin-top: 5px;
+    padding-top: 5px;
+    font-size: 0.85em; /* Even smaller in popup */
+    border-top-style: dotted; /* Dotted line in popup */
+}
+#popup-breach-status .breach-label {
+    width: 50px; /* Fixed width for label in popup */
+}
+
+/* Breach Status in List Items (Popup) */
+.breach-display-popup {
+    font-size: 0.8em;
+    text-align: right;
+    margin-top: 4px;
+    padding-right: 5px;
+    font-weight: 500;
+    transition: color var(--popup-transition);
+}
+.breach-display-popup.loading { color: var(--popup-text-secondary); font-style: italic;}
+.breach-display-popup.safe { color: var(--popup-success-color); }
+.breach-display-popup.pwned { color: var(--popup-danger-color); font-weight: 700;}
+.breach-display-popup.error { color: #fd7e14; /* Orange for error in popup list */ font-style: italic;} /* Use a distinct error color */
+body[data-theme="dark"] .breach-display-popup.safe { color: #75b798; }
+body[data-theme="dark"] .breach-display-popup.pwned { color: #f1aeb5; }
+body[data-theme="dark"] .breach-display-popup.error { color: #ffac4d; }
+
+
+/* Analyse Page Table Breach Cell */
+.analysis-table th:last-child { width: 15%; } /* Adjust width for new column */
+.analysis-table td.breach-cell {
+    font-weight: 500;
+    text-align: center;
+}
+.analysis-table td.breach-safe span { color: var(--success-color); }
+.analysis-table td.breach-pwned span { color: var(--danger-color); font-weight: 700; }
+.analysis-table td.breach-error span { color: #856404; font-style: italic; } /* Muted warning color for table */
+
+body[data-theme="dark"] .analysis-table td.breach-safe span { color: #75b798; }
+body[data-theme="dark"] .analysis-table td.breach-pwned span { color: #f1aeb5; }
+body[data-theme="dark"] .analysis-table td.breach-error span { color: #ffda6a; }
+
+/* --- End of style.css additions --- */

static/js/crypto-helpers.js

@@ -0,0 +1,230 @@
+// --- crypto-helpers.js ---
+// Helper functions for Web Crypto API and Base64 Handling
+
+/**
+ * Converts a Base64URL encoded string to an ArrayBuffer.
+ * Needed for decoding the key stored in Flask session.
+ * @param {string} b64url - Base64URL encoded string.
+ * @returns {ArrayBuffer}
+ */
+function base64UrlDecode(b64url) {
+    try {
+        let b64 = b64url.replace(/-/g, '+').replace(/_/g, '/');
+        while (b64.length % 4) {
+            b64 += '=';
+        }
+        return base64ToArrayBuffer(b64);
+    } catch (e) {
+        console.error("Base64URL decoding failed:", e);
+        throw new Error("Invalid Base64URL string for key decoding.");
+    }
+}
+
+/**
+ * Converts a standard Base64 string to an ArrayBuffer.
+ * @param {string} base64 - Standard Base64 encoded string.
+ * @returns {ArrayBuffer}
+ */
+function base64ToArrayBuffer(base64) {
+    try {
+        const binary_string = window.atob(base64);
+        const len = binary_string.length;
+        const bytes = new Uint8Array(len);
+        for (let i = 0; i < len; i++) {
+            bytes[i] = binary_string.charCodeAt(i);
+        }
+        return bytes.buffer;
+    } catch (e) {
+        console.error("Base64 decoding failed:", e);
+        throw new Error("Invalid Base64 string.");
+    }
+}
+
+/**
+ * Converts an ArrayBuffer to a standard Base64 string.
+ * Used for logging raw keys consistently.
+ * @param {ArrayBuffer} buffer - The ArrayBuffer to encode.
+ * @returns {string}
+ */
+function arrayBufferToBase64(buffer) {
+    let binary = '';
+    const bytes = new Uint8Array(buffer);
+    const len = bytes.byteLength;
+    for (let i = 0; i < len; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return window.btoa(binary);
+}
+
+/**
+ * Derives a 32-byte AES key from a password and salt using PBKDF2.
+ * Logs the standard Base64 representation of the raw key.
+ * @param {string} password - The master password.
+ * @param {string} saltString - The salt (e.g., user's email).
+ * @returns {Promise<ArrayBuffer>} - Promise resolving to the raw key bytes (ArrayBuffer).
+ */
+async function deriveKeyRawBytes(password, saltString) {
+    try {
+        const salt = new TextEncoder().encode(saltString.toLowerCase()); // Use consistent casing for salt
+        const passwordBuffer = new TextEncoder().encode(password);
+        const iterations = 390000; // Match Python backend KDF iterations
+
+        const keyMaterial = await crypto.subtle.importKey(
+            'raw', passwordBuffer, { name: 'PBKDF2' }, false, ['deriveBits']
+        );
+
+        const derivedBits = await crypto.subtle.deriveBits(
+            { name: 'PBKDF2', salt: salt, iterations: iterations, hash: 'SHA-256' },
+            keyMaterial,
+            256 // Derive 256 bits (32 bytes)
+        );
+
+        // --- ADDED LOGGING ---
+        try {
+            console.log(`DEBUG: JS Derived Key (Raw -> Standard Base64): ${arrayBufferToBase64(derivedBits)}`);
+        } catch(logErr) { console.error("DEBUG: Error logging JS derived key", logErr); }
+        // --- END LOGGING ---
+
+        return derivedBits; // Return raw ArrayBuffer
+    } catch (error) {
+        console.error("Key derivation failed:", error);
+        throw new Error("Could not derive encryption key.");
+    }
+}
+
+/**
+ * Encrypts data (object) using AES-GCM with the provided raw key bytes.
+ * @param {ArrayBuffer} keyBuffer - The raw 32-byte AES key.
+ * @param {object} data - The JavaScript object to encrypt.
+ * @returns {Promise<string>} - Promise resolving to the Base64 encoded encrypted data (IV + Ciphertext).
+ */
+async function encryptData(keyBuffer, data) {
+    try {
+        const iv = crypto.getRandomValues(new Uint8Array(12));
+        const dataString = JSON.stringify(data);
+        const encodedData = new TextEncoder().encode(dataString);
+        const cryptoKey = await crypto.subtle.importKey("raw", keyBuffer, { name: "AES-GCM", length: 256 }, false, ["encrypt"]);
+        const encryptedContent = await crypto.subtle.encrypt({ name: "AES-GCM", iv: iv }, cryptoKey, encodedData);
+        const combinedBuffer = new Uint8Array(iv.length + encryptedContent.byteLength);
+        combinedBuffer.set(iv, 0);
+        combinedBuffer.set(new Uint8Array(encryptedContent), iv.length);
+        return arrayBufferToBase64(combinedBuffer); // Return standard Base64
+    } catch (error) {
+        console.error("Encryption failed:", error);
+        throw new Error("Could not encrypt data.");
+    }
+}
+
+/**
+ * Decrypts Base64 encoded data using AES-GCM with the provided raw key bytes.
+ * @param {ArrayBuffer} keyBuffer - The raw 32-byte AES key.
+ * @param {string} encryptedB64Data - Base64 encoded data (IV + Ciphertext).
+ * @returns {Promise<object|null>} - Promise resolving to the decrypted object, or null on failure.
+ */
+async function decryptData(keyBuffer, encryptedB64Data) {
+    try {
+        const combinedData = base64ToArrayBuffer(encryptedB64Data);
+        if (combinedData.byteLength < 12) throw new Error("Encrypted data too short.");
+        const iv = combinedData.slice(0, 12);
+        const ciphertext = combinedData.slice(12);
+        const cryptoKey = await crypto.subtle.importKey("raw", keyBuffer, { name: "AES-GCM", length: 256 }, false, ["decrypt"]);
+        const decryptedContent = await crypto.subtle.decrypt({ name: "AES-GCM", iv: iv }, cryptoKey, ciphertext);
+        const decodedString = new TextDecoder().decode(decryptedContent);
+        return JSON.parse(decodedString);
+    } catch (error) {
+        // Log the specific crypto error, helpful for debugging (e.g., Authentication tag mismatch)
+        console.error(`Decryption failed: ${error.name} - ${error.message}`);
+        return null; // Indicate failure
+    }
+}
+
+/**
+ * Escapes HTML special characters in a string.
+ * @param {string} unsafe - The potentially unsafe string.
+ * @returns {string} - The escaped string.
+ */
+function escapeHtml(unsafe) {
+    if (typeof unsafe !== 'string') return '';
+    return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+
+/**
+ * Computes the SHA-1 hash of a string.
+ * @param {string} text - The string to hash.
+ * @returns {Promise<string>} - Promise resolving to the SHA-1 hash as an uppercase hex string.
+ */
+async function sha1Hash(text) {
+    // ... (implementation as previously provided)
+    try {
+        const encoder = new TextEncoder();
+        const data = encoder.encode(text);
+        const hashBuffer = await crypto.subtle.digest('SHA-1', data);
+        const hashArray = Array.from(new Uint8Array(hashBuffer));
+        const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+        return hashHex.toUpperCase(); // HIBP API uses uppercase hex
+    } catch (error) {
+        console.error("SHA-1 Hashing failed:", error);
+        throw new Error("Could not compute SHA-1 hash.");
+    }
+}
+
+/**
+ * Checks if a password has been exposed in known data breaches using HIBP Pwned Passwords API (FREE version).
+ * Uses k-Anonymity.
+ * @param {string} password - The password to check.
+ * @returns {Promise<{isPwned: boolean, count: number | null, error: string | null}>}
+ */
+async function checkHIBPPassword(password) {
+    // ... (implementation as previously provided)
+    if (!password) {
+        return { isPwned: false, count: null, error: null }; // Cannot check empty password
+    }
+    try {
+        const hash = await sha1Hash(password);
+        const prefix = hash.substring(0, 5);
+        const suffix = hash.substring(5);
+        const apiUrl = `https://api.pwnedpasswords.com/range/${prefix}`; // FREE endpoint
+
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout
+
+        const response = await fetch(apiUrl, {
+             method: 'GET',
+             signal: controller.signal
+         });
+
+        clearTimeout(timeoutId);
+
+        if (!response.ok) {
+             if (response.status === 404) {
+                 // 404 means the prefix wasn't found (good!)
+                 return { isPwned: false, count: 0, error: null };
+             }
+             throw new Error(`HIBP API Error: ${response.status} ${response.statusText}`);
+        }
+
+        const text = await response.text();
+        const lines = text.split('\r\n');
+
+        for (const line of lines) {
+            const [lineSuffix, lineCountStr] = line.split(':');
+            if (lineSuffix === suffix) {
+                const count = parseInt(lineCountStr, 10);
+                console.warn(`Password found in HIBP database ${count} times!`);
+                return { isPwned: true, count: count, error: null };
+            }
+        }
+        return { isPwned: false, count: 0, error: null };
+
+    } catch (error) {
+        let errorMessage = "Could not check password breach status.";
+        if (error.name === 'AbortError') {
+            errorMessage = "Breach check timed out.";
+        } else if (error instanceof Error) {
+             errorMessage = `Breach check failed: ${error.message}`;
+        }
+        console.error("HIBP Check Error:", error);
+        return { isPwned: false, count: null, error: errorMessage };
+    }
+}
+// --- END OF crypto-helpers.js additions ---

templates/analyse.html

@@ -0,0 +1,950 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Analyse Passwords - Secure Password Manager</title>
+    <!-- Ensure correct path to your CSS file -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <!-- Add Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #2563eb;
+            --primary-hover: #1d4ed8;
+            --success-color: #10b981;
+            --warning-color: #f59e0b;
+            --danger-color: #ef4444;
+            --text-primary: #1f2937;
+            --text-secondary: #4b5563;
+            --bg-card: #ffffff;
+            --border-color: #e5e7eb;
+            --transition: all 0.3s ease;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            line-height: 1.6;
+            color: var(--text-primary);
+            background: #f3f4f6;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        header {
+            background: var(--bg-card);
+            border-radius: 1rem;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+
+        h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--text-primary);
+            margin: 0;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .llm-badge {
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            color: white;
+            padding: 0.25rem 0.75rem;
+            border-radius: 1rem;
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+
+        nav ul {
+            display: flex;
+            gap: 1rem;
+            padding: 0;
+            margin: 1rem 0 0;
+            list-style: none;
+        }
+
+        nav a {
+            color: var(--text-secondary);
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            transition: var(--transition);
+        }
+
+        nav a:hover, nav a.active {
+            color: var(--primary-color);
+            background: #f0f9ff;
+        }
+
+        .card {
+            background: var(--bg-card);
+            border-radius: 1rem;
+            padding: 2rem;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            transition: var(--transition);
+        }
+
+        .card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+            position: relative;
+        }
+
+        input[type="password"] {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 2px solid var(--border-color);
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            transition: var(--transition);
+        }
+
+        input[type="password"]:focus {
+            border-color: var(--primary-color);
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+        }
+
+        .toggle-button {
+            position: absolute;
+            right: 1rem;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 0.875rem;
+        }
+
+        .btn {
+            background: var(--primary-color);
+            color: white;
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .btn:hover {
+            background: var(--primary-hover);
+        }
+
+        .btn:disabled {
+            opacity: 0.7;
+            cursor: not-allowed;
+        }
+
+        .loading-indicator {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1rem;
+            padding: 2rem;
+        }
+
+        .spinner {
+            width: 2.5rem;
+            height: 2.5rem;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid var(--primary-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .analysis-table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            margin: 1.5rem 0;
+        }
+
+        .analysis-table th,
+        .analysis-table td {
+            padding: 1rem;
+            text-align: left;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .analysis-table th {
+            background: #f8fafc;
+            font-weight: 600;
+            color: var(--text-secondary);
+        }
+
+        .strength-bar {
+            background: #e5e7eb;
+            height: 0.5rem;
+            border-radius: 1rem;
+            overflow: hidden;
+        }
+
+        .strength-indicator {
+            height: 100%;
+            transition: width 0.3s ease;
+        }
+
+        .strength-indicator.very-weak { background: var(--danger-color); }
+        .strength-indicator.weak { background: #f97316; }
+        .strength-indicator.medium { background: var(--warning-color); }
+        .strength-indicator.strong { background: #84cc16; }
+        .strength-indicator.very-strong { background: var(--success-color); }
+
+        .feedback-item {
+            padding: 0.75rem;
+            margin-bottom: 0.5rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+
+        .feedback-item.issue {
+            background: #fee2e2;
+            color: #991b1b;
+        }
+
+        .feedback-item.tip {
+            background: #e0f2fe;
+            color: #075985;
+        }
+
+        .breach-indicator {
+            display: inline-flex;
+            align-items: center;
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            font-weight: 500;
+        }
+
+        .breach-indicator.safe {
+            background: #dcfce7;
+            color: #166534;
+        }
+
+        .breach-indicator.pwned {
+            background: #fee2e2;
+            color: #991b1b;
+        }
+
+        .breach-indicator.error {
+            background: #fef3c7;
+            color: #92400e;
+        }
+
+        footer {
+            text-align: center;
+            padding: 2rem;
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+        }
+
+        .logout-link {
+            float: right;
+            color: var(--text-secondary);
+            text-decoration: none;
+            font-size: 0.875rem;
+            transition: var(--transition);
+        }
+
+        .logout-link:hover {
+            color: var(--primary-color);
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+            }
+
+            .card {
+                padding: 1.5rem;
+            }
+
+            .analysis-table {
+                display: block;
+                overflow-x: auto;
+            }
+
+            nav ul {
+                flex-direction: column;
+            }
+
+            nav a {
+                display: block;
+            }
+        }
+
+        .header-content {
+            width: 100%;
+        }
+
+        .header-top {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+
+        .user-email {
+            color: var(--text-secondary);
+            margin-right: 0.5rem;
+        }
+
+        .logout-text {
+            color: var(--danger-color);
+        }
+
+        .card-header {
+            margin-bottom: 2rem;
+        }
+
+        .card-description {
+            color: var(--text-secondary);
+            margin: 0.5rem 0 0;
+            font-size: 0.95rem;
+        }
+
+        .analysis-form {
+            max-width: 600px;
+        }
+
+        .password-input-wrapper {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+
+        .form-actions {
+            display: flex;
+            justify-content: flex-start;
+            gap: 1rem;
+        }
+
+        .btn-primary {
+            background: var(--primary-color);
+        }
+
+        .btn-secondary {
+            background: #4b5563;
+        }
+
+        .card-actions {
+            margin: 1.5rem 0;
+        }
+
+        .result-container {
+            background: #f8fafc;
+            border-radius: 0.5rem;
+            padding: 1rem;
+            margin-top: 1rem;
+        }
+
+        .table-container {
+            overflow-x: auto;
+            background: #f8fafc;
+            border-radius: 0.5rem;
+            padding: 1rem;
+            margin-top: 1rem;
+        }
+
+        .password-cell {
+            font-family: monospace;
+            font-size: 1rem;
+        }
+
+        .assessment-cell {
+            font-weight: 500;
+        }
+
+        .feedback-list {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .status-message {
+            margin: 1rem 0;
+            padding: 0.75rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            background: #f0f9ff;
+            color: var(--primary-color);
+        }
+
+        /* Enhanced Loading Animation */
+        .loading-indicator {
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 0.5rem;
+        }
+
+        .loading-indicator p {
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+            margin: 0;
+        }
+
+        /* Improved Table Styles */
+        .analysis-table th:first-child,
+        .analysis-table td:first-child {
+            border-top-left-radius: 0.5rem;
+            border-bottom-left-radius: 0.5rem;
+        }
+
+        .analysis-table th:last-child,
+        .analysis-table td:last-child {
+            border-top-right-radius: 0.5rem;
+            border-bottom-right-radius: 0.5rem;
+        }
+
+        /* Strength Bar Enhancements */
+        .strength-bar-table {
+            width: 100%;
+            height: 0.375rem;
+            background: #e5e7eb;
+            border-radius: 0.25rem;
+            overflow: hidden;
+        }
+
+        .strength-indicator-table {
+            height: 100%;
+            transition: width 0.3s ease, background-color 0.3s ease;
+        }
+
+        /* Responsive Enhancements */
+        @media (max-width: 768px) {
+            .header-top {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 1rem;
+            }
+
+            .logout-link {
+                float: none;
+                display: inline-block;
+                margin-top: 0.5rem;
+            }
+
+            .card {
+                padding: 1.25rem;
+            }
+
+            .form-actions {
+                flex-direction: column;
+            }
+
+            .btn {
+                width: 100%;
+            }
+
+            .analysis-table {
+                font-size: 0.875rem;
+            }
+
+            .analysis-table th,
+            .analysis-table td {
+                padding: 0.75rem;
+            }
+        }
+
+        /* Dark Mode Support (if needed) */
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg-card: #1f2937;
+                --text-primary: #f3f4f6;
+                --text-secondary: #9ca3af;
+                --border-color: #374151;
+            }
+
+            body {
+                background: #111827;
+            }
+
+            .card {
+                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+            }
+
+            input[type="password"] {
+                background: #374151;
+                color: #f3f4f6;
+            }
+
+            .analysis-table th {
+                background: #374151;
+            }
+
+            .result-container,
+            .table-container {
+                background: #1f2937;
+            }
+
+            .status-message {
+                background: #1e3a8a;
+                color: #93c5fd;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="header-content">
+                <div class="header-top">
+                    <h1>Password Analysis <span class="llm-badge">AI Insights</span></h1>
+                    {% if current_user.is_authenticated %}
+                        <a href="{{ url_for('logout') }}" class="logout-link">
+                            <span class="user-email">{{ current_user.email }}</span>
+                            <span class="logout-text">Logout</span>
+                        </a>
+                    {% endif %}
+                </div>
+                <nav>
+                    <ul>
+                        <li><a href="{{ url_for('add_password_page') }}">Add Password</a></li>
+                        <li><a href="{{ url_for('storage') }}">View Passwords</a></li>
+                        <li><a href="{{ url_for('analyse') }}" class="active">Analyse Passwords</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+
+        <main>
+            <!-- Single Password Analysis Card -->
+            <section class="card analysis-card">
+                <div class="card-header">
+                    <h2>Analyse a Single Password</h2>
+                    <p class="card-description">Enter a password below to get an instant strength analysis using AI insights and check if it has been compromised in known data breaches. The password itself is not stored or sent after analysis.</p>
+                </div>
+                <form id="analyse-form" class="analysis-form">
+                    <div class="form-group">
+                        <label for="analyse-password">Password to Analyse:</label>
+                        <div class="password-input-wrapper">
+                            <input type="password" id="analyse-password" name="analyse-password" required autocomplete="new-password" placeholder="Enter password to analyse">
+                            <button type="button" id="toggle-analyse-password" class="toggle-button" title="Show/hide password">Show</button>
+                        </div>
+                    </div>
+                    <div class="form-actions">
+                        <button type="submit" class="btn btn-primary">Analyse Password</button>
+                    </div>
+                </form>
+
+                <div id="single-loading" class="loading-indicator" style="display: none;">
+                    <div class="spinner"></div>
+                    <p>Analysing your password...</p>
+                </div>
+
+                <div id="single-analysis-result" class="analysis-result" style="display: none;">
+                    <h3>Analysis Result</h3>
+                    <div class="result-container">
+                        <table class="analysis-table">
+                            <thead>
+                                <tr>
+                                    <th>Password</th>
+                                    <th>Strength</th>
+                                    <th>Assessment</th>
+                                    <th>AI Insights & Suggestions</th>
+                                    <th>Breach Status</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td id="password-value" class="password-cell">*****</td>
+                                    <td>
+                                        <div class="strength-bar">
+                                            <div id="strength-indicator" class="strength-indicator"></div>
+                                        </div>
+                                    </td>
+                                    <td id="strength-text" class="assessment-cell">Medium</td>
+                                    <td id="feedback-cell">
+                                        <div id="feedback-list" class="feedback-list"></div>
+                                    </td>
+                                    <td class="breach-cell">
+                                        <span id="single-breach-indicator" class="breach-indicator"></span>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </section>
+
+            <!-- All Stored Passwords Analysis Card -->
+            <section class="card analysis-card">
+                <div class="card-header">
+                    <h2>Analyse All Stored Credentials</h2>
+                    <p class="card-description">Decrypt and analyse all your stored credentials to identify potential weaknesses and check for compromises across your accounts. This may take some time depending on the number of credentials.</p>
+                </div>
+                <div class="card-actions">
+                    <button id="analyse-all-btn" class="btn btn-secondary">Load & Analyse All Stored Credentials</button>
+                </div>
+
+                <div id="all-passwords-loading" class="loading-indicator" style="display: none;">
+                    <div class="spinner"></div>
+                    <p>Loading, decrypting, and analysing all credentials...</p>
+                </div>
+
+                <div id="all-analysis-status" class="status-message"></div>
+
+                <div id="all-passwords-analysis" class="analysis-result" style="display: none;">
+                    <h3>Stored Credentials Analysis</h3>
+                    <div class="table-container">
+                        <table class="analysis-table" id="password-analysis-table">
+                            <thead>
+                                <tr>
+                                    <th>Service/Website</th>
+                                    <th>Username/Email</th>
+                                    <th>Strength</th>
+                                    <th>Assessment</th>
+                                    <th>AI Insights & Suggestions</th>
+                                    <th>Breach Status</th>
+                                </tr>
+                            </thead>
+                            <tbody id="password-analysis-list"></tbody>
+                        </table>
+                    </div>
+                </div>
+            </section>
+        </main>
+
+        <footer>
+            <p>Secure Password Manager - End-to-End Encrypted Password Management</p>
+        </footer>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/crypto-helpers.js') }}"></script>
+
+    <script>
+        // --- E2EE Helper Functions (Assume they are loaded from crypto-helpers.js) ---
+        // Includes: base64UrlDecode, decryptData, base64ToArrayBuffer,
+        //           arrayBufferToBase64, escapeHtml, sha1Hash, checkHIBPPassword
+
+        // --- Client-Side Password Analysis Helpers ---
+        function getPasswordCharacteristics(password) {
+            let comp = { lowercase: 0, uppercase: 0, digits: 0, special: 0 };
+            if (!password || typeof password !== 'string') return { length: 0, composition: comp };
+            for (let i = 0; i < password.length; i++) {
+                const char = password[i];
+                if (char >= 'a' && char <= 'z') comp.lowercase++; else if (char >= 'A' && char <= 'Z') comp.uppercase++;
+                else if (char >= '0' && char <= '9') comp.digits++; else if (!char.match(/^[a-zA-Z0-9\s]$/)) comp.special++;
+            } return { length: password.length, composition: comp };
+        }
+         function getStrengthClass(score) { // Maps 1-5 score to CSS class
+             if (score <= 1) return 'very-weak'; if (score === 2) return 'weak'; if (score === 3) return 'medium';
+             if (score === 4) return 'strong'; return 'very-strong';
+         }
+         function formatFeedbackHtml(feedbackArray) { // Formats LLM/Basic feedback
+            if (!feedbackArray || feedbackArray.length === 0) return '<div class="feedback-item tip">No specific issues found.</div>';
+            let html = '<div class="feedback-section">';
+            feedbackArray.forEach(fb => {
+                let itemClass = 'feedback-item'; let text = fb;
+                if (fb.toLowerCase().startsWith('issue:') || fb.toLowerCase().startsWith('warning:')) { itemClass += ' issue'; text = fb.substring(fb.indexOf(':') + 1).trim(); }
+                else if (fb.toLowerCase().startsWith('tip:') || fb.toLowerCase().startsWith('suggestion:')) { itemClass += ' tip'; text = fb.substring(fb.indexOf(':') + 1).trim(); }
+                html += `<div class="${itemClass}">${escapeHtml(text)}</div>`;
+            });
+            html += '</div>';
+            return html;
+        }
+
+        // --- DOMContentLoaded ---
+        document.addEventListener('DOMContentLoaded', function() {
+             const flaskKey = "{{ session.get('encryption_key', 'null') }}";
+              if (flaskKey !== 'null' && !sessionStorage.getItem('encryptionKey')) sessionStorage.setItem('encryptionKey', flaskKey);
+              else if (!sessionStorage.getItem('encryptionKey')) { console.warn("Key missing, redirecting."); window.location.href = "{{ url_for('login') }}"; return; }
+
+            // Single Analysis Elements
+            const analyseForm = document.getElementById('analyse-form');
+            const togglePasswordBtn = document.getElementById('toggle-analyse-password');
+            const passwordInput = document.getElementById('analyse-password');
+            const singleAnalysisResultEl = document.getElementById('single-analysis-result');
+            const singleLoadingEl = document.getElementById('single-loading');
+            const strengthIndicator = document.getElementById('strength-indicator');
+            const strengthText = document.getElementById('strength-text');
+            const feedbackList = document.getElementById('feedback-list');
+            const passwordValueCell = document.getElementById('password-value');
+            const singleBreachIndicator = document.getElementById('single-breach-indicator'); // Get breach element
+            const singleSubmitBtn = analyseForm.querySelector('button[type="submit"]');
+
+            // All Analysis Elements
+            const analyseAllBtn = document.getElementById('analyse-all-btn');
+            const allPasswordsLoadingEl = document.getElementById('all-passwords-loading');
+            const allPasswordsAnalysisEl = document.getElementById('all-passwords-analysis');
+            const passwordAnalysisListBody = document.getElementById('password-analysis-list');
+            const allAnalysisStatus = document.getElementById('all-analysis-status');
+
+            // --- Single Analysis Logic ---
+            togglePasswordBtn.addEventListener('click', function() {
+                const type = passwordInput.type === 'password' ? 'text' : 'password';
+                passwordInput.type = type; this.textContent = type === 'password' ? 'Show' : 'Hide';
+            });
+
+            analyseForm.addEventListener('submit', async function(e) {
+                e.preventDefault();
+                const password = passwordInput.value;
+                if (!password) return;
+
+                singleLoadingEl.style.display = 'block';
+                singleAnalysisResultEl.style.display = 'none';
+                singleSubmitBtn.disabled = true;
+                passwordValueCell.textContent = password.replace(/./g, '*'); // Mask password in table
+
+                // Reset previous results
+                strengthIndicator.style.width = '0%';
+                strengthIndicator.className = 'strength-indicator';
+                strengthText.textContent = 'Checking...';
+                feedbackList.innerHTML = '';
+                singleBreachIndicator.textContent = 'Checking...';
+                singleBreachIndicator.className = 'breach-indicator loading';
+
+                try {
+                    const characteristics = getPasswordCharacteristics(password);
+
+                    // --- Perform Checks Concurrently ---
+                    const analysisPromise = fetch("{{ url_for('analyse_password_api') }}", {
+                        method: 'POST', headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ characteristics: characteristics })
+                    });
+                    // Ensure crypto-helpers is loaded and function exists
+                    const breachPromise = typeof checkHIBPPassword === 'function'
+                        ? checkHIBPPassword(password)
+                        : Promise.resolve({ error: "Breach check function not available." }); // Fallback
+
+                    // --- Process Analysis Results ---
+                    const analysisResponse = await analysisPromise;
+                     if (!analysisResponse.ok) {
+                        const err = await analysisResponse.json().catch(() => ({}));
+                        console.error(`Analysis API failed: ${analysisResponse.status} ${err.error || ''}`);
+                         strengthText.textContent = 'Error';
+                         feedbackList.innerHTML = `<div class="feedback-item issue">Analysis Failed</div>`;
+                         strengthIndicator.className = 'strength-indicator very-weak';
+                     } else {
+                         const analysisResult = await analysisResponse.json();
+                         updateSingleAnalysisUI(analysisResult); // Update strength part of UI
+                     }
+
+                    // --- Process Breach Results ---
+                    const breachResult = await breachPromise;
+                     if (breachResult.error) {
+                         singleBreachIndicator.textContent = `Error: ${escapeHtml(breachResult.error)}`;
+                         singleBreachIndicator.className = 'breach-indicator error';
+                     } else if (breachResult.isPwned) {
+                         singleBreachIndicator.textContent = `Compromised! Found in ${breachResult.count} breach${breachResult.count > 1 ? 'es' : ''}.`;
+                         singleBreachIndicator.className = 'breach-indicator pwned';
+                     } else {
+                         singleBreachIndicator.textContent = 'Not found in known breaches.';
+                         singleBreachIndicator.className = 'breach-indicator safe';
+                     }
+
+                } catch (error) {
+                    console.error('Single analysis processing error:', error);
+                    // Display generic error if fetch/processing fails broadly
+                    strengthText.textContent = 'Error';
+                    feedbackList.innerHTML = `<div class="feedback-item issue">Failed: ${escapeHtml(error.message)}</div>`;
+                    singleBreachIndicator.textContent = 'Error checking.';
+                    singleBreachIndicator.className = 'breach-indicator error';
+                    strengthIndicator.className = 'strength-indicator very-weak';
+
+                } finally {
+                    singleLoadingEl.style.display = 'none';
+                    singleAnalysisResultEl.style.display = 'block'; // Show results table
+                    singleSubmitBtn.disabled = false;
+                }
+            });
+
+             function updateSingleAnalysisUI(data) { // Only updates strength part now
+                 const score = data.strength || 1;
+                 strengthIndicator.style.width = (score / 5) * 100 + '%';
+                 strengthIndicator.className = 'strength-indicator ' + getStrengthClass(score);
+                 strengthText.textContent = data.assessment || 'Unknown';
+                  if (feedbackList) feedbackList.innerHTML = formatFeedbackHtml(data.feedback);
+             }
+
+            // --- All Analysis Logic ---
+            analyseAllBtn.addEventListener('click', async function() {
+                allPasswordsLoadingEl.style.display = 'block'; allPasswordsAnalysisEl.style.display = 'none';
+                passwordAnalysisListBody.innerHTML = ''; allAnalysisStatus.textContent = ''; allAnalysisStatus.style.color = '';
+                analyseAllBtn.disabled = true;
+                try {
+                    // ***** CORRECTED KEY RETRIEVAL *****
+                    const keyB64Url = sessionStorage.getItem('encryptionKey');
+                    if (!keyB64Url) {
+                        console.error("Encryption key missing from sessionStorage.");
+                        throw new Error("Key missing. Please login again.");
+                    }
+                    let encryptionKey = null;
+                    try {
+                        // Assuming base64UrlDecode is loaded from crypto-helpers.js
+                        encryptionKey = base64UrlDecode(keyB64Url);
+                    } catch (e) {
+                        console.error("Failed to decode encryption key:", e);
+                        throw new Error("Invalid encryption key format. Please login again.");
+                    }
+                    if (!encryptionKey) { // Should not happen if decode worked, but for safety
+                        throw new Error("Key decoding failed unexpectedly. Please login again.");
+                    }
+                    // ***** END KEY RETRIEVAL CORRECTION *****
+
+                    allAnalysisStatus.textContent = 'Fetching credentials...';
+                    const credResponse = await fetch("{{ url_for('get_credentials') }}");
+                    if (!credResponse.ok) {
+                        if (credResponse.status === 401) {
+                             throw new Error('Unauthorized (401). Session likely expired. Please re-login.');
+                        }
+                        throw new Error(`Failed to fetch credentials (${credResponse.status})`);
+                    }
+
+                    const encryptedCredentials = await credResponse.json();
+                    if (!encryptedCredentials || encryptedCredentials.length === 0) {
+                        allAnalysisStatus.textContent = 'No stored credentials found.'; allPasswordsLoadingEl.style.display = 'none'; analyseAllBtn.disabled = false; return;
+                    }
+                    allAnalysisStatus.textContent = `Found ${encryptedCredentials.length}. Analysing...`;
+                    let analysedCount = 0; const totalCount = encryptedCredentials.length;
+                    allPasswordsAnalysisEl.style.display = 'block'; // Show table header
+
+                    // Use Promise.allSettled for concurrency
+                    const analysisPromises = encryptedCredentials.map(async (cred) => {
+                        const decrypted = await decryptData(encryptionKey, cred.encrypted_data); // Assumes decryptData is loaded
+                        let analysisResult = { strength: 0, assessment: 'Error', feedback: ['Issue: Processing Error'] };
+                        let breachResult = { isPwned: false, count: null, error: "Not checked" };
+                        let serviceName = cred.service_hint || `(Hint: ${cred.id.substring(0,8)})`;
+                        let userName = '(Unknown)';
+                        let passwordForChecks = null;
+
+                        if (decrypted) {
+                            serviceName = decrypted.service || serviceName;
+                            userName = decrypted.username || userName;
+                            passwordForChecks = decrypted.password || null;
+
+                            if (passwordForChecks) {
+                                // Perform LLM/Basic Analysis (async)
+                                const characteristics = getPasswordCharacteristics(passwordForChecks);
+                                const analysisApiPromise = fetch("{{ url_for('analyse_password_api') }}", {
+                                    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ characteristics: characteristics })
+                                }).then(async resp => {
+                                    if (resp.ok) return await resp.json();
+                                    console.warn(`Analysis API failed for ${serviceName}: ${resp.status}`);
+                                    return { strength: 0, assessment: 'API Error', feedback: ['Issue: Analysis service failed.'] };
+                                }).catch(apiError => {
+                                     console.error(`Fetch error for analysis API (${serviceName}):`, apiError);
+                                     return { strength: 0, assessment: 'Fetch Error', feedback: [`Issue: ${apiError.message}`] };
+                                 });
+
+                                // Perform HIBP Breach Check (async)
+                                const breachCheckPromise = (typeof checkHIBPPassword === 'function')
+                                     ? checkHIBPPassword(passwordForChecks)
+                                          .catch(hibpError => {
+                                               console.error("Error during HIBP check for", serviceName, hibpError);
+                                               return { isPwned: false, count: null, error: "Check failed" };
+                                           })
+                                     : Promise.resolve({ isPwned: false, count: null, error: "Checker fn missing" });
+
+                                // Await both results
+                                [analysisResult, breachResult] = await Promise.all([analysisApiPromise, breachCheckPromise]);
+
+                            } else {
+                                analysisResult = { strength: 0, assessment: 'No Password', feedback: ['Issue: No password found.'] };
+                                breachResult = { isPwned: false, count: null, error: "No password" };
+                            }
+                        } else {
+                             analysisResult = { strength: 0, assessment: 'Decrypt Error', feedback: ['Issue: Could not decrypt data.'] };
+                             userName = '(Decryption Failed)';
+                             breachResult = { isPwned: false, count: null, error: "Decryption failed" };
+                        }
+
+                         analysedCount++;
+                         allAnalysisStatus.textContent = `Analysed ${analysedCount} of ${totalCount}...`;
+
+                        return { service: serviceName, username: userName, analysis: analysisResult, breach: breachResult };
+                    }); // End of map
+
+                    // Wait for all analyses to settle
+                    const settledResults = await Promise.allSettled(analysisPromises);
+                    const finalResults = settledResults
+                        .filter(result => result.status === 'fulfilled')
+                        .map(result => result.value);
+
+                     settledResults.forEach((result, index) => {
+                         if(result.status === 'rejected') { console.error(`Analysis promise rejected for index ${index}:`, result.reason); }
+                     });
+
+                    displayAllAnalysisResults(finalResults);
+                    allAnalysisStatus.textContent = `Analysis complete for ${finalResults.length} credentials.`;
+
+                } catch (error) {
+                    console.error('All analysis processing error:', error); // Log the full error object
+                    allAnalysisStatus.textContent = `Error: ${error.message || 'An unknown error occurred'}`; // Display message
+                    allAnalysisStatus.style.color = 'red';
+                    if (error.message.includes('Unauthorized (401)')) {
+                         setTimeout(() => window.location.href = "{{ url_for('login') }}", 3000);
+                    }
+                } finally {
+                    allPasswordsLoadingEl.style.display = 'none';
+                    analyseAllBtn.disabled = false;
+                }
+            });
+
+            // --- Modify displayAllAnalysisResults ---
+            function displayAllAnalysisResults(results) {
+                passwordAnalysisListBody.innerHTML = '';
+                allPasswordsAnalysisEl.style.display = 'block';
+                if (results.length === 0) {
+                    passwordAnalysisListBody.innerHTML = '<tr><td colspan="6">No results to display.</td></tr>'; // Colspan is 6
+                    return;
+                }
+                results.forEach((item) => {
+                    const row = passwordAnalysisListBody.insertRow();
+                    const analysis = item.analysis || { strength: 0, assessment: 'N/A', feedback: [] };
+                    const breach = item.breach || { isPwned: false, count: null, error: "Unknown" };
+                    const score = analysis.strength || 0;
+                    const strengthClass = getStrengthClass(score);
+                    const feedbackHtml = formatFeedbackHtml(analysis.feedback);
+
+                    // Breach Status Cell Content
+                    let breachHtml = ''; let breachClass = ''; let breachTitle = '';
+                    if (breach.error) {
+                         breachHtml = `Error`;
+                         breachClass = 'error';
+                         breachTitle = escapeHtml(breach.error);
+                    } else if (breach.isPwned) {
+                         breachHtml = `Compromised! (${breach.count})`;
+                         breachClass = 'pwned';
+                         breachTitle = `Found in ${breach.count} known breach(es).`;
+                    } else {
+                         breachHtml = `Not Found`;
+                         breachClass = 'safe';
+                         breachTitle = 'Not found in known breaches.';
+                    }
+
+                    row.innerHTML = `
+                        <td>${escapeHtml(item.service)}</td>
+                        <td>${escapeHtml(item.username)}</td>
+                        <td><div class="strength-bar-table" title="Strength: ${score}/5"><div class="strength-indicator-table ${strengthClass}" style="width: ${(score/5)*100}%"></div></div></td>
+                        <td>${escapeHtml(analysis.assessment || 'N/A')}</td>
+                        <td>${feedbackHtml}</td>
+                        <td class="breach-cell breach-${breachClass}" title="${breachTitle}"><span>${breachHtml}</span></td> <!-- Added Breach Cell with title -->
+                    `;
+                });
+            }
+        }); // End DOMContentLoaded
+    </script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,912 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Add Password - Secure Password Manager</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #2563eb;
+            --primary-hover: #1d4ed8;
+            --success-color: #10b981;
+            --warning-color: #f59e0b;
+            --danger-color: #ef4444;
+            --text-primary: #1f2937;
+            --text-secondary: #4b5563;
+            --bg-card: #ffffff;
+            --border-color: #e5e7eb;
+            --transition: all 0.3s ease;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            line-height: 1.6;
+            color: var(--text-primary);
+            background: #f3f4f6;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        header {
+            background: var(--bg-card);
+            border-radius: 1rem;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+
+        .header-content {
+            width: 100%;
+        }
+
+        .header-top {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+
+        .header-controls {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--text-primary);
+            margin: 0;
+        }
+
+        nav ul {
+            display: flex;
+            gap: 1rem;
+            padding: 0;
+            margin: 1rem 0 0;
+            list-style: none;
+        }
+
+        nav a {
+            color: var(--text-secondary);
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            transition: var(--transition);
+        }
+
+        nav a:hover, nav a.active {
+            color: var(--primary-color);
+            background: #f0f9ff;
+        }
+
+        .card {
+            background: var(--bg-card);
+            border-radius: 1rem;
+            padding: 2rem;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            transition: var(--transition);
+        }
+
+        .card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        label {
+            display: block;
+            color: var(--text-primary);
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+        }
+
+        input[type="text"],
+        input[type="password"] {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 2px solid var(--border-color);
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            transition: var(--transition);
+        }
+
+        input[type="text"]:focus,
+        input[type="password"]:focus {
+            border-color: var(--primary-color);
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+        }
+
+        .password-input-group {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+
+        .toggle-button {
+            position: absolute;
+            right: 7.5rem;
+            padding: 0.5rem;
+            background: none;
+            border: none;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 0.875rem;
+        }
+
+        .generate-button {
+            position: absolute;
+            right: 0.5rem;
+            padding: 0.5rem 1rem;
+            background: none;
+            border: 1px solid var(--border-color);
+            border-radius: 0.5rem;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 0.875rem;
+            transition: var(--transition);
+        }
+
+        .generate-button:hover {
+            border-color: var(--primary-color);
+            color: var(--primary-color);
+        }
+
+        .password-strength-area {
+            margin-top: 1rem;
+            padding: 1rem;
+            background: #f8fafc;
+            border-radius: 0.5rem;
+        }
+
+        .strength-meter-container {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+
+        .strength-label {
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+            min-width: 4rem;
+        }
+
+        .strength-bar {
+            flex-grow: 1;
+            height: 0.5rem;
+            background: #e5e7eb;
+            border-radius: 1rem;
+            overflow: hidden;
+        }
+
+        .strength-indicator {
+            height: 100%;
+            width: 0;
+            transition: width 0.3s ease, background-color 0.3s ease;
+        }
+
+        .strength-indicator.very-weak { background: var(--danger-color); }
+        .strength-indicator.weak { background: #f97316; }
+        .strength-indicator.medium { background: var(--warning-color); }
+        .strength-indicator.strong { background: #84cc16; }
+        .strength-indicator.very-strong { background: var(--success-color); }
+
+        .generator-options {
+            margin-top: 1.5rem;
+            padding: 1.5rem;
+            background: #f8fafc;
+            border-radius: 0.5rem;
+            border: 1px solid var(--border-color);
+        }
+
+        .generator-options h4 {
+            margin: 0 0 1rem;
+            color: var(--text-primary);
+        }
+
+        .length-control {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+
+        .length-control input[type="range"] {
+            flex-grow: 1;
+        }
+
+        .length-display {
+            min-width: 2.5rem;
+            text-align: center;
+            font-variant-numeric: tabular-nums;
+        }
+
+        .char-options {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+        }
+
+        .option-group {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .option-group input[type="checkbox"] {
+            width: 1rem;
+            height: 1rem;
+            border-radius: 0.25rem;
+            border: 2px solid var(--border-color);
+            cursor: pointer;
+        }
+
+        .option-group label {
+            margin: 0;
+            cursor: pointer;
+            font-size: 0.875rem;
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0.75rem 1.5rem;
+            background: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .btn:hover {
+            background: var(--primary-hover);
+            transform: translateY(-1px);
+        }
+
+        .message {
+            margin-top: 1rem;
+            padding: 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+        }
+
+        .message.success {
+            background: #dcfce7;
+            color: #166534;
+        }
+
+        .message.error {
+            background: #fee2e2;
+            color: #991b1b;
+        }
+
+        .breach-status-area {
+            margin-top: 1rem;
+            padding: 0.75rem;
+            border-radius: 0.5rem;
+            background: #f8fafc;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .breach-label {
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+        }
+
+        .breach-indicator {
+            padding: 0.25rem 0.75rem;
+            border-radius: 1rem;
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+
+        .breach-indicator.safe {
+            background: #dcfce7;
+            color: #166534;
+        }
+
+        .breach-indicator.pwned {
+            background: #fee2e2;
+            color: #991b1b;
+        }
+
+        .breach-indicator.checking {
+            background: #dbeafe;
+            color: #1e40af;
+        }
+
+        #theme-toggle {
+            padding: 0.5rem;
+            background: none;
+            border: 1px solid var(--border-color);
+            border-radius: 0.5rem;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        #theme-toggle:hover {
+            border-color: var(--primary-color);
+        }
+
+        .logout-link {
+            color: var(--text-secondary);
+            text-decoration: none;
+            font-size: 0.875rem;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .logout-link:hover {
+            color: var(--primary-color);
+        }
+
+        footer {
+            text-align: center;
+            padding: 2rem;
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+            }
+
+            .card {
+                padding: 1.5rem;
+            }
+
+            .header-top {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 1rem;
+            }
+
+            nav ul {
+                flex-direction: column;
+            }
+
+            nav a {
+                display: block;
+            }
+
+            .char-options {
+                grid-template-columns: 1fr;
+            }
+
+            .password-input-group {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .toggle-button,
+            .generate-button {
+                position: static;
+                margin-top: 0.5rem;
+            }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg-card: #1f2937;
+                --text-primary: #f3f4f6;
+                --text-secondary: #9ca3af;
+                --border-color: #374151;
+            }
+
+            body {
+                background: #111827;
+            }
+
+            input[type="text"],
+            input[type="password"] {
+                background: #374151;
+                color: #f3f4f6;
+            }
+
+            .password-strength-area,
+            .generator-options,
+            .breach-status-area {
+                background: #374151;
+            }
+
+            .card {
+                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+            }
+
+            .message.success {
+                background: #064e3b;
+                color: #6ee7b7;
+            }
+
+            .message.error {
+                background: #7f1d1d;
+                color: #fecaca;
+            }
+
+            .breach-indicator.safe {
+                background: #064e3b;
+                color: #6ee7b7;
+            }
+
+            .breach-indicator.pwned {
+                background: #7f1d1d;
+                color: #fecaca;
+            }
+
+            .breach-indicator.checking {
+                background: #1e3a8a;
+                color: #93c5fd;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="header-content">
+                <div class="header-top">
+                    <h1>Add New Password</h1>
+                    <div class="header-controls">
+                        <button id="theme-toggle" title="Toggle light/dark theme">
+                            <span class="icon-sun">☀️</span>
+                            <span class="icon-moon" style="display:none;">🌙</span>
+                        </button>
+                        {% if current_user.is_authenticated %}
+                            <a href="{{ url_for('logout') }}" class="logout-link">
+                                <span class="user-email">{{ current_user.email }}</span>
+                                <span class="logout-text">Logout</span>
+                            </a>
+                        {% endif %}
+                    </div>
+                </div>
+                <nav>
+                    <ul>
+                        <li><a href="{{ url_for('add_password_page') }}" class="active">Add Password</a></li>
+                        <li><a href="{{ url_for('storage') }}">View Passwords</a></li>
+                        <li><a href="{{ url_for('analyse') }}">Analyse Passwords</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+
+        <main>
+            <section class="card">
+                <h2>Add New Credential</h2>
+                <form id="password-form">
+                    <div class="form-group">
+                        <label for="service">Service/Website</label>
+                        <input type="text" id="service" name="service" required placeholder="Enter service or website name">
+                    </div>
+                    <div class="form-group">
+                        <label for="username">Username/Email</label>
+                        <input type="text" id="username" name="username" required placeholder="Enter username or email">
+                    </div>
+                    <div class="form-group">
+                        <label for="password">Password</label>
+                        <div class="password-input-group">
+                            <input type="password" id="password" name="password" required autocomplete="new-password" placeholder="Enter password">
+                            <button type="button" id="toggle-password" class="toggle-button" title="Show/hide password">Show</button>
+                            <button type="button" id="generate-password-btn" class="generate-button">Generate</button>
+                        </div>
+                    </div>
+
+                    <div id="password-strength-area" class="password-strength-area" style="display: none;">
+                        <div class="strength-meter-container">
+                            <span class="strength-label">Strength:</span>
+                            <div class="strength-bar">
+                                <div id="strength-indicator" class="strength-indicator"></div>
+                            </div>
+                        </div>
+                        <div id="password-strength-feedback"></div>
+                        <div id="password-breach-status" class="breach-status-area" style="display: none;">
+                            <span class="breach-label">Breach Check:</span>
+                            <span id="breach-status-indicator" class="breach-indicator checking">Checking...</span>
+                        </div>
+                    </div>
+
+                    <div id="generator-options" class="generator-options" style="display: none;">
+                        <h4>Password Generator Options</h4>
+                        <div class="length-control">
+                            <label for="gen-length">Length:</label>
+                            <input type="range" id="gen-length" name="gen-length" min="8" max="64" value="16">
+                            <span class="length-display" id="gen-length-value">16</span>
+                        </div>
+                        <div class="char-options">
+                            <div class="option-group">
+                                <input type="checkbox" id="gen-lowercase" name="gen-lowercase" checked>
+                                <label for="gen-lowercase">Lowercase (a-z)</label>
+                            </div>
+                            <div class="option-group">
+                                <input type="checkbox" id="gen-uppercase" name="gen-uppercase" checked>
+                                <label for="gen-uppercase">Uppercase (A-Z)</label>
+                            </div>
+                            <div class="option-group">
+                                <input type="checkbox" id="gen-digits" name="gen-digits" checked>
+                                <label for="gen-digits">Digits (0-9)</label>
+                            </div>
+                            <div class="option-group">
+                                <input type="checkbox" id="gen-symbols" name="gen-symbols" checked>
+                                <label for="gen-symbols">Symbols (!@#...)</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <button type="submit" class="btn">Encrypt & Save</button>
+                    </div>
+                </form>
+                <div id="message" class="message"></div>
+            </section>
+        </main>
+
+        <footer>
+            <p>Secure Password Manager - End-to-End Encrypted Password Management</p>
+        </footer>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/zxcvbn.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/crypto-helpers.js') }}"></script>
+    <script>
+        // --- E2EE Helper Functions (Encryption/Decryption - Keep for saving) ---
+        function base64UrlDecode(b64url){let b64=b64url.replace(/-/g,'+').replace(/_/g,'/');while(b64.length%4){b64+='=';}return base64ToArrayBuffer(b64);}
+        // Ensure base64ToArrayBuffer and arrayBufferToBase64 are loaded from crypto-helpers.js
+        // async function getEncryptionKeyRawBytes(){ ... } // Keep this function if needed elsewhere, but primarily use sessionStorage key
+        async function getEncryptionKeyRawBytesFromSession(){ const k=sessionStorage.getItem('encryptionKey'); if(!k){console.error("Key missing.");alert("Key missing. Login.");window.location.href="{{ url_for('login') }}"; return null;} try{ const rawKey = base64UrlDecode(k); console.log("Key from session (B64URL Decoded):", arrayBufferToBase64(rawKey)); return rawKey; } catch(e){console.error("Key decode fail:",e);alert("Invalid key. Login.");window.location.href="{{ url_for('login') }}";return null;}}
+        // Ensure encryptData is loaded from crypto-helpers.js
+
+        // --- Theme Toggler ---
+        const themeToggleBtn = document.getElementById('theme-toggle');
+        const sunIcon = themeToggleBtn?.querySelector('.icon-sun');
+        const moonIcon = themeToggleBtn?.querySelector('.icon-moon');
+        const currentTheme = localStorage.getItem('theme') || 'light'; // Default to light
+
+        function applyTheme(theme) {
+            document.body.setAttribute('data-theme', theme);
+            localStorage.setItem('theme', theme);
+            if (sunIcon && moonIcon) {
+                if (theme === 'dark') {
+                    sunIcon.style.display = 'none';
+                    moonIcon.style.display = 'inline';
+                } else {
+                    sunIcon.style.display = 'inline';
+                    moonIcon.style.display = 'none';
+                }
+            }
+        }
+        applyTheme(currentTheme); // Apply initial theme on load
+        if (themeToggleBtn) {
+            themeToggleBtn.addEventListener('click', () => {
+                const newTheme = document.body.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+                applyTheme(newTheme);
+            });
+        }
+
+        // --- Strength & Breach Meter Helpers ---
+         function getStrengthClassFromScore(score) {
+             const classes = ['very-weak', 'weak', 'medium', 'strong', 'very-strong'];
+             return classes[score] || 'very-weak';
+         }
+         function formatBackendFeedback(feedbackArray) {
+             let html = '<ul>';
+             if (!feedbackArray || feedbackArray.length === 0) {
+                 html += '<li class="suggestion">Analysis complete.</li>';
+             } else {
+                 feedbackArray.forEach(fb => {
+                    let itemClass = 'suggestion'; // Default
+                    if (fb.toLowerCase().includes('warning:') || fb.toLowerCase().includes('issue:')) {
+                        itemClass = 'warning';
+                    }
+                    html += `<li class="${itemClass}">${escapeHtml(fb)}</li>`;
+                 });
+             }
+             html += '</ul>';
+             return html;
+         }
+         // Ensure escapeHtml is loaded from crypto-helpers.js
+
+
+        // --- DOMContentLoaded Event Listener ---
+        document.addEventListener('DOMContentLoaded', function() {
+             // Ensure key is in sessionStorage from Flask session or redirect
+             const flaskProvidedKey = "{{ session.get('encryption_key', 'null') }}";
+             if (flaskProvidedKey && flaskProvidedKey !== 'null' && !sessionStorage.getItem('encryptionKey')) {
+                 sessionStorage.setItem('encryptionKey', flaskProvidedKey);
+                 console.log("Encryption key loaded into sessionStorage from Flask.");
+             } else if (!sessionStorage.getItem('encryptionKey')) {
+                 console.warn("Encryption key missing from Flask session and sessionStorage. Redirecting to login.");
+                 window.location.href = "{{ url_for('login') }}";
+                 return; // Stop script execution if no key
+             }
+
+            // --- Get DOM Elements ---
+            const form = document.getElementById('password-form');
+            const messageEl = document.getElementById('message');
+            const togglePasswordBtn = document.getElementById('toggle-password');
+            const passwordInput = document.getElementById('password');
+            const submitButton = form.querySelector('button[type="submit"]');
+            const generatePasswordBtn = document.getElementById('generate-password-btn');
+            const genLengthSlider = document.getElementById('gen-length');
+            const genLengthValueSpan = document.getElementById('gen-length-value');
+            const genLowercaseCheckbox = document.getElementById('gen-lowercase');
+            const genUppercaseCheckbox = document.getElementById('gen-uppercase');
+            const genDigitsCheckbox = document.getElementById('gen-digits');
+            const genSymbolsCheckbox = document.getElementById('gen-symbols');
+
+            // Strength & Breach Display Elements
+            const strengthArea = document.getElementById('password-strength-area');
+            const strengthIndicator = document.getElementById('strength-indicator');
+            const strengthTextLabel = document.getElementById('strength-text-label');
+            const strengthFeedbackDiv = document.getElementById('password-strength-feedback');
+            const breachStatusArea = document.getElementById('password-breach-status');
+            const breachStatusIndicator = document.getElementById('breach-status-indicator');
+
+            // --- Debounce Function ---
+            let debounceTimerStrength;
+            function debounce(func, delay) {
+                return function(...args) {
+                    clearTimeout(debounceTimerStrength);
+                    debounceTimerStrength = setTimeout(() => {
+                        func.apply(this, args);
+                    }, delay);
+                };
+            }
+
+            // --- Function to Update UI for Both Strength and Breach ---
+            async function updatePasswordAnalysisUI(password) {
+                if (!password) {
+                    // Hide strength meter and breach status if password is empty
+                    strengthArea.style.display = 'none';
+                    strengthIndicator.className = 'strength-indicator';
+                    strengthTextLabel.textContent = 'Strength:';
+                    strengthFeedbackDiv.innerHTML = '';
+                    strengthArea.className = 'password-strength-area';
+                    breachStatusArea.style.display = 'none'; // Hide breach area
+                    breachStatusIndicator.textContent = 'Checking...';
+                    breachStatusIndicator.className = 'breach-indicator'; // Reset breach style
+                    return;
+                }
+
+                // --- Show elements and indicate loading ---
+                strengthArea.style.display = 'block'; // Show combined area
+                breachStatusArea.style.display = 'flex'; // Show breach area (use flex for alignment)
+                strengthTextLabel.textContent = 'Strength: Checking...';
+                strengthIndicator.className = 'strength-indicator'; // Reset bar
+                strengthFeedbackDiv.innerHTML = '<ul><li>Checking...</li></ul>';
+                strengthArea.className = 'password-strength-area'; // Reset background
+                breachStatusIndicator.textContent = 'Checking...';
+                breachStatusIndicator.className = 'breach-indicator loading'; // Style for loading
+
+                // --- Perform Checks Concurrently ---
+                const strengthPromise = fetch("{{ url_for('strength_check_api') }}", {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ password: password })
+                });
+                // Use the FREE HIBP check directly from crypto-helpers.js
+                const breachPromise = checkHIBPPassword(password); // Assumes checkHIBPPassword is loaded
+
+                // --- Process Strength Results ---
+                try {
+                    const response = await strengthPromise;
+                    if (!response.ok) {
+                        const errorData = await response.json().catch(() => ({ error: 'Unknown server error' }));
+                        throw new Error(errorData.error || `Server error: ${response.status}`);
+                     }
+                    const result = await response.json();
+                    const score = result.score; // Score 0-4
+                    const strengthClass = getStrengthClassFromScore(score);
+                    const assessment = result.assessment || "Unknown";
+
+                    strengthIndicator.className = `strength-indicator ${strengthClass}`;
+                    strengthTextLabel.textContent = `Strength: ${assessment}`;
+                    strengthFeedbackDiv.innerHTML = formatBackendFeedback(result.feedback);
+                    strengthArea.className = `password-strength-area strength-${score}`;
+
+                } catch (error) {
+                    console.error('Strength Check Error:', error);
+                    strengthTextLabel.textContent = 'Strength: Error';
+                    strengthFeedbackDiv.innerHTML = `<ul><li class="warning">Error checking strength: ${escapeHtml(error.message)}</li></ul>`;
+                    strengthArea.className = 'password-strength-area strength-0'; // Show error style
+                }
+
+                // --- Process Breach Results ---
+                try {
+                    const breachResult = await breachPromise;
+                    if (breachResult.error) {
+                         breachStatusIndicator.textContent = `Error: ${escapeHtml(breachResult.error)}`;
+                         breachStatusIndicator.className = 'breach-indicator error';
+                    } else if (breachResult.isPwned) {
+                         breachStatusIndicator.textContent = `Compromised! Found in ${breachResult.count} breach${breachResult.count > 1 ? 'es' : ''}.`;
+                         breachStatusIndicator.className = 'breach-indicator pwned';
+                    } else {
+                         breachStatusIndicator.textContent = 'Not found in known breaches.';
+                         breachStatusIndicator.className = 'breach-indicator safe';
+                    }
+                } catch (error) { // Should not happen if checkHIBPPassword handles errors, but for safety
+                    console.error("Error processing breach result:", error);
+                    breachStatusIndicator.textContent = 'Error checking breach status.';
+                    breachStatusIndicator.className = 'breach-indicator error';
+                }
+            }
+
+            // --- Password Input Listener ---
+            passwordInput.addEventListener('input', debounce(function() {
+                if (typeof checkHIBPPassword === 'function' && typeof zxcvbn === 'function') { // Check helpers are loaded
+                    updatePasswordAnalysisUI(this.value);
+                } else {
+                    console.error("Required analysis functions (checkHIBPPassword or zxcvbn) not found. Ensure scripts are loaded correctly.");
+                    // Basic fallback or visual error indication could go here
+                    strengthTextLabel.textContent = 'Strength: Error';
+                    strengthArea.style.display = 'block';
+                    strengthFeedbackDiv.innerHTML = `<ul><li class="warning">Error: Analysis script missing.</li></ul>`;
+                     breachStatusIndicator.textContent = 'Error: Checker missing.';
+                     breachStatusIndicator.className = 'breach-indicator error';
+                      breachStatusArea.style.display = 'flex';
+                }
+            }, 600)); // Debounce API calls by 600ms
+
+
+            // --- Generator Logic ---
+             genLengthSlider.addEventListener('input', function() { genLengthValueSpan.textContent = this.value; });
+             togglePasswordBtn.addEventListener('click', function() { const t=passwordInput.type==='password'?'text':'password'; passwordInput.type=t; this.textContent=t==='password'?'Show':'Hide'; });
+             generatePasswordBtn.addEventListener('click', async function() {
+                 messageEl.textContent = ''; messageEl.className = 'message';
+                 generatePasswordBtn.disabled = true; generatePasswordBtn.textContent = '...';
+                 const options = {
+                     length: parseInt(genLengthSlider.value, 10),
+                     use_lowercase: genLowercaseCheckbox.checked,
+                     use_uppercase: genUppercaseCheckbox.checked,
+                     use_digits: genDigitsCheckbox.checked,
+                     use_symbols: genSymbolsCheckbox.checked
+                 };
+                 try {
+                     // Fetch generated password from backend
+                     const response = await fetch("{{ url_for('generate_password_api') }}", {
+                         method: 'POST',
+                         headers: { 'Content-Type': 'application/json' },
+                         body: JSON.stringify(options)
+                     });
+                     const result = await response.json();
+                     if (response.ok && result.password) {
+                         passwordInput.value = result.password;
+                         passwordInput.type = 'text'; // Show generated password briefly
+                         togglePasswordBtn.textContent = 'Hide';
+                         // *** Trigger the analysis immediately after generation ***
+                         if (typeof checkHIBPPassword === 'function' && typeof zxcvbn === 'function') {
+                             updatePasswordAnalysisUI(result.password); // Call analysis function
+                         } else {
+                              console.error("Analysis functions not available after generation.");
+                         }
+                         // Hide after a delay
+                         setTimeout(() => {
+                             if (passwordInput.type === 'text') {
+                                 passwordInput.type = 'password';
+                                 togglePasswordBtn.textContent = 'Show';
+                             }
+                         }, 2500); // Show for 2.5 seconds
+                     } else {
+                         throw new Error(result.error || 'Failed to generate password.');
+                     }
+                 } catch (error) {
+                     messageEl.textContent = `Generation Error: ${escapeHtml(error.message)}`;
+                     messageEl.className = 'message error';
+                     console.error('Generate Password Error:', error);
+                 } finally {
+                     generatePasswordBtn.disabled = false;
+                     generatePasswordBtn.textContent = 'Generate';
+                 }
+             });
+
+             // --- Form Submission Logic ---
+             form.addEventListener('submit', async function(e) {
+                e.preventDefault();
+                messageEl.textContent = ''; messageEl.className = 'message';
+                submitButton.disabled = true; submitButton.textContent = 'Saving...';
+
+                const service = document.getElementById('service').value.trim();
+                const username = document.getElementById('username').value.trim();
+                const password = document.getElementById('password').value; // Get password from input
+
+                if (!service || !username || !password) {
+                    messageEl.textContent = 'Service, Username, and Password are required.';
+                    messageEl.className = 'message error';
+                    submitButton.disabled = false;
+                    submitButton.textContent = 'Encrypt & Save';
+                    return;
+                }
+
+                try {
+                    // Get the raw key bytes from session storage
+                    const keyBuffer = await getEncryptionKeyRawBytesFromSession();
+                    if (!keyBuffer) {
+                        // Error handled within getEncryptionKeyRawBytesFromSession (alert/redirect)
+                        submitButton.disabled = false;
+                        submitButton.textContent = 'Encrypt & Save';
+                        return;
+                    }
+
+                    // Encrypt the data
+                    const dataToEncrypt = { service: service, username: username, password: password };
+                    const encryptedB64Data = await encryptData(keyBuffer, dataToEncrypt); // Assumes encryptData is loaded
+
+                    // Send to backend
+                    const response = await fetch("{{ url_for('add_credential') }}", {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            encrypted_data: encryptedB64Data,
+                            service_hint: service // Use service name as hint
+                        })
+                    });
+                    const result = await response.json();
+
+                    if (response.ok && result.success) {
+                        messageEl.textContent = 'Credential encrypted and saved successfully!';
+                        messageEl.className = 'message success';
+                        form.reset(); // Clear the form
+
+                        // Reset generator options to default
+                        genLengthSlider.value = 16;
+                        genLengthValueSpan.textContent = '16';
+                        genLowercaseCheckbox.checked = true;
+                        genUppercaseCheckbox.checked = true;
+                        genDigitsCheckbox.checked = true;
+                        genSymbolsCheckbox.checked = true;
+                        passwordInput.type = 'password';
+                        togglePasswordBtn.textContent = 'Show';
+
+                        // Reset strength & breach display on successful save
+                        strengthArea.style.display = 'none'; // Hide the whole area
+                        breachStatusArea.style.display = 'none';
+                        strengthIndicator.className = 'strength-indicator';
+                        strengthTextLabel.textContent = 'Strength:';
+                        strengthFeedbackDiv.innerHTML = '';
+                        strengthArea.className = 'password-strength-area';
+                        breachStatusIndicator.textContent = 'Checking...';
+                        breachStatusIndicator.className = 'breach-indicator';
+
+                    } else {
+                        messageEl.textContent = `Error: ${escapeHtml(result.message || 'Failed to save credential.')}`;
+                        messageEl.className = 'message error';
+                    }
+                } catch (error) {
+                    messageEl.textContent = `An error occurred: ${escapeHtml(error.message)}`;
+                    messageEl.className = 'message error';
+                    console.error('Save Credential Error:', error);
+                    // Log specific crypto errors if they occur
+                    if (error.message.includes("encrypt") || error.message.includes("Base64")) {
+                         console.error("Potential encryption or encoding error during save.");
+                    }
+                } finally {
+                    submitButton.disabled = false;
+                    submitButton.textContent = 'Encrypt & Save';
+                }
+             }); // End form submit listener
+
+        }); // End DOMContentLoaded
+    </script>
+</body>
+</html>

templates/login.html

@@ -0,0 +1,248 @@
+<!-- START OF FILE login.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Secure Password Manager</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #2563eb;
+            --primary-hover: #1d4ed8;
+            --success-color: #10b981;
+            --warning-color: #f59e0b;
+            --danger-color: #ef4444;
+            --text-primary: #1f2937;
+            --text-secondary: #4b5563;
+            --bg-card: #ffffff;
+            --border-color: #e5e7eb;
+            --transition: all 0.3s ease;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0;
+            padding: 20px;
+        }
+
+        .auth-container {
+            background: var(--bg-card);
+            max-width: 400px;
+            width: 100%;
+            padding: 2rem;
+            border-radius: 1rem;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+
+        .auth-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .auth-header h2 {
+            color: var(--text-primary);
+            font-size: 1.75rem;
+            font-weight: 700;
+            margin: 0;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        label {
+            display: block;
+            color: var(--text-primary);
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+        }
+
+        input[type="email"],
+        input[type="password"] {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 2px solid var(--border-color);
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            transition: var(--transition);
+            background: white;
+        }
+
+        input[type="email"]:focus,
+        input[type="password"]:focus {
+            border-color: var(--primary-color);
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+        }
+
+        .remember-me {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .remember-me input[type="checkbox"] {
+            width: 1rem;
+            height: 1rem;
+            border-radius: 0.25rem;
+            border: 2px solid var(--border-color);
+            cursor: pointer;
+        }
+
+        .remember-me label {
+            margin: 0;
+            cursor: pointer;
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+        }
+
+        .btn {
+            display: block;
+            width: 100%;
+            padding: 0.875rem;
+            background: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .btn:hover {
+            background: var(--primary-hover);
+            transform: translateY(-1px);
+        }
+
+        .alert {
+            padding: 1rem;
+            margin-bottom: 1.5rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .alert-danger {
+            background: #fee2e2;
+            color: #991b1b;
+            border: 1px solid #fecaca;
+        }
+
+        .alert-success {
+            background: #dcfce7;
+            color: #166534;
+            border: 1px solid #bbf7d0;
+        }
+
+        .alert-warning {
+            background: #fef3c7;
+            color: #92400e;
+            border: 1px solid #fde68a;
+        }
+
+        .alert-info {
+            background: #dbeafe;
+            color: #1e40af;
+            border: 1px solid #bfdbfe;
+        }
+
+        .auth-footer {
+            text-align: center;
+            margin-top: 2rem;
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+        }
+
+        .auth-footer a {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 500;
+            transition: var(--transition);
+        }
+
+        .auth-footer a:hover {
+            text-decoration: underline;
+        }
+
+        @media (max-width: 480px) {
+            .auth-container {
+                padding: 1.5rem;
+            }
+
+            .auth-header h2 {
+                font-size: 1.5rem;
+            }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg-card: #1f2937;
+                --text-primary: #f3f4f6;
+                --text-secondary: #9ca3af;
+                --border-color: #374151;
+            }
+
+            body {
+                background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
+            }
+
+            input[type="email"],
+            input[type="password"] {
+                background: #374151;
+                color: #f3f4f6;
+            }
+
+            .auth-container {
+                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="auth-container">
+        <div class="auth-header">
+            <h2>Welcome Back</h2>
+        </div>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    {% set alert_class = 'alert-' + category if category in ['danger', 'success', 'warning'] else 'alert-info' %}
+                    <div class="alert {{ alert_class }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+
+        <form method="POST" action="{{ url_for('login', next=request.args.get('next')) }}">
+            <div class="form-group">
+                <label for="email">Email Address</label>
+                <input type="email" id="email" name="email" required autocomplete="username" placeholder="Enter your email">
+            </div>
+            <div class="form-group">
+                <label for="password">Master Password</label>
+                <input type="password" id="password" name="password" required autocomplete="current-password" placeholder="Enter your master password">
+            </div>
+            <div class="remember-me">
+                <input type="checkbox" id="remember" name="remember" value="yes">
+                <label for="remember">Remember me</label>
+            </div>
+            <button type="submit" class="btn">Sign In</button>
+        </form>
+        <div class="auth-footer">
+            <p>Don't have an account? <a href="{{ url_for('register') }}">Create one now</a></p>
+        </div>
+    </div>
+</body>
+</html>
+<!-- END OF FILE login.html -->

templates/register.html

@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register - Secure Password Manager</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #2563eb;
+            --primary-hover: #1d4ed8;
+            --success-color: #10b981;
+            --warning-color: #f59e0b;
+            --danger-color: #ef4444;
+            --text-primary: #1f2937;
+            --text-secondary: #4b5563;
+            --bg-card: #ffffff;
+            --border-color: #e5e7eb;
+            --transition: all 0.3s ease;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0;
+            padding: 20px;
+        }
+
+        .auth-container {
+            background: var(--bg-card);
+            max-width: 400px;
+            width: 100%;
+            padding: 2rem;
+            border-radius: 1rem;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+
+        .auth-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .auth-header h2 {
+            color: var(--text-primary);
+            font-size: 1.75rem;
+            font-weight: 700;
+            margin: 0;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        label {
+            display: block;
+            color: var(--text-primary);
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+        }
+
+        input[type="email"],
+        input[type="password"] {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 2px solid var(--border-color);
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            transition: var(--transition);
+            background: white;
+        }
+
+        input[type="email"]:focus,
+        input[type="password"]:focus {
+            border-color: var(--primary-color);
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+        }
+
+        .password-rules {
+            margin-top: 0.5rem;
+            padding: 0.75rem;
+            background: #f8fafc;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+            border-left: 3px solid var(--warning-color);
+        }
+
+        .password-rules strong {
+            color: var(--text-primary);
+            display: block;
+            margin-bottom: 0.25rem;
+        }
+
+        .btn {
+            display: block;
+            width: 100%;
+            padding: 0.875rem;
+            background: var(--success-color);
+            color: white;
+            border: none;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .btn:hover {
+            background: #059669;
+            transform: translateY(-1px);
+        }
+
+        .alert {
+            padding: 1rem;
+            margin-bottom: 1.5rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .alert-danger {
+            background: #fee2e2;
+            color: #991b1b;
+            border: 1px solid #fecaca;
+        }
+
+        .alert-success {
+            background: #dcfce7;
+            color: #166534;
+            border: 1px solid #bbf7d0;
+        }
+
+        .alert-warning {
+            background: #fef3c7;
+            color: #92400e;
+            border: 1px solid #fde68a;
+        }
+
+        .alert-info {
+            background: #dbeafe;
+            color: #1e40af;
+            border: 1px solid #bfdbfe;
+        }
+
+        .auth-footer {
+            text-align: center;
+            margin-top: 2rem;
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+        }
+
+        .auth-footer a {
+            color: var(--primary-color);
+            text-decoration: none;
+            font-weight: 500;
+            transition: var(--transition);
+        }
+
+        .auth-footer a:hover {
+            text-decoration: underline;
+        }
+
+        @media (max-width: 480px) {
+            .auth-container {
+                padding: 1.5rem;
+            }
+
+            .auth-header h2 {
+                font-size: 1.5rem;
+            }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg-card: #1f2937;
+                --text-primary: #f3f4f6;
+                --text-secondary: #9ca3af;
+                --border-color: #374151;
+            }
+
+            body {
+                background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
+            }
+
+            input[type="email"],
+            input[type="password"] {
+                background: #374151;
+                color: #f3f4f6;
+            }
+
+            .password-rules {
+                background: #374151;
+                border-left-color: var(--warning-color);
+            }
+
+            .auth-container {
+                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="auth-container">
+        <div class="auth-header">
+            <h2>Create Account</h2>
+        </div>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    {% set alert_class = 'alert-' + category if category in ['danger', 'success', 'warning'] else 'alert-info' %}
+                    <div class="alert {{ alert_class }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+
+        <form method="POST" action="{{ url_for('register') }}">
+            <div class="form-group">
+                <label for="email">Email Address</label>
+                <input type="email" id="email" name="email" required autocomplete="email" placeholder="Enter your email">
+            </div>
+            <div class="form-group">
+                <label for="password">Master Password</label>
+                <input type="password" id="password" name="password" required autocomplete="new-password" placeholder="Create a strong master password" aria-describedby="passwordHelp">
+                <div id="passwordHelp" class="password-rules">
+                    <strong>Important Security Note:</strong>
+                    Choose a strong, unique Master Password. This password will be used to encrypt all your data and cannot be recovered if forgotten.
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="confirm_password">Confirm Master Password</label>
+                <input type="password" id="confirm_password" name="confirm_password" required autocomplete="new-password" placeholder="Confirm your master password">
+            </div>
+            <button type="submit" class="btn">Create Account</button>
+        </form>
+        <div class="auth-footer">
+            <p>Already have an account? <a href="{{ url_for('login') }}">Sign in</a></p>
+        </div>
+    </div>
+</body>
+</html>

templates/storage.html

@@ -0,0 +1,502 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>View Passwords - Secure Password Manager</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #2563eb;
+            --primary-hover: #1d4ed8;
+            --success-color: #10b981;
+            --warning-color: #f59e0b;
+            --danger-color: #ef4444;
+            --text-primary: #1f2937;
+            --text-secondary: #4b5563;
+            --bg-card: #ffffff;
+            --border-color: #e5e7eb;
+            --transition: all 0.3s ease;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            line-height: 1.6;
+            color: var(--text-primary);
+            background: #f3f4f6;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        header {
+            background: var(--bg-card);
+            border-radius: 1rem;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+
+        h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--text-primary);
+            margin: 0;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        nav ul {
+            display: flex;
+            gap: 1rem;
+            padding: 0;
+            margin: 1rem 0 0;
+            list-style: none;
+        }
+
+        nav a {
+            color: var(--text-secondary);
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            transition: var(--transition);
+        }
+
+        nav a:hover, nav a.active {
+            color: var(--primary-color);
+            background: #f0f9ff;
+        }
+
+        .card {
+            background: var(--bg-card);
+            border-radius: 1rem;
+            padding: 2rem;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            transition: var(--transition);
+        }
+
+        .card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+
+        .search-bar {
+            margin-bottom: 1.5rem;
+        }
+
+        .search-bar input {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 2px solid var(--border-color);
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            transition: var(--transition);
+        }
+
+        .search-bar input:focus {
+            border-color: var(--primary-color);
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+        }
+
+        .table-container {
+            overflow-x: auto;
+            margin: 1.5rem -1rem;
+            padding: 0 1rem;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            margin: 1.5rem 0;
+        }
+
+        th, td {
+            padding: 1rem;
+            text-align: left;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        th {
+            background: #f8fafc;
+            font-weight: 600;
+            color: var(--text-secondary);
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
+
+        tr:hover td {
+            background: #f8fafc;
+        }
+
+        .password-cell {
+            position: relative;
+            min-width: 200px;
+        }
+
+        .password-hidden {
+            font-family: monospace;
+            letter-spacing: 0.1em;
+        }
+
+        .toggle-button {
+            padding: 0.5rem 1rem;
+            background: none;
+            border: 1px solid var(--border-color);
+            border-radius: 0.5rem;
+            color: var(--text-secondary);
+            cursor: pointer;
+            font-size: 0.875rem;
+            transition: var(--transition);
+        }
+
+        .toggle-button:hover {
+            background: #f8fafc;
+            border-color: var(--primary-color);
+            color: var(--primary-color);
+        }
+
+        .toggle-button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .status-message {
+            padding: 1rem;
+            margin: 1rem 0;
+            border-radius: 0.5rem;
+            background: #f0f9ff;
+            color: var(--primary-color);
+            text-align: center;
+        }
+
+        .error-message {
+            background: #fee2e2;
+            color: var(--danger-color);
+        }
+
+        .logout-link {
+            float: right;
+            color: var(--text-secondary);
+            text-decoration: none;
+            font-size: 0.875rem;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .logout-link:hover {
+            color: var(--primary-color);
+        }
+
+        footer {
+            text-align: center;
+            padding: 2rem;
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+            }
+
+            .card {
+                padding: 1.5rem;
+            }
+
+            nav ul {
+                flex-direction: column;
+            }
+
+            nav a {
+                display: block;
+            }
+
+            th, td {
+                padding: 0.75rem;
+                font-size: 0.875rem;
+            }
+
+            .toggle-button {
+                padding: 0.375rem 0.75rem;
+            }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg-card: #1f2937;
+                --text-primary: #f3f4f6;
+                --text-secondary: #9ca3af;
+                --border-color: #374151;
+            }
+
+            body {
+                background: #111827;
+            }
+
+            .card {
+                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+            }
+
+            .search-bar input {
+                background: #374151;
+                color: #f3f4f6;
+            }
+
+            th {
+                background: #374151;
+            }
+
+            tr:hover td {
+                background: #374151;
+            }
+
+            .toggle-button {
+                background: #374151;
+                color: #f3f4f6;
+            }
+
+            .toggle-button:hover {
+                background: #4b5563;
+            }
+
+            .status-message {
+                background: #1e3a8a;
+                color: #93c5fd;
+            }
+
+            .error-message {
+                background: #7f1d1d;
+                color: #fecaca;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="header-content">
+                <div class="header-top">
+                    <h1>Password Storage</h1>
+                    {% if current_user.is_authenticated %}
+                        <a href="{{ url_for('logout') }}" class="logout-link">
+                            <span class="user-email">{{ current_user.email }}</span>
+                            <span class="logout-text">Logout</span>
+                        </a>
+                    {% endif %}
+                </div>
+                <nav>
+                    <ul>
+                        <li><a href="{{ url_for('add_password_page') }}">Add Password</a></li>
+                        <li><a href="{{ url_for('storage') }}" class="active">View Passwords</a></li>
+                        <li><a href="{{ url_for('analyse') }}">Analyse Passwords</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+
+        <main>
+            <section class="card">
+                <h2>Stored Credentials</h2>
+                <div class="search-bar">
+                    <input type="text" id="search-input" placeholder="Search by service name..." title="Search works on the unencrypted service hint">
+                </div>
+                <div class="table-container">
+                    <table id="passwords-table">
+                        <thead>
+                            <tr>
+                                <th>Service/Website</th>
+                                <th>Username/Email</th>
+                                <th>Password</th>
+                                <th>Date Added</th>
+                            </tr>
+                        </thead>
+                        <tbody id="passwords-list">
+                            <!-- Password entries will be populated here by JS -->
+                        </tbody>
+                    </table>
+                </div>
+                <div id="status-indicator" class="status-message">Loading credentials...</div>
+            </section>
+        </main>
+
+        <footer>
+            <p>Secure Password Manager - End-to-End Encrypted Password Management</p>
+        </footer>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/crypto-helpers.js') }}"></script>
+    <script>
+        // --- E2EE Helper Functions (JavaScript using Web Crypto API) ---
+        function base64UrlDecode(b64url) {
+            let b64 = b64url.replace(/-/g, '+').replace(/_/g, '/');
+            while (b64.length % 4) { b64 += '='; }
+            return base64ToArrayBuffer(b64);
+        }
+        async function getEncryptionKeyRawBytes() {
+            const keyB64Url = sessionStorage.getItem('encryptionKey');
+            if (!keyB64Url) {
+                console.error("Key missing"); alert("Key missing. Login again."); window.location.href = "{{ url_for('login') }}"; return null;
+            }
+            try { return base64UrlDecode(keyB64Url); }
+            catch (e) { console.error("Key decode failed:", e); alert("Invalid key. Login again."); window.location.href = "{{ url_for('login') }}"; return null; }
+        }
+        async function decryptData(keyBuffer, encryptedB64Data) {
+            try {
+                const combinedData = base64ToArrayBuffer(encryptedB64Data);
+                if (combinedData.byteLength < 12) throw new Error("Encrypted data too short.");
+                const iv = combinedData.slice(0, 12); const ciphertext = combinedData.slice(12);
+                const cryptoKey = await crypto.subtle.importKey("raw", keyBuffer, { name: "AES-GCM", length: 256 }, false, ["decrypt"]);
+                const decryptedContent = await crypto.subtle.decrypt({ name: "AES-GCM", iv: iv }, cryptoKey, ciphertext);
+                return JSON.parse(new TextDecoder().decode(decryptedContent));
+            } catch (error) { console.error("Decryption failed:", error); return null; }
+        }
+        function arrayBufferToBase64(buffer) {
+            let binary = ''; const bytes = new Uint8Array(buffer); const len = bytes.byteLength;
+            for (let i = 0; i < len; i++) { binary += String.fromCharCode(bytes[i]); } return window.btoa(binary);
+        }
+        function base64ToArrayBuffer(base64) {
+            try {
+                const binary_string = window.atob(base64); const len = binary_string.length; const bytes = new Uint8Array(len);
+                for (let i = 0; i < len; i++) { bytes[i] = binary_string.charCodeAt(i); } return bytes.buffer;
+            } catch (e) { console.error("Base64 decoding failed:", e); throw new Error("Invalid Base64 string"); }
+        }
+        function escapeHtml(unsafe) {
+             // Corrected escaping
+             return unsafe
+                 .replace(/&/g, "&")
+                 .replace(/</g, "<")
+                 .replace(/>/g, ">")
+                 .replace(/"/g, "\"")
+                 .replace(/'/g, "'");
+        }
+
+        // --- Main Logic ---
+        document.addEventListener('DOMContentLoaded', function() {
+            const flaskProvidedKey = "{{ session.get('encryption_key', 'null') }}";
+             if (flaskProvidedKey && flaskProvidedKey !== 'null' && !sessionStorage.getItem('encryptionKey')) {
+                 sessionStorage.setItem('encryptionKey', flaskProvidedKey);
+             }
+
+            const passwordsListBody = document.getElementById('passwords-list');
+            const statusIndicator = document.getElementById('status-indicator');
+            const searchInput = document.getElementById('search-input');
+
+            let allCredentialsData = [];
+            let encryptionKey = null;
+
+            async function initialize() {
+                statusIndicator.textContent = 'Retrieving key...';
+                try {
+                    encryptionKey = await getEncryptionKeyRawBytes();
+                    if (!encryptionKey) { statusIndicator.textContent = 'Key missing. Login.'; statusIndicator.classList.add('error-message'); return; }
+                    fetchAndDisplayCredentials();
+                } catch (error) { statusIndicator.textContent = `Init Error: ${error.message}`; statusIndicator.classList.add('error-message'); }
+            }
+
+            async function fetchAndDisplayCredentials() {
+                statusIndicator.textContent = 'Loading credentials...'; statusIndicator.classList.remove('error-message');
+                passwordsListBody.innerHTML = '';
+                try {
+                    const response = await fetch("{{ url_for('get_credentials') }}");
+                    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
+                    const data = await response.json();
+                    if (data && Array.isArray(data)) {
+                         allCredentialsData = data; statusIndicator.textContent = '';
+                         if (data.length === 0) { statusIndicator.textContent = 'No credentials stored yet.'; }
+                         else { displayPlaceholders(data); }
+                    } else { throw new Error("Invalid data received."); }
+                } catch (error) { console.error('Fetch error:', error); statusIndicator.textContent = `Load Error: ${error.message}`; statusIndicator.classList.add('error-message'); }
+            }
+
+            function displayPlaceholders(credentials) {
+                passwordsListBody.innerHTML = ''; statusIndicator.textContent = '';
+                if (credentials.length === 0){ statusIndicator.textContent = 'No credentials match search.'; return; }
+                credentials.forEach(item => {
+                    const row = passwordsListBody.insertRow();
+                    const date = new Date(item.created_at);
+                    const formattedDate = date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                    const serviceDisplay = item.service_hint ? escapeHtml(item.service_hint) : '(Service Hidden)';
+                    const usernameDisplay = '(Username Hidden)';
+                    row.innerHTML = `
+                        <td class="service-cell">${serviceDisplay}</td>
+                        <td class="username-cell">${usernameDisplay}</td>
+                        <td class="password-cell">
+                            <span class="password-hidden" data-encrypted="${item.encrypted_data}" data-id="${item.id}">••••••••</span>
+                            <button class="toggle-button password-toggle" title="Show/hide password">Show</button>
+                        </td>
+                        <td>${formattedDate}</td>
+                    `;
+                });
+                addToggleListeners();
+            }
+
+            function addToggleListeners() {
+                document.querySelectorAll('.password-toggle').forEach(button => {
+                    const newButton = button.cloneNode(true); button.parentNode.replaceChild(newButton, button);
+                    newButton.addEventListener('click', handleToggleClick);
+                });
+            }
+
+             async function handleToggleClick(event) {
+                 if (!encryptionKey) { alert("Key not available. Login again."); return; }
+                 const button = event.target;
+                 const passwordSpan = button.previousElementSibling;
+                 const encryptedDataB64 = passwordSpan.dataset.encrypted;
+                 const credentialId = passwordSpan.dataset.id;
+                 const row = button.closest('tr');
+                 const serviceCell = row.querySelector('.service-cell');
+                 const usernameCell = row.querySelector('.username-cell');
+                 button.disabled = true;
+
+                 if (passwordSpan.classList.contains('password-hidden')) {
+                     button.textContent = 'Decrypting...';
+                     const decryptedData = await decryptData(encryptionKey, encryptedDataB64);
+                     if (decryptedData) {
+                         passwordSpan.textContent = escapeHtml(decryptedData.password);
+                         passwordSpan.classList.remove('password-hidden');
+                         serviceCell.textContent = escapeHtml(decryptedData.service);
+                         usernameCell.textContent = escapeHtml(decryptedData.username);
+                         button.textContent = 'Hide';
+                     } else {
+                         passwordSpan.textContent = 'Decrypt Error';
+                         passwordSpan.classList.remove('password-hidden'); passwordSpan.style.color = 'red';
+                         button.textContent = 'Error'; // Keep disabled or allow retry?
+                     }
+                 } else {
+                     passwordSpan.textContent = '••••••••';
+                     passwordSpan.classList.add('password-hidden'); passwordSpan.style.color = '';
+                     button.textContent = 'Show';
+                     const originalCredential = allCredentialsData.find(c => c.id === credentialId);
+                     const serviceDisplay = originalCredential?.service_hint ? escapeHtml(originalCredential.service_hint) : '(Service Hidden)';
+                     serviceCell.textContent = serviceDisplay; usernameCell.textContent = '(Username Hidden)';
+                 }
+                 button.disabled = false;
+             }
+
+            searchInput.addEventListener('input', function() {
+                const searchTerm = this.value.toLowerCase().trim();
+                if (!searchTerm) { displayPlaceholders(allCredentialsData); return; }
+                const filteredCredentials = allCredentialsData.filter(item =>
+                    item.service_hint && item.service_hint.toLowerCase().includes(searchTerm)
+                );
+                displayPlaceholders(filteredCredentials);
+            });
+
+            initialize(); // Start
+        });
+    </script>
+</body>
+</html>