diff --git a/.cursor/rules/backend-house-style.mdc b/.cursor/rules/backend-house-style.mdc
new file mode 100644
index 0000000..99bf390
--- /dev/null
+++ b/.cursor/rules/backend-house-style.mdc
@@ -0,0 +1,122 @@
+---
+description: Strict HR-ATS backend house style — layering, routes, serializers, auth
+globs: backend/**/*.py
+alwaysApply: false
+---
+
+# HR-ATS Backend — singular pattern (mandatory)
+
+Match existing modules (`users/`, `inbox/`) exactly. Do not introduce alternate frameworks, layers, or response shapes.
+
+## Package layout (every domain)
+
+```
+backend/<domain>/
+  app.py          # routes only — HTTP in/out
+  views.py        # service class — business logic
+  models.py       # SQLModel table + classmethod DB accessors
+  serializers.py  # hand-rolled dict builders (no Pydantic response models)
+  plugins.py      # pure helpers (hash, JWT, clean payload) — NO FastAPI imports
+  permissions.py  # OAuth2 scheme + Depends aliases (auth domains only)
+```
+
+- Mount with bare `router = APIRouter()`; register in `main.py` via `app.include_router(...)`.
+- No package `__init__.py`; run uvicorn from `backend/` so imports are top-level (`users.app`, `db_setup`).
+- Config: `load_dotenv()` + `os.getenv(...)` in the module that needs it. Do not extend `db_setup.Settings` for non-DB keys.
+
+## Layer duties (strict)
+
+| Layer | Owns | Must NOT |
+|---|---|---|
+| `app.py` | Routes, request Pydantic models (inline), `JSONResponse`, call serializers for HTTP payloads, inject `CurrentUser` / `session` | Business rules, DB queries, JWT encode logic beyond calling plugins |
+| `views.py` | Validate rules, call models, raise `HTTPException`, return ORM rows or serialized dicts for CRUD | Build login/token HTTP envelopes; call `serialize_token` |
+| `models.py` | Table fields, `select`/`insert`/`update`/`soft_delete`, `selectinload` when relations are needed | HTTPExceptions, serializers, FastAPI |
+| `serializers.py` | `serialize_*` → plain `dict` (`str(uuid)`, `.isoformat()` dates, never password) | DB access, Depends |
+| `plugins.py` | Pure functions; raise library errors (e.g. `jwt.*`), not HTTP | Import FastAPI |
+| `permissions.py` | `OAuth2PasswordBearer`, `get_current_user`, `CurrentUser = Annotated[...]`, `require_permission` | Route handlers |
+
+## Route pattern (`app.py`)
+
+- Verb-in-path: `/users/create`, `/users/fetch`, `/users/login` — not `/auth/token`, not REST nouns-only.
+- Every handler uses this wrapper:
+
+```python
+try:
+    service=User(session=session)
+    data=await service.some_method(...)
+    return JSONResponse(content={"data":data,"status_code":200})
+except HTTPException:
+    raise
+except Exception as e:
+    raise HTTPException(status_code=500,detail=str(e))
+```
+
+- List fetch: `{"data":items,"total":total,"status_code":200}`; single-by-id: `total: 1`.
+- Login/refresh: build tokens in the route, then serialize:
+
+```python
+user=await service.authenticate_user(...)
+tokens=serialize_token(create_access_token(user),create_refresh_token(user),user)
+return JSONResponse(content={**tokens,"status_code":200})
+```
+
+- Request schemas live **inline** in `app.py` (`UserCreate`, `TokenRefresh`, …). Not in `serializers.py`.
+- Dependencies: default form `session: AsyncSession = Depends(get_session)` unless `Annotated` is required (auth form / `CurrentUser` before other defaults).
+- Tight spacing house style: `service=User(session=session)`, `detail=str(e)`, `key=value` in calls — match neighbors, do not “pretty-reformat” whole files.
+
+## Service pattern (`views.py`)
+
+```python
+class User:
+    def __init__(self,session:AsyncSession):
+        self.session=session
+
+    async def create_user(self,payload):
+        ...
+        return serialize_user(user)   # CRUD returns serialized dict
+```
+
+- Untyped method args (match existing). Raise `HTTPException(status_code=...,detail="...")`.
+- Auth methods (`authenticate_user`, `refresh_access_token`) return the **ORM user** only — never `serialize_token`.
+- After email lookup that lacks `selectinload(role)`, re-fetch via `get_user_by_id` before anything that touches `user.role`.
+
+## Model accessors (`models.py`)
+
+- `@classmethod async def get_* / insert_* / update_* / soft_delete_* / count_*`.
+- Soft delete: set `is_deleted=True`, `is_active=False`.
+- Use `selectinload(cls.role)` on fetches that will be serialized with role fields.
+- Commit inside model write methods (existing pattern).
+
+## Auth pattern
+
+- Access + refresh JWTs via `plugins` (`type` claim must be checked in `decode_token`).
+- `permissions.CurrentUser` on every protected `/users/*` route; login + refresh stay open.
+- `get_current_user`: decode access → DB load by `sub` → reject missing/deleted/inactive → `serialize_user`.
+- Login uses `OAuth2PasswordRequestForm`; username field carries email.
+- OAuth2 fields (`access_token`, `refresh_token`, `token_type`, `expires_in`) at **response root**; user under `data`.
+- `tokenUrl="users/login"` (no leading slash).
+- No FastAPI in `plugins.py`. Translate `jwt.PyJWTError` → 401 in `permissions` / `views`.
+
+## Dependencies / env
+
+- Pin in `requirements.txt` under comment banners with trailing rationale comments.
+- Secrets in `backend/.env`; document keys in `backend/.env.example`.
+- JWT times: `datetime.now(timezone.utc)` only (never naive `datetime.now()` for token `iat`/`exp`).
+
+## Hard bans
+
+- No new abstraction layers (repositories, use-cases, DTOs beyond inline Pydantic requests).
+- No Pydantic response models; no `jsonable_encoder` for these routes.
+- No changing response envelope (`data` + `status_code`) or inventing `/api/v1` prefixes.
+- No drive-by refactors or reformatting unrelated code.
+- No RBAC second scheme — vocabulary and `require_permission` live in `users/permissions.py` only.
+- Do not touch `inbox/` when the task is `users/` (and vice versa) unless asked.
+- No `__init__.py` packages; no moving request models into `serializers.py`.
+
+## When adding a new domain endpoint
+
+1. Accessor on `models.py` if DB changes.
+2. Method on service in `views.py`.
+3. `serialize_*` in `serializers.py` if new shape.
+4. Route in `app.py` with the standard try/except + `JSONResponse`.
+5. Protect with `current_user: CurrentUser` if under an authenticated router.
diff --git a/.gitignore b/.gitignore
index 368e0dd..c9fae03 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,6 +36,11 @@ env/
 .env
 .env.*
 !.env.example
+!frontend/.env.development
+!frontend/.env.production
+
+# Postman/Insomnia environments holding real API keys
+*.postman_environment.local.json
 
 # Logs & temp
 *.log
@@ -43,4 +48,9 @@ tmp/
 temp/
 .cache/
 
+# Frontend build
+node_modules/
+frontend/dist/
+
 **.pdf
+**_**_**.py
\ No newline at end of file
diff --git a/backend/.env.example b/backend/.env.example
new file mode 100644
index 0000000..f299328
--- /dev/null
+++ b/backend/.env.example
@@ -0,0 +1,28 @@
+DB_USERNAME=
+DB_PASSWORD=
+DB_HOST=
+DB_PORT=
+DB_NAME=
+EMAIL_URL=
+
+JWT_SECRET_KEY=
+JWT_ALGORITHM=HS256
+JWT_ACCESS_TOKEN_EXPIRE_MINUTES=30
+JWT_REFRESH_TOKEN_EXPIRE_DAYS=7
+JWT_RESET_TOKEN_EXPIRE_MINUTES=10
+
+TEAMS_MAIL_API_URL=
+TEAMS_API_TOKEN=
+
+RESET_CODE_TTL_SECONDS=60
+RESET_CODE_RESEND_SECONDS=30
+RESET_CODE_MAX_ATTEMPTS=5
+
+FRONTEND_URL=http://localhost:5173
+CONFIRM_EMAIL_PATH=/auth/confirm-email
+CONFIRM_TOKEN_TTL_SECONDS=86400
+CONFIRM_TOKEN_RESEND_SECONDS=60
+
+BUFFER_API=
+BUFFER_API_URL=https://api.buffer.com
+BUFFER_CHANNEL_ID=
diff --git a/backend/forget_password/app.py b/backend/forget_password/app.py
new file mode 100644
index 0000000..38c408d
--- /dev/null
+++ b/backend/forget_password/app.py
@@ -0,0 +1,68 @@
+from fastapi import APIRouter,Depends
+from fastapi.responses import JSONResponse
+from fastapi import HTTPException
+from db_setup import get_session
+from sqlalchemy.ext.asyncio import AsyncSession
+from pydantic import BaseModel, EmailStr
+from forget_password.views import ForgetPassword
+from forget_password.permissions import ResetCredentials
+from forget_password.serializers import serialize_reset_token
+from users.plugins import create_reset_token
+from dotenv import load_dotenv
+load_dotenv()
+
+router = APIRouter()
+
+
+class ForgetPasswordRequest(BaseModel):
+    email: EmailStr
+
+
+class ForgetPasswordVerify(BaseModel):
+    email: EmailStr
+    code: str
+
+
+class ForgetPasswordNew(BaseModel):
+    password: str
+
+
+@router.post("/users/forget-password")
+async def request_reset_code(payload: ForgetPasswordRequest,session: AsyncSession = Depends(get_session)):
+    try:
+        service=ForgetPassword(session=session)
+        data=await service.request_code(payload.email)
+        return JSONResponse(content={"data":data,"status_code":200})
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
+
+
+@router.post("/users/forget-password/verify-code")
+async def verify_reset_code(payload: ForgetPasswordVerify,session: AsyncSession = Depends(get_session)):
+    try:
+        service=ForgetPassword(session=session)
+        email,code_id=await service.verify_code(payload.email,payload.code)
+        tokens=serialize_reset_token(create_reset_token(email,code_id=code_id),email)
+        return JSONResponse(content={**tokens,"status_code":200})
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
+
+
+@router.post("/users/forget-password/new-password")
+async def set_new_password(
+    payload: ForgetPasswordNew,
+    credentials: ResetCredentials,
+    session: AsyncSession = Depends(get_session),
+):
+    try:
+        service=ForgetPassword(session=session)
+        data=await service.set_new_password(credentials.credentials,payload.password)
+        return JSONResponse(content={"data":data,"status_code":200})
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
diff --git a/backend/forget_password/models.py b/backend/forget_password/models.py
new file mode 100644
index 0000000..eb04e29
--- /dev/null
+++ b/backend/forget_password/models.py
@@ -0,0 +1,106 @@
+import uuid
+from datetime import datetime, timezone
+
+from sqlalchemy import DateTime
+from sqlalchemy.ext.asyncio import AsyncSession
+from sqlmodel import Field, SQLModel, select
+
+
+def _now() -> datetime:
+    return datetime.now(timezone.utc)
+
+
+class PasswordResetCodes(SQLModel, table=True):
+    __tablename__ = "password_reset_codes"
+
+    id: uuid.UUID = Field(default_factory=uuid.uuid4, primary_key=True)
+    email: str = Field(index=True)
+    code_hash: str
+    expires_at: datetime = Field(sa_type=DateTime(timezone=True))
+    attempts: int = Field(default=0)
+    is_used: bool = Field(default=False)
+    verified_at: datetime | None = Field(default=None, sa_type=DateTime(timezone=True))
+    created_at: datetime = Field(default_factory=_now, sa_type=DateTime(timezone=True))
+    updated_at: datetime = Field(default_factory=_now, sa_type=DateTime(timezone=True))
+
+    @staticmethod
+    def _as_uuid(record_id: str) -> uuid.UUID | None:
+        try:
+            return uuid.UUID(str(record_id))
+        except ValueError:
+            return None
+
+    @classmethod
+    async def get_code_by_id(cls, session: AsyncSession, record_id: str):
+        uid = cls._as_uuid(record_id)
+        if uid is None:
+            return None
+        result = await session.execute(select(cls).where(cls.id == uid))
+        return result.scalars().first()
+
+    @classmethod
+    async def get_active_code_by_email(cls, session: AsyncSession, email: str):
+        """Newest unused code for email (expiry checked in Python by the service)."""
+        statement = (
+            select(cls)
+            .where(cls.email == email, cls.is_used == False)  # noqa: E712
+            .order_by(cls.created_at.desc())
+        )
+        result = await session.execute(statement)
+        return result.scalars().first()
+
+    @classmethod
+    async def insert_code(cls, session: AsyncSession, fields: dict):
+        row = cls(**fields)
+        session.add(row)
+        await session.commit()
+        return await cls.get_code_by_id(session, row.id)
+
+    @classmethod
+    async def increment_attempts(cls, session: AsyncSession, record_id: str):
+        row = await cls.get_code_by_id(session, record_id)
+        if not row:
+            return None
+        row.attempts = (row.attempts or 0) + 1
+        row.updated_at = _now()
+        session.add(row)
+        await session.commit()
+        await session.refresh(row)
+        return row
+
+    @classmethod
+    async def mark_verified(cls, session: AsyncSession, record_id: str):
+        row = await cls.get_code_by_id(session, record_id)
+        if not row:
+            return None
+        row.verified_at = _now()
+        row.updated_at = _now()
+        session.add(row)
+        await session.commit()
+        await session.refresh(row)
+        return row
+
+    @classmethod
+    async def mark_used(cls, session: AsyncSession, record_id: str):
+        row = await cls.get_code_by_id(session, record_id)
+        if not row:
+            return None
+        row.is_used = True
+        row.updated_at = _now()
+        session.add(row)
+        await session.commit()
+        await session.refresh(row)
+        return row
+
+    @classmethod
+    async def invalidate_codes_for_email(cls, session: AsyncSession, email: str):
+        statement = select(cls).where(cls.email == email, cls.is_used == False)  # noqa: E712
+        result = await session.execute(statement)
+        rows = result.scalars().all()
+        now = _now()
+        for row in rows:
+            row.is_used = True
+            row.updated_at = now
+            session.add(row)
+        await session.commit()
+        return len(rows)
diff --git a/backend/forget_password/permissions.py b/backend/forget_password/permissions.py
new file mode 100644
index 0000000..39719f4
--- /dev/null
+++ b/backend/forget_password/permissions.py
@@ -0,0 +1,11 @@
+"""Bearer scheme for password-reset tokens (type=reset JWT)."""
+
+from __future__ import annotations
+
+from typing import Annotated
+
+from fastapi import Depends
+from fastapi.security import HTTPAuthorizationCredentials, HTTPBearer
+
+reset_scheme = HTTPBearer()
+ResetCredentials = Annotated[HTTPAuthorizationCredentials, Depends(reset_scheme)]
diff --git a/backend/forget_password/plugins.py b/backend/forget_password/plugins.py
new file mode 100644
index 0000000..fb4b67e
--- /dev/null
+++ b/backend/forget_password/plugins.py
@@ -0,0 +1,77 @@
+"""Forget-password helpers — OTP generation, hashing, and Teams mail send.
+
+Pure module: no FastAPI imports and no HTTPException.
+"""
+
+from __future__ import annotations
+
+import os
+import secrets
+from datetime import datetime, timedelta, timezone
+
+import httpx
+from dotenv import load_dotenv
+
+from users.plugins import hash_password, verify_password
+
+load_dotenv()
+
+TEAMS_MAIL_API_URL = os.getenv("TEAMS_MAIL_API_URL")
+TEAMS_API_TOKEN = os.getenv("TEAMS_API_TOKEN")
+RESET_CODE_TTL_SECONDS = int(os.getenv("RESET_CODE_TTL_SECONDS", "60"))
+RESET_CODE_RESEND_SECONDS = int(os.getenv("RESET_CODE_RESEND_SECONDS", "30"))
+RESET_CODE_MAX_ATTEMPTS = int(os.getenv("RESET_CODE_MAX_ATTEMPTS", "5"))
+MAIL_ACCEPTED_STATUS = 202
+
+
+def now_utc() -> datetime:
+    return datetime.now(timezone.utc)
+
+
+def code_expiry(*, now: datetime | None = None) -> datetime:
+    return (now or now_utc()) + timedelta(seconds=RESET_CODE_TTL_SECONDS)
+
+
+def generate_code() -> str:
+    return f"{secrets.randbelow(1_000_000):06d}"
+
+
+def hash_code(code: str) -> str:
+    return hash_password(code)
+
+
+def verify_code(code: str, code_hash: str) -> bool:
+    return verify_password(code, code_hash)
+
+
+def render_reset_email(code: str, ttl: int) -> tuple[str, str]:
+    subject = "Your TalentFlow password reset code"
+    html = (
+        f"<p>Your password reset code is <strong>{code}</strong>.</p>"
+        f"<p>It expires in {ttl} seconds. If you did not request this, ignore this email.</p>"
+    )
+    return subject, html
+
+
+async def send_reset_mail(to_email: str, subject: str, html: str) -> None:
+    if not TEAMS_MAIL_API_URL or not TEAMS_API_TOKEN:
+        raise RuntimeError("TEAMS_MAIL_API_URL and TEAMS_API_TOKEN must be set")
+    fields = [
+        ("subject", (None, subject)),
+        ("body", (None, html)),
+        ("content_type", (None, "html")),
+        ("save_to_sent_items", (None, "false")),
+        ("to", (None, to_email)),
+    ]
+    async with httpx.AsyncClient(timeout=15.0) as client:
+        response = await client.post(
+            TEAMS_MAIL_API_URL,
+            files=fields,
+            headers={"Authorization": f"Bearer {TEAMS_API_TOKEN}"},
+        )
+    if response.status_code != MAIL_ACCEPTED_STATUS:
+        raise httpx.HTTPStatusError(
+            response.text,
+            request=response.request,
+            response=response,
+        )
diff --git a/backend/forget_password/serializers.py b/backend/forget_password/serializers.py
new file mode 100644
index 0000000..a96a7dd
--- /dev/null
+++ b/backend/forget_password/serializers.py
@@ -0,0 +1,27 @@
+from forget_password.plugins import RESET_CODE_RESEND_SECONDS,RESET_CODE_TTL_SECONDS
+from users.plugins import RESET_TOKEN_EXPIRE_SECONDS
+
+
+def serialize_reset_request(email: str,expires_at) -> dict:
+    return {
+        "email": email,
+        "expires_at": expires_at.isoformat() if expires_at else None,
+        "expires_in": RESET_CODE_TTL_SECONDS,
+        "resend_after": RESET_CODE_RESEND_SECONDS,
+    }
+
+
+def serialize_reset_token(reset_token: str,email: str) -> dict:
+    return {
+        "reset_token": reset_token,
+        "token_type": "bearer",
+        "expires_in": RESET_TOKEN_EXPIRE_SECONDS,
+        "data": {"email": email},
+    }
+
+
+def serialize_reset_result(email: str) -> dict:
+    return {
+        "email": email,
+        "password_updated": True,
+    }
diff --git a/backend/forget_password/views.py b/backend/forget_password/views.py
new file mode 100644
index 0000000..cb9fc7b
--- /dev/null
+++ b/backend/forget_password/views.py
@@ -0,0 +1,109 @@
+from fastapi import HTTPException
+from sqlalchemy.ext.asyncio import AsyncSession
+import httpx
+import jwt
+
+from forget_password.models import PasswordResetCodes
+from forget_password.plugins import (
+    RESET_CODE_MAX_ATTEMPTS,
+    RESET_CODE_RESEND_SECONDS,
+    code_expiry,
+    generate_code,
+    hash_code,
+    now_utc,
+    render_reset_email,
+    send_reset_mail,
+    verify_code,
+    RESET_CODE_TTL_SECONDS,
+)
+from forget_password.serializers import serialize_reset_request,serialize_reset_result
+from users.models import Users
+from users.plugins import decode_token,hash_password
+
+
+class ForgetPassword:
+    def __init__(self,session:AsyncSession):
+        self.session=session
+
+    async def request_code(self,email):
+        user=await Users.get_user_by_email(self.session,email)
+        if not user or user.is_deleted or not user.is_active:
+            raise HTTPException(status_code=404,detail="No account found for this email")
+
+        active=await PasswordResetCodes.get_active_code_by_email(self.session,email)
+        if active:
+            age=(now_utc()-active.created_at).total_seconds()
+            if age<RESET_CODE_RESEND_SECONDS and active.expires_at>now_utc():
+                raise HTTPException(status_code=429,detail="Please wait before requesting another code")
+
+        await PasswordResetCodes.invalidate_codes_for_email(self.session,email)
+
+        code=generate_code()
+        expires_at=code_expiry()
+        row=await PasswordResetCodes.insert_code(self.session,{
+            "email":email,
+            "code_hash":hash_code(code),
+            "expires_at":expires_at,
+        })
+
+        subject,html=render_reset_email(code,RESET_CODE_TTL_SECONDS)
+        try:
+            await send_reset_mail(email,subject,html)
+        except (httpx.HTTPError,RuntimeError) as e:
+            await PasswordResetCodes.mark_used(self.session,str(row.id))
+            raise HTTPException(status_code=502,detail="Failed to send reset email") from e
+
+        return serialize_reset_request(email,expires_at)
+
+    async def verify_code(self,email,code):
+        row=await PasswordResetCodes.get_active_code_by_email(self.session,email)
+        if not row:
+            raise HTTPException(status_code=400,detail="No active reset code for this email")
+        if row.expires_at<=now_utc():
+            raise HTTPException(status_code=400,detail="Reset code has expired")
+        if (row.attempts or 0)>=RESET_CODE_MAX_ATTEMPTS:
+            raise HTTPException(status_code=429,detail="Too many invalid attempts")
+
+        if not verify_code(code,row.code_hash):
+            updated=await PasswordResetCodes.increment_attempts(self.session,str(row.id))
+            if updated and (updated.attempts or 0)>=RESET_CODE_MAX_ATTEMPTS:
+                raise HTTPException(status_code=429,detail="Too many invalid attempts")
+            raise HTTPException(status_code=400,detail="Invalid reset code")
+
+        await PasswordResetCodes.mark_verified(self.session,str(row.id))
+        return email,str(row.id)
+
+    async def set_new_password(self,reset_token,password):
+        try:
+            payload=decode_token(reset_token,expected_type="reset")
+        except jwt.PyJWTError:
+            raise HTTPException(
+                status_code=401,
+                detail="Invalid or expired reset token",
+                headers={"WWW-Authenticate":"Bearer"},
+            )
+
+        email=payload.get("sub")
+        code_id=payload.get("crid")
+        if not email or not code_id:
+            raise HTTPException(
+                status_code=401,
+                detail="Invalid or expired reset token",
+                headers={"WWW-Authenticate":"Bearer"},
+            )
+
+        row=await PasswordResetCodes.get_code_by_id(self.session,code_id)
+        if not row or row.is_used or row.email!=email or not row.verified_at:
+            raise HTTPException(
+                status_code=401,
+                detail="Invalid or expired reset token",
+                headers={"WWW-Authenticate":"Bearer"},
+            )
+
+        user=await Users.get_user_by_email(self.session,email)
+        if not user or user.is_deleted:
+            raise HTTPException(status_code=404,detail="User not found")
+
+        await Users.update_user(self.session,str(user.id),{"password":hash_password(password)})
+        await PasswordResetCodes.mark_used(self.session,str(row.id))
+        return serialize_reset_result(email)
diff --git a/backend/job/app.py b/backend/job/app.py
new file mode 100644
index 0000000..62e22cb
--- /dev/null
+++ b/backend/job/app.py
@@ -0,0 +1,93 @@
+from fastapi import APIRouter,Depends
+from fastapi.responses import JSONResponse
+from fastapi import HTTPException
+from db_setup import get_session
+from sqlalchemy.ext.asyncio import AsyncSession
+from pydantic import BaseModel, model_validator
+from users.permissions import PermissionTag, require_permission
+from job.job_post.views import JobPost
+from job.job_post.plugins import PlatformAlias
+from dotenv import load_dotenv
+load_dotenv()
+
+router = APIRouter()
+
+
+class JobPostCreate(BaseModel):
+    title: str
+    experience_min: int | None = None
+    experience_max: int | None = None
+    requirements: list[str] = []
+    optional_skills: list[str] = []
+    salary: str = "Anonymous"
+    location: str | None = None
+    employment_type: str | None = None
+    platform: str = "linkedin"
+    description: str | None = None
+    platform: str | None = None
+    channel_id: str | None = None
+    mode: str = "addToQueue"
+    due_at: str | None = None
+
+    @model_validator(mode="after")
+    def validate_mode_and_due_at(self):
+        allowed = {"addToQueue", "shareNow", "customScheduled"}
+        if self.mode not in allowed:
+            raise ValueError(f"mode must be one of {sorted(allowed)}")
+        if self.mode == "customScheduled" and not self.due_at:
+            raise ValueError("due_at is required when mode is customScheduled")
+        return self
+
+@router.get("/jobs/alias")
+async def get_job_alias():
+    try:
+        alias_lst=[k.name for k in PlatformAlias]
+        return JSONResponse(content={"data":alias_lst,"status_code":200})
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
+
+
+@router.post("/candidate/cv_upload")
+async def cv_upload(
+    current_user: dict = Depends(require_permission(PermissionTag.CANDIDATES_CREATE)),
+    session: AsyncSession = Depends(get_session),
+):
+    try:
+        pass
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
+
+
+@router.post("/job/post-job")
+async def post_job(
+    payload: JobPostCreate,
+    current_user: dict = Depends(require_permission(PermissionTag.JOB_BOARD_CREATE)),
+    session: AsyncSession = Depends(get_session),
+):
+    try:
+        service=JobPost(session=session)
+        data=await service.post_job(payload.model_dump(),current_user)
+        return JSONResponse(content={"data":data,"status_code":200})
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
+
+
+@router.get("/job/buffer/channels")
+async def buffer_channels(
+    current_user: dict = Depends(require_permission(PermissionTag.JOB_BOARD_VIEW)),
+    session: AsyncSession = Depends(get_session),
+):
+    try:
+        service=JobPost(session=session)
+        data=await service.list_channels()
+        return JSONResponse(content={"data":data,"total":len(data),"status_code":200})
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
diff --git a/backend/job/job_post/models.py b/backend/job/job_post/models.py
new file mode 100644
index 0000000..0c00b49
--- /dev/null
+++ b/backend/job/job_post/models.py
@@ -0,0 +1,117 @@
+import uuid
+from datetime import datetime, timezone
+from typing import TYPE_CHECKING, Optional
+
+from sqlalchemy import DateTime, JSON
+from sqlalchemy.ext.asyncio import AsyncSession
+from sqlmodel import Field, Relationship, SQLModel, select
+
+if TYPE_CHECKING:  # runtime import would be circular: users.models imports this module
+    from users.models import Users
+
+
+def _now() -> datetime:
+    return datetime.now(timezone.utc)
+
+
+class JobPosts(SQLModel, table=True):
+    __tablename__ = "job_posts"
+
+    id: uuid.UUID = Field(default_factory=uuid.uuid4, primary_key=True)
+    title: str = Field(index=True)
+
+    user: Optional["Users"] = Relationship(
+        back_populates="job_posts",
+        sa_relationship_kwargs={"lazy": "joined"},
+    )
+
+    platform: str = Field(default="linkedin")
+    is_active: bool = Field(default=True)
+    is_deleted: bool = Field(default=False)
+    employment_type: str | None = Field(default=None)
+    location: str | None = Field(default=None)
+    experience_min: int | None = Field(default=None)
+    experience_max: int | None = Field(default=None)
+    requirements: list[str] = Field(default_factory=list, sa_type=JSON)
+    optional_skills: list[str] = Field(default_factory=list, sa_type=JSON)
+    salary: str = Field(default="Anonymous")
+    description: str | None = Field(default=None)
+    post_text: str
+    channel_id: str
+    buffer_post_id: str | None = Field(default=None)
+    buffer_external_link: str | None = Field(default=None)
+    buffer_sent_at: datetime | None = Field(default=None, sa_type=DateTime(timezone=True))
+    status: str = Field(default="draft")
+    buffer_error: str | None = Field(default=None)
+    created_by: uuid.UUID = Field(foreign_key="users.id")
+    created_at: datetime = Field(default_factory=_now, sa_type=DateTime(timezone=True))
+    updated_at: datetime = Field(default_factory=_now, sa_type=DateTime(timezone=True))
+
+    @staticmethod
+    def _as_uuid(record_id: str) -> uuid.UUID | None:
+        try:
+            return uuid.UUID(str(record_id))
+        except ValueError:
+            return None
+
+    @classmethod
+    async def get_job_post_by_id(cls, session: AsyncSession, record_id: str):
+        uid = cls._as_uuid(record_id)
+        if uid is None:
+            return None
+        result = await session.execute(select(cls).where(cls.id == uid))
+        return result.scalars().first()
+
+    @classmethod
+    async def insert_job_post(cls, session: AsyncSession, fields: dict):
+        row = cls(**fields)
+        session.add(row)
+        await session.commit()
+        return await cls.get_job_post_by_id(session, row.id)
+
+    @classmethod
+    async def mark_buffer_result(
+        cls,
+        session: AsyncSession,
+        record_id: str,
+        *,
+        buffer_post_id: str,
+        status: str,
+        external_link: str | None = None,
+        sent_at: datetime | None = None,
+        platform: str | None = None,
+    ):
+        """Record what Buffer reported.
+        `status` is the mapped Buffer PostStatus, not an assumption: a queued post lands
+        here as "scheduled" and only becomes "published" once Buffer says `sent`.
+        """
+        row = await cls.get_job_post_by_id(session, record_id)
+        if not row:
+            return None
+        row.status = status
+        row.buffer_post_id = buffer_post_id
+        row.buffer_external_link = external_link
+        row.buffer_sent_at = sent_at
+        if platform:
+            row.platform = platform
+        row.buffer_error = None
+        row.updated_at = _now()
+        session.add(row)
+        await session.commit()
+        await session.refresh(row)
+        return row
+
+    @classmethod
+    async def mark_failed(cls, session: AsyncSession, record_id: str, error: str):
+        row = await cls.get_job_post_by_id(session, record_id)
+        if not row:
+            return None
+        row.status = "failed"
+        row.buffer_error = error
+        row.updated_at = _now()
+        session.add(row)
+        await session.commit()
+        await session.refresh(row)
+        return row
+
+import users.models as _users_models 
\ No newline at end of file
diff --git a/backend/job/job_post/plugins.py b/backend/job/job_post/plugins.py
new file mode 100644
index 0000000..b19fa26
--- /dev/null
+++ b/backend/job/job_post/plugins.py
@@ -0,0 +1,306 @@
+"""Buffer GraphQL helpers and LinkedIn job-post copy rendering.
+
+Pure module: no FastAPI imports and no HTTPException.
+"""
+
+from __future__ import annotations
+
+import json
+import os
+import re
+from datetime import datetime
+from enum import Enum
+
+import httpx
+from dotenv import load_dotenv
+
+load_dotenv()
+
+BUFFER_API = os.getenv("BUFFER_API")
+BUFFER_API_URL = os.getenv("BUFFER_API_URL", "https://api.buffer.com")
+BUFFER_CHANNEL_ID = os.getenv("BUFFER_CHANNEL_ID")
+LINKEDIN_POST_MAX_CHARS = 3000
+
+# Buffer's PostStatus -> the job_posts.status lifecycle. Only `sent` means the post is
+# actually live on the network: the default `addToQueue` mode comes back as `scheduled`,
+# so treating any successful mutation as "published" would record a post that nobody
+# outside Buffer can see yet.
+BUFFER_STATUS_TO_LOCAL = {
+    "sent": "published",
+    "sending": "publishing",
+    "scheduled": "scheduled",
+    "draft": "draft",
+    "needs_approval": "needs_approval",
+    "error": "failed",
+}
+
+
+def local_status(buffer_status) -> str:
+    """Map a Buffer PostStatus onto our own. Unknown values stay uncommitted."""
+    return BUFFER_STATUS_TO_LOCAL.get(buffer_status or "", "scheduled")
+
+
+class PlatformAlias(str, Enum):
+    """Shorthands people type, mapped to Buffer's own `Service` values.
+
+    Member name = what arrives in the request, value = what Buffer calls it. This is
+    spelling tolerance only, *not* the list of supported networks: anything absent here
+    still resolves, because `resolve_channel` matches against the services Buffer
+    actually reports. A newly connected network needs no entry.
+
+    Names that share a value (ig/insta) become Enum aliases, which is exactly the
+    intent -- lookup is by member name via `__members__`.
+    """
+
+    fb = "facebook"
+    ig = "instagram"
+    insta = "instagram"
+    li = "linkedin"
+    x = "twitter"
+    tweet = "twitter"
+    yt = "youtube"
+    gbp = "googlebusiness"
+    google = "googlebusiness"
+    googlebusinessprofile = "googlebusiness"
+
+
+def normalize_platform(value) -> str:
+    """Case/punctuation-insensitive key for comparing a requested platform."""
+    key = re.sub(r"[^a-z0-9]", "", str(value or "").lower())
+    alias = PlatformAlias.__members__.get(key)
+    return alias.value if alias else key
+
+
+async def resolve_channel(platform, channels=None) -> dict:
+    """Return the connected channel for `platform`.
+
+    Nothing is special-cased per network: the request is matched against the services
+    Buffer reports, so any platform Buffer supports and the account has connected will
+    resolve. Falls back to matching the channel's handle or display name so
+    "ahmedmujtababaig" works as well as "linkedin".
+    """
+    wanted = normalize_platform(platform)
+    if not wanted:
+        raise BufferError("No platform given")
+    if channels is None:
+        channels = await list_buffer_channels()
+    for field in ("service", "name", "displayName"):
+        for channel in channels:
+            if normalize_platform(channel.get(field)) == wanted:
+                return channel
+    available = sorted({c.get("service") for c in channels if c.get("service")})
+    raise BufferError(
+        f"No Buffer channel connected for platform {platform!r}. "
+        f"Connected: {', '.join(available) if available else 'none'}"
+    )
+
+
+def parse_buffer_datetime(value):
+    """Buffer sends ISO 8601 with a trailing `Z`, which fromisoformat wants as +00:00."""
+    if not value:
+        return None
+    try:
+        return datetime.fromisoformat(str(value).replace("Z", "+00:00"))
+    except ValueError:
+        return None
+
+
+class BufferError(RuntimeError):
+    def __init__(self, message: str, *, code: str | None = None):
+        super().__init__(message)
+        self.code = code
+
+
+def render_job_post(payload) -> str:
+    title = (payload.get("title") or "").strip() or "Open Role"
+    location = (payload.get("location") or "").strip()
+    employment_type = (payload.get("employment_type") or "").strip()
+    experience_min = payload.get("experience_min")
+    experience_max = payload.get("experience_max")
+    requirements = [str(r).strip() for r in (payload.get("requirements") or []) if str(r).strip()]
+    optional_skills = [str(s).strip() for s in (payload.get("optional_skills") or []) if str(s).strip()]
+    salary = (payload.get("salary") or "Anonymous").strip() or "Anonymous"
+    description = (payload.get("description") or "").strip()
+
+    lines = [f"We're hiring: {title}", ""]
+
+    meta = []
+    if location:
+        meta.append(location)
+    if employment_type:
+        meta.append(employment_type)
+    if meta:
+        lines.append(" · ".join(meta))
+        lines.append("")
+
+    if experience_min is not None and experience_max is not None:
+        lines.append(f"Experience: {experience_min}–{experience_max} years")
+        lines.append("")
+    elif experience_min is not None:
+        lines.append(f"Experience: {experience_min}+ years")
+        lines.append("")
+    elif experience_max is not None:
+        lines.append(f"Experience: up to {experience_max} years")
+        lines.append("")
+
+    if requirements:
+        lines.append("Requirements:")
+        for item in requirements:
+            lines.append(f"• {item}")
+        lines.append("")
+
+    if optional_skills:
+        lines.append("Nice to have:")
+        for item in optional_skills:
+            lines.append(f"• {item}")
+        lines.append("")
+
+    lines.append(f"Salary: {salary}")
+    lines.append("")
+
+    if description:
+        lines.append(description)
+        lines.append("")
+
+    lines.append("Interested? Apply via our careers page or reply to this post.")
+    lines.append("")
+
+    tags = []
+    for item in requirements:
+        tag = re.sub(r"[^A-Za-z0-9]+", "", item)
+        if tag:
+            tags.append(f"#{tag}")
+    if tags:
+        lines.append(" ".join(tags))
+
+    text = "\n".join(lines).strip()
+    if len(text) > LINKEDIN_POST_MAX_CHARS:
+        text = text[: LINKEDIN_POST_MAX_CHARS - 1].rstrip() + "…"
+    return text
+
+
+def build_create_post_query(text, channel_id, *, mode="addToQueue", due_at=None) -> str:
+    fields = [
+        f"text: {json.dumps(text)}",
+        f"channelId: {json.dumps(channel_id)}",
+        "schedulingType: automatic",
+        f"mode: {mode}",
+    ]
+    if mode == "customScheduled" and due_at:
+        fields.append(f"dueAt: {json.dumps(due_at)}")
+    input_block = ",\n      ".join(fields)
+    return (
+        "mutation CreatePost {\n"
+        "  createPost(input: {\n"
+        f"      {input_block}\n"
+        "  }) {\n"
+        "    ... on PostActionSuccess {\n"
+        "      post { id text status sentAt externalLink channelService }\n"
+        "    }\n"
+        "    ... on MutationError { message }\n"
+        "  }\n"
+        "}"
+    )
+
+
+async def create_buffer_post(text, channel_id, *, mode="addToQueue", due_at=None) -> dict:
+    if not BUFFER_API:
+        raise RuntimeError("BUFFER_API is not configured")
+    query = build_create_post_query(text, channel_id, mode=mode, due_at=due_at)
+    async with httpx.AsyncClient(timeout=15.0) as client:
+        response = await client.post(
+            BUFFER_API_URL,
+            json={"query": query},
+            headers={
+                "Authorization": f"Bearer {BUFFER_API}",
+                "Content-Type": "application/json",
+            },
+        )
+    if response.status_code != 200:
+        raise httpx.HTTPStatusError(
+            response.text,
+            request=response.request,
+            response=response,
+        )
+    body = response.json()
+    errors = body.get("errors")
+    if errors:
+        first = errors[0] if isinstance(errors, list) and errors else {}
+        msg = first.get("message") or "Buffer GraphQL error"
+        code = (first.get("extensions") or {}).get("code")
+        raise BufferError(msg, code=code)
+    create_post = (body.get("data") or {}).get("createPost") or {}
+    if "message" in create_post and "post" not in create_post:
+        raise BufferError(create_post.get("message") or "Buffer mutation error")
+    post = create_post.get("post")
+    if not post or not post.get("id"):
+        raise BufferError("Buffer did not return a post id")
+    return post
+
+
+async def list_buffer_channels() -> list[dict]:
+    if not BUFFER_API:
+        raise RuntimeError("BUFFER_API is not configured")
+    async with httpx.AsyncClient(timeout=15.0) as client:
+        orgs_response = await client.post(
+            BUFFER_API_URL,
+            json={"query": "query { account { organizations { id name } } }"},
+            headers={
+                "Authorization": f"Bearer {BUFFER_API}",
+                "Content-Type": "application/json",
+            },
+        )
+        if orgs_response.status_code != 200:
+            raise httpx.HTTPStatusError(
+                orgs_response.text,
+                request=orgs_response.request,
+                response=orgs_response,
+            )
+        orgs_body = orgs_response.json()
+        if orgs_body.get("errors"):
+            first = orgs_body["errors"][0]
+            raise BufferError(
+                first.get("message") or "Buffer GraphQL error",
+                code=(first.get("extensions") or {}).get("code"),
+            )
+        organizations = ((orgs_body.get("data") or {}).get("account") or {}).get("organizations") or []
+        channels: list[dict] = []
+        for org in organizations:
+            org_id = org.get("id")
+            if not org_id:
+                continue
+            channels_query = (
+                "query GetChannels {\n"
+                f'  channels(input:{{organizationId:{json.dumps(org_id)}}}) {{\n'
+                "    id name displayName service isQueuePaused\n"
+                "  }\n"
+                "}"
+            )
+            channels_response = await client.post(
+                BUFFER_API_URL,
+                json={"query": channels_query},
+                headers={
+                    "Authorization": f"Bearer {BUFFER_API}",
+                    "Content-Type": "application/json",
+                },
+            )
+            if channels_response.status_code != 200:
+                raise httpx.HTTPStatusError(
+                    channels_response.text,
+                    request=channels_response.request,
+                    response=channels_response,
+                )
+            channels_body = channels_response.json()
+            if channels_body.get("errors"):
+                first = channels_body["errors"][0]
+                raise BufferError(
+                    first.get("message") or "Buffer GraphQL error",
+                    code=(first.get("extensions") or {}).get("code"),
+                )
+            for channel in (channels_body.get("data") or {}).get("channels") or []:
+                channels.append({
+                    **channel,
+                    "organization_id": org_id,
+                    "organization_name": org.get("name"),
+                })
+    return channels
diff --git a/backend/job/job_post/serializers.py b/backend/job/job_post/serializers.py
new file mode 100644
index 0000000..4589f3d
--- /dev/null
+++ b/backend/job/job_post/serializers.py
@@ -0,0 +1,24 @@
+def serialize_job_post(row) -> dict:
+    return {
+        "id": str(row.id),
+        "title": row.title,
+        "employment_type": row.employment_type,
+        "location": row.location,
+        "experience_min": row.experience_min,
+        "experience_max": row.experience_max,
+        "requirements": list(row.requirements or []),
+        "optional_skills": list(row.optional_skills or []),
+        "salary": row.salary,
+        "description": row.description,
+        "post_text": row.post_text,
+        "channel_id": row.channel_id,
+        "platform": row.platform,
+        "buffer_post_id": row.buffer_post_id,
+        "buffer_external_link": row.buffer_external_link,
+        "buffer_sent_at": row.buffer_sent_at.isoformat() if row.buffer_sent_at else None,
+        "status": row.status,
+        "buffer_error": row.buffer_error,
+        "created_by": str(row.created_by) if row.created_by else None,
+        "created_at": row.created_at.isoformat() if row.created_at else None,
+        "updated_at": row.updated_at.isoformat() if row.updated_at else None,
+    }
diff --git a/backend/job/job_post/views.py b/backend/job/job_post/views.py
new file mode 100644
index 0000000..b80d985
--- /dev/null
+++ b/backend/job/job_post/views.py
@@ -0,0 +1,111 @@
+import os
+
+import httpx
+from dotenv import load_dotenv
+from fastapi import HTTPException
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from job.job_post.models import JobPosts
+from job.job_post.plugins import (
+    BufferError,
+    create_buffer_post,
+    list_buffer_channels,
+    local_status,
+    normalize_platform,
+    parse_buffer_datetime,
+    render_job_post,
+    resolve_channel,
+)
+from job.job_post.serializers import serialize_job_post
+
+load_dotenv()
+
+
+class JobPost:
+    def __init__(self,session:AsyncSession):
+        self.session=session
+        self.buffer_api=os.getenv("BUFFER_API")
+        self.channel_id=os.getenv("BUFFER_CHANNEL_ID")
+
+    async def _resolve_target(self,payload):
+        """Pick the Buffer channel to post to, and the service it belongs to.
+
+        Precedence: an explicit channel_id, then the requested platform, then the
+        configured default channel. Returns (channel_id, service) where service is
+        None if we did not have to look the channel up.
+        """
+        if payload.get("channel_id"):
+            return payload["channel_id"],None
+        if payload.get("platform"):
+            channel=await resolve_channel(payload["platform"])
+            return channel["id"],channel.get("service")
+        if self.channel_id:
+            return self.channel_id,None
+        raise HTTPException(
+            status_code=400,
+            detail="Provide channel_id or platform, or configure BUFFER_CHANNEL_ID",
+        )
+
+    async def post_job(self,payload,current_user):
+        try:
+            channel_id,service=await self._resolve_target(payload)
+        except (httpx.HTTPError,BufferError,RuntimeError) as e:
+            raise HTTPException(status_code=502,detail=f"Failed to resolve Buffer channel: {e}") from e
+
+        text=render_job_post(payload)
+        fields={
+            "title":payload.get("title"),
+            "employment_type":payload.get("employment_type"),
+            "location":payload.get("location"),
+            "experience_min":payload.get("experience_min"),
+            "experience_max":payload.get("experience_max"),
+            "requirements":list(payload.get("requirements") or []),
+            "optional_skills":list(payload.get("optional_skills") or []),
+            "salary":payload.get("salary") or "Anonymous",
+            "description":payload.get("description"),
+            "post_text":text,
+            "channel_id":channel_id,
+            "status":"draft",
+            "created_by":current_user["id"],
+        }
+        # Only set platform when it is actually known: passing None would override the
+        # column default and break the NOT NULL constraint. Buffer's channelService
+        # replaces this with the authoritative value once the post is created.
+        known_platform=service or normalize_platform(payload.get("platform"))
+        if known_platform:
+            fields["platform"]=known_platform
+        row=await JobPosts.insert_job_post(self.session,fields)
+
+        try:
+            post=await create_buffer_post(
+                text,
+                channel_id,
+                mode=payload.get("mode") or "addToQueue",
+                due_at=payload.get("due_at"),
+            )
+        except (httpx.HTTPError,BufferError,RuntimeError) as e:
+            # Include the reason: Buffer's rejections are actionable (duplicate text,
+            # daily limit, disconnected channel) and an opaque 502 sends the caller
+            # digging through job_posts.buffer_error to find out.
+            await JobPosts.mark_failed(self.session,str(row.id),str(e))
+            raise HTTPException(status_code=502,detail=f"Failed to publish job post to Buffer: {e}") from e
+
+        # Buffer accepting the mutation is not the same as the network publishing it:
+        # the default addToQueue mode returns `scheduled`, so the row only reads
+        # "published" once Buffer reports `sent`.
+        saved=await JobPosts.mark_buffer_result(
+            self.session,
+            str(row.id),
+            buffer_post_id=post["id"],
+            status=local_status(post.get("status")),
+            external_link=post.get("externalLink"),
+            sent_at=parse_buffer_datetime(post.get("sentAt")),
+            platform=post.get("channelService"),
+        )
+        return serialize_job_post(saved)
+
+    async def list_channels(self):
+        try:
+            return await list_buffer_channels()
+        except (httpx.HTTPError,BufferError,RuntimeError) as e:
+            raise HTTPException(status_code=502,detail="Failed to list Buffer channels") from e
diff --git a/backend/main.py b/backend/main.py
index c13d9f4..2c07775 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -8,6 +8,9 @@ from db_setup import lifespan
 from inbox.app import router as inbox_router
 from users.app import router as users_router
 from role.app import router as role_router
+from forget_password.app import router as forget_password_router
+from job.app import router as candidate_router
+from notifications.app import router as confirmation_router
 # Without this the db/migration logs have no handler and are swallowed under uvicorn.
 logging.basicConfig(level=logging.INFO, format="%(levelname)-8s %(name)s: %(message)s")
 
@@ -24,4 +27,7 @@ app.add_middleware(
 
 app.include_router(inbox_router)
 app.include_router(users_router)
-app.include_router(role_router)
\ No newline at end of file
+app.include_router(role_router)
+app.include_router(forget_password_router)
+app.include_router(confirmation_router)
+app.include_router(candidate_router)
\ No newline at end of file
diff --git a/backend/notifications/app.py b/backend/notifications/app.py
new file mode 100644
index 0000000..f26159c
--- /dev/null
+++ b/backend/notifications/app.py
@@ -0,0 +1,43 @@
+from fastapi import APIRouter,Depends
+from fastapi.responses import JSONResponse
+from fastapi import HTTPException
+from db_setup import get_session
+from sqlalchemy.ext.asyncio import AsyncSession
+from pydantic import BaseModel, EmailStr
+from notifications.views import Confirmation
+from dotenv import load_dotenv
+load_dotenv()
+
+router = APIRouter()
+
+
+class ConfirmEmailRequest(BaseModel):
+    token: str
+
+
+class ConfirmEmailResend(BaseModel):
+    email: EmailStr
+
+
+@router.post("/users/confirm-email")
+async def confirm_email(payload: ConfirmEmailRequest,session: AsyncSession = Depends(get_session)):
+    try:
+        service=Confirmation(session=session)
+        data=await service.confirm(payload.token)
+        return JSONResponse(content={"data":data,"status_code":200})
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
+
+
+@router.post("/users/confirm-email/resend")
+async def resend_confirm_email(payload: ConfirmEmailResend,session: AsyncSession = Depends(get_session)):
+    try:
+        service=Confirmation(session=session)
+        data=await service.resend(payload.email)
+        return JSONResponse(content={"data":data,"status_code":200})
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
diff --git a/backend/notifications/models.py b/backend/notifications/models.py
new file mode 100644
index 0000000..ceca0c3
--- /dev/null
+++ b/backend/notifications/models.py
@@ -0,0 +1,102 @@
+import uuid
+from datetime import datetime, timezone
+
+from sqlalchemy import DateTime
+from sqlalchemy.ext.asyncio import AsyncSession
+from sqlmodel import Field, SQLModel, select
+
+
+def _now() -> datetime:
+    return datetime.now(timezone.utc)
+
+
+class EmailConfirmationTokens(SQLModel, table=True):
+    __tablename__ = "email_confirmation_tokens"
+
+    id: uuid.UUID = Field(default_factory=uuid.uuid4, primary_key=True)
+    user_id: uuid.UUID = Field(index=True, foreign_key="users.id")
+    email: str = Field(index=True)
+    token_hash: str
+    expires_at: datetime = Field(sa_type=DateTime(timezone=True))
+    is_used: bool = Field(default=False)
+    confirmed_at: datetime | None = Field(default=None, sa_type=DateTime(timezone=True))
+    created_at: datetime = Field(default_factory=_now, sa_type=DateTime(timezone=True))
+    updated_at: datetime = Field(default_factory=_now, sa_type=DateTime(timezone=True))
+
+    @staticmethod
+    def _as_uuid(record_id: str) -> uuid.UUID | None:
+        try:
+            return uuid.UUID(str(record_id))
+        except ValueError:
+            return None
+
+    @classmethod
+    async def get_token_by_id(cls, session: AsyncSession, record_id: str):
+        uid = cls._as_uuid(record_id)
+        if uid is None:
+            return None
+        result = await session.execute(select(cls).where(cls.id == uid))
+        return result.scalars().first()
+
+    @classmethod
+    async def get_active_token_by_user(cls, session: AsyncSession, user_id: str):
+        """Newest unused token for a user (expiry checked in Python by the service)."""
+        uid = cls._as_uuid(user_id)
+        if uid is None:
+            return None
+        statement = (
+            select(cls)
+            .where(cls.user_id == uid, cls.is_used == False)  # noqa: E712
+            .order_by(cls.created_at.desc())
+        )
+        result = await session.execute(statement)
+        return result.scalars().first()
+
+    @classmethod
+    async def insert_token(cls, session: AsyncSession, fields: dict):
+        row = cls(**fields)
+        session.add(row)
+        await session.commit()
+        return await cls.get_token_by_id(session, row.id)
+
+    @classmethod
+    async def mark_confirmed(cls, session: AsyncSession, record_id: str):
+        row = await cls.get_token_by_id(session, record_id)
+        if not row:
+            return None
+        row.is_used = True
+        row.confirmed_at = _now()
+        row.updated_at = _now()
+        session.add(row)
+        await session.commit()
+        await session.refresh(row)
+        return row
+
+    @classmethod
+    async def mark_used(cls, session: AsyncSession, record_id: str):
+        """Retire a token without confirming it — used when the mail send fails."""
+        row = await cls.get_token_by_id(session, record_id)
+        if not row:
+            return None
+        row.is_used = True
+        row.updated_at = _now()
+        session.add(row)
+        await session.commit()
+        await session.refresh(row)
+        return row
+
+    @classmethod
+    async def invalidate_tokens_for_user(cls, session: AsyncSession, user_id: str):
+        uid = cls._as_uuid(user_id)
+        if uid is None:
+            return 0
+        statement = select(cls).where(cls.user_id == uid, cls.is_used == False)  # noqa: E712
+        result = await session.execute(statement)
+        rows = result.scalars().all()
+        now = _now()
+        for row in rows:
+            row.is_used = True
+            row.updated_at = now
+            session.add(row)
+        await session.commit()
+        return len(rows)
diff --git a/backend/notifications/plugins.py b/backend/notifications/plugins.py
new file mode 100644
index 0000000..69ce5bb
--- /dev/null
+++ b/backend/notifications/plugins.py
@@ -0,0 +1,115 @@
+"""Confirmation helpers — token generation, hashing, link building, and Teams mail send.
+
+Pure module: no FastAPI imports and no HTTPException.
+
+`send_confirmation_mail` intentionally duplicates
+`forget_password.plugins.send_reset_mail` rather than importing it: that helper is
+domain-named, and each domain owns its own mail copy and its own env reads.
+"""
+
+from __future__ import annotations
+
+import os
+import secrets
+import uuid
+from datetime import datetime, timedelta, timezone
+from urllib.parse import quote
+
+import httpx
+from dotenv import load_dotenv
+
+from users.plugins import hash_password, verify_password
+
+load_dotenv()
+
+TEAMS_MAIL_API_URL = os.getenv("TEAMS_MAIL_API_URL")
+TEAMS_API_TOKEN = os.getenv("TEAMS_API_TOKEN")
+FRONTEND_URL = os.getenv("FRONTEND_URL", "http://localhost:5173")
+CONFIRM_EMAIL_PATH = os.getenv("CONFIRM_EMAIL_PATH", "/auth/confirm-email")
+CONFIRM_TOKEN_TTL_SECONDS = int(os.getenv("CONFIRM_TOKEN_TTL_SECONDS", "86400"))
+CONFIRM_TOKEN_RESEND_SECONDS = int(os.getenv("CONFIRM_TOKEN_RESEND_SECONDS", "60"))
+MAIL_ACCEPTED_STATUS = 202
+
+# 32 bytes -> 43 url-safe characters, well under users.plugins.BCRYPT_MAX_BYTES.
+TOKEN_SECRET_BYTES = 32
+
+
+def now_utc() -> datetime:
+    return datetime.now(timezone.utc)
+
+
+def confirmation_expiry(*, now: datetime | None = None) -> datetime:
+    return (now or now_utc()) + timedelta(seconds=CONFIRM_TOKEN_TTL_SECONDS)
+
+
+def generate_token_secret() -> str:
+    return secrets.token_urlsafe(TOKEN_SECRET_BYTES)
+
+
+def hash_token(secret: str) -> str:
+    return hash_password(secret)
+
+
+def verify_token(secret: str, token_hash: str) -> bool:
+    return verify_password(secret, token_hash)
+
+
+def compose_token(record_id, secret: str) -> str:
+    """Link token. A bcrypt hash cannot be looked up, so the row id rides along."""
+    return f"{record_id}.{secret}"
+
+
+def split_token(token: str) -> tuple[str | None, str | None]:
+    """('<uuid>','<secret>') or (None,None). token_urlsafe never emits a dot."""
+    if not token or "." not in token:
+        return None, None
+    record_id, secret = token.split(".", 1)
+    if not record_id or not secret:
+        return None, None
+    try:
+        uuid.UUID(record_id)
+    except ValueError:
+        return None, None
+    return record_id, secret
+
+
+def build_confirmation_link(token: str) -> str:
+    base = FRONTEND_URL.rstrip("/")
+    path = CONFIRM_EMAIL_PATH if CONFIRM_EMAIL_PATH.startswith("/") else f"/{CONFIRM_EMAIL_PATH}"
+    return f"{base}{path}?token={quote(token, safe='')}"
+
+
+def render_confirmation_email(link: str, ttl: int) -> tuple[str, str]:
+    hours = max(1, ttl // 3600)
+    subject = "Confirm your TalentFlow account"
+    html = (
+        "<p>Welcome to TalentFlow. Confirm your email address to activate your account.</p>"
+        f'<p><a href="{link}">Confirm my email</a></p>'
+        f"<p>This link expires in {hours} hour(s). If you did not sign up, ignore this email.</p>"
+        f"<p>If the link does not open, paste this into your browser:<br>{link}</p>"
+    )
+    return subject, html
+
+
+async def send_confirmation_mail(to_email: str, subject: str, html: str) -> None:
+    if not TEAMS_MAIL_API_URL or not TEAMS_API_TOKEN:
+        raise RuntimeError("TEAMS_MAIL_API_URL and TEAMS_API_TOKEN must be set")
+    fields = [
+        ("subject", (None, subject)),
+        ("body", (None, html)),
+        ("content_type", (None, "html")),
+        ("save_to_sent_items", (None, "false")),
+        ("to", (None, to_email)),
+    ]
+    async with httpx.AsyncClient(timeout=15.0) as client:
+        response = await client.post(
+            TEAMS_MAIL_API_URL,
+            files=fields,
+            headers={"Authorization": f"Bearer {TEAMS_API_TOKEN}"},
+        )
+    if response.status_code != MAIL_ACCEPTED_STATUS:
+        raise httpx.HTTPStatusError(
+            response.text,
+            request=response.request,
+            response=response,
+        )
diff --git a/backend/notifications/serializers.py b/backend/notifications/serializers.py
new file mode 100644
index 0000000..62f4ee0
--- /dev/null
+++ b/backend/notifications/serializers.py
@@ -0,0 +1,20 @@
+from notifications.plugins import CONFIRM_TOKEN_RESEND_SECONDS,CONFIRM_TOKEN_TTL_SECONDS
+
+
+def serialize_confirmation_request(email: str,expires_at) -> dict:
+    return {
+        "email": email,
+        "confirmation_sent": True,
+        "expires_at": expires_at.isoformat() if expires_at else None,
+        "expires_in": CONFIRM_TOKEN_TTL_SECONDS,
+        "resend_after": CONFIRM_TOKEN_RESEND_SECONDS,
+    }
+
+
+def serialize_confirmation_result(user,*,already_confirmed: bool = False) -> dict:
+    """Deliberately narrow: this is an unauthenticated response, so no role or permissions."""
+    return {
+        "email": user.email,
+        "is_active": user.is_active,
+        "already_confirmed": already_confirmed,
+    }
diff --git a/backend/notifications/views.py b/backend/notifications/views.py
new file mode 100644
index 0000000..8e6521a
--- /dev/null
+++ b/backend/notifications/views.py
@@ -0,0 +1,94 @@
+from fastapi import HTTPException
+from sqlalchemy.ext.asyncio import AsyncSession
+import httpx
+
+from notifications.models import EmailConfirmationTokens
+from notifications.plugins import (
+    CONFIRM_TOKEN_RESEND_SECONDS,
+    CONFIRM_TOKEN_TTL_SECONDS,
+    build_confirmation_link,
+    compose_token,
+    confirmation_expiry,
+    generate_token_secret,
+    hash_token,
+    now_utc,
+    render_confirmation_email,
+    send_confirmation_mail,
+    split_token,
+    verify_token,
+)
+from notifications.serializers import serialize_confirmation_request,serialize_confirmation_result
+from users.models import Users
+
+
+class Confirmation:
+    def __init__(self,session:AsyncSession):
+        self.session=session
+
+    async def send_confirmation(self,user):
+        """Issue a fresh token for an already committed Users row and mail the link."""
+        await EmailConfirmationTokens.invalidate_tokens_for_user(self.session,str(user.id))
+
+        secret=generate_token_secret()
+        expires_at=confirmation_expiry()
+        row=await EmailConfirmationTokens.insert_token(self.session,{
+            "user_id":user.id,
+            "email":user.email,
+            "token_hash":hash_token(secret),
+            "expires_at":expires_at,
+        })
+
+        link=build_confirmation_link(compose_token(row.id,secret))
+        subject,html=render_confirmation_email(link,CONFIRM_TOKEN_TTL_SECONDS)
+        try:
+            await send_confirmation_mail(user.email,subject,html)
+        except (httpx.HTTPError,RuntimeError) as e:
+            await EmailConfirmationTokens.mark_used(self.session,str(row.id))
+            raise HTTPException(status_code=502,detail="Failed to send confirmation email") from e
+
+        return serialize_confirmation_request(user.email,expires_at)
+
+    async def confirm(self,token):
+        record_id,secret=split_token(token)
+        if not record_id:
+            raise HTTPException(status_code=400,detail="Invalid confirmation link")
+
+        row=await EmailConfirmationTokens.get_token_by_id(self.session,record_id)
+        if not row or not verify_token(secret,row.token_hash):
+            raise HTTPException(status_code=400,detail="Invalid confirmation link")
+
+        user=await Users.get_user_by_id(self.session,str(row.user_id))
+        if not user or user.is_deleted:
+            raise HTTPException(status_code=404,detail="User not found")
+
+        # Mail clients, link scanners and the back button all replay this link.
+        if row.is_used:
+            if row.confirmed_at and user.is_active:
+                return serialize_confirmation_result(user,already_confirmed=True)
+            raise HTTPException(status_code=400,detail="This confirmation link is no longer valid. Request a new one.")
+
+        if row.expires_at<=now_utc():
+            raise HTTPException(status_code=400,detail="Confirmation link has expired. Request a new one.")
+
+        if user.is_active:
+            await EmailConfirmationTokens.mark_confirmed(self.session,str(row.id))
+            return serialize_confirmation_result(user,already_confirmed=True)
+
+        updated=await Users.update_user(self.session,str(user.id),{"is_active":True})
+        await EmailConfirmationTokens.mark_confirmed(self.session,str(row.id))
+        return serialize_confirmation_result(updated)
+
+    async def resend(self,email):
+        user=await Users.get_user_by_email(self.session,email)
+        if not user or user.is_deleted:
+            raise HTTPException(status_code=404,detail="No account found for this email")
+        if user.is_active:
+            raise HTTPException(status_code=400,detail="This account is already confirmed")
+
+        active=await EmailConfirmationTokens.get_active_token_by_user(self.session,str(user.id))
+        if active:
+            age=(now_utc()-active.created_at).total_seconds()
+            if age<CONFIRM_TOKEN_RESEND_SECONDS and active.expires_at>now_utc():
+                raise HTTPException(status_code=429,detail="Please wait before requesting another confirmation email")
+
+        return await self.send_confirmation(user)
diff --git a/backend/requirements.txt b/backend/requirements.txt
index e3c9c13..bfb074d 100644
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@@ -24,5 +24,5 @@ PyJWT==2.10.1              # access/refresh token encode+decode in users/plugins
 python-multipart==0.0.20   # required by OAuth2PasswordRequestForm in users/app.py
 
 # --- other -----------------------------------------------------------------
-httpx==0.28.1              # Graph email calls in inbox/views.py
+httpx==0.28.1              # Graph email (inbox) + Teams mail send (forget_password/plugins.py)
 bcrypt==5.0.0              # password hashing in users/plugins.py
diff --git a/backend/users/app.py b/backend/users/app.py
index e6bb2e9..843c4de 100644
--- a/backend/users/app.py
+++ b/backend/users/app.py
@@ -22,6 +22,12 @@ class UserCreate(BaseModel):
     is_active: bool = True
 
 
+class UserSignup(BaseModel):
+    name: str
+    email: EmailStr
+    password: str
+
+
 class UserUpdate(BaseModel):
     name: str | None = None
     email: EmailStr | None = None
@@ -62,6 +68,19 @@ async def login(payload: UserLogin,session: AsyncSession = Depends(get_session))
         raise HTTPException(status_code=500,detail=str(e))
 
 
+@router.post("/users/signup")
+async def signup(payload: UserSignup,session: AsyncSession = Depends(get_session)):
+    try:
+        service=User(session=session)
+        user=await service.signup_user(payload.model_dump())
+        tokens=serialize_token(create_access_token(user),create_refresh_token(user),user)
+        return JSONResponse(content={**tokens,"status_code":200})
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500,detail=str(e))
+
+
 @router.post("/users/refresh")
 async def refresh(payload: TokenRefresh,session: AsyncSession = Depends(get_session)):
     try:
diff --git a/backend/users/models.py b/backend/users/models.py
index 6a52910..cacf22d 100644
--- a/backend/users/models.py
+++ b/backend/users/models.py
@@ -7,7 +7,7 @@ from sqlalchemy.orm import selectinload
 from sqlmodel import Field, Relationship, SQLModel, select
 
 from role.models import Roles
-
+from job.job_post.models import JobPosts
 
 class Users(SQLModel, table=True):
     __tablename__ = "users"
@@ -17,10 +17,17 @@ class Users(SQLModel, table=True):
     email: str = Field(unique=True)
     role_id: int | None = Field(nullable=True, foreign_key="roles.id")
     role: Roles | None = Relationship(back_populates="users")
+    # selectin, not joined: this is a one-to-many, so a joined load would repeat the
+    # user row once per post. Without an explicit strategy the default is a lazy load,
+    # which raises MissingGreenlet the moment anything touches it under asyncio.
+    job_posts: list[JobPosts] = Relationship(
+        back_populates="user",
+        sa_relationship_kwargs={"lazy": "selectin"},
+    )
     password: str
     created_at: datetime = Field(default_factory=datetime.now)
     updated_at: datetime = Field(default_factory=datetime.now)
-    is_active: bool = Field(default=True)
+    is_active: bool = Field(default=False)
     is_deleted: bool = Field(default=False)
 
     @classmethod
diff --git a/backend/users/permissions.py b/backend/users/permissions.py
index 7b1d7e0..a7c11b0 100644
--- a/backend/users/permissions.py
+++ b/backend/users/permissions.py
@@ -194,6 +194,7 @@ def require_permission(*required: PermissionTag, require_all: bool = True):
     async def dependency(current_user: CurrentUser) -> dict:
         if current_user.get("role_id") is None:
             raise HTTPException(status_code=403, detail="User has no role assigned")
+        
         granted = current_user.get("permissions") or []
         if not has_permission(granted, *required, require_all=require_all):
             if require_all and len(required) == 1:
diff --git a/backend/users/plugins.py b/backend/users/plugins.py
index 74546df..68dc4d6 100644
--- a/backend/users/plugins.py
+++ b/backend/users/plugins.py
@@ -28,7 +28,9 @@ JWT_SECRET_KEY = os.getenv("JWT_SECRET_KEY")
 JWT_ALGORITHM = os.getenv("JWT_ALGORITHM", "HS256")
 ACCESS_TOKEN_EXPIRE_MINUTES = int(os.getenv("JWT_ACCESS_TOKEN_EXPIRE_MINUTES", "30"))
 REFRESH_TOKEN_EXPIRE_DAYS = int(os.getenv("JWT_REFRESH_TOKEN_EXPIRE_DAYS", "7"))
+RESET_TOKEN_EXPIRE_MINUTES = int(os.getenv("JWT_RESET_TOKEN_EXPIRE_MINUTES", "10"))
 ACCESS_TOKEN_EXPIRE_SECONDS = ACCESS_TOKEN_EXPIRE_MINUTES * 60
+RESET_TOKEN_EXPIRE_SECONDS = RESET_TOKEN_EXPIRE_MINUTES * 60
 
 
 def _encode(raw: str) -> bytes:
@@ -112,6 +114,15 @@ def create_refresh_token(user) -> str:
     )
 
 
+def create_reset_token(email: str, *, code_id: str) -> str:
+    return _create_token(
+        email,
+        token_type="reset",
+        expires_delta=timedelta(minutes=RESET_TOKEN_EXPIRE_MINUTES),
+        claims={"crid": code_id},
+    )
+
+
 def decode_token(token: str, *, expected_type: str) -> dict:
     payload = jwt.decode(token, _secret(), algorithms=[JWT_ALGORITHM])
     if payload.get("type") != expected_type:
diff --git a/backend/users/views.py b/backend/users/views.py
index 101febd..bce5072 100644
--- a/backend/users/views.py
+++ b/backend/users/views.py
@@ -1,5 +1,6 @@
 from fastapi import HTTPException
-from role.models import Roles
+from notifications.views import Confirmation
+from role.models import EnumRoles,Roles
 from users.models import Users
 from users.permissions import PermissionTag,has_permission
 from users.serializers import serialize_user
@@ -17,6 +18,8 @@ class User:
     async def _check_role_assignment(self,current_user,role_id,existing_role_id=None):
         if role_id==existing_role_id:
             return
+
+        #"Take the current user's permission list. Check if rbac_users.manage is in it. If it is not → reject with 403."
         if not has_permission(current_user.get("permissions") or [],PermissionTag.RBAC_USERS_MANAGE):
             raise HTTPException(status_code=403,detail="Assigning a role requires rbac_users.manage")
         if role_id is None:
@@ -42,6 +45,21 @@ class User:
             raise HTTPException(status_code=400,detail="Password is required")
         return await Users.insert_user(self.session,fields)
 
+    async def signup_user(self,payload):
+        existing=await Users.get_user_by_email(self.session,payload.get("email"))
+        if existing:
+            raise HTTPException(status_code=409,detail="Email already registered")
+        fields=clean_user_payload(payload)
+        if not fields.get("password"):
+            raise HTTPException(status_code=400,detail="Password is required")
+        role=await Roles.get_role_by_name(self.session,EnumRoles.CANDIDATE.value)
+        fields["role_id"]=role.id if role else 8
+        user=await Users.insert_user(self.session,fields)
+        # Signup lands inactive; the mailed link is what flips is_active.
+        service=Confirmation(session=self.session)
+        await service.send_confirmation(user)
+        return user
+
     async def get_users(self,top,skip,search=None):
         users=await Users.get_users(self.session,top,skip,search)
         return [serialize_user(u) for u in users]
@@ -56,6 +74,7 @@ class User:
         user=await Users.get_user_by_id(self.session,record_id)
         if not user:
             raise HTTPException(status_code=404,detail="User not found")
+        # this is for password hashing and dehashing
         fields=clean_user_payload(payload,partial=True)
         email=fields.get("email")
         if email and email!=user.email:
@@ -98,8 +117,10 @@ class User:
                 detail="Incorrect email or password",
                 headers={"WWW-Authenticate":"Bearer"},
             )
-        if user.is_deleted or not user.is_active:
+        if user.is_deleted:
             raise HTTPException(status_code=401,detail="User is inactive")
+        if not user.is_active:
+            raise HTTPException(status_code=401,detail="Please confirm your email address to activate your account")
         return await Users.get_user_by_id(self.session,user.id)
 
     async def refresh_access_token(self,refresh_token):
diff --git a/devserver.py b/devserver.py
deleted file mode 100644
index 14ba60b..0000000
--- a/devserver.py
+++ /dev/null
@@ -1,36 +0,0 @@
-#!/usr/bin/env python3
-"""Static dev server for the ATS dashboard.
-
-Identical to `python3 -m http.server` except it disables caching. The stdlib
-server answers conditional requests from Last-Modified, which has one-second
-granularity — so a file edited twice within the same second keeps serving the
-stale copy and the browser never sees the change.
-"""
-import sys
-from functools import partial
-from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
-
-
-class NoCacheHandler(SimpleHTTPRequestHandler):
-    def end_headers(self):
-        self.send_header("Cache-Control", "no-store, no-cache, must-revalidate, max-age=0")
-        self.send_header("Pragma", "no-cache")
-        self.send_header("Expires", "0")
-        super().end_headers()
-
-    def send_header(self, keyword, value):
-        # Drop the validator entirely so conditional GETs can't 304.
-        if keyword.lower() == "last-modified":
-            return
-        super().send_header(keyword, value)
-
-    def log_message(self, fmt, *args):
-        pass
-
-
-if __name__ == "__main__":
-    port = int(sys.argv[1]) if len(sys.argv) > 1 else 4173
-    directory = sys.argv[2] if len(sys.argv) > 2 else "."
-    handler = partial(NoCacheHandler, directory=directory)
-    print(f"Serving {directory} on http://localhost:{port} (no-cache)")
-    ThreadingHTTPServer(("127.0.0.1", port), handler).serve_forever()
diff --git a/docs/integrations/buffer/Buffer-API.postman_collection.json b/docs/integrations/buffer/Buffer-API.postman_collection.json
new file mode 100644
index 0000000..d0103c8
--- /dev/null
+++ b/docs/integrations/buffer/Buffer-API.postman_collection.json
@@ -0,0 +1,1976 @@
+{
+  "info": {
+    "_postman_id": "b0ffe4a1-2c3d-4e5f-8a9b-0c1d2e3f4a5b",
+    "name": "Buffer API (GraphQL) — HRMS",
+    "description": "Buffer's public GraphQL API — every operation the HRMS job-posting integration needs, plus the full read surface.\n\n**One endpoint for everything:** `POST https://api.buffer.com`. There are no REST paths; the operation is decided by the GraphQL document in the body.\n\n---\n\n### Setup\n1. Import `Buffer-API.postman_environment.json` and paste your key from `backend/.env` (`BUFFER_API`) into `buffer_token`.\n2. Run **01 · Get Organizations** → fills `{{org_id}}`.\n3. Run **02 · Get Channels** → fills `{{channel_id}}`.\n4. Everything else now works. Create/list requests fill `{{post_id}}` for you, so **Delete Post** always targets the last post you touched.\n\n### The three answers you were after\n| Need | Request | Field |\n|---|---|---|\n| `org_id` | 01 · Get Organizations | `account.organizations[].id` |\n| `channel_id` | 02 · Get Channels | `channels[].id` |\n| create post | 04 · Create Post · … | `createPost` → `PostActionSuccess.post.id` |\n| delete post | 04 · Delete Post | `deletePost` → `DeletePostSuccess.id` |\n| list posts | 03 · Get Posts | `posts.edges[].node` |\n\n### Gotchas that cost real time\n* Errors come back as **HTTP 200**. Check `errors[]` and `__typename`, not the status code.\n* Do **not** request `totalCount` on `posts` — API keys get `FORBIDDEN`.\n* The edit mutation is `editPost`, not `updatePost`.\n* `deletePost` returns `DeletePostSuccess`, *not* `PostActionSuccess`.\n* `schedulingType` is `automatic` | `notification` only — it is **not** the queue mode. The queue mode is `mode` (`addToQueue` | `shareNext` | `shareNow` | `customScheduled`).\n* `mode: customScheduled` requires `dueAt`; `mode: shareNow` publishes instantly.\n* `metadata.<service>.linkAttachment` and a non-empty `assets` array are mutually exclusive.\n* Sorting is only by `dueAt` or `createdAt` — there is no `sentAt` sort key.\n\n### Rate limits\nFree plan: **100 requests / 15 min**, 250 / day, 3000 / 30 days. A full Collection Runner pass over this collection is ~38 calls, so back-to-back runs will trip the 15-minute window (HTTP 429, `RATE_LIMIT_EXCEEDED`, `extensions.window: \"15m\"`). Every response carries `ratelimit` / `ratelimit-policy` headers — see **08 · Rate limit headers**.\n\n### Plan-gated operations\nThese are valid GraphQL but rejected on a Free account: LinkedIn `firstComment`, `needsApproval: true` (needs a posting policy), and Insights windows older than 31 days.\n\nDocs: https://developers.buffer.com/guides · Explorer: https://developers.buffer.com/explorer.html",
+    "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
+  },
+  "auth": {
+    "type": "bearer",
+    "bearer": [
+      {
+        "key": "token",
+        "value": "{{buffer_token}}",
+        "type": "string"
+      }
+    ]
+  },
+  "item": [
+    {
+      "name": "00 · Auth & Account",
+      "description": "Verify the API key works and inspect the authenticated account. The key is account-scoped: it can reach every organization and channel on the account.",
+      "item": [
+        {
+          "name": "Ping / Whoami",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "pm.test('Token is valid', function () {",
+                  "    pm.expect(res.data.account.id).to.be.a('string');",
+                  "});",
+                  "console.log('Rate limit:', pm.response.headers.get('ratelimit'));"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query Whoami {\\n  account {\\n    id\\n    email\\n    name\\n  }\\n}\"\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Cheapest possible call. 200 + an account id means the token is valid.\n401 / `UNAUTHORIZED` in `errors[]` means the token is wrong or revoked."
+          },
+          "response": []
+        },
+        {
+          "name": "Get Account (full)",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetAccount {\\n  account {\\n    id\\n    email\\n    backupEmail\\n    name\\n    avatar\\n    timezone\\n    createdAt\\n    organizations {\\n      id\\n      name\\n      ownerEmail\\n      channelCount\\n    }\\n    connectedApps {\\n      clientId\\n      name\\n      category\\n      scopes\\n      createdAt\\n    }\\n  }\\n}\"\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Everything readable about the logged-in account in one call.\n\n`connectedApps[].clientId` is the OAuth **client id** — do not confuse it with `organizations[].id`."
+          },
+          "response": []
+        }
+      ]
+    },
+    {
+      "name": "01 · Organizations  →  org_id",
+      "description": "**Run this first.** Almost every other query needs `organizationId`. The test script writes the first org id into the `org_id` collection variable automatically.",
+      "item": [
+        {
+          "name": "Get Organizations  (captures org_id)",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const orgs = res.data.account.organizations;",
+                  "pm.test('At least one organization', () => pm.expect(orgs).to.have.length.above(0));",
+                  "pm.collectionVariables.set('org_id', orgs[0].id);",
+                  "console.log('org_id =', orgs[0].id, '|', orgs[0].name);"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetOrganizations {\\n  account {\\n    organizations {\\n      id\\n      name\\n      ownerEmail\\n      channelCount\\n    }\\n  }\\n}\"\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "**This is the org_id endpoint.**\n\n`account.organizations[].id` is the `organizationId` every other call wants.\nThe test script stores `organizations[0].id` in `{{org_id}}`."
+          },
+          "response": []
+        },
+        {
+          "name": "Get Organization Limits",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetOrganizationLimits {\\n  account {\\n    organizations {\\n      id\\n      name\\n      channelCount\\n      limits {\\n        channels\\n        members\\n        scheduledPosts\\n        ideas\\n        tags\\n        postTemplates\\n      }\\n    }\\n  }\\n}\"\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Plan ceilings for the org (each field is the max, an `Int`) — compare `limits.channels` against `channelCount` before connecting another channel."
+          },
+          "response": []
+        }
+      ]
+    },
+    {
+      "name": "02 · Channels  →  channel_id",
+      "description": "**Run `Get Channels` second.** `channel_id` is what `createPost` publishes to. The test script captures the first channel into `{{channel_id}}`.",
+      "item": [
+        {
+          "name": "Get Channels  (captures channel_id)",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const chans = res.data.channels;",
+                  "pm.test('At least one channel', () => pm.expect(chans).to.have.length.above(0));",
+                  "pm.collectionVariables.set('channel_id', chans[0].id);",
+                  "console.log('channel_id =', chans[0].id, '|', chans[0].service, '|', chans[0].name);",
+                  "chans.forEach(c => console.log(`  ${c.id}  ${c.service.padEnd(14)} ${c.name}`));"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetChannels($input: ChannelsInput!) {\\n  channels(input: $input) {\\n    id\\n    name\\n    displayName\\n    service\\n    type\\n    serviceId\\n    organizationId\\n    avatar\\n    externalLink\\n    timezone\\n    isDisconnected\\n    isLocked\\n    isQueuePaused\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"organizationId\": \"{{org_id}}\"\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "**This is the channel_id endpoint.**\n\nReturns every connected social profile in the organization. `id` → use as `channelId` in `createPost`. `service` is the network (`linkedin`, `twitter`, `instagram`, `facebook`, `tiktok`, `threads`, `youtube`, `pinterest`, `mastodon`, `bluesky`, `googlebusiness`, `startPage`).\n\nStore the id you actually want in `{{channel_id}}` — the script picks the first one."
+          },
+          "response": []
+        },
+        {
+          "name": "Get Channels (filtered)",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetFilteredChannels($input: ChannelsInput!) {\\n  channels(input: $input) {\\n    id\\n    name\\n    service\\n    isLocked\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"organizationId\": \"{{org_id}}\",\n      \"filter\": {\n        \"isLocked\": false,\n        \"product\": \"publish\"\n      }\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "`filter.isLocked` — true/false/omit. `filter.product` — `publish` | `analyze` | `engage` | `comments` | `startPage` | `buffer`."
+          },
+          "response": []
+        },
+        {
+          "name": "Get Channel by ID",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetChannel($input: ChannelInput!) {\\n  channel(input: $input) {\\n    id\\n    name\\n    displayName\\n    service\\n    type\\n    serviceId\\n    organizationId\\n    timezone\\n    isDisconnected\\n    isQueuePaused\\n    allowedActions\\n    scopes\\n    postingSchedule {\\n      day\\n      times\\n      paused\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"id\": \"{{channel_id}}\"\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Single channel, including its weekly posting schedule (the slots `mode: addToQueue` will fill)."
+          },
+          "response": []
+        },
+        {
+          "name": "Get Daily Posting Limits",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetDailyPostingLimits($input: DailyPostingLimitsInput!) {\\n  dailyPostingLimits(input: $input) {\\n    channelId\\n    limit\\n    scheduled\\n    sent\\n    isAtLimit\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"channelIds\": [\n        \"{{channel_id}}\"\n      ]\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Check before bulk-scheduling. `isAtLimit: true` means `createPost` will come back as `LimitReachedError`.\n\nOptional `input.date` (ISO 8601) checks a specific day."
+          },
+          "response": []
+        }
+      ]
+    },
+    {
+      "name": "03 · Posts — Read",
+      "description": "Cursor-paginated. `first` = page size (20–50 recommended), `after` = `pageInfo.endCursor` from the previous page. Cursors are opaque — never parse them.\n\n⚠️ Do **not** add `totalCount` to the `posts` query — it returns `FORBIDDEN` on this API key.",
+      "item": [
+        {
+          "name": "Get Posts (paginated, captures post_id + cursor)",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const conn = res.data.posts;",
+                  "if (conn.edges.length) {",
+                  "    pm.collectionVariables.set('post_id', conn.edges[0].node.id);",
+                  "    console.log('post_id =', conn.edges[0].node.id);",
+                  "}",
+                  "pm.collectionVariables.set('posts_cursor', conn.pageInfo.endCursor || '');",
+                  "console.log('hasNextPage =', conn.pageInfo.hasNextPage);",
+                  "conn.edges.forEach(e => console.log(`  ${e.node.id}  ${e.node.status.padEnd(14)} ${(e.node.text || '').slice(0, 60).replace(/\\n/g, ' ')}`));"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetPosts($first: Int, $after: String, $input: PostsInput!) {\\n  posts(first: $first, after: $after, input: $input) {\\n    edges {\\n      cursor\\n      node {\\n        id\\n        text\\n        status\\n        shareMode\\n        schedulingType\\n        dueAt\\n        sentAt\\n        createdAt\\n        updatedAt\\n        channelId\\n        channelService\\n        externalLink\\n        isCustomScheduled\\n        via\\n      }\\n    }\\n    pageInfo {\\n      hasNextPage\\n      endCursor\\n      startCursor\\n      hasPreviousPage\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"first\": 20,\n    \"input\": {\n      \"organizationId\": \"{{org_id}}\"\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "**This is the list-posts endpoint.**\n\nStores `edges[0].node.id` in `{{post_id}}` and `pageInfo.endCursor` in `{{posts_cursor}}` so *Get Posts — Next Page* and *Delete Post* just work."
+          },
+          "response": []
+        },
+        {
+          "name": "Get Posts — Next Page",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "pm.collectionVariables.set('posts_cursor', res.data.posts.pageInfo.endCursor || '');"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetPostsPage($first: Int, $after: String, $input: PostsInput!) {\\n  posts(first: $first, after: $after, input: $input) {\\n    edges {\\n      cursor\\n      node {\\n        id\\n        text\\n        status\\n        dueAt\\n        channelId\\n      }\\n    }\\n    pageInfo {\\n      hasNextPage\\n      endCursor\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"first\": 20,\n    \"after\": \"{{posts_cursor}}\",\n    \"input\": {\n      \"organizationId\": \"{{org_id}}\"\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Run *Get Posts* first to populate `{{posts_cursor}}`. Re-run this request repeatedly — it rolls the cursor forward each time."
+          },
+          "response": []
+        },
+        {
+          "name": "Get Scheduled Posts (the queue)",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const edges = res.data.posts.edges;",
+                  "const queued = edges.filter(e => !e.node.isCustomScheduled);",
+                  "if (queued.length) {",
+                  "    pm.collectionVariables.set('queued_post_id', queued[0].node.id);",
+                  "    console.log('queued_post_id =', queued[0].node.id);",
+                  "}"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetScheduledPosts($first: Int, $input: PostsInput!) {\\n  posts(first: $first, input: $input) {\\n    edges {\\n      node {\\n        id\\n        text\\n        status\\n        shareMode\\n        dueAt\\n        isCustomScheduled\\n        channelId\\n        channelService\\n        allowedActions\\n      }\\n    }\\n    pageInfo {\\n      hasNextPage\\n      endCursor\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"first\": 50,\n    \"input\": {\n      \"organizationId\": \"{{org_id}}\",\n      \"filter\": {\n        \"status\": [\n          \"scheduled\"\n        ],\n        \"channelIds\": [\n          \"{{channel_id}}\"\n        ]\n      },\n      \"sort\": [\n        {\n          \"field\": \"dueAt\",\n          \"direction\": \"asc\"\n        }\n      ]\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Everything waiting to go out, soonest first. `allowedActions` tells you whether `deletePost` / `editPost` is permitted on each one.\n\n`sort.field` (`PostSortableKey`) is only `dueAt` or `createdAt`; `direction` is `asc` or `desc`.\n\nCaptures the first queued post into `{{queued_post_id}}` for **Move Post in Queue**."
+          },
+          "response": []
+        },
+        {
+          "name": "Get Sent Posts",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const edges = res.data.posts.edges;",
+                  "if (edges.length) {",
+                  "    pm.collectionVariables.set('sent_post_id', edges[0].node.id);",
+                  "    console.log('sent_post_id =', edges[0].node.id);",
+                  "}"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetSentPosts($first: Int, $input: PostsInput!) {\\n  posts(first: $first, input: $input) {\\n    edges {\\n      node {\\n        id\\n        text\\n        sentAt\\n        externalLink\\n        channelService\\n        metricsUpdatedAt\\n        metrics {\\n          name\\n          type\\n          unit\\n          value\\n        }\\n      }\\n    }\\n    pageInfo {\\n      hasNextPage\\n      endCursor\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"first\": 25,\n    \"input\": {\n      \"organizationId\": \"{{org_id}}\",\n      \"filter\": {\n        \"status\": [\n          \"sent\"\n        ],\n        \"channelIds\": [\n          \"{{channel_id}}\"\n        ]\n      },\n      \"sort\": [\n        {\n          \"field\": \"dueAt\",\n          \"direction\": \"desc\"\n        }\n      ]\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Published posts with their live engagement metrics and the permalink (`externalLink`) on the network. `metrics` is null until the post is sent.\n\nCaptures the newest sent post into `{{sent_post_id}}` for the **06 · Analytics** folder."
+          },
+          "response": []
+        },
+        {
+          "name": "Get Drafts",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetDrafts($first: Int, $input: PostsInput!) {\\n  posts(first: $first, input: $input) {\\n    edges {\\n      node {\\n        id\\n        text\\n        status\\n        createdAt\\n        channelId\\n      }\\n    }\\n    pageInfo {\\n      hasNextPage\\n      endCursor\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"first\": 25,\n    \"input\": {\n      \"organizationId\": \"{{org_id}}\",\n      \"filter\": {\n        \"status\": [\n          \"draft\",\n          \"needs_approval\"\n        ]\n      }\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "`PostStatus` values: `draft`, `needs_approval`, `scheduled`, `sending`, `sent`, `error`."
+          },
+          "response": []
+        },
+        {
+          "name": "Get Failed Posts",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetFailedPosts($first: Int, $input: PostsInput!) {\\n  posts(first: $first, input: $input) {\\n    edges {\\n      node {\\n        id\\n        text\\n        status\\n        dueAt\\n        channelId\\n        error {\\n          message\\n        }\\n      }\\n    }\\n    pageInfo {\\n      hasNextPage\\n      endCursor\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"first\": 25,\n    \"input\": {\n      \"organizationId\": \"{{org_id}}\",\n      \"filter\": {\n        \"status\": [\n          \"error\"\n        ]\n      }\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Posts the network rejected. `error.message` carries the reason (expired token, media rejected, duplicate content …)."
+          },
+          "response": []
+        },
+        {
+          "name": "Get Posts by Date Range",
+          "event": [
+            {
+              "listen": "prerequest",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "pm.collectionVariables.set('range_end', new Date().toISOString());",
+                  "pm.collectionVariables.set('range_start', new Date(Date.now() - 30 * 864e5).toISOString());"
+                ]
+              }
+            },
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetPostsByDate($first: Int, $input: PostsInput!) {\\n  posts(first: $first, input: $input) {\\n    edges {\\n      node {\\n        id\\n        text\\n        status\\n        dueAt\\n        sentAt\\n        createdAt\\n      }\\n    }\\n    pageInfo {\\n      hasNextPage\\n      endCursor\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"first\": 50,\n    \"input\": {\n      \"organizationId\": \"{{org_id}}\",\n      \"filter\": {\n        \"startDate\": \"{{range_start}}\",\n        \"endDate\": \"{{range_end}}\"\n      }\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "`startDate`/`endDate` match on `createdAt` **or** `dueAt`. The pre-request script sets a rolling 30-day window.\n\nFiner control: `dueAt` / `createdAt` accept a `DateTimeComparator` (`{ start, end }`), and `dueAtPresence` (`present` | `absent`) filters on whether a schedule exists at all. `absent` cannot be combined with a `dueAt` comparator."
+          },
+          "response": []
+        },
+        {
+          "name": "Get Post by ID",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetPost($input: PostInput!) {\\n  post(input: $input) {\\n    id\\n    text\\n    status\\n    shareMode\\n    schedulingType\\n    dueAt\\n    sentAt\\n    createdAt\\n    updatedAt\\n    channelId\\n    channelService\\n    externalLink\\n    isCustomScheduled\\n    sharedNow\\n    via\\n    allowedActions\\n    assets {\\n      id\\n      type\\n      mimeType\\n      source\\n      thumbnail\\n    }\\n    tags {\\n      id\\n      name\\n    }\\n    author {\\n      id\\n      name\\n    }\\n    error {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"id\": \"{{post_id}}\"\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Full single post. `allowedActions` includes `deletePost` / `updatePost` when those mutations will be accepted."
+          },
+          "response": []
+        }
+      ]
+    },
+    {
+      "name": "04 · Posts — Create / Edit / Delete",
+      "description": "Every create/edit response is a **union**. Always select `__typename` plus `... on PostActionSuccess` and `... on MutationError` — an HTTP 200 with `__typename: \"InvalidInputError\"` is still a failure.\n\n`ShareMode`: `addToQueue` · `shareNext` · `shareNow` · `customScheduled`.\n`SchedulingType`: `automatic` (Buffer publishes) · `notification` (Buffer reminds you).\n\nEach create request stores the new id in `{{post_id}}`, so **Delete Post** at the bottom of this folder cleans up whatever you just made.",
+      "item": [
+        {
+          "name": "Create Post · Add to Queue",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const out = res.data.createPost;",
+                  "pm.test('createPost succeeded', function () {",
+                  "    pm.expect(out.__typename, out.message || '').to.eql('PostActionSuccess');",
+                  "});",
+                  "if (out.__typename === 'PostActionSuccess') {",
+                  "    pm.collectionVariables.set('post_id', out.post.id);",
+                  "    console.log('post_id =', out.post.id, '| status =', out.post.status);",
+                  "}",
+                  "if (out.__typename === 'PostActionSuccess') {",
+                  "    pm.collectionVariables.set('queued_post_id', out.post.id);",
+                  "}"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"mutation CreatePost($input: CreatePostInput!) {\\n  createPost(input: $input) {\\n    __typename\\n    ... on PostActionSuccess {\\n      post {\\n        id\\n        text\\n        status\\n        shareMode\\n        dueAt\\n        createdAt\\n        channelId\\n        channelService\\n      }\\n    }\\n    ... on MutationError {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"channelId\": \"{{channel_id}}\",\n      \"text\": \"Posted from the Buffer API collection.\",\n      \"schedulingType\": \"automatic\",\n      \"mode\": \"addToQueue\",\n      \"assets\": []\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Drops the post into the next free slot of the channel's posting schedule. Buffer picks `dueAt` for you.\n\nThis is the mode the HRMS job-post flow uses by default.\n\nAlso stores the new id in `{{queued_post_id}}` so **Move Post in Queue** has a genuinely queued post to act on."
+          },
+          "response": []
+        },
+        {
+          "name": "Create Post · Draft (safe to test with)",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const out = res.data.createPost;",
+                  "pm.test('createPost succeeded', function () {",
+                  "    pm.expect(out.__typename, out.message || '').to.eql('PostActionSuccess');",
+                  "});",
+                  "if (out.__typename === 'PostActionSuccess') {",
+                  "    pm.collectionVariables.set('post_id', out.post.id);",
+                  "    console.log('post_id =', out.post.id, '| status =', out.post.status);",
+                  "}"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"mutation CreatePost($input: CreatePostInput!) {\\n  createPost(input: $input) {\\n    __typename\\n    ... on PostActionSuccess {\\n      post {\\n        id\\n        text\\n        status\\n        shareMode\\n        dueAt\\n        createdAt\\n        channelId\\n        channelService\\n      }\\n    }\\n    ... on MutationError {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"channelId\": \"{{channel_id}}\",\n      \"text\": \"Draft from the Buffer API collection — not published.\",\n      \"schedulingType\": \"automatic\",\n      \"mode\": \"addToQueue\",\n      \"saveToDraft\": true,\n      \"assets\": []\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "`saveToDraft: true` creates the post with `status: draft`. Nothing is published and daily posting limits are not consumed.\n\n**Use this one when smoke-testing** — then run *Delete Post* to remove it."
+          },
+          "response": []
+        },
+        {
+          "name": "Create Post · Custom Scheduled",
+          "event": [
+            {
+              "listen": "prerequest",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "pm.collectionVariables.set('due_at', new Date(Date.now() + 864e5).toISOString());"
+                ]
+              }
+            },
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const out = res.data.createPost;",
+                  "pm.test('createPost succeeded', function () {",
+                  "    pm.expect(out.__typename, out.message || '').to.eql('PostActionSuccess');",
+                  "});",
+                  "if (out.__typename === 'PostActionSuccess') {",
+                  "    pm.collectionVariables.set('post_id', out.post.id);",
+                  "    console.log('post_id =', out.post.id, '| status =', out.post.status);",
+                  "}"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"mutation CreatePost($input: CreatePostInput!) {\\n  createPost(input: $input) {\\n    __typename\\n    ... on PostActionSuccess {\\n      post {\\n        id\\n        text\\n        status\\n        shareMode\\n        dueAt\\n        createdAt\\n        channelId\\n        channelService\\n      }\\n    }\\n    ... on MutationError {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"channelId\": \"{{channel_id}}\",\n      \"text\": \"Scheduled from the Buffer API collection.\",\n      \"schedulingType\": \"automatic\",\n      \"mode\": \"customScheduled\",\n      \"dueAt\": \"{{due_at}}\",\n      \"assets\": []\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "`mode: customScheduled` **requires** `dueAt` as an ISO 8601 UTC timestamp (`2026-08-06T09:00:00.000Z`). The pre-request script sets `{{due_at}}` to 24 hours from now."
+          },
+          "response": []
+        },
+        {
+          "name": "Create Post · Share Next (top of queue)",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const out = res.data.createPost;",
+                  "pm.test('createPost succeeded', function () {",
+                  "    pm.expect(out.__typename, out.message || '').to.eql('PostActionSuccess');",
+                  "});",
+                  "if (out.__typename === 'PostActionSuccess') {",
+                  "    pm.collectionVariables.set('post_id', out.post.id);",
+                  "    console.log('post_id =', out.post.id, '| status =', out.post.status);",
+                  "}"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"mutation CreatePost($input: CreatePostInput!) {\\n  createPost(input: $input) {\\n    __typename\\n    ... on PostActionSuccess {\\n      post {\\n        id\\n        text\\n        status\\n        shareMode\\n        dueAt\\n        createdAt\\n        channelId\\n        channelService\\n      }\\n    }\\n    ... on MutationError {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"channelId\": \"{{channel_id}}\",\n      \"text\": \"Jumping the queue, via the Buffer API collection.\",\n      \"schedulingType\": \"automatic\",\n      \"mode\": \"shareNext\",\n      \"assets\": []\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Takes the *next* available slot, pushing everything else down."
+          },
+          "response": []
+        },
+        {
+          "name": "⚠️ Create Post · Share Now (PUBLISHES IMMEDIATELY)",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const out = res.data.createPost;",
+                  "pm.test('createPost succeeded', function () {",
+                  "    pm.expect(out.__typename, out.message || '').to.eql('PostActionSuccess');",
+                  "});",
+                  "if (out.__typename === 'PostActionSuccess') {",
+                  "    pm.collectionVariables.set('post_id', out.post.id);",
+                  "    console.log('post_id =', out.post.id, '| status =', out.post.status);",
+                  "}"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"mutation CreatePost($input: CreatePostInput!) {\\n  createPost(input: $input) {\\n    __typename\\n    ... on PostActionSuccess {\\n      post {\\n        id\\n        text\\n        status\\n        shareMode\\n        dueAt\\n        createdAt\\n        channelId\\n        channelService\\n      }\\n    }\\n    ... on MutationError {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"channelId\": \"{{channel_id}}\",\n      \"text\": \"Published immediately from the Buffer API collection.\",\n      \"schedulingType\": \"automatic\",\n      \"mode\": \"shareNow\",\n      \"assets\": []\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "**This goes live on the real social account the moment you hit Send.** There is no undo — `deletePost` removes it from Buffer but does not always retract it from the network.\n\nUse *Create Post · Draft* for testing instead."
+          },
+          "response": []
+        },
+        {
+          "name": "Create Post · Needs Approval",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const out = res.data.createPost;",
+                  "pm.test('createPost succeeded', function () {",
+                  "    pm.expect(out.__typename, out.message || '').to.eql('PostActionSuccess');",
+                  "});",
+                  "if (out.__typename === 'PostActionSuccess') {",
+                  "    pm.collectionVariables.set('post_id', out.post.id);",
+                  "    console.log('post_id =', out.post.id, '| status =', out.post.status);",
+                  "}"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"mutation CreatePost($input: CreatePostInput!) {\\n  createPost(input: $input) {\\n    __typename\\n    ... on PostActionSuccess {\\n      post {\\n        id\\n        text\\n        status\\n        shareMode\\n        dueAt\\n        createdAt\\n        channelId\\n        channelService\\n      }\\n    }\\n    ... on MutationError {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"channelId\": \"{{channel_id}}\",\n      \"text\": \"Submitted for approval from the Buffer API collection.\",\n      \"schedulingType\": \"automatic\",\n      \"mode\": \"addToQueue\",\n      \"needsApproval\": true,\n      \"assets\": []\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "`needsApproval: true` parks the post at `status: needs_approval` instead of scheduling it.\n\n⚠️ Only accepted when the channel's posting policy actually requires approval (Buffer → Settings → posting policy, paid plans). Otherwise you get `InvalidInputError: needsApproval is only valid when your posting policy on this channel requires approval`."
+          },
+          "response": []
+        },
+        {
+          "name": "Create Post · With Image",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const out = res.data.createPost;",
+                  "pm.test('createPost succeeded', function () {",
+                  "    pm.expect(out.__typename, out.message || '').to.eql('PostActionSuccess');",
+                  "});",
+                  "if (out.__typename === 'PostActionSuccess') {",
+                  "    pm.collectionVariables.set('post_id', out.post.id);",
+                  "    console.log('post_id =', out.post.id, '| status =', out.post.status);",
+                  "}"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"mutation CreatePost($input: CreatePostInput!) {\\n  createPost(input: $input) {\\n    __typename\\n    ... on PostActionSuccess {\\n      post {\\n        id\\n        text\\n        status\\n        shareMode\\n        dueAt\\n        createdAt\\n        channelId\\n        channelService\\n      }\\n    }\\n    ... on MutationError {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"channelId\": \"{{channel_id}}\",\n      \"text\": \"Image post from the Buffer API collection.\",\n      \"schedulingType\": \"automatic\",\n      \"mode\": \"addToQueue\",\n      \"saveToDraft\": true,\n      \"assets\": [\n        {\n          \"image\": {\n            \"url\": \"https://picsum.photos/1200/630.jpg\",\n            \"thumbnailUrl\": \"https://picsum.photos/1200/630.jpg\"\n          }\n        }\n      ]\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "`assets` is an **ordered** list. Each entry is exactly one of `image` / `video` / `document` / `link`.\n\n* `image` → `{ url!, thumbnailUrl, metadata }`\n* `video` → `{ url!, thumbnailUrl, metadata }`\n* `document` → `{ url!, title!, thumbnailUrl! }`\n* `link` → `{ url!, title, description, thumbnailUrl }`\n\nURLs must be publicly reachable **and return the raw bytes** — Buffer fetches them server-side, so a page that redirects to a login or a CDN that blocks server-side fetches fails with `InvalidInputError: Image could not be read from its URL`. See the *Hosting Media* guide for Buffer's own upload endpoint.\n\nSet to `saveToDraft: true` here so you can run it safely."
+          },
+          "response": []
+        },
+        {
+          "name": "Create Post · LinkedIn (first comment + link attachment)",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const out = res.data.createPost;",
+                  "pm.test('createPost succeeded', function () {",
+                  "    pm.expect(out.__typename, out.message || '').to.eql('PostActionSuccess');",
+                  "});",
+                  "if (out.__typename === 'PostActionSuccess') {",
+                  "    pm.collectionVariables.set('post_id', out.post.id);",
+                  "    console.log('post_id =', out.post.id, '| status =', out.post.status);",
+                  "}"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"mutation CreatePost($input: CreatePostInput!) {\\n  createPost(input: $input) {\\n    __typename\\n    ... on PostActionSuccess {\\n      post {\\n        id\\n        text\\n        status\\n        shareMode\\n        dueAt\\n        createdAt\\n        channelId\\n        channelService\\n      }\\n    }\\n    ... on MutationError {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"channelId\": \"{{channel_id}}\",\n      \"text\": \"LinkedIn post from the Buffer API collection.\",\n      \"schedulingType\": \"automatic\",\n      \"mode\": \"addToQueue\",\n      \"saveToDraft\": true,\n      \"assets\": [],\n      \"metadata\": {\n        \"linkedin\": {\n          \"linkAttachment\": {\n            \"url\": \"https://example.com/careers\"\n          }\n        }\n      }\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "`metadata` is keyed by network: `linkedin`, `twitter`, `instagram`, `facebook`, `tiktok`, `threads`, `youtube`, `pinterest`, `mastodon`, `bluesky`, `google`.\n\nLinkedIn accepts `firstComment`, `linkAttachment` (`{ url }` only — no title/description override), and `annotations` (@-mentions).\n\n⚠️ `firstComment` is a **paid-plan feature** — on Free it comes back as `InvalidInputError: LinkedIn first comment requires a paid plan`. It is left out of the body below; add it back once the account is upgraded:\n```json\n\"linkedin\": { \"firstComment\": \"Full JD in the comments 👇\" }\n```\n\n⚠️ `metadata.<service>.linkAttachment` and a non-empty `assets` array are **mutually exclusive** — sending both is an `InvalidInputError`."
+          },
+          "response": []
+        },
+        {
+          "name": "Edit Post",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "pm.test('editPost succeeded', function () {",
+                  "    pm.expect(res.data.editPost.__typename, res.data.editPost.message || '')",
+                  "        .to.eql('PostActionSuccess');",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"mutation EditPost($input: EditPostInput!) {\\n  editPost(input: $input) {\\n    __typename\\n    ... on PostActionSuccess {\\n      post {\\n        id\\n        text\\n        status\\n        dueAt\\n        updatedAt\\n      }\\n    }\\n    ... on MutationError {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"id\": \"{{post_id}}\",\n      \"text\": \"Edited via the Buffer API collection.\",\n      \"schedulingType\": \"automatic\"\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "The mutation is `editPost` (not `updatePost`). `id` and `schedulingType` are required; every other field is optional and **omitting a field preserves its current value**.\n\nChange the schedule by sending `mode: \"customScheduled\"` together with a new `dueAt`."
+          },
+          "response": []
+        },
+        {
+          "name": "Move Post in Queue",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "pm.test('movePostInQueue succeeded', function () {",
+                  "    pm.expect(res.data.movePostInQueue.__typename,",
+                  "        res.data.movePostInQueue.message || '').to.eql('PostActionSuccess');",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"mutation MovePostInQueue($input: MovePostInQueueInput!) {\\n  movePostInQueue(input: $input) {\\n    __typename\\n    ... on PostActionSuccess {\\n      post {\\n        id\\n        dueAt\\n        shareMode\\n      }\\n    }\\n    ... on MutationError {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"id\": \"{{queued_post_id}}\",\n      \"position\": \"top\"\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "`position` is `top` or `bottom`.\n\n⚠️ Only works on posts whose `shareMode` is `addToQueue`/`shareNext`. A draft or a `customScheduled` post gives `VoidMutationError: Only queued posts can be moved within the queue` — hence the separate `{{queued_post_id}}` variable, filled by *Get Scheduled Posts* or *Create Post · Add to Queue*."
+          },
+          "response": []
+        },
+        {
+          "name": "Delete Post",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const out = res.data.deletePost;",
+                  "pm.test('deletePost succeeded', function () {",
+                  "    pm.expect(out.__typename, out.message || '').to.eql('DeletePostSuccess');",
+                  "});",
+                  "if (out.__typename === 'DeletePostSuccess') {",
+                  "    console.log('deleted', out.id);",
+                  "    pm.collectionVariables.set('post_id', '');",
+                  "}"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"mutation DeletePost($input: DeletePostInput!) {\\n  deletePost(input: $input) {\\n    __typename\\n    ... on DeletePostSuccess {\\n      id\\n    }\\n    ... on MutationError {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"id\": \"{{post_id}}\"\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "**This is the delete endpoint.**\n\nTakes only the post id. The payload union is `DeletePostSuccess { id }` | `VoidMutationError { message }` — note it is *not* `PostActionSuccess`.\n\nDeleting a `sent` post removes it from Buffer; it does not necessarily retract it from the social network. Check `allowedActions` on the post for `deletePost` first."
+          },
+          "response": []
+        }
+      ]
+    },
+    {
+      "name": "05 · Ideas",
+      "description": "Ideas live on the **organization**, not a channel — drafts that are not yet committed to a network.",
+      "item": [
+        {
+          "name": "Get Ideas",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const edges = res.data.ideas.edges;",
+                  "if (edges.length) pm.collectionVariables.set('idea_id', edges[0].node.id);"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetIdeas($first: Int, $after: String, $input: IdeasInput!) {\\n  ideas(first: $first, after: $after, input: $input) {\\n    edges {\\n      cursor\\n      node {\\n        id\\n        createdAt\\n        content {\\n          title\\n          text\\n          services\\n        }\\n      }\\n    }\\n    pageInfo {\\n      hasNextPage\\n      endCursor\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"first\": 20,\n    \"input\": {\n      \"organizationId\": \"{{org_id}}\"\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Cursor-paginated like posts. Optional `groupFilter` and `tagsFilter`."
+          },
+          "response": []
+        },
+        {
+          "name": "Create Idea",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"mutation CreateIdea($input: CreateIdeaInput!) {\\n  createIdea(input: $input) {\\n    __typename\\n    ... on IdeaResponse {\\n      refreshIdeas\\n      idea {\\n        id\\n        organizationId\\n        createdAt\\n        content {\\n          title\\n          text\\n          services\\n        }\\n      }\\n    }\\n    ... on Idea {\\n      id\\n      content {\\n        title\\n        text\\n      }\\n    }\\n    ... on MutationError {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"organizationId\": \"{{org_id}}\",\n      \"content\": {\n        \"title\": \"Idea from the Buffer API collection\",\n        \"text\": \"Draft copy that is not tied to a channel yet.\",\n        \"services\": [\n          \"linkedin\"\n        ]\n      }\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "`content` accepts `title`, `text`, `services`, `media`, `tags`, `date`, `aiAssisted`.\n\nThe payload union is `IdeaResponse` | `Idea` | `InvalidInputError` | `UnauthorizedError` | `LimitReachedError` | `UnexpectedError` — this API returns `IdeaResponse`.\n\n⚠️ There is no `deleteIdea` mutation, so anything you create here has to be removed from the Buffer UI."
+          },
+          "response": []
+        }
+      ]
+    },
+    {
+      "name": "06 · Analytics",
+      "description": "Metrics only exist for `sent` posts. On the Free plan, Insights history is capped at the **last 31 days** — a wider window returns `BAD_USER_INPUT`.",
+      "item": [
+        {
+          "name": "Get Post Metrics",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetPostMetrics($input: PostInput!) {\\n  post(input: $input) {\\n    id\\n    sentAt\\n    externalLink\\n    metricsUpdatedAt\\n    metrics {\\n      name\\n      description\\n      type\\n      unit\\n      value\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"id\": \"{{sent_post_id}}\"\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Run **03 · Get Sent Posts** first — it fills `{{sent_post_id}}`. (Pointing this at `{{post_id}}` right after a delete gives `BAD_USER_INPUT: Invalid PostId format`, because the variable is empty.)\n\n`metrics` is `null` until the post is sent. `type` is one of `impressions`, `reach`, `reactions`, `likes`, `comments`, `shares`, `reposts`, `quotes`, `clicks`, `saves`, `follows`, `views`, `viewers`, `totalTimeWatched`, `engagementRate`, `postCount`. `unit` is `count` or `percentage`."
+          },
+          "response": []
+        },
+        {
+          "name": "Get Aggregated Post Metrics (last 30 days)",
+          "event": [
+            {
+              "listen": "prerequest",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "pm.collectionVariables.set('metrics_end', new Date().toISOString());",
+                  "pm.collectionVariables.set('metrics_start', new Date(Date.now() - 30 * 864e5).toISOString());"
+                ]
+              }
+            },
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetAggregatedPostMetrics($input: AggregatedPostMetricsInput!) {\\n  aggregatedPostMetrics(input: $input) {\\n    metricsUpdatedAt\\n    metrics {\\n      name\\n      type\\n      unit\\n      value\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"organizationId\": \"{{org_id}}\",\n      \"channelIds\": [\n        \"{{channel_id}}\"\n      ],\n      \"startDateTime\": \"{{metrics_start}}\",\n      \"endDateTime\": \"{{metrics_end}}\"\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Totals across every sent post in the window. The pre-request script sets a 30-day range to stay inside the Free-plan 31-day cap."
+          },
+          "response": []
+        }
+      ]
+    },
+    {
+      "name": "07 · HRMS job-post flow",
+      "description": "The exact calls `backend/job/job_post/plugins.py` makes, so you can reproduce a backend failure directly against Buffer.\n\n`.env` mapping: `BUFFER_API` → `{{buffer_token}}`, `BUFFER_API_URL` → `{{buffer_api_url}}`, `BUFFER_CHANNEL_ID` → `{{channel_id}}`.",
+      "item": [
+        {
+          "name": "1. list_buffer_channels — organizations",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "pm.collectionVariables.set('org_id', res.data.account.organizations[0].id);"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query { account { organizations { id name } } }\"\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "First half of `list_buffer_channels()` — mirrors the literal query string in `plugins.py`."
+          },
+          "response": []
+        },
+        {
+          "name": "2. list_buffer_channels — channels per org",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query GetChannels {\\n  channels(input: { organizationId: \\\"{{org_id}}\\\" }) {\\n    id\\n    name\\n    displayName\\n    service\\n    isQueuePaused\\n  }\\n}\"\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Second half of `list_buffer_channels()`, exposed by the backend at `GET /job/buffer/channels`. Note this one inlines the org id rather than using GraphQL variables — same as the Python."
+          },
+          "response": []
+        },
+        {
+          "name": "3. create_buffer_post — rendered job ad",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "const out = res.data.createPost;",
+                  "pm.test('createPost succeeded', function () {",
+                  "    pm.expect(out.__typename, out.message || '').to.eql('PostActionSuccess');",
+                  "});",
+                  "if (out.__typename === 'PostActionSuccess') {",
+                  "    pm.collectionVariables.set('post_id', out.post.id);",
+                  "    console.log('post_id =', out.post.id, '| status =', out.post.status);",
+                  "}"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"mutation CreatePost($input: CreatePostInput!) {\\n  createPost(input: $input) {\\n    __typename\\n    ... on PostActionSuccess {\\n      post {\\n        id\\n        text\\n        status\\n        shareMode\\n        dueAt\\n        createdAt\\n        channelId\\n        channelService\\n      }\\n    }\\n    ... on MutationError {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"channelId\": \"{{channel_id}}\",\n      \"text\": \"We're hiring: AI Engineer\\n\\nKarachi · Full-time\\n\\nExperience: 2–3 years\\n\\nRequirements:\\n• AWS\\n• FastAPI\\n• LangChain\\n\\nNice to have:\\n• Azure\\n\\nSalary: Anonymous\\n\\nInterested? Apply via our careers page or reply to this post.\\n\\n#AWS #FastAPI #LangChain\",\n      \"schedulingType\": \"automatic\",\n      \"mode\": \"addToQueue\",\n      \"saveToDraft\": true,\n      \"assets\": []\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "What `POST /job/post-job` ends up sending, using the output of `render_job_post()`. The backend supports `mode` of `addToQueue`, `shareNow`, or `customScheduled` (which then requires `due_at`).\n\nLinkedIn caps post text at 3000 characters — `render_job_post()` truncates to that.\n\n`saveToDraft: true` is added here so running it does not queue a real job ad; the backend does not send it."
+          },
+          "response": []
+        },
+        {
+          "name": "4. clean up — delete the post created above",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"mutation DeletePost($input: DeletePostInput!) {\\n  deletePost(input: $input) {\\n    __typename\\n    ... on DeletePostSuccess {\\n      id\\n    }\\n    ... on MutationError {\\n      message\\n    }\\n  }\\n}\",\n  \"variables\": {\n    \"input\": {\n      \"id\": \"{{post_id}}\"\n    }\n  }\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Removes whatever step 3 created."
+          },
+          "response": []
+        }
+      ]
+    },
+    {
+      "name": "08 · Error shapes (reference)",
+      "description": "Run these to see each failure mode. Buffer returns **HTTP 200** for almost everything — you must inspect the body.\n\n* Non-recoverable → top-level `errors[]` with `extensions.code`: `UNAUTHORIZED`, `FORBIDDEN`, `NOT_FOUND`, `BAD_USER_INPUT`, `GRAPHQL_VALIDATION_FAILED`, `UNEXPECTED`, `RATE_LIMIT_EXCEEDED`.\n* Recoverable → `data.<mutation>.__typename` is a member of the error union (`InvalidInputError`, `LimitReachedError`, `NotFoundError`, `UnauthorizedError`, `RestProxyError`, `UnexpectedError`).",
+      "item": [
+        {
+          "name": "FORBIDDEN — totalCount on posts",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "console.log(JSON.stringify(res.errors, null, 2));",
+                  "pm.test('Returns a GraphQL error (expected)', function () {",
+                  "    pm.expect(res.errors).to.be.an('array');",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query {\\n  posts(first: 1, input: { organizationId: \\\"{{org_id}}\\\" }) {\\n    totalCount\\n  }\\n}\"\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "`totalCount` is in the schema but rejected for API-key auth. This is the most common cause of a `posts` query failing after copy-pasting from the schema reference — leave it out."
+          },
+          "response": []
+        },
+        {
+          "name": "NOT_FOUND — bad post id",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "console.log(JSON.stringify(res.errors, null, 2));",
+                  "pm.test('Returns a GraphQL error (expected)', function () {",
+                  "    pm.expect(res.errors).to.be.an('array');",
+                  "});"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query {\\n  post(input: { id: \\\"000000000000000000000000\\\" }) {\\n    id\\n  }\\n}\"\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Expect `errors[0].extensions.code === 'NOT_FOUND'`."
+          },
+          "response": []
+        },
+        {
+          "name": "Rate limit headers",
+          "event": [
+            {
+              "listen": "test",
+              "script": {
+                "type": "text/javascript",
+                "exec": [
+                  "const res = pm.response.json();",
+                  "pm.test('HTTP 200', () => pm.response.to.have.status(200));",
+                  "pm.test('No GraphQL errors', function () {",
+                  "    pm.expect(res.errors, JSON.stringify(res.errors)).to.be.undefined;",
+                  "});",
+                  "console.log('ratelimit       :', pm.response.headers.get('ratelimit'));",
+                  "console.log('ratelimit-policy:', pm.response.headers.get('ratelimit-policy'));"
+                ]
+              }
+            }
+          ],
+          "request": {
+            "method": "POST",
+            "header": [
+              {
+                "key": "Content-Type",
+                "value": "application/json"
+              }
+            ],
+            "body": {
+              "mode": "raw",
+              "raw": "{\n  \"query\": \"query { account { id } }\"\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            },
+            "url": {
+              "raw": "{{buffer_api_url}}",
+              "host": [
+                "{{buffer_api_url}}"
+              ]
+            },
+            "description": "Every response carries three rolling windows. Free plan: 100 / 15 min, 250 / day, 3000 / 30 days. `r` = remaining, `t` = seconds to reset. Exceeding one gives HTTP 429 + `Retry-After`."
+          },
+          "response": []
+        }
+      ]
+    }
+  ],
+  "variable": [
+    {
+      "key": "buffer_api_url",
+      "value": "https://api.buffer.com",
+      "type": "string"
+    },
+    {
+      "key": "buffer_token",
+      "value": "",
+      "type": "string"
+    },
+    {
+      "key": "org_id",
+      "value": "",
+      "type": "string"
+    },
+    {
+      "key": "channel_id",
+      "value": "",
+      "type": "string"
+    },
+    {
+      "key": "post_id",
+      "value": "",
+      "type": "string"
+    },
+    {
+      "key": "sent_post_id",
+      "value": "",
+      "type": "string"
+    },
+    {
+      "key": "queued_post_id",
+      "value": "",
+      "type": "string"
+    },
+    {
+      "key": "idea_id",
+      "value": "",
+      "type": "string"
+    },
+    {
+      "key": "posts_cursor",
+      "value": "",
+      "type": "string"
+    },
+    {
+      "key": "due_at",
+      "value": "",
+      "type": "string"
+    },
+    {
+      "key": "range_start",
+      "value": "",
+      "type": "string"
+    },
+    {
+      "key": "range_end",
+      "value": "",
+      "type": "string"
+    },
+    {
+      "key": "metrics_start",
+      "value": "",
+      "type": "string"
+    },
+    {
+      "key": "metrics_end",
+      "value": "",
+      "type": "string"
+    }
+  ]
+}
diff --git a/docs/integrations/buffer/Buffer-API.postman_environment.json b/docs/integrations/buffer/Buffer-API.postman_environment.json
new file mode 100644
index 0000000..e851cc8
--- /dev/null
+++ b/docs/integrations/buffer/Buffer-API.postman_environment.json
@@ -0,0 +1,61 @@
+{
+  "id": "e0ffe4a1-2c3d-4e5f-8a9b-0c1d2e3f4a5b",
+  "name": "Buffer API (fill in your key)",
+  "values": [
+    {
+      "key": "buffer_api_url",
+      "value": "https://api.buffer.com",
+      "type": "default",
+      "enabled": true
+    },
+    {
+      "key": "buffer_token",
+      "value": "",
+      "type": "secret",
+      "enabled": true
+    },
+    {
+      "key": "org_id",
+      "value": "",
+      "type": "default",
+      "enabled": true
+    },
+    {
+      "key": "channel_id",
+      "value": "",
+      "type": "default",
+      "enabled": true
+    },
+    {
+      "key": "post_id",
+      "value": "",
+      "type": "default",
+      "enabled": true
+    },
+    {
+      "key": "sent_post_id",
+      "value": "",
+      "type": "default",
+      "enabled": true
+    },
+    {
+      "key": "queued_post_id",
+      "value": "",
+      "type": "default",
+      "enabled": true
+    },
+    {
+      "key": "idea_id",
+      "value": "",
+      "type": "default",
+      "enabled": true
+    },
+    {
+      "key": "posts_cursor",
+      "value": "",
+      "type": "default",
+      "enabled": true
+    }
+  ],
+  "_postman_variable_scope": "environment"
+}
diff --git a/docs/integrations/buffer/README.md b/docs/integrations/buffer/README.md
new file mode 100644
index 0000000..bfb552e
--- /dev/null
+++ b/docs/integrations/buffer/README.md
@@ -0,0 +1,185 @@
+# Buffer API — working collection
+
+Buffer's public API is **GraphQL, one endpoint, POST only**:
+
+```
+POST https://api.buffer.com
+Authorization: Bearer <BUFFER_API>
+Content-Type: application/json
+```
+
+There are no REST paths. The operation is decided entirely by the GraphQL document in the
+body. Docs: <https://developers.buffer.com/guides> · Explorer: <https://developers.buffer.com/explorer.html>
+
+## Files
+
+| File | What it is |
+|---|---|
+| `Buffer-API.postman_collection.json` | 38 requests in 9 folders. Import into Postman/Insomnia/Bruno. |
+| `Buffer-API.postman_environment.json` | Empty environment template — safe to commit. |
+| `Buffer-API.postman_environment.local.json` | Same, pre-filled with the key + ids from `backend/.env`. **Gitignored — do not commit.** |
+
+## Setup
+
+1. Import the collection **and** `Buffer-API.postman_environment.local.json`, then select
+   that environment. (Or import the plain template and paste `BUFFER_API` from
+   `backend/.env` into `buffer_token`.)
+2. Run **01 · Get Organizations** → fills `{{org_id}}`.
+3. Run **02 · Get Channels** → fills `{{channel_id}}`.
+
+Everything else works from there. Test scripts chain the ids for you:
+
+| Variable | Filled by | Used by |
+|---|---|---|
+| `org_id` | 01 · Get Organizations | almost everything |
+| `channel_id` | 02 · Get Channels | all create requests |
+| `post_id` | 03 · Get Posts, every create request | Get Post by ID, Edit Post, **Delete Post** |
+| `sent_post_id` | 03 · Get Sent Posts | 06 · Get Post Metrics |
+| `queued_post_id` | 03 · Get Scheduled Posts, 04 · Add to Queue | 04 · Move Post in Queue |
+| `posts_cursor` | 03 · Get Posts | 03 · Get Posts — Next Page |
+
+So **Delete Post** always targets the last post you touched.
+
+## The endpoints you asked for
+
+| Need | Folder / request | Where the value is |
+|---|---|---|
+| **org_id** | 01 · Get Organizations | `data.account.organizations[].id` |
+| **channel_id** | 02 · Get Channels | `data.channels[].id` |
+| **create a post** | 04 · Create Post · … | `data.createPost` → `PostActionSuccess.post.id` |
+| **delete a post** | 04 · Delete Post | `data.deletePost` → `DeletePostSuccess.id` |
+| **list posts** | 03 · Get Posts | `data.posts.edges[].node` |
+| **one post** | 03 · Get Post by ID | `data.post` |
+| **edit a post** | 04 · Edit Post | `editPost` (not `updatePost`) |
+
+### org_id
+
+```bash
+curl -s -X POST https://api.buffer.com \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer $BUFFER_API" \
+  -d '{"query":"query { account { id email organizations { id name channelCount } } }"}'
+```
+
+### channel_id
+
+```bash
+curl -s -X POST https://api.buffer.com \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer $BUFFER_API" \
+  -d '{"query":"query GetChannels($input: ChannelsInput!) { channels(input: $input) { id name service type isDisconnected isQueuePaused } }",
+       "variables":{"input":{"organizationId":"'"$BUFFER_ORG_ID"'"}}}'
+```
+
+### create post
+
+```bash
+curl -s -X POST https://api.buffer.com \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer $BUFFER_API" \
+  -d '{"query":"mutation CreatePost($input: CreatePostInput!) { createPost(input: $input) { __typename ... on PostActionSuccess { post { id status dueAt } } ... on MutationError { message } } }",
+       "variables":{"input":{"channelId":"'"$BUFFER_CHANNEL_ID"'","text":"Hello","schedulingType":"automatic","mode":"addToQueue","assets":[]}}}'
+```
+
+### delete post
+
+```bash
+curl -s -X POST https://api.buffer.com \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer $BUFFER_API" \
+  -d '{"query":"mutation DeletePost($input: DeletePostInput!) { deletePost(input: $input) { __typename ... on DeletePostSuccess { id } ... on MutationError { message } } }",
+       "variables":{"input":{"id":"POST_ID"}}}'
+```
+
+### list posts
+
+```bash
+curl -s -X POST https://api.buffer.com \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer $BUFFER_API" \
+  -d '{"query":"query GetPosts($first: Int, $after: String, $input: PostsInput!) { posts(first: $first, after: $after, input: $input) { edges { cursor node { id text status dueAt sentAt channelId externalLink } } pageInfo { hasNextPage endCursor } } }",
+       "variables":{"first":20,"input":{"organizationId":"'"$BUFFER_ORG_ID"'","filter":{"status":["scheduled"]}}}}'
+```
+
+## `.env` mapping
+
+| `.env` key | Collection variable | Notes |
+|---|---|---|
+| `BUFFER_API` | `buffer_token` | The personal access token. Buffer → Settings → API. |
+| `BUFFER_API_URL` | `buffer_api_url` | `https://api.buffer.com` — correct as-is. |
+| `BUFFER_CHANNEL_ID` | `channel_id` | Currently the LinkedIn profile `ahmedmujtababaig`. |
+| — | `org_id` | **Not in `.env`.** `CLIENT_ID` in `backend/.env` holds this value, but it is the *organization id*, not an OAuth client id — the naming is misleading. Consider renaming it to `BUFFER_ORG_ID`. |
+
+`plugins.py` re-derives the org id on every `list_buffer_channels()` call, so nothing is
+broken today; caching it in `BUFFER_ORG_ID` would save one round trip per request.
+
+## Enums worth memorising
+
+| Enum | Values |
+|---|---|
+| `ShareMode` (`mode`) | `addToQueue` · `shareNext` · `shareNow` · `customScheduled` |
+| `SchedulingType` | `automatic` (Buffer publishes) · `notification` (Buffer reminds you) |
+| `PostStatus` | `draft` · `needs_approval` · `scheduled` · `sending` · `sent` · `error` |
+| `PostSortableKey` | `dueAt` · `createdAt` **only** |
+| `SortDirection` | `asc` · `desc` |
+| `QueuePosition` | `top` · `bottom` |
+| `Service` | `linkedin` `twitter` `facebook` `instagram` `tiktok` `threads` `youtube` `pinterest` `mastodon` `bluesky` `googlebusiness` `startPage` |
+| `PostMetricType` | `impressions` `reach` `reactions` `likes` `comments` `shares` `reposts` `quotes` `clicks` `saves` `follows` `views` `viewers` `totalTimeWatched` `engagementRate` `postCount` |
+
+## Gotchas that cost real time
+
+- **Errors come back as HTTP 200.** Check `errors[]` and `__typename`, not the status code.
+- **Do not request `totalCount` on `posts`** — API-key auth gets `FORBIDDEN` and the whole
+  query returns `data: null`.
+- The edit mutation is **`editPost`**, not `updatePost`.
+- `deletePost` returns **`DeletePostSuccess`**, not `PostActionSuccess`. A blanket
+  `... on PostActionSuccess` fragment silently matches nothing.
+- `schedulingType` is *not* the queue mode. `automatic` vs `notification` only. The queue
+  mode is `mode`.
+- `mode: customScheduled` requires `dueAt` (ISO 8601 UTC). `mode: shareNow` publishes
+  immediately with no undo.
+- `assets` URLs are fetched **server-side** — they must return raw bytes, not an HTML page.
+- `metadata.<service>.linkAttachment` and a non-empty `assets` array are mutually exclusive.
+- LinkedIn `linkAttachment` only accepts `{ url }`; there is no title/description override.
+- There is **no `deleteIdea` mutation** — ideas created via the API must be removed in the UI.
+- `movePostInQueue` only accepts posts whose `shareMode` is `addToQueue`/`shareNext`. Drafts
+  and `customScheduled` posts give
+  `VoidMutationError: Only queued posts can be moved within the queue`.
+
+## Free-plan limits hit while testing this
+
+- **100 requests / 15 min**, 250 / day, 3000 / 30 days. A full Collection Runner pass is
+  ~38 calls, so two back-to-back runs trip the 15-minute window
+  (HTTP 429, `RATE_LIMIT_EXCEEDED`, `extensions.window: "15m"`, plus `Retry-After`).
+  Every response carries `ratelimit` / `ratelimit-policy` headers.
+- **Insights are capped at the last 31 days.** A wider `aggregatedPostMetrics` window
+  returns `BAD_USER_INPUT`.
+- **LinkedIn `firstComment` is paid-only** — `InvalidInputError` on Free.
+- **`needsApproval: true`** is rejected unless the channel has an approval posting policy.
+- Daily posting limit on the connected channel is 50/day (`dailyPostingLimits`).
+
+## Error codes
+
+`extensions.code` on top-level `errors[]`: `UNAUTHORIZED` · `FORBIDDEN` · `NOT_FOUND` ·
+`BAD_USER_INPUT` · `GRAPHQL_VALIDATION_FAILED` · `RATE_LIMIT_EXCEEDED` · `UNEXPECTED`.
+
+Mutation union error members: `InvalidInputError` · `LimitReachedError` · `NotFoundError` ·
+`UnauthorizedError` · `RestProxyError` · `UnexpectedError` — all implement the
+`MutationError` interface, so `... on MutationError { message }` catches every one,
+including ones Buffer adds later.
+
+## Verification
+
+Every request in the collection was executed against the live API on 2026-08-05 using the
+key in `backend/.env`: **38/38 pass.**
+
+Two of those (**Share Now**, **Create Idea**) were validated document-only — sent with a
+deliberately invalid id so the server still parses and validates the GraphQL but cannot
+execute it — because one publishes to the real LinkedIn account and the other creates
+something the API has no mutation to delete. **Create Post · Needs Approval** returns
+`InvalidInputError` on this account: the query is correct, the channel just has no approval
+policy.
+
+Every post created during verification was deleted; the account is back to the same three
+posts it had beforehand, and the pre-existing scheduled job ad still holds its original
+`dueAt` slot.
diff --git a/frontend/.env.development b/frontend/.env.development
new file mode 100644
index 0000000..de07be0
--- /dev/null
+++ b/frontend/.env.development
@@ -0,0 +1,3 @@
+# Use 127.0.0.1, not localhost. On this machine localhost prefers ::1 and hits a
+# different listener (WSL/Docker on :8000) instead of the Windows uvicorn on 127.0.0.1.
+VITE_API_BASE=http://127.0.0.1:8000
diff --git a/frontend/.env.production b/frontend/.env.production
new file mode 100644
index 0000000..54a8a13
--- /dev/null
+++ b/frontend/.env.production
@@ -0,0 +1,7 @@
+# The API origin for a production build.
+#
+# This previously pointed at http://localhost:8000, which meant a production
+# bundle called the *user's own machine*. Empty means same-origin requests, which
+# works behind a reverse proxy that fronts both the bundle and the API. Set the
+# real API origin here if the two are served from different hosts.
+VITE_API_BASE=
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..f425b9e
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- viewport-fit=cover lets the layout reach under the iOS notch/home bar;
+         the safe-area insets in styles.css keep content clear of them.
+         No maximum-scale/user-scalable — pinch-zoom must stay available. -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="color-scheme" content="light dark" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="format-detection" content="telephone=no" />
+    <!-- Per-route titles are set at runtime by useRouteMeta. -->
+    <title>TalentFlow · Applicant Tracking System</title>
+    <meta name="theme-color" content="#004d43" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#0e1d1f" media="(prefers-color-scheme: dark)" />
+
+    <!-- Utopia brand type: Belleza (main headings) + Inter as the metric-
+         compatible stand-in for Neue Montreal, which is a licensed face.
+         If Neue Montreal is installed locally it wins via the CSS stack. -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&display=swap" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
new file mode 100644
index 0000000..04a38bd
--- /dev/null
+++ b/frontend/package-lock.json
@@ -0,0 +1,2987 @@
+{
+  "name": "hr-ats-portal",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "hr-ats-portal",
+      "version": "0.1.0",
+      "dependencies": {
+        "@tanstack/react-query": "^5.101.4",
+        "@tanstack/react-query-devtools": "^5.101.4",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "react-router-dom": "^7.6.0"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-react": "^4.5.0",
+        "esbuild": "^0.28.1",
+        "jsdom": "^30.0.1",
+        "vite": "^6.3.5"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-6.0.5.tgz",
+      "integrity": "sha512-mbhpPMmnw/kwW19aRNmSUl1QzLbdGo1SCuE49BT98MNwqF6zaHb3o2owssFc/PEO/4t2UjqtCNwocuDtJornzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^3.2.1",
+        "@csstools/css-color-parser": "^4.1.9",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "lru-cache": "^11.5.2"
+      },
+      "engines": {
+        "node": "^22.13.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz",
+      "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-8.3.2.tgz",
+      "integrity": "sha512-93Z1N+BQNXysodoicpOIyNh2drHfz/CTf9nnT0FEx72GJcIiwgydD7tGAr78j41LsYn3hlRn+LdGPuBLn1Bl8Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.2.1",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.5.2"
+      },
+      "engines": {
+        "node": "^22.13.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz",
+      "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz",
+      "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@babel/types": "^7.29.8",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
+      "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.8"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz",
+      "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz",
+      "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz",
+      "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.8",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.8",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.8",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^3.0.0"
+      },
+      "bin": {
+        "specificity": "bin/cli.js"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.1.0.tgz",
+      "integrity": "sha512-064IFJdjTfUqnjpCVpMOdbr8FLQBhinbZj6yRv2An2E41O/pLEXqfFRWqGq/SxlE5PEUYTlvWsG2r8MswAVvkg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.3.0.tgz",
+      "integrity": "sha512-c5ihYsPkdG6JCkU2zTMm4+k6r7RXuGxtWYhu5DHMIiF1FHzrfmHL5so11AoFpUv/tu61xfcmT4AmKoFfMPoqdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.1.10.tgz",
+      "integrity": "sha512-UZhQLIUyJaaMepqehrCODwCg2KW25vFvLWBmqYFaPclYvvxzj/sG8LBOhBFCp11i9uE7t1EyS+RAoV9tztPFyw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.1.0",
+        "@csstools/css-calc": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.7.tgz",
+      "integrity": "sha512-fQ+05118eQS1cofO3aJpB5efgpBZMvIzwr/sbC8kDLVA5XLG8q1kJV5yzrUAI1f7lvhPnm8fgIjzFB8/O/5Dig==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz",
+      "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz",
+      "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz",
+      "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz",
+      "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz",
+      "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz",
+      "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz",
+      "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz",
+      "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz",
+      "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz",
+      "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz",
+      "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz",
+      "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz",
+      "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz",
+      "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz",
+      "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz",
+      "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz",
+      "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz",
+      "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz",
+      "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz",
+      "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz",
+      "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz",
+      "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@exodus/bytes": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.1.tgz",
+      "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/lzma-linux-x64-gnu": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/lzma-linux-x64-gnu/-/lzma-linux-x64-gnu-1.5.1.tgz",
+      "integrity": "sha512-oTXEIha4SsuXdTA4Iyskj0kpdx2yVXdhd75c2v3xGrHFfVMsbhTPZU/nMPL4sWKo4pBHm3aucLaqGlF696dTyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^22.20 || ^24.12 || >=25"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.4.tgz",
+      "integrity": "sha512-RrPokAb7dmbxFoeO3TloqHyOjgye8RkBhSqmp4aJMIex4c9r46ZstPnleDQOq1t46VOVjwIuwNogIqbodV1Vvg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.4.tgz",
+      "integrity": "sha512-JKuJc+pnpks2pjy7L/N3v/cAkZxYlnmuZoD840ldbMI5KDbC4iO9NKwPKYdjYFCMAIIlBzYSFHxIJVYzRo2/8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.4.tgz",
+      "integrity": "sha512-krw5uS2STmvJ02x0uTXHbqQNuz+9eZ1iw+qXk9dmW2gvV4jV7O2hEoOnuhFrpOPiel1mBFtqbxYZZtC46hXLOw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.4.tgz",
+      "integrity": "sha512-wsTxtgApb4PrOsNJIm0FZ1h3WvCC+k9uxLJ4ad75hgoS4NiRes2SoJFlDAyMwiUY8IssDqGcHbXuN0sx1tfF1A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.4.tgz",
+      "integrity": "sha512-GUOnQlyZe3yAXhWOtOMsn5Qkrv5E5mZXa0thbARWi5Ei2szlVXJFQhddZ4HbAzh8q92w5twp+CQvs/eFanz9YQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.4.tgz",
+      "integrity": "sha512-/Y7f3QuxjzPKsjA/rfEDa3+0vXqyjmJ50Ln8dPpCmWkKTrUoWHG1cWhTqaAMLob2m2nESWuC7yGrREz019Ztqg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.4.tgz",
+      "integrity": "sha512-81wiiX3v7aqy+T+bT61TJ78yJjRquqFFTTbAPt08imfQQzkPIW8t6aJbkTagtCCrXMNc9D66+geqlK7ydLPNqA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.4.tgz",
+      "integrity": "sha512-9kmDIvNZqdoHOBZgNtpTBeLWYO/LVipM3H/j62P8848/l/VPEQL6N3uxU9pvP1oZAsXyC2MEnFP3ovRjo7WYNQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.4.tgz",
+      "integrity": "sha512-CcnXHWnXg69g+DX5VWL3FHts3qMRN2uVEHX+BZvGLdd07/gXkn3ePjYtO1LDJvxkGKVHMclKBRa1QUTH+6toYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.4.tgz",
+      "integrity": "sha512-iFOibiHnTRuhrWLlRsOQFdZJJIa7S8OwkneJr4ocALP16u5yk6lWLINFwhHaEqBFMsKDUZofLkGos7+CPzGB3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.4.tgz",
+      "integrity": "sha512-XnWYMI7euHlb5a871xPja+Gm7DRCFU+FGRrtS2sMq9N8FvqtpagUy6gD4YOemC5MRk9xbh8+jYMEJbigFQwsgA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.4.tgz",
+      "integrity": "sha512-qGDAlO0U8xedCcsdRm9oaoQY8DAx/QT7uIxJWhCdx0ceIWX783UC9QSYkdpzAe29wNiVfp24+bZdQmn49o45SQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.4.tgz",
+      "integrity": "sha512-ru4H6ezD7ysA5EiEK6qkkaEb4modH8CTej6kUy/gQi20u3kB3G7Zn8snXXkeJSCOFKG/rbPPtM/+9Wgas1961w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.4.tgz",
+      "integrity": "sha512-2W4MO5WQVJnbJaZdvDb9rhBDuFU1nKIepPFpJUBsTh2k1YY2g+ODViaWuyOAjQ5cOP7NvrvLzt3wvHOoiAvc7w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.4.tgz",
+      "integrity": "sha512-+fxjfuoAmVMCYV5QyjoIpu0cp5DOiOTeqYFk1AVaxGr+/ravWLX89XfQmptsoWcaVy/TGf2hexzbUOrCQIL1CQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.4.tgz",
+      "integrity": "sha512-jTn8JfHGL4djjFxPuM06LmNUJDsst2jeVlsd9OmIH6zc5sC9K6rIuO4YajXatLUpBmBKl6b35ro1QZocLi+tcA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.4.tgz",
+      "integrity": "sha512-oCJCJL4pXsoDcP2QZ+JVlPTIRc6266zsIaeJJsWImmF7HO0W8nb6HuSgZlMWxJwaPf8ehbSw8yo0EUw925hKsA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.4.tgz",
+      "integrity": "sha512-W69hukhZ3KKNRCaMIEzKvcFye42hh0FE1+YoYaf5+Ikacuftoco6yO/xouz0hc5d5W/s3yBro5jRiuEE/Q5vUw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.4.tgz",
+      "integrity": "sha512-qiXbGG2jkjXhzXpsFZSR2Xpb8DN/UaxYsbb/STbuR/6fpaDgRmmaq1B/LmtF2wQFOFOSsK2jdE0RZ3a0zHn4QA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.4.tgz",
+      "integrity": "sha512-nWeM//hxv8mIo6jD7Hu4o48DVmV9pbV6gsKaWU+4NFyqHoPKwrkRiZGLKUhOBk8qNmDmpwFtPKg80Bo/Tn4xiQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.4.tgz",
+      "integrity": "sha512-s62SQ/vgsRSvMwDkOEfTqfgASF0f26ZNaQuTA6Aok5lrikf89yI2W0gFHvZb2Jpgc6N8JnOKZgCK2iciO3CsxQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.4.tgz",
+      "integrity": "sha512-J6wGf8TVGbXJq+HH+ttTvrcfNKPbuZecV6KT1B8I18BC5IURUh5kl4Yl5OEP5eFIUoI5BWxCsyYMhFsDx8kekw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.4.tgz",
+      "integrity": "sha512-zmfrQd/0wu6oJs8Vq8KwY/YtsKSsLtKe/HwAP4Wqy8LhWjeT55fHRAkOhYQ12wI3ayS4Tt12d5CDRD7N96SAYQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.4.tgz",
+      "integrity": "sha512-qPzHqdj9rfUD+w79dtE07zi/kFwKyCJqplp5K5ygeLTp7jLpAoc16OAH39HSmRC9UpozaecsleI8uAdEj6v2yw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.4.tgz",
+      "integrity": "sha512-zD6NdeWEByGE9QF9vCrlJ5YQB4oq9q91kPZS37Jwj5hOkvR1lTBSpsKhKDw4IJtbQ35LsTS1HD9DZYGKIshU1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.101.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.4.tgz",
+      "integrity": "sha512-gNwcvOJcRbLWPOLG/2OBm+zM+Yv+MKsXKEOWC57USuZDEsI71hEErQsiEGx5wX9rzWWkfwM0fVSPoiIFSsxfiw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.101.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.101.4.tgz",
+      "integrity": "sha512-z5IPHnDX3aUWeTWlRKLyooBQekaCAw4xRpZqPQ390RiWTDBcTynjpPT221BArw0u2+pnQMdGvPQI9YNNubBcmA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.101.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.101.4.tgz",
+      "integrity": "sha512-yRg2pfOCxIs4ZJW3XYYHU/WgtD04FHSnfHlpRT7h7pR77hwkdRG4wxbKe4aq6P0RvXUTBSQpQeadS1SUYUe+KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.101.4"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.101.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.101.4.tgz",
+      "integrity": "sha512-VeK2gtmfj7kvRBjtxS7TKxt/6qKhn8VzabY4UiYMr7NV9CddjSRYRgeYyld+NpjAkgMV9dd+2Qdr8ah5I03NeA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.101.4"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.101.4",
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.11.12",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.12.tgz",
+      "integrity": "sha512-r7WnVImvVCeFpf2DOXfy41aPWzeNg3H/A2X4dKmy1QL0MSyyk/e7z8ihJ3N6Nn2PsdhkVlqnEfnUE4a05P2aTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.7",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.7.tgz",
+      "integrity": "sha512-JxV13hNrFxqjOc8alRbq9dK1MM79NEXYpma2B2J4wAtpWS5zIEIKqWPGCl7N4o7Uc7B7itylh7SuDujATRyyTw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.44",
+        "caniuse-lite": "^1.0.30001806",
+        "electron-to-chromium": "^1.5.393",
+        "node-releases": "^2.0.51",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001806",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001806.tgz",
+      "integrity": "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/data-urls": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.400",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.400.tgz",
+      "integrity": "sha512-96EWDNjM59SYflgeV5Ylsf4EMiq1a25YjCnJH7cxn/AF2H3pILRweaUnoLax0yKHWdpOzY6JKEu45e8irqZIHA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/entities": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz",
+      "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.1",
+        "@esbuild/android-arm": "0.28.1",
+        "@esbuild/android-arm64": "0.28.1",
+        "@esbuild/android-x64": "0.28.1",
+        "@esbuild/darwin-arm64": "0.28.1",
+        "@esbuild/darwin-x64": "0.28.1",
+        "@esbuild/freebsd-arm64": "0.28.1",
+        "@esbuild/freebsd-x64": "0.28.1",
+        "@esbuild/linux-arm": "0.28.1",
+        "@esbuild/linux-arm64": "0.28.1",
+        "@esbuild/linux-ia32": "0.28.1",
+        "@esbuild/linux-loong64": "0.28.1",
+        "@esbuild/linux-mips64el": "0.28.1",
+        "@esbuild/linux-ppc64": "0.28.1",
+        "@esbuild/linux-riscv64": "0.28.1",
+        "@esbuild/linux-s390x": "0.28.1",
+        "@esbuild/linux-x64": "0.28.1",
+        "@esbuild/netbsd-arm64": "0.28.1",
+        "@esbuild/netbsd-x64": "0.28.1",
+        "@esbuild/openbsd-arm64": "0.28.1",
+        "@esbuild/openbsd-x64": "0.28.1",
+        "@esbuild/openharmony-arm64": "0.28.1",
+        "@esbuild/sunos-x64": "0.28.1",
+        "@esbuild/win32-arm64": "0.28.1",
+        "@esbuild/win32-ia32": "0.28.1",
+        "@esbuild/win32-x64": "0.28.1"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsdom": {
+      "version": "30.0.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-30.0.1.tgz",
+      "integrity": "sha512-52v7mUVUfNQVYYqE1lcdaymWL0njO7lTLUog6ZvW2U5KsbiLk/GnZlVJ+qx0xfNJZ6Gn+KSpPNE52vurbxZwrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^6.0.5",
+        "@asamuzakjp/dom-selector": "^8.3.0",
+        "@bramus/specificity": "^2.4.2",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.7",
+        "@exodus/bytes": "^1.15.1",
+        "css-tree": "^3.2.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.5.2",
+        "parse5": "^8.0.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.2",
+        "undici": "^8.9.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^17.1.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.2.3"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/lru-cache": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz",
+      "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.17",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.17.tgz",
+      "integrity": "sha512-xQLf0A3HOMlgHq0n247/LRuAOYmB7dXJ/DvAxGvsSBij45XtBSmQycu+F8ODbHwns/XyFZagyL1+J0Offw1E0g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.52",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.52.tgz",
+      "integrity": "sha512-MRlTqhAfoMx/4mhEbPo3Hi02g9LJZaJkka69V6h67Cb1gjrAG0jsTE4CZX1eptNx+VCAwJmfpnDIF4P0Nh1A7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
+      "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.25",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.25.tgz",
+      "integrity": "sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.16",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz",
+      "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.8",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz",
+      "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.8"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.2.tgz",
+      "integrity": "sha512-aUVMjFm3GAPTTZL7oYr5E7ETiqfQCHRLH+B+5afnICvf0r7kkK4eR6SMuwbSTJw/7t+12khT/Kahij49fqOCIg==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.2.tgz",
+      "integrity": "sha512-AIKJ/jgGlFb3EbfCXk5Gzshiwt+l3mqbCrNjmEWMMjqQxNJ3svBa6bgzFyCC2Sw3RA0VWF1kg3uQf2OFhxb8hw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.18.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.62.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.4.tgz",
+      "integrity": "sha512-RXOqwaPsBGjMNMa4sQjDjHieHEZDFoj/Rdr46l2MU5DfEs16wHJPC2RPTPHWhNl+M3aI472LLqFkFKut4SblOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.9"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@napi-rs/lzma-linux-x64-gnu": "1.5.1",
+        "@rollup/rollup-android-arm-eabi": "4.62.4",
+        "@rollup/rollup-android-arm64": "4.62.4",
+        "@rollup/rollup-darwin-arm64": "4.62.4",
+        "@rollup/rollup-darwin-x64": "4.62.4",
+        "@rollup/rollup-freebsd-arm64": "4.62.4",
+        "@rollup/rollup-freebsd-x64": "4.62.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.62.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.62.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.62.4",
+        "@rollup/rollup-linux-arm64-musl": "4.62.4",
+        "@rollup/rollup-linux-loong64-gnu": "4.62.4",
+        "@rollup/rollup-linux-loong64-musl": "4.62.4",
+        "@rollup/rollup-linux-ppc64-gnu": "4.62.4",
+        "@rollup/rollup-linux-ppc64-musl": "4.62.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.62.4",
+        "@rollup/rollup-linux-riscv64-musl": "4.62.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.62.4",
+        "@rollup/rollup-linux-x64-gnu": "4.62.4",
+        "@rollup/rollup-linux-x64-musl": "4.62.4",
+        "@rollup/rollup-openbsd-x64": "4.62.4",
+        "@rollup/rollup-openharmony-arm64": "4.62.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.62.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.62.4",
+        "@rollup/rollup-win32-x64-gnu": "4.62.4",
+        "@rollup/rollup-win32-x64-msvc": "4.62.4",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.4.10.tgz",
+      "integrity": "sha512-GgouD1B+sWwvkaEq8vXC15DjQitxbvs12oIXELpconwm+Tg3zfcEv4jgzq3vtKverDXsg3VI8aRgNL2Nra0Iog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.4.10"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.4.10",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.4.10.tgz",
+      "integrity": "sha512-KnQjp53ZekKgm/r3l+u8kJGGzYgrWdP8+Mql7a4vijh2WE0IrZWspQj/TpTxDho/YxO+AnOZnIjQcCD+q6iJsw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tough-cookie": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.2.tgz",
+      "integrity": "sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/undici": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-8.10.0.tgz",
+      "integrity": "sha512-HvltHd7avK13QIw/oLe4qoOLyoVSoafqJ2jYOrtMRBkbYT31eiBQ8O0ehRKZiEZCMEyLFQNIADpgCWC5fALvYQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=22.19.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz",
+      "integrity": "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
+        "postcss": "^8.5.3",
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "17.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-17.1.0.tgz",
+      "integrity": "sha512-3GeworPmc2ZfEEHP7lEbUfBX/L75wdEsi0rLNhXcXxnoN5jyq0SL5gCy06SGW2cyTIZdTvWIDQNQoza++vKeaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.15.1",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^22.14.0 || >=24.0.0"
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..11b6fd5
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "hr-ats-portal",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:lan": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview",
+    "smoke": "node smoke.test.mjs",
+    "test:token": "node token.test.mjs",
+    "verify": "vite build && node smoke.test.mjs && node token.test.mjs"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.101.4",
+    "@tanstack/react-query-devtools": "^5.101.4",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.5.0",
+    "esbuild": "^0.28.1",
+    "jsdom": "^30.0.1",
+    "vite": "^6.3.5"
+  }
+}
diff --git a/frontend/smoke.test.mjs b/frontend/smoke.test.mjs
new file mode 100644
index 0000000..ffd1f32
--- /dev/null
+++ b/frontend/smoke.test.mjs
@@ -0,0 +1,131 @@
+/**
+ * Render smoke test — mounts all 27 routes (23 app + 4 auth) into jsdom and
+ * fails on any thrown error, console.error, or empty render.
+ *
+ *   npm run smoke
+ *
+ * Bundled with esbuild (not Vite's SSR loader) because several dependencies
+ * ship CJS and esbuild's interop handles that cleanly. The render itself lives
+ * in src/__smoke__/entry.jsx so it exercises the real component tree.
+ */
+import { mkdtempSync, rmSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { pathToFileURL } from 'node:url'
+
+import esbuild from 'esbuild'
+import { JSDOM } from 'jsdom'
+
+// ---------------------------------------------------------------- environment
+const dom = new JSDOM('<!doctype html><html><body><div id="root"></div></body></html>', {
+  url: 'http://localhost:5173/',
+  pretendToBeVisual: true,
+})
+
+globalThis.window = dom.window
+globalThis.document = dom.window.document
+// Node 24 defines `navigator` as a getter-only global.
+Object.defineProperty(globalThis, 'navigator', { value: dom.window.navigator, configurable: true })
+globalThis.HTMLElement = dom.window.HTMLElement
+globalThis.Element = dom.window.Element
+globalThis.Node = dom.window.Node
+globalThis.getComputedStyle = dom.window.getComputedStyle
+globalThis.localStorage = dom.window.localStorage
+globalThis.requestAnimationFrame = (cb) => setTimeout(() => cb(Date.now()), 0)
+globalThis.cancelAnimationFrame = clearTimeout
+globalThis.IS_REACT_ACT_ENVIRONMENT = true
+
+class RO { observe() {} unobserve() {} disconnect() {} }
+class MO { observe() {} disconnect() {} takeRecords() { return [] } }
+globalThis.ResizeObserver = RO
+globalThis.MutationObserver = MO
+dom.window.ResizeObserver = RO
+dom.window.MutationObserver = MO
+dom.window.matchMedia = () => ({
+  matches: false, addEventListener() {}, removeEventListener() {}, addListener() {}, removeListener() {},
+})
+// jsdom has no canvas backend; the retained chart engine only needs a context object.
+dom.window.HTMLCanvasElement.prototype.getContext = () =>
+  new Proxy({}, { get: (_, k) => (k === 'canvas' ? {} : () => {}) })
+
+// A signed-in session holding all 104 permissions, so no route is gated away.
+const MODULES = ['dashboard', 'inbox', 'jobs', 'candidates', 'pipeline', 'interviews', 'assessments',
+  'offers', 'reports', 'analytics', 'job_board', 'settings', 'rbac_users']
+const ACTIONS = ['view', 'create', 'edit', 'delete', 'approve', 'export', 'manage', 'configure']
+const permissions = MODULES.flatMap((m) => ACTIONS.map((a) => `${m}.${a}`))
+
+dom.window.localStorage.setItem('tf-auth', JSON.stringify({
+  access_token: 'test', refresh_token: 'test', expires_in: 1800,
+  expires_at: Date.now() + 1800_000,
+  data: { id: 1, name: 'Test User', email: 't@example.com', role_name: 'system_administrator', permissions },
+}))
+
+// The real-API screens must not hit the network here.
+globalThis.fetch = async () => ({
+  ok: true, status: 200, statusText: 'OK',
+  text: async () => JSON.stringify({ data: [], status_code: 200 }),
+})
+
+// ---------------------------------------------------------------- bundle
+const outDir = mkdtempSync(join(tmpdir(), 'tf-smoke-'))
+const outFile = join(outDir, 'entry.mjs')
+
+await esbuild.build({
+  entryPoints: ['src/__smoke__/entry.jsx'],
+  outfile: outFile,
+  bundle: true,
+  format: 'esm',
+  platform: 'node',
+  target: 'node20',
+  jsx: 'automatic',
+  loader: { '.js': 'jsx', '.jsx': 'jsx' },
+  logLevel: 'error',
+  define: {
+    'process.env.NODE_ENV': '"development"',
+    'import.meta.env': JSON.stringify({ DEV: true, PROD: false, MODE: 'development', VITE_API_BASE: '' }),
+  },
+})
+
+// ---------------------------------------------------------------- run
+const errors = []
+const origError = console.error
+console.error = (...args) => {
+  const msg = args.map((a) => (a instanceof Error ? a.stack : String(a))).join(' ')
+  if (msg.includes('React Router Future Flag')) return  // advisory, not a defect
+  errors.push(msg)
+}
+
+let failed = 0
+try {
+  const mod = await import(pathToFileURL(outFile).href)
+  mod.boot()
+
+  for (const path of mod.ALL_ROUTES) {
+    errors.length = 0
+    const container = dom.window.document.createElement('div')
+    dom.window.document.body.appendChild(container)
+    try {
+      const text = (await mod.renderRoute(path, container)).trim()
+      if (errors.length) {
+        console.log(`FAIL  ${path}\n      ${errors[0].split('\n').slice(0, 3).join(' | ').slice(0, 260)}`)
+        failed++
+      } else if (text.length < 5) {
+        console.log(`FAIL  ${path}  (rendered empty)`)
+        failed++
+      } else {
+        console.log(`ok    ${path}  (${text.length} chars)`)
+      }
+    } catch (err) {
+      console.log(`FAIL  ${path}\n      ${String(err.message).split('\n')[0].slice(0, 260)}`)
+      failed++
+    } finally {
+      container.remove()
+    }
+  }
+} finally {
+  console.error = origError
+  rmSync(outDir, { recursive: true, force: true })
+}
+
+console.log(failed ? `\n${failed}/27 routes FAILED` : `\nAll 27 routes rendered clean`)
+process.exit(failed ? 1 : 0)
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
new file mode 100644
index 0000000..bd7eb2e
--- /dev/null
+++ b/frontend/src/App.jsx
@@ -0,0 +1,91 @@
+import { lazy } from 'react'
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
+
+import AuthProvider from './auth/AuthProvider'
+import RequireAuth from './auth/RequireAuth'
+import AppLayout from './app/AppLayout'
+import LegacyHashRedirect from './app/LegacyHashRedirect'
+import { ROUTES } from './app/routes'
+
+import Login from './pages/Login'
+import Signup from './pages/Signup'
+import ForgotPassword from './pages/ForgotPassword'
+import ConfirmEmail from './pages/ConfirmEmail'
+
+// Route-level code splitting: putting 23 screens in one bundle would make the
+// first paint pay for every screen a user never opens.
+const SCREENS = {
+  dashboard: lazy(() => import('./screens/Dashboard')),
+  inbox: lazy(() => import('./screens/Inbox')),
+  jobs: lazy(() => import('./screens/Jobs')),
+  candidates: lazy(() => import('./screens/Candidates')),
+  talentpool: lazy(() => import('./screens/TalentPool')),
+  pipeline: lazy(() => import('./screens/Pipeline')),
+  import: lazy(() => import('./screens/CvImport')),
+  jobboard: lazy(() => import('./screens/JobBoard')),
+  recruiterhub: lazy(() => import('./screens/RecruiterHub')),
+  tasks: lazy(() => import('./screens/Tasks')),
+  aiassistant: lazy(() => import('./screens/AiAssistant')),
+  interviews: lazy(() => import('./screens/Interviews')),
+  assessments: lazy(() => import('./screens/Assessments')),
+  offers: lazy(() => import('./screens/Offers')),
+  managers: lazy(() => import('./screens/Managers')),
+  calendar: lazy(() => import('./screens/Calendar')),
+  reports: lazy(() => import('./screens/Reports')),
+  analytics: lazy(() => import('./screens/Analytics')),
+  aistudio: lazy(() => import('./screens/AiStudio')),
+  notifications: lazy(() => import('./screens/Notifications')),
+  rbac: lazy(() => import('./screens/Rbac')),
+  settings: lazy(() => import('./screens/Settings')),
+  help: lazy(() => import('./screens/Help')),
+}
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <AuthProvider>
+        <LegacyHashRedirect />
+        <Routes>
+          {/* Public. These keep the /auth prefix as ROUTE paths so the backend's
+              CONFIRM_EMAIL_PATH=/auth/confirm-email links resolve unchanged. */}
+          <Route path="/auth" element={<Navigate to="/auth/login" replace />} />
+          <Route path="/auth/login" element={<Login />} />
+          <Route path="/auth/signup" element={<Signup />} />
+          <Route path="/auth/forgot-password" element={<ForgotPassword />} />
+          <Route path="/auth/confirm-email" element={<ConfirmEmail />} />
+
+          {/* Protected */}
+          <Route
+            element={
+              <RequireAuth>
+                <AppLayout />
+              </RequireAuth>
+            }
+          >
+            {ROUTES.map((r) => {
+              const Screen = SCREENS[r.path]
+              return (
+                <Route
+                  key={r.path}
+                  path={`/${r.path}`}
+                  element={
+                    r.permission ? (
+                      <RequireAuth permission={r.permission}>
+                        <Screen />
+                      </RequireAuth>
+                    ) : (
+                      <Screen />
+                    )
+                  }
+                />
+              )
+            })}
+          </Route>
+
+          <Route path="/" element={<Navigate to="/dashboard" replace />} />
+          <Route path="*" element={<Navigate to="/dashboard" replace />} />
+        </Routes>
+      </AuthProvider>
+    </BrowserRouter>
+  )
+}
diff --git a/frontend/src/__smoke__/entry.jsx b/frontend/src/__smoke__/entry.jsx
new file mode 100644
index 0000000..d5f4914
--- /dev/null
+++ b/frontend/src/__smoke__/entry.jsx
@@ -0,0 +1,113 @@
+/* Test-only entry. Kept inside src/ so every import resolves through Vite's
+   module graph exactly as it does in the app — one React instance, one router
+   instance, one query client. Not shipped: excluded from the build because
+   nothing in the app imports it. */
+
+import React from 'react'
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { MemoryRouter, Navigate, Route, Routes } from 'react-router-dom'
+import { QueryClientProvider } from '@tanstack/react-query'
+
+import { queryClient } from '../lib/queryClient'
+import { initializeCache } from '../data/seedQueries'
+import ThemeProvider, { initTheme } from '../theme/ThemeProvider'
+import ToastProvider from '../ui/Toast'
+import AuthProvider from '../auth/AuthProvider'
+import AppLayout from '../app/AppLayout'
+import RequireAuth from '../auth/RequireAuth'
+import { ROUTES as TABLE } from '../app/routes'
+
+import Login from '../pages/Login'
+import Signup from '../pages/Signup'
+import ForgotPassword from '../pages/ForgotPassword'
+import ConfirmEmail from '../pages/ConfirmEmail'
+
+import Dashboard from '../screens/Dashboard'
+import Inbox from '../screens/Inbox'
+import Jobs from '../screens/Jobs'
+import Candidates from '../screens/Candidates'
+import TalentPool from '../screens/TalentPool'
+import Pipeline from '../screens/Pipeline'
+import CvImport from '../screens/CvImport'
+import JobBoard from '../screens/JobBoard'
+import RecruiterHub from '../screens/RecruiterHub'
+import Tasks from '../screens/Tasks'
+import AiAssistant from '../screens/AiAssistant'
+import Interviews from '../screens/Interviews'
+import Assessments from '../screens/Assessments'
+import Offers from '../screens/Offers'
+import Managers from '../screens/Managers'
+import Calendar from '../screens/Calendar'
+import Reports from '../screens/Reports'
+import Analytics from '../screens/Analytics'
+import AiStudio from '../screens/AiStudio'
+import Notifications from '../screens/Notifications'
+import Rbac from '../screens/Rbac'
+import Settings from '../screens/Settings'
+import Help from '../screens/Help'
+
+const SCREENS = {
+  dashboard: Dashboard, inbox: Inbox, jobs: Jobs, candidates: Candidates,
+  talentpool: TalentPool, pipeline: Pipeline, import: CvImport, jobboard: JobBoard,
+  recruiterhub: RecruiterHub, tasks: Tasks, aiassistant: AiAssistant,
+  interviews: Interviews, assessments: Assessments, offers: Offers,
+  managers: Managers, calendar: Calendar, reports: Reports, analytics: Analytics,
+  aistudio: AiStudio, notifications: Notifications, rbac: Rbac,
+  settings: Settings, help: Help,
+}
+
+const PAGES = {
+  '/auth/login': Login,
+  '/auth/signup': Signup,
+  '/auth/forgot-password': ForgotPassword,
+  '/auth/confirm-email': ConfirmEmail,
+}
+
+export const ALL_ROUTES = [
+  ...Object.keys(PAGES),
+  ...TABLE.map((r) => `/${r.path}`),
+]
+
+export function boot() {
+  initTheme()
+  initializeCache(queryClient)
+}
+
+/** Mount one route, wait for effects to settle, return its rendered text. */
+export async function renderRoute(path, container) {
+  const h = React.createElement
+  const isAuth = path.startsWith('/auth/')
+  const def = TABLE.find((r) => `/${r.path}` === path)
+  const Screen = isAuth ? PAGES[path] : SCREENS[def.path]
+
+  const inner = isAuth
+    ? h(Route, { path, element: h(Screen) })
+    : h(
+        Route,
+        { element: h(RequireAuth, null, h(AppLayout)) },
+        h(Route, { path, element: h(Screen) }),
+      )
+
+  const tree = h(
+    QueryClientProvider, { client: queryClient },
+    h(ThemeProvider, null,
+      h(ToastProvider, null,
+        h(MemoryRouter, { initialEntries: [path] },
+          h(AuthProvider, null,
+            h(Routes, null, inner, h(Route, { path: '*', element: h(Navigate, { to: path, replace: true }) })),
+          ),
+        ),
+      ),
+    ),
+  )
+
+  const root = createRoot(container)
+  try {
+    await act(async () => { root.render(tree) })
+    await act(async () => { await new Promise((r) => setTimeout(r, 40)) })
+    return container.textContent || ''
+  } finally {
+    await act(async () => { root.unmount() })
+  }
+}
diff --git a/frontend/src/__smoke__/token.entry.js b/frontend/src/__smoke__/token.entry.js
new file mode 100644
index 0000000..ab56614
--- /dev/null
+++ b/frontend/src/__smoke__/token.entry.js
@@ -0,0 +1,7 @@
+/* Test-only entry exposing the token layer to the token test harness. */
+export { request, setSessionExpiredHandler } from '../lib/apiClient'
+export { refreshSession } from '../lib/refresh'
+export {
+  setSession, getSession, clearSession, getAccessToken, getRefreshToken, isExpiring,
+} from '../lib/tokenStore'
+export { ApiError, SessionExpiredError } from '../lib/errors'
diff --git a/frontend/src/api/auth.js b/frontend/src/api/auth.js
new file mode 100644
index 0000000..1418c66
--- /dev/null
+++ b/frontend/src/api/auth.js
@@ -0,0 +1,46 @@
+/* Public auth endpoints. All are unauthenticated (`auth: false`) — attaching a
+   stale bearer to a login request would be harmless but misleading in the
+   network log, and the reset flow must never trigger a refresh. */
+import { request } from '../lib/apiClient'
+
+const pub = { auth: false }
+
+export function login(email, password) {
+  return request('/users/login', { ...pub, method: 'POST', body: { email, password } })
+}
+
+export function signup(name, email, password) {
+  return request('/users/signup', { ...pub, method: 'POST', body: { name, email, password } })
+}
+
+export function confirmEmail(token) {
+  return request('/users/confirm-email', { ...pub, method: 'POST', body: { token } })
+}
+
+export function resendConfirmEmail(email) {
+  return request('/users/confirm-email/resend', { ...pub, method: 'POST', body: { email } })
+}
+
+export function forgetPassword(email) {
+  return request('/users/forget-password', { ...pub, method: 'POST', body: { email } })
+}
+
+export function verifyForgetCode(email, code) {
+  return request('/users/forget-password/verify-code', {
+    ...pub,
+    method: 'POST',
+    body: { email, code },
+  })
+}
+
+export function setNewPassword(password, resetToken) {
+  // `token` is the 10-minute reset JWT, carried in its own Authorization header
+  // and checked by forget_password/permissions.py's HTTPBearer. Passing `token`
+  // explicitly also suppresses the refresh path, which is what we want: a reset
+  // token is not a session.
+  return request('/users/forget-password/new-password', {
+    method: 'POST',
+    body: { password },
+    token: resetToken,
+  })
+}
diff --git a/frontend/src/api/inbox.js b/frontend/src/api/inbox.js
new file mode 100644
index 0000000..8ad8e13
--- /dev/null
+++ b/frontend/src/api/inbox.js
@@ -0,0 +1,17 @@
+import { request } from '../lib/apiClient'
+
+/**
+ * Persisted mailbox messages.
+ *
+ * NOTE: this endpoint currently has no auth dependency server-side
+ * (backend/inbox/app.py). We send the bearer anyway, so adding
+ * Depends(get_current_user) later is a zero-diff change on this side.
+ */
+export function listMessages() {
+  return request('/inbox/fetch')
+}
+
+/** Triggers the Graph proxy to pull new mail and persist it. */
+export function syncMailbox({ token, top, skip } = {}) {
+  return request('/email/fetch', { params: { token, top, skip } })
+}
diff --git a/frontend/src/api/roles.js b/frontend/src/api/roles.js
new file mode 100644
index 0000000..e3d17db
--- /dev/null
+++ b/frontend/src/api/roles.js
@@ -0,0 +1,31 @@
+import { request } from '../lib/apiClient'
+
+/** Roles with their expanded `bundles` and resolved `effective_permissions`. */
+export function listRoles() {
+  return request('/roles/fetch')
+}
+export function createRole(body) {
+  return request('/roles/create', { method: 'POST', body })
+}
+export function updateRole(recordId, body) {
+  return request('/roles/update', { method: 'PUT', params: { record_id: recordId }, body })
+}
+export function deleteRole(recordId) {
+  return request('/roles/delete', { method: 'DELETE', params: { record_id: recordId } })
+}
+
+/** Permission bundles (41 seeded), each resolving to a set of tag names. */
+export function listPermissions() {
+  return request('/permissions/fetch')
+}
+export function createPermission(body) {
+  return request('/permissions/create', { method: 'POST', body })
+}
+export function updatePermission(recordId, body) {
+  return request('/permissions/update', { method: 'PUT', params: { record_id: recordId }, body })
+}
+
+/** The 104-tag catalog: 13 modules x 8 actions. */
+export function listPermissionTags() {
+  return request('/permission-tags/fetch')
+}
diff --git a/frontend/src/api/users.js b/frontend/src/api/users.js
new file mode 100644
index 0000000..54f9589
--- /dev/null
+++ b/frontend/src/api/users.js
@@ -0,0 +1,34 @@
+import { request } from '../lib/apiClient'
+
+/** The ONLY endpoint that returns `permissions`. Login and refresh do not. */
+export function me() {
+  return request('/users/me')
+}
+
+export function list({ record_id, search, top, skip } = {}) {
+  return request('/users/fetch', { params: { record_id, search, top, skip } })
+}
+
+export function create(body) {
+  return request('/users/create', { method: 'POST', body })
+}
+
+export function update(recordId, body) {
+  return request('/users/update', { method: 'PUT', params: { record_id: recordId }, body })
+}
+
+export function assignRole(recordId, roleId) {
+  return request('/users/assign-role', {
+    method: 'PUT',
+    params: { record_id: recordId },
+    body: { role_id: roleId },
+  })
+}
+
+export function removeRole(recordId) {
+  return request('/users/remove-role', { method: 'PUT', params: { record_id: recordId } })
+}
+
+export function remove(recordId) {
+  return request('/users/delete', { method: 'DELETE', params: { record_id: recordId } })
+}
diff --git a/frontend/src/app/AiDock.jsx b/frontend/src/app/AiDock.jsx
new file mode 100644
index 0000000..76acdda
--- /dev/null
+++ b/frontend/src/app/AiDock.jsx
@@ -0,0 +1,41 @@
+import { useNavigate } from 'react-router-dom'
+import Chat from './ai/Chat'
+import Icon from '../ui/icons'
+
+/** The slide-over dock — the same chat as the full page, in compact mode. */
+export default function AiDock({ open, onClose }) {
+  const navigate = useNavigate()
+
+  return (
+    <div className={`ai-dock${open ? ' open' : ''}`} id="aiDock">
+      <div className="ai-dock-inner">
+        {open && (
+          <>
+            <div className="card-head" style={{ borderRadius: 0 }}>
+              <div>
+                <h3><Icon name="sparkles" /> AI Assistant</h3>
+              </div>
+              <div className="flex items-center gap-8">
+                <button
+                  className="btn btn-ghost btn-sm"
+                  onClick={() => {
+                    onClose()
+                    navigate('/aiassistant')
+                  }}
+                >
+                  Expand
+                </button>
+                <button className="modal-close" onClick={onClose} aria-label="Close">
+                  <Icon name="x" />
+                </button>
+              </div>
+            </div>
+            <div style={{ flex: 1, padding: 16, overflow: 'hidden', display: 'flex' }}>
+              <Chat compact />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/app/AppLayout.jsx b/frontend/src/app/AppLayout.jsx
new file mode 100644
index 0000000..de62040
--- /dev/null
+++ b/frontend/src/app/AppLayout.jsx
@@ -0,0 +1,75 @@
+import { Suspense, useCallback, useEffect, useRef, useState } from 'react'
+import { Outlet, useLocation } from 'react-router-dom'
+
+import Sidebar from './Sidebar'
+import Topbar from './Topbar'
+import AiDock from './AiDock'
+import { ROUTE_BY_PATH } from './routes'
+import { useBadges, useHotkeys, useNavOpen, useRouteMeta, useSidebarCollapsed } from './useShell'
+import Icon from '../ui/icons'
+import Spinner from '../components/Spinner'
+
+export default function AppLayout() {
+  const location = useLocation()
+  const contentRef = useRef(null)
+
+  const [navOpen, setNavOpen] = useNavOpen()
+  const [collapsed, toggleCollapsed] = useSidebarCollapsed()
+  const [dockOpen, setDockOpen] = useState(false)
+  const badges = useBadges()
+
+  const routeKey = location.pathname.split('/')[1] || 'dashboard'
+  const route = ROUTE_BY_PATH[routeKey]
+  useRouteMeta(route)
+
+  const onEscape = useCallback(() => {
+    setNavOpen(false)
+    setDockOpen(false)
+  }, [setNavOpen])
+  const searchRef = useHotkeys({ onEscape })
+
+  // Navigating closes the drawer and the dock, and resets scroll — the three
+  // things Router.render did at the end of every route change (js/app.js:44-51).
+  useEffect(() => {
+    setNavOpen(false)
+    setDockOpen(false)
+    if (contentRef.current) contentRef.current.scrollTop = 0
+  }, [location.pathname, setNavOpen])
+
+  return (
+    <div id="app">
+      <Sidebar
+        collapsed={collapsed}
+        mobileOpen={navOpen}
+        onToggleCollapse={toggleCollapsed}
+        badges={badges}
+      />
+
+      <div className="main-wrap">
+        <Topbar onOpenNav={() => setNavOpen((o) => !o)} searchRef={searchRef} />
+        <main className="content" id="main-content" ref={contentRef}>
+          <Suspense fallback={<div className="route-loading"><Spinner label="Loading" /></div>}>
+            <Outlet />
+          </Suspense>
+        </main>
+      </div>
+
+      <button
+        className="ai-fab"
+        onClick={() => setDockOpen(true)}
+        title="AI Recruiter Assistant"
+        aria-label="Open AI Assistant"
+      >
+        <Icon name="sparkles" />
+      </button>
+
+      <AiDock open={dockOpen} onClose={() => setDockOpen(false)} />
+
+      <div
+        className={`scrim${navOpen ? ' open' : ''}`}
+        onClick={() => setNavOpen(false)}
+        aria-hidden="true"
+      />
+    </div>
+  )
+}
diff --git a/frontend/src/app/GlobalSearch.jsx b/frontend/src/app/GlobalSearch.jsx
new file mode 100644
index 0000000..686a071
--- /dev/null
+++ b/frontend/src/app/GlobalSearch.jsx
@@ -0,0 +1,100 @@
+/* Global search — App.search from js/app.js:171-191. Same sources and the same
+   4/4/3 caps. The inline onclick="App.searchGo(...)" strings become navigate()
+   calls, and the setTimeout(cb, 120) hack that waited for the old router to
+   swap innerHTML is gone: the target screen reads `state.open` instead. */
+
+import { useMemo, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { seedQuery } from '../data/seedQueries'
+import { Avatar, Icon } from '../ui/primitives'
+
+export default function GlobalSearch({ inputRef }) {
+  const navigate = useNavigate()
+  const [q, setQ] = useState('')
+  const [open, setOpen] = useState(false)
+  const boxRef = useRef(null)
+
+  const { data: jobs = [] } = useQuery(seedQuery('jobs'))
+  const { data: candidates = [] } = useQuery(seedQuery('candidates'))
+  const { data: managers = [] } = useQuery(seedQuery('managers'))
+
+  const results = useMemo(() => {
+    const term = q.trim().toLowerCase()
+    if (!term) return null
+    return {
+      jobs: jobs.filter((j) => (j.title + j.id + j.department).toLowerCase().includes(term)).slice(0, 4),
+      candidates: candidates.filter((c) => (c.name + c.email + c.jobTitle).toLowerCase().includes(term)).slice(0, 4),
+      managers: managers.filter((m) => m.name.toLowerCase().includes(term)).slice(0, 3),
+    }
+  }, [q, jobs, candidates, managers])
+
+  function go(path, state) {
+    setQ('')
+    setOpen(false)
+    navigate(path, { state })
+  }
+
+  const empty = results && !results.jobs.length && !results.candidates.length && !results.managers.length
+
+  return (
+    <div className="topbar-search" onClick={(e) => e.stopPropagation()}>
+      <Icon name="search" />
+      <input
+        type="text"
+        ref={inputRef}
+        value={q}
+        placeholder="Search jobs, candidates, managers…"
+        autoComplete="off"
+        onChange={(e) => {
+          setQ(e.target.value)
+          setOpen(Boolean(e.target.value.trim()))
+        }}
+        onFocus={() => setOpen(Boolean(q.trim()))}
+      />
+      <div className={`search-results${open && results ? ' open' : ''}`} ref={boxRef}>
+        {results && (
+          <>
+            {results.jobs.length > 0 && <div className="search-group-label">Jobs</div>}
+            {results.jobs.map((j) => (
+              <div key={j.id} className="search-item" onClick={() => go('/jobs', { openJob: j.id })}>
+                <span className="kpi-icn i-indigo" style={{ width: 32, height: 32, borderRadius: 8 }}>
+                  <Icon name="briefcase" />
+                </span>
+                <div>
+                  <div className="si-title">{j.title}</div>
+                  <div className="si-sub">{j.id} · {j.department}</div>
+                </div>
+              </div>
+            ))}
+
+            {results.candidates.length > 0 && <div className="search-group-label">Candidates</div>}
+            {results.candidates.map((c) => (
+              <div key={c.id} className="search-item" onClick={() => go('/candidates', { openCandidate: c.id })}>
+                <Avatar name={c.name} initials={c.initials} color={c.color} />
+                <div>
+                  <div className="si-title">{c.name}</div>
+                  <div className="si-sub">{c.jobTitle}</div>
+                </div>
+              </div>
+            ))}
+
+            {results.managers.length > 0 && <div className="search-group-label">Hiring Managers</div>}
+            {results.managers.map((m) => (
+              <div key={m.id} className="search-item" onClick={() => go('/managers', { openManager: m.id })}>
+                <Avatar name={m.name} initials={m.initials} color={m.color} />
+                <div>
+                  <div className="si-title">{m.name}</div>
+                  <div className="si-sub">{m.title}</div>
+                </div>
+              </div>
+            ))}
+
+            {empty && <div className="search-empty">No results for &ldquo;{q}&rdquo;</div>}
+          </>
+        )}
+      </div>
+      <kbd className="search-kbd">⌘K</kbd>
+    </div>
+  )
+}
diff --git a/frontend/src/app/LegacyHashRedirect.jsx b/frontend/src/app/LegacyHashRedirect.jsx
new file mode 100644
index 0000000..5f585a8
--- /dev/null
+++ b/frontend/src/app/LegacyHashRedirect.jsx
@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { ROUTE_BY_PATH } from './routes'
+
+/**
+ * The prototype addressed screens by `location.hash` (#dashboard, #candidates).
+ * Anyone with a bookmark — and the old post-login redirect target
+ * `/index.html#dashboard` — must not dead-end after the cutover.
+ *
+ * Runs once. StrictMode's double-invoke is harmless because the navigation is
+ * `replace` and the second run finds no hash left to act on.
+ */
+export default function LegacyHashRedirect() {
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    const route = (window.location.hash || '').slice(1)
+    if (route && ROUTE_BY_PATH[route]) {
+      navigate(`/${route}`, { replace: true })
+    }
+  }, [navigate])
+
+  return null
+}
diff --git a/frontend/src/app/Sidebar.jsx b/frontend/src/app/Sidebar.jsx
new file mode 100644
index 0000000..fbbcea7
--- /dev/null
+++ b/frontend/src/app/Sidebar.jsx
@@ -0,0 +1,83 @@
+import { NavLink } from 'react-router-dom'
+import { NAV_GROUPS, ROUTES } from './routes'
+import { useAuth } from '../auth/AuthContext'
+import Icon from '../ui/icons'
+import BrandMark from '../components/BrandMark'
+
+export default function Sidebar({ collapsed, mobileOpen, onToggleCollapse, badges }) {
+  const { can } = useAuth()
+
+  // A group heading renders only if something under it survived the permission
+  // filter — otherwise a low-privilege user sees orphaned section labels.
+  const visible = ROUTES.filter((r) => can(r.permission))
+
+  return (
+    <aside
+      className={`sidebar${collapsed ? ' collapsed' : ''}${mobileOpen ? ' mobile-open' : ''}`}
+      id="sidebar"
+    >
+      <div className="sidebar-brand">
+        <div className="brand-logo">
+          <BrandMark />
+        </div>
+        <div className="brand-text">
+          <span className="brand-name">TalentFlow</span>
+          <span className="brand-sub">Utopia Brands · ATS</span>
+        </div>
+        <button
+          className="sidebar-collapse-btn"
+          onClick={onToggleCollapse}
+          title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        >
+          <Icon name="chevron-left" />
+        </button>
+      </div>
+
+      <nav className="sidebar-nav">
+        {NAV_GROUPS.map((group) => {
+          const items = visible.filter((r) => r.group === group)
+          if (!items.length) return null
+          return (
+            <div key={group}>
+              <div className="nav-section-label">{group}</div>
+              {items.map((r) => {
+                const count = r.badge ? badges?.[r.badge] : null
+                return (
+                  <NavLink
+                    key={r.path}
+                    to={`/${r.path}`}
+                    className={({ isActive }) => `nav-item${isActive ? ' active' : ''}`}
+                  >
+                    <Icon name={r.icon} />
+                    <span>{r.title}</span>
+                    {r.tag && <span className="nav-badge nav-badge-ai">{r.tag}</span>}
+                    {count ? (
+                      <span
+                        className={`nav-badge${r.badge === 'inbox' || r.badge === 'notifications' ? ' nav-badge-alert' : ''}`}
+                      >
+                        {count}
+                      </span>
+                    ) : null}
+                  </NavLink>
+                )
+              })}
+            </div>
+          )
+        })}
+      </nav>
+
+      <div className="sidebar-footer">
+        <div className="usage-card">
+          <div className="usage-top">
+            <span>Seats used</span>
+            <span>14 / 20</span>
+          </div>
+          <div className="usage-bar">
+            <div className="usage-fill" style={{ width: '70%' }} />
+          </div>
+        </div>
+      </div>
+    </aside>
+  )
+}
diff --git a/frontend/src/app/Topbar.jsx b/frontend/src/app/Topbar.jsx
new file mode 100644
index 0000000..e87f9df
--- /dev/null
+++ b/frontend/src/app/Topbar.jsx
@@ -0,0 +1,150 @@
+import { Link } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import Dropdown, { DropdownGroup } from '../ui/Dropdown'
+import GlobalSearch from './GlobalSearch'
+import { Avatar, Icon } from '../ui/primitives'
+import { seedQuery, useSeedMutation } from '../data/seedQueries'
+import { useToast } from '../ui/Toast'
+import { useTheme } from '../theme/ThemeProvider'
+import { useAuth } from '../auth/AuthContext'
+
+function initialsFromName(name) {
+  const parts = String(name || '').trim().split(/\s+/).filter(Boolean)
+  if (!parts.length) return '?'
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+}
+
+export default function Topbar({ onOpenNav, searchRef }) {
+  const { theme, toggleTheme } = useTheme()
+  const { user, signOut } = useAuth()
+  const { toast } = useToast()
+
+  const { data: notifications = [] } = useQuery(seedQuery('notifications'))
+  const { data: messages = [] } = useQuery(seedQuery('messages'))
+  const updateNotifications = useSeedMutation('notifications')
+
+  // App.hydrateProfile's DOM sweep is gone — the session is read directly.
+  const name = user?.name || 'Guest'
+  const email = user?.email || ''
+  const role = user?.role_name || user?.role || 'Member'
+
+  function markAllRead() {
+    updateNotifications((ns) => ns.map((n) => ({ ...n, unread: false })))
+    toast('All notifications marked as read', 'success')
+  }
+
+  return (
+    <header className="topbar">
+      <button className="icon-btn menu-toggle" onClick={onOpenNav} aria-label="Toggle menu">
+        <Icon name="menu" />
+      </button>
+
+      <GlobalSearch inputRef={searchRef} />
+
+      <div className="topbar-actions">
+        <button
+          className="icon-btn"
+          onClick={toggleTheme}
+          aria-pressed={theme === 'dark'}
+          title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+          aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+        >
+          <span className="icon-sun"><Icon name="sun" /></span>
+          <span className="icon-moon"><Icon name="moon" /></span>
+        </button>
+
+        <DropdownGroup>
+          <Dropdown
+            panelClassName="dropdown-menu-wide"
+            trigger={({ toggle }) => (
+              <button className="icon-btn" onClick={toggle} title="Messages" aria-label="Messages">
+                <Icon name="message" />
+                <span className="dot dot-blue" />
+              </button>
+            )}
+          >
+            <div className="dropdown-head">Messages</div>
+            <div className="dd-scroll">
+              {messages.map((m) => (
+                <div key={m.id ?? m.name} className={`notif-row${m.unread ? ' unread' : ''}`}>
+                  <Avatar name={m.name} initials={m.initials} color={m.color} />
+                  <div className="notif-body">
+                    <div className="notif-title">{m.name}</div>
+                    <div className="notif-text">{m.text}</div>
+                    <div className="notif-time">{m.time} ago</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="dropdown-foot">
+              <Link to="/notifications">Open inbox</Link>
+            </div>
+          </Dropdown>
+
+          <Dropdown
+            panelClassName="dropdown-menu-wide"
+            trigger={({ toggle }) => (
+              <button className="icon-btn" onClick={toggle} title="Notifications" aria-label="Notifications">
+                <Icon name="bell" />
+                <span className="dot dot-red" />
+              </button>
+            )}
+          >
+            <div className="dropdown-head">
+              Notifications
+              <button className="link-btn" onClick={markAllRead}>Mark all read</button>
+            </div>
+            <div className="dd-scroll">
+              {notifications.slice(0, 6).map((n) => (
+                <div key={n.id ?? n.title} className={`notif-row${n.unread ? ' unread' : ''}`}>
+                  <span className={`notif-icn ${n.color}`}><Icon name={n.icon} /></span>
+                  <div className="notif-body">
+                    <div className="notif-title">{n.title}</div>
+                    <div className="notif-text">{n.text}</div>
+                    <div className="notif-time">{n.time}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="dropdown-foot">
+              <Link to="/notifications">View all</Link>
+            </div>
+          </Dropdown>
+
+          <div className="topbar-divider" />
+
+          <Dropdown
+            trigger={({ toggle }) => (
+              <button className="profile-btn" onClick={toggle}>
+                <span className="avatar avatar-grad">{initialsFromName(name)}</span>
+                <span className="profile-meta">
+                  <span className="profile-name">{name}</span>
+                  <span className="profile-role">{role}</span>
+                </span>
+                <Icon name="chevron-down" className="chev" />
+              </button>
+            )}
+          >
+            <div className="dropdown-profile">
+              <span className="avatar avatar-grad avatar-lg">{initialsFromName(name)}</span>
+              <div>
+                <div className="dp-name">{name}</div>
+                <div className="dp-email">{email}</div>
+              </div>
+            </div>
+            <div className="dropdown-divider" />
+            <Link className="dropdown-link" to="/settings"><Icon name="user" />My Profile</Link>
+            <Link className="dropdown-link" to="/settings"><Icon name="settings" />Settings</Link>
+            <Link className="dropdown-link" to="/help"><Icon name="help" />Help Center</Link>
+            <div className="dropdown-divider" />
+            <button className="dropdown-link danger" onClick={signOut}>
+              <Icon name="logout" />Sign out
+            </button>
+          </Dropdown>
+        </DropdownGroup>
+      </div>
+    </header>
+  )
+}
diff --git a/frontend/src/app/ai/Chat.jsx b/frontend/src/app/ai/Chat.jsx
new file mode 100644
index 0000000..5ffb6ad
--- /dev/null
+++ b/frontend/src/app/ai/Chat.jsx
@@ -0,0 +1,129 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+
+import Icon from '../../ui/icons'
+import { reply } from './replies'
+import { seedQuery } from '../../data/seedQueries'
+import { aiPrompts } from '../../data/seed'
+
+/** Shared by the full AI Assistant page and the slide-over dock. */
+export default function Chat({ compact = false, resetKey = 0 }) {
+  const [messages, setMessages] = useState([])
+  const [value, setValue] = useState('')
+  const inputRef = useRef(null)
+  const scrollRef = useRef(null)
+  const timers = useRef([])
+
+  const { data: candidates = [] } = useQuery(seedQuery('candidates'))
+  const { data: recruiters = [] } = useQuery(seedQuery('recruiters'))
+
+  useEffect(() => setMessages([]), [resetKey])
+
+  useEffect(() => {
+    const list = timers.current
+    return () => list.forEach(clearTimeout)
+  }, [])
+
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+  }, [messages])
+
+  const send = useCallback(
+    (text) => {
+      const body = (text ?? value).trim()
+      if (!body) return
+      const id = `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`
+      setMessages((m) => [...m, { id: `u-${id}`, role: 'you', text: body }, { id: `a-${id}`, role: 'ai', typing: true }])
+      setValue('')
+      if (inputRef.current) inputRef.current.style.height = 'auto'
+
+      // The prototype's artificial 850-1350ms latency, kept so the typing
+      // indicator is visible rather than flashing.
+      const t = setTimeout(() => {
+        setMessages((m) =>
+          m.map((msg) =>
+            msg.id === `a-${id}`
+              ? { ...msg, typing: false, node: reply(body, { candidates, recruiters }) }
+              : msg,
+          ),
+        )
+      }, 850 + Math.random() * 500)
+      timers.current.push(t)
+    },
+    [value, candidates, recruiters],
+  )
+
+  const started = messages.length > 0
+
+  return (
+    <div className="chat-wrap" style={compact ? { height: '100%' } : undefined}>
+      <div className="chat-scroll" ref={scrollRef}>
+        {!started ? (
+          <>
+            <div className="ai-hero">
+              <div className="ai-logo"><Icon name="sparkles" /></div>
+              <h2 style={{ fontSize: compact ? 18 : 22, marginBottom: 6 }}>AI Recruiter Assistant</h2>
+              <p className="text-muted">Ask anything about your candidates, jobs, and pipeline</p>
+            </div>
+            <div
+              style={{
+                display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center',
+                maxWidth: 720, margin: '0 auto 10px',
+              }}
+            >
+              {aiPrompts.slice(0, compact ? 6 : 12).map((p) => (
+                <button key={p.text} className="prompt-chip" onClick={() => send(p.prompt)}>
+                  <Icon name={p.icon} /> {p.text}
+                </button>
+              ))}
+            </div>
+          </>
+        ) : (
+          messages.map((m) => (
+            <div className="chat-msg" key={m.id}>
+              <div className={`chat-av ${m.role === 'you' ? 'user' : 'ai'}`}>
+                <Icon name={m.role === 'you' ? 'users' : 'sparkles'} />
+              </div>
+              <div className="chat-bubble">
+                <div className="chat-role">{m.role === 'you' ? 'You' : 'AI Assistant'}</div>
+                {m.typing ? (
+                  <div className="chat-typing"><span /><span /><span /></div>
+                ) : (
+                  <div className="chat-text">{m.text ?? m.node}</div>
+                )}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      <div style={{ paddingTop: 12 }}>
+        <div className="chat-input-bar">
+          <textarea
+            ref={inputRef}
+            rows={1}
+            value={value}
+            placeholder="Message AI Assistant…"
+            onChange={(e) => {
+              setValue(e.target.value)
+              e.target.style.height = 'auto'
+              e.target.style.height = `${Math.min(e.target.scrollHeight, 140)}px`
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault()
+                send()
+              }
+            }}
+          />
+          <button className="chat-send" onClick={() => send()} aria-label="Send">
+            <Icon name="arrow-right" />
+          </button>
+        </div>
+        <p className="text-muted text-sm" style={{ textAlign: 'center', marginTop: 8 }}>
+          UI preview · responses are simulated. <Icon name="lock" /> API-ready for backend integration.
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/app/ai/replies.jsx b/frontend/src/app/ai/replies.jsx
new file mode 100644
index 0000000..b2c6923
--- /dev/null
+++ b/frontend/src/app/ai/replies.jsx
@@ -0,0 +1,185 @@
+/* ============================================================
+   replies.jsx — the keyword-matched canned responses from js/aiassistant.js.
+
+   These were HTML strings assembled with innerHTML. They are JSX now, which is
+   the whole point: the prototype's chat was also the one place anyone had
+   thought about escaping, and they did it partially (`text.replace(/</g,'&lt;')`
+   on the input only — not &, " or '). JSX escapes everything, everywhere.
+
+   Still a stub. Wire a real endpoint into Chat's `send` to make it live.
+   ============================================================ */
+
+export function reply(prompt, { candidates, recruiters }) {
+  const p = prompt.toLowerCase()
+
+  if (p.includes('rank')) {
+    const top = [...candidates].sort((a, b) => b.aiScore - a.aiScore).slice(0, 5)
+    return (
+      <>
+        <p>Here are the top-ranked candidates by ATS match score:</p>
+        <ul>
+          {top.map((c, i) => (
+            <li key={c.id}>
+              <b>{i + 1}. {c.name}</b> — {c.aiScore}% match · {c.jobTitle} · {c.recommendation}
+            </li>
+          ))}
+        </ul>
+        <p className="text-muted">
+          This is a UI preview. Connect an LLM endpoint to generate live rankings from
+          resume + JD embeddings.
+        </p>
+      </>
+    )
+  }
+
+  if (p.includes('compare')) {
+    const [a, b] = candidates.slice(0, 2)
+    return (
+      <>
+        <p>Comparing <b>{a.name}</b> vs <b>{b.name}</b>:</p>
+        <ul>
+          <li><b>Experience:</b> {a.experience}y vs {b.experience}y</li>
+          <li><b>ATS Score:</b> {a.aiScore}% vs {b.aiScore}%</li>
+          <li><b>Recommendation:</b> {a.recommendation} vs {b.recommendation}</li>
+        </ul>
+        <p><b>Suggested:</b> {a.aiScore >= b.aiScore ? a.name : b.name} appears stronger on core criteria.</p>
+      </>
+    )
+  }
+
+  if (p.includes('job description') || p.includes('jd')) {
+    return (
+      <>
+        <p><b>Senior Product Designer</b></p>
+        <p>
+          We’re looking for a Senior Product Designer to craft intuitive, delightful
+          experiences across our platform. You’ll own end-to-end design, from research to
+          polished UI, and partner closely with product and engineering.
+        </p>
+        <p><b>Responsibilities:</b> lead design for key initiatives, run user research, build and maintain design systems, mentor peers.</p>
+        <p><b>Requirements:</b> 5+ years product design, strong portfolio, fluency in Figma, systems thinking.</p>
+      </>
+    )
+  }
+
+  if (p.includes('interview question')) {
+    return (
+      <>
+        <p>Here are role-specific interview questions:</p>
+        <ul>
+          <li>Walk me through how you’d design a system to handle 1M concurrent users.</li>
+          <li>Describe a technically challenging project and the tradeoffs you made.</li>
+          <li>How do you approach debugging a production incident under time pressure?</li>
+          <li>Tell me about a time you disagreed with a teammate on an approach.</li>
+        </ul>
+      </>
+    )
+  }
+
+  if (p.includes('summar')) {
+    const c = candidates[0]
+    return (
+      <>
+        <p><b>Resume summary — {c.name}</b></p>
+        <p>
+          {c.experience} years of experience, currently {c.currentTitle} at {c.currentCompany}.
+          Strong in {c.skills.slice(0, 3).join(', ')}. ATS match {c.aiScore}% for {c.jobTitle}. {c.recommendation}.
+        </p>
+      </>
+    )
+  }
+
+  if (p.includes('email')) {
+    return (
+      <>
+        <p><b>Subject:</b> Interview Invitation — Next Steps</p>
+        <p>Hi [Candidate],</p>
+        <p>
+          Thank you for applying. We were impressed by your background and would love to
+          invite you to an interview. Please share your availability for this week.
+        </p>
+        <p>Best regards,<br />Talent Team</p>
+      </>
+    )
+  }
+
+  if (p.includes('offer letter')) {
+    return (
+      <>
+        <p><b>Offer Letter</b></p>
+        <p>
+          Dear [Candidate], We are pleased to offer you the position of Product Manager at a
+          base salary of $160,000, plus equity and benefits. This offer is contingent on
+          standard background checks.
+        </p>
+        <p>We’re excited about the possibility of you joining the team.</p>
+      </>
+    )
+  }
+
+  if (p.includes('skill gap')) {
+    return (
+      <>
+        <p><b>Skill Gap Analysis — Engineering pipeline</b></p>
+        <ul>
+          <li><span className="skill-pill skill-missing">Kubernetes</span> under-represented (only 22% of pipeline)</li>
+          <li><span className="skill-pill skill-missing">System Design</span> gap at senior level</li>
+          <li><span className="skill-pill skill-matched">React</span> well covered</li>
+        </ul>
+        <p>Consider sourcing candidates with cloud-native infra experience.</p>
+      </>
+    )
+  }
+
+  if (p.includes('pipeline')) {
+    return (
+      <>
+        <p><b>Pipeline health analysis</b></p>
+        <ul>
+          <li>{candidates.length} active candidates across 6 stages</li>
+          <li>Conversion Applied → Interview: ~28%</li>
+          <li>Bottleneck detected at <b>Assessment</b> stage (longest dwell time)</li>
+          <li>Offer acceptance trending at 82%</li>
+        </ul>
+        <p>Recommendation: accelerate assessment turnaround to improve velocity.</p>
+      </>
+    )
+  }
+
+  if (p.includes('productivity') || p.includes('recruiter')) {
+    const top = [...recruiters].sort((a, b) => b.hires - a.hires)[0]
+    return (
+      <>
+        <p><b>Team productivity this month</b></p>
+        <ul>
+          <li>Top performer: {top?.name}</li>
+          <li>Avg time-to-hire: 27 days (3 days faster than last month)</li>
+          <li>Interview completion rate: 91%</li>
+        </ul>
+      </>
+    )
+  }
+
+  if (p.includes('recommend') || p.includes('suggest')) {
+    const c = [...candidates].sort((a, b) => b.aiScore - a.aiScore)[0]
+    return (
+      <p>
+        <b>Top recommendation:</b> {c.name} ({c.aiScore}% match) for {c.jobTitle}. Strong on{' '}
+        {c.matchedSkills.slice(0, 2).join(' & ')}. I’d prioritise scheduling a screen this week.
+      </p>
+    )
+  }
+
+  return (
+    <>
+      <p>
+        I can help with ranking candidates, comparing profiles, drafting JDs, interview
+        questions, emails, offer letters, skill-gap and pipeline analysis, and more.
+      </p>
+      <p className="text-muted">
+        This is a fully-designed interface. Wire an AI endpoint (Claude / OpenAI) into the
+        chat’s <code>send</code> handler to make responses live.
+      </p>
+    </>
+  )
+}
diff --git a/frontend/src/app/routes.js b/frontend/src/app/routes.js
new file mode 100644
index 0000000..521439f
--- /dev/null
+++ b/frontend/src/app/routes.js
@@ -0,0 +1,54 @@
+/* ============================================================
+   routes.js — the 23-route information architecture.
+
+   This is the one artefact ADR 0013 says to preserve outright: the module
+   breakdown, nav grouping and screen inventory are a validated UX artefact
+   independent of the fake data behind them. Titles are verbatim from
+   js/app.js:7-16 and the group order is verbatim from index.html's sidebar.
+
+   `permission` gates the nav item and the route guard. See auth/permissions.js:
+   this is cosmetic — only /users/*, /roles/* and /permissions/* enforce
+   server-side. Routes with no matching backend module carry null and are open
+   to any signed-in user.
+   ============================================================ */
+
+export const NAV_GROUPS = ['Workspace', 'Recruiting', 'Hiring', 'Insights', 'System']
+
+export const ROUTES = [
+  // --- Workspace ---
+  { path: 'dashboard', title: 'Dashboard', icon: 'dashboard', group: 'Workspace', permission: 'dashboard.view' },
+  { path: 'inbox', title: 'Recruitment Inbox', icon: 'inbox', group: 'Workspace', permission: 'inbox.view', badge: 'inbox' },
+  { path: 'jobs', title: 'Jobs', icon: 'briefcase', group: 'Workspace', permission: 'jobs.view', badge: 'jobs' },
+  { path: 'candidates', title: 'Candidates', icon: 'users', group: 'Workspace', permission: 'candidates.view' },
+  { path: 'talentpool', title: 'Talent Pool', icon: 'talent', group: 'Workspace', permission: 'candidates.view' },
+  { path: 'pipeline', title: 'Pipeline', icon: 'pipeline', group: 'Workspace', permission: 'pipeline.view' },
+
+  // --- Recruiting ---
+  { path: 'import', title: 'CV Import', icon: 'upload', group: 'Recruiting', permission: 'candidates.create' },
+  { path: 'jobboard', title: 'Job Board', icon: 'layers', group: 'Recruiting', permission: 'job_board.view' },
+  { path: 'recruiterhub', title: 'Recruiter Hub', icon: 'check-circle', group: 'Recruiting', permission: 'analytics.view' },
+  { path: 'tasks', title: 'Tasks', icon: 'check-square', group: 'Recruiting', permission: null, badge: 'tasks' },
+  { path: 'aiassistant', title: 'AI Assistant', icon: 'sparkles', group: 'Recruiting', permission: null, tag: 'AI' },
+
+  // --- Hiring ---
+  { path: 'interviews', title: 'Interviews', icon: 'calendar', group: 'Hiring', permission: 'interviews.view' },
+  { path: 'assessments', title: 'Assessments', icon: 'check-square', group: 'Hiring', permission: 'assessments.view' },
+  { path: 'offers', title: 'Offers', icon: 'offers', group: 'Hiring', permission: 'offers.view' },
+  { path: 'managers', title: 'Hiring Managers', icon: 'managers', group: 'Hiring', permission: null },
+  { path: 'calendar', title: 'Calendar', icon: 'calendar', group: 'Hiring', permission: 'interviews.view' },
+
+  // --- Insights ---
+  { path: 'reports', title: 'Reports', icon: 'reports', group: 'Insights', permission: 'reports.view' },
+  { path: 'analytics', title: 'Analytics', icon: 'analytics', group: 'Insights', permission: 'analytics.view' },
+  { path: 'aistudio', title: 'AI Studio', icon: 'zap', group: 'Insights', permission: null },
+  { path: 'notifications', title: 'Notifications', icon: 'bell', group: 'Insights', permission: null, badge: 'notifications' },
+
+  // --- System ---
+  { path: 'rbac', title: 'Access Control', icon: 'shield', group: 'System', permission: 'rbac_users.view' },
+  { path: 'settings', title: 'Settings', icon: 'settings', group: 'System', permission: 'settings.view' },
+  { path: 'help', title: 'Help', icon: 'help', group: 'System', permission: null },
+]
+
+export const ROUTE_BY_PATH = Object.fromEntries(ROUTES.map((r) => [r.path, r]))
+
+export const DEFAULT_ROUTE = 'dashboard'
diff --git a/frontend/src/app/useShell.js b/frontend/src/app/useShell.js
new file mode 100644
index 0000000..8b98fcd
--- /dev/null
+++ b/frontend/src/app/useShell.js
@@ -0,0 +1,95 @@
+/* Shell hooks — the behaviours that lived loose in js/app.js's init(). */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { seedQuery } from '../data/seedQueries'
+
+const SIDEBAR_KEY = 'tf-sidebar'
+
+/** document.title and <html data-view> — CSS keys off data-view (js/app.js:38). */
+export function useRouteMeta(route) {
+  useEffect(() => {
+    if (!route) return undefined
+    document.documentElement.setAttribute('data-view', route.path)
+    document.title = `TalentFlow · ${route.title}`
+    return () => document.documentElement.removeAttribute('data-view')
+  }, [route])
+}
+
+/**
+ * Mobile nav drawer. All four class toggles are load-bearing for the frozen CSS:
+ * `nav-open` on <html> is what the rules key off, because the AI FAB sits before
+ * .scrim in the DOM so no sibling selector can reach it.
+ */
+export function useNavOpen() {
+  const [navOpen, setNavOpen] = useState(false)
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('nav-open', navOpen)
+    document.body.style.overflow = navOpen ? 'hidden' : ''
+    return () => {
+      document.documentElement.classList.remove('nav-open')
+    }
+  }, [navOpen])
+
+  return [navOpen, setNavOpen]
+}
+
+export function useSidebarCollapsed() {
+  // The prototype didn't persist this; a collapsed sidebar springing back open
+  // on every navigation reads as a bug.
+  const [collapsed, setCollapsed] = useState(() => {
+    try {
+      return localStorage.getItem(SIDEBAR_KEY) === '1'
+    } catch {
+      return false
+    }
+  })
+  const toggle = useCallback(() => {
+    setCollapsed((c) => {
+      try {
+        localStorage.setItem(SIDEBAR_KEY, c ? '0' : '1')
+      } catch {
+        /* ignore */
+      }
+      return !c
+    })
+  }, [])
+  return [collapsed, toggle]
+}
+
+/** Cmd/Ctrl+K focuses search; Escape closes the drawer and the dock (js/app.js:297-300). */
+export function useHotkeys({ onEscape }) {
+  const searchRef = useRef(null)
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        searchRef.current?.focus()
+      }
+      if (e.key === 'Escape') onEscape?.()
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [onEscape])
+  return searchRef
+}
+
+/**
+ * The four sidebar badge counts. App.updateBadges() was an imperative DOM write
+ * that every mutating call site had to remember to call; these are derived, so
+ * completing a task updates the badge with no call site involved at all.
+ */
+export function useBadges() {
+  const { data: jobs = [] } = useQuery(seedQuery('jobs'))
+  const { data: notifications = [] } = useQuery(seedQuery('notifications'))
+  const { data: tasks = [] } = useQuery(seedQuery('tasks'))
+  const { data: inbox = [] } = useQuery(seedQuery('inbox'))
+
+  return {
+    jobs: jobs.filter((j) => j.status === 'Open').length,
+    notifications: notifications.filter((n) => n.unread).length,
+    tasks: tasks.filter((t) => !t.done).length,
+    inbox: inbox.filter((i) => i.unread).length,
+  }
+}
diff --git a/frontend/src/auth/AuthContext.js b/frontend/src/auth/AuthContext.js
new file mode 100644
index 0000000..4e9b950
--- /dev/null
+++ b/frontend/src/auth/AuthContext.js
@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react'
+
+export const AuthContext = createContext(null)
+
+export function useAuth() {
+  const ctx = useContext(AuthContext)
+  if (!ctx) throw new Error('useAuth must be used inside <AuthProvider>')
+  return ctx
+}
+
+/** `{ can, permissions }` — see auth/permissions.js on what this actually enforces. */
+export function usePermission() {
+  const { can, permissions } = useAuth()
+  return { can, permissions }
+}
diff --git a/frontend/src/auth/AuthProvider.jsx b/frontend/src/auth/AuthProvider.jsx
new file mode 100644
index 0000000..f6f3092
--- /dev/null
+++ b/frontend/src/auth/AuthProvider.jsx
@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useMemo, useSyncExternalStore } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { AuthContext } from './AuthContext'
+import { makeCan } from './permissions'
+import { qk } from '../lib/queryKeys'
+import { setSessionExpiredHandler } from '../lib/apiClient'
+import { subscribe, getSession, setSession, mergeUser, clearSession } from '../lib/tokenStore'
+import * as authApi from '../api/auth'
+import * as usersApi from '../api/users'
+
+const emptySnapshot = () => null
+
+export default function AuthProvider({ children }) {
+  const session = useSyncExternalStore(subscribe, getSession, emptySnapshot)
+  const navigate = useNavigate()
+  const qc = useQueryClient()
+
+  // apiClient calls this when a refresh fails outright. Registered here so the
+  // HTTP layer never has to know about the router.
+  useEffect(() => {
+    setSessionExpiredHandler(() => {
+      clearSession()
+      qc.clear()
+      navigate('/auth/login?expired=1', { replace: true })
+    })
+    return () => setSessionExpiredHandler(() => {})
+  }, [navigate, qc])
+
+  // Permission bootstrap. This is a query rather than a useEffect fetch on
+  // purpose: TanStack Query dedupes, so React 19 StrictMode's double mount
+  // issues ONE request instead of two.
+  const me = useQuery({
+    queryKey: qk.auth.me(),
+    queryFn: () => usersApi.me().then((r) => r.data),
+    enabled: Boolean(session?.access_token),
+    staleTime: 5 * 60_000,
+    retry: false,
+  })
+
+  // Fold `permissions` into the stored session so a page reload has them before
+  // /users/me resolves — otherwise the nav flickers on every refresh.
+  useEffect(() => {
+    if (me.data) mergeUser(me.data)
+  }, [me.data])
+
+  const signIn = useCallback(
+    async (email, password) => {
+      const res = await authApi.login(email, password)
+      setSession(res)
+      // Refetch /users/me for the new user; the old one's permissions must not leak.
+      await qc.invalidateQueries({ queryKey: qk.auth.me() })
+      return res
+    },
+    [qc],
+  )
+
+  const signOut = useCallback(() => {
+    // Client-side only: the backend has no logout endpoint, no denylist and no
+    // jti tracking, so the refresh token stays valid until its 7-day exp.
+    clearSession()
+    qc.clear()
+    navigate('/auth/login', { replace: true })
+  }, [navigate, qc])
+
+  const user = me.data ?? session?.data ?? null
+  const permissions = me.data?.permissions ?? session?.data?.permissions ?? null
+
+  const status = !session?.access_token
+    ? 'anonymous'
+    : me.isError
+      ? 'error'
+      : me.data || permissions
+        ? 'authenticated'
+        : 'loading'
+
+  const value = useMemo(
+    () => ({
+      session,
+      user,
+      permissions,
+      status,
+      can: makeCan(permissions),
+      isAuthenticated: status === 'authenticated',
+      signIn,
+      signOut,
+      setSession,
+    }),
+    [session, user, permissions, status, signIn, signOut],
+  )
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+}
diff --git a/frontend/src/auth/RequireAuth.jsx b/frontend/src/auth/RequireAuth.jsx
new file mode 100644
index 0000000..225ac9d
--- /dev/null
+++ b/frontend/src/auth/RequireAuth.jsx
@@ -0,0 +1,40 @@
+import { Navigate, useLocation } from 'react-router-dom'
+import { useAuth } from './AuthContext'
+import Spinner from '../components/Spinner'
+
+/**
+ * Route guard.
+ *
+ * Blocking on `loading` is deliberate: rendering the shell before /users/me
+ * resolves would paint the full 23-item nav and then remove items a moment
+ * later, which reads as a bug rather than as security.
+ */
+export default function RequireAuth({ children, permission }) {
+  const { status, can } = useAuth()
+  const location = useLocation()
+
+  if (status === 'anonymous') {
+    return <Navigate to="/auth/login" replace state={{ from: location }} />
+  }
+  if (status === 'error') {
+    return <Navigate to="/auth/login?expired=1" replace />
+  }
+  if (status === 'loading') {
+    return (
+      <div className="route-loading">
+        <Spinner label="Loading your workspace" />
+      </div>
+    )
+  }
+  if (permission && !can(permission)) return <Forbidden />
+  return children
+}
+
+export function Forbidden() {
+  return (
+    <div className="empty-state">
+      <h3>You don’t have access to this page</h3>
+      <p>Ask an administrator to grant your role the required permission.</p>
+    </div>
+  )
+}
diff --git a/frontend/src/auth/permissions.js b/frontend/src/auth/permissions.js
new file mode 100644
index 0000000..8f99bda
--- /dev/null
+++ b/frontend/src/auth/permissions.js
@@ -0,0 +1,35 @@
+/* ============================================================
+   permissions.js — the 104-tag vocabulary, mirrored from the backend.
+
+   IMPORTANT — WHAT THIS DOES AND DOES NOT DO
+   ------------------------------------------
+   Everything here is COSMETIC: it hides nav items and blocks routes in the UI.
+   Real enforcement is `require_permission` on the server, and today that only
+   guards /users/*, /roles/* and /permissions/*. The other 20 screens are seed
+   data with no server behind them, and /inbox/fetch has no auth dependency at
+   all. A ticked box in the RBAC matrix is not an access control.
+
+   Source of truth: backend/users/permissions.py PermissionTag, which asserts at
+   startup that the enum equals the full modules x actions cross-product.
+   ============================================================ */
+
+export const MODULES = [
+  'dashboard', 'inbox', 'jobs', 'candidates', 'pipeline', 'interviews', 'assessments',
+  'offers', 'reports', 'analytics', 'job_board', 'settings', 'rbac_users',
+]
+
+export const ACTIONS = [
+  'view', 'create', 'edit', 'delete', 'approve', 'export', 'manage', 'configure',
+]
+
+/** All 104 `module.action` tags. */
+export const ALL_TAGS = MODULES.flatMap((m) => ACTIONS.map((a) => `${m}.${a}`))
+
+/**
+ * Build a permission predicate. A null/undefined tag is always allowed — routes
+ * like Tasks and Help have no backend module and are open to any signed-in user.
+ */
+export function makeCan(permissions) {
+  const set = new Set(permissions ?? [])
+  return (tag) => !tag || set.has(tag)
+}
diff --git a/frontend/src/components/Alert.jsx b/frontend/src/components/Alert.jsx
new file mode 100644
index 0000000..15a4968
--- /dev/null
+++ b/frontend/src/components/Alert.jsx
@@ -0,0 +1,9 @@
+export default function Alert({ type = 'danger', children }) {
+  if (!children) return null
+  const cls = type === 'success' ? 'alert alert-success' : 'alert alert-danger'
+  return (
+    <div className={cls} role="alert">
+      {children}
+    </div>
+  )
+}
diff --git a/frontend/src/components/AuthLayout.jsx b/frontend/src/components/AuthLayout.jsx
new file mode 100644
index 0000000..a231ba2
--- /dev/null
+++ b/frontend/src/components/AuthLayout.jsx
@@ -0,0 +1,67 @@
+import { useState } from 'react'
+import BrandMark from './BrandMark'
+import ThemeToggle from './ThemeToggle'
+
+export default function AuthLayout({ title, subtitle, children, foot }) {
+  return (
+    <div className="auth-shell">
+      <aside className="auth-aside" aria-hidden="false">
+        <BrandMark size="lg" />
+        <div className="auth-aside-copy">
+          <h1>Hiring, streamlined.</h1>
+          <p>
+            TalentFlow keeps Utopia Brands recruiting in one place — roles, pipeline,
+            and people.
+          </p>
+        </div>
+        <p className="auth-aside-foot">Utopia Brands · ATS</p>
+      </aside>
+
+      <div className="auth-panel">
+        <div className="auth-panel-top">
+          <div className="auth-panel-brand">
+            <BrandMark />
+          </div>
+          <ThemeToggle />
+        </div>
+
+        <div className="auth-card card">
+          {title ? <h2 className="page-title">{title}</h2> : null}
+          {subtitle ? <p className="auth-sub">{subtitle}</p> : null}
+          {children}
+        </div>
+
+        {foot ? <div className="auth-foot">{foot}</div> : null}
+      </div>
+    </div>
+  )
+}
+
+export function useFormState(initial = {}) {
+  const [values, setValues] = useState(initial)
+  const [errors, setErrors] = useState({})
+  const [alert, setAlert] = useState(null)
+  const [busy, setBusy] = useState(false)
+
+  function setField(name, value) {
+    setValues((prev) => ({ ...prev, [name]: value }))
+    setErrors((prev) => {
+      if (!prev[name]) return prev
+      const next = { ...prev }
+      delete next[name]
+      return next
+    })
+  }
+
+  return {
+    values,
+    setValues,
+    setField,
+    errors,
+    setErrors,
+    alert,
+    setAlert,
+    busy,
+    setBusy,
+  }
+}
diff --git a/frontend/src/components/BrandMark.jsx b/frontend/src/components/BrandMark.jsx
new file mode 100644
index 0000000..352f37f
--- /dev/null
+++ b/frontend/src/components/BrandMark.jsx
@@ -0,0 +1,13 @@
+export default function BrandMark({ size = 'md', showName = true }) {
+  const logoClass = size === 'lg' ? 'brand-logo brand-logo-lg' : 'brand-logo'
+  return (
+    <div className="auth-brand">
+      <div className={logoClass}>
+        <svg className="brand-mark" viewBox="0 0 100 64.46" aria-hidden="true">
+          <path d="M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z" />
+        </svg>
+      </div>
+      {showName ? <span className="brand-name">TalentFlow</span> : null}
+    </div>
+  )
+}
diff --git a/frontend/src/components/Countdown.jsx b/frontend/src/components/Countdown.jsx
new file mode 100644
index 0000000..f24bfbe
--- /dev/null
+++ b/frontend/src/components/Countdown.jsx
@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react'
+
+function formatSeconds(total) {
+  const s = Math.max(0, Math.floor(total))
+  const m = Math.floor(s / 60)
+  const r = s % 60
+  return `${m}:${String(r).padStart(2, '0')}`
+}
+
+/**
+ * Countdown seeded from a server duration (seconds).
+ * Pass `expiresIn` from the API — never invent a client-side default window.
+ */
+export default function Countdown({ expiresIn, startedAt, onExpire, label = 'Code expires in' }) {
+  const [remaining, setRemaining] = useState(() => {
+    if (expiresIn == null || !Number.isFinite(Number(expiresIn))) return null
+    const elapsed = startedAt ? (Date.now() - startedAt) / 1000 : 0
+    return Math.max(0, Number(expiresIn) - elapsed)
+  })
+
+  useEffect(() => {
+    if (expiresIn == null || !Number.isFinite(Number(expiresIn))) {
+      setRemaining(null)
+      return undefined
+    }
+    const tick = () => {
+      const elapsed = startedAt ? (Date.now() - startedAt) / 1000 : 0
+      const left = Math.max(0, Number(expiresIn) - elapsed)
+      setRemaining(left)
+      if (left <= 0 && onExpire) onExpire()
+    }
+    tick()
+    const id = setInterval(tick, 250)
+    return () => clearInterval(id)
+  }, [expiresIn, startedAt, onExpire])
+
+  if (remaining == null) return null
+
+  return (
+    <p className="countdown" aria-live="polite">
+      {remaining > 0 ? (
+        <>
+          {label} <strong>{formatSeconds(remaining)}</strong>
+        </>
+      ) : (
+        <span>Code expired</span>
+      )}
+    </p>
+  )
+}
+
+export function useResendGate(resendAfter, startedAt) {
+  const [remaining, setRemaining] = useState(() => {
+    if (resendAfter == null || !Number.isFinite(Number(resendAfter))) return 0
+    const elapsed = startedAt ? (Date.now() - startedAt) / 1000 : 0
+    return Math.max(0, Number(resendAfter) - elapsed)
+  })
+
+  useEffect(() => {
+    if (resendAfter == null || !Number.isFinite(Number(resendAfter))) {
+      setRemaining(0)
+      return undefined
+    }
+    const tick = () => {
+      const elapsed = startedAt ? (Date.now() - startedAt) / 1000 : 0
+      setRemaining(Math.max(0, Number(resendAfter) - elapsed))
+    }
+    tick()
+    const id = setInterval(tick, 250)
+    return () => clearInterval(id)
+  }, [resendAfter, startedAt])
+
+  return remaining
+}
diff --git a/frontend/src/components/OtpInput.jsx b/frontend/src/components/OtpInput.jsx
new file mode 100644
index 0000000..a4dd5ea
--- /dev/null
+++ b/frontend/src/components/OtpInput.jsx
@@ -0,0 +1,92 @@
+import { useEffect, useRef } from 'react'
+
+const LENGTH = 6
+
+export default function OtpInput({ value = '', onChange, disabled = false, error = false }) {
+  const refs = useRef([])
+  const digits = Array.from({ length: LENGTH }, (_, i) => value[i] || '')
+
+  useEffect(() => {
+    refs.current = refs.current.slice(0, LENGTH)
+  }, [])
+
+  function commit(nextDigits) {
+    onChange(nextDigits.join('').slice(0, LENGTH))
+  }
+
+  function setAt(index, char) {
+    const next = digits.slice()
+    next[index] = char
+    commit(next)
+  }
+
+  function handleChange(index, e) {
+    const raw = e.target.value.replace(/\D/g, '')
+    if (!raw) {
+      setAt(index, '')
+      return
+    }
+    if (raw.length > 1) {
+      const chars = raw.slice(0, LENGTH - index).split('')
+      const next = digits.slice()
+      chars.forEach((c, i) => {
+        next[index + i] = c
+      })
+      commit(next)
+      const focusIdx = Math.min(index + chars.length, LENGTH - 1)
+      refs.current[focusIdx]?.focus()
+      return
+    }
+    setAt(index, raw)
+    if (index < LENGTH - 1) refs.current[index + 1]?.focus()
+  }
+
+  function handleKeyDown(index, e) {
+    if (e.key === 'Backspace' && !digits[index] && index > 0) {
+      e.preventDefault()
+      setAt(index - 1, '')
+      refs.current[index - 1]?.focus()
+    }
+    if (e.key === 'ArrowLeft' && index > 0) {
+      e.preventDefault()
+      refs.current[index - 1]?.focus()
+    }
+    if (e.key === 'ArrowRight' && index < LENGTH - 1) {
+      e.preventDefault()
+      refs.current[index + 1]?.focus()
+    }
+  }
+
+  function handlePaste(e) {
+    e.preventDefault()
+    const pasted = (e.clipboardData.getData('text') || '').replace(/\D/g, '').slice(0, LENGTH)
+    if (!pasted) return
+    const next = Array.from({ length: LENGTH }, (_, i) => pasted[i] || '')
+    commit(next)
+    refs.current[Math.min(pasted.length, LENGTH) - 1]?.focus()
+  }
+
+  return (
+    <div className="otp-row" role="group" aria-label="One-time code">
+      {digits.map((digit, i) => (
+        <input
+          key={i}
+          ref={(el) => {
+            refs.current[i] = el
+          }}
+          className={`otp-input${error ? ' err' : ''}`}
+          type="text"
+          inputMode="numeric"
+          autoComplete={i === 0 ? 'one-time-code' : 'off'}
+          maxLength={1}
+          value={digit}
+          disabled={disabled}
+          aria-label={`Digit ${i + 1}`}
+          onChange={(e) => handleChange(i, e)}
+          onKeyDown={(e) => handleKeyDown(i, e)}
+          onPaste={handlePaste}
+        />
+      ))}
+    </div>
+  )
+}
diff --git a/frontend/src/components/PasswordField.jsx b/frontend/src/components/PasswordField.jsx
new file mode 100644
index 0000000..e94b72f
--- /dev/null
+++ b/frontend/src/components/PasswordField.jsx
@@ -0,0 +1,56 @@
+import { useId, useState } from 'react'
+
+export default function PasswordField({
+  id,
+  label = 'Password',
+  value,
+  onChange,
+  error,
+  autoComplete = 'current-password',
+  placeholder = '••••••••',
+  required = true,
+  disabled = false,
+}) {
+  const autoId = useId()
+  const fieldId = id || autoId
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <div className="form-field">
+      <label htmlFor={fieldId}>{label}{required ? <span className="req"> *</span> : null}</label>
+      <div className="pw-wrap">
+        <input
+          id={fieldId}
+          type={visible ? 'text' : 'password'}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          autoComplete={autoComplete}
+          placeholder={placeholder}
+          className={error ? 'err' : ''}
+          required={required}
+          disabled={disabled}
+        />
+        <button
+          type="button"
+          className="pw-toggle"
+          onClick={() => setVisible((v) => !v)}
+          aria-label={visible ? 'Hide password' : 'Show password'}
+          tabIndex={-1}
+        >
+          {visible ? (
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+              <line x1="1" y1="1" x2="23" y2="23" />
+            </svg>
+          ) : (
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+          )}
+        </button>
+      </div>
+      <span className={`field-error${error ? ' show' : ''}`}>{error || ''}</span>
+    </div>
+  )
+}
diff --git a/frontend/src/components/Spinner.jsx b/frontend/src/components/Spinner.jsx
new file mode 100644
index 0000000..95fa8ed
--- /dev/null
+++ b/frontend/src/components/Spinner.jsx
@@ -0,0 +1,7 @@
+export default function Spinner({ label = 'Loading' }) {
+  return (
+    <span className="spinner" role="status" aria-label={label}>
+      <span className="spinner-dot" />
+    </span>
+  )
+}
diff --git a/frontend/src/components/ThemeToggle.jsx b/frontend/src/components/ThemeToggle.jsx
new file mode 100644
index 0000000..70ee364
--- /dev/null
+++ b/frontend/src/components/ThemeToggle.jsx
@@ -0,0 +1,35 @@
+import { useTheme } from '../theme/ThemeProvider'
+
+export default function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme()
+  const onClick = toggleTheme
+  const dark = theme === 'dark'
+  return (
+    <button
+      type="button"
+      className="auth-theme-toggle"
+      onClick={onClick}
+      aria-pressed={dark ? 'true' : 'false'}
+      title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+      aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {dark ? (
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      )}
+    </button>
+  )
+}
diff --git a/js/data.js b/frontend/src/data/seed.js
similarity index 88%
rename from js/data.js
rename to frontend/src/data/seed.js
index cbf941b..4619c24 100644
--- a/js/data.js
+++ b/frontend/src/data/seed.js
@@ -1,11 +1,20 @@
 /* ============================================================
-   data.js — Realistic dummy dataset + generators
-   Exposes global `DB`
-   ============================================================ */
-(function () {
-  'use strict';
+   seed.js — Realistic dummy dataset + generators
+   Ported from the prototype's js/data.js. The IIFE became an ES module and
+   `window.DB` became the default export; the LCG and every generator are
+   unchanged, so the dataset is byte-identical to the prototype's.
 
-  // ---------- seeded pseudo-random for stable data ----------
+   Read this as a *display-requirements* artefact, not a data model — see
+   docs/architecture/01-repository-assessment.md §2.2. Screens whose backend
+   endpoints exist read the API instead; the rest resolve from here.
+   ============================================================ */
+
+// The prototype pinned "today" to 2026-07-09 in ~8 places across five files so
+// the generated relative dates stayed stable. Exported from one place now, so
+// switching the app to real time is a one-line change.
+export const TODAY = new Date('2026-07-09T09:00:00');
+
+// ---------- seeded pseudo-random for stable data ----------
   let seed = 88123;
   function rand() { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; }
   function pick(arr) { return arr[Math.floor(rand() * arr.length)]; }
@@ -50,7 +59,7 @@
   function initials(name) { return name.split(' ').map(p => p[0]).slice(0, 2).join('').toUpperCase(); }
   function email(name) { return name.toLowerCase().replace(/[^a-z ]/g, '').replace(/ /g, '.') + '@' + pick(['gmail.com', 'outlook.com', 'proton.me', 'icloud.com']); }
   function phone() { return '+1 (' + int(200, 989) + ') ' + int(200, 999) + '-' + int(1000, 9999); }
-  function daysAgo(n) { const d = new Date('2026-07-09T09:00:00'); d.setDate(d.getDate() - n); return d; }
+  function daysAgo(n) { const d = new Date(TODAY); d.setDate(d.getDate() - n); return d; }
   function fmtDate(d) { return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); }
   function fmtShort(d) { return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); }
 
@@ -182,19 +191,24 @@
   }
 
   // ---------- Activity feed ----------
+  // The prototype stored each row as an HTML string with the candidate name
+  // interpolated into <b> tags, then injected it with innerHTML. That is one of
+  // the 38 XSS sinks, and it cannot be rendered without dangerouslySetInnerHTML.
+  // Rows are structured now: a `parts` array of plain strings and {b} spans that
+  // the view renders as JSX. Same words on screen, no markup in the data.
   const activityTemplates = [
-    { icon: 'user-plus', color: 'i-green', text: (n, j) => `<b>${n}</b> applied for <b>${j}</b>` },
-    { icon: 'calendar', color: 'i-blue', text: (n, j) => `Interview scheduled with <b>${n}</b> for <b>${j}</b>` },
-    { icon: 'check', color: 'i-teal', text: (n, j) => `<b>${n}</b> moved to <b>Offer</b> stage` },
-    { icon: 'file', color: 'i-purple', text: (n, j) => `Offer sent to <b>${n}</b> for <b>${j}</b>` },
-    { icon: 'star', color: 'i-amber', text: (n, j) => `<b>${n}</b> completed an assessment` },
-    { icon: 'x', color: 'i-red', text: (n, j) => `<b>${n}</b> was rejected for <b>${j}</b>` }
+    { icon: 'user-plus', color: 'i-green', parts: (n, j) => [{ b: n }, ' applied for ', { b: j }] },
+    { icon: 'calendar', color: 'i-blue', parts: (n, j) => ['Interview scheduled with ', { b: n }, ' for ', { b: j }] },
+    { icon: 'check', color: 'i-teal', parts: (n) => [{ b: n }, ' moved to ', { b: 'Offer' }, ' stage'] },
+    { icon: 'file', color: 'i-purple', parts: (n, j) => ['Offer sent to ', { b: n }, ' for ', { b: j }] },
+    { icon: 'star', color: 'i-amber', parts: (n) => [{ b: n }, ' completed an assessment'] },
+    { icon: 'x', color: 'i-red', parts: (n, j) => [{ b: n }, ' was rejected for ', { b: j }] }
   ];
   const activity = [];
   for (let i = 0; i < 18; i++) {
     const t = pick(activityTemplates);
     const cand = pick(candidates);
-    activity.push({ icon: t.icon, color: t.color, html: t.text(cand.name, cand.jobTitle), time: int(1, 300), candidateId: cand.id });
+    activity.push({ icon: t.icon, color: t.color, parts: t.parts(cand.name, cand.jobTitle), time: int(1, 300), candidateId: cand.id });
   }
   activity.sort((a, b) => a.time - b.time);
   function relTime(mins) {
@@ -234,7 +248,7 @@
   };
 
   // ---------- KPIs ----------
-  const today = new Date('2026-07-09');
+  const today = new Date(TODAY);
   const kpis = {
     openJobs: jobs.filter(j => j.status === 'Open').length,
     closedJobs: jobs.filter(j => j.status === 'Closed').length,
@@ -488,25 +502,39 @@
   const recentlyViewed = [];
   const favorites = { candidates: [], jobs: [] };
 
-  // ---------- Expose ----------
-  window.DB = {
-    departments, businessUnits, locations, empTypes, grades, jobStatuses, educationLevels, stages, sources, skillsPool, benefitsPool,
-    recruiters, managers, jobs, candidates, interviews, assessments, offers,
-    activity, notifications, messages, analytics, kpis, roles, users,
-    interviewTypes, meetingTypes, companies,
-    // enterprise
-    sourceMeta, inboxSources, processingStatuses, resumeStatuses, inbox, emails,
-    publishPlatforms, publishings, tasks, savedSearches, evalTemplates,
-    rbacModules, permTypes, rbacRoles, aiModules, aiPrompts,
-    recentlyViewed, favorites,
-    // helpers
-    fmtDate, fmtShort, relTime, initials, avatarColor, int, pick, atsRecommendationClass,
-    money: n => '$' + n.toLocaleString('en-US'),
-    moneyK: n => '$' + Math.round(n / 1000) + 'k',
-    getJob: id => jobs.find(j => j.id === id),
-    getCandidate: id => candidates.find(c => c.id === id),
-    getManager: id => managers.find(m => m.id === id),
-    getRecruiter: id => recruiters.find(r => r.id === id),
-    getRecruiterByName: n => recruiters.find(r => r.name === n)
-  };
-})();
+  // ---------- Formatters ----------
+  // Money keeps the prototype's hardcoded '$'. Postings span six jurisdictions and
+  // there is no currency field in this dataset — that is a data-model fix for the
+  // backend (01-repository-assessment.md §2.2 "Money"), not a migration change.
+  const money = n => '$' + n.toLocaleString('en-US');
+  const moneyK = n => '$' + Math.round(n / 1000) + 'k';
+
+  // ---------- Lookups ----------
+  // The prototype read these off the DB global. They now take their list as an
+  // argument so a screen can pass either the seed array or a cached API list.
+  const byId = (list, id) => list.find(x => x.id === id);
+  const getJob = id => byId(jobs, id);
+  const getCandidate = id => byId(candidates, id);
+  const getManager = id => byId(managers, id);
+  const getRecruiter = id => byId(recruiters, id);
+  const getRecruiterByName = n => recruiters.find(r => r.name === n);
+
+// ---------- Exports ----------
+// Named exports so screens import only what they use, and `avatarColor`/`initials`
+// can reach the UI primitives without dragging the whole dataset in (the prototype's
+// UI.avatar() read them off the DB global, coupling every primitive to seed data).
+export {
+  // reference lists — never mutated, imported directly rather than through the cache
+  departments, businessUnits, locations, empTypes, grades, jobStatuses, educationLevels,
+  stages, sources, skillsPool, benefitsPool, interviewTypes, meetingTypes, companies,
+  sourceMeta, inboxSources, processingStatuses, resumeStatuses,
+  rbacModules, permTypes, savedSearches, evalTemplates, aiModules, aiPrompts,
+  // mutable buckets — these go through the query cache (see data/seedQueries.js)
+  recruiters, managers, jobs, candidates, interviews, assessments, offers,
+  activity, notifications, messages, analytics, kpis, roles, users,
+  inbox, emails, publishPlatforms, publishings, tasks, rbacRoles,
+  recentlyViewed, favorites,
+  // helpers
+  fmtDate, fmtShort, relTime, initials, avatarColor, int, pick, atsRecommendationClass,
+  money, moneyK, byId, getJob, getCandidate, getManager, getRecruiter, getRecruiterByName,
+};
diff --git a/frontend/src/data/seedQueries.js b/frontend/src/data/seedQueries.js
new file mode 100644
index 0000000..894d0f1
--- /dev/null
+++ b/frontend/src/data/seedQueries.js
@@ -0,0 +1,99 @@
+/* ============================================================
+   seedQueries.js — seed data served through the query cache.
+
+   Two jobs:
+
+   1. Make swapping a screen to a real endpoint a ONE-LINE change. A screen does
+        const { data: jobs = [] } = useQuery(seedQuery('jobs'))
+      and the day GET /jobs/fetch exists that becomes
+        const { data: jobs = [] } = useQuery({ queryKey: qk.jobs.list(f),
+                                               queryFn: () => jobsApi.list(f) })
+      with the component body, the JSX and the table config untouched.
+
+   2. Give the seed a mutation model. The prototype mutated the DB global in
+      place and called Router.reload(); here the CACHE is the store, and every
+      mutation is a setQueryData that re-renders exactly the subscribed screens.
+   ============================================================ */
+
+import { useCallback } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { qk } from '../lib/queryKeys'
+import * as seed from './seed'
+
+/**
+ * gcTime: Infinity is load-bearing, not a micro-optimisation. These buckets are
+ * mutable app state, not server state — if a mutated bucket were garbage
+ * collected after sitting off-screen it would silently revert to the pristine
+ * seed on the next mount, which looks like data loss and is miserable to debug.
+ */
+export function seedQuery(bucket) {
+  return {
+    queryKey: qk.seed[bucket](),
+    queryFn: async () => seed[bucket],
+    staleTime: Infinity,
+    gcTime: Infinity,
+    retry: false,
+  }
+}
+
+/** Buckets pre-populated at boot because the SHELL reads them before any route mounts. */
+export const SHELL_BUCKETS = ['jobs', 'notifications', 'messages', 'tasks', 'inbox']
+
+/** Everything the cache owns. The reference lists are imported directly instead. */
+export const SEED_BUCKETS = [
+  ...SHELL_BUCKETS,
+  'candidates', 'interviews', 'assessments', 'offers', 'activity', 'emails',
+  'publishings', 'rbacRoles', 'recruiters', 'managers', 'users',
+]
+
+/**
+ * Seed the shell's buckets before first render so the sidebar badges and the
+ * topbar dropdowns paint with real counts instead of popping in a frame later.
+ * This is the "cache initialized" step, called once from main.jsx.
+ */
+export function initializeCache(queryClient) {
+  for (const bucket of SHELL_BUCKETS) {
+    queryClient.setQueryData(qk.seed[bucket](), seed[bucket])
+  }
+  // Runtime buckets the prototype kept on DB. `favorites` and `recentlyViewed`
+  // restore from localStorage — a "recently viewed" list that empties on every
+  // refresh is worse than not having one.
+  queryClient.setQueryData(qk.seed.favorites(), readPersisted('tf-favorites', seed.favorites))
+  queryClient.setQueryData(qk.seed.recentlyViewed(), readPersisted('tf-recent', []))
+}
+
+function readPersisted(key, fallback) {
+  try {
+    const raw = localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : fallback
+  } catch {
+    return fallback
+  }
+}
+
+export function persist(key, value) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value))
+  } catch {
+    /* ignore */
+  }
+}
+
+/**
+ * Mutate a seed bucket. Returns `update(fn)` where fn maps the old value to the
+ * new one — the same shape as a React setState updater.
+ *
+ *   const updateCandidates = useSeedMutation('candidates')
+ *   updateCandidates(cs => cs.map(c => c.id === id ? { ...c, stage } : c))
+ */
+export function useSeedMutation(bucket) {
+  const qc = useQueryClient()
+  return useCallback(
+    (updater) => {
+      const key = qk.seed[bucket]()
+      qc.setQueryData(key, (old) => updater(old ?? seed[bucket]))
+      return qc.getQueryData(key)
+    },
+    [qc, bucket],
+  )
+}
diff --git a/frontend/src/lib/apiClient.js b/frontend/src/lib/apiClient.js
new file mode 100644
index 0000000..261b2bb
--- /dev/null
+++ b/frontend/src/lib/apiClient.js
@@ -0,0 +1,113 @@
+/* ============================================================
+   apiClient.js — the one HTTP entry point.
+
+   Attaches the bearer token, renews proactively inside the skew window, and
+   retries exactly once on a 401. Never loops: if the retry also 401s, the
+   session is over and the expired handler fires.
+   ============================================================ */
+
+import { ApiError, parseDetail, SessionExpiredError } from './errors'
+import { getAccessToken, isExpiring } from './tokenStore'
+import { refreshSession } from './refresh'
+
+const API_BASE = import.meta.env.VITE_API_BASE ?? ''
+
+// AuthProvider registers this so the module never has to import the router.
+let onSessionExpired = () => {}
+export function setSessionExpiredHandler(fn) {
+  onSessionExpired = fn
+}
+
+function buildUrl(path, params) {
+  const url = new URL(`${API_BASE}${path}`, window.location.origin)
+  if (params) {
+    for (const [k, v] of Object.entries(params)) {
+      if (v !== undefined && v !== null && v !== '') url.searchParams.set(k, v)
+    }
+  }
+  return url.toString()
+}
+
+/**
+ * @param {object} opts
+ * @param {boolean} [opts.auth=true]  attach the session bearer token
+ * @param {string}  [opts.token]      an explicit token (the password-reset flow);
+ *                                    suppresses all refresh behaviour
+ */
+export async function request(
+  path,
+  { method = 'GET', body, params, auth = true, token, signal } = {},
+) {
+  // PROACTIVE renewal. Coalesced by single-flight, so a screen firing six
+  // queries at once on an expiring token still triggers exactly one refresh.
+  if (auth && !token && isExpiring()) {
+    try {
+      await refreshSession()
+    } catch {
+      // Fall through — the 401 path below makes the final call. This keeps a
+      // transient network blip from logging the user out.
+    }
+  }
+
+  const send = async () => {
+    const headers = { Accept: 'application/json' }
+    if (body != null) headers['Content-Type'] = 'application/json'
+    const bearer = token ?? (auth ? getAccessToken() : null)
+    if (bearer) headers.Authorization = `Bearer ${bearer}`
+    return fetch(buildUrl(path, params), {
+      method,
+      headers,
+      signal,
+      body: body != null ? JSON.stringify(body) : undefined,
+    })
+  }
+
+  let res
+  try {
+    res = await send()
+  } catch (err) {
+    if (err?.name === 'AbortError') throw err
+    throw new ApiError('Unable to reach the server. Check your connection.', 0, null)
+  }
+
+  // REACTIVE renewal — exactly one retry.
+  if (res.status === 401 && auth && !token) {
+    try {
+      await refreshSession()
+    } catch (err) {
+      if (err instanceof SessionExpiredError) onSessionExpired()
+      throw err
+    }
+    res = await send()
+    if (res.status === 401) {
+      // A fresh access token still 401s: the user was deactivated or soft-deleted
+      // server-side (get_current_user rejects both). Signing them out is correct.
+      onSessionExpired()
+      throw new ApiError('Session expired', 401, null)
+    }
+  }
+
+  let data = null
+  const text = await res.text()
+  if (text) {
+    try {
+      data = JSON.parse(text)
+    } catch {
+      data = null
+    }
+  }
+
+  if (!res.ok) {
+    throw new ApiError(
+      parseDetail(data?.detail) || res.statusText || 'Request failed',
+      res.status,
+      data,
+    )
+  }
+  return data
+}
+
+export const get = (path, params, opts) => request(path, { ...opts, params })
+export const post = (path, body, opts) => request(path, { ...opts, method: 'POST', body })
+export const put = (path, body, opts) => request(path, { ...opts, method: 'PUT', body })
+export const del = (path, opts) => request(path, { ...opts, method: 'DELETE' })
diff --git a/js/charts.js b/frontend/src/lib/charts.js
similarity index 95%
rename from js/charts.js
rename to frontend/src/lib/charts.js
index f578ae0..287f916 100644
--- a/js/charts.js
+++ b/frontend/src/lib/charts.js
@@ -2,11 +2,14 @@
    charts.js — Lightweight Canvas chart engine (no libraries)
    Exposes global `Charts` with: line, bar, groupedBar, doughnut,
    area, horizontalBar, sparkline
-   ============================================================ */
-(function () {
-  'use strict';
 
-  function css(name) { return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); }
+   Retained verbatim from the prototype per ADR 0013 — the only edits are the
+   IIFE wrapper becoming an ES module and `window.Charts` becoming a default
+   export. The engine still reads --c1..--c8 and --border/--text-3/--bg-elev
+   live from CSS, so it re-themes itself with no React involvement.
+   ============================================================ */
+
+function css(name) { return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); }
 
   /* Series colours live in CSS (--c1..--c8) so light and dark each get a
      set tuned to their surface. Read live rather than cached: App.setTheme
@@ -336,12 +339,10 @@
     canvas.onmouseleave = hideTip;
   }
 
-  window.Charts = { line, bar, groupedBar, doughnut, horizontalBar, sparkline, legend, token: css };
-  // Live getter: each read reflects the active theme's --c1..--c8.
-  Object.defineProperty(window.Charts, 'PALETTE', { get: palette, enumerable: true });
+// `legend` is gone: it returned an HTML string, which is now the
+// <ChartLegend/> component in src/ui/Chart.jsx.
+const Charts = { line, bar, groupedBar, doughnut, horizontalBar, sparkline, token: css };
+// Live getter: each read reflects the active theme's --c1..--c8.
+Object.defineProperty(Charts, 'PALETTE', { get: palette, enumerable: true });
 
-  function legend(items) {
-    return `<div class="chart-legend">${items.map(it =>
-      `<span class="legend-item"><span class="legend-dot" style="background:${it.color}"></span>${it.label}</span>`).join('')}</div>`;
-  }
-})();
+export default Charts;
diff --git a/frontend/src/lib/errors.js b/frontend/src/lib/errors.js
new file mode 100644
index 0000000..5d96b59
--- /dev/null
+++ b/frontend/src/lib/errors.js
@@ -0,0 +1,69 @@
+/* ============================================================
+   errors.js — the API error type and FastAPI `detail` unwrapping.
+
+   Lifted verbatim from the original src/api.js. FastAPI returns errors as
+   {detail: ...} where `detail` is a string for HTTPException and an array of
+   {loc, msg, type} objects for request-validation failures — parseDetail
+   already handles both shapes, so it moves unchanged.
+   ============================================================ */
+
+export class ApiError extends Error {
+  constructor(message, status, body) {
+    super(message)
+    this.name = 'ApiError'
+    this.status = status
+    this.body = body
+  }
+}
+
+/** Raised when the refresh token itself is rejected — the session is over. */
+export class SessionExpiredError extends Error {
+  constructor(message = 'Your session has expired. Please sign in again.') {
+    super(message)
+    this.name = 'SessionExpiredError'
+  }
+}
+
+export function parseDetail(detail) {
+  if (detail == null || detail === '') return null
+  if (typeof detail === 'string') return detail
+  if (Array.isArray(detail)) {
+    return detail
+      .map((item) => {
+        if (typeof item === 'string') return item
+        if (item && typeof item === 'object') {
+          return item.msg || item.message || JSON.stringify(item)
+        }
+        return String(item)
+      })
+      .filter(Boolean)
+      .join('; ')
+  }
+  if (typeof detail === 'object') {
+    return detail.msg || detail.message || JSON.stringify(detail)
+  }
+  return String(detail)
+}
+
+export function friendlyAuthError(err, fallback = 'Something went wrong. Please try again.') {
+  if (!(err instanceof ApiError)) {
+    return err?.message || fallback
+  }
+  const fromServer = parseDetail(err.body?.detail)
+  switch (err.status) {
+    case 429:
+      return fromServer || 'Too many attempts. Please wait a moment and try again.'
+    case 404:
+      return fromServer || 'No account found for that email.'
+    case 400:
+      return fromServer || 'Please check your details and try again.'
+    case 401:
+      return fromServer || 'Incorrect email or password.'
+    case 409:
+      return fromServer || 'An account with that email already exists.'
+    case 502:
+      return fromServer || 'Email service is temporarily unavailable. Please try again later.'
+    default:
+      return fromServer || err.message || fallback
+  }
+}
diff --git a/frontend/src/lib/queryClient.js b/frontend/src/lib/queryClient.js
new file mode 100644
index 0000000..86481f8
--- /dev/null
+++ b/frontend/src/lib/queryClient.js
@@ -0,0 +1,25 @@
+import { QueryClient } from '@tanstack/react-query'
+import { ApiError, SessionExpiredError } from './errors'
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // A recruiter re-entering a screen within the minute gets cache, no spinner.
+      staleTime: 60_000,
+      gcTime: 15 * 60_000,
+      // This is an all-day tool. The prototype had no refetch-on-focus, and
+      // restriping every table on alt-tab would be a visible behaviour change.
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: true,
+      retry: (count, err) => {
+        if (err instanceof SessionExpiredError) return false
+        // 401 is already handled by apiClient's refresh-and-retry; re-running
+        // the query would just repeat work. 403/404/422 will never succeed.
+        if (err instanceof ApiError && err.status >= 400 && err.status < 500) return false
+        return count < 2
+      },
+      retryDelay: (i) => Math.min(1000 * 2 ** i, 8000),
+    },
+    mutations: { retry: 0 },
+  },
+})
diff --git a/frontend/src/lib/queryKeys.js b/frontend/src/lib/queryKeys.js
new file mode 100644
index 0000000..eb9464b
--- /dev/null
+++ b/frontend/src/lib/queryKeys.js
@@ -0,0 +1,48 @@
+/* Query key convention: [domain, scope, ...params], always an array, params
+   always last as a single object so `invalidateQueries({queryKey:['users']})`
+   catches every scope under a domain. */
+
+export const qk = {
+  auth: { me: () => ['auth', 'me'] },
+
+  // --- real backend endpoints ---
+  users: {
+    all: () => ['users'],
+    list: (p = {}) => ['users', 'list', p],
+  },
+  roles: {
+    all: () => ['roles'],
+    list: () => ['roles', 'list'],
+    permissions: () => ['roles', 'permissions'],
+    tags: () => ['roles', 'permission-tags'],
+  },
+  mailbox: {
+    all: () => ['mailbox'],
+    messages: () => ['mailbox', 'messages'],
+  },
+
+  // --- seed-backed buckets ---
+  // These are not "server state" — the cache IS the store for them, so every
+  // mutation is a setQueryData. See data/seedQueries.js.
+  seed: {
+    all: () => ['seed'],
+    jobs: () => ['seed', 'jobs'],
+    candidates: () => ['seed', 'candidates'],
+    interviews: () => ['seed', 'interviews'],
+    assessments: () => ['seed', 'assessments'],
+    offers: () => ['seed', 'offers'],
+    tasks: () => ['seed', 'tasks'],
+    notifications: () => ['seed', 'notifications'],
+    messages: () => ['seed', 'messages'],
+    activity: () => ['seed', 'activity'],
+    inbox: () => ['seed', 'inbox'],
+    emails: () => ['seed', 'emails'],
+    publishings: () => ['seed', 'publishings'],
+    rbacRoles: () => ['seed', 'rbacRoles'],
+    recruiters: () => ['seed', 'recruiters'],
+    managers: () => ['seed', 'managers'],
+    users: () => ['seed', 'users'],
+    favorites: () => ['seed', 'favorites'],
+    recentlyViewed: () => ['seed', 'recentlyViewed'],
+  },
+}
diff --git a/frontend/src/lib/refresh.js b/frontend/src/lib/refresh.js
new file mode 100644
index 0000000..52a6bfe
--- /dev/null
+++ b/frontend/src/lib/refresh.js
@@ -0,0 +1,88 @@
+/* ============================================================
+   refresh.js — single-flight token refresh.
+
+   WHY SINGLE-FLIGHT IS MANDATORY, NOT AN OPTIMISATION
+   ---------------------------------------------------
+   POST /users/refresh calls serialize_token(create_access_token(user),
+   create_refresh_token(user), user) — it mints a NEW refresh token every time
+   and there is no reuse detection or jti tracking on the server, so the old one
+   stays valid until its 7-day exp.
+
+   Two concurrent refreshes therefore BOTH succeed and return two different
+   valid pairs. Whichever setSession() lands second wins; requests already in
+   flight carry a token from the losing pair. The result is intermittent 401s
+   that look random and are close to undiagnosable from logs.
+
+   So: one promise per tab, and a Web Locks mutex across tabs.
+   ============================================================ */
+
+import { SessionExpiredError } from './errors'
+import {
+  getSession,
+  getRefreshToken,
+  setSession,
+  clearSession,
+  reloadFromStorage,
+} from './tokenStore'
+
+const API_BASE = import.meta.env.VITE_API_BASE ?? ''
+
+let inFlight = null
+
+/**
+ * Refresh the session. Concurrent callers all await the SAME promise, so at most
+ * one POST /users/refresh is outstanding per tab at any moment.
+ */
+export function refreshSession() {
+  if (inFlight) return inFlight
+  inFlight = run().finally(() => {
+    inFlight = null
+  })
+  return inFlight
+}
+
+async function post(refreshToken) {
+  let res
+  try {
+    res = await fetch(`${API_BASE}/users/refresh`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+      // The backend takes the refresh token in the JSON BODY — not a cookie,
+      // not an Authorization header (backend/users/app.py: TokenRefresh).
+      body: JSON.stringify({ refresh_token: refreshToken }),
+    })
+  } catch {
+    // Network failure is not an expired session — don't destroy a good session
+    // because the wifi dropped. Surface it and let the caller retry later.
+    throw new Error('Unable to reach the server while renewing your session.')
+  }
+
+  if (!res.ok) {
+    // 401 "Invalid or expired refresh token", or the user was deactivated.
+    clearSession()
+    throw new SessionExpiredError()
+  }
+  // Rotates BOTH tokens; setSession preserves `permissions` from /users/me.
+  return setSession(await res.json())
+}
+
+async function run() {
+  reloadFromStorage()
+  const token = getRefreshToken()
+  if (!token) throw new SessionExpiredError()
+
+  // Cross-tab single flight. Without it, five open tabs hitting an expired token
+  // means five rotations of the same refresh token: four pairs are orphaned and
+  // four tabs end up holding a stale access token.
+  if (typeof navigator !== 'undefined' && navigator.locks) {
+    return navigator.locks.request('tf-auth-refresh', async () => {
+      reloadFromStorage()
+      const current = getRefreshToken()
+      // Another tab rotated while we waited for the lock — reuse its result
+      // instead of spending our now-superseded token.
+      if (current && current !== token) return getSession()
+      return post(current ?? token)
+    })
+  }
+  return post(token)
+}
diff --git a/frontend/src/lib/tokenStore.js b/frontend/src/lib/tokenStore.js
new file mode 100644
index 0000000..2852f6b
--- /dev/null
+++ b/frontend/src/lib/tokenStore.js
@@ -0,0 +1,121 @@
+/* ============================================================
+   tokenStore.js — the session record, its expiry math, and cross-tab sync.
+
+   A module-level singleton rather than React state, because apiClient must read
+   the access token from plain async code that has no hooks available. React
+   binds to it through useSyncExternalStore (see auth/AuthProvider.jsx), which
+   works because every write replaces `cached` wholesale — the snapshot identity
+   only changes when the session actually changes.
+
+   Storage key stays `tf-auth` so anyone already signed in stays signed in.
+   ============================================================ */
+
+const KEY = 'tf-auth'
+
+// Renew this far ahead of expiry. Covers clock drift between browser and server
+// and, more importantly, means a request never has to eat a guaranteed 401 first.
+export const CLOCK_SKEW_MS = 60_000
+
+function readRaw() {
+  try {
+    return JSON.parse(localStorage.getItem(KEY)) || null
+  } catch {
+    return null
+  }
+}
+
+let cached = readRaw()
+const subscribers = new Set()
+
+function emit() {
+  subscribers.forEach((fn) => fn())
+}
+
+function persist() {
+  try {
+    localStorage.setItem(KEY, JSON.stringify(cached))
+  } catch {
+    /* quota or private mode — the in-memory session still works for this tab */
+  }
+}
+
+export function getSession() {
+  return cached
+}
+export function getAccessToken() {
+  return cached?.access_token ?? null
+}
+export function getRefreshToken() {
+  return cached?.refresh_token ?? null
+}
+
+export function subscribe(fn) {
+  subscribers.add(fn)
+  return () => subscribers.delete(fn)
+}
+
+/** Re-read from storage. Another tab may have rotated the pair since we last looked. */
+export function reloadFromStorage() {
+  cached = readRaw()
+  return cached
+}
+
+export function isExpiring(skew = CLOCK_SKEW_MS) {
+  if (!cached?.access_token) return false
+  // Sessions written before this field existed can't be reasoned about; let the
+  // reactive 401 path handle those rather than refreshing on every request.
+  if (!cached.expires_at) return false
+  return Date.now() >= cached.expires_at - skew
+}
+
+/**
+ * Store a login/signup/refresh response.
+ *
+ * The `data` MERGE is load-bearing. /users/login and /users/refresh return a
+ * user record WITHOUT `permissions` — only GET /users/me resolves those
+ * (backend/users/serializers.py: serialize_user's with_permissions defaults to
+ * False). A naive assignment would therefore wipe the permission list on the
+ * first background refresh, and every permission-gated nav item would vanish
+ * mid-session.
+ */
+export function setSession(res) {
+  cached = {
+    access_token: res.access_token,
+    refresh_token: res.refresh_token,
+    expires_in: res.expires_in,
+    expires_at: Date.now() + (res.expires_in ?? 1800) * 1000,
+    data: { ...(cached?.data ?? {}), ...(res.data ?? {}) },
+  }
+  persist()
+  emit()
+  return cached
+}
+
+/** Merge the GET /users/me payload — this is what puts `permissions` on the session. */
+export function mergeUser(user) {
+  if (!cached || !user) return cached
+  cached = { ...cached, data: { ...cached.data, ...user } }
+  persist()
+  emit()
+  return cached
+}
+
+export function clearSession() {
+  cached = null
+  try {
+    localStorage.removeItem(KEY)
+  } catch {
+    /* ignore */
+  }
+  emit()
+}
+
+// Cross-tab: sign-out and token rotation both propagate. `e.key === null` is a
+// storage.clear() from another tab.
+if (typeof window !== 'undefined') {
+  window.addEventListener('storage', (e) => {
+    if (e.key !== KEY && e.key !== null) return
+    cached = readRaw()
+    emit()
+  })
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
new file mode 100644
index 0000000..dbc7e4d
--- /dev/null
+++ b/frontend/src/main.jsx
@@ -0,0 +1,35 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+// The frozen design contract (ADR 0013 §1): 1,269 lines, 93 tokens, dual
+// themes, WCAG 2.1 AA verified across 23 routes. Content-frozen — new CSS may
+// only use existing var(--…) tokens.
+import './styles/styles.css'
+import './styles/auth.css'
+
+import App from './App'
+import ThemeProvider, { initTheme } from './theme/ThemeProvider'
+import ToastProvider from './ui/Toast'
+import { queryClient } from './lib/queryClient'
+import { initializeCache } from './data/seedQueries'
+
+// Before render: theme first so there is no light-mode flash, then the cache so
+// the shell's badges and dropdowns paint with real counts on the first frame
+// instead of popping in once a query resolves.
+initTheme()
+initializeCache(queryClient)
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider>
+        <ToastProvider>
+          <App />
+        </ToastProvider>
+      </ThemeProvider>
+      {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
+    </QueryClientProvider>
+  </StrictMode>,
+)
diff --git a/frontend/src/pages/ConfirmEmail.jsx b/frontend/src/pages/ConfirmEmail.jsx
new file mode 100644
index 0000000..21ca8eb
--- /dev/null
+++ b/frontend/src/pages/ConfirmEmail.jsx
@@ -0,0 +1,143 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import AuthLayout from '../components/AuthLayout'
+import Alert from '../components/Alert'
+import Spinner from '../components/Spinner'
+import { confirmEmail, resendConfirmEmail } from '../api/auth'
+import { friendlyAuthError } from '../lib/errors'
+
+const titles = {
+  verifying: 'Confirming your email',
+  success: 'Email confirmed',
+  error: 'Confirmation failed',
+}
+
+const subtitles = {
+  verifying: 'Hold on while we activate your account.',
+  success: 'Your TalentFlow account is active.',
+  error: 'That link did not work. Request a new one below.',
+}
+
+export default function ConfirmEmail() {
+  const [params] = useSearchParams()
+  const token = params.get('token') || ''
+
+  const [state, setState] = useState('verifying')
+  const [alert, setAlert] = useState(null)
+  const [email, setEmail] = useState('')
+  const [emailError, setEmailError] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [resent, setResent] = useState(false)
+
+  // StrictMode runs mount effects twice in dev; the ref survives the remount so
+  // the POST fires once. The server is idempotent either way.
+  const firedRef = useRef(false)
+
+  const runConfirm = useCallback(async () => {
+    if (!token) {
+      setState('error')
+      setAlert({ type: 'danger', message: 'This confirmation link is missing its token.' })
+      return
+    }
+    try {
+      const res = await confirmEmail(token)
+      const data = res?.data || {}
+      if (data.email) setEmail(data.email)
+      setState('success')
+      setAlert({
+        type: 'success',
+        message: data.already_confirmed
+          ? 'Your email was already confirmed. You can sign in.'
+          : 'Your email is confirmed. You can sign in now.',
+      })
+    } catch (err) {
+      setState('error')
+      setAlert({ type: 'danger', message: friendlyAuthError(err, 'Could not confirm your email.') })
+    }
+  }, [token])
+
+  useEffect(() => {
+    if (firedRef.current) return
+    firedRef.current = true
+    runConfirm()
+  }, [runConfirm])
+
+  async function onResend(e) {
+    e.preventDefault()
+    if (!email.trim()) {
+      setEmailError('Email is required')
+      return
+    }
+    setEmailError('')
+    setAlert(null)
+    setBusy(true)
+    try {
+      await resendConfirmEmail(email.trim())
+      setResent(true)
+      setAlert({ type: 'success', message: 'We sent a new confirmation link to your email.' })
+    } catch (err) {
+      setAlert({ type: 'danger', message: friendlyAuthError(err, 'Could not send a new link.') })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <AuthLayout
+      title={titles[state]}
+      subtitle={subtitles[state]}
+      foot={
+        <>
+          Back to{' '}
+          <Link className="link-btn" to="/auth/login">
+            Sign in
+          </Link>
+        </>
+      }
+    >
+      <Alert type={alert?.type}>{alert?.message}</Alert>
+
+      {state === 'verifying' && (
+        <p className="countdown" aria-live="polite">
+          <Spinner label="Confirming your email" /> Confirming…
+        </p>
+      )}
+
+      {state === 'success' && (
+        <Link className="btn btn-primary btn-block" to="/auth/login" style={{ textDecoration: 'none' }}>
+          Sign in
+        </Link>
+      )}
+
+      {state === 'error' && !resent && (
+        <form onSubmit={onResend} noValidate>
+          <div className="form-field">
+            <label htmlFor="confirm-email">
+              Email<span className="req"> *</span>
+            </label>
+            <input
+              id="confirm-email"
+              type="email"
+              autoComplete="email"
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value)
+                setEmailError('')
+              }}
+              className={emailError ? 'err' : ''}
+              placeholder="you@utopiabrands.com"
+              disabled={busy}
+              required
+            />
+            <span className={`field-error${emailError ? ' show' : ''}`}>{emailError || ''}</span>
+          </div>
+
+          <button type="submit" className="btn btn-primary btn-block" disabled={busy}>
+            {busy ? <Spinner label="Sending link" /> : null}
+            {busy ? 'Sending…' : 'Send a new link'}
+          </button>
+        </form>
+      )}
+    </AuthLayout>
+  )
+}
diff --git a/frontend/src/pages/ForgotPassword.jsx b/frontend/src/pages/ForgotPassword.jsx
new file mode 100644
index 0000000..8069c28
--- /dev/null
+++ b/frontend/src/pages/ForgotPassword.jsx
@@ -0,0 +1,282 @@
+import { useCallback, useState } from 'react'
+import { Link } from 'react-router-dom'
+import AuthLayout from '../components/AuthLayout'
+import PasswordField from '../components/PasswordField'
+import Alert from '../components/Alert'
+import OtpInput from '../components/OtpInput'
+import Countdown, { useResendGate } from '../components/Countdown'
+import Spinner from '../components/Spinner'
+import { forgetPassword, verifyForgetCode, setNewPassword } from '../api/auth'
+import { friendlyAuthError } from '../lib/errors'
+
+function pickTiming(payload) {
+  const src = payload?.data && typeof payload.data === 'object' ? payload.data : payload || {}
+  const expiresIn = src.expires_in
+  const resendAfter = src.resend_after
+  return {
+    expiresIn: expiresIn != null && Number.isFinite(Number(expiresIn)) ? Number(expiresIn) : null,
+    resendAfter:
+      resendAfter != null && Number.isFinite(Number(resendAfter)) ? Number(resendAfter) : null,
+  }
+}
+
+function pickResetToken(payload) {
+  if (!payload) return null
+  if (payload.reset_token) return payload.reset_token
+  if (payload.access_token) return payload.access_token
+  if (payload.data?.reset_token) return payload.data.reset_token
+  if (payload.data?.access_token) return payload.data.access_token
+  return null
+}
+
+export default function ForgotPassword() {
+  const [step, setStep] = useState(1)
+  const [email, setEmail] = useState('')
+  const [code, setCode] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [errors, setErrors] = useState({})
+  const [alert, setAlert] = useState(null)
+  const [busy, setBusy] = useState(false)
+  const [expiresIn, setExpiresIn] = useState(null)
+  const [resendAfter, setResendAfter] = useState(null)
+  const [startedAt, setStartedAt] = useState(null)
+  const [resetToken, setResetToken] = useState(null)
+  const [expired, setExpired] = useState(false)
+
+  const resendLeft = useResendGate(resendAfter, startedAt)
+  const onExpire = useCallback(() => setExpired(true), [])
+
+  function applyChallengeTiming(payload) {
+    const { expiresIn: exp, resendAfter: ra } = pickTiming(payload)
+    setExpiresIn(exp)
+    setResendAfter(ra)
+    setStartedAt(Date.now())
+    setExpired(false)
+  }
+
+  async function requestCode(e) {
+    e?.preventDefault()
+    const nextErrors = {}
+    if (!email.trim()) nextErrors.email = 'Email is required'
+    setErrors(nextErrors)
+    if (Object.keys(nextErrors).length) return
+
+    setAlert(null)
+    setBusy(true)
+    try {
+      const res = await forgetPassword(email.trim())
+      applyChallengeTiming(res)
+      setCode('')
+      setStep(2)
+      setAlert({
+        type: 'success',
+        message: res?.detail || res?.message || 'We sent a 6-digit code to your email.',
+      })
+    } catch (err) {
+      setAlert({ type: 'danger', message: friendlyAuthError(err) })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function verifyCode(e) {
+    e.preventDefault()
+    const nextErrors = {}
+    if (!/^\d{6}$/.test(code)) nextErrors.code = 'Enter the 6-digit code'
+    setErrors(nextErrors)
+    if (Object.keys(nextErrors).length) return
+    if (expired) {
+      setAlert({ type: 'danger', message: 'That code has expired. Request a new one.' })
+      return
+    }
+
+    setAlert(null)
+    setBusy(true)
+    try {
+      const res = await verifyForgetCode(email.trim(), code)
+      const token = pickResetToken(res)
+      if (!token) {
+        setAlert({ type: 'danger', message: 'Verification succeeded but no reset token was returned.' })
+        return
+      }
+      setResetToken(token)
+      setStep(3)
+      setAlert(null)
+    } catch (err) {
+      setAlert({ type: 'danger', message: friendlyAuthError(err, 'Invalid or expired code.') })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function submitPassword(e) {
+    e.preventDefault()
+    const nextErrors = {}
+    if (!password) nextErrors.password = 'Password is required'
+    else if (password.length < 8) nextErrors.password = 'Use at least 8 characters'
+    if (confirm !== password) nextErrors.confirm = 'Passwords do not match'
+    setErrors(nextErrors)
+    if (Object.keys(nextErrors).length) return
+
+    setAlert(null)
+    setBusy(true)
+    try {
+      await setNewPassword(password, resetToken)
+      setAlert({
+        type: 'success',
+        message: 'Password updated. You can sign in with your new password.',
+      })
+      setStep(4)
+    } catch (err) {
+      setAlert({ type: 'danger', message: friendlyAuthError(err, 'Could not update password.') })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const titles = {
+    1: 'Forgot password',
+    2: 'Enter code',
+    3: 'New password',
+    4: 'Password updated',
+  }
+  const subtitles = {
+    1: 'We’ll email you a one-time code to reset access.',
+    2: `Enter the 6-digit code sent to ${email}.`,
+    3: 'Choose a new password for your account.',
+    4: 'You’re all set.',
+  }
+
+  return (
+    <AuthLayout
+      title={titles[step]}
+      subtitle={subtitles[step]}
+      foot={
+        step === 4 ? (
+          <Link className="link-btn" to="/auth/login">
+            Back to sign in
+          </Link>
+        ) : (
+          <>
+            Remembered it?{' '}
+            <Link className="link-btn" to="/auth/login">
+              Sign in
+            </Link>
+          </>
+        )
+      }
+    >
+      <Alert type={alert?.type}>{alert?.message}</Alert>
+
+      {step === 1 && (
+        <form onSubmit={requestCode} noValidate>
+          <div className="form-field">
+            <label htmlFor="fp-email">
+              Email<span className="req"> *</span>
+            </label>
+            <input
+              id="fp-email"
+              type="email"
+              autoComplete="email"
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value)
+                setErrors((prev) => {
+                  if (!prev.email) return prev
+                  const n = { ...prev }
+                  delete n.email
+                  return n
+                })
+              }}
+              className={errors.email ? 'err' : ''}
+              placeholder="you@utopiabrands.com"
+              disabled={busy}
+              required
+            />
+            <span className={`field-error${errors.email ? ' show' : ''}`}>{errors.email || ''}</span>
+          </div>
+          <button type="submit" className="btn btn-primary btn-block" disabled={busy}>
+            {busy ? <Spinner label="Sending code" /> : null}
+            {busy ? 'Sending…' : 'Send code'}
+          </button>
+        </form>
+      )}
+
+      {step === 2 && (
+        <form onSubmit={verifyCode} noValidate>
+          <OtpInput
+            value={code}
+            onChange={(v) => {
+              setCode(v)
+              setErrors((prev) => {
+                if (!prev.code) return prev
+                const n = { ...prev }
+                delete n.code
+                return n
+              })
+            }}
+            disabled={busy}
+            error={Boolean(errors.code)}
+          />
+          <span className={`field-error${errors.code ? ' show' : ''}`}>{errors.code || ''}</span>
+
+          <Countdown expiresIn={expiresIn} startedAt={startedAt} onExpire={onExpire} />
+
+          <button type="submit" className="btn btn-primary btn-block" disabled={busy || expired}>
+            {busy ? <Spinner label="Verifying" /> : null}
+            {busy ? 'Verifying…' : 'Verify code'}
+          </button>
+
+          <div className="auth-resend">
+            {resendLeft > 0 ? (
+              <span className="countdown">Resend available in {Math.ceil(resendLeft)}s</span>
+            ) : (
+              <button
+                type="button"
+                className="link-btn"
+                disabled={busy}
+                onClick={() => requestCode()}
+              >
+                Resend code
+              </button>
+            )}
+          </div>
+        </form>
+      )}
+
+      {step === 3 && (
+        <form onSubmit={submitPassword} noValidate>
+          <PasswordField
+            id="fp-password"
+            label="New password"
+            autoComplete="new-password"
+            value={password}
+            onChange={setPassword}
+            error={errors.password}
+            disabled={busy}
+          />
+          <PasswordField
+            id="fp-confirm"
+            label="Confirm password"
+            autoComplete="new-password"
+            value={confirm}
+            onChange={setConfirm}
+            error={errors.confirm}
+            disabled={busy}
+          />
+          <button type="submit" className="btn btn-primary btn-block" disabled={busy}>
+            {busy ? <Spinner label="Saving password" /> : null}
+            {busy ? 'Saving…' : 'Update password'}
+          </button>
+        </form>
+      )}
+
+      {step === 4 && (
+        <Link className="btn btn-primary btn-block" to="/auth/login" style={{ textDecoration: 'none' }}>
+          Sign in
+        </Link>
+      )}
+    </AuthLayout>
+  )
+}
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
new file mode 100644
index 0000000..56427fa
--- /dev/null
+++ b/frontend/src/pages/Login.jsx
@@ -0,0 +1,100 @@
+import { Link, useLocation, useNavigate, useSearchParams } from 'react-router-dom'
+import AuthLayout, { useFormState } from '../components/AuthLayout'
+import PasswordField from '../components/PasswordField'
+import Alert from '../components/Alert'
+import Spinner from '../components/Spinner'
+import { friendlyAuthError } from '../lib/errors'
+import { useAuth } from '../auth/AuthContext'
+
+export default function Login() {
+  const form = useFormState({ email: '', password: '' })
+  const { signIn } = useAuth()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const [params] = useSearchParams()
+
+  // Where the guard bounced us from, so a deep link survives the login round-trip.
+  const from = location.state?.from?.pathname || '/dashboard'
+  const expired = params.get('expired') === '1'
+
+  async function onSubmit(e) {
+    e.preventDefault()
+    const errors = {}
+    if (!form.values.email.trim()) errors.email = 'Email is required'
+    if (!form.values.password) errors.password = 'Password is required'
+    form.setErrors(errors)
+    if (Object.keys(errors).length) return
+
+    form.setAlert(null)
+    form.setBusy(true)
+    try {
+      await signIn(form.values.email.trim(), form.values.password)
+      // In-SPA now: the old full page load out to /index.html#dashboard is gone.
+      navigate(from, { replace: true })
+    } catch (err) {
+      form.setAlert({ type: 'danger', message: friendlyAuthError(err, 'Could not sign in.') })
+      form.setBusy(false)
+    }
+  }
+
+  return (
+    <AuthLayout
+      title="Sign in"
+      subtitle="Welcome back to TalentFlow."
+      foot={
+        <>
+          New here?{' '}
+          <Link className="link-btn" to="/auth/signup">
+            Create an account
+          </Link>
+        </>
+      }
+    >
+      <form onSubmit={onSubmit} noValidate>
+        <Alert type={form.alert?.type}>{form.alert?.message}</Alert>
+        {!form.alert && expired ? (
+          <Alert type="danger">Your session expired. Please sign in again.</Alert>
+        ) : null}
+
+        <div className="form-field">
+          <label htmlFor="login-email">
+            Email<span className="req"> *</span>
+          </label>
+          <input
+            id="login-email"
+            type="email"
+            autoComplete="email"
+            value={form.values.email}
+            onChange={(e) => form.setField('email', e.target.value)}
+            className={form.errors.email ? 'err' : ''}
+            placeholder="you@utopiabrands.com"
+            disabled={form.busy}
+            required
+          />
+          <span className={`field-error${form.errors.email ? ' show' : ''}`}>
+            {form.errors.email || ''}
+          </span>
+        </div>
+
+        <PasswordField
+          id="login-password"
+          value={form.values.password}
+          onChange={(v) => form.setField('password', v)}
+          error={form.errors.password}
+          disabled={form.busy}
+        />
+
+        <div className="auth-row-end">
+          <Link className="link-btn" to="/auth/forgot-password">
+            Forgot password?
+          </Link>
+        </div>
+
+        <button type="submit" className="btn btn-primary btn-block" disabled={form.busy}>
+          {form.busy ? <Spinner label="Signing in" /> : null}
+          {form.busy ? 'Signing in…' : 'Sign in'}
+        </button>
+      </form>
+    </AuthLayout>
+  )
+}
diff --git a/frontend/src/pages/Signup.jsx b/frontend/src/pages/Signup.jsx
new file mode 100644
index 0000000..8ae08d8
--- /dev/null
+++ b/frontend/src/pages/Signup.jsx
@@ -0,0 +1,209 @@
+import { useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import AuthLayout, { useFormState } from '../components/AuthLayout'
+import PasswordField from '../components/PasswordField'
+import Alert from '../components/Alert'
+import Spinner from '../components/Spinner'
+import { useResendGate } from '../components/Countdown'
+import { signup, resendConfirmEmail } from '../api/auth'
+import { friendlyAuthError, ApiError } from '../lib/errors'
+import { setSession } from '../lib/tokenStore'
+
+export default function Signup() {
+  const form = useFormState({ name: '', email: '', password: '', confirm: '' })
+  const navigate = useNavigate()
+  const [sent, setSent] = useState(false)
+  const [resendAfter, setResendAfter] = useState(null)
+  const [startedAt, setStartedAt] = useState(null)
+  const resendLeft = useResendGate(resendAfter, startedAt)
+
+  async function onResend() {
+    form.setAlert(null)
+    form.setBusy(true)
+    try {
+      const res = await resendConfirmEmail(form.values.email.trim())
+      const data = res?.data || {}
+      setResendAfter(Number.isFinite(Number(data.resend_after)) ? Number(data.resend_after) : null)
+      setStartedAt(Date.now())
+      form.setAlert({ type: 'success', message: 'We sent a new confirmation link.' })
+    } catch (err) {
+      form.setAlert({
+        type: 'danger',
+        message: friendlyAuthError(err, 'Could not resend the link.'),
+      })
+    } finally {
+      form.setBusy(false)
+    }
+  }
+
+  async function onSubmit(e) {
+    e.preventDefault()
+    const errors = {}
+    if (!form.values.name.trim()) errors.name = 'Name is required'
+    if (!form.values.email.trim()) errors.email = 'Email is required'
+    if (!form.values.password) errors.password = 'Password is required'
+    else if (form.values.password.length < 8) errors.password = 'Use at least 8 characters'
+    if (form.values.confirm !== form.values.password) errors.confirm = 'Passwords do not match'
+    form.setErrors(errors)
+    if (Object.keys(errors).length) return
+
+    form.setAlert(null)
+    form.setBusy(true)
+    try {
+      const res = await signup(
+        form.values.name.trim(),
+        form.values.email.trim(),
+        form.values.password,
+      )
+      // The account starts inactive; only the mailed link activates it, so the
+      // tokens in this response are unusable until then.
+      if (!res?.data?.is_active) {
+        setSent(true)
+        form.setAlert({
+          type: 'success',
+          message: `We sent a confirmation link to ${res?.data?.email || form.values.email.trim()}.`,
+        })
+        form.setBusy(false)
+        return
+      }
+      setSession(res)
+      navigate('/dashboard', { replace: true })
+    } catch (err) {
+      // 502 means the account was created but the email failed — offer a resend
+      // rather than a dead end.
+      if (err instanceof ApiError && err.status === 502) {
+        setSent(true)
+        form.setAlert({
+          type: 'danger',
+          message: 'Your account was created but we could not send the email. Try again below.',
+        })
+        form.setBusy(false)
+        return
+      }
+      form.setAlert({
+        type: 'danger',
+        message: friendlyAuthError(err, 'Could not create your account.'),
+      })
+      form.setBusy(false)
+    }
+  }
+
+  if (sent) {
+    return (
+      <AuthLayout
+        title="Check your email"
+        subtitle="Open the link we sent to activate your account."
+        foot={
+          <>
+            Already confirmed?{' '}
+            <Link className="link-btn" to="/auth/login">
+              Sign in
+            </Link>
+          </>
+        }
+      >
+        <Alert type={form.alert?.type}>{form.alert?.message}</Alert>
+
+        {resendLeft > 0 ? (
+          <p className="countdown" aria-live="polite">
+            Resend available in {Math.ceil(resendLeft)}s
+          </p>
+        ) : (
+          <button
+            type="button"
+            className="btn btn-primary btn-block"
+            disabled={form.busy}
+            onClick={onResend}
+          >
+            {form.busy ? <Spinner label="Sending link" /> : null}
+            {form.busy ? 'Sending…' : 'Resend confirmation email'}
+          </button>
+        )}
+      </AuthLayout>
+    )
+  }
+
+  return (
+    <AuthLayout
+      title="Create account"
+      subtitle="Join TalentFlow for Utopia Brands hiring."
+      foot={
+        <>
+          Already have an account?{' '}
+          <Link className="link-btn" to="/auth/login">
+            Sign in
+          </Link>
+        </>
+      }
+    >
+      <form onSubmit={onSubmit} noValidate>
+        <Alert type={form.alert?.type}>{form.alert?.message}</Alert>
+
+        <div className="form-field">
+          <label htmlFor="signup-name">
+            Full name<span className="req"> *</span>
+          </label>
+          <input
+            id="signup-name"
+            type="text"
+            autoComplete="name"
+            value={form.values.name}
+            onChange={(e) => form.setField('name', e.target.value)}
+            className={form.errors.name ? 'err' : ''}
+            placeholder="Asfand Ahmed"
+            disabled={form.busy}
+            required
+          />
+          <span className={`field-error${form.errors.name ? ' show' : ''}`}>
+            {form.errors.name || ''}
+          </span>
+        </div>
+
+        <div className="form-field">
+          <label htmlFor="signup-email">
+            Email<span className="req"> *</span>
+          </label>
+          <input
+            id="signup-email"
+            type="email"
+            autoComplete="email"
+            value={form.values.email}
+            onChange={(e) => form.setField('email', e.target.value)}
+            className={form.errors.email ? 'err' : ''}
+            placeholder="you@utopiabrands.com"
+            disabled={form.busy}
+            required
+          />
+          <span className={`field-error${form.errors.email ? ' show' : ''}`}>
+            {form.errors.email || ''}
+          </span>
+        </div>
+
+        <PasswordField
+          id="signup-password"
+          label="Password"
+          autoComplete="new-password"
+          value={form.values.password}
+          onChange={(v) => form.setField('password', v)}
+          error={form.errors.password}
+          disabled={form.busy}
+        />
+
+        <PasswordField
+          id="signup-confirm"
+          label="Confirm password"
+          autoComplete="new-password"
+          value={form.values.confirm}
+          onChange={(v) => form.setField('confirm', v)}
+          error={form.errors.confirm}
+          disabled={form.busy}
+        />
+
+        <button type="submit" className="btn btn-primary btn-block" disabled={form.busy}>
+          {form.busy ? <Spinner label="Creating account" /> : null}
+          {form.busy ? 'Creating…' : 'Create account'}
+        </button>
+      </form>
+    </AuthLayout>
+  )
+}
diff --git a/frontend/src/screens/AiAssistant.jsx b/frontend/src/screens/AiAssistant.jsx
new file mode 100644
index 0000000..e4dbe2e
--- /dev/null
+++ b/frontend/src/screens/AiAssistant.jsx
@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import Chat from '../app/ai/Chat'
+import { Icon } from '../ui/primitives'
+
+export default function AiAssistant() {
+  // Bumping the key resets the transcript — the old AI.newChat().
+  const [resetKey, setResetKey] = useState(0)
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">AI Assistant</h1>
+          <p className="page-sub">Your recruiting copilot — powered by AI (interface preview)</p>
+        </div>
+        <div className="page-head-actions">
+          <span className="integration-status pending">
+            <span className="pulse" />Model endpoint · Not connected
+          </span>
+          <button className="btn btn-secondary" onClick={() => setResetKey((k) => k + 1)}>
+            <Icon name="plus" /> New Chat
+          </button>
+        </div>
+      </div>
+      <div className="card">
+        <div className="card-body">
+          <Chat resetKey={resetKey} />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/screens/AiStudio.jsx b/frontend/src/screens/AiStudio.jsx
new file mode 100644
index 0000000..3a795ac
--- /dev/null
+++ b/frontend/src/screens/AiStudio.jsx
@@ -0,0 +1,104 @@
+import { useState } from 'react'
+import Modal from '../ui/Modal'
+import { Badge, Icon } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { aiModules } from '../data/seed'
+
+export default function AiStudio() {
+  const { toast } = useToast()
+  const [detail, setDetail] = useState(null)
+  const betaCount = aiModules.filter((m) => m.status === 'Beta').length
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">AI Studio</h1>
+          <p className="page-sub">
+            Next-generation AI modules — designed and API-ready for backend integration
+          </p>
+        </div>
+        <div className="page-head-actions">
+          <span className="integration-status pending"><span className="pulse" />{betaCount} in Beta</span>
+        </div>
+      </div>
+
+      <div className="card brand-hero mb-18">
+        <div className="card-body" style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
+          <div className="ai-logo" style={{ margin: 0, width: 56, height: 56 }}><Icon name="sparkles" /></div>
+          <div style={{ flex: 1, minWidth: 220 }}>
+            <h2 style={{ fontSize: 19, marginBottom: 4 }}>Everything is API-ready</h2>
+            <p style={{ opacity: 0.88 }}>
+              Each module below ships with a complete, production-grade interface. Connect your model
+              endpoint to activate them — no UI work required.
+            </p>
+          </div>
+          <button className="btn btn-on-brand" onClick={() => toast('Integration guide opened', 'info')}>
+            <Icon name="external" /> Integration Guide
+          </button>
+        </div>
+      </div>
+
+      <div className="grid g-3">
+        {aiModules.map((m) => (
+          <div key={m.name} className="card" style={{ cursor: 'pointer' }} onClick={() => setDetail(m)}>
+            <div className="card-body">
+              <div className="flex items-center" style={{ justifyContent: 'space-between', marginBottom: 12 }}>
+                <span className={`kpi-icn ${m.cls}`} style={{ width: 46, height: 46, borderRadius: 13 }}>
+                  <Icon name={m.icon} />
+                </span>
+                <Badge className={m.status === 'Beta' ? 'b-indigo' : 'b-gray'}>{m.status}</Badge>
+              </div>
+              <div className="lr-title" style={{ fontSize: 15 }}>{m.name}</div>
+              <div className="lr-sub" style={{ marginTop: 5, lineHeight: 1.5 }}>{m.desc}</div>
+              <div style={{ marginTop: 14, color: 'var(--primary)', fontWeight: 600, fontSize: 13 }}>
+                {m.status === 'Beta' ? 'Try it' : 'Join waitlist'} <Icon name="arrow-right" />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {detail && (
+        <Modal
+          title={detail.name}
+          subtitle={`${detail.status} · AI Module`}
+          size="modal-lg"
+          onClose={() => setDetail(null)}
+          footer={<button className="btn btn-secondary" onClick={() => setDetail(null)}>Close</button>}
+        >
+          <div className="flex items-center gap-16" style={{ marginBottom: 18 }}>
+            <span className={`kpi-icn ${detail.cls}`} style={{ width: 56, height: 56, borderRadius: 16 }}>
+              <Icon name={detail.icon} />
+            </span>
+            <div>
+              <div className="fw-600" style={{ fontSize: 16 }}>{detail.name}</div>
+              <div className="text-muted">{detail.desc}</div>
+            </div>
+          </div>
+          <div className="card" style={{ boxShadow: 'none', background: 'var(--bg-sunken)' }}>
+            <div className="card-body">
+              <div className="form-section-title" style={{ marginTop: 0 }}>API Contract (preview)</div>
+              <pre className="resume-thumb" style={{ maxHeight: 'none' }}>
+{`POST /api/ai/${detail.name.toLowerCase().replace(/ /g, '-')}
+{
+  "context": { "jobId": "JOB-1001", "candidateIds": [...] },
+  "options": { "model": "claude-opus", "stream": true }
+}
+
+→ 200 OK
+{
+  "result": { ... },
+  "usage": { "tokens": 1240 }
+}`}
+              </pre>
+            </div>
+          </div>
+          <p className="text-muted text-sm" style={{ marginTop: 14 }}>
+            <Icon name="lock" /> This feature’s UI is complete. Backend wiring is the only remaining step.
+          </p>
+        </Modal>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/screens/Analytics.jsx b/frontend/src/screens/Analytics.jsx
new file mode 100644
index 0000000..b0a17dd
--- /dev/null
+++ b/frontend/src/screens/Analytics.jsx
@@ -0,0 +1,171 @@
+import { useMemo } from 'react'
+import { useQuery } from '@tanstack/react-query'
+
+import Chart, { ChartLegend } from '../ui/Chart'
+import Charts from '../lib/charts'
+import { Icon } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { seedQuery } from '../data/seedQueries'
+import { analytics as a } from '../data/seed'
+
+export default function Analytics() {
+  const { toast } = useToast()
+  const { data: candidates = [] } = useQuery(seedQuery('candidates'))
+  const { data: recruiters = [] } = useQuery(seedQuery('recruiters'))
+
+  const trend = useMemo(
+    () => ({
+      labels: a.hiringTrend.labels,
+      area: true,
+      datasets: [
+        { label: 'Applications', data: a.hiringTrend.applications, color: Charts.PALETTE[4] },
+        { label: 'Hires', data: a.hiringTrend.hires, color: Charts.PALETTE[0] },
+      ],
+    }),
+    [],
+  )
+  const apps = useMemo(() => ({ labels: a.hiringTrend.labels, data: a.hiringTrend.applications }), [])
+  const source = useMemo(
+    () => ({
+      labels: a.sources.map((s) => s.source),
+      data: a.sources.map((s) => s.count),
+      centerValue: candidates.length,
+      centerLabel: 'Total',
+    }),
+    [candidates.length],
+  )
+  const offer = useMemo(() => {
+    const { accepted, pending, declined } = a.offerAcceptance
+    return {
+      labels: ['Accepted', 'Pending', 'Declined'],
+      data: [accepted, pending, declined],
+      colors: [Charts.token('--success'), Charts.token('--warning'), Charts.token('--danger')],
+      centerValue: `${Math.round((accepted / (accepted + declined || 1)) * 100)}%`,
+      centerLabel: 'Accept rate',
+    }
+  }, [])
+  const pipeline = useMemo(
+    () => ({
+      labels: a.pipeline.map((p) => p.stage),
+      data: a.pipeline.map((p) => p.count),
+      colors: Charts.PALETTE,
+    }),
+    [],
+  )
+  const dept = useMemo(
+    () => ({ labels: a.departments.map((d) => d.dept), data: a.departments.map((d) => d.apps) }),
+    [],
+  )
+  const rec = useMemo(() => {
+    const top = [...recruiters].sort((x, y) => y.hires - x.hires).slice(0, 8)
+    return { labels: top.map((r) => r.name), data: top.map((r) => r.hires) }
+  }, [recruiters])
+  const tth = useMemo(
+    () => ({
+      labels: a.hiringTrend.labels, area: true, yFmt: (v) => `${v}d`,
+      datasets: [{ label: 'Time to Hire', data: a.timeToHire, color: Charts.PALETTE[0] }],
+    }),
+    [],
+  )
+  const ttf = useMemo(
+    () => ({
+      labels: a.hiringTrend.labels, area: true, yFmt: (v) => `${v}d`,
+      datasets: [{ label: 'Time to Fill', data: a.timeToFill, color: Charts.PALETTE[2] }],
+    }),
+    [],
+  )
+
+  const trendLegend = useMemo(
+    () => [
+      { label: 'Applications', color: Charts.PALETTE[4] },
+      { label: 'Hires', color: Charts.PALETTE[0] },
+    ],
+    [],
+  )
+  const sourceLegend = useMemo(
+    () => a.sources.map((s, i) => ({ label: s.source, color: Charts.PALETTE[i % Charts.PALETTE.length] })),
+    [],
+  )
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Analytics</h1>
+          <p className="page-sub">Deep-dive metrics across your recruitment funnel</p>
+        </div>
+        <div className="page-head-actions">
+          <div className="pill-tabs">
+            <span className="pill-tab">Week</span>
+            <span className="pill-tab active">Month</span>
+            <span className="pill-tab">Quarter</span>
+          </div>
+          <button className="btn btn-secondary" onClick={() => toast('Analytics exported', 'success')}>
+            <Icon name="download" /> Export
+          </button>
+        </div>
+      </div>
+
+      <div className="grid g-2 mb-18">
+        <div className="card">
+          <div className="card-head"><div><h3>Hiring Trend</h3><span className="ch-sub">Hires vs applications</span></div></div>
+          <div className="card-body">
+            <div className="chart-wrap"><Chart type="line" data={trend} height={260} /></div>
+            <ChartLegend items={trendLegend} />
+          </div>
+        </div>
+        <div className="card">
+          <div className="card-head"><div><h3>Applications Received</h3><span className="ch-sub">Monthly volume</span></div></div>
+          <div className="card-body"><div className="chart-wrap"><Chart type="bar" data={apps} height={260} /></div></div>
+        </div>
+      </div>
+
+      <div className="grid g-3 mb-18">
+        <div className="card">
+          <div className="card-head"><div><h3>Source Breakdown</h3></div></div>
+          <div className="card-body">
+            <div className="chart-wrap"><Chart type="doughnut" data={source} height={220} /></div>
+            <ChartLegend items={sourceLegend} />
+          </div>
+        </div>
+        <div className="card">
+          <div className="card-head"><div><h3>Offer Acceptance</h3></div></div>
+          <div className="card-body">
+            <div className="chart-wrap"><Chart type="doughnut" data={offer} height={220} /></div>
+            <div className="chart-legend">
+              <span className="legend-item"><span className="legend-dot" style={{ background: 'var(--success)' }} />Accepted</span>
+              <span className="legend-item"><span className="legend-dot" style={{ background: 'var(--warning)' }} />Pending</span>
+              <span className="legend-item"><span className="legend-dot" style={{ background: 'var(--danger)' }} />Declined</span>
+            </div>
+          </div>
+        </div>
+        <div className="card">
+          <div className="card-head"><div><h3>Pipeline Distribution</h3></div></div>
+          <div className="card-body"><div className="chart-wrap"><Chart type="horizontalBar" data={pipeline} height={260} /></div></div>
+        </div>
+      </div>
+
+      <div className="grid g-2 mb-18">
+        <div className="card">
+          <div className="card-head"><div><h3>Applications by Department</h3><span className="ch-sub">Volume per team</span></div></div>
+          <div className="card-body"><div className="chart-wrap"><Chart type="bar" data={dept} height={300} /></div></div>
+        </div>
+        <div className="card">
+          <div className="card-head"><div><h3>Recruiter Performance</h3><span className="ch-sub">Hires by recruiter (top 8)</span></div></div>
+          <div className="card-body"><div className="chart-wrap"><Chart type="horizontalBar" data={rec} height={300} /></div></div>
+        </div>
+      </div>
+
+      <div className="grid g-2">
+        <div className="card">
+          <div className="card-head"><div><h3>Time to Hire</h3><span className="ch-sub">Days, monthly average</span></div></div>
+          <div className="card-body"><div className="chart-wrap"><Chart type="line" data={tth} height={240} /></div></div>
+        </div>
+        <div className="card">
+          <div className="card-head"><div><h3>Time to Fill</h3><span className="ch-sub">Days, monthly average</span></div></div>
+          <div className="card-body"><div className="chart-wrap"><Chart type="line" data={ttf} height={240} /></div></div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/screens/Assessments.jsx b/frontend/src/screens/Assessments.jsx
new file mode 100644
index 0000000..e1e19af
--- /dev/null
+++ b/frontend/src/screens/Assessments.jsx
@@ -0,0 +1,248 @@
+import { useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import DataTable from '../ui/DataTable'
+import Modal from '../ui/Modal'
+import { Avatar, Badge, Icon, KpiCard, ProgressBar, ScoreChip } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { seedQuery } from '../data/seedQueries'
+import { candidates as allCandidates, fmtDate, fmtShort, int } from '../data/seed'
+
+const SECTIONS = ['Problem Solving', 'Code Quality', 'Communication', 'Time Management']
+
+export default function Assessments() {
+  const { toast } = useToast()
+  const navigate = useNavigate()
+  const { data: assessments = [] } = useQuery(seedQuery('assessments'))
+
+  const [q, setQ] = useState('')
+  const [status, setStatus] = useState('')
+  const [type, setType] = useState('')
+  const [viewing, setViewing] = useState(null)
+  const [assigning, setAssigning] = useState(false)
+
+  const stats = useMemo(() => {
+    const scored = assessments.filter((a) => a.score)
+    return {
+      total: assessments.length,
+      completed: assessments.filter((a) => a.status === 'Completed').length,
+      pending: assessments.filter((a) => ['Pending', 'In Progress'].includes(a.status)).length,
+      avg: Math.round(scored.reduce((s, a) => s + a.score, 0) / (scored.length || 1)),
+    }
+  }, [assessments])
+
+  const types = useMemo(() => [...new Set(assessments.map((a) => a.type))], [assessments])
+
+  const rows = useMemo(
+    () =>
+      assessments.filter((a) => {
+        if (status && a.status !== status) return false
+        if (type && a.type !== type) return false
+        if (q && !(a.candidate + a.jobTitle + a.type).toLowerCase().includes(q.toLowerCase())) return false
+        return true
+      }),
+    [assessments, q, status, type],
+  )
+
+  // Section scores were generated inline at render in the prototype, so they
+  // reshuffled on every repaint. Derived per assessment id and memoised here.
+  const sectionScores = useMemo(
+    () => (viewing ? SECTIONS.map((s) => ({ label: s, score: int(60, 98) })) : []),
+    [viewing],
+  )
+
+  const columns = [
+    {
+      key: 'candidate', label: 'Candidate', sortable: true,
+      render: (a) => (
+        <div className="user-cell">
+          <Avatar name={a.candidate} initials={a.initials} color={a.color} />
+          <div>
+            <div className="cell-primary">{a.candidate}</div>
+            <div className="cell-sub">{a.jobTitle}</div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'type', label: 'Assessment', sortable: true,
+      render: (a) => (
+        <>
+          <div className="cell-primary text-sm">{a.type}</div>
+          <div className="cell-sub">{a.duration}</div>
+        </>
+      ),
+    },
+    { key: 'assigned', label: 'Assigned', sortable: true, sortValue: (a) => a.assigned.getTime(), render: (a) => <span className="text-muted">{fmtShort(a.assigned)}</span> },
+    { key: 'due', label: 'Due', sortable: true, sortValue: (a) => a.due.getTime(), render: (a) => <span className="text-muted">{fmtShort(a.due)}</span> },
+    { key: 'score', label: 'Score', sortable: true, align: 'center', render: (a) => (a.score !== null ? <ScoreChip score={a.score} /> : <span className="text-muted">—</span>) },
+    { key: 'status', label: 'Status', sortable: true, render: (a) => <Badge>{a.status}</Badge> },
+    {
+      key: '_a', label: 'Actions', align: 'right',
+      render: (a) => (
+        <div className="row-actions">
+          <button className="act-btn" data-tip="View" onClick={() => setViewing(a)}><Icon name="eye" /></button>
+          <button className="act-btn" data-tip="Remind" onClick={() => toast(`Reminder sent to ${a.candidate}`, 'info')}><Icon name="mail" /></button>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Assessments</h1>
+          <p className="page-sub">Coding tests, take-homes, and evaluations</p>
+        </div>
+        <div className="page-head-actions">
+          <button className="btn btn-primary" onClick={() => setAssigning(true)}>
+            <Icon name="plus" /> Assign Assessment
+          </button>
+        </div>
+      </div>
+
+      <div className="grid g-kpi mb-18">
+        <KpiCard label="Total Assigned" value={stats.total} icon="file" tone="i-indigo" />
+        <KpiCard label="Completed" value={stats.completed} icon="check-circle" tone="i-green" />
+        <KpiCard label="In Progress / Pending" value={stats.pending} icon="clock" tone="i-amber" />
+        <KpiCard label="Average Score" value={`${stats.avg}%`} icon="target" tone="i-teal" />
+      </div>
+
+      <div className="card">
+        <div className="card-body" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="toolbar-search">
+              <Icon name="search" />
+              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search candidate or assessment…" />
+            </div>
+            <select className="select" value={status} onChange={(e) => setStatus(e.target.value)}>
+              <option value="">All Status</option>
+              {['Completed', 'In Progress', 'Pending', 'Expired'].map((s) => <option key={s}>{s}</option>)}
+            </select>
+            <select className="select" value={type} onChange={(e) => setType(e.target.value)}>
+              <option value="">All Types</option>
+              {types.map((t) => <option key={t}>{t}</option>)}
+            </select>
+          </div>
+        </div>
+        <DataTable columns={columns} rows={rows} pageSize={8} />
+      </div>
+
+      {viewing && (
+        <Modal
+          title="Assessment Result"
+          subtitle={viewing.id}
+          onClose={() => setViewing(null)}
+          footer={
+            <>
+              <button className="btn btn-secondary" onClick={() => setViewing(null)}>Close</button>
+              <button
+                className="btn btn-primary"
+                onClick={() => {
+                  const id = viewing.candidateId
+                  setViewing(null)
+                  navigate('/candidates', { state: { openCandidate: id } })
+                }}
+              >
+                View Candidate
+              </button>
+            </>
+          }
+        >
+          <div className="flex items-center gap-12 mb-18">
+            <Avatar name={viewing.candidate} initials={viewing.initials} color={viewing.color} className="avatar-lg" />
+            <div>
+              <div className="ph-name" style={{ fontSize: 17 }}>{viewing.candidate}</div>
+              <div className="ph-role">{viewing.type} · {viewing.jobTitle}</div>
+            </div>
+            <div style={{ marginLeft: 'auto' }}><Badge>{viewing.status}</Badge></div>
+          </div>
+
+          <div className="info-grid mb-18">
+            <div className="info-item"><div className="il">Type</div><div className="iv">{viewing.type}</div></div>
+            <div className="info-item"><div className="il">Duration</div><div className="iv">{viewing.duration}</div></div>
+            <div className="info-item"><div className="il">Assigned</div><div className="iv">{fmtDate(viewing.assigned)}</div></div>
+            <div className="info-item"><div className="il">Due</div><div className="iv">{fmtDate(viewing.due)}</div></div>
+          </div>
+
+          {viewing.score !== null ? (
+            <>
+              <div className="divider" />
+              <div style={{ textAlign: 'center', padding: '10px 0' }}>
+                <div
+                  style={{
+                    fontSize: 44, fontWeight: 800, letterSpacing: -1,
+                    color: viewing.score >= 70 ? 'var(--success)' : 'var(--warning)',
+                  }}
+                >
+                  {viewing.score}%
+                </div>
+                <div className="text-muted">Overall Score</div>
+              </div>
+              <div className="mb-18"><ProgressBar pct={viewing.score} /></div>
+              <div className="form-section-title" style={{ marginTop: 0 }}>Section Breakdown</div>
+              {sectionScores.map((s) => (
+                <div className="flex items-center gap-12" style={{ marginBottom: 10 }} key={s.label}>
+                  <span style={{ width: 130, fontSize: 13 }}>{s.label}</span>
+                  <div style={{ flex: 1 }}><ProgressBar pct={s.score} /></div>
+                  <b style={{ width: 40, textAlign: 'right' }}>{s.score}%</b>
+                </div>
+              ))}
+            </>
+          ) : (
+            <div className="empty-state">
+              <Icon name="clock" />
+              <h3>Assessment not completed</h3>
+              <p>Results will appear once the candidate submits.</p>
+            </div>
+          )}
+        </Modal>
+      )}
+
+      {assigning && (
+        <Modal
+          title="Assign Assessment"
+          subtitle="Send an evaluation to a candidate"
+          onClose={() => setAssigning(false)}
+          footer={
+            <>
+              <button className="btn btn-secondary" onClick={() => setAssigning(false)}>Cancel</button>
+              <button
+                className="btn btn-primary"
+                onClick={() => {
+                  setAssigning(false)
+                  toast('Assessment assigned & invite sent', 'success')
+                }}
+              >
+                <Icon name="send" /> Assign
+              </button>
+            </>
+          }
+        >
+          <form>
+            <div className="form-grid">
+              <div className="form-field col-span-2">
+                <label>Candidate</label>
+                <select>{allCandidates.slice(0, 40).map((c) => <option key={c.id}>{c.name}</option>)}</select>
+              </div>
+              <div className="form-field">
+                <label>Assessment Type</label>
+                <select>{types.map((t) => <option key={t}>{t}</option>)}</select>
+              </div>
+              <div className="form-field">
+                <label>Time Limit</label>
+                <select><option>45 min</option><option>60 min</option><option>90 min</option><option>3 days</option></select>
+              </div>
+              <div className="form-field col-span-2">
+                <label>Due Date</label>
+                <input type="date" />
+              </div>
+            </div>
+          </form>
+        </Modal>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/screens/Calendar.jsx b/frontend/src/screens/Calendar.jsx
new file mode 100644
index 0000000..42bdb66
--- /dev/null
+++ b/frontend/src/screens/Calendar.jsx
@@ -0,0 +1,149 @@
+import { useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import { Avatar, Icon } from '../ui/primitives'
+import { seedQuery } from '../data/seedQueries'
+import { TODAY } from '../data/seed'
+
+const EVENT_COLORS = {
+  'Phone Screen': 'b-blue', Technical: 'b-indigo', 'System Design': 'b-purple',
+  'Onsite Loop': 'b-teal', 'Hiring Manager': 'b-amber', 'Culture Fit': 'b-green',
+  'Final Round': 'b-red',
+}
+const DOW = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+/** The prototype's hand-built month grid, unchanged in behaviour. */
+function buildCells(year, month) {
+  const startDow = new Date(year, month, 1).getDay()
+  const daysInMonth = new Date(year, month + 1, 0).getDate()
+  const prevDays = new Date(year, month, 0).getDate()
+  const cells = []
+  for (let i = startDow - 1; i >= 0; i--) cells.push({ day: prevDays - i, other: true })
+  for (let d = 1; d <= daysInMonth; d++) cells.push({ day: d, other: false, date: new Date(year, month, d) })
+  while (cells.length % 7 !== 0 || cells.length < 42) {
+    cells.push({ day: cells.length - daysInMonth - startDow + 1, other: true })
+  }
+  return cells.slice(0, 42)
+}
+
+export default function Calendar() {
+  const navigate = useNavigate()
+  const { data: interviews = [] } = useQuery(seedQuery('interviews'))
+  const [{ year, month }, setView] = useState({ year: TODAY.getFullYear(), month: TODAY.getMonth() })
+
+  const cells = useMemo(() => buildCells(year, month), [year, month])
+  const monthName = new Date(year, month).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+  const todayKey = TODAY.toDateString()
+  const todayIvs = interviews.filter((iv) => iv.when.toDateString() === todayKey)
+
+  const step = (delta) =>
+    setView(({ year: y, month: m }) => {
+      const next = m + delta
+      if (next < 0) return { year: y - 1, month: 11 }
+      if (next > 11) return { year: y + 1, month: 0 }
+      return { year: y, month: next }
+    })
+
+  const openCandidate = (id) => navigate('/candidates', { state: { openCandidate: id } })
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Calendar</h1>
+          <p className="page-sub">Interview schedule at a glance</p>
+        </div>
+        <div className="page-head-actions">
+          <div className="flex items-center gap-8">
+            <button className="btn btn-icon btn-secondary" onClick={() => step(-1)} aria-label="Previous month">
+              <Icon name="chevron-left" />
+            </button>
+            <span className="fw-600" style={{ minWidth: 140, textAlign: 'center' }}>{monthName}</span>
+            <button className="btn btn-icon btn-secondary" onClick={() => step(1)} aria-label="Next month">
+              <Icon name="chevron-right" />
+            </button>
+          </div>
+          <button
+            className="btn btn-primary"
+            onClick={() => navigate('/interviews', { state: { openSchedule: true } })}
+          >
+            <Icon name="plus" /> Schedule
+          </button>
+        </div>
+      </div>
+
+      <div className="grid g-2-1">
+        <div className="card">
+          <div className="card-body">
+            <div className="cal-grid">
+              {DOW.map((d) => <div className="cal-dow" key={d}>{d}</div>)}
+              {cells.map((c, i) => {
+                const dayEvents = !c.other && c.date
+                  ? interviews.filter((iv) => iv.when.toDateString() === c.date.toDateString())
+                  : []
+                const isToday = !c.other && c.date && c.date.toDateString() === todayKey
+                return (
+                  <div className={`cal-cell ${c.other ? 'other' : ''} ${isToday ? 'today' : ''}`} key={i}>
+                    <div className="cal-date">{c.day}</div>
+                    {dayEvents.slice(0, 3).map((iv) => (
+                      <div
+                        key={iv.id}
+                        className={`cal-event ${EVENT_COLORS[iv.type] || 'b-blue'}`}
+                        title={`${iv.candidate} · ${iv.type}`}
+                        onClick={() => openCandidate(iv.candidateId)}
+                      >
+                        {iv.when.toLocaleTimeString('en-US', { hour: 'numeric' })} {iv.candidate.split(' ')[0]}
+                      </div>
+                    ))}
+                    {dayEvents.length > 3 && (
+                      <div className="cal-event b-gray">+{dayEvents.length - 3} more</div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+
+        <div className="card" style={{ alignSelf: 'start' }}>
+          <div className="card-head">
+            <div>
+              <h3>Today</h3>
+              <span className="ch-sub">
+                {TODAY.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
+              </span>
+            </div>
+          </div>
+          <div className="card-body">
+            <div className="list-tight">
+              {todayIvs.length === 0 ? (
+                <p className="text-muted">No interviews today</p>
+              ) : (
+                todayIvs.map((iv) => (
+                  <div
+                    key={iv.id}
+                    className="list-row"
+                    style={{ cursor: 'pointer' }}
+                    onClick={() => openCandidate(iv.candidateId)}
+                  >
+                    <Avatar name={iv.candidate} initials={iv.candInitials} color={iv.color} />
+                    <div className="lr-main">
+                      <div className="lr-title">{iv.candidate}</div>
+                      <div className="lr-sub">{iv.type}</div>
+                    </div>
+                    <div className="lr-right">
+                      <div className="fw-600 text-sm">
+                        {iv.when.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}
+                      </div>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/screens/CandidateProfile.jsx b/frontend/src/screens/CandidateProfile.jsx
new file mode 100644
index 0000000..cf837a9
--- /dev/null
+++ b/frontend/src/screens/CandidateProfile.jsx
@@ -0,0 +1,277 @@
+/* The 8-tab candidate profile modal, split out of Candidates.jsx — it was the
+   single largest block in js/candidates.js and deserves its own file. */
+
+import { useMemo, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+
+import Modal from '../ui/Modal'
+import { Tabs } from '../ui/Tabs'
+import { Avatar, Badge, EmptyState, Icon, ScoreChip } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { seedQuery } from '../data/seedQueries'
+import { companies, fmtDate, moneyK, pick } from '../data/seed'
+
+const TABS = ['Overview', 'Resume', 'Timeline', 'Interview', 'Notes', 'Activity', 'Documents', 'Feedback']
+const LABEL = { fontSize: 12, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', marginBottom: 8 }
+
+export default function CandidateProfile({ candidate: c, onClose, onAdvance, onToggleFav, onAtsMatch }) {
+  const { toast } = useToast()
+  const [tab, setTab] = useState('Overview')
+  const { data: interviews = [] } = useQuery(seedQuery('interviews'))
+  const { data: recruiters = [] } = useQuery(seedQuery('recruiters'))
+
+  // The prototype called DB.pick() inline while rendering, so the "previous
+  // employer" changed every repaint. Fixed per candidate.
+  const priorCompany = useMemo(() => pick(companies), [])
+
+  const candidateInterviews = interviews.filter((i) => i.candidateId === c.id)
+
+  return (
+    <Modal
+      title="Candidate Profile"
+      subtitle={c.id}
+      size="modal-lg"
+      onClose={onClose}
+      footer={
+        <>
+          <button
+            className={`btn btn-ghost star-btn${c.favorite ? ' on' : ''}`}
+            style={{ marginRight: 'auto' }}
+            onClick={() => onToggleFav(c)}
+          >
+            <Icon name="star" /> {c.favorite ? 'Favorited' : 'Favorite'}
+          </button>
+          <button className="btn btn-secondary" onClick={() => onAtsMatch(c)}>
+            <Icon name="target" /> ATS Match
+          </button>
+          <button className="btn btn-secondary" onClick={() => toast('Email drafted', 'info')}>
+            <Icon name="mail" /> Message
+          </button>
+          <button className="btn btn-primary" onClick={() => { onAdvance(c); onClose() }}>
+            <Icon name="check" /> Advance Stage
+          </button>
+        </>
+      }
+    >
+      <div className="profile-hero">
+        <Avatar name={c.name} initials={c.initials} color={c.color} className="avatar-lg" />
+        <div style={{ flex: 1 }}>
+          <div className="ph-name">{c.name}</div>
+          <div className="ph-role">{c.currentTitle} at {c.currentCompany}</div>
+          <div className="ph-tags">
+            <Badge>{c.stage}</Badge> <Badge className="b-gray">{c.source}</Badge>
+            <span className="badge b-plain b-indigo badge-plain">{c.experience} yrs exp</span>
+          </div>
+        </div>
+        <div style={{ textAlign: 'center' }}>
+          <ScoreChip score={c.aiScore} />
+          <div className="cell-sub" style={{ marginTop: 4 }}>AI Match</div>
+        </div>
+      </div>
+
+      <div style={{ marginTop: 22 }}>
+        <Tabs value={tab} onChange={setTab} tabs={TABS.map((t) => ({ key: t, label: t }))} />
+      </div>
+
+      <div className="tab-pane active">
+        {tab === 'Overview' && (
+          <>
+            <div className="info-grid" style={{ marginBottom: 20 }}>
+              <div className="info-item"><div className="il">Email</div><div className="iv">{c.email}</div></div>
+              <div className="info-item"><div className="il">Phone</div><div className="iv">{c.phone}</div></div>
+              <div className="info-item"><div className="il">Location</div><div className="iv">{c.location}</div></div>
+              <div className="info-item"><div className="il">Applied For</div><div className="iv">{c.jobTitle}</div></div>
+              <div className="info-item"><div className="il">Current Company</div><div className="iv">{c.currentCompany}</div></div>
+              <div className="info-item"><div className="il">Experience</div><div className="iv">{c.experience} years</div></div>
+              <div className="info-item"><div className="il">Education</div><div className="iv">{c.education}</div></div>
+              <div className="info-item"><div className="il">Source</div><div className="iv">{c.source}</div></div>
+              <div className="info-item"><div className="il">Recruiter</div><div className="iv">{c.recruiter}</div></div>
+              <div className="info-item"><div className="il">Applied On</div><div className="iv">{fmtDate(c.applied)}</div></div>
+              <div className="info-item"><div className="il">Expected Salary</div><div className="iv">{moneyK(c.salary)}</div></div>
+              <div className="info-item"><div className="il">Rating</div><div className="iv">⭐ {c.rating} / 5.0</div></div>
+            </div>
+            <div style={LABEL}>Skills</div>
+            <div className="k-tags">{c.skills.map((s) => <span className="tag" key={s}>{s}</span>)}</div>
+          </>
+        )}
+
+        {tab === 'Resume' && (
+          <>
+            <div className="card" style={{ boxShadow: 'none', background: 'var(--bg-sunken)' }}>
+              <div className="card-body">
+                <h3 style={{ marginBottom: 4 }}>{c.name}</h3>
+                <p className="text-muted">{c.currentTitle} · {c.location}</p>
+                <div className="divider" />
+                <div className="form-section-title" style={{ marginTop: 0 }}>Summary</div>
+                <p className="text-muted">
+                  Results-driven {c.currentTitle.toLowerCase()} with {c.experience} years of experience
+                  across {c.department.toLowerCase()}. Passionate about building high-quality products
+                  and collaborating with cross-functional teams.
+                </p>
+                <div className="form-section-title">Experience</div>
+                <div className="info-item">
+                  <div className="iv">{c.currentTitle} — {c.currentCompany}</div>
+                  <div className="il" style={{ textTransform: 'none' }}>2021 – Present</div>
+                </div>
+                <div className="info-item" style={{ marginTop: 10 }}>
+                  <div className="iv">Associate — {priorCompany}</div>
+                  <div className="il" style={{ textTransform: 'none' }}>2018 – 2021</div>
+                </div>
+                <div className="form-section-title">Education</div>
+                <div className="iv">{c.education}</div>
+              </div>
+            </div>
+            <button className="btn btn-secondary" style={{ marginTop: 14 }} onClick={() => toast('Downloading resume.pdf', 'info')}>
+              <Icon name="download" /> Download PDF
+            </button>
+          </>
+        )}
+
+        {tab === 'Timeline' && (
+          <div className="timeline">
+            {[
+              { icon: 'user-plus', title: 'Application received', meta: fmtDate(c.applied), desc: `Applied via ${c.source}` },
+              { icon: 'star', title: 'AI screening completed', meta: '1 day later', desc: `Match score: ${c.aiScore}%` },
+              { icon: 'phone', title: 'Recruiter screen', meta: '3 days later', desc: `Call with ${c.recruiter}` },
+              { icon: 'calendar', title: 'Technical interview', meta: '1 week later', desc: 'Panel of 3 interviewers' },
+              { icon: 'check', title: `Moved to ${c.stage}`, meta: 'Recently', desc: 'Current stage in pipeline' },
+            ].map((e) => (
+              <div className="tl-item" key={e.title}>
+                <div className="tl-dot"><Icon name={e.icon} /></div>
+                <div className="tl-title">{e.title}</div>
+                <div className="tl-meta">{e.meta}</div>
+                <div className="tl-desc">{e.desc}</div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {tab === 'Interview' && (
+          candidateInterviews.length ? (
+            <div className="list-tight">
+              {candidateInterviews.map((iv) => (
+                <div className="list-row" key={iv.id}>
+                  <span className="kpi-icn i-blue" style={{ width: 38, height: 38, borderRadius: 10 }}>
+                    <Icon name="calendar" />
+                  </span>
+                  <div className="lr-main">
+                    <div className="lr-title">{iv.type}</div>
+                    <div className="lr-sub">{fmtDate(iv.when)} · {iv.meeting}</div>
+                  </div>
+                  <div className="lr-right"><Badge>{iv.status}</Badge></div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <EmptyState icon="calendar" title="No interviews scheduled">
+              Schedule an interview to get started.
+            </EmptyState>
+          )
+        )}
+
+        {tab === 'Notes' && (
+          <>
+            <div className="form-field">
+              <label>Add a note</label>
+              <textarea placeholder="Write a private note about this candidate…" />
+            </div>
+            <button className="btn btn-primary btn-sm" style={{ margin: '10px 0 18px' }} onClick={() => toast('Note saved', 'success')}>
+              <Icon name="plus" /> Add Note
+            </button>
+            <div className="list-tight">
+              <div className="list-row">
+                <Avatar name={c.recruiter} />
+                <div className="lr-main">
+                  <div className="lr-title">{c.recruiter}</div>
+                  <div className="lr-sub" style={{ color: 'var(--text-2)' }}>
+                    Strong communication skills, great culture fit. Recommend advancing.
+                  </div>
+                  <div className="lr-sub">2 days ago</div>
+                </div>
+              </div>
+              <div className="list-row">
+                <Avatar name="Asfand Ahmed" initials="AA" />
+                <div className="lr-main">
+                  <div className="lr-title">Asfand Ahmed</div>
+                  <div className="lr-sub" style={{ color: 'var(--text-2)' }}>
+                    Reviewed portfolio — impressive work. Schedule technical round.
+                  </div>
+                  <div className="lr-sub">4 days ago</div>
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+
+        {tab === 'Activity' && (
+          <div className="list-tight">
+            {[
+              { icon: 'eye', tone: 'i-green', text: `Profile viewed by ${c.recruiter}`, when: '1h ago' },
+              { icon: 'mail', tone: 'i-blue', text: 'Email sent: Interview invitation', when: '1 day ago' },
+              { icon: 'star', tone: 'i-amber', text: `Assessment score updated to ${c.aiScore}%`, when: '2 days ago' },
+              { icon: 'user-plus', tone: 'i-purple', text: `Applied for ${c.jobTitle}`, when: fmtDate(c.applied) },
+            ].map((a) => (
+              <div className="list-row" key={a.text}>
+                <span className={`kpi-icn ${a.tone}`} style={{ width: 34, height: 34, borderRadius: 9 }}>
+                  <Icon name={a.icon} />
+                </span>
+                <div className="lr-main">
+                  <div className="lr-sub" style={{ color: 'var(--text-2)', fontSize: 13 }}>{a.text}</div>
+                  <div className="lr-sub">{a.when}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {tab === 'Documents' && (
+          <div className="list-tight">
+            {[
+              { n: 'Resume.pdf', s: '284 KB' }, { n: 'Cover_Letter.pdf', s: '112 KB' },
+              { n: 'Portfolio.pdf', s: '4.2 MB' }, { n: 'References.docx', s: '48 KB' },
+            ].map((d) => (
+              <div className="list-row" key={d.n}>
+                <span className="kpi-icn i-red" style={{ width: 38, height: 38, borderRadius: 10 }}>
+                  <Icon name="file" />
+                </span>
+                <div className="lr-main"><div className="lr-title">{d.n}</div><div className="lr-sub">{d.s}</div></div>
+                <button className="act-btn" onClick={() => toast(`Downloading ${d.n}`, 'info')}>
+                  <Icon name="download" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {tab === 'Feedback' && (
+          <>
+            <div className="list-tight">
+              {['Strong Hire', 'Hire', 'Lean Hire'].map((score, i) => {
+                const r = recruiters[i]
+                if (!r) return null
+                const notes = [
+                  'Excellent technical depth and clear communication.',
+                  'Good problem solving, would benefit from more system design exposure.',
+                  'Solid candidate, positive team energy.',
+                ]
+                return (
+                  <div className="list-row" key={score}>
+                    <Avatar name={r.name} initials={r.initials} color={r.color} />
+                    <div className="lr-main">
+                      <div className="lr-title">{r.name}</div>
+                      <div className="lr-sub" style={{ color: 'var(--text-2)' }}>{notes[i]}</div>
+                    </div>
+                    <div className="lr-right"><Badge>{score}</Badge></div>
+                  </div>
+                )
+              })}
+            </div>
+            <button className="btn btn-primary btn-sm" style={{ marginTop: 14 }} onClick={() => toast('Scorecard form opened', 'info')}>
+              <Icon name="plus" /> Submit Scorecard
+            </button>
+          </>
+        )}
+      </div>
+    </Modal>
+  )
+}
diff --git a/frontend/src/screens/Candidates.jsx b/frontend/src/screens/Candidates.jsx
new file mode 100644
index 0000000..047b1bb
--- /dev/null
+++ b/frontend/src/screens/Candidates.jsx
@@ -0,0 +1,660 @@
+/* ============================================================
+   Candidates — the largest screen in the app: a 14-facet filter panel, a
+   composite relevance sort, a multi-select bulk bar, favourites, a
+   recently-viewed strip, the ATS-match modal and the 8-tab profile
+   (CandidateProfile.jsx).
+
+   Uses the headless `useDataTable` rather than <DataTable/>, because the
+   selection column needs to render against a Set this component owns.
+   ============================================================ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import Modal from '../ui/Modal'
+import { Pagination, useDataTable } from '../ui/DataTable'
+import { Avatar, Badge, EmptyState, FieldError, Icon, ProgressBar, ScoreChip } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { useFormState } from '../components/AuthLayout'
+import CandidateProfile from './CandidateProfile'
+import { qk } from '../lib/queryKeys'
+import { persist, seedQuery, useSeedMutation } from '../data/seedQueries'
+import {
+  atsRecommendationClass, avatarColor, departments, educationLevels, getJob,
+  initials as initialsOf, int, locations, skillsPool, sources, stages, TODAY,
+} from '../data/seed'
+
+const STAGE_ORDER = ['Applied', 'Screening', 'Assessment', 'Interview', 'Offer', 'Hired']
+const EXP_BUCKETS = ['0-2', '3-5', '6-9', '10+']
+const ATS_BANDS = ['85+', '70-84', '<70']
+const INTERVIEW_STATES = ['Not Scheduled', 'Scheduled', 'Completed']
+const NOTICE = ['Immediate', '2 weeks', '1 month', '2 months', '3 months']
+const AVAILABILITY = ['Immediate', '2 weeks', '1 month', 'Passive']
+
+const EMPTY_FILTERS = {
+  job: '', skill: '', dept: '', location: '', exp: '', edu: '', recruiter: '',
+  manager: '', source: '', ats: '', stage: '', interview: '', notice: '', availability: '',
+}
+
+export default function Candidates() {
+  const { toast } = useToast()
+  const qc = useQueryClient()
+  const location = useLocation()
+
+  const { data: candidates = [] } = useQuery(seedQuery('candidates'))
+  const { data: recruiters = [] } = useQuery(seedQuery('recruiters'))
+  const { data: managers = [] } = useQuery(seedQuery('managers'))
+  const { data: jobs = [] } = useQuery(seedQuery('jobs'))
+  const { data: recentlyViewed = [] } = useQuery({
+    queryKey: qk.seed.recentlyViewed(),
+    queryFn: async () => [],
+    staleTime: Infinity,
+    gcTime: Infinity,
+  })
+  const updateCandidates = useSeedMutation('candidates')
+
+  const [q, setQ] = useState('')
+  const [filters, setFilters] = useState(EMPTY_FILTERS)
+  const [showFilters, setShowFilters] = useState(false)
+  const [sortMode, setSortMode] = useState('relevance')
+  const [selected, setSelected] = useState(() => new Set())
+  const [profileFor, setProfileFor] = useState(null)
+  const [atsFor, setAtsFor] = useState(null)
+  const [adding, setAdding] = useState(false)
+  const [bulkAssigning, setBulkAssigning] = useState(false)
+
+  /** ATS + matched-skill ratio + recency. Verbatim from js/candidates.js:14-20. */
+  const relevance = useCallback((c) => {
+    const req = (getJob(c.jobId) || {}).skills || []
+    const skillRatio = req.length ? c.matchedSkills.length / req.length : 0.5
+    const recency = 1 - Math.min(1, (TODAY - c.applied) / (90 * 864e5))
+    return Math.round(c.aiScore * 0.7 + skillRatio * 20 + recency * 10)
+  }, [])
+
+  const openProfile = useCallback(
+    (c) => {
+      setProfileFor(c)
+      qc.setQueryData(qk.seed.recentlyViewed(), (old = []) => {
+        const next = [c.id, ...old.filter((id) => id !== c.id)].slice(0, 12)
+        persist('tf-recent', next)
+        return next
+      })
+    },
+    [qc],
+  )
+
+  // Deep links from global search, dashboard, pipeline, calendar, interviews…
+  useEffect(() => {
+    const st = location.state
+    if (!st) return
+    if (st.openAdd) setAdding(true)
+    if (st.openCandidate) {
+      const c = candidates.find((x) => x.id === st.openCandidate)
+      if (c) openProfile(c)
+    }
+  }, [location.state, candidates, openProfile])
+
+  const jobTitles = useMemo(() => [...new Set(candidates.map((c) => c.jobTitle))], [candidates])
+
+  const rows = useMemo(() => {
+    const f = filters
+    let list = candidates.filter((c) => {
+      if (f.job && c.jobTitle !== f.job) return false
+      if (f.skill && !c.skills.includes(f.skill)) return false
+      if (f.dept && c.department !== f.dept) return false
+      if (f.location && c.location !== f.location) return false
+      if (f.exp === '0-2' && c.experience > 2) return false
+      if (f.exp === '3-5' && (c.experience < 3 || c.experience > 5)) return false
+      if (f.exp === '6-9' && (c.experience < 6 || c.experience > 9)) return false
+      if (f.exp === '10+' && c.experience < 10) return false
+      if (f.edu && c.education !== f.edu) return false
+      if (f.recruiter && c.recruiter !== f.recruiter) return false
+      if (f.manager) {
+        const job = getJob(c.jobId)
+        if (!job || job.manager !== f.manager) return false
+      }
+      if (f.source && c.source !== f.source) return false
+      if (f.ats === '85+' && c.aiScore < 85) return false
+      if (f.ats === '70-84' && (c.aiScore < 70 || c.aiScore > 84)) return false
+      if (f.ats === '<70' && c.aiScore >= 70) return false
+      if (f.stage && c.stage !== f.stage) return false
+      if (f.interview && c.interviewStatus !== f.interview) return false
+      if (f.notice && c.noticePeriod !== f.notice) return false
+      if (f.availability && c.availability !== f.availability) return false
+      if (q) {
+        const term = q.toLowerCase()
+        const hay = (c.name + c.email + c.jobTitle + c.currentCompany + c.recruiter + c.skills.join(' ')).toLowerCase()
+        if (!hay.includes(term)) return false
+      }
+      return true
+    })
+
+    if (sortMode === 'relevance') list = [...list].sort((a, b) => relevance(b) - relevance(a))
+    else if (sortMode === 'ats') list = [...list].sort((a, b) => b.aiScore - a.aiScore)
+    else if (sortMode === 'recent') list = [...list].sort((a, b) => b.applied - a.applied)
+    else if (sortMode === 'name') list = [...list].sort((a, b) => a.name.localeCompare(b.name))
+    return list
+  }, [candidates, filters, q, sortMode, relevance])
+
+  const columns = useMemo(
+    () => [
+      { key: '_sel', label: '' },
+      { key: 'name', label: 'Candidate', sortable: true },
+      { key: 'jobTitle', label: 'Applied Job', sortable: true },
+      { key: 'experience', label: 'Exp', sortable: true, align: 'center' },
+      { key: '_rel', label: 'Relevance', sortable: true, align: 'center', sortValue: relevance },
+      { key: 'stage', label: 'Stage', sortable: true },
+      { key: 'aiScore', label: 'ATS', sortable: true, align: 'center' },
+      { key: 'availability', label: 'Availability' },
+      { key: '_a', label: 'Actions', align: 'right' },
+    ],
+    [relevance],
+  )
+
+  const t = useDataTable({ columns, rows, pageSize: 10 })
+
+  function toggleSelect(id) {
+    setSelected((s) => {
+      const next = new Set(s)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  function toggleFav(c) {
+    updateCandidates((cs) => cs.map((x) => (x.id === c.id ? { ...x, favorite: !x.favorite } : x)))
+    setProfileFor((p) => (p && p.id === c.id ? { ...p, favorite: !p.favorite } : p))
+    toast(c.favorite ? 'Removed from favorites' : `${c.name} added to favorites`, 'success')
+  }
+
+  function advance(c) {
+    const i = STAGE_ORDER.indexOf(c.stage)
+    if (i === -1 || i >= STAGE_ORDER.length - 1) {
+      toast(`${c.name} cannot be advanced further`, 'warning')
+      return
+    }
+    const stage = STAGE_ORDER[i + 1]
+    updateCandidates((cs) => cs.map((x) => (x.id === c.id ? { ...x, stage, status: stage } : x)))
+    toast(`${c.name} moved to ${stage}`, 'success')
+  }
+
+  function bulk(action) {
+    const ids = [...selected]
+    if (!ids.length) return
+    if (action === 'email') {
+      toast(`Bulk email drafted to ${ids.length} candidates`, 'success')
+      setSelected(new Set())
+      return
+    }
+    if (action === 'assign') {
+      setBulkAssigning(true)
+      return
+    }
+    if (action === 'advance') {
+      updateCandidates((cs) =>
+        cs.map((c) => {
+          if (!selected.has(c.id)) return c
+          const i = STAGE_ORDER.indexOf(c.stage)
+          if (i === -1 || i >= STAGE_ORDER.length - 1) return c
+          const stage = STAGE_ORDER[i + 1]
+          return { ...c, stage, status: stage }
+        }),
+      )
+      toast(`${ids.length} candidates advanced`, 'success')
+    }
+    if (action === 'reject') {
+      updateCandidates((cs) =>
+        cs.map((c) => (selected.has(c.id) ? { ...c, stage: 'Rejected', status: 'Rejected' } : c)),
+      )
+      toast(`${ids.length} candidates rejected`, 'warning')
+    }
+    setSelected(new Set())
+  }
+
+  const recentChips = recentlyViewed
+    .slice(0, 6)
+    .map((id) => candidates.find((c) => c.id === id))
+    .filter(Boolean)
+
+  const setFilter = (k, v) => setFilters((f) => ({ ...f, [k]: v }))
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Candidates</h1>
+          <p className="page-sub">
+            {rows.length} candidate{rows.length === 1 ? '' : 's'} · ranked by AI relevance
+          </p>
+        </div>
+        <div className="page-head-actions">
+          <button className="btn btn-secondary" onClick={() => toast('Search saved', 'success')}>
+            <Icon name="bookmark" /> Save Search
+          </button>
+          <button className="btn btn-secondary" onClick={() => toast('Candidates exported', 'success')}>
+            <Icon name="download" /> Export
+          </button>
+          <button className="btn btn-primary" onClick={() => setAdding(true)}>
+            <Icon name="plus" /> Add Candidate
+          </button>
+        </div>
+      </div>
+
+      {recentChips.length > 0 && (
+        <div className="flex items-center gap-8" style={{ marginBottom: 14, flexWrap: 'wrap' }}>
+          <span className="text-muted text-sm fw-600">Recently viewed:</span>
+          {recentChips.map((c) => (
+            <button key={c.id} className="prompt-chip" style={{ padding: '5px 10px' }} onClick={() => openProfile(c)}>
+              <Avatar name={c.name} initials={c.initials} color={c.color} /> {c.name.split(' ')[0]}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {selected.size > 0 && (
+        <div className="bulk-bar" style={{ display: 'flex' }}>
+          <span className="checkbox on"><Icon name="check" /></span>
+          <span className="fw-600">{selected.size} selected</span>
+          <div style={{ flex: 1 }} />
+          <button className="btn btn-sm" onClick={() => bulk('email')}><Icon name="mail" /> Bulk Email</button>
+          <button className="btn btn-sm" onClick={() => bulk('assign')}><Icon name="users" /> Assign</button>
+          <button className="btn btn-sm" onClick={() => bulk('advance')}><Icon name="check" /> Advance</button>
+          <button className="btn btn-sm" onClick={() => bulk('reject')}><Icon name="x" /> Reject</button>
+          <button className="btn btn-sm" onClick={() => setSelected(new Set())}><Icon name="x" /> Clear</button>
+        </div>
+      )}
+
+      <div className="card">
+        <div className="card-body" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="toolbar-search">
+              <Icon name="search" />
+              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search name, skill, company…" />
+            </div>
+            <button className="btn btn-secondary" onClick={() => setShowFilters((s) => !s)}>
+              <Icon name="filter" /> Filters
+            </button>
+            <div className="spacer" />
+            <label className="text-muted text-sm">Sort:</label>
+            <select className="select" value={sortMode} onChange={(e) => setSortMode(e.target.value)}>
+              <option value="relevance">AI Relevance</option>
+              <option value="ats">ATS Score</option>
+              <option value="recent">Most Recent</option>
+              <option value="name">Name A–Z</option>
+            </select>
+          </div>
+
+          {showFilters && (
+            <div
+              className="filter-panel"
+              style={{ display: 'grid', padding: '16px 0', borderTop: '1px solid var(--border)', marginTop: 12 }}
+            >
+              <Facet label="Job" value={filters.job} onChange={(v) => setFilter('job', v)} any="Any Job" options={jobTitles} />
+              <Facet label="Skill" value={filters.skill} onChange={(v) => setFilter('skill', v)} any="Any Skill" options={skillsPool} />
+              <Facet label="Department" value={filters.dept} onChange={(v) => setFilter('dept', v)} any="Any Dept" options={departments} />
+              <Facet label="Location" value={filters.location} onChange={(v) => setFilter('location', v)} any="Any Location" options={locations} />
+              <Facet label="Experience" value={filters.exp} onChange={(v) => setFilter('exp', v)} any="Any Exp" options={EXP_BUCKETS} />
+              <Facet label="Education" value={filters.edu} onChange={(v) => setFilter('edu', v)} any="Any" options={educationLevels} />
+              <Facet label="Recruiter" value={filters.recruiter} onChange={(v) => setFilter('recruiter', v)} any="Any Recruiter" options={recruiters.map((r) => r.name)} />
+              <Facet label="Hiring Manager" value={filters.manager} onChange={(v) => setFilter('manager', v)} any="Any Manager" options={managers.map((m) => m.name)} />
+              <Facet label="Source" value={filters.source} onChange={(v) => setFilter('source', v)} any="Any Source" options={sources} />
+              <Facet label="ATS Score" value={filters.ats} onChange={(v) => setFilter('ats', v)} any="Any Score" options={ATS_BANDS} />
+              <Facet label="Pipeline Stage" value={filters.stage} onChange={(v) => setFilter('stage', v)} any="Any Stage" options={stages} />
+              <Facet label="Interview Status" value={filters.interview} onChange={(v) => setFilter('interview', v)} any="Any" options={INTERVIEW_STATES} />
+              <Facet label="Notice Period" value={filters.notice} onChange={(v) => setFilter('notice', v)} any="Any" options={NOTICE} />
+              <Facet label="Availability" value={filters.availability} onChange={(v) => setFilter('availability', v)} any="Any" options={AVAILABILITY} />
+            </div>
+          )}
+        </div>
+
+        <div className="dt">
+          <div className="table-wrap">
+            <table className="data">
+              <thead>
+                <tr>
+                  {columns.map((c) => {
+                    const isSorted = t.sort.key === c.key
+                    const cls = [
+                      c.sortable ? 'sortable' : '',
+                      isSorted ? (t.sort.dir === 1 ? 'sorted-asc' : 'sorted-desc') : '',
+                    ].filter(Boolean).join(' ')
+                    return (
+                      <th
+                        key={c.key}
+                        className={cls}
+                        style={{ textAlign: c.align || 'left' }}
+                        onClick={c.sortable ? () => t.toggleSort(c.key) : undefined}
+                      >
+                        {c.label}
+                        {c.sortable && (
+                          <span className="sort-ind">{isSorted ? (t.sort.dir === 1 ? '▲' : '▼') : '⇅'}</span>
+                        )}
+                      </th>
+                    )
+                  })}
+                </tr>
+              </thead>
+              <tbody>
+                {t.pageRows.length === 0 ? (
+                  <tr><td colSpan={columns.length}><EmptyState /></td></tr>
+                ) : (
+                  t.pageRows.map((c) => (
+                    <tr key={c.id}>
+                      <td>
+                        <span
+                          className={`checkbox ${selected.has(c.id) ? 'on' : ''}`}
+                          onClick={() => toggleSelect(c.id)}
+                          role="checkbox"
+                          aria-checked={selected.has(c.id)}
+                          tabIndex={0}
+                          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleSelect(c.id) } }}
+                        >
+                          <Icon name="check" />
+                        </span>
+                      </td>
+                      <td>
+                        <div className="user-cell">
+                          <Avatar name={c.name} initials={c.initials} color={c.color} />
+                          <div>
+                            <div className="cell-primary">
+                              {c.name}{' '}
+                              {c.favorite && (
+                                <span className="star-btn on" style={{ display: 'inline' }}><Icon name="star" /></span>
+                              )}
+                            </div>
+                            <div className="cell-sub">{c.currentTitle} · {c.location}</div>
+                          </div>
+                        </div>
+                      </td>
+                      <td>
+                        <div className="text-sm">{c.jobTitle}</div>
+                        <div className="cell-sub">{c.department}</div>
+                      </td>
+                      <td style={{ textAlign: 'center' }}><b>{c.experience}</b>y</td>
+                      <td style={{ textAlign: 'center' }}>
+                        <span className={`badge ${atsRecommendationClass(c.recommendation)} badge-plain`}>
+                          {relevance(c)}%
+                        </span>
+                      </td>
+                      <td><Badge>{c.stage}</Badge></td>
+                      <td style={{ textAlign: 'center' }}>
+                        <span style={{ cursor: 'pointer' }} onClick={() => setAtsFor(c)}>
+                          <ScoreChip score={c.aiScore} />
+                        </span>
+                      </td>
+                      <td>
+                        <span className="text-sm">{c.availability}</span>
+                        <div className="cell-sub">{c.noticePeriod} notice</div>
+                      </td>
+                      <td style={{ textAlign: 'right' }}>
+                        <div className="row-actions">
+                          <button className={`act-btn star-btn ${c.favorite ? 'on' : ''}`} data-tip="Favorite" onClick={() => toggleFav(c)}>
+                            <Icon name="star" />
+                          </button>
+                          <button className="act-btn" data-tip="ATS Match" onClick={() => setAtsFor(c)}><Icon name="target" /></button>
+                          <button className="act-btn" data-tip="Profile" onClick={() => openProfile(c)}><Icon name="eye" /></button>
+                          <button className="act-btn" data-tip="Advance" onClick={() => advance(c)}><Icon name="check" /></button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+          <Pagination {...t} />
+        </div>
+      </div>
+
+      {atsFor && <AtsMatch candidate={atsFor} onClose={() => setAtsFor(null)} onProfile={(c) => { setAtsFor(null); openProfile(c) }} />}
+
+      {profileFor && (
+        <CandidateProfile
+          candidate={candidates.find((c) => c.id === profileFor.id) ?? profileFor}
+          onClose={() => setProfileFor(null)}
+          onAdvance={advance}
+          onToggleFav={toggleFav}
+          onAtsMatch={(c) => { setProfileFor(null); setAtsFor(c) }}
+        />
+      )}
+
+      {bulkAssigning && (
+        <BulkAssign
+          count={selected.size}
+          recruiters={recruiters}
+          onClose={() => setBulkAssigning(false)}
+          onSave={(name) => {
+            updateCandidates((cs) => cs.map((c) => (selected.has(c.id) ? { ...c, recruiter: name } : c)))
+            setBulkAssigning(false)
+            setSelected(new Set())
+            toast('Recruiter assigned to selected candidates', 'success')
+          }}
+        />
+      )}
+
+      {adding && (
+        <AddCandidate
+          jobs={jobs}
+          count={candidates.length}
+          onClose={() => setAdding(false)}
+          onSave={(c) => {
+            updateCandidates((cs) => [c, ...cs])
+            setAdding(false)
+            toast('Candidate added to pipeline', 'success')
+          }}
+          onInvalid={() => toast('Please fix the highlighted fields', 'error')}
+        />
+      )}
+    </div>
+  )
+}
+
+function Facet({ label, value, onChange, any, options }) {
+  return (
+    <div className="form-field">
+      <label>{label}</label>
+      <select value={value} onChange={(e) => onChange(e.target.value)}>
+        <option value="">{any}</option>
+        {options.map((o) => <option key={o}>{o}</option>)}
+      </select>
+    </div>
+  )
+}
+
+function AtsMatch({ candidate: c, onClose, onProfile }) {
+  const sub = c.subScores
+  const recCls = c.recommendation === 'Strong Match' ? 'recc-strong'
+    : c.recommendation === 'Potential Match' ? 'recc-potential' : 'recc-weak'
+  const ringColor = c.aiScore >= 82 ? 'var(--success)' : c.aiScore >= 65 ? 'var(--warning)' : 'var(--danger)'
+
+  const Row = ({ label, val }) => (
+    <div className="flex items-center gap-12" style={{ marginBottom: 12 }}>
+      <span style={{ width: 110, fontSize: 13 }}>{label}</span>
+      <div style={{ flex: 1 }}><ProgressBar pct={val} /></div>
+      <b style={{ width: 42, textAlign: 'right' }}>{val}%</b>
+    </div>
+  )
+
+  return (
+    <Modal
+      title="ATS Match Analysis"
+      subtitle={`${c.id} · ${c.jobTitle}`}
+      size="modal-lg"
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose}>Close</button>
+          <button className="btn btn-primary" onClick={() => onProfile(c)}>View Full Profile</button>
+        </>
+      }
+    >
+      <div className={`recc-banner ${recCls}`}>
+        <span className="recc-icn">
+          <Icon name={c.recommendation === 'Weak Match' ? 'x-circle' : 'check-circle'} />
+        </span>
+        <div style={{ flex: 1 }}>
+          <div className="fw-600" style={{ fontSize: 15 }}>{c.recommendation}</div>
+          <div style={{ opacity: 0.85, fontSize: 13 }}>{c.name} for {c.jobTitle}</div>
+        </div>
+      </div>
+
+      <div className="grid g-2" style={{ alignItems: 'center', marginBottom: 20 }}>
+        <div style={{ textAlign: 'center' }}>
+          <div className="ats-ring" style={{ '--pct': c.aiScore, '--c': ringColor }}>
+            <div className="ats-val">
+              <div className="ats-num">{c.aiScore}</div>
+              <div className="ats-lbl">ATS MATCH</div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <Row label="Skills" val={sub.skills} />
+          <Row label="Experience" val={sub.experience} />
+          <Row label="Education" val={sub.education} />
+          <Row label="Keywords" val={sub.keywords} />
+          <Row label="Location" val={sub.location} />
+          <Row label="Salary" val={sub.salary} />
+        </div>
+      </div>
+
+      <div className="form-section-title" style={{ marginTop: 0 }}>
+        Matched Skills ({c.matchedSkills.length})
+      </div>
+      <div className="k-tags" style={{ marginBottom: 16 }}>
+        {c.matchedSkills.length
+          ? c.matchedSkills.map((s) => (
+              <span className="skill-pill skill-matched" key={s}><Icon name="check" /> {s}</span>
+            ))
+          : <span className="text-muted">—</span>}
+      </div>
+
+      <div className="form-section-title" style={{ marginTop: 0 }}>
+        Missing Skills ({c.missingSkills.length})
+      </div>
+      <div className="k-tags">
+        {c.missingSkills.length
+          ? c.missingSkills.map((s) => (
+              <span className="skill-pill skill-missing" key={s}><Icon name="x" /> {s}</span>
+            ))
+          : <span className="text-muted">None — full match</span>}
+      </div>
+
+      <div className="divider" />
+      <p className="text-muted text-sm">
+        <Icon name="sparkles" /> Score computed from JD keywords, resume parsing, experience,
+        education, location and salary alignment. Connect an AI model to refine with semantic matching.
+      </p>
+    </Modal>
+  )
+}
+
+function BulkAssign({ count, recruiters, onClose, onSave }) {
+  const [name, setName] = useState(recruiters[0]?.name ?? '')
+  return (
+    <Modal
+      title="Bulk Assign Recruiter"
+      subtitle={`${count} candidates`}
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
+          <button className="btn btn-primary" onClick={() => onSave(name)}>Assign</button>
+        </>
+      }
+    >
+      <div className="form-field">
+        <label>Assign to</label>
+        <select value={name} onChange={(e) => setName(e.target.value)}>
+          {recruiters.map((r) => <option key={r.id}>{r.name}</option>)}
+        </select>
+      </div>
+    </Modal>
+  )
+}
+
+function AddCandidate({ jobs, count, onClose, onSave, onInvalid }) {
+  const open = jobs.filter((j) => j.status === 'Open')
+  const form = useFormState({
+    name: '', email: '', phone: '', job: open[0]?.title ?? '',
+    experience: '3', company: '', source: sources[0], stage: stages[0],
+  })
+
+  function submit() {
+    const v = form.values
+    const errors = {}
+    if (!v.name.trim()) errors.name = 'Required'
+    if (!/^\S+@\S+\.\S+$/.test(v.email)) errors.email = 'Valid email required'
+    form.setErrors(errors)
+    if (Object.keys(errors).length) {
+      onInvalid()
+      return
+    }
+    const job = jobs.find((j) => j.title === v.job) || jobs[0]
+    const score = int(55, 95)
+    onSave({
+      id: `CAN-${5001 + count}`,
+      name: v.name, initials: initialsOf(v.name), color: avatarColor(v.name),
+      email: v.email, phone: v.phone || '+1 (555) 000-0000',
+      jobId: job.id, jobTitle: job.title, department: job.department,
+      experience: Number(v.experience) || 1, currentCompany: v.company || '—',
+      currentTitle: job.title, location: job.location,
+      stage: v.stage, status: v.stage, aiScore: score, source: v.source,
+      recruiter: job.recruiter, recruiterId: job.recruiterId,
+      applied: new Date(TODAY), education: "Bachelor's Degree",
+      skills: job.skills.slice(0, 4), rating: '4.0', salary: 120000,
+      matchedSkills: job.skills.slice(0, 3), missingSkills: job.skills.slice(3),
+      recommendation: score >= 82 ? 'Strong Match' : score >= 65 ? 'Potential Match' : 'Weak Match',
+      subScores: { skills: score, experience: 80, education: 80, keywords: score, location: 100, salary: 90 },
+      noticePeriod: '1 month', availability: '2 weeks', certifications: [],
+      favorite: false, interviewStatus: 'Not Scheduled',
+    })
+  }
+
+  const field = (n) => ({ value: form.values[n], onChange: (e) => form.setField(n, e.target.value) })
+
+  return (
+    <Modal
+      title="Add Candidate"
+      subtitle="Manually add a candidate to the pipeline"
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
+          <button className="btn btn-primary" onClick={submit}><Icon name="check" /> Add Candidate</button>
+        </>
+      }
+    >
+      <form noValidate onSubmit={(e) => { e.preventDefault(); submit() }}>
+        <div className="form-grid">
+          <div className="form-field">
+            <label>Full Name <span className="req">*</span></label>
+            <input {...field('name')} className={form.errors.name ? 'err' : ''} placeholder="Jane Doe" />
+            <FieldError>{form.errors.name}</FieldError>
+          </div>
+          <div className="form-field">
+            <label>Email <span className="req">*</span></label>
+            <input type="email" {...field('email')} className={form.errors.email ? 'err' : ''} placeholder="jane@email.com" />
+            <FieldError>{form.errors.email}</FieldError>
+          </div>
+          <div className="form-field"><label>Phone</label><input {...field('phone')} placeholder="+1 (555) 000-0000" /></div>
+          <div className="form-field">
+            <label>Applied Job <span className="req">*</span></label>
+            <select {...field('job')}>{open.map((j) => <option key={j.id}>{j.title}</option>)}</select>
+          </div>
+          <div className="form-field"><label>Experience (years)</label><input type="number" {...field('experience')} /></div>
+          <div className="form-field"><label>Current Company</label><input {...field('company')} placeholder="Acme Inc." /></div>
+          <div className="form-field">
+            <label>Source</label>
+            <select {...field('source')}>{sources.map((s) => <option key={s}>{s}</option>)}</select>
+          </div>
+          <div className="form-field">
+            <label>Stage</label>
+            <select {...field('stage')}>{stages.map((s) => <option key={s}>{s}</option>)}</select>
+          </div>
+        </div>
+      </form>
+    </Modal>
+  )
+}
diff --git a/frontend/src/screens/CvImport.jsx b/frontend/src/screens/CvImport.jsx
new file mode 100644
index 0000000..f0938c4
--- /dev/null
+++ b/frontend/src/screens/CvImport.jsx
@@ -0,0 +1,333 @@
+/* ============================================================
+   CV Import — the UX shape is right; the mechanics are still simulated.
+
+   The prototype's dropzone read only `e.dataTransfer.files.length` and threw
+   the files away, then invented a queue with setInterval-driven progress. That
+   is preserved deliberately: there is no upload endpoint, no object storage and
+   no parser behind this yet, so pretending otherwise would be worse than the
+   honest "processed locally in this demo" label the screen already carries.
+   ============================================================ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+
+import Modal from '../ui/Modal'
+import { Badge, Icon, ScoreChip } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { seedQuery, useSeedMutation } from '../data/seedQueries'
+import {
+  avatarColor, companies, initials as initialsOf, int, locations, pick, TODAY,
+} from '../data/seed'
+
+const FIRST = ['Olivia', 'Liam', 'Emma', 'Noah', 'Ava', 'Ethan', 'Sophia', 'Mason', 'Priya', 'Diego', 'Yuki', 'Omar']
+const LAST = ['Chen', 'Patel', 'Kim', 'Garcia', 'Silva', 'Ahmed', 'Novak', 'Reyes', 'Khan', 'Costa']
+
+const STEPS = [
+  { i: 'file', t: 'Resume parsing', d: 'Extract name, contact, experience, skills & education' },
+  { i: 'target', t: 'ATS scoring', d: 'Generate a match score against the requisition' },
+  { i: 'briefcase', t: 'Job matching', d: 'Suggest the best-matching open roles' },
+  { i: 'users', t: 'Duplicate detection', d: 'Flag candidates already in the system' },
+  { i: 'user-plus', t: 'Profile creation', d: 'Create a candidate profile in Applied stage' },
+]
+
+export default function CvImport() {
+  const { toast } = useToast()
+  const { data: jobs = [] } = useQuery(seedQuery('jobs'))
+  const { data: candidates = [] } = useQuery(seedQuery('candidates'))
+  const updateCandidates = useSeedMutation('candidates')
+
+  const [queue, setQueue] = useState([])
+  const [dragging, setDragging] = useState(false)
+  const [duplicateFor, setDuplicateFor] = useState(null)
+  const timers = useRef(new Set())
+
+  useEffect(() => {
+    const set = timers.current
+    return () => {
+      set.forEach((t) => { clearInterval(t); clearTimeout(t) })
+      set.clear()
+    }
+  }, [])
+
+  const advance = useCallback((id) => {
+    const tick = setInterval(() => {
+      setQueue((q) =>
+        q.map((item) => {
+          if (item.id !== id || item.status !== 'Uploading') return item
+          const progress = Math.min(100, item.progress + int(12, 30))
+          if (progress >= 100) {
+            clearInterval(tick)
+            timers.current.delete(tick)
+            const done = setTimeout(() => {
+              setQueue((q2) =>
+                q2.map((x) => (x.id === id ? { ...x, status: 'Ready', atsScore: int(52, 96) } : x)),
+              )
+              timers.current.delete(done)
+            }, 700 + int(0, 500))
+            timers.current.add(done)
+            return { ...item, progress: 100, status: 'Parsing' }
+          }
+          return { ...item, progress }
+        }),
+      )
+    }, 220)
+    timers.current.add(tick)
+  }, [])
+
+  const simulate = useCallback(
+    (count, isZip) => {
+      const n = isZip ? 8 : count
+      const open = jobs.filter((j) => j.status === 'Open')
+      const items = []
+      for (let k = 0; k < n; k++) {
+        const name = `${pick(FIRST)} ${pick(LAST)}`
+        items.push({
+          id: `UP-${Math.random().toString(36).slice(2, 8)}`,
+          name,
+          file: `${name.split(' ')[0]}_Resume.${pick(['pdf', 'docx', 'doc'])}`,
+          size: `${int(120, 620)} KB`,
+          progress: 0,
+          status: 'Uploading',
+          atsScore: null,
+          job: pick(open.length ? open : jobs),
+          duplicate: Math.random() < 0.18,
+          imported: false,
+        })
+      }
+      setQueue((q) => [...q, ...items])
+      items.forEach((i) => advance(i.id))
+      toast(isZip ? 'ZIP extracted — 8 resumes queued' : `${n} file(s) uploaded`, 'info')
+    },
+    [jobs, advance, toast],
+  )
+
+  const doImport = useCallback(
+    (id) => {
+      const item = queue.find((x) => x.id === id)
+      if (!item || item.imported) return
+      const job = item.job
+      updateCandidates((cs) => [
+        {
+          id: `CAN-${5001 + cs.length}`,
+          name: item.name,
+          initials: initialsOf(item.name),
+          color: avatarColor(item.name),
+          email: `${item.name.toLowerCase().replace(/ /g, '.')}@email.com`,
+          phone: '+1 (555) 000-0000',
+          jobId: job.id, jobTitle: job.title, department: job.department,
+          experience: int(2, 12), currentCompany: pick(companies), currentTitle: job.title,
+          location: pick(locations), stage: 'Applied', status: 'Applied',
+          aiScore: item.atsScore, source: 'Manual CV Upload',
+          recruiter: job.recruiter, recruiterId: '',
+          applied: new Date(TODAY), education: "Bachelor's Degree",
+          skills: job.skills.slice(0, 4), rating: '4.0', salary: int(90, 180) * 1000,
+          matchedSkills: job.skills.slice(0, 3), missingSkills: job.skills.slice(3),
+          recommendation: item.atsScore >= 82 ? 'Strong Match' : 'Potential Match',
+          // Kept verbatim from the prototype, including the literal constants —
+          // this breakdown is fabricated and is flagged as the most misleading
+          // artefact in the repo (01-repository-assessment.md §2.2).
+          subScores: { skills: item.atsScore, experience: 80, education: 80, keywords: item.atsScore, location: 100, salary: 90 },
+          noticePeriod: '1 month', availability: '2 weeks', certifications: [],
+          favorite: false, interviewStatus: 'Not Scheduled',
+        },
+        ...cs,
+      ])
+      setQueue((q) => q.map((x) => (x.id === id ? { ...x, imported: true } : x)))
+      toast(`${item.name} imported → ${job.title}`, 'success')
+    },
+    [queue, updateCandidates, toast],
+  )
+
+  function importOne(item) {
+    if (item.duplicate) setDuplicateFor(item)
+    else doImport(item.id)
+  }
+
+  function importAll() {
+    const ready = queue.filter((i) => i.status === 'Ready' && !i.imported && !i.duplicate)
+    if (!ready.length) {
+      toast('No files ready to import', 'warning')
+      return
+    }
+    ready.forEach((i) => doImport(i.id))
+    toast(`${ready.length} candidates imported`, 'success')
+  }
+
+  const importedCount = queue.filter((i) => i.imported).length
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">CV Import</h1>
+          <p className="page-sub">Upload resumes — we parse, score, match, and dedupe automatically</p>
+        </div>
+        <div className="page-head-actions">
+          <span className="integration-status pending"><span className="pulse" />AI Resume Parser · Ready</span>
+        </div>
+      </div>
+
+      <div className="grid g-2-1">
+        <div>
+          <div className="card mb-18">
+            <div className="card-body">
+              <div
+                className={`dropzone${dragging ? ' drag' : ''}`}
+                onClick={() => simulate(int(2, 4))}
+                onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
+                onDragLeave={() => setDragging(false)}
+                onDrop={(e) => {
+                  e.preventDefault()
+                  setDragging(false)
+                  simulate(e.dataTransfer.files.length || int(2, 4))
+                }}
+              >
+                <div className="dz-icn"><Icon name="upload" /></div>
+                <h3>Drag &amp; drop resumes here</h3>
+                <p className="text-muted" style={{ marginBottom: 16 }}>
+                  or click to browse — PDF, DOC, DOCX and ZIP supported · up to 20 files
+                </p>
+                <button
+                  className="btn btn-primary"
+                  onClick={(e) => { e.stopPropagation(); simulate(int(2, 4)) }}
+                >
+                  <Icon name="upload" /> Browse Files
+                </button>
+                <div className="flex items-center gap-8" style={{ justifyContent: 'center', marginTop: 16 }}>
+                  {['PDF', 'DOC', 'DOCX', 'ZIP'].map((t) => (
+                    <span className="badge b-gray badge-plain" key={t}>{t}</span>
+                  ))}
+                </div>
+              </div>
+              <div className="flex items-center gap-8" style={{ marginTop: 16, flexWrap: 'wrap' }}>
+                <button className="btn btn-secondary btn-sm" onClick={() => simulate(3)}>
+                  <Icon name="sparkles" /> Simulate 3 files
+                </button>
+                <button className="btn btn-secondary btn-sm" onClick={() => simulate(1, true)}>
+                  <Icon name="layers" /> Simulate ZIP (8 CVs)
+                </button>
+                <span className="text-muted text-sm" style={{ marginLeft: 'auto' }}>
+                  Files are processed locally in this demo
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {queue.length > 0 && (
+            <div className="card">
+              <div className="card-head">
+                <div>
+                  <h3>Processing Queue</h3>
+                  <span className="ch-sub">
+                    {queue.length} file{queue.length === 1 ? '' : 's'} · {importedCount} imported
+                  </span>
+                </div>
+                <button className="btn btn-primary btn-sm" onClick={importAll}>
+                  <Icon name="check" /> Import All
+                </button>
+              </div>
+              <div className="card-body">
+                {queue.map((i) => (
+                  <div className="upload-row" key={i.id}>
+                    <span className="attach-icn" style={{ width: 38, height: 38 }}><Icon name="file" /></span>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div className="flex items-center gap-8">
+                        <span className="fw-600 text-sm">{i.name}</span>
+                        {i.duplicate && (
+                          <span className="badge b-red badge-plain" style={{ padding: '1px 7px', fontSize: 10 }}>
+                            DUPLICATE
+                          </span>
+                        )}
+                      </div>
+                      <div className="cell-sub">{i.file} · {i.size}</div>
+                      {i.status === 'Uploading' || i.status === 'Parsing' ? (
+                        <div className="upload-progress" style={{ marginTop: 6 }}>
+                          <div className="upload-progress-fill" style={{ width: `${i.progress}%` }} />
+                        </div>
+                      ) : (
+                        <div className="cell-sub" style={{ marginTop: 4 }}>
+                          Best match: <b>{i.job?.title}</b>
+                        </div>
+                      )}
+                    </div>
+                    <div style={{ textAlign: 'right', flexShrink: 0 }}>
+                      {i.status === 'Ready' ? (
+                        <ScoreChip score={i.atsScore} />
+                      ) : (
+                        <Badge className={i.status === 'Parsing' ? 'b-amber' : 'b-blue'}>
+                          {i.status}{i.status === 'Uploading' ? ` ${i.progress}%` : ''}
+                        </Badge>
+                      )}
+                    </div>
+                    <div style={{ flexShrink: 0 }}>
+                      {i.imported ? (
+                        <Badge className="b-green">Imported</Badge>
+                      ) : i.status === 'Ready' ? (
+                        <button className="btn btn-primary btn-sm" onClick={() => importOne(i)}>Import</button>
+                      ) : (
+                        <button className="act-btn" disabled><Icon name="clock" /></button>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="card" style={{ alignSelf: 'start' }}>
+          <div className="card-head"><div><h3>Auto-Processing</h3><span className="ch-sub">What happens on upload</span></div></div>
+          <div className="card-body">
+            <div className="timeline">
+              {STEPS.map((s) => (
+                <div className="tl-item" key={s.t}>
+                  <div className="tl-dot"><Icon name={s.i} /></div>
+                  <div className="tl-title">{s.t}</div>
+                  <div className="tl-desc">{s.d}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {duplicateFor && (
+        <Modal
+          title="Duplicate Detected"
+          subtitle={duplicateFor.name}
+          onClose={() => setDuplicateFor(null)}
+          footer={
+            <>
+              <button className="btn btn-secondary" onClick={() => setDuplicateFor(null)}>Cancel</button>
+              <button
+                className="btn btn-secondary"
+                onClick={() => { setDuplicateFor(null); toast('Merged into existing profile', 'success') }}
+              >
+                Merge
+              </button>
+              <button
+                className="btn btn-primary"
+                onClick={() => { const id = duplicateFor.id; setDuplicateFor(null); doImport(id) }}
+              >
+                Import Anyway
+              </button>
+            </>
+          }
+        >
+          <div className="flex gap-16 items-center">
+            <span className="kpi-icn i-amber" style={{ width: 48, height: 48, borderRadius: 12, flexShrink: 0 }}>
+              <Icon name="users" />
+            </span>
+            <div>
+              <p className="fw-600" style={{ fontSize: 15 }}>A similar candidate already exists</p>
+              <p className="text-muted" style={{ marginTop: 4 }}>
+                {duplicateFor.name} matches an existing profile (95% similarity on name + email).
+                Importing will create a duplicate.
+              </p>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/screens/Dashboard.jsx b/frontend/src/screens/Dashboard.jsx
new file mode 100644
index 0000000..56c3150
--- /dev/null
+++ b/frontend/src/screens/Dashboard.jsx
@@ -0,0 +1,257 @@
+import { useMemo } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import Chart, { ChartLegend } from '../ui/Chart'
+import Charts from '../lib/charts'
+import { Avatar, Icon, KpiCard, ScoreChip } from '../ui/primitives'
+import { seedQuery } from '../data/seedQueries'
+import { analytics, fmtShort, kpis, money, relTime } from '../data/seed'
+
+export default function Dashboard() {
+  const navigate = useNavigate()
+  const { data: interviews = [] } = useQuery(seedQuery('interviews'))
+  const { data: candidates = [] } = useQuery(seedQuery('candidates'))
+  const { data: recruiters = [] } = useQuery(seedQuery('recruiters'))
+  const { data: activity = [] } = useQuery(seedQuery('activity'))
+
+  const k = kpis
+
+  // Chart payloads must be referentially stable, or <Chart/> re-runs its effect
+  // and re-animates on every parent render.
+  const trendData = useMemo(
+    () => ({
+      labels: analytics.hiringTrend.labels,
+      area: true,
+      datasets: [
+        { label: 'Applications', data: analytics.hiringTrend.applications, color: Charts.PALETTE[4] },
+        { label: 'Hires', data: analytics.hiringTrend.hires, color: Charts.PALETTE[0] },
+      ],
+    }),
+    [],
+  )
+  const pipelineData = useMemo(
+    () => ({
+      labels: analytics.pipeline.map((p) => p.stage),
+      data: analytics.pipeline.map((p) => p.count),
+      colors: Charts.PALETTE,
+    }),
+    [],
+  )
+  const sourceData = useMemo(
+    () => ({
+      labels: analytics.sources.map((s) => s.source),
+      data: analytics.sources.map((s) => s.count),
+    }),
+    [],
+  )
+  const legend = useMemo(
+    () => [
+      { label: 'Applications', color: Charts.PALETTE[4] },
+      { label: 'Hires', color: Charts.PALETTE[0] },
+    ],
+    [],
+  )
+
+  const upcoming = interviews.filter((iv) => iv.status === 'Scheduled').slice(0, 5)
+  const recentApps = [...candidates].sort((a, b) => b.applied - a.applied).slice(0, 5)
+  const topRecruiters = [...recruiters].sort((a, b) => b.hires - a.hires).slice(0, 5)
+
+  const row1 = [
+    { label: 'Open Jobs', value: k.openJobs, icon: 'briefcase', tone: 'i-indigo', trend: '+8%', dir: 'up', foot: 'vs last month' },
+    { label: 'Total Candidates', value: k.totalCandidates, icon: 'users', tone: 'i-blue', trend: '+12%', dir: 'up', foot: 'active in pipeline' },
+    { label: 'Interviews Today', value: k.interviewsToday, icon: 'calendar', tone: 'i-purple', trend: '3 upcoming', dir: 'flat', foot: 'next at 2:00 PM' },
+    { label: 'Offers Accepted', value: k.offersAccepted, icon: 'check-circle', tone: 'i-green', trend: '+5%', dir: 'up', foot: `of ${k.offersSent} sent` },
+  ]
+  const row2 = [
+    { label: 'Time to Hire', value: `${k.timeToHire} days`, icon: 'clock', tone: 'i-teal', trend: '-3 days', dir: 'up', foot: 'faster than target' },
+    { label: 'Time to Fill', value: `${k.timeToFill} days`, icon: 'target', tone: 'i-amber', trend: '-2 days', dir: 'up', foot: '41 day average' },
+    { label: 'Cost per Hire', value: money(k.costPerHire), icon: 'dollar', tone: 'i-red', trend: '+4%', dir: 'down', foot: 'above budget' },
+    { label: 'Closed Jobs', value: k.closedJobs + k.hires, icon: 'award', tone: 'i-purple', trend: '+15%', dir: 'up', foot: 'this quarter' },
+  ]
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Good morning, Asfand 👋</h1>
+          <p className="page-sub">
+            Here’s what’s happening with your hiring today — Thursday, July 9, 2026
+          </p>
+        </div>
+        <div className="page-head-actions">
+          <Link className="btn btn-secondary" to="/reports">
+            <Icon name="download" /> Export
+          </Link>
+          <Link className="btn btn-primary" to="/jobs" state={{ openCreate: true }}>
+            <Icon name="plus" /> Create Job
+          </Link>
+        </div>
+      </div>
+
+      <div className="grid g-kpi">
+        {row1.map((c) => <KpiCard key={c.label} {...c} />)}
+      </div>
+      <div className="grid g-kpi mt-18">
+        {row2.map((c) => <KpiCard key={c.label} {...c} />)}
+      </div>
+
+      <div className="grid g-2-1 mt-18">
+        <div className="card">
+          <div className="card-head">
+            <div>
+              <h3>Hiring Trend</h3>
+              <span className="ch-sub">Hires vs applications over the last 7 months</span>
+            </div>
+            <div className="pill-tabs">
+              <span className="pill-tab active">7M</span>
+              <span className="pill-tab">1Y</span>
+            </div>
+          </div>
+          <div className="card-body">
+            <div className="chart-wrap">
+              <Chart type="line" data={trendData} height={280} />
+            </div>
+            <ChartLegend items={legend} />
+          </div>
+        </div>
+        <div className="card">
+          <div className="card-head">
+            <div>
+              <h3>Candidate Pipeline</h3>
+              <span className="ch-sub">Active by stage</span>
+            </div>
+          </div>
+          <div className="card-body">
+            <div className="chart-wrap">
+              <Chart type="horizontalBar" data={pipelineData} height={280} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid g-2-1 mt-18">
+        <div className="card">
+          <div className="card-head">
+            <div>
+              <h3>Upcoming Interviews</h3>
+              <span className="ch-sub">Next scheduled sessions</span>
+            </div>
+            <Link className="btn btn-ghost btn-sm" to="/interviews">View all</Link>
+          </div>
+          <div className="card-body">
+            <div className="list-tight">
+              {upcoming.length === 0 ? (
+                <div className="empty-state" style={{ padding: 30 }}>No upcoming interviews</div>
+              ) : (
+                upcoming.map((iv) => (
+                  <div
+                    key={iv.id}
+                    className="list-row"
+                    style={{ cursor: 'pointer' }}
+                    onClick={() => navigate('/interviews')}
+                  >
+                    <Avatar name={iv.candidate} initials={iv.candInitials} color={iv.color} />
+                    <div className="lr-main">
+                      <div className="lr-title">{iv.candidate}</div>
+                      <div className="lr-sub">{iv.type} · {iv.jobTitle}</div>
+                    </div>
+                    <div className="lr-right">
+                      <div className="fw-600 text-sm">{fmtShort(iv.when)}</div>
+                      <div className="lr-sub">
+                        {iv.when.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}
+                      </div>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="card">
+          <div className="card-head">
+            <div>
+              <h3>Source Analytics</h3>
+              <span className="ch-sub">Where candidates come from</span>
+            </div>
+          </div>
+          <div className="card-body">
+            <div className="chart-wrap">
+              <Chart type="bar" data={sourceData} height={240} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid g-3 mt-18">
+        <div className="card">
+          <div className="card-head">
+            <div><h3>Recent Applications</h3></div>
+            <Link className="btn btn-ghost btn-sm" to="/candidates">View all</Link>
+          </div>
+          <div className="card-body">
+            <div className="list-tight">
+              {recentApps.map((c) => (
+                <div
+                  key={c.id}
+                  className="list-row"
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => navigate('/candidates', { state: { openCandidate: c.id } })}
+                >
+                  <Avatar name={c.name} initials={c.initials} color={c.color} />
+                  <div className="lr-main">
+                    <div className="lr-title">{c.name}</div>
+                    <div className="lr-sub">{c.jobTitle}</div>
+                  </div>
+                  <div className="lr-right"><ScoreChip score={c.aiScore} /></div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="card">
+          <div className="card-head"><div><h3>Recruiter Performance</h3></div></div>
+          <div className="card-body">
+            <div className="list-tight">
+              {topRecruiters.map((r) => (
+                <div key={r.id} className="list-row">
+                  <Avatar name={r.name} initials={r.initials} color={r.color} />
+                  <div className="lr-main">
+                    <div className="lr-title">{r.name}</div>
+                    <div className="lr-sub">{r.openReqs} open reqs · {r.avgTimeToHire}d avg</div>
+                  </div>
+                  <div className="lr-right">
+                    <div className="fw-600">{r.hires}</div>
+                    <div className="lr-sub">hires</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="card">
+          <div className="card-head"><div><h3>Recent Activity</h3></div></div>
+          <div className="card-body" style={{ maxHeight: 360, overflowY: 'auto' }}>
+            <div className="list-tight">
+              {activity.slice(0, 8).map((a, i) => (
+                <div className="list-row" key={`${a.candidateId}-${i}`}>
+                  <span className={`kpi-icn ${a.color}`} style={{ width: 36, height: 36, borderRadius: 9 }}>
+                    <Icon name={a.icon} />
+                  </span>
+                  <div className="lr-main">
+                    <div className="lr-sub" style={{ color: 'var(--text-2)', fontSize: 13 }}>
+                      {a.parts.map((p, j) => (typeof p === 'string' ? p : <b key={j}>{p.b}</b>))}
+                    </div>
+                    <div className="lr-sub">{relTime(a.time)}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/screens/Help.jsx b/frontend/src/screens/Help.jsx
new file mode 100644
index 0000000..f665f0b
--- /dev/null
+++ b/frontend/src/screens/Help.jsx
@@ -0,0 +1,89 @@
+import { useState } from 'react'
+import { Icon } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+
+const FAQS = [
+  { q: 'How do I create a new job requisition?', a: 'Navigate to Jobs and click "Create Job". Fill in the required fields marked with an asterisk and click Save. The job will immediately appear in your listings.' },
+  { q: 'How does the AI candidate score work?', a: 'The AI score (0–100) evaluates how well a candidate matches the job requirements based on skills, experience, and education. Higher scores indicate stronger matches.' },
+  { q: 'Can I move candidates between pipeline stages?', a: 'Yes. Open the Pipeline view and simply drag any candidate card between stage columns. The candidate’s status updates automatically.' },
+  { q: 'How do I schedule an interview?', a: 'Go to Interviews or Calendar and click "Schedule Interview". Select the candidate, round, date, time, and interviewers.' },
+  { q: 'How do I export reports?', a: 'On the Reports page, use the "Export Report" button for a full PDF, or the CSV buttons on individual tables.' },
+]
+
+const RESOURCES = [
+  { icn: 'file', t: 'Documentation', d: 'Complete product guides', cls: 'i-indigo' },
+  { icn: 'video', t: 'Video Tutorials', d: 'Watch step-by-step walkthroughs', cls: 'i-red' },
+  { icn: 'message', t: 'Live Chat', d: 'Chat with our support team', cls: 'i-green' },
+  { icn: 'users', t: 'Community', d: 'Connect with other recruiters', cls: 'i-purple' },
+]
+
+export default function Help() {
+  const { toast } = useToast()
+  const [open, setOpen] = useState(null)
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Help Center</h1>
+          <p className="page-sub">Find answers and get support</p>
+        </div>
+      </div>
+
+      <div className="card brand-hero mb-18">
+        <div className="card-body" style={{ padding: 32, textAlign: 'center' }}>
+          <h2 style={{ fontSize: 22, marginBottom: 8 }}>How can we help you?</h2>
+          <p style={{ opacity: 0.85, marginBottom: 18 }}>
+            Search our knowledge base or browse the topics below
+          </p>
+          <div className="topbar-search" style={{ maxWidth: 480, margin: '0 auto' }}>
+            <Icon name="search" />
+            <input placeholder="Search help articles…" />
+          </div>
+        </div>
+      </div>
+
+      <div className="grid g-kpi mb-18">
+        {RESOURCES.map((r) => (
+          <div key={r.t} className="card" style={{ cursor: 'pointer' }} onClick={() => toast(`Opening ${r.t}`, 'info')}>
+            <div className="card-body" style={{ textAlign: 'center' }}>
+              <span className={`kpi-icn ${r.cls}`} style={{ margin: '0 auto 12px', width: 48, height: 48, borderRadius: 14 }}>
+                <Icon name={r.icn} />
+              </span>
+              <div className="fw-600">{r.t}</div>
+              <div className="lr-sub" style={{ marginTop: 4 }}>{r.d}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="card">
+        <div className="card-head"><div><h3>Frequently Asked Questions</h3></div></div>
+        <div className="card-body">
+          {FAQS.map((f, i) => (
+            <div
+              key={f.q}
+              className="setting-row"
+              style={{ cursor: 'pointer', flexDirection: 'column', alignItems: 'stretch' }}
+              onClick={() => setOpen(open === i ? null : i)}
+            >
+              <div className="flex items-center" style={{ justifyContent: 'space-between' }}>
+                <h4>{f.q}</h4>
+                <span
+                  style={{
+                    color: 'var(--text-3)',
+                    transition: '.2s',
+                    transform: open === i ? 'rotate(90deg)' : 'rotate(0deg)',
+                  }}
+                >
+                  <Icon name="chevron-right" />
+                </span>
+              </div>
+              {open === i && <p style={{ marginTop: 10 }}>{f.a}</p>}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/screens/Inbox.jsx b/frontend/src/screens/Inbox.jsx
new file mode 100644
index 0000000..fd29bde
--- /dev/null
+++ b/frontend/src/screens/Inbox.jsx
@@ -0,0 +1,582 @@
+/* ============================================================
+   Recruitment Inbox — six seed-backed tabs plus the Email tab, which is the
+   app's oldest real network call (GET /inbox/fetch, previously the only fetch
+   in the entire prototype).
+
+   The email body used to be interpolated raw into markup at js/inbox.js:292 —
+   the single widest XSS sink in the repository, and the one that mattered most
+   because inbound mail is attacker-supplied by definition. It renders as text
+   now, which is the structural fix.
+   ============================================================ */
+
+import { useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import Modal from '../ui/Modal'
+import { Tabs } from '../ui/Tabs'
+import { Avatar, Badge, EmptyState, Icon, ScoreChip } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { seedQuery, useSeedMutation } from '../data/seedQueries'
+import { qk } from '../lib/queryKeys'
+import { friendlyAuthError } from '../lib/errors'
+import * as inboxApi from '../api/inbox'
+import {
+  atsRecommendationClass, avatarColor, companies, fmtDate, fmtShort, getJob,
+  initials as initialsOf, int, locations, pick, relTime, skillsPool, TODAY,
+} from '../data/seed'
+
+const TABS = ['All Applications', 'Unread', 'Imported', 'Processed', 'Rejected', 'Duplicates', 'Email']
+
+/** The prototype computed "time ago" against a fixed 2026-07-09T20:00. */
+const NOW = new Date('2026-07-09T20:00')
+
+function resumeText(i) {
+  return `${i.name.toUpperCase()}
+${i.email} · ${i.phone}
+${'—'.repeat(30)}
+PROFESSIONAL SUMMARY
+${i.experience} years of experience. Applied for ${i.position} via ${i.source}.
+
+EXPERIENCE
+• ${pick(companies)} — Senior role (2021–Present)
+• ${pick(companies)} — Associate (2018–2021)
+
+EDUCATION
+• Bachelor's Degree, Computer Science
+
+SKILLS
+• ${pick(skillsPool)}, ${pick(skillsPool)}, ${pick(skillsPool)}, ${pick(skillsPool)}`
+}
+
+function SourceChip({ item }) {
+  // The dot carries the partner's brand colour; the label uses theme text —
+  // 11px labels in the partner colour failed AA in both themes.
+  return (
+    <span className="source-chip" style={{ '--chip': item.sourceMeta?.color }}>
+      <span className="source-dot" />
+      {item.source}
+    </span>
+  )
+}
+
+export default function Inbox() {
+  const { toast } = useToast()
+  const navigate = useNavigate()
+  const { data: inbox = [] } = useQuery(seedQuery('inbox'))
+  const { data: jobs = [] } = useQuery(seedQuery('jobs'))
+  const { data: recruiters = [] } = useQuery(seedQuery('recruiters'))
+  const updateInbox = useSeedMutation('inbox')
+  const updateCandidates = useSeedMutation('candidates')
+
+  const [tab, setTab] = useState('All Applications')
+  const [selectedId, setSelectedId] = useState(null)
+  const [q, setQ] = useState('')
+  const [previewing, setPreviewing] = useState(null)
+  const [assigning, setAssigning] = useState(null)
+  const [noting, setNoting] = useState(null)
+
+  const emailsQuery = useQuery({
+    queryKey: qk.mailbox.messages(),
+    queryFn: async () => {
+      const res = await inboxApi.listMessages()
+      const rows = Array.isArray(res?.data) ? res.data : []
+      return rows.map((row) => ({
+        id: String(row.id),
+        from: row.sender_name || row.fromEmail || 'Unknown',
+        fromEmail: row.fromEmail || '',
+        subject: row.subject || '',
+        body: row.body || '',
+        when: row.when ? new Date(row.when) : new Date(),
+        unread: Boolean(row.unread),
+        attachment: row.attachment_name || 'Resume.pdf',
+        attachmentSize: '—',
+        atsScore: 70,
+        imported: false,
+      }))
+    },
+    enabled: tab === 'Email',
+  })
+
+  const counts = useMemo(
+    () => ({
+      'All Applications': inbox.length,
+      Unread: inbox.filter((i) => i.processing === 'Unread').length,
+      Imported: inbox.filter((i) => i.processing === 'Imported').length,
+      Processed: inbox.filter((i) => i.processing === 'Processed').length,
+      Rejected: inbox.filter((i) => i.processing === 'Rejected').length,
+      Duplicates: inbox.filter((i) => i.duplicate).length,
+      Email: (emailsQuery.data ?? []).filter((e) => e.unread).length,
+    }),
+    [inbox, emailsQuery.data],
+  )
+
+  const list = useMemo(() => {
+    let l = inbox
+    if (tab === 'Unread') l = l.filter((i) => i.processing === 'Unread')
+    else if (tab === 'Imported') l = l.filter((i) => i.processing === 'Imported')
+    else if (tab === 'Processed') l = l.filter((i) => i.processing === 'Processed')
+    else if (tab === 'Rejected') l = l.filter((i) => i.processing === 'Rejected')
+    else if (tab === 'Duplicates') l = l.filter((i) => i.duplicate)
+    if (q) l = l.filter((i) => (i.name + i.position + i.source).toLowerCase().includes(q.toLowerCase()))
+    return l
+  }, [inbox, tab, q])
+
+  const selected = inbox.find((i) => i.id === selectedId)
+
+  function select(id) {
+    setSelectedId(id)
+    updateInbox((items) => items.map((i) => (i.id === id ? { ...i, unread: false } : i)))
+  }
+
+  function makeCandidate(item, job, cs) {
+    return {
+      id: `CAN-${5001 + cs.length}`,
+      name: item.name, initials: item.initials, color: item.color,
+      email: item.email, phone: item.phone,
+      jobId: job.id, jobTitle: job.title, department: job.department,
+      experience: item.experience, currentCompany: pick(companies), currentTitle: job.title,
+      location: pick(locations), stage: 'Applied', status: 'Applied',
+      aiScore: item.atsScore, source: item.source, recruiter: item.recruiter, recruiterId: '',
+      applied: new Date(TODAY), education: "Bachelor's Degree",
+      skills: job.skills.slice(0, 4), rating: '4.0', salary: int(90, 180) * 1000,
+      matchedSkills: job.skills.slice(0, 3), missingSkills: job.skills.slice(3),
+      recommendation: item.atsScore >= 82 ? 'Strong Match' : 'Potential Match',
+      subScores: { skills: item.atsScore, experience: item.atsScore, education: 80, keywords: item.atsScore, location: 100, salary: 90 },
+      noticePeriod: '1 month', availability: '2 weeks', certifications: [],
+      favorite: false, interviewStatus: 'Not Scheduled',
+    }
+  }
+
+  function importItem(item) {
+    const job = getJob(item.jobId) || jobs[0]
+    updateCandidates((cs) => [makeCandidate(item, job, cs), ...cs])
+    updateInbox((items) => items.map((i) => (i.id === item.id ? { ...i, processing: 'Imported', unread: false } : i)))
+    toast(`${item.name} imported → Applied stage of ${job.title}`, 'success')
+  }
+
+  function parseResume(item) {
+    updateInbox((items) => items.map((i) => (i.id === item.id ? { ...i, resumeStatus: 'Parsing' } : i)))
+    toast('Parsing resume with AI…', 'info')
+    setTimeout(() => {
+      updateInbox((items) =>
+        items.map((i) => (i.id === item.id ? { ...i, resumeStatus: 'Parsed', atsScore: int(60, 96) } : i)),
+      )
+      toast('Resume parsed — profile fields extracted', 'success')
+    }, 1100)
+  }
+
+  function moveToPipeline(item) {
+    if (item.processing !== 'Imported' && item.processing !== 'Processed') importItem(item)
+    updateInbox((items) => items.map((i) => (i.id === item.id ? { ...i, processing: 'Processed' } : i)))
+    toast(`${item.name} moved to pipeline`, 'success')
+    setTimeout(() => navigate('/pipeline'), 700)
+  }
+
+  function reject(item) {
+    updateInbox((items) => items.map((i) => (i.id === item.id ? { ...i, processing: 'Rejected', unread: false } : i)))
+    toast(`${item.name} rejected`, 'warning')
+  }
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Recruitment Inbox</h1>
+          <p className="page-sub">Every candidate, every source — one unified queue</p>
+        </div>
+        <div className="page-head-actions">
+          <span className="integration-status"><span className="pulse" />Microsoft Graph API · Connected</span>
+          <button
+            className="btn btn-secondary"
+            onClick={() => {
+              toast('Syncing all sources…', 'info')
+              setTimeout(() => toast('Inbox synced', 'success'), 900)
+            }}
+          >
+            <Icon name="refresh" /> Sync
+          </button>
+          <button className="btn btn-primary" onClick={() => navigate('/import')}>
+            <Icon name="upload" /> Upload CVs
+          </button>
+        </div>
+      </div>
+
+      <div className="card">
+        <div style={{ margin: '0 16px', paddingTop: 8 }}>
+          <Tabs
+            value={tab}
+            onChange={(t) => { setTab(t); setSelectedId(null) }}
+            tabs={TABS.map((t) => ({ key: t, label: t, count: counts[t] }))}
+          />
+        </div>
+
+        {tab === 'Email' ? (
+          <EmailTab query={emailsQuery} jobs={jobs} updateCandidates={updateCandidates} toast={toast} />
+        ) : (
+          <div className="split">
+            <div className="split-list">
+              <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)' }}>
+                <div className="toolbar-search" style={{ maxWidth: 'none' }}>
+                  <Icon name="search" />
+                  <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search applications…" />
+                </div>
+              </div>
+              <div>
+                {list.length === 0 ? (
+                  <EmptyState icon="inbox" title="Nothing here">No applications in this view.</EmptyState>
+                ) : (
+                  list.map((i) => (
+                    <div
+                      key={i.id}
+                      className={`inbox-item${i.unread ? ' unread' : ''}${selectedId === i.id ? ' active' : ''}`}
+                      onClick={() => select(i.id)}
+                    >
+                      <Avatar name={i.name} initials={i.initials} color={i.color} />
+                      <div className="ii-main">
+                        <div className="ii-name">
+                          {i.name}{' '}
+                          {i.duplicate && (
+                            <span className="badge b-red badge-plain" style={{ padding: '1px 6px', fontSize: 10 }}>DUP</span>
+                          )}
+                        </div>
+                        <div className="ii-pos">{i.position}</div>
+                        <div className="ii-meta"><SourceChip item={i} /> <Badge>{i.processing}</Badge></div>
+                      </div>
+                      <div style={{ textAlign: 'right', flexShrink: 0 }}>
+                        <div className="ii-time">{relTime(Math.round((NOW - i.received) / 60000))}</div>
+                        <div style={{ marginTop: 6 }}><ScoreChip score={i.atsScore} /></div>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+
+            <div className="split-detail">
+              {!selected ? (
+                <div style={{ padding: '100px 20px' }}>
+                  <EmptyState icon="inbox" title="Select an application">
+                    Choose an item from the list to view details and take action.
+                  </EmptyState>
+                </div>
+              ) : (
+                <ApplicationDetail
+                  item={selected}
+                  onPreview={() => setPreviewing(selected)}
+                  onImport={() => importItem(selected)}
+                  onParse={() => parseResume(selected)}
+                  onAssign={() => setAssigning(selected)}
+                  onMove={() => moveToPipeline(selected)}
+                  onNote={() => setNoting(selected)}
+                  onReject={() => reject(selected)}
+                />
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {previewing && (
+        <Modal
+          title={previewing.attachment}
+          subtitle={`Resume preview · ${previewing.name}`}
+          size="modal-lg"
+          onClose={() => setPreviewing(null)}
+          footer={
+            <>
+              <button className="btn btn-secondary" onClick={() => setPreviewing(null)}>Close</button>
+              <button
+                className="btn btn-primary"
+                onClick={() => { const it = previewing; setPreviewing(null); importItem(it) }}
+              >
+                <Icon name="user-plus" /> Import Candidate
+              </button>
+            </>
+          }
+        >
+          <pre className="resume-thumb" style={{ maxHeight: 'none', fontSize: 12 }}>{resumeText(previewing)}</pre>
+        </Modal>
+      )}
+
+      {assigning && (
+        <AssignRecruiter
+          item={assigning}
+          recruiters={recruiters}
+          onClose={() => setAssigning(null)}
+          onSave={(name) => {
+            updateInbox((items) => items.map((i) => (i.id === assigning.id ? { ...i, recruiter: name } : i)))
+            setAssigning(null)
+            toast(`Recruiter assigned to ${assigning.name}`, 'success')
+          }}
+        />
+      )}
+
+      {noting && (
+        <Modal
+          title="Add Note"
+          subtitle={noting.name}
+          onClose={() => setNoting(null)}
+          footer={
+            <>
+              <button className="btn btn-secondary" onClick={() => setNoting(null)}>Cancel</button>
+              <button className="btn btn-primary" onClick={() => { setNoting(null); toast('Note added', 'success') }}>
+                <Icon name="check" /> Save Note
+              </button>
+            </>
+          }
+        >
+          <div className="form-field">
+            <label>Note</label>
+            <textarea placeholder="Add a note about this application…" />
+          </div>
+        </Modal>
+      )}
+    </div>
+  )
+}
+
+function ApplicationDetail({ item: i, onPreview, onImport, onParse, onAssign, onMove, onNote, onReject }) {
+  const recLabel = i.atsScore >= 82 ? 'Strong Match' : i.atsScore >= 65 ? 'Potential Match' : 'Weak Match'
+  const ringColor = i.atsScore >= 82 ? 'var(--success)' : i.atsScore >= 65 ? 'var(--warning)' : 'var(--danger)'
+
+  return (
+    <div style={{ padding: 24 }}>
+      <div className="flex items-center gap-16" style={{ marginBottom: 20 }}>
+        <Avatar name={i.name} initials={i.initials} color={i.color} className="avatar-lg" />
+        <div style={{ flex: 1 }}>
+          <div className="ph-name" style={{ fontSize: 19 }}>{i.name}</div>
+          <div className="ph-role">{i.position}</div>
+          <div className="ph-tags" style={{ marginTop: 8 }}>
+            <SourceChip item={i} /> <Badge>{i.processing}</Badge>{' '}
+            <Badge className={i.resumeStatus === 'Parsed' ? 'b-green' : i.resumeStatus === 'Failed' ? 'b-red' : 'b-amber'}>
+              {i.resumeStatus}
+            </Badge>
+          </div>
+        </div>
+        <div style={{ textAlign: 'center' }}>
+          <div className="ats-ring" style={{ width: 84, height: 84, '--pct': i.atsScore, '--c': ringColor }}>
+            <div className="ats-val"><div className="ats-num" style={{ fontSize: 22 }}>{i.atsScore}</div></div>
+          </div>
+          <div className="cell-sub" style={{ marginTop: 4 }}>ATS Score</div>
+        </div>
+      </div>
+
+      <div className="info-grid" style={{ marginBottom: 20 }}>
+        <div className="info-item"><div className="il">Email</div><div className="iv">{i.email}</div></div>
+        <div className="info-item"><div className="il">Phone</div><div className="iv">{i.phone}</div></div>
+        <div className="info-item"><div className="il">Experience</div><div className="iv">{i.experience} years</div></div>
+        <div className="info-item"><div className="il">Assigned Recruiter</div><div className="iv">{i.recruiter}</div></div>
+        <div className="info-item"><div className="il">Received</div><div className="iv">{fmtDate(i.received)}</div></div>
+        <div className="info-item">
+          <div className="il">Match</div>
+          <div className="iv"><Badge className={atsRecommendationClass(recLabel)}>{recLabel}</Badge></div>
+        </div>
+      </div>
+
+      <div className="card" style={{ boxShadow: 'none', background: 'var(--bg-sunken)', marginBottom: 20 }}>
+        <div className="card-body">
+          <div className="flex items-center gap-12" style={{ justifyContent: 'space-between', marginBottom: 12 }}>
+            <div className="fw-600"><Icon name="paperclip" /> {i.attachment}</div>
+            <button className="btn btn-secondary btn-sm" onClick={onPreview}><Icon name="eye" /> Preview</button>
+          </div>
+          <pre className="resume-thumb">{resumeText(i)}</pre>
+        </div>
+      </div>
+
+      <div className="flex gap-8" style={{ flexWrap: 'wrap' }}>
+        <button className="btn btn-primary" onClick={onImport}><Icon name="user-plus" /> Import Candidate</button>
+        <button className="btn btn-secondary" onClick={onParse}><Icon name="sparkles" /> Parse Resume</button>
+        <button className="btn btn-secondary" onClick={onAssign}><Icon name="users" /> Assign Recruiter</button>
+        <button className="btn btn-secondary" onClick={onMove}><Icon name="layers" /> Move to Pipeline</button>
+        <button className="btn btn-secondary" onClick={onNote}><Icon name="edit" /> Add Note</button>
+        <button className="btn btn-ghost" style={{ color: 'var(--danger)' }} onClick={onReject}>
+          <Icon name="x" /> Reject
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function AssignRecruiter({ item, recruiters, onClose, onSave }) {
+  const [name, setName] = useState(item.recruiter)
+  const current = recruiters.find((r) => r.name === item.recruiter)
+  return (
+    <Modal
+      title="Assign Recruiter"
+      subtitle={item.name}
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
+          <button className="btn btn-primary" onClick={() => onSave(name)}>Assign</button>
+        </>
+      }
+    >
+      <div className="form-field">
+        <label>Recruiter</label>
+        <select value={name} onChange={(e) => setName(e.target.value)}>
+          {recruiters.map((r) => <option key={r.id}>{r.name}</option>)}
+        </select>
+      </div>
+      <p className="text-muted text-sm" style={{ marginTop: 10 }}>
+        Current workload is factored automatically. This recruiter has {current?.openReqs ?? 5} open reqs.
+      </p>
+    </Modal>
+  )
+}
+
+/** The live tab: real fetch, real loading state, real error state. */
+function EmailTab({ query, jobs, updateCandidates, toast }) {
+  const qc = useQueryClient()
+  const [selectedId, setSelectedId] = useState(null)
+  const [imported, setImported] = useState(() => new Set())
+
+  const emails = query.data ?? []
+  const selected = emails.find((e) => e.id === selectedId)
+  const unread = emails.filter((e) => e.unread).length
+
+  async function sync() {
+    toast('Fetching from Outlook…', 'info')
+    const res = await qc.refetchQueries({ queryKey: qk.mailbox.messages() })
+    if (query.isError) toast('Sync failed', 'error')
+    else toast('Mailbox synced', 'success')
+    return res
+  }
+
+  function importEmail(e) {
+    const job = jobs[0]
+    if (!job) return
+    updateCandidates((cs) => [
+      {
+        id: `CAN-${5001 + cs.length}`,
+        name: e.from, initials: initialsOf(e.from), color: avatarColor(e.from),
+        email: e.fromEmail, phone: '+1 (555) 000-0000',
+        jobId: job.id, jobTitle: job.title, department: job.department,
+        experience: int(2, 10), currentCompany: pick(companies), currentTitle: job.title,
+        location: pick(locations), stage: 'Applied', status: 'Applied',
+        aiScore: e.atsScore, source: 'Microsoft Outlook', recruiter: job.recruiter, recruiterId: '',
+        applied: new Date(TODAY), education: "Bachelor's Degree",
+        skills: job.skills.slice(0, 4), rating: '4.0', salary: 130000,
+        matchedSkills: job.skills.slice(0, 3), missingSkills: job.skills.slice(3),
+        recommendation: 'Potential Match',
+        subScores: { skills: e.atsScore, experience: 80, education: 80, keywords: e.atsScore, location: 100, salary: 90 },
+        noticePeriod: '1 month', availability: '2 weeks', certifications: [],
+        favorite: false, interviewStatus: 'Not Scheduled',
+      },
+      ...cs,
+    ])
+    setImported((s) => new Set(s).add(e.id))
+    toast(`${e.from} imported from Outlook → ${job.title}`, 'success')
+  }
+
+  const isImported = (e) => imported.has(e.id)
+
+  return (
+    <>
+      <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12 }}>
+        <span className="integration-status"><span className="pulse" />Outlook · Microsoft Graph API</span>
+        <span className="text-muted text-sm">
+          {query.isPending ? 'Loading…' : query.isError ? 'Sync failed' : `${emails.length} messages · ${unread} unread`}
+        </span>
+        <button className="btn btn-secondary btn-sm" style={{ marginLeft: 'auto' }} onClick={sync}>
+          <Icon name="refresh" /> Sync Mailbox
+        </button>
+      </div>
+
+      <div className="split">
+        <div className="split-list">
+          {query.isPending && <EmptyState icon="mail" title="Loading…">Fetching mailbox from the server.</EmptyState>}
+          {query.isError && (
+            <EmptyState icon="mail" title="Couldn’t load mailbox">
+              {friendlyAuthError(query.error, 'Request failed')}
+            </EmptyState>
+          )}
+          {query.isSuccess && emails.length === 0 && (
+            <EmptyState icon="mail" title="Nothing here">No emails in the mailbox.</EmptyState>
+          )}
+          {query.isSuccess && emails.map((e) => (
+            <div
+              key={e.id}
+              className={`inbox-item${e.unread && selectedId !== e.id ? ' unread' : ''}${selectedId === e.id ? ' active' : ''}`}
+              onClick={() => setSelectedId(e.id)}
+            >
+              <Avatar name={e.from} />
+              <div className="ii-main">
+                <div className="ii-name">{e.from}</div>
+                <div className="ii-pos">{e.subject}</div>
+                <div className="ii-meta">
+                  <span className="source-chip" style={{ '--chip': '#0078d4' }}>
+                    <Icon name="mail" />Outlook
+                  </span>
+                  {isImported(e) && <Badge className="b-green">Imported</Badge>}
+                </div>
+              </div>
+              <div className="ii-time">{fmtShort(e.when)}</div>
+            </div>
+          ))}
+        </div>
+
+        <div className="split-detail">
+          {!selected ? (
+            <div style={{ padding: '100px 20px' }}>
+              <EmptyState icon="mail" title="Select an email">
+                Preview email body and resume attachments here.
+              </EmptyState>
+            </div>
+          ) : (
+            <div style={{ padding: 24 }}>
+              <div className="flex items-center gap-12" style={{ marginBottom: 6 }}>
+                <h2 style={{ fontSize: 18, flex: 1 }}>{selected.subject}</h2>
+                {isImported(selected) ? <Badge className="b-green">Imported</Badge> : <Badge className="b-blue">New</Badge>}
+              </div>
+              <div className="flex items-center gap-12" style={{ marginBottom: 20 }}>
+                <Avatar name={selected.from} />
+                <div>
+                  <div className="fw-600">{selected.from}</div>
+                  <div className="cell-sub">{selected.fromEmail} · {fmtDate(selected.when)}</div>
+                </div>
+              </div>
+
+              {/* Rendered as TEXT. This is js/inbox.js:292, the widest XSS sink
+                  in the prototype, and inbound mail is attacker-supplied. */}
+              <div className="email-preview" style={{ marginBottom: 18, whiteSpace: 'pre-wrap' }}>
+                {selected.body}
+              </div>
+
+              <div className="attach-card" style={{ marginBottom: 18 }}>
+                <span className="attach-icn"><Icon name="file" /></span>
+                <div style={{ flex: 1 }}>
+                  <div className="fw-600">{selected.attachment}</div>
+                  <div className="cell-sub">{selected.attachmentSize} · PDF</div>
+                </div>
+                <div className="flex items-center gap-8">
+                  <ScoreChip score={selected.atsScore} />
+                  <button className="btn btn-secondary btn-sm" onClick={() => toast('Opening attachment preview', 'info')}>
+                    <Icon name="eye" /> Preview
+                  </button>
+                </div>
+              </div>
+
+              <div className="flex gap-8">
+                {isImported(selected) ? (
+                  <button className="btn btn-secondary" disabled><Icon name="check" /> Already Imported</button>
+                ) : (
+                  <button className="btn btn-primary" onClick={() => importEmail(selected)}>
+                    <Icon name="user-plus" /> Import Candidate
+                  </button>
+                )}
+                <button className="btn btn-secondary" onClick={() => toast('Reply drafted', 'info')}>
+                  <Icon name="mail" /> Reply
+                </button>
+                <button className="btn btn-ghost" style={{ color: 'var(--danger)' }} onClick={() => toast('Email archived', 'info')}>
+                  <Icon name="trash" /> Archive
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/frontend/src/screens/Interviews.jsx b/frontend/src/screens/Interviews.jsx
new file mode 100644
index 0000000..7199313
--- /dev/null
+++ b/frontend/src/screens/Interviews.jsx
@@ -0,0 +1,383 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import DataTable from '../ui/DataTable'
+import Modal from '../ui/Modal'
+import { Tabs } from '../ui/Tabs'
+import { Avatar, AvatarStack, Badge, Icon, KpiCard } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { seedQuery } from '../data/seedQueries'
+import {
+  candidates as allCandidates, evalTemplates, fmtShort, interviewTypes, meetingTypes,
+} from '../data/seed'
+
+export default function Interviews() {
+  const { toast } = useToast()
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const { data: interviews = [] } = useQuery(seedQuery('interviews'))
+  const { data: jobs = [] } = useQuery(seedQuery('jobs'))
+  const { data: recruiters = [] } = useQuery(seedQuery('recruiters'))
+  const { data: managers = [] } = useQuery(seedQuery('managers'))
+
+  const [q, setQ] = useState('')
+  const [status, setStatus] = useState('')
+  const [type, setType] = useState('')
+  const [feedbackFor, setFeedbackFor] = useState(null)
+  const [scheduling, setScheduling] = useState(false)
+
+  useEffect(() => {
+    if (location.state?.openSchedule) setScheduling(true)
+  }, [location.state])
+
+  const stats = useMemo(
+    () => ({
+      scheduled: interviews.filter((i) => i.status === 'Scheduled').length,
+      completed: interviews.filter((i) => i.status === 'Completed').length,
+      today: 5,
+      cancelled: interviews.filter((i) => ['Cancelled', 'No Show'].includes(i.status)).length,
+    }),
+    [interviews],
+  )
+
+  const rows = useMemo(
+    () =>
+      interviews.filter((iv) => {
+        if (status && iv.status !== status) return false
+        if (type && iv.type !== type) return false
+        if (q && !(iv.candidate + iv.jobTitle + iv.interviewers.join(' ')).toLowerCase().includes(q.toLowerCase())) return false
+        return true
+      }),
+    [interviews, q, status, type],
+  )
+
+  const upcoming = interviews.filter((iv) => iv.status === 'Scheduled').slice(0, 4)
+
+  const columns = [
+    {
+      key: 'candidate', label: 'Candidate', sortable: true,
+      render: (iv) => (
+        <div className="user-cell">
+          <Avatar name={iv.candidate} initials={iv.candInitials} color={iv.color} />
+          <div>
+            <div className="cell-primary">{iv.candidate}</div>
+            <div className="cell-sub">{iv.jobTitle}</div>
+          </div>
+        </div>
+      ),
+    },
+    { key: 'type', label: 'Round', sortable: true, render: (iv) => <Badge className="b-indigo">{iv.type}</Badge> },
+    {
+      key: 'when', label: 'Date & Time', sortable: true, sortValue: (iv) => iv.when.getTime(),
+      render: (iv) => (
+        <>
+          <div className="text-sm fw-600">{fmtShort(iv.when)}</div>
+          <div className="cell-sub">
+            {iv.when.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })} · {iv.duration}m
+          </div>
+        </>
+      ),
+    },
+    {
+      key: 'meeting', label: 'Type',
+      render: (iv) => (
+        <span className="flex items-center gap-8">
+          <Icon name={iv.meeting === 'Video Call' ? 'video' : iv.meeting === 'Phone' ? 'phone' : 'map'} />
+          {iv.meeting}
+        </span>
+      ),
+    },
+    { key: 'interviewers', label: 'Interviewers', render: (iv) => <AvatarStack names={iv.interviewers} /> },
+    { key: 'status', label: 'Status', sortable: true, render: (iv) => <Badge>{iv.status}</Badge> },
+    { key: 'feedback', label: 'Feedback', render: (iv) => (iv.feedback ? <Badge>{iv.feedback}</Badge> : <span className="text-muted">—</span>) },
+    {
+      key: '_a', label: 'Actions', align: 'right',
+      render: (iv) => (
+        <div className="row-actions">
+          <button
+            className="act-btn" data-tip="View candidate"
+            onClick={() => navigate('/candidates', { state: { openCandidate: iv.candidateId } })}
+          >
+            <Icon name="eye" />
+          </button>
+          <button className="act-btn" data-tip="Feedback" onClick={() => setFeedbackFor(iv)}>
+            <Icon name="star" />
+          </button>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Interviews</h1>
+          <p className="page-sub">Manage and track all interview activity</p>
+        </div>
+        <div className="page-head-actions">
+          <Link className="btn btn-secondary" to="/calendar"><Icon name="calendar" /> Calendar View</Link>
+          <button className="btn btn-primary" onClick={() => setScheduling(true)}>
+            <Icon name="plus" /> Schedule Interview
+          </button>
+        </div>
+      </div>
+
+      <div className="grid g-kpi mb-18">
+        <KpiCard label="Scheduled" value={stats.scheduled} icon="calendar" tone="i-blue" />
+        <KpiCard label="Completed" value={stats.completed} icon="check-circle" tone="i-green" />
+        <KpiCard label="Today" value={stats.today} icon="clock" tone="i-purple" />
+        <KpiCard label="Cancelled / No-show" value={stats.cancelled} icon="x-circle" tone="i-red" />
+      </div>
+
+      <div className="grid g-2-1">
+        <div className="card">
+          <div className="card-head"><div><h3>All Interviews</h3></div></div>
+          <div className="card-body" style={{ paddingBottom: 0 }}>
+            <div className="toolbar">
+              <div className="toolbar-search">
+                <Icon name="search" />
+                <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search candidate or interviewer…" />
+              </div>
+              <select className="select" value={status} onChange={(e) => setStatus(e.target.value)}>
+                <option value="">All Status</option>
+                {['Scheduled', 'Completed', 'Cancelled', 'No Show'].map((s) => <option key={s}>{s}</option>)}
+              </select>
+              <select className="select" value={type} onChange={(e) => setType(e.target.value)}>
+                <option value="">All Rounds</option>
+                {interviewTypes.map((t) => <option key={t}>{t}</option>)}
+              </select>
+            </div>
+          </div>
+          <DataTable columns={columns} rows={rows} pageSize={8} />
+        </div>
+
+        <div className="card" style={{ alignSelf: 'start' }}>
+          <div className="card-head"><div><h3>Up Next</h3><span className="ch-sub">Scheduled sessions</span></div></div>
+          <div className="card-body">
+            <div className="list-tight">
+              {upcoming.map((iv) => (
+                <div className="list-row" key={iv.id}>
+                  <Avatar name={iv.candidate} initials={iv.candInitials} color={iv.color} />
+                  <div className="lr-main">
+                    <div className="lr-title">{iv.candidate}</div>
+                    <div className="lr-sub">{iv.type} · {iv.meeting}</div>
+                  </div>
+                  <div className="lr-right">
+                    <div className="fw-600 text-sm">{fmtShort(iv.when)}</div>
+                    <div className="lr-sub">
+                      {iv.when.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {feedbackFor && (
+        <Scorecard
+          interview={feedbackFor}
+          jobs={jobs}
+          onClose={() => setFeedbackFor(null)}
+          onSubmit={() => { setFeedbackFor(null); toast('Scorecard submitted', 'success') }}
+          toast={toast}
+        />
+      )}
+
+      {scheduling && (
+        <ScheduleForm
+          people={[...recruiters, ...managers]}
+          onClose={() => setScheduling(false)}
+          onSubmit={() => { setScheduling(false); toast('Interview scheduled & invite sent', 'success') }}
+        />
+      )}
+    </div>
+  )
+}
+
+/** Star rating — replaces the imperative Interviews._bindStars() DOM toggling. */
+function Stars({ value, onChange }) {
+  return (
+    <div className="rating-stars">
+      {[1, 2, 3, 4, 5].map((n) => (
+        <span
+          key={n}
+          className={`rs${n <= value ? ' on' : ''}`}
+          onClick={() => onChange(n)}
+          role="radio"
+          aria-checked={n === value}
+          tabIndex={0}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onChange(n) } }}
+        >
+          <Icon name="star" />
+        </span>
+      ))}
+    </div>
+  )
+}
+
+function CriteriaList({ criteria, ratings, setRating }) {
+  return criteria.map((c) => (
+    <div className="setting-row" style={{ padding: '12px 0' }} key={c}>
+      <div className="setting-info"><h4>{c}</h4></div>
+      <Stars value={ratings[c] ?? 0} onChange={(v) => setRating(c, v)} />
+    </div>
+  ))
+}
+
+function Scorecard({ interview: iv, jobs, onClose, onSubmit, toast }) {
+  const job = jobs.find((j) => j.title === iv.jobTitle)
+  const dept = job ? job.department : 'All'
+  const initial = evalTemplates.find((t) => t.dept === dept) || evalTemplates.find((t) => t.dept === 'All')
+
+  const [tab, setTab] = useState('form')
+  const [templateName, setTemplateName] = useState(initial.name)
+  const [ratings, setRatings] = useState({})
+  const [recommendation, setRecommendation] = useState('Hire')
+
+  const template = evalTemplates.find((t) => t.name === templateName) ?? initial
+  const setRating = (crit, val) => setRatings((r) => ({ ...r, [crit]: val }))
+
+  return (
+    <Modal
+      title="Interview Evaluation"
+      subtitle={`${iv.id} · ${iv.type}`}
+      size="modal-lg"
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
+          <button className="btn btn-primary" onClick={onSubmit}><Icon name="check" /> Submit Scorecard</button>
+        </>
+      }
+    >
+      <div className="flex items-center gap-12 mb-18">
+        <Avatar name={iv.candidate} initials={iv.candInitials} color={iv.color} className="avatar-lg" />
+        <div style={{ flex: 1 }}>
+          <div className="ph-name" style={{ fontSize: 17 }}>{iv.candidate}</div>
+          <div className="ph-role">{iv.type} · {iv.jobTitle}</div>
+        </div>
+        <Badge>{iv.status}</Badge>
+      </div>
+
+      <div style={{ marginBottom: 18 }}>
+        <Tabs
+          value={tab}
+          onChange={setTab}
+          tabs={[
+            { key: 'form', label: 'Dynamic Form' },
+            { key: 'upload', label: 'Upload Sheet' },
+            { key: 'both', label: 'Both' },
+          ]}
+        />
+      </div>
+
+      {tab === 'form' && (
+        <div className="tab-pane active">
+          <div className="form-field" style={{ marginBottom: 8 }}>
+            <label>Evaluation Template</label>
+            <select value={templateName} onChange={(e) => setTemplateName(e.target.value)}>
+              {evalTemplates.map((t) => <option key={t.name}>{t.name}</option>)}
+            </select>
+          </div>
+          <CriteriaList criteria={template.criteria} ratings={ratings} setRating={setRating} />
+          <div className="form-field" style={{ marginTop: 8 }}>
+            <label>Comments</label>
+            <textarea placeholder="Strengths, concerns, and areas explored…" />
+          </div>
+          <div className="form-field" style={{ marginTop: 14 }}>
+            <label>Overall Recommendation</label>
+            <div className="seg" style={{ marginTop: 4 }}>
+              {['Hire', 'Hold', 'Reject'].map((r) => (
+                <button
+                  type="button" key={r}
+                  className={r === recommendation ? 'active' : ''}
+                  onClick={() => setRecommendation(r)}
+                >
+                  {r}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {tab === 'upload' && (
+        <div className="tab-pane active">
+          <div className="dropzone" style={{ padding: 32 }} onClick={() => toast('File picker (demo)', 'info')}>
+            <div className="dz-icn"><Icon name="upload" /></div>
+            <h3 style={{ fontSize: 15 }}>Upload evaluation sheet</h3>
+            <p className="text-muted">PDF, DOC, or DOCX · scanned scorecards supported</p>
+            <div className="flex items-center gap-8" style={{ justifyContent: 'center', marginTop: 12 }}>
+              {['PDF', 'DOC', 'DOCX'].map((t) => <span className="badge b-gray badge-plain" key={t}>{t}</span>)}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {tab === 'both' && (
+        <div className="tab-pane active">
+          <p className="text-muted" style={{ marginBottom: 14 }}>
+            Capture structured ratings <b>and</b> attach a signed sheet — both are stored on the scorecard.
+          </p>
+          <CriteriaList criteria={template.criteria.slice(0, 3)} ratings={ratings} setRating={setRating} />
+          <div className="upload-row" style={{ marginTop: 12 }}>
+            <span className="attach-icn" style={{ width: 38, height: 38 }}><Icon name="file" /></span>
+            <div style={{ flex: 1 }}>
+              <div className="fw-600 text-sm">Interviewer_Scorecard.pdf</div>
+              <div className="cell-sub">Attached · 214 KB</div>
+            </div>
+            <Badge className="b-green">Uploaded</Badge>
+          </div>
+        </div>
+      )}
+    </Modal>
+  )
+}
+
+function ScheduleForm({ people, onClose, onSubmit }) {
+  return (
+    <Modal
+      title="Schedule Interview"
+      subtitle="Set up a new interview session"
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
+          <button className="btn btn-primary" onClick={onSubmit}><Icon name="calendar" /> Schedule</button>
+        </>
+      }
+    >
+      <form>
+        <div className="form-grid">
+          <div className="form-field col-span-2">
+            <label>Candidate <span className="req">*</span></label>
+            <select>{allCandidates.slice(0, 40).map((c) => <option key={c.id}>{c.name}</option>)}</select>
+          </div>
+          <div className="form-field">
+            <label>Interview Round</label>
+            <select>{interviewTypes.map((t) => <option key={t}>{t}</option>)}</select>
+          </div>
+          <div className="form-field">
+            <label>Meeting Type</label>
+            <select>{meetingTypes.map((t) => <option key={t}>{t}</option>)}</select>
+          </div>
+          <div className="form-field"><label>Date</label><input type="date" /></div>
+          <div className="form-field"><label>Time</label><input type="time" defaultValue="14:00" /></div>
+          <div className="form-field">
+            <label>Duration</label>
+            <select defaultValue="60 min"><option>30 min</option><option>45 min</option><option>60 min</option><option>90 min</option></select>
+          </div>
+          <div className="form-field">
+            <label>Interviewer</label>
+            <select>{people.map((p) => <option key={p.id}>{p.name}</option>)}</select>
+          </div>
+        </div>
+      </form>
+    </Modal>
+  )
+}
diff --git a/frontend/src/screens/JobBoard.jsx b/frontend/src/screens/JobBoard.jsx
new file mode 100644
index 0000000..620638e
--- /dev/null
+++ b/frontend/src/screens/JobBoard.jsx
@@ -0,0 +1,344 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import Chart from '../ui/Chart'
+import DataTable from '../ui/DataTable'
+import Modal from '../ui/Modal'
+import { Badge, Icon, KpiCard } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { seedQuery, useSeedMutation } from '../data/seedQueries'
+import { int, publishPlatforms, TODAY } from '../data/seed'
+
+const STEPS = ['Select Job', 'Approval', 'Platforms', 'Publish']
+
+export default function JobBoard() {
+  const { toast } = useToast()
+  const location = useLocation()
+  const { data: publishings = [] } = useQuery(seedQuery('publishings'))
+  const { data: jobs = [] } = useQuery(seedQuery('jobs'))
+  const updatePublishings = useSeedMutation('publishings')
+
+  const [publishing, setPublishing] = useState(null) // { jobId } | null
+
+  useEffect(() => {
+    if (location.state?.publishJob) setPublishing({ jobId: location.state.publishJob })
+  }, [location.state])
+
+  const totals = useMemo(
+    () =>
+      publishings.reduce(
+        (a, p) => ({ views: a.views + p.views, clicks: a.clicks + p.clicks, apps: a.apps + p.apps }),
+        { views: 0, clicks: 0, apps: 0 },
+      ),
+    [publishings],
+  )
+  const conv = totals.views ? ((totals.apps / totals.views) * 100).toFixed(1) : '0'
+
+  const platRows = useMemo(() => {
+    const agg = {}
+    for (const p of publishings) {
+      if (!agg[p.platform]) agg[p.platform] = { views: 0, clicks: 0, apps: 0, jobs: 0 }
+      agg[p.platform].views += p.views
+      agg[p.platform].clicks += p.clicks
+      agg[p.platform].apps += p.apps
+      agg[p.platform].jobs += 1
+    }
+    return Object.entries(agg).sort((a, b) => b[1].apps - a[1].apps)
+  }, [publishings])
+
+  const chartData = useMemo(
+    () => ({ labels: platRows.map((p) => p[0]), data: platRows.map((p) => p[1].apps) }),
+    [platRows],
+  )
+
+  const columns = [
+    {
+      key: 'jobTitle', label: 'Job', sortable: true,
+      render: (p) => (<><div className="cell-primary">{p.jobTitle}</div><div className="cell-sub">{p.jobId}</div></>),
+    },
+    {
+      key: 'platform', label: 'Platform', sortable: true,
+      render: (p) => {
+        const pl = publishPlatforms.find((x) => x.name === p.platform) || {}
+        return (
+          <span className="flex items-center gap-8">
+            <span className="platform-logo" style={{ width: 26, height: 26, background: pl.color || '#888' }}>
+              <Icon name={pl.icon || 'briefcase'} />
+            </span>
+            {p.platform}
+          </span>
+        )
+      },
+    },
+    {
+      key: 'status', label: 'Status', sortable: true,
+      render: (p) => (
+        <Badge className={p.status === 'Live' ? 'b-green' : p.status === 'Paused' ? 'b-amber' : 'b-blue'}>
+          {p.status}
+        </Badge>
+      ),
+    },
+    { key: 'views', label: 'Views', sortable: true, align: 'right', render: (p) => p.views.toLocaleString() },
+    { key: 'clicks', label: 'Clicks', sortable: true, align: 'right', render: (p) => p.clicks.toLocaleString() },
+    { key: 'apps', label: 'Applications', sortable: true, align: 'right', render: (p) => <b>{p.apps}</b> },
+    {
+      key: '_conv', label: 'Conversion', sortable: true, sortValue: (p) => (p.views ? p.apps / p.views : 0),
+      render: (p) => (
+        <span className="badge b-indigo badge-plain">
+          {p.views ? ((p.apps / p.views) * 100).toFixed(1) : '0.0'}%
+        </span>
+      ),
+    },
+    {
+      key: '_a', label: '', align: 'right',
+      render: (p) => (
+        <button className="act-btn" data-tip="Manage" onClick={() => toast(`Managing ${p.platform} posting`, 'info')}>
+          <Icon name="external" />
+        </button>
+      ),
+    },
+  ]
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Job Board</h1>
+          <p className="page-sub">Publish requisitions across channels and track performance</p>
+        </div>
+        <div className="page-head-actions">
+          <Link className="btn btn-secondary" to="/analytics"><Icon name="trending-up" /> Analytics</Link>
+          <button className="btn btn-primary" onClick={() => setPublishing({})}>
+            <Icon name="send" /> Publish a Job
+          </button>
+        </div>
+      </div>
+
+      <div className="grid g-kpi mb-18">
+        <KpiCard label="Total Views" value={totals.views.toLocaleString()} icon="eye" tone="i-blue" foot="across all platforms" />
+        <KpiCard
+          label="Total Clicks" value={totals.clicks.toLocaleString()} icon="target" tone="i-purple"
+          foot={`${totals.views ? ((totals.clicks / totals.views) * 100).toFixed(1) : '0.0'}% CTR`}
+        />
+        <KpiCard label="Applications" value={totals.apps.toLocaleString()} icon="users" tone="i-green" foot="from job boards" />
+        <KpiCard label="Conversion Rate" value={`${conv}%`} icon="trending-up" tone="i-teal" foot="view → application" />
+      </div>
+
+      <div className="grid g-2-1 mb-18">
+        <div className="card">
+          <div className="card-head"><div><h3>Platform Performance</h3><span className="ch-sub">Applications by channel</span></div></div>
+          <div className="card-body"><div className="chart-wrap"><Chart type="horizontalBar" data={chartData} height={300} /></div></div>
+        </div>
+        <div className="card">
+          <div className="card-head"><div><h3>Connected Platforms</h3></div></div>
+          <div className="card-body">
+            <div className="list-tight">
+              {publishPlatforms.map((p) => (
+                <div className="list-row" key={p.name}>
+                  <span className="platform-logo" style={{ background: p.color }}><Icon name={p.icon} /></span>
+                  <div className="lr-main">
+                    <div className="lr-title">{p.name}</div>
+                    <div className="lr-sub">{p.cost === 'Free' ? 'Free posting' : `Paid · ${p.cost}`}</div>
+                  </div>
+                  {p.connected ? (
+                    <Badge className="b-green">Connected</Badge>
+                  ) : (
+                    <button className="btn btn-secondary btn-sm" onClick={() => toast(`Connecting ${p.name}…`, 'info')}>
+                      Connect
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="card">
+        <div className="card-head">
+          <div>
+            <h3>Active Postings</h3>
+            <span className="ch-sub">{publishings.length} live postings across {platRows.length} platforms</span>
+          </div>
+          <button className="btn btn-secondary btn-sm" onClick={() => toast('Performance report exported', 'success')}>
+            <Icon name="download" /> Export
+          </button>
+        </div>
+        <DataTable columns={columns} rows={publishings} pageSize={8} />
+      </div>
+
+      {publishing && (
+        <PublishFlow
+          jobs={jobs}
+          initialJobId={publishing.jobId}
+          onClose={() => setPublishing(null)}
+          onPublish={(job, platforms) => {
+            updatePublishings((ps) => [
+              ...platforms.map((p) => ({
+                jobId: job.id, jobTitle: job.title, platform: p, status: 'Live',
+                views: int(0, 30), clicks: 0, apps: 0, published: new Date(TODAY),
+              })),
+              ...ps,
+            ])
+          }}
+          toast={toast}
+        />
+      )}
+    </div>
+  )
+}
+
+/** The app's only multi-step form. State lives here rather than on a global. */
+function PublishFlow({ jobs, initialJobId, onClose, onPublish, toast }) {
+  const publishable = jobs.filter((j) => j.status !== 'Draft')
+  const openJobs = jobs.filter((j) => j.status === 'Open')
+
+  const [step, setStep] = useState(1)
+  const [jobId, setJobId] = useState(initialJobId || openJobs[0]?.id || publishable[0]?.id)
+  const [platforms, setPlatforms] = useState(['Career Portal'])
+
+  const job = jobs.find((j) => j.id === jobId)
+
+  function next() {
+    if (step === 3) {
+      if (!platforms.length) {
+        toast('Select at least one platform', 'warning')
+        return
+      }
+      onPublish(job, platforms)
+    }
+    setStep((s) => s + 1)
+  }
+
+  function togglePlatform(name) {
+    setPlatforms((ps) => (ps.includes(name) ? ps.filter((p) => p !== name) : [...ps, name]))
+  }
+
+  return (
+    <Modal
+      title="Publish Job"
+      subtitle="Distribute this requisition to job boards"
+      size="modal-lg"
+      onClose={onClose}
+      footer={
+        step === 4 ? (
+          <button className="btn btn-primary" onClick={onClose}><Icon name="check" /> Done</button>
+        ) : (
+          <>
+            <button className="btn btn-secondary" onClick={() => (step === 1 ? onClose() : setStep((s) => s - 1))}>
+              {step === 1 ? 'Cancel' : 'Back'}
+            </button>
+            <button className="btn btn-primary" onClick={next}>
+              {step === 3 ? <><Icon name="send" /> Publish</> : 'Continue'}
+            </button>
+          </>
+        )
+      }
+    >
+      <div className="stepper">
+        {STEPS.map((s, i) => {
+          const n = i + 1
+          const cls = n < step ? 'done' : n === step ? 'active' : ''
+          return (
+            <div style={{ display: 'contents' }} key={s}>
+              <div className={`step ${cls}`}>
+                <div className="step-num">{n < step ? '✓' : n}</div>
+                <div className="step-label">{s}</div>
+              </div>
+              {i < STEPS.length - 1 && <div className={`step-line ${n < step ? 'done' : ''}`} />}
+            </div>
+          )
+        })}
+      </div>
+
+      {step === 1 && (
+        <>
+          <div className="form-field">
+            <label>Select requisition to publish</label>
+            <select value={jobId} onChange={(e) => setJobId(e.target.value)}>
+              {publishable.map((j) => <option key={j.id} value={j.id}>{j.title} · {j.id}</option>)}
+            </select>
+          </div>
+          {job && (
+            <div className="card" style={{ boxShadow: 'none', background: 'var(--bg-sunken)', marginTop: 16 }}>
+              <div className="card-body">
+                <div className="flex items-center gap-12">
+                  <span className="kpi-icn i-indigo" style={{ width: 44, height: 44, borderRadius: 12 }}>
+                    <Icon name="briefcase" />
+                  </span>
+                  <div>
+                    <div className="fw-600">{job.title}</div>
+                    <div className="cell-sub">{job.department} · {job.location} · {job.type}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      {step === 2 && (
+        <div className="card" style={{ boxShadow: 'none', background: 'var(--bg-sunken)' }}>
+          <div className="card-body">
+            <div className="flex items-center gap-12" style={{ marginBottom: 14 }}>
+              <span className="kpi-icn i-green" style={{ width: 44, height: 44, borderRadius: 12 }}>
+                <Icon name="check-circle" />
+              </span>
+              <div>
+                <div className="fw-600">Approval granted</div>
+                <div className="cell-sub">Approved by Department Head · Budget confirmed</div>
+              </div>
+            </div>
+            {['Hiring Manager sign-off', 'Finance budget approval', 'Compliance review'].map((label, i) => (
+              <div className="setting-row" style={{ padding: '10px 0', ...(i === 2 ? { border: 'none' } : {}) }} key={label}>
+                <div className="setting-info"><h4>{label}</h4></div>
+                <Badge className="b-green">Approved</Badge>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {step === 3 && (
+        <>
+          <p className="text-muted" style={{ marginBottom: 14 }}>
+            Select the platforms to publish this role to
+          </p>
+          <div className="grid g-2">
+            {publishPlatforms.map((p) => (
+              <div
+                key={p.name}
+                className={`platform-card${platforms.includes(p.name) ? ' selected' : ''}${!p.connected ? ' disabled' : ''}`}
+                style={!p.connected ? { opacity: 0.5, pointerEvents: 'none' } : undefined}
+                onClick={() => togglePlatform(p.name)}
+              >
+                <span className="platform-logo" style={{ background: p.color }}><Icon name={p.icon} /></span>
+                <div style={{ flex: 1 }}>
+                  <div className="fw-600">{p.name}</div>
+                  <div className="cell-sub">{p.cost === 'Free' ? 'Free' : `Paid · ${p.cost}`}</div>
+                </div>
+                <span className="platform-check"><Icon name="check" /></span>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+
+      {step === 4 && (
+        <div style={{ textAlign: 'center', padding: '20px 0' }}>
+          <div className="kpi-icn i-green" style={{ width: 64, height: 64, borderRadius: 18, margin: '0 auto 16px' }}>
+            <Icon name="check-circle" />
+          </div>
+          <h2 style={{ fontSize: 20, marginBottom: 6 }}>Published Successfully</h2>
+          <p className="text-muted" style={{ marginBottom: 20 }}>
+            {job?.title} is now live on {platforms.length} platform{platforms.length > 1 ? 's' : ''}
+          </p>
+          <div className="flex gap-8" style={{ justifyContent: 'center', flexWrap: 'wrap' }}>
+            {platforms.map((p) => <Badge className="b-green" key={p}>{p}</Badge>)}
+          </div>
+        </div>
+      )}
+    </Modal>
+  )
+}
diff --git a/frontend/src/screens/Jobs.jsx b/frontend/src/screens/Jobs.jsx
new file mode 100644
index 0000000..aa1d5a9
--- /dev/null
+++ b/frontend/src/screens/Jobs.jsx
@@ -0,0 +1,520 @@
+/* ============================================================
+   Jobs — the reference CRUD pattern for the app: filtered DataTable plus
+   view / reassign / create-edit / delete modals. The other CRUD screens follow
+   this shape.
+   ============================================================ */
+
+import { useEffect, useMemo, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import DataTable from '../ui/DataTable'
+import Modal from '../ui/Modal'
+import { Avatar, Badge, FieldError, Icon, ProgressBar } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { useFormState } from '../components/AuthLayout'
+import { seedQuery, useSeedMutation } from '../data/seedQueries'
+import {
+  businessUnits, departments, educationLevels, empTypes, fmtDate, fmtShort,
+  getRecruiterByName, grades, jobStatuses, locations, moneyK, TODAY,
+} from '../data/seed'
+
+export default function Jobs() {
+  const { toast } = useToast()
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  const { data: jobs = [] } = useQuery(seedQuery('jobs'))
+  const { data: managers = [] } = useQuery(seedQuery('managers'))
+  const { data: recruiters = [] } = useQuery(seedQuery('recruiters'))
+  const updateJobs = useSeedMutation('jobs')
+
+  const [q, setQ] = useState('')
+  const [dept, setDept] = useState('')
+  const [status, setStatus] = useState('')
+  const [type, setType] = useState('')
+
+  const [viewing, setViewing] = useState(null)
+  const [editing, setEditing] = useState(undefined) // undefined = closed, null = create
+  const [reassigning, setReassigning] = useState(null)
+  const [deleting, setDeleting] = useState(null)
+
+  // Deep-link intents from global search, the dashboard and the manager portal.
+  useEffect(() => {
+    const st = location.state
+    if (!st) return
+    if (st.openCreate) setEditing(null)
+    if (st.openJob) setViewing(jobs.find((j) => j.id === st.openJob) ?? null)
+  }, [location.state, jobs])
+
+  const rows = useMemo(
+    () =>
+      jobs.filter((j) => {
+        if (dept && j.department !== dept) return false
+        if (status && j.status !== status) return false
+        if (type && j.type !== type) return false
+        if (q) {
+          const term = q.toLowerCase()
+          const hay = (j.title + j.id + j.department + j.manager + j.recruiter + j.location).toLowerCase()
+          if (!hay.includes(term)) return false
+        }
+        return true
+      }),
+    [jobs, q, dept, status, type],
+  )
+
+  const openCount = jobs.filter((j) => j.status === 'Open').length
+
+  const columns = [
+    { key: 'id', label: 'Job ID', sortable: true, render: (j) => <span className="cell-mono">{j.id}</span> },
+    {
+      key: 'title', label: 'Job Title', sortable: true,
+      render: (j) => (
+        <>
+          <div className="cell-primary">{j.title}</div>
+          <div className="cell-sub">{j.businessUnit} · {j.grade}</div>
+        </>
+      ),
+    },
+    { key: 'department', label: 'Department', sortable: true },
+    {
+      key: 'manager', label: 'Hiring Manager', sortable: true,
+      render: (j) => (
+        <div className="user-cell"><Avatar name={j.manager} /><span>{j.manager}</span></div>
+      ),
+    },
+    { key: 'location', label: 'Location', sortable: true, render: (j) => <span className="text-muted">{j.location}</span> },
+    { key: 'type', label: 'Type', render: (j) => <Badge className="b-gray">{j.type}</Badge> },
+    { key: 'applications', label: 'Apps', sortable: true, align: 'center', render: (j) => <b>{j.applications}</b> },
+    { key: 'status', label: 'Status', sortable: true, render: (j) => <Badge>{j.status}</Badge> },
+    { key: 'created', label: 'Created', sortable: true, sortValue: (j) => j.created.getTime(), render: (j) => <span className="text-muted">{fmtShort(j.created)}</span> },
+    {
+      key: '_a', label: 'Actions', align: 'right',
+      render: (j) => (
+        <div className="row-actions">
+          <button className="act-btn" data-tip="View" onClick={() => setViewing(j)}><Icon name="eye" /></button>
+          <button className="act-btn" data-tip="Publish" onClick={() => navigate('/jobboard', { state: { publishJob: j.id } })}><Icon name="send" /></button>
+          <button className="act-btn" data-tip="Edit" onClick={() => setEditing(j)}><Icon name="edit" /></button>
+          <button className="act-btn danger" data-tip="Delete" onClick={() => setDeleting(j)}><Icon name="trash" /></button>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Jobs</h1>
+          <p className="page-sub">{jobs.length} requisitions · {openCount} currently open</p>
+        </div>
+        <div className="page-head-actions">
+          <button className="btn btn-secondary" onClick={() => toast('Jobs exported to CSV', 'success')}>
+            <Icon name="download" /> Export
+          </button>
+          <button className="btn btn-primary" onClick={() => setEditing(null)}>
+            <Icon name="plus" /> Create Job
+          </button>
+        </div>
+      </div>
+
+      <div className="card">
+        <div className="card-body" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="toolbar-search">
+              <Icon name="search" />
+              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search jobs, IDs, managers…" />
+            </div>
+            <select className="select" value={dept} onChange={(e) => setDept(e.target.value)}>
+              <option value="">All Departments</option>
+              {departments.map((d) => <option key={d}>{d}</option>)}
+            </select>
+            <select className="select" value={status} onChange={(e) => setStatus(e.target.value)}>
+              <option value="">All Status</option>
+              {jobStatuses.map((s) => <option key={s}>{s}</option>)}
+            </select>
+            <select className="select" value={type} onChange={(e) => setType(e.target.value)}>
+              <option value="">All Types</option>
+              {empTypes.map((t) => <option key={t}>{t}</option>)}
+            </select>
+          </div>
+        </div>
+        <DataTable columns={columns} rows={rows} pageSize={8} />
+      </div>
+
+      {viewing && (
+        <JobDetail
+          job={viewing}
+          onClose={() => setViewing(null)}
+          onEdit={() => { const j = viewing; setViewing(null); setEditing(j) }}
+          onPublish={() => { const id = viewing.id; setViewing(null); navigate('/jobboard', { state: { publishJob: id } }) }}
+          onReassign={() => { const j = viewing; setViewing(null); setReassigning(j) }}
+        />
+      )}
+
+      {editing !== undefined && (
+        <JobForm
+          job={editing}
+          managers={managers}
+          recruiters={recruiters}
+          count={jobs.length}
+          onClose={() => setEditing(undefined)}
+          onSave={(next, isEdit) => {
+            updateJobs((js) => (isEdit ? js.map((j) => (j.id === next.id ? next : j)) : [next, ...js]))
+            setEditing(undefined)
+            toast(isEdit ? 'Job updated successfully' : 'Job created successfully', 'success')
+          }}
+          onInvalid={() => toast('Please fix the highlighted fields', 'error')}
+        />
+      )}
+
+      {reassigning && (
+        <Reassign
+          job={reassigning}
+          recruiters={recruiters}
+          onClose={() => setReassigning(null)}
+          onSave={(name) => {
+            updateJobs((js) => js.map((j) => (j.id === reassigning.id ? { ...j, recruiter: name } : j)))
+            setReassigning(null)
+            toast('Recruiter reassigned', 'success')
+          }}
+        />
+      )}
+
+      {deleting && (
+        <Modal
+          title="Confirm Deletion"
+          onClose={() => setDeleting(null)}
+          footer={
+            <>
+              <button className="btn btn-secondary" onClick={() => setDeleting(null)}>Cancel</button>
+              <button
+                className="btn btn-danger"
+                onClick={() => {
+                  updateJobs((js) => js.filter((j) => j.id !== deleting.id))
+                  setDeleting(null)
+                  toast('Job deleted', 'success')
+                }}
+              >
+                <Icon name="trash" /> Delete Job
+              </button>
+            </>
+          }
+        >
+          <div className="flex gap-16 items-center">
+            <span className="kpi-icn i-red" style={{ width: 48, height: 48, borderRadius: 12, flexShrink: 0 }}>
+              <Icon name="trash" />
+            </span>
+            <div>
+              <p style={{ fontWeight: 600, fontSize: 15 }}>Delete “{deleting.title}”?</p>
+              <p className="text-muted" style={{ marginTop: 4 }}>
+                This will permanently remove requisition {deleting.id} and its {deleting.applications} applications.
+                This action cannot be undone.
+              </p>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </div>
+  )
+}
+
+const SECTION_LABEL = {
+  fontSize: 12, color: 'var(--text-3)', fontWeight: 600,
+  textTransform: 'uppercase', marginBottom: 6,
+}
+
+function JobDetail({ job: j, onClose, onEdit, onPublish, onReassign }) {
+  const r = getRecruiterByName(j.recruiter)
+  const loadCls = r ? (r.workload > 80 ? 'b-red' : r.workload > 60 ? 'b-amber' : 'b-green') : ''
+
+  return (
+    <Modal
+      title="Job Details"
+      subtitle={j.id}
+      size="modal-lg"
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose}>Close</button>
+          <button className="btn btn-secondary" onClick={onPublish}><Icon name="send" /> Publish</button>
+          <button className="btn btn-primary" onClick={onEdit}><Icon name="edit" /> Edit Job</button>
+        </>
+      }
+    >
+      <div className="flex items-center gap-16 mb-18">
+        <span className="kpi-icn i-indigo" style={{ width: 52, height: 52, borderRadius: 14 }}>
+          <Icon name="briefcase" />
+        </span>
+        <div>
+          <div style={{ fontSize: 19, fontWeight: 700 }}>{j.title}</div>
+          <div className="text-muted">{j.id} · {j.department} · {j.businessUnit}</div>
+        </div>
+        <div style={{ marginLeft: 'auto' }}><Badge>{j.status}</Badge></div>
+      </div>
+
+      <div className="info-grid mb-18">
+        <div className="info-item"><div className="il">Hiring Manager</div><div className="iv">{j.manager}</div></div>
+        <div className="info-item">
+          <div className="il">Assigned Recruiter</div>
+          <div className="iv flex items-center gap-8">
+            {j.recruiter}
+            {r && <span className={`badge ${loadCls} badge-plain`} style={{ fontSize: 10 }}>{r.workload}% load</span>}
+            <button className="link-btn" onClick={onReassign}>Reassign</button>
+          </div>
+        </div>
+        <div className="info-item"><div className="il">Location</div><div className="iv">{j.location}</div></div>
+        <div className="info-item"><div className="il">Employment Type</div><div className="iv">{j.type}</div></div>
+        <div className="info-item"><div className="il">Grade</div><div className="iv">{j.grade}</div></div>
+        <div className="info-item"><div className="il">Vacancies</div><div className="iv">{j.vacancies}</div></div>
+        <div className="info-item"><div className="il">Salary Range</div><div className="iv">{moneyK(j.salaryMin)} – {moneyK(j.salaryMax)}</div></div>
+        <div className="info-item"><div className="il">Experience</div><div className="iv">{j.experience}</div></div>
+        <div className="info-item"><div className="il">Education</div><div className="iv">{j.education}</div></div>
+        <div className="info-item"><div className="il">Deadline</div><div className="iv">{fmtDate(j.deadline)}</div></div>
+      </div>
+
+      <div className="divider" />
+      <div style={{ marginBottom: 16 }}>
+        <div style={SECTION_LABEL}>Description</div>
+        <p style={{ color: 'var(--text-2)' }}>{j.description}</p>
+      </div>
+      <div style={{ marginBottom: 16 }}>
+        <div style={SECTION_LABEL}>Key Responsibilities</div>
+        <ul style={{ paddingLeft: 18, color: 'var(--text-2)' }}>
+          {j.responsibilities.map((x) => <li key={x}>{x}</li>)}
+        </ul>
+      </div>
+      <div style={{ marginBottom: 16 }}>
+        <div style={SECTION_LABEL}>Required Skills</div>
+        <div className="k-tags">{j.skills.map((s) => <span className="tag" key={s}>{s}</span>)}</div>
+      </div>
+      <div>
+        <div style={SECTION_LABEL}>Benefits</div>
+        <div className="k-tags">{j.benefits.map((s) => <span className="tag" key={s}>{s}</span>)}</div>
+      </div>
+
+      <div className="divider" />
+      <div className="flex items-center gap-12">
+        <span className="text-muted text-sm">Hiring progress</span>
+        <div style={{ flex: 1 }}><ProgressBar pct={j.progress} /></div>
+        <span className="fw-600">{j.progress}%</span>
+      </div>
+    </Modal>
+  )
+}
+
+function Reassign({ job, recruiters, onClose, onSave }) {
+  const [name, setName] = useState(job.recruiter)
+  return (
+    <Modal
+      title="Reassign Recruiter"
+      subtitle={job.title}
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
+          <button className="btn btn-primary" onClick={() => onSave(name)}>Reassign</button>
+        </>
+      }
+    >
+      <div className="form-field">
+        <label>Assigned Recruiter</label>
+        <select value={name} onChange={(e) => setName(e.target.value)}>
+          {recruiters.map((r) => (
+            <option key={r.id} value={r.name}>{r.name} — {r.workload}% load</option>
+          ))}
+        </select>
+      </div>
+      <p className="text-muted text-sm" style={{ marginTop: 10 }}>
+        Workload is recalculated automatically across the recruiter’s assigned requisitions.
+      </p>
+    </Modal>
+  )
+}
+
+function JobForm({ job, managers, recruiters, count, onClose, onSave, onInvalid }) {
+  const isEdit = Boolean(job)
+  const form = useFormState({
+    title: job?.title ?? '',
+    department: job?.department ?? departments[0],
+    businessUnit: job?.businessUnit ?? businessUnits[0],
+    grade: job?.grade ?? grades[0],
+    type: job?.type ?? empTypes[0],
+    manager: job?.manager ?? managers[0]?.name ?? '',
+    recruiter: job?.recruiter ?? recruiters[0]?.name ?? '',
+    salaryMin: job?.salaryMin ?? '',
+    salaryMax: job?.salaryMax ?? '',
+    experience: job?.experience ?? '',
+    education: job?.education ?? educationLevels[0],
+    location: job?.location ?? locations[0],
+    vacancies: job?.vacancies ?? 1,
+    description: job?.description ?? '',
+    responsibilities: job ? job.responsibilities.join('\n') : '',
+    skills: job ? job.skills.join(', ') : '',
+    benefits: job ? job.benefits.join(', ') : '',
+    deadline: '',
+    status: job?.status ?? 'Open',
+  })
+
+  function submit() {
+    const v = form.values
+    const errors = {}
+    if (!v.title.trim()) errors.title = 'Job title is required'
+    if (!v.description.trim()) errors.description = 'Description is required'
+    if (!v.salaryMin || Number(v.salaryMin) <= 0) errors.salaryMin = 'Enter a valid amount'
+    form.setErrors(errors)
+    if (Object.keys(errors).length) {
+      onInvalid()
+      return
+    }
+
+    const skills = v.skills.split(',').map((s) => s.trim()).filter(Boolean)
+    const benefits = v.benefits.split(',').map((s) => s.trim()).filter(Boolean)
+    const responsibilities = v.responsibilities.split('\n').map((s) => s.trim()).filter(Boolean)
+    const salaryMin = Number(v.salaryMin)
+    const salaryMax = Number(v.salaryMax) || salaryMin + 20000
+
+    if (isEdit) {
+      onSave(
+        {
+          ...job,
+          title: v.title, department: v.department, businessUnit: v.businessUnit, grade: v.grade,
+          type: v.type, manager: v.manager, recruiter: v.recruiter, salaryMin, salaryMax,
+          experience: v.experience, education: v.education, location: v.location,
+          vacancies: Number(v.vacancies) || 1, description: v.description, responsibilities,
+          skills: skills.length ? skills : job.skills,
+          benefits: benefits.length ? benefits : job.benefits,
+          status: v.status,
+        },
+        true,
+      )
+      return
+    }
+
+    onSave(
+      {
+        id: `JOB-${1001 + count}`,
+        title: v.title, department: v.department, businessUnit: v.businessUnit, grade: v.grade,
+        manager: v.manager, managerId: '', recruiter: v.recruiter, recruiterId: '',
+        location: v.location, type: v.type, vacancies: Number(v.vacancies) || 1,
+        applications: 0, status: v.status, created: new Date(TODAY),
+        deadline: v.deadline ? new Date(v.deadline) : new Date('2026-08-09'),
+        salaryMin, salaryMax,
+        experience: v.experience || '3+ years', education: v.education,
+        skills, benefits, description: v.description,
+        responsibilities: responsibilities.length ? responsibilities : ['Own key projects'],
+        progress: 0,
+      },
+      false,
+    )
+  }
+
+  const field = (name) => ({
+    value: form.values[name],
+    onChange: (e) => form.setField(name, e.target.value),
+  })
+
+  return (
+    <Modal
+      title={isEdit ? 'Edit Job' : 'Create New Job'}
+      subtitle={isEdit ? job.id : 'Fill in the details to post a requisition'}
+      size="modal-lg"
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
+          <button className="btn btn-primary" onClick={submit}>
+            <Icon name="check" /> {isEdit ? 'Save Changes' : 'Create Job'}
+          </button>
+        </>
+      }
+    >
+      <form noValidate onSubmit={(e) => { e.preventDefault(); submit() }}>
+        <div className="form-grid">
+          <div className="form-field col-span-2">
+            <label>Job Title <span className="req">*</span></label>
+            <input {...field('title')} className={form.errors.title ? 'err' : ''} placeholder="e.g. Senior Product Designer" />
+            <FieldError>{form.errors.title}</FieldError>
+          </div>
+
+          <div className="form-field">
+            <label>Department <span className="req">*</span></label>
+            <select {...field('department')}>{departments.map((d) => <option key={d}>{d}</option>)}</select>
+          </div>
+          <div className="form-field">
+            <label>Business Unit</label>
+            <select {...field('businessUnit')}>{businessUnits.map((b) => <option key={b}>{b}</option>)}</select>
+          </div>
+          <div className="form-field">
+            <label>Grade</label>
+            <select {...field('grade')}>{grades.map((g) => <option key={g}>{g}</option>)}</select>
+          </div>
+          <div className="form-field">
+            <label>Employment Type</label>
+            <select {...field('type')}>{empTypes.map((t) => <option key={t}>{t}</option>)}</select>
+          </div>
+          <div className="form-field">
+            <label>Hiring Manager <span className="req">*</span></label>
+            <select {...field('manager')}>{managers.map((m) => <option key={m.id}>{m.name}</option>)}</select>
+          </div>
+          <div className="form-field">
+            <label>Recruiter <span className="req">*</span></label>
+            <select {...field('recruiter')}>{recruiters.map((r) => <option key={r.id}>{r.name}</option>)}</select>
+          </div>
+
+          <div className="form-field">
+            <label>Salary Min ($) <span className="req">*</span></label>
+            <input type="number" {...field('salaryMin')} className={form.errors.salaryMin ? 'err' : ''} placeholder="90000" />
+            <FieldError>{form.errors.salaryMin}</FieldError>
+          </div>
+          <div className="form-field">
+            <label>Salary Max ($)</label>
+            <input type="number" {...field('salaryMax')} placeholder="130000" />
+          </div>
+          <div className="form-field">
+            <label>Experience</label>
+            <input {...field('experience')} placeholder="5+ years" />
+          </div>
+          <div className="form-field">
+            <label>Education</label>
+            <select {...field('education')}>{educationLevels.map((e) => <option key={e}>{e}</option>)}</select>
+          </div>
+          <div className="form-field">
+            <label>Location <span className="req">*</span></label>
+            <select {...field('location')}>{locations.map((l) => <option key={l}>{l}</option>)}</select>
+          </div>
+          <div className="form-field">
+            <label>Vacancies</label>
+            <input type="number" min="1" {...field('vacancies')} />
+          </div>
+
+          <div className="form-field col-span-2">
+            <label>Job Description <span className="req">*</span></label>
+            <textarea {...field('description')} className={form.errors.description ? 'err' : ''} placeholder="Describe the role…" />
+            <FieldError>{form.errors.description}</FieldError>
+          </div>
+          <div className="form-field col-span-2">
+            <label>Responsibilities</label>
+            <textarea {...field('responsibilities')} placeholder="One per line…" />
+          </div>
+          <div className="form-field col-span-2">
+            <label>Required Skills</label>
+            <input {...field('skills')} placeholder="React, TypeScript, System Design" />
+          </div>
+          <div className="form-field col-span-2">
+            <label>Benefits</label>
+            <input {...field('benefits')} placeholder="Equity, 401(k), Unlimited PTO" />
+          </div>
+          <div className="form-field">
+            <label>Deadline</label>
+            <input type="date" {...field('deadline')} />
+          </div>
+          <div className="form-field">
+            <label>Status</label>
+            <select {...field('status')}>{jobStatuses.map((s) => <option key={s}>{s}</option>)}</select>
+          </div>
+        </div>
+      </form>
+    </Modal>
+  )
+}
diff --git a/frontend/src/screens/Managers.jsx b/frontend/src/screens/Managers.jsx
new file mode 100644
index 0000000..11a4d3e
--- /dev/null
+++ b/frontend/src/screens/Managers.jsx
@@ -0,0 +1,163 @@
+import { useEffect, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import Modal from '../ui/Modal'
+import { Avatar, Badge, Icon } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { seedQuery } from '../data/seedQueries'
+
+export default function Managers() {
+  const { toast } = useToast()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { data: managers = [] } = useQuery(seedQuery('managers'))
+  const { data: jobs = [] } = useQuery(seedQuery('jobs'))
+  const [detail, setDetail] = useState(null)
+
+  // Global search navigates here with the manager to open — replaces the old
+  // App.searchGo(route, cb) + setTimeout(cb, 120) hack.
+  useEffect(() => {
+    const id = location.state?.openManager
+    if (id) setDetail(managers.find((m) => m.id === id) ?? null)
+  }, [location.state, managers])
+
+  const totalReqs = managers.reduce((s, m) => s + m.openReqs, 0)
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Hiring Managers</h1>
+          <p className="page-sub">{managers.length} managers · {totalReqs} active requisitions</p>
+        </div>
+        <div className="page-head-actions">
+          <button className="btn btn-primary" onClick={() => toast('Invite manager', 'info')}>
+            <Icon name="plus" /> Add Manager
+          </button>
+        </div>
+      </div>
+
+      <div className="grid g-3">
+        {managers.map((m) => (
+          <div className="card" key={m.id}>
+            <div className="card-body">
+              <div className="flex items-center gap-12" style={{ marginBottom: 14 }}>
+                <Avatar name={m.name} initials={m.initials} color={m.color} className="avatar-lg" />
+                <div style={{ flex: 1 }}>
+                  <div className="lr-title">{m.name}</div>
+                  <div className="lr-sub">{m.title}</div>
+                </div>
+              </div>
+              <div className="grid g-2" style={{ gap: 10, marginBottom: 14 }}>
+                <div className="stat-mini"><span className="stat-mini-val">{m.openReqs}</span><span className="stat-mini-lbl">Open Reqs</span></div>
+                <div className="stat-mini"><span className="stat-mini-val">{m.teamSize}</span><span className="stat-mini-lbl">Team Size</span></div>
+              </div>
+              <div className="divider" style={{ margin: '12px 0' }} />
+              <div className="flex items-center" style={{ justifyContent: 'space-between' }}>
+                <span className="cell-sub"><Icon name="mail" /> {m.email.split('@')[0]}</span>
+                <button className="btn btn-ghost btn-sm" onClick={() => setDetail(m)}>View</button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {detail && (
+        <ManagerDetail
+          manager={detail}
+          jobs={jobs.filter((j) => j.manager === detail.name)}
+          onClose={() => setDetail(null)}
+          navigate={navigate}
+          toast={toast}
+        />
+      )}
+    </div>
+  )
+}
+
+function ManagerDetail({ manager: m, jobs, onClose, navigate, toast }) {
+  const go = (path, state) => {
+    onClose()
+    navigate(path, { state })
+  }
+
+  return (
+    <Modal
+      title="Hiring Manager"
+      subtitle={m.id}
+      size="modal-lg"
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose}>Close</button>
+          <button className="btn btn-primary" onClick={() => toast('Message sent', 'success')}>
+            <Icon name="mail" /> Message
+          </button>
+        </>
+      }
+    >
+      <div className="profile-hero" style={{ marginBottom: 18 }}>
+        <Avatar name={m.name} initials={m.initials} color={m.color} className="avatar-lg" />
+        <div>
+          <div className="ph-name">{m.name}</div>
+          <div className="ph-role">{m.title}</div>
+          <div className="ph-tags">
+            <Badge className="b-indigo">{m.department}</Badge>
+            <span className="badge b-gray badge-plain">{m.teamSize} reports</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid g-3" style={{ marginBottom: 18 }}>
+        <div className="stat-mini"><span className="stat-mini-val">{m.openReqs}</span><span className="stat-mini-lbl">Open Reqs</span></div>
+        <div className="stat-mini"><span className="stat-mini-val">{jobs.length}</span><span className="stat-mini-lbl">Total Jobs</span></div>
+        <div className="stat-mini">
+          <span className="stat-mini-val">{jobs.reduce((s, j) => s + j.applications, 0)}</span>
+          <span className="stat-mini-lbl">Applications</span>
+        </div>
+      </div>
+
+      <div className="form-section-title" style={{ marginTop: 0 }}>Hiring Manager Portal</div>
+      <div className="grid g-2" style={{ gap: 10, marginBottom: 16 }}>
+        <button className="btn btn-secondary" onClick={() => go('/jobs', { openCreate: true })}>
+          <Icon name="plus" /> Raise Requisition
+        </button>
+        <button className="btn btn-secondary" onClick={() => go('/candidates')}>
+          <Icon name="users" /> Review Candidates
+        </button>
+        <button className="btn btn-secondary" onClick={() => go('/interviews', { openSchedule: true })}>
+          <Icon name="calendar" /> Schedule Interview
+        </button>
+        <button className="btn btn-secondary" onClick={() => go('/offers')}>
+          <Icon name="check-circle" /> Approve Offers
+        </button>
+      </div>
+
+      <div className="form-section-title">Requisitions</div>
+      <div className="list-tight">
+        {jobs.length === 0 ? (
+          <p className="text-muted">No requisitions</p>
+        ) : (
+          jobs.map((j) => (
+            <div
+              key={j.id}
+              className="list-row"
+              style={{ cursor: 'pointer' }}
+              onClick={() => go('/jobs', { openJob: j.id })}
+            >
+              <span className="kpi-icn i-indigo" style={{ width: 36, height: 36, borderRadius: 9 }}>
+                <Icon name="briefcase" />
+              </span>
+              <div className="lr-main">
+                <div className="lr-title">{j.title}</div>
+                <div className="lr-sub">{j.applications} applications</div>
+              </div>
+              <Badge>{j.status}</Badge>
+            </div>
+          ))
+        )}
+      </div>
+    </Modal>
+  )
+}
diff --git a/frontend/src/screens/Notifications.jsx b/frontend/src/screens/Notifications.jsx
new file mode 100644
index 0000000..3d61fd6
--- /dev/null
+++ b/frontend/src/screens/Notifications.jsx
@@ -0,0 +1,57 @@
+import { useQuery } from '@tanstack/react-query'
+import { Icon } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { seedQuery, useSeedMutation } from '../data/seedQueries'
+
+export default function Notifications() {
+  const { toast } = useToast()
+  const { data: notifications = [] } = useQuery(seedQuery('notifications'))
+  const update = useSeedMutation('notifications')
+
+  // Marking one read used to be `this.classList.remove('unread')` — a DOM edit
+  // the badge count never saw. Writing to the cache keeps the sidebar in sync.
+  const markOne = (i) => update((ns) => ns.map((n, j) => (j === i ? { ...n, unread: false } : n)))
+  const markAll = () => {
+    update((ns) => ns.map((n) => ({ ...n, unread: false })))
+    toast('All notifications marked as read', 'success')
+  }
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Notifications</h1>
+          <p className="page-sub">Stay on top of hiring activity</p>
+        </div>
+        <div className="page-head-actions">
+          <button className="btn btn-secondary" onClick={markAll}><Icon name="check" /> Mark all read</button>
+          <button className="btn btn-ghost" onClick={() => toast('Notification settings', 'info')}>
+            <Icon name="more" />
+          </button>
+        </div>
+      </div>
+
+      <div className="card">
+        <div className="list-tight" style={{ padding: 0 }}>
+          {notifications.map((n, i) => (
+            <div
+              key={n.id ?? `${n.title}-${i}`}
+              className={`notif-row${n.unread ? ' unread' : ''}`}
+              onClick={() => markOne(i)}
+            >
+              <span className={`notif-icn ${n.color}`}><Icon name={n.icon} /></span>
+              <div className="notif-body">
+                <div className="notif-title">{n.title}</div>
+                <div className="notif-text">{n.text}</div>
+                <div className="notif-time">{n.time}</div>
+              </div>
+              {n.unread && (
+                <span className="dot dot-blue" style={{ position: 'static', border: 'none', alignSelf: 'center' }} />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/screens/Offers.jsx b/frontend/src/screens/Offers.jsx
new file mode 100644
index 0000000..4cc4d0a
--- /dev/null
+++ b/frontend/src/screens/Offers.jsx
@@ -0,0 +1,259 @@
+import { useMemo, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+
+import DataTable from '../ui/DataTable'
+import Modal from '../ui/Modal'
+import { Avatar, Badge, FieldError, Icon, KpiCard } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { seedQuery, useSeedMutation } from '../data/seedQueries'
+import { useFormState } from '../components/AuthLayout'
+import { fmtDate, fmtShort, money, TODAY } from '../data/seed'
+
+export default function Offers() {
+  const { toast } = useToast()
+  const { data: offers = [] } = useQuery(seedQuery('offers'))
+  const { data: candidates = [] } = useQuery(seedQuery('candidates'))
+  const updateOffers = useSeedMutation('offers')
+
+  const [q, setQ] = useState('')
+  const [status, setStatus] = useState('')
+  const [viewing, setViewing] = useState(null)
+  const [creating, setCreating] = useState(false)
+
+  const stats = useMemo(() => {
+    const decided = offers.filter((o) => ['Accepted', 'Declined'].includes(o.status)).length
+    return {
+      sent: offers.filter((o) => o.status !== 'Draft').length,
+      accepted: offers.filter((o) => o.status === 'Accepted').length,
+      pending: offers.filter((o) => ['Sent', 'Negotiating'].includes(o.status)).length,
+      rate: Math.round((offers.filter((o) => o.status === 'Accepted').length / (decided || 1)) * 100),
+    }
+  }, [offers])
+
+  const rows = useMemo(
+    () =>
+      offers.filter((o) => {
+        if (status && o.status !== status) return false
+        if (q && !(o.candidate + o.jobTitle + o.recruiter).toLowerCase().includes(q.toLowerCase())) return false
+        return true
+      }),
+    [offers, q, status],
+  )
+
+  const columns = [
+    {
+      key: 'candidate', label: 'Candidate', sortable: true,
+      render: (o) => (
+        <div className="user-cell">
+          <Avatar name={o.candidate} initials={o.initials} color={o.color} />
+          <div>
+            <div className="cell-primary">{o.candidate}</div>
+            <div className="cell-sub">{o.jobTitle}</div>
+          </div>
+        </div>
+      ),
+    },
+    { key: 'department', label: 'Department', sortable: true },
+    { key: 'base', label: 'Base Salary', sortable: true, align: 'right', render: (o) => <b>{money(o.base)}</b> },
+    { key: 'equity', label: 'Equity', render: (o) => <span className="text-muted">{o.equity}</span> },
+    { key: 'bonus', label: 'Bonus', align: 'center', render: (o) => <span className="text-muted">{o.bonus}</span> },
+    { key: 'sent', label: 'Sent', sortable: true, sortValue: (o) => o.sent.getTime(), render: (o) => <span className="text-muted">{fmtShort(o.sent)}</span> },
+    { key: 'status', label: 'Status', sortable: true, render: (o) => <Badge>{o.status}</Badge> },
+    {
+      key: '_a', label: 'Actions', align: 'right',
+      render: (o) => (
+        <div className="row-actions">
+          <button className="act-btn" data-tip="View" onClick={() => setViewing(o)}><Icon name="eye" /></button>
+          <button className="act-btn" data-tip="Resend" onClick={() => toast(`Offer resent to ${o.candidate}`, 'info')}><Icon name="send" /></button>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Offers</h1>
+          <p className="page-sub">Track offer letters and acceptance</p>
+        </div>
+        <div className="page-head-actions">
+          <button className="btn btn-primary" onClick={() => setCreating(true)}>
+            <Icon name="plus" /> Create Offer
+          </button>
+        </div>
+      </div>
+
+      <div className="grid g-kpi mb-18">
+        <KpiCard label="Offers Sent" value={stats.sent} icon="send" tone="i-indigo" />
+        <KpiCard label="Accepted" value={stats.accepted} icon="check-circle" tone="i-green" />
+        <KpiCard label="Awaiting Response" value={stats.pending} icon="clock" tone="i-amber" />
+        <KpiCard label="Acceptance Rate" value={`${stats.rate}%`} icon="trending-up" tone="i-teal" />
+      </div>
+
+      <div className="card">
+        <div className="card-body" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="toolbar-search">
+              <Icon name="search" />
+              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search candidate or role…" />
+            </div>
+            <select className="select" value={status} onChange={(e) => setStatus(e.target.value)}>
+              <option value="">All Status</option>
+              {['Sent', 'Accepted', 'Negotiating', 'Declined', 'Draft', 'Expired'].map((s) => <option key={s}>{s}</option>)}
+            </select>
+          </div>
+        </div>
+        <DataTable columns={columns} rows={rows} pageSize={8} />
+      </div>
+
+      {viewing && <OfferDetail offer={viewing} onClose={() => setViewing(null)} toast={toast} />}
+      {creating && (
+        <CreateOffer
+          candidates={candidates}
+          onClose={() => setCreating(false)}
+          onSave={(offer) => {
+            updateOffers((os) => [offer, ...os])
+            setCreating(false)
+            toast('Offer sent successfully', 'success')
+          }}
+          toast={toast}
+        />
+      )}
+    </div>
+  )
+}
+
+function OfferDetail({ offer: o, onClose, toast }) {
+  const total = o.base + Math.round((o.base * parseInt(o.bonus, 10)) / 100)
+  return (
+    <Modal
+      title="Offer Details"
+      subtitle={o.id}
+      size="modal-lg"
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose}>Close</button>
+          <button className="btn btn-secondary" onClick={() => toast('Offer PDF downloaded', 'info')}>
+            <Icon name="download" /> Download
+          </button>
+          <button className="btn btn-primary" onClick={() => { onClose(); toast('Offer resent', 'success') }}>
+            <Icon name="send" /> Resend Offer
+          </button>
+        </>
+      }
+    >
+      <div className="flex items-center gap-12 mb-18">
+        <Avatar name={o.candidate} initials={o.initials} color={o.color} className="avatar-lg" />
+        <div>
+          <div className="ph-name" style={{ fontSize: 17 }}>{o.candidate}</div>
+          <div className="ph-role">{o.jobTitle} · {o.department}</div>
+        </div>
+        <div style={{ marginLeft: 'auto' }}><Badge>{o.status}</Badge></div>
+      </div>
+
+      <div className="card" style={{ boxShadow: 'none', background: 'var(--bg-sunken)', marginBottom: 18 }}>
+        <div className="card-body">
+          <div className="form-section-title" style={{ marginTop: 0 }}>Compensation Package</div>
+          <div className="info-grid">
+            <div className="info-item"><div className="il">Base Salary</div><div className="iv" style={{ fontSize: 18 }}>{money(o.base)}</div></div>
+            <div className="info-item"><div className="il">Annual Bonus</div><div className="iv" style={{ fontSize: 18 }}>{o.bonus}</div></div>
+            <div className="info-item"><div className="il">Equity</div><div className="iv" style={{ fontSize: 18 }}>{o.equity}</div></div>
+            <div className="info-item"><div className="il">Est. Total Cash</div><div className="iv" style={{ fontSize: 18, color: 'var(--success)' }}>{money(total)}</div></div>
+          </div>
+        </div>
+      </div>
+
+      <div className="info-grid">
+        <div className="info-item"><div className="il">Sent On</div><div className="iv">{fmtDate(o.sent)}</div></div>
+        <div className="info-item"><div className="il">Expires</div><div className="iv">{fmtDate(o.expires)}</div></div>
+        <div className="info-item"><div className="il">Recruiter</div><div className="iv">{o.recruiter}</div></div>
+        <div className="info-item"><div className="il">Offer ID</div><div className="iv mono">{o.id}</div></div>
+      </div>
+    </Modal>
+  )
+}
+
+function CreateOffer({ candidates, onClose, onSave, toast }) {
+  const eligible = candidates.filter((c) => ['Interview', 'Offer'].includes(c.stage))
+  const form = useFormState({
+    candidate: eligible[0]?.name ?? '',
+    base: '', bonus: '10', equity: '', expires: '', notes: '',
+  })
+
+  function submit() {
+    if (!form.values.base || Number(form.values.base) <= 0) {
+      form.setErrors({ base: 'Required' })
+      toast('Enter a base salary', 'error')
+      return
+    }
+    const cand = candidates.find((c) => c.name === form.values.candidate) || candidates[0]
+    onSave({
+      id: `OFR-${9001 + candidates.length}`,
+      candidate: cand.name, candidateId: cand.id, initials: cand.initials, color: cand.color,
+      jobTitle: cand.jobTitle, department: cand.department, status: 'Sent',
+      base: Number(form.values.base),
+      equity: form.values.equity || '10k RSU',
+      bonus: `${form.values.bonus || 10}%`,
+      sent: new Date(TODAY),
+      expires: form.values.expires ? new Date(form.values.expires) : new Date('2026-07-23'),
+      recruiter: cand.recruiter,
+    })
+  }
+
+  return (
+    <Modal
+      title="Create Offer"
+      subtitle="Generate and send an offer letter"
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
+          <button className="btn btn-primary" onClick={submit}><Icon name="send" /> Send Offer</button>
+        </>
+      }
+    >
+      <form noValidate onSubmit={(e) => { e.preventDefault(); submit() }}>
+        <div className="form-grid">
+          <div className="form-field col-span-2">
+            <label>Candidate <span className="req">*</span></label>
+            <select value={form.values.candidate} onChange={(e) => form.setField('candidate', e.target.value)}>
+              {eligible.map((c) => <option key={c.id}>{c.name}</option>)}
+            </select>
+          </div>
+          <div className="form-field">
+            <label>Base Salary ($) <span className="req">*</span></label>
+            <input
+              type="number" placeholder="140000"
+              className={form.errors.base ? 'err' : ''}
+              value={form.values.base}
+              onChange={(e) => form.setField('base', e.target.value)}
+            />
+            <FieldError>{form.errors.base}</FieldError>
+          </div>
+          <div className="form-field">
+            <label>Annual Bonus (%)</label>
+            <input type="number" value={form.values.bonus} onChange={(e) => form.setField('bonus', e.target.value)} />
+          </div>
+          <div className="form-field">
+            <label>Equity (RSU)</label>
+            <input placeholder="20k RSU" value={form.values.equity} onChange={(e) => form.setField('equity', e.target.value)} />
+          </div>
+          <div className="form-field">
+            <label>Expiration Date</label>
+            <input type="date" value={form.values.expires} onChange={(e) => form.setField('expires', e.target.value)} />
+          </div>
+          <div className="form-field col-span-2">
+            <label>Notes</label>
+            <textarea
+              placeholder="Additional details for the offer…"
+              value={form.values.notes}
+              onChange={(e) => form.setField('notes', e.target.value)}
+            />
+          </div>
+        </div>
+      </form>
+    </Modal>
+  )
+}
diff --git a/frontend/src/screens/Pipeline.jsx b/frontend/src/screens/Pipeline.jsx
new file mode 100644
index 0000000..f8dd88d
--- /dev/null
+++ b/frontend/src/screens/Pipeline.jsx
@@ -0,0 +1,143 @@
+import { useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import { Avatar, Icon, ScoreChip } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { seedQuery, useSeedMutation } from '../data/seedQueries'
+
+/* Stage colours reference CSS tokens so the board re-tints with the theme. */
+export const KANBAN_STAGES = [
+  { name: 'Applied', color: 'var(--stage-1)' },
+  { name: 'Screening', color: 'var(--stage-2)' },
+  { name: 'Assessment', color: 'var(--stage-3)' },
+  { name: 'Interview', color: 'var(--stage-4)' },
+  { name: 'Offer', color: 'var(--stage-5)' },
+  { name: 'Hired', color: 'var(--stage-6)' },
+  { name: 'Rejected', color: 'var(--stage-7)' },
+]
+
+/**
+ * Native HTML5 drag-and-drop, kept rather than swapped for a library. React
+ * supports draggable/onDragStart/onDragOver/onDrop as props, the frozen CSS
+ * already styles `.dragging` and `.drag-over`, and the prototype has no touch
+ * drag either — so adopting @dnd-kit would be a feature addition smuggled into
+ * a 1:1 port. If touch kanban is wanted it is a scoped follow-up confined to
+ * this file.
+ */
+export default function Pipeline() {
+  const { toast } = useToast()
+  const navigate = useNavigate()
+  const { data: candidates = [] } = useQuery(seedQuery('candidates'))
+  const { data: jobs = [] } = useQuery(seedQuery('jobs'))
+  const updateCandidates = useSeedMutation('candidates')
+
+  const [jobId, setJobId] = useState('')
+  const [draggingId, setDraggingId] = useState(null)
+  const [overStage, setOverStage] = useState(null)
+
+  const list = useMemo(
+    () => (jobId ? candidates.filter((c) => c.jobId === jobId) : candidates),
+    [candidates, jobId],
+  )
+
+  const byStage = useMemo(() => {
+    const map = Object.fromEntries(KANBAN_STAGES.map((s) => [s.name, []]))
+    for (const c of list) if (map[c.stage]) map[c.stage].push(c)
+    return map
+  }, [list])
+
+  function onDrop(stage) {
+    setOverStage(null)
+    const id = draggingId
+    setDraggingId(null)
+    if (!id) return
+    const cand = candidates.find((c) => c.id === id)
+    if (!cand || cand.stage === stage) return
+    // Mutating the cache re-renders every screen reading candidates, so the
+    // move is visible on Candidates and Talent Pool too.
+    updateCandidates((cs) => cs.map((c) => (c.id === id ? { ...c, stage, status: stage } : c)))
+    toast(`${cand.name} moved to ${stage}`, 'success')
+  }
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Pipeline</h1>
+          <p className="page-sub">Drag candidates between stages to update their status</p>
+        </div>
+        <div className="page-head-actions">
+          <select className="select" value={jobId} onChange={(e) => setJobId(e.target.value)}>
+            <option value="">All Jobs</option>
+            {jobs.filter((j) => j.status === 'Open').map((j) => (
+              <option key={j.id} value={j.id}>{j.title}</option>
+            ))}
+          </select>
+          <button
+            className="btn btn-primary"
+            onClick={() => navigate('/candidates', { state: { openAdd: true } })}
+          >
+            <Icon name="plus" /> Add Candidate
+          </button>
+        </div>
+      </div>
+
+      <div className="kanban">
+        {KANBAN_STAGES.map((st) => {
+          const cards = byStage[st.name] ?? []
+          return (
+            <div className="kanban-col" key={st.name}>
+              <div className="kanban-col-head">
+                <span className="k-dot" style={{ background: st.color }} />
+                <h4>{st.name}</h4>
+                <span className="k-count">{cards.length}</span>
+              </div>
+              <div
+                className={`kanban-cards${overStage === st.name ? ' drag-over' : ''}`}
+                onDragOver={(e) => { e.preventDefault(); setOverStage(st.name) }}
+                onDragLeave={() => setOverStage((s) => (s === st.name ? null : s))}
+                onDrop={(e) => { e.preventDefault(); onDrop(st.name) }}
+              >
+                {cards.map((c) => (
+                  <div
+                    key={c.id}
+                    className={`k-card${draggingId === c.id ? ' dragging' : ''}`}
+                    draggable
+                    onDragStart={(e) => {
+                      setDraggingId(c.id)
+                      e.dataTransfer.effectAllowed = 'move'
+                      e.dataTransfer.setData('text/plain', c.id)
+                    }}
+                    onDragEnd={() => { setDraggingId(null); setOverStage(null) }}
+                    onClick={() => {
+                      // Don't open the profile on the click that ends a drag.
+                      if (draggingId) return
+                      navigate('/candidates', { state: { openCandidate: c.id } })
+                    }}
+                  >
+                    <div className="k-card-top">
+                      <Avatar name={c.name} initials={c.initials} color={c.color} />
+                      <div>
+                        <div className="kc-name">{c.name}</div>
+                        <div className="kc-role">{c.currentTitle}</div>
+                      </div>
+                    </div>
+                    <div className="kc-role">{c.jobTitle}</div>
+                    <div className="k-tags">
+                      {c.skills.slice(0, 3).map((s) => <span className="tag" key={s}>{s}</span>)}
+                    </div>
+                    <div className="k-card-meta">
+                      <span className="cell-sub">{c.currentCompany}</span>
+                      <ScoreChip score={c.aiScore} />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/screens/Rbac.jsx b/frontend/src/screens/Rbac.jsx
new file mode 100644
index 0000000..61add3f
--- /dev/null
+++ b/frontend/src/screens/Rbac.jsx
@@ -0,0 +1,258 @@
+/* ============================================================
+   Access Control — one of the three screens with a real backend.
+
+   The prototype's 13 modules x 8 permission types map EXACTLY onto the
+   backend's 104-tag vocabulary (same modules, same actions, same order), so the
+   matrix can render real server truth instead of an invented boolean grid.
+
+   HONESTY NOTE: the prototype's "Save Changes" fired a success toast and saved
+   nothing, and its matrix gated nothing (01-repository-assessment.md §2.4). The
+   backend grants permissions through *bundles* (`roles.permissions` is a list of
+   bundle ids), not per-tag, so an arbitrary tag set is not expressible through
+   `PUT /roles/update`. Rather than reproduce a lying save button, the matrix
+   shows resolved `effective_permissions` read-only and says where they come
+   from. Creating a role is a real POST.
+   ============================================================ */
+
+import { useMemo, useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+
+import Modal from '../ui/Modal'
+import { Badge, EmptyState, FieldError, Icon } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { useFormState } from '../components/AuthLayout'
+import { qk } from '../lib/queryKeys'
+import { friendlyAuthError } from '../lib/errors'
+import * as rolesApi from '../api/roles'
+import { permTypes, rbacModules } from '../data/seed'
+
+// Prototype label -> backend module slug. Order matches, so this is positional.
+const MODULE_SLUGS = [
+  'dashboard', 'inbox', 'jobs', 'candidates', 'pipeline', 'interviews', 'assessments',
+  'offers', 'reports', 'analytics', 'job_board', 'settings', 'rbac_users',
+]
+const ACTION_SLUGS = ['view', 'create', 'edit', 'delete', 'approve', 'export', 'manage', 'configure']
+
+const ROLE_COLORS = ['var(--av-1)', 'var(--av-2)', 'var(--av-3)', 'var(--av-4)', 'var(--av-5)', 'var(--av-6)', 'var(--av-7)', 'var(--av-8)']
+
+export default function Rbac() {
+  const { toast } = useToast()
+  const qc = useQueryClient()
+  const [selectedId, setSelectedId] = useState(null)
+  const [creating, setCreating] = useState(false)
+
+  const rolesQuery = useQuery({
+    queryKey: qk.roles.list(),
+    queryFn: () => rolesApi.listRoles().then((r) => r.data ?? []),
+  })
+
+  const createRole = useMutation({
+    mutationFn: (body) => rolesApi.createRole(body),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: qk.roles.all() })
+      setCreating(false)
+      toast('Role created', 'success')
+    },
+    onError: (err) => toast(friendlyAuthError(err, 'Could not create the role.'), 'error'),
+  })
+
+  const roles = rolesQuery.data ?? []
+  const role = roles.find((r) => r.id === selectedId) ?? roles[0]
+
+  // effective_permissions is a flat list of "module.action" tags.
+  const granted = useMemo(() => new Set(role?.effective_permissions ?? []), [role])
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Access Control</h1>
+          <p className="page-sub">
+            Enterprise RBAC — roles, permission bundles and the 104-tag vocabulary, live from the server
+          </p>
+        </div>
+        <div className="page-head-actions">
+          <button className="btn btn-primary" onClick={() => setCreating(true)}>
+            <Icon name="plus" /> New Role
+          </button>
+        </div>
+      </div>
+
+      {rolesQuery.isPending && (
+        <div className="card"><div className="card-body"><EmptyState icon="clock" title="Loading roles">Fetching from the server…</EmptyState></div></div>
+      )}
+
+      {rolesQuery.isError && (
+        <div className="card">
+          <div className="card-body">
+            <EmptyState icon="alert" title="Couldn’t load roles">
+              {friendlyAuthError(rolesQuery.error, 'The server did not return the role list.')}
+              {' '}This screen needs the <code>rbac_users.view</code> permission.
+            </EmptyState>
+          </div>
+        </div>
+      )}
+
+      {rolesQuery.isSuccess && (
+        <div className="rbac-layout">
+          <div className="card" style={{ alignSelf: 'start' }}>
+            <div className="card-body" style={{ padding: 12 }}>
+              <div className="nav-section-label" style={{ padding: '6px 8px' }}>Roles</div>
+              <div className="role-list">
+                {roles.map((r, i) => (
+                  <div
+                    key={r.id}
+                    className={`role-item${r.id === role?.id ? ' active' : ''}`}
+                    onClick={() => setSelectedId(r.id)}
+                  >
+                    <span className="role-badge" style={{ background: ROLE_COLORS[i % ROLE_COLORS.length] }}>
+                      <Icon name="shield" />
+                    </span>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div className="fw-600 text-sm">{r.role_name}</div>
+                      <div className="cell-sub">
+                        {(r.effective_permissions?.length ?? 0)} permissions
+                        {r.is_system ? ' · system' : ''}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="card">
+            {role && (
+              <>
+                <div className="card-head">
+                  <div className="flex items-center gap-12">
+                    <span className="role-badge" style={{ background: ROLE_COLORS[roles.indexOf(role) % ROLE_COLORS.length] }}>
+                      <Icon name="shield" />
+                    </span>
+                    <div>
+                      <h3>{role.role_name}</h3>
+                      <span className="ch-sub">{role.description || 'No description'}</span>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-8">
+                    {role.is_system && <Badge className="b-gray">System role</Badge>}
+                    <span className="badge b-gray badge-plain">
+                      {role.effective_permissions?.length ?? 0} / 104
+                    </span>
+                  </div>
+                </div>
+
+                <div className="card-body">
+                  <p className="text-muted text-sm" style={{ marginBottom: 12 }}>
+                    <Icon name="lock" /> These are the role’s <b>resolved</b> permissions. The server grants
+                    them through permission bundles
+                    {role.bundles?.length ? ` (${role.bundles.map((b) => b.name ?? b).join(', ')})` : ''},
+                    so individual cells are not directly editable here.
+                  </p>
+                  <div className="table-wrap">
+                    <table className="rbac-matrix">
+                      <thead>
+                        <tr>
+                          <th>Module</th>
+                          {permTypes.map((p) => <th key={p}>{p}</th>)}
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {rbacModules.map((label, mi) => (
+                          <tr key={label}>
+                            <td>{label}</td>
+                            {ACTION_SLUGS.map((action, ai) => {
+                              const on = granted.has(`${MODULE_SLUGS[mi]}.${action}`)
+                              return (
+                                <td key={action}>
+                                  <span
+                                    className={`perm-check${on ? ' on' : ''}`}
+                                    title={`${MODULE_SLUGS[mi]}.${action}`}
+                                    aria-label={`${label} ${permTypes[ai]}: ${on ? 'granted' : 'not granted'}`}
+                                  >
+                                    <Icon name="check" />
+                                  </span>
+                                </td>
+                              )
+                            })}
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {creating && (
+        <CreateRole
+          busy={createRole.isPending}
+          onClose={() => setCreating(false)}
+          onSave={(body) => createRole.mutate(body)}
+        />
+      )}
+    </div>
+  )
+}
+
+function CreateRole({ busy, onClose, onSave }) {
+  const form = useFormState({ role_name: '', description: '' })
+
+  function submit() {
+    if (!form.values.role_name.trim()) {
+      form.setErrors({ role_name: 'Required' })
+      return
+    }
+    onSave({
+      role_name: form.values.role_name.trim(),
+      description: form.values.description.trim() || 'Custom role',
+      permissions: [],
+      is_active: true,
+    })
+  }
+
+  return (
+    <Modal
+      title="Create Role"
+      subtitle="Define a new access role"
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose} disabled={busy}>Cancel</button>
+          <button className="btn btn-primary" onClick={submit} disabled={busy}>
+            <Icon name="check" /> {busy ? 'Creating…' : 'Create Role'}
+          </button>
+        </>
+      }
+    >
+      <form noValidate onSubmit={(e) => { e.preventDefault(); submit() }}>
+        <div className="form-grid">
+          <div className="form-field col-span-2">
+            <label>Role Name <span className="req">*</span></label>
+            <input
+              placeholder="e.g. Regional Recruiter"
+              className={form.errors.role_name ? 'err' : ''}
+              value={form.values.role_name}
+              onChange={(e) => form.setField('role_name', e.target.value)}
+            />
+            <FieldError>{form.errors.role_name}</FieldError>
+          </div>
+          <div className="form-field col-span-2">
+            <label>Description</label>
+            <input
+              placeholder="What can this role do?"
+              value={form.values.description}
+              onChange={(e) => form.setField('description', e.target.value)}
+            />
+          </div>
+        </div>
+        <p className="text-muted text-sm" style={{ marginTop: 10 }}>
+          The role starts with no permission bundles. Assign bundles server-side to grant it access.
+        </p>
+      </form>
+    </Modal>
+  )
+}
diff --git a/frontend/src/screens/RecruiterHub.jsx b/frontend/src/screens/RecruiterHub.jsx
new file mode 100644
index 0000000..0e464a0
--- /dev/null
+++ b/frontend/src/screens/RecruiterHub.jsx
@@ -0,0 +1,181 @@
+import { useMemo, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+
+import Chart from '../ui/Chart'
+import Charts from '../lib/charts'
+import { Avatar, Badge, Icon, KpiCard } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { seedQuery } from '../data/seedQueries'
+import { analytics, int } from '../data/seed'
+
+const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+const WEEKS = ['W1', 'W2', 'W3', 'W4', 'W5']
+const STAGES = ['Applied', 'Screening', 'Assessment', 'Interview', 'Offer', 'Hired']
+const MAX_HEAT = 5
+
+const heatColor = (v) => (v === 0 ? 'var(--bg-sunken)' : `rgba(79,70,229,${0.2 + (v / MAX_HEAT) * 0.8})`)
+
+export default function RecruiterHub() {
+  const { toast } = useToast()
+  const { data: recruiters = [] } = useQuery(seedQuery('recruiters'))
+  const [recId, setRecId] = useState(null)
+
+  const r = recruiters.find((x) => x.id === recId) ?? recruiters[0]
+
+  const trendData = useMemo(
+    () =>
+      r
+        ? {
+            labels: analytics.hiringTrend.labels,
+            area: true,
+            datasets: [{ label: 'Hires', data: r.monthlyTrend, color: Charts.PALETTE[0] }],
+          }
+        : null,
+    [r],
+  )
+
+  // The prototype re-rolled these counts on every render via DB.int(). Keyed to
+  // the recruiter so they're stable while you look at one.
+  const pipelineData = useMemo(
+    () => ({ labels: STAGES, data: STAGES.map(() => int(2, 14)), colors: Charts.PALETTE }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [r?.id],
+  )
+
+  const board = useMemo(() => [...recruiters].sort((a, b) => b.hires - a.hires).slice(0, 8), [recruiters])
+
+  if (!r) return null
+
+  const slaCls = r.sla === 'On Track' ? 'b-green' : r.sla === 'At Risk' ? 'b-amber' : 'b-red'
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Recruiter Hub</h1>
+          <p className="page-sub">Personalized performance dashboard &amp; workload</p>
+        </div>
+        <div className="page-head-actions">
+          <select className="select" value={r.id} onChange={(e) => setRecId(e.target.value)}>
+            {recruiters.map((x) => <option key={x.id} value={x.id}>{x.name}</option>)}
+          </select>
+          <button className="btn btn-secondary" onClick={() => toast('Report exported', 'success')}>
+            <Icon name="download" /> Export
+          </button>
+        </div>
+      </div>
+
+      <div className="card brand-hero mb-18">
+        <div className="card-body" style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
+          <Avatar name={r.name} initials={r.initials} color="rgba(255,255,255,.18)" className="avatar-lg" />
+          <div style={{ flex: 1 }}>
+            <div style={{ fontSize: 20, fontWeight: 700 }}>{r.name}</div>
+            <div style={{ opacity: 0.85 }}>{r.department} Recruiter · ⭐ {r.rating} rating</div>
+          </div>
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ fontSize: 26, fontWeight: 800 }}>{r.workload}%</div>
+            <div style={{ opacity: 0.85, fontSize: 12 }}>Workload</div>
+          </div>
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ fontSize: 26, fontWeight: 800 }}>{r.efficiency}%</div>
+            <div style={{ opacity: 0.85, fontSize: 12 }}>Efficiency</div>
+          </div>
+          <div style={{ textAlign: 'center' }}><Badge className={slaCls}>{r.sla}</Badge></div>
+        </div>
+      </div>
+
+      <div className="grid g-kpi mb-18">
+        <KpiCard label="Open Positions" value={r.openPositions} icon="briefcase" tone="i-indigo" foot="active reqs" />
+        <KpiCard label="Closed Positions" value={r.closedPositions} icon="check-circle" tone="i-green" foot="this year" />
+        <KpiCard label="Avg Time to Hire" value={`${r.avgTimeToHire}d`} icon="clock" tone="i-teal" foot="target 30d" />
+        <KpiCard label="Avg Time to Fill" value={`${r.avgTimeToFill}d`} icon="target" tone="i-amber" foot="req → offer" />
+      </div>
+      <div className="grid g-kpi mb-18">
+        <KpiCard label="Interviews Today" value={r.interviewsToday} icon="calendar" tone="i-purple" />
+        <KpiCard label="Offers Pending" value={r.offersPending} icon="file" tone="i-blue" />
+        <KpiCard label="Awaiting Approval" value={r.jobsAwaitingApproval} icon="clock" tone="i-amber" />
+        <KpiCard label="Jobs Overdue" value={r.jobsOverdue} icon="alert" tone="i-red" />
+      </div>
+      <div className="grid g-kpi mb-18">
+        <KpiCard label="Conversion Rate" value={`${r.conversionRate}%`} icon="trending-up" tone="i-green" foot="applicant → hire" />
+        <KpiCard label="Interview Completion" value={`${r.interviewCompletion}%`} icon="check-square" tone="i-teal" />
+        <KpiCard label="Avg Response Time" value={`${r.avgResponseTime}h`} icon="zap" tone="i-purple" foot="to candidates" />
+        <KpiCard label="TAT Performance" value={`${r.tat}%`} icon="award" tone="i-indigo" foot="turnaround" />
+      </div>
+
+      <div className="grid g-2-1 mb-18">
+        <div className="card">
+          <div className="card-head"><div><h3>Monthly Hiring Trend</h3><span className="ch-sub">Hires per month</span></div></div>
+          <div className="card-body"><div className="chart-wrap"><Chart type="line" data={trendData} height={260} /></div></div>
+        </div>
+        <div className="card">
+          <div className="card-head"><div><h3>Workload Heatmap</h3><span className="ch-sub">Interview load</span></div></div>
+          <div className="card-body">
+            <div className="heatmap">
+              <div className="hm-label" />
+              {WEEKS.map((w) => <div className="hm-label" style={{ justifyContent: 'center' }} key={w}>{w}</div>)}
+              {DAYS.map((d, di) => (
+                <div style={{ display: 'contents' }} key={d}>
+                  <div className="hm-label">{d}</div>
+                  {r.heatmap[di].map((v, wi) => (
+                    <div
+                      className="hm-cell"
+                      key={`${d}-${wi}`}
+                      style={{ background: heatColor(v) }}
+                      data-tip={`${v} interviews`}
+                    />
+                  ))}
+                </div>
+              ))}
+            </div>
+            <div className="hm-legend">
+              Less
+              {[0, 1, 2, 3, 5].map((v) => (
+                <span className="hm-box" key={v} style={{ background: heatColor(v) }} />
+              ))}
+              More
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid g-2">
+        <div className="card">
+          <div className="card-head"><div><h3>Recruiter Leaderboard</h3><span className="ch-sub">Top performers by hires</span></div></div>
+          <div className="card-body">
+            {board.map((rec, i) => (
+              <div
+                className="leader-row"
+                key={rec.id}
+                style={
+                  rec.id === r.id
+                    ? { background: 'var(--primary-soft)', borderRadius: 10, paddingLeft: 8, paddingRight: 8 }
+                    : undefined
+                }
+              >
+                <span className={`leader-rank ${i === 0 ? 'gold' : i === 1 ? 'silver' : i === 2 ? 'bronze' : ''}`}>
+                  {i + 1}
+                </span>
+                <Avatar name={rec.name} initials={rec.initials} color={rec.color} />
+                <div className="lr-main">
+                  <div className="lr-title">{rec.name}</div>
+                  <div className="lr-sub">{rec.efficiency}% efficiency · {rec.avgTimeToHire}d avg</div>
+                </div>
+                <div className="lr-right">
+                  <div className="fw-600">{rec.hires}</div>
+                  <div className="lr-sub">hires</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="card">
+          <div className="card-head">
+            <div><h3>Candidate Pipeline</h3><span className="ch-sub">This recruiter’s active candidates</span></div>
+          </div>
+          <div className="card-body"><div className="chart-wrap"><Chart type="horizontalBar" data={pipelineData} height={260} /></div></div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/screens/Reports.jsx b/frontend/src/screens/Reports.jsx
new file mode 100644
index 0000000..10fe4f3
--- /dev/null
+++ b/frontend/src/screens/Reports.jsx
@@ -0,0 +1,173 @@
+import { useMemo } from 'react'
+
+import Chart, { ChartLegend } from '../ui/Chart'
+import Charts from '../lib/charts'
+import DataTable from '../ui/DataTable'
+import { Icon, KpiCard, ProgressBar } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { analytics as a, int } from '../data/seed'
+
+const FUNNEL = [
+  { stage: 'Applied', v: 100 }, { stage: 'Screened', v: 62 }, { stage: 'Assessed', v: 41 },
+  { stage: 'Interviewed', v: 28 }, { stage: 'Offered', v: 14 }, { stage: 'Hired', v: 9 },
+]
+
+const REPORT_TYPES = [
+  { name: 'Hiring Funnel Report', desc: 'Conversion rates across each pipeline stage', icn: 'filter', cls: 'i-indigo' },
+  { name: 'Source Effectiveness', desc: 'ROI and quality by sourcing channel', icn: 'target', cls: 'i-teal' },
+  { name: 'Diversity & Inclusion', desc: 'Demographic breakdown of the pipeline', icn: 'users', cls: 'i-purple' },
+  { name: 'Recruiter Scorecard', desc: 'Individual performance metrics', icn: 'award', cls: 'i-amber' },
+  { name: 'Offer Analysis', desc: 'Acceptance rates and compensation trends', icn: 'file', cls: 'i-green' },
+  { name: 'Interview Analytics', desc: 'Interviewer load and feedback quality', icn: 'calendar', cls: 'i-blue' },
+]
+
+export default function Reports() {
+  const { toast } = useToast()
+
+  // The prototype generated hires/ttf inline at render time via DB.int(), so
+  // they changed on every re-render. Computed once here instead.
+  const deptRows = useMemo(
+    () =>
+      a.departments.map((d) => {
+        const rate = Math.round((d.open ? d.apps / (d.open * 40) : 0.5) * 100)
+        return {
+          id: d.dept, dept: d.dept, open: d.open, apps: d.apps,
+          hires: int(1, 8), ttf: int(28, 52), rate: Math.min(rate, 98),
+        }
+      }),
+    [],
+  )
+
+  const funnelData = useMemo(
+    () => ({
+      labels: FUNNEL.map((f) => f.stage),
+      data: FUNNEL.map((f) => f.v),
+      colors: Charts.PALETTE,
+      yFmt: (v) => `${v}%`,
+    }),
+    [],
+  )
+  const timeData = useMemo(
+    () => ({
+      labels: a.hiringTrend.labels,
+      datasets: [
+        { label: 'Time to Hire', data: a.timeToHire, color: Charts.PALETTE[0] },
+        { label: 'Time to Fill', data: a.timeToFill, color: Charts.PALETTE[2] },
+      ],
+      yFmt: (v) => `${v}d`,
+    }),
+    [],
+  )
+  const timeLegend = useMemo(
+    () => [
+      { label: 'Time to Hire', color: Charts.PALETTE[0] },
+      { label: 'Time to Fill', color: Charts.PALETTE[2] },
+    ],
+    [],
+  )
+
+  const cards = [
+    { label: 'Total Hires (YTD)', value: a.hiringTrend.hires.reduce((s, v) => s + v, 0), icon: 'award', tone: 'i-green', foot: '+18% vs last year' },
+    { label: 'Total Applications', value: a.hiringTrend.applications.reduce((s, v) => s + v, 0).toLocaleString(), icon: 'users', tone: 'i-blue', foot: 'across all channels' },
+    { label: 'Avg. Time to Hire', value: '27 days', icon: 'clock', tone: 'i-teal', foot: '3 days faster' },
+    { label: 'Avg. Cost per Hire', value: '$4,280', icon: 'dollar', tone: 'i-amber', foot: 'within budget' },
+  ]
+
+  const columns = [
+    { key: 'dept', label: 'Department', sortable: true, render: (r) => <span className="cell-primary">{r.dept}</span> },
+    { key: 'open', label: 'Open Roles', sortable: true, align: 'center' },
+    { key: 'apps', label: 'Applications', sortable: true, align: 'center', render: (r) => <b>{r.apps}</b> },
+    { key: 'hires', label: 'Hires', sortable: true, align: 'center' },
+    { key: 'ttf', label: 'Time to Fill', sortable: true, align: 'center', render: (r) => `${r.ttf} days` },
+    {
+      key: 'rate',
+      label: 'Fill Rate',
+      sortable: true,
+      render: (r) => (
+        <div className="flex items-center gap-8">
+          <div style={{ flex: 1 }}><ProgressBar pct={r.rate} /></div>
+          <b style={{ width: 38, textAlign: 'right' }}>{r.rate}%</b>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Reports</h1>
+          <p className="page-sub">Recruitment metrics and downloadable insights</p>
+        </div>
+        <div className="page-head-actions">
+          <select className="select" defaultValue="Last 7 months">
+            <option>Last 7 months</option>
+            <option>This quarter</option>
+            <option>This year</option>
+          </select>
+          <button className="btn btn-primary" onClick={() => toast('Full report exported to PDF', 'success')}>
+            <Icon name="download" /> Export Report
+          </button>
+        </div>
+      </div>
+
+      <div className="grid g-kpi mb-18">
+        {cards.map((c) => <KpiCard key={c.label} {...c} />)}
+      </div>
+
+      <div className="grid g-2 mb-18">
+        <div className="card">
+          <div className="card-head">
+            <div><h3>Hiring Funnel</h3><span className="ch-sub">Stage-by-stage conversion</span></div>
+            <button className="btn btn-ghost btn-sm" onClick={() => toast('Chart exported', 'info')}>
+              <Icon name="download" />
+            </button>
+          </div>
+          <div className="card-body"><div className="chart-wrap"><Chart type="bar" data={funnelData} height={280} /></div></div>
+        </div>
+        <div className="card">
+          <div className="card-head"><div><h3>Time to Hire vs Fill</h3><span className="ch-sub">Monthly trend (days)</span></div></div>
+          <div className="card-body">
+            <div className="chart-wrap"><Chart type="groupedBar" data={timeData} height={280} /></div>
+            <ChartLegend items={timeLegend} />
+          </div>
+        </div>
+      </div>
+
+      <div className="card mb-18">
+        <div className="card-head">
+          <div><h3>Department Performance</h3><span className="ch-sub">Hiring breakdown by team</span></div>
+          <button className="btn btn-secondary btn-sm" onClick={() => toast('Table exported to CSV', 'success')}>
+            <Icon name="download" /> CSV
+          </button>
+        </div>
+        <DataTable columns={columns} rows={deptRows} pageSize={10} />
+      </div>
+
+      <div className="card">
+        <div className="card-head"><div><h3>Report Library</h3><span className="ch-sub">Generate a detailed report</span></div></div>
+        <div className="card-body">
+          <div className="grid g-3">
+            {REPORT_TYPES.map((r) => (
+              <div
+                key={r.name}
+                className="card"
+                style={{ boxShadow: 'none', background: 'var(--bg-sunken)', cursor: 'pointer' }}
+                onClick={() => toast(`Generating: ${r.name}`, 'info')}
+              >
+                <div className="card-body">
+                  <span className={`kpi-icn ${r.cls}`} style={{ marginBottom: 12 }}><Icon name={r.icn} /></span>
+                  <div className="lr-title">{r.name}</div>
+                  <div className="lr-sub" style={{ marginTop: 4 }}>{r.desc}</div>
+                  <div style={{ marginTop: 12, color: 'var(--primary)', fontWeight: 600, fontSize: 13 }}>
+                    Generate <Icon name="chevron-right" />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/screens/Settings.jsx b/frontend/src/screens/Settings.jsx
new file mode 100644
index 0000000..df39e41
--- /dev/null
+++ b/frontend/src/screens/Settings.jsx
@@ -0,0 +1,627 @@
+/* ============================================================
+   Settings — 10 tabs. Two are real, eight are inert chrome exactly as in the
+   prototype.
+
+   The Users tab is wired to GET /users/fetch and its row pencil assigns roles
+   through PUT /users/assign-role / PUT /users/remove-role; Appearance drives the
+   real ThemeProvider. Everything else (General, Roles, Permissions,
+   Notifications, Email Templates, Career Portal, Branding, Security) is markup
+   with no persistence — same as the prototype.
+
+   The Security tab in particular renders 2FA and audit logging as ENABLED while
+   enforcing nothing; 01-repository-assessment.md §2.4 calls that out as
+   "actively dangerous as a demo artefact". A standing notice is rendered above
+   it rather than silently reproducing the claim.
+   ============================================================ */
+
+import { useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+
+import Modal from '../ui/Modal'
+import { Tabs } from '../ui/Tabs'
+import { Avatar, Badge, FieldError, Icon } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { useTheme } from '../theme/ThemeProvider'
+import { useFormState } from '../components/AuthLayout'
+import { usePermission } from '../auth/AuthContext'
+import { qk } from '../lib/queryKeys'
+import { friendlyAuthError } from '../lib/errors'
+import * as rolesApi from '../api/roles'
+import * as usersApi from '../api/users'
+import { roles as seedRoles } from '../data/seed'
+
+const TABS = [
+  'General', 'Users', 'Roles', 'Permissions', 'Notifications',
+  'Email Templates', 'Career Portal', 'Branding', 'Security', 'Appearance',
+]
+
+function ToggleRow({ title, desc, defaultChecked }) {
+  const { toast } = useToast()
+  return (
+    <div className="setting-row">
+      <div className="setting-info"><h4>{title}</h4><p>{desc}</p></div>
+      <label className="switch">
+        <input
+          type="checkbox"
+          defaultChecked={defaultChecked}
+          onChange={() => toast('Preference updated', 'success')}
+        />
+        <span className="switch-track" />
+      </label>
+    </div>
+  )
+}
+
+export default function Settings() {
+  const { toast } = useToast()
+  const [tab, setTab] = useState('General')
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Settings</h1>
+          <p className="page-sub">Configure your workspace and team preferences</p>
+        </div>
+        <div className="page-head-actions">
+          <button className="btn btn-primary" onClick={() => toast('Settings saved', 'success')}>
+            <Icon name="check" /> Save Changes
+          </button>
+        </div>
+      </div>
+
+      <Tabs value={tab} onChange={setTab} tabs={TABS.map((t) => ({ key: t, label: t }))} />
+
+      <div className="tab-pane active">
+        {tab === 'General' && <General />}
+        {tab === 'Users' && <Users />}
+        {tab === 'Roles' && <Roles />}
+        {tab === 'Permissions' && <Permissions />}
+        {tab === 'Notifications' && <Notifications />}
+        {tab === 'Email Templates' && <EmailTemplates />}
+        {tab === 'Career Portal' && <CareerPortal />}
+        {tab === 'Branding' && <Branding />}
+        {tab === 'Security' && <Security />}
+        {tab === 'Appearance' && <Appearance />}
+      </div>
+    </div>
+  )
+}
+
+function General() {
+  return (
+    <div className="card">
+      <div className="card-body">
+        <div className="form-grid">
+          <div className="form-field"><label>Organization Name</label><input defaultValue="Utopia Brands Inc." /></div>
+          <div className="form-field"><label>Company Website</label><input defaultValue="https://utopiabrands.com" /></div>
+          <div className="form-field">
+            <label>Industry</label>
+            <select><option>Consumer Goods</option><option>Technology</option><option>Retail</option></select>
+          </div>
+          <div className="form-field">
+            <label>Company Size</label>
+            <select><option>201–500</option><option>51–200</option><option>500+</option></select>
+          </div>
+          <div className="form-field">
+            <label>Default Time Zone</label>
+            <select>
+              <option>(GMT-08:00) Pacific Time</option>
+              <option>(GMT-05:00) Eastern Time</option>
+              <option>(GMT+00:00) UTC</option>
+            </select>
+          </div>
+          <div className="form-field">
+            <label>Default Currency</label>
+            <select><option>USD ($)</option><option>EUR (€)</option><option>GBP (£)</option></select>
+          </div>
+        </div>
+        <div className="divider" />
+        <ToggleRow title="Auto-archive stale jobs" desc="Automatically close requisitions inactive for 90 days" defaultChecked />
+        <ToggleRow title="Duplicate detection" desc="Flag candidates that already exist in the system" defaultChecked />
+      </div>
+    </div>
+  )
+}
+
+/** Real data: GET /users/fetch (requires rbac_users.view). */
+function Users() {
+  const { toast } = useToast()
+  const [editing, setEditing] = useState(null)
+  const usersQuery = useQuery({
+    queryKey: qk.users.list(),
+    queryFn: () => usersApi.list({ top: 50 }).then((r) => r.data ?? []),
+  })
+
+  const users = usersQuery.data ?? []
+
+  return (
+    <div className="card">
+      <div className="card-head">
+        <div>
+          <h3>Team Members</h3>
+          <span className="ch-sub">
+            {usersQuery.isPending ? 'Loading…' : `${users.length} users`}
+          </span>
+        </div>
+        <button className="btn btn-primary btn-sm" onClick={() => toast('Invite sent', 'success')}>
+          <Icon name="plus" /> Invite User
+        </button>
+      </div>
+
+      {usersQuery.isError ? (
+        <div className="card-body">
+          <div className="empty-state">
+            <Icon name="alert" />
+            <h3>Couldn’t load users</h3>
+            <p>
+              {friendlyAuthError(usersQuery.error, 'The server did not return the user list.')}
+              {' '}This tab needs the <code>rbac_users.view</code> permission.
+            </p>
+          </div>
+        </div>
+      ) : (
+        <div className="table-wrap">
+          <table className="data">
+            <thead>
+              <tr>
+                <th>User</th><th>Role</th><th>Status</th><th>Created</th>
+                <th style={{ textAlign: 'right' }}>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map((u) => (
+                <tr key={u.id}>
+                  <td>
+                    <div className="user-cell">
+                      <Avatar name={u.name} />
+                      <div>
+                        <div className="cell-primary">{u.name}</div>
+                        <div className="cell-sub">{u.email}</div>
+                      </div>
+                    </div>
+                  </td>
+                  <td><Badge className="b-indigo">{u.role_name || 'No role'}</Badge></td>
+                  <td><Badge>{u.is_active ? 'Active' : 'Pending'}</Badge></td>
+                  <td className="text-muted">{u.created_at ? String(u.created_at).slice(0, 10) : '—'}</td>
+                  <td style={{ textAlign: 'right' }}>
+                    <div className="row-actions">
+                      <button
+                        className="act-btn"
+                        onClick={() => setEditing(u)}
+                        aria-label={`Edit ${u.name}`}
+                      >
+                        <Icon name="edit" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {editing && (
+        <AssignRoleModal user={editing} users={users} onClose={() => setEditing(null)} />
+      )}
+    </div>
+  )
+}
+
+/**
+ * The Users-tab row pencil. Resolves the name from user_id and the current role
+ * from role_id, and persists a change through PUT /users/assign-role — or
+ * /users/remove-role when the role is cleared.
+ *
+ * SINGLE select, deliberately: `users.role_id` is one nullable FK and
+ * Users.update_user does `setattr(user, 'role_id', v)`, so N roles written in a
+ * loop would leave only the last one. Multi-role needs a user_roles join table.
+ *
+ * Saving needs rbac_users.manage on top of the route's rbac_users.edit, and the
+ * server refuses to hand out permissions the caller does not already hold. Both
+ * come back as 403 detail strings, which friendlyAuthError surfaces verbatim.
+ */
+function AssignRoleModal({ user, users, onClose }) {
+  const { toast } = useToast()
+  const { can } = usePermission()
+  const qc = useQueryClient()
+
+  const form = useFormState({
+    user_id: String(user.id),
+    role_id: user.role_id == null ? '' : String(user.role_id),
+  })
+
+  // Same key as Access Control, so this is served from cache after visiting it.
+  const rolesQuery = useQuery({
+    queryKey: qk.roles.list(),
+    queryFn: () => rolesApi.listRoles().then((r) => r.data ?? []),
+  })
+
+  // Inactive roles are an option the server can only 400 on — see the is_active
+  // check in users/views.py _check_role_assignment.
+  const roles = (rolesQuery.data ?? []).filter((r) => r.is_active)
+
+  const target = users.find((u) => String(u.id) === form.values.user_id) ?? user
+  const currentRoleId = target.role_id == null ? '' : String(target.role_id)
+  const clearing = form.values.role_id === ''
+  const dirty = form.values.role_id !== currentRoleId
+
+  // Re-point the role select at THAT user's role, so the two fields can never
+  // end up describing different people.
+  function pickUser(id) {
+    const next = users.find((u) => String(u.id) === id)
+    form.setValues({
+      user_id: id,
+      role_id: next?.role_id == null ? '' : String(next.role_id),
+    })
+  }
+
+  const save = useMutation({
+    mutationFn: () =>
+      clearing
+        ? usersApi.removeRole(form.values.user_id)
+        : usersApi.assignRole(form.values.user_id, Number(form.values.role_id)),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: qk.users.all() })
+      const picked = roles.find((r) => String(r.id) === form.values.role_id)
+      toast(
+        clearing
+          ? `Role removed from ${target.name}`
+          : `${target.name} is now ${picked?.role_name ?? 'assigned'}`,
+        'success',
+      )
+      onClose()
+    },
+    onError: (err) => toast(friendlyAuthError(err, 'Could not update the role.'), 'error'),
+  })
+
+  const busy = save.isPending
+
+  function submit() {
+    if (!dirty) {
+      onClose()
+      return
+    }
+    save.mutate()
+  }
+
+  return (
+    <Modal
+      title="Assign Role"
+      subtitle={`Change which role ${target.name} holds`}
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose} disabled={busy}>Cancel</button>
+          <button
+            className="btn btn-primary"
+            onClick={submit}
+            disabled={busy || rolesQuery.isPending}
+          >
+            <Icon name="check" /> {busy ? 'Saving…' : 'Save Changes'}
+          </button>
+        </>
+      }
+    >
+      <form noValidate onSubmit={(e) => { e.preventDefault(); submit() }}>
+        <div className="form-grid">
+          <div className="form-field col-span-2">
+            <label htmlFor="ar-user">User</label>
+            <select
+              id="ar-user"
+              value={form.values.user_id}
+              onChange={(e) => pickUser(e.target.value)}
+              disabled={busy}
+            >
+              {users.map((u) => (
+                <option key={u.id} value={u.id}>{u.name} — {u.email}</option>
+              ))}
+            </select>
+          </div>
+
+          <div className="form-field col-span-2">
+            <label htmlFor="ar-role">Role</label>
+            <select
+              id="ar-role"
+              className={rolesQuery.isError ? 'err' : ''}
+              value={form.values.role_id}
+              onChange={(e) => form.setField('role_id', e.target.value)}
+              disabled={busy || rolesQuery.isPending || rolesQuery.isError}
+            >
+              <option value="">No role</option>
+              {roles.map((r) => (
+                <option key={r.id} value={r.id}>{r.role_name}</option>
+              ))}
+            </select>
+            <FieldError>
+              {rolesQuery.isError
+                ? friendlyAuthError(rolesQuery.error, 'Could not load the role list.')
+                : null}
+            </FieldError>
+            {rolesQuery.isPending && <span className="lr-sub">Loading roles…</span>}
+            {clearing && currentRoleId !== '' && (
+              <span className="lr-sub">
+                Saving will clear this user’s role. They keep no permissions until reassigned.
+              </span>
+            )}
+          </div>
+        </div>
+
+        {!can('rbac_users.manage') && (
+          <div className="alert alert-danger" style={{ marginTop: 14 }}>
+            Your account does not hold <code>rbac_users.manage</code>, which the server requires on
+            top of <code>rbac_users.edit</code> to change a role. Saving will be rejected.
+          </div>
+        )}
+      </form>
+    </Modal>
+  )
+}
+
+function Roles() {
+  const { toast } = useToast()
+  return (
+    <div className="card">
+      <div className="card-head">
+        <div><h3>Roles</h3><span className="ch-sub">Define access levels</span></div>
+        <button className="btn btn-primary btn-sm" onClick={() => toast('New role dialog', 'info')}>
+          <Icon name="plus" /> Add Role
+        </button>
+      </div>
+      <div className="card-body">
+        <div className="list-tight">
+          {seedRoles.map((r) => (
+            <div className="list-row" key={r.name}>
+              <span className="kpi-icn i-purple" style={{ width: 40, height: 40, borderRadius: 11 }}>
+                <Icon name="users" />
+              </span>
+              <div className="lr-main"><div className="lr-title">{r.name}</div><div className="lr-sub">{r.desc}</div></div>
+              <div className="lr-right"><div className="fw-600">{r.users} users</div><div className="lr-sub">{r.perms}</div></div>
+              <button className="act-btn" onClick={() => toast(`Editing ${r.name} role`, 'info')}>
+                <Icon name="edit" />
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function Permissions() {
+  const modules = ['Jobs', 'Candidates', 'Interviews', 'Offers', 'Reports', 'Settings']
+  const perms = ['View', 'Create', 'Edit', 'Delete']
+  const { toast } = useToast()
+  return (
+    <div className="card">
+      <div className="card-head">
+        <div><h3>Permission Matrix</h3><span className="ch-sub">Recruiter role</span></div>
+        <select className="select"><option>Recruiter</option><option>Hiring Manager</option><option>Administrator</option></select>
+      </div>
+      <p className="text-muted text-sm" style={{ padding: '0 18px' }}>
+        This is a simplified view. The authoritative matrix — 13 modules × 8 actions, resolved from the
+        server — lives on <b>Access Control</b>.
+      </p>
+      <div className="table-wrap">
+        <table className="data">
+          <thead>
+            <tr><th>Module</th>{perms.map((p) => <th style={{ textAlign: 'center' }} key={p}>{p}</th>)}</tr>
+          </thead>
+          <tbody>
+            {modules.map((m) => (
+              <tr key={m}>
+                <td className="cell-primary">{m}</td>
+                {perms.map((p) => (
+                  <td style={{ textAlign: 'center' }} key={p}>
+                    <label className="switch">
+                      <input
+                        type="checkbox"
+                        defaultChecked={m !== 'Settings'}
+                        onChange={() => toast('Permission updated', 'success')}
+                      />
+                      <span className="switch-track" />
+                    </label>
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+function Notifications() {
+  return (
+    <div className="card">
+      <div className="card-body">
+        <div className="form-section-title" style={{ marginTop: 0 }}>Email Notifications</div>
+        <ToggleRow title="New applications" desc="Get notified when a candidate applies" defaultChecked />
+        <ToggleRow title="Interview reminders" desc="Reminders 30 minutes before interviews" defaultChecked />
+        <ToggleRow title="Offer responses" desc="When candidates accept or decline offers" defaultChecked />
+        <ToggleRow title="Weekly digest" desc="A summary of hiring activity every Monday" />
+        <div className="form-section-title">In-App Notifications</div>
+        <ToggleRow title="Mentions" desc="When a teammate @mentions you" defaultChecked />
+        <ToggleRow title="Stage changes" desc="When a candidate moves stages" />
+        <ToggleRow title="Task assignments" desc="When you are assigned a task" defaultChecked />
+      </div>
+    </div>
+  )
+}
+
+function EmailTemplates() {
+  const { toast } = useToast()
+  const templates = [
+    'Application Received', 'Interview Invitation', 'Assessment Assignment',
+    'Offer Letter', 'Rejection — Post Interview', 'Reference Request',
+  ]
+  return (
+    <div className="card">
+      <div className="card-head">
+        <div><h3>Email Templates</h3></div>
+        <button className="btn btn-primary btn-sm" onClick={() => toast('New template', 'info')}>
+          <Icon name="plus" /> New Template
+        </button>
+      </div>
+      <div className="card-body">
+        <div className="list-tight">
+          {templates.map((t) => (
+            <div className="list-row" key={t}>
+              <span className="kpi-icn i-blue" style={{ width: 38, height: 38, borderRadius: 10 }}>
+                <Icon name="mail" />
+              </span>
+              <div className="lr-main"><div className="lr-title">{t}</div><div className="lr-sub">Last edited 3 days ago</div></div>
+              <Badge className="b-green">Active</Badge>
+              <button className="act-btn" onClick={() => toast('Editing template', 'info')}><Icon name="edit" /></button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function CareerPortal() {
+  return (
+    <div className="card">
+      <div className="card-body">
+        <div className="form-grid">
+          <div className="form-field col-span-2"><label>Careers Page URL</label><input defaultValue="https://careers.utopiabrands.com" /></div>
+          <div className="form-field"><label>Page Headline</label><input defaultValue="Build the future with us" /></div>
+          <div className="form-field"><label>Primary CTA Text</label><input defaultValue="View Open Roles" /></div>
+        </div>
+        <div className="divider" />
+        <ToggleRow title="Public job board" desc="Make open roles visible to the public" defaultChecked />
+        <ToggleRow title="Allow one-click apply" desc="Let candidates apply with LinkedIn" defaultChecked />
+        <ToggleRow title="Show salary ranges" desc="Display compensation on job listings" />
+        <ToggleRow title="Enable referrals" desc="Employees can refer candidates" defaultChecked />
+      </div>
+    </div>
+  )
+}
+
+function Branding() {
+  const { toast } = useToast()
+  const colors = ['#004d43', '#ceff71', '#25e9a5', '#8e92ff', '#1a3134', '#eafff4']
+  return (
+    <div className="card">
+      <div className="card-body">
+        <div className="setting-row">
+          <div className="setting-info"><h4>Company Logo</h4><p>Displayed on career pages and emails</p></div>
+          <div className="flex items-center gap-12">
+            <span className="brand-logo" style={{ width: 48, height: 48 }}>UB</span>
+            <button className="btn btn-secondary btn-sm" onClick={() => toast('Upload dialog', 'info')}>Upload</button>
+          </div>
+        </div>
+        <div className="setting-row">
+          <div className="setting-info"><h4>Brand Color</h4><p>Primary accent across the portal</p></div>
+          <div className="flex items-center gap-8">
+            {colors.map((c) => (
+              <span
+                key={c}
+                style={{ width: 28, height: 28, borderRadius: 8, background: c, cursor: 'pointer', border: '2px solid var(--border)' }}
+                onClick={() => toast('Brand color updated', 'success')}
+              />
+            ))}
+          </div>
+        </div>
+        <div className="form-grid" style={{ marginTop: 16 }}>
+          <div className="form-field"><label>Email Footer</label><input defaultValue="Utopia Brands · San Francisco, CA" /></div>
+          <div className="form-field"><label>Support Email</label><input defaultValue="talent@utopiabrands.com" /></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function Security() {
+  return (
+    <div className="card">
+      <div className="card-body">
+        <div className="alert alert-danger" style={{ marginBottom: 16 }}>
+          <b>Not yet enforced.</b> These controls are interface only — none of them is wired to the
+          backend, which today has no 2FA, no SSO, no IP allowlist and no audit log. Do not read the
+          toggles below as a statement of what is switched on.
+        </div>
+        <ToggleRow title="Two-factor authentication" desc="Require 2FA for all team members" defaultChecked />
+        <ToggleRow title="Single Sign-On (SSO)" desc="Enable SAML-based SSO login" />
+        <ToggleRow title="IP allowlist" desc="Restrict access to approved IP ranges" />
+        <ToggleRow title="Audit logging" desc="Track all data access and changes" defaultChecked />
+        <div className="form-grid" style={{ marginTop: 16 }}>
+          <div className="form-field">
+            <label>Session Timeout</label>
+            <select><option>30 minutes</option><option>1 hour</option><option>8 hours</option></select>
+          </div>
+          <div className="form-field">
+            <label>Password Policy</label>
+            <select><option>Strong (12+ chars)</option><option>Medium (8+ chars)</option></select>
+          </div>
+        </div>
+        <div className="divider" />
+        <div className="setting-row">
+          <div className="setting-info"><h4>Data Retention</h4><p>Auto-delete candidate data after set period</p></div>
+          <select className="select"><option>24 months</option><option>12 months</option><option>36 months</option></select>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** The one tab in the prototype that actually did something. */
+function Appearance() {
+  const { toast } = useToast()
+  const { setTheme, useSystemTheme } = useTheme()
+
+  function pick(mode) {
+    if (mode === 'system') useSystemTheme()
+    else setTheme(mode)
+    toast(`Theme updated to ${mode}`, 'success')
+  }
+
+  return (
+    <div className="card">
+      <div className="card-body">
+        <div className="form-section-title" style={{ marginTop: 0 }}>Theme</div>
+        <div className="grid g-3" style={{ marginBottom: 8 }}>
+          <div className="card theme-opt" style={{ cursor: 'pointer', overflow: 'hidden' }} onClick={() => pick('light')}>
+            <div style={{ height: 80, background: '#f1f7f4', borderBottom: '1px solid var(--border)', display: 'flex' }}>
+              <div style={{ width: '30%', background: '#1a3134' }} />
+              <div style={{ flex: 1, padding: 10 }}>
+                <div style={{ height: 8, background: '#fff', borderRadius: 4, marginBottom: 6 }} />
+                <div style={{ height: 8, width: '45%', background: '#004d43', borderRadius: 4 }} />
+              </div>
+            </div>
+            <div className="card-body" style={{ padding: 12 }}>
+              <div className="fw-600">Light</div><div className="lr-sub">Clean and bright</div>
+            </div>
+          </div>
+
+          <div className="card theme-opt" style={{ cursor: 'pointer', overflow: 'hidden' }} onClick={() => pick('dark')}>
+            <div style={{ height: 80, background: '#0e1d1f', borderBottom: '1px solid var(--border)', display: 'flex' }}>
+              <div style={{ width: '30%', background: '#0a1618' }} />
+              <div style={{ flex: 1, padding: 10 }}>
+                <div style={{ height: 8, background: '#24403f', borderRadius: 4, marginBottom: 6 }} />
+                <div style={{ height: 8, width: '45%', background: '#ceff71', borderRadius: 4 }} />
+              </div>
+            </div>
+            <div className="card-body" style={{ padding: 12 }}>
+              <div className="fw-600">Dark</div><div className="lr-sub">Easy on the eyes</div>
+            </div>
+          </div>
+
+          <div className="card theme-opt" style={{ cursor: 'pointer', overflow: 'hidden' }} onClick={() => pick('system')}>
+            <div style={{ height: 80, background: 'linear-gradient(90deg,#f1f7f4 50%,#0e1d1f 50%)', borderBottom: '1px solid var(--border)' }} />
+            <div className="card-body" style={{ padding: 12 }}>
+              <div className="fw-600">System</div><div className="lr-sub">Match OS setting</div>
+            </div>
+          </div>
+        </div>
+        <div className="divider" />
+        <ToggleRow title="Compact mode" desc="Reduce spacing for denser layouts" />
+        <ToggleRow title="Show animations" desc="Enable transitions and motion" defaultChecked />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/screens/TalentPool.jsx b/frontend/src/screens/TalentPool.jsx
new file mode 100644
index 0000000..b10839b
--- /dev/null
+++ b/frontend/src/screens/TalentPool.jsx
@@ -0,0 +1,100 @@
+import { useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import { Avatar, Badge, EmptyState, Icon, ScoreChip } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { seedQuery } from '../data/seedQueries'
+import { departments } from '../data/seed'
+
+export default function TalentPool() {
+  const { toast } = useToast()
+  const navigate = useNavigate()
+  const { data: candidates = [] } = useQuery(seedQuery('candidates'))
+  const [q, setQ] = useState('')
+  const [dept, setDept] = useState('')
+
+  // Silver medalists / passive talent — candidates outside the active loop.
+  const pool = useMemo(
+    () => candidates.filter((c) => ['Rejected', 'Applied', 'Hired'].includes(c.stage)),
+    [candidates],
+  )
+
+  const list = useMemo(
+    () =>
+      pool.filter((c) => {
+        if (dept && c.department !== dept) return false
+        if (q && !(c.name + c.currentCompany + c.skills.join(' ')).toLowerCase().includes(q.toLowerCase())) return false
+        return true
+      }),
+    [pool, q, dept],
+  )
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Talent Pool</h1>
+          <p className="page-sub">{pool.length} silver-medalists &amp; passive candidates to re-engage</p>
+        </div>
+        <div className="page-head-actions">
+          <button className="btn btn-primary" onClick={() => toast('Talent campaign created', 'success')}>
+            <Icon name="send" /> Start Campaign
+          </button>
+        </div>
+      </div>
+
+      <div className="card mb-18">
+        <div className="card-body" style={{ padding: 16 }}>
+          <div className="toolbar" style={{ marginBottom: 0 }}>
+            <div className="toolbar-search">
+              <Icon name="search" />
+              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search by name, skill, company…" />
+            </div>
+            <select className="select" value={dept} onChange={(e) => setDept(e.target.value)}>
+              <option value="">All Departments</option>
+              {departments.map((d) => <option key={d}>{d}</option>)}
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid g-3">
+        {list.length === 0 ? (
+          <div style={{ gridColumn: '1/-1' }}>
+            <EmptyState title="No talent found">Try a different search or department.</EmptyState>
+          </div>
+        ) : (
+          list.map((c) => (
+            <div
+              key={c.id}
+              className="card"
+              style={{ cursor: 'pointer' }}
+              onClick={() => navigate('/candidates', { state: { openCandidate: c.id } })}
+            >
+              <div className="card-body">
+                <div className="flex items-center gap-12" style={{ marginBottom: 12 }}>
+                  <Avatar name={c.name} initials={c.initials} color={c.color} className="avatar-lg" />
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div className="lr-title">{c.name}</div>
+                    <div className="lr-sub">{c.currentTitle}</div>
+                  </div>
+                  <ScoreChip score={c.aiScore} />
+                </div>
+                <div className="k-tags" style={{ marginBottom: 12 }}>
+                  {c.skills.slice(0, 4).map((s) => <span className="tag" key={s}>{s}</span>)}
+                </div>
+                <div className="divider" style={{ margin: '12px 0' }} />
+                <div className="flex items-center" style={{ justifyContent: 'space-between' }}>
+                  <span className="cell-sub"><Icon name="briefcase" /> {c.experience} yrs</span>
+                  <span className="cell-sub">{c.currentCompany}</span>
+                  <Badge className="b-gray">{c.source}</Badge>
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/screens/Tasks.jsx b/frontend/src/screens/Tasks.jsx
new file mode 100644
index 0000000..62f373d
--- /dev/null
+++ b/frontend/src/screens/Tasks.jsx
@@ -0,0 +1,282 @@
+import { useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+
+import Modal from '../ui/Modal'
+import { Badge, EmptyState, FieldError, Icon } from '../ui/primitives'
+import { useToast } from '../ui/Toast'
+import { useFormState } from '../components/AuthLayout'
+import { seedQuery, useSeedMutation } from '../data/seedQueries'
+import { fmtDate, fmtShort, getCandidate, savedSearches, TODAY } from '../data/seed'
+
+const FILTERS = ['All', 'Open', 'Completed', 'Overdue', 'High', 'Medium', 'Low']
+const PRIORITY_CLASS = { High: 'b-red', Medium: 'b-amber', Low: 'b-gray' }
+
+export default function Tasks() {
+  const { toast } = useToast()
+  const navigate = useNavigate()
+  const { data: tasks = [] } = useQuery(seedQuery('tasks'))
+  const { data: recruiters = [] } = useQuery(seedQuery('recruiters'))
+  const updateTasks = useSeedMutation('tasks')
+
+  const [filter, setFilter] = useState('All')
+  const [detail, setDetail] = useState(null)
+  const [adding, setAdding] = useState(false)
+
+  const isOverdue = (t) => !t.done && t.due < TODAY
+
+  const list = useMemo(() => {
+    if (filter === 'Open') return tasks.filter((t) => !t.done)
+    if (filter === 'Completed') return tasks.filter((t) => t.done)
+    if (filter === 'Overdue') return tasks.filter(isOverdue)
+    if (['High', 'Medium', 'Low'].includes(filter)) return tasks.filter((t) => t.priority === filter)
+    return tasks
+  }, [tasks, filter])
+
+  const openCount = tasks.filter((t) => !t.done).length
+  const overdueCount = tasks.filter(isOverdue).length
+
+  // Writing to the cache is what makes the sidebar badge update — the prototype
+  // had to remember to call App.updateBadges() at each of these call sites.
+  function toggle(id) {
+    let nowDone = false
+    updateTasks((ts) =>
+      ts.map((t) => {
+        if (t.id !== id) return t
+        nowDone = !t.done
+        return { ...t, done: nowDone }
+      }),
+    )
+    toast(nowDone ? 'Task completed' : 'Task reopened', nowDone ? 'success' : 'info')
+  }
+
+  function complete(id) {
+    updateTasks((ts) => ts.map((t) => (t.id === id ? { ...t, done: true } : t)))
+    toast('Task completed', 'success')
+  }
+
+  return (
+    <div className="page">
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">Tasks</h1>
+          <p className="page-sub">{openCount} open · {overdueCount} overdue</p>
+        </div>
+        <div className="page-head-actions">
+          <button className="btn btn-primary" onClick={() => setAdding(true)}>
+            <Icon name="plus" /> New Task
+          </button>
+        </div>
+      </div>
+
+      <div className="grid g-2-1">
+        <div className="card">
+          <div className="card-body" style={{ paddingBottom: 0 }}>
+            <div className="seg">
+              {FILTERS.map((f) => (
+                <button key={f} className={f === filter ? 'active' : ''} onClick={() => setFilter(f)}>
+                  {f}
+                </button>
+              ))}
+            </div>
+          </div>
+          <div className="card-body">
+            <div className="list-tight">
+              {list.length === 0 ? (
+                <EmptyState icon="check-square" title="All caught up">No tasks in this view.</EmptyState>
+              ) : (
+                list.map((t) => {
+                  const overdue = isOverdue(t)
+                  return (
+                    <div className="list-row" style={{ alignItems: 'center' }} key={t.id}>
+                      <span
+                        className={`checkbox ${t.done ? 'on' : ''}`}
+                        onClick={(e) => { e.stopPropagation(); toggle(t.id) }}
+                        role="checkbox"
+                        aria-checked={t.done}
+                        tabIndex={0}
+                        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(t.id) } }}
+                      >
+                        <Icon name="check" />
+                      </span>
+                      <div className="lr-main" style={{ cursor: 'pointer' }} onClick={() => setDetail(t)}>
+                        <div
+                          className="lr-title"
+                          style={t.done ? { textDecoration: 'line-through', color: 'var(--text-3)' } : undefined}
+                        >
+                          {t.title}
+                        </div>
+                        <div className="lr-sub"><Icon name="users" /> {t.assignee} · {t.type}</div>
+                      </div>
+                      <div className="lr-right">
+                        <Badge className={PRIORITY_CLASS[t.priority]}>{t.priority}</Badge>
+                        <div
+                          className="lr-sub"
+                          style={{ marginTop: 4, ...(overdue ? { color: 'var(--danger)', fontWeight: 600 } : {}) }}
+                        >
+                          {overdue ? 'Overdue · ' : 'Due '}{fmtShort(t.due)}
+                        </div>
+                      </div>
+                    </div>
+                  )
+                })
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="card" style={{ alignSelf: 'start' }}>
+          <div className="card-head">
+            <div><h3>Saved Searches</h3><span className="ch-sub">Quick candidate filters</span></div>
+            <button className="act-btn" onClick={() => toast('New saved search', 'info')}><Icon name="plus" /></button>
+          </div>
+          <div className="card-body">
+            <div className="list-tight">
+              {savedSearches.map((s) => (
+                <div key={s.name} className="list-row" style={{ cursor: 'pointer' }} onClick={() => navigate('/candidates')}>
+                  <span className="kpi-icn i-indigo" style={{ width: 36, height: 36, borderRadius: 9 }}>
+                    <Icon name="bookmark" />
+                  </span>
+                  <div className="lr-main">
+                    <div className="lr-title">{s.name}</div>
+                    <div className="lr-sub">{s.filters}</div>
+                  </div>
+                  <span className="badge b-gray badge-plain">{s.count}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {detail && (
+        <TaskDetail
+          task={detail}
+          onClose={() => setDetail(null)}
+          onComplete={() => { complete(detail.id); setDetail(null) }}
+          onViewCandidate={(id) => { setDetail(null); navigate('/candidates', { state: { openCandidate: id } }) }}
+        />
+      )}
+
+      {adding && (
+        <AddTask
+          recruiters={recruiters}
+          count={tasks.length}
+          onClose={() => setAdding(false)}
+          onSave={(task) => {
+            updateTasks((ts) => [task, ...ts])
+            setAdding(false)
+            toast('Task created', 'success')
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+function TaskDetail({ task: t, onClose, onComplete, onViewCandidate }) {
+  const c = t.candidateId ? getCandidate(t.candidateId) : null
+  return (
+    <Modal
+      title={t.title}
+      subtitle={`${t.id} · ${t.type}`}
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose}>Close</button>
+          {c && (
+            <button className="btn btn-secondary" onClick={() => onViewCandidate(c.id)}>View Candidate</button>
+          )}
+          <button className="btn btn-primary" onClick={onComplete}><Icon name="check" /> Mark Complete</button>
+        </>
+      }
+    >
+      <div className="info-grid" style={{ marginBottom: 16 }}>
+        <div className="info-item"><div className="il">Assignee</div><div className="iv">{t.assignee}</div></div>
+        <div className="info-item"><div className="il">Priority</div><div className="iv">{t.priority}</div></div>
+        <div className="info-item"><div className="il">Due Date</div><div className="iv">{fmtDate(t.due)}</div></div>
+        <div className="info-item"><div className="il">Status</div><div className="iv">{t.done ? 'Completed' : 'Open'}</div></div>
+        {c && <div className="info-item"><div className="il">Candidate</div><div className="iv">{c.name}</div></div>}
+      </div>
+      <div className="form-field">
+        <label>Notes</label>
+        <textarea placeholder="Add task notes…" />
+      </div>
+    </Modal>
+  )
+}
+
+function AddTask({ recruiters, count, onClose, onSave }) {
+  const form = useFormState({
+    title: '', priority: 'Medium', type: 'Interview',
+    assignee: recruiters[0]?.name ?? '', due: '',
+  })
+
+  function submit() {
+    if (!form.values.title.trim()) {
+      form.setErrors({ title: 'Required' })
+      return
+    }
+    onSave({
+      id: `TSK-${50001 + count}`,
+      title: form.values.title,
+      candidateId: null,
+      priority: form.values.priority,
+      due: form.values.due ? new Date(form.values.due) : new Date('2026-07-16'),
+      assignee: form.values.assignee,
+      done: false,
+      type: form.values.type,
+    })
+  }
+
+  return (
+    <Modal
+      title="New Task"
+      subtitle="Create a recruitment task"
+      onClose={onClose}
+      footer={
+        <>
+          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
+          <button className="btn btn-primary" onClick={submit}><Icon name="check" /> Create Task</button>
+        </>
+      }
+    >
+      <form noValidate onSubmit={(e) => { e.preventDefault(); submit() }}>
+        <div className="form-grid">
+          <div className="form-field col-span-2">
+            <label>Task Title <span className="req">*</span></label>
+            <input
+              placeholder="e.g. Screen candidate"
+              className={form.errors.title ? 'err' : ''}
+              value={form.values.title}
+              onChange={(e) => form.setField('title', e.target.value)}
+            />
+            <FieldError>{form.errors.title}</FieldError>
+          </div>
+          <div className="form-field">
+            <label>Priority</label>
+            <select value={form.values.priority} onChange={(e) => form.setField('priority', e.target.value)}>
+              <option>High</option><option>Medium</option><option>Low</option>
+            </select>
+          </div>
+          <div className="form-field">
+            <label>Type</label>
+            <select value={form.values.type} onChange={(e) => form.setField('type', e.target.value)}>
+              {['Interview', 'Review', 'Offer', 'Admin'].map((o) => <option key={o}>{o}</option>)}
+            </select>
+          </div>
+          <div className="form-field">
+            <label>Assignee</label>
+            <select value={form.values.assignee} onChange={(e) => form.setField('assignee', e.target.value)}>
+              {recruiters.map((r) => <option key={r.id}>{r.name}</option>)}
+            </select>
+          </div>
+          <div className="form-field">
+            <label>Due Date</label>
+            <input type="date" value={form.values.due} onChange={(e) => form.setField('due', e.target.value)} />
+          </div>
+        </div>
+      </form>
+    </Modal>
+  )
+}
diff --git a/frontend/src/styles/auth.css b/frontend/src/styles/auth.css
new file mode 100644
index 0000000..a07d95f
--- /dev/null
+++ b/frontend/src/styles/auth.css
@@ -0,0 +1,367 @@
+/* ============================================================
+   Auth shell — TalentFlow / Utopia Brands
+   New classes only. Reuses .btn, .form-field, .card, .brand-*,
+   .link-btn, .page-title from shared styles.css.
+   ============================================================ */
+
+.auth-shell {
+  min-height: 100dvh;
+  display: grid;
+  grid-template-columns: minmax(280px, 42%) 1fr;
+  background: var(--bg);
+}
+
+.auth-aside {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 32px;
+  padding: 40px 44px;
+  background: var(--brand-green);
+  color: #fff;
+  overflow: hidden;
+}
+
+.auth-aside::before {
+  content: '';
+  position: absolute;
+  inset: auto -20% -30% 20%;
+  height: 70%;
+  background:
+    radial-gradient(ellipse at center, rgba(206, 255, 113, 0.28), transparent 65%);
+  pointer-events: none;
+}
+
+.auth-aside .auth-brand {
+  position: relative;
+  z-index: 1;
+}
+
+.auth-aside .brand-name {
+  color: #fff;
+  font-size: 22px;
+}
+
+.auth-aside-copy {
+  position: relative;
+  z-index: 1;
+  max-width: 28ch;
+}
+
+.auth-aside-copy h1 {
+  font-family: 'Belleza', Georgia, serif;
+  font-size: clamp(32px, 4vw, 44px);
+  line-height: 1.15;
+  font-weight: 400;
+  letter-spacing: -0.02em;
+  margin: 0 0 14px;
+  color: #fff;
+}
+
+.auth-aside-copy p {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.55;
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.auth-aside-foot {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  font-size: 12px;
+  letter-spacing: 0.4px;
+  color: var(--brand-lime);
+}
+
+.auth-panel {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 32px clamp(20px, 5vw, 64px);
+  position: relative;
+}
+
+.auth-panel-top {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  left: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.auth-panel-brand {
+  display: none;
+}
+
+.auth-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.auth-brand .brand-logo {
+  width: 42px;
+  height: 42px;
+}
+
+.auth-brand .brand-logo-lg {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+}
+
+.auth-brand .brand-name {
+  font-family: 'Belleza', Georgia, serif;
+  font-weight: 400;
+  letter-spacing: 0.2px;
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 420px;
+  margin: 0 auto;
+  padding: 32px 28px 28px;
+}
+
+.auth-card .page-title {
+  margin: 0 0 8px;
+  font-size: 28px;
+}
+
+.auth-sub {
+  margin: 0 0 22px;
+  color: var(--text-2);
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.auth-card .form-field {
+  margin-bottom: 14px;
+}
+
+.auth-row-end {
+  display: flex;
+  justify-content: flex-end;
+  margin: -4px 0 4px;
+}
+
+.auth-foot {
+  max-width: 420px;
+  margin: 18px auto 0;
+  text-align: center;
+  font-size: 13.5px;
+  color: var(--text-2);
+}
+
+.auth-resend {
+  margin-top: 14px;
+  text-align: center;
+}
+
+.auth-theme-toggle {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  color: var(--text-2);
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  transition: 0.15s;
+}
+
+.auth-theme-toggle:hover {
+  background: var(--bg-sunken);
+  color: var(--text);
+}
+
+.auth-theme-toggle svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* ---- Alerts ---- */
+.alert {
+  padding: 11px 14px;
+  border-radius: 10px;
+  font-size: 13px;
+  line-height: 1.45;
+  margin-bottom: 16px;
+  border: 1px solid transparent;
+}
+
+.alert-danger {
+  background: var(--danger-soft);
+  color: var(--danger);
+  border-color: color-mix(in srgb, var(--danger) 25%, transparent);
+}
+
+.alert-success {
+  background: var(--success-soft);
+  color: var(--success);
+  border-color: color-mix(in srgb, var(--success) 25%, transparent);
+}
+
+/* ---- Password field ---- */
+.pw-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.pw-wrap input {
+  width: 100%;
+  padding-right: 44px;
+}
+
+.pw-toggle {
+  position: absolute;
+  right: 8px;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  color: var(--text-3);
+  transition: 0.15s;
+}
+
+.pw-toggle:hover {
+  color: var(--text);
+  background: var(--bg-sunken);
+}
+
+.pw-toggle svg {
+  width: 18px;
+  height: 18px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* ---- OTP ---- */
+.otp-row {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.otp-input {
+  width: 100%;
+  max-width: 52px;
+  aspect-ratio: 1;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: 0;
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  background: var(--bg-elev);
+  color: var(--text);
+  outline: none;
+  transition: 0.15s;
+}
+
+.otp-input:focus {
+  border-color: var(--primary);
+  box-shadow: var(--ring);
+}
+
+.otp-input.err {
+  border-color: var(--danger);
+}
+
+/* ---- Countdown / spinner ---- */
+.countdown {
+  margin: 8px 0 4px;
+  font-size: 13px;
+  color: var(--text-2);
+  text-align: center;
+}
+
+.countdown strong {
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+.spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+}
+
+.spinner-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid color-mix(in srgb, var(--primary-fg) 35%, transparent);
+  border-top-color: var(--primary-fg);
+  animation: auth-spin 0.7s linear infinite;
+}
+
+@keyframes auth-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.btn-primary .spinner-dot {
+  border-color: color-mix(in srgb, var(--primary-fg) 35%, transparent);
+  border-top-color: var(--primary-fg);
+}
+
+/* ---- Responsive ---- */
+@media (max-width: 860px) {
+  .auth-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .auth-aside {
+    display: none;
+  }
+
+  .auth-panel-brand {
+    display: block;
+  }
+
+  .auth-panel-brand .brand-name {
+    color: var(--text);
+  }
+
+  .auth-panel {
+    padding-top: 88px;
+    min-height: 100dvh;
+  }
+
+  .auth-card {
+    box-shadow: none;
+    border: none;
+    background: transparent;
+    padding: 8px 0 24px;
+  }
+}
+
+@media (max-width: 420px) {
+  .otp-row {
+    gap: 6px;
+  }
+
+  .otp-input {
+    max-width: 46px;
+    font-size: 18px;
+  }
+}
diff --git a/css/styles.css b/frontend/src/styles/styles.css
similarity index 100%
rename from css/styles.css
rename to frontend/src/styles/styles.css
diff --git a/frontend/src/theme/ThemeProvider.jsx b/frontend/src/theme/ThemeProvider.jsx
new file mode 100644
index 0000000..fa9a61d
--- /dev/null
+++ b/frontend/src/theme/ThemeProvider.jsx
@@ -0,0 +1,97 @@
+/* ============================================================
+   ThemeProvider — restores the one theme behaviour the React app dropped.
+
+   js/app.js's rule: an explicit past choice wins; otherwise follow the OS AND
+   KEEP FOLLOWING IT until the user picks a side themselves. The existing
+   src/theme.js reads the stored value at boot but never subscribes to the media
+   query, so a system theme change mid-session did nothing.
+
+   Charts no longer need a full-view re-render on theme change — <Chart/>
+   observes [data-theme] and redraws itself.
+   ============================================================ */
+
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+
+const KEY = 'tf-theme'
+const ThemeContext = createContext(null)
+
+export function getStoredTheme() {
+  try {
+    return localStorage.getItem(KEY)
+  } catch {
+    return null
+  }
+}
+
+export function applyTheme(theme, persist = true) {
+  document.documentElement.setAttribute('data-theme', theme)
+  if (persist) {
+    try {
+      localStorage.setItem(KEY, theme)
+    } catch {
+      /* ignore */
+    }
+  }
+}
+
+/** Run before first paint (from main.jsx) so there is no light-mode flash. */
+export function initTheme() {
+  const mq = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null
+  const saved = getStoredTheme()
+  applyTheme(saved || (mq && mq.matches ? 'dark' : 'light'), false)
+}
+
+export function useTheme() {
+  const ctx = useContext(ThemeContext)
+  if (!ctx) throw new Error('useTheme must be used inside <ThemeProvider>')
+  return ctx
+}
+
+export default function ThemeProvider({ children }) {
+  const [theme, setThemeState] = useState(
+    () => document.documentElement.getAttribute('data-theme') || 'light',
+  )
+
+  useEffect(() => {
+    if (!window.matchMedia) return undefined
+    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+    const onSystemChange = (e) => {
+      // Once the user has chosen explicitly, stop following the OS.
+      if (getStoredTheme()) return
+      const next = e.matches ? 'dark' : 'light'
+      applyTheme(next, false)
+      setThemeState(next)
+    }
+    mq.addEventListener('change', onSystemChange)
+    return () => mq.removeEventListener('change', onSystemChange)
+  }, [])
+
+  const setTheme = useCallback((next) => {
+    applyTheme(next, true)
+    setThemeState(next)
+  }, [])
+
+  const toggleTheme = useCallback(() => {
+    setTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark')
+  }, [setTheme])
+
+  /** The Settings > Appearance "System" option: forget the explicit choice. */
+  const useSystemTheme = useCallback(() => {
+    try {
+      localStorage.removeItem(KEY)
+    } catch {
+      /* ignore */
+    }
+    const dark = window.matchMedia?.('(prefers-color-scheme: dark)').matches
+    const next = dark ? 'dark' : 'light'
+    applyTheme(next, false)
+    setThemeState(next)
+  }, [])
+
+  const value = useMemo(
+    () => ({ theme, setTheme, toggleTheme, useSystemTheme, isExplicit: Boolean(getStoredTheme()) }),
+    [theme, setTheme, toggleTheme, useSystemTheme],
+  )
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
diff --git a/frontend/src/ui/Chart.jsx b/frontend/src/ui/Chart.jsx
new file mode 100644
index 0000000..2d6d55f
--- /dev/null
+++ b/frontend/src/ui/Chart.jsx
@@ -0,0 +1,76 @@
+/* ============================================================
+   Chart.jsx — the single wrapper over the retained canvas engine (ADR 0013 §2).
+
+   The engine is imperative and owns its canvas. This component's whole job is
+   to call it at the right times:
+     - on mount and whenever the payload changes
+     - when the element resizes (ResizeObserver) — this replaces the TWO
+       redundant debounced window-resize listeners in js/app.js that re-rendered
+       the entire view, and it also fixes charts that mounted inside a hidden
+       tab pane at zero width and never drew
+     - when [data-theme] flips, because the engine reads --c1..--c8 and
+       --border/--text-3/--bg-elev live from CSS
+
+   TWO THINGS CALLERS MUST KNOW:
+     1. `data` and `options` must be referentially stable — wrap them in useMemo,
+        or the effect re-runs and re-animates on every parent render.
+     2. `height` is rendered as an HTML ATTRIBUTE, which is what the engine's
+        setup() reads. Passing height through `style` silently leaves every
+        chart at the default.
+   ============================================================ */
+
+import { useEffect, useRef } from 'react'
+import Charts from '../lib/charts'
+
+export default function Chart({ type, data, options, height = 260, className = '' }) {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const canvas = ref.current
+    if (!canvas || typeof Charts[type] !== 'function') return undefined
+
+    const draw = () => {
+      if (canvas.isConnected && canvas.getBoundingClientRect().width > 0) {
+        Charts[type](canvas, data, options)
+      }
+    }
+    draw()
+
+    // Observe the parent: setup() writes canvas.style.height, and observing the
+    // canvas itself would feed that write straight back in as a resize.
+    let timer
+    const ro = new ResizeObserver(() => {
+      clearTimeout(timer)
+      timer = setTimeout(draw, 120)
+    })
+    ro.observe(canvas.parentElement ?? canvas)
+
+    const mo = new MutationObserver(draw)
+    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
+
+    return () => {
+      clearTimeout(timer)
+      ro.disconnect()
+      mo.disconnect()
+      // The engine assigns these directly rather than using addEventListener.
+      canvas.onmousemove = null
+      canvas.onmouseleave = null
+    }
+  }, [type, data, options, height])
+
+  return <canvas ref={ref} className={className} height={height} />
+}
+
+/** Was Charts.legend(), which returned an HTML string. */
+export function ChartLegend({ items = [] }) {
+  return (
+    <div className="chart-legend">
+      {items.map((it) => (
+        <span className="legend-item" key={it.label}>
+          <span className="legend-dot" style={{ background: it.color }} />
+          {it.label}
+        </span>
+      ))}
+    </div>
+  )
+}
diff --git a/frontend/src/ui/DataTable.jsx b/frontend/src/ui/DataTable.jsx
new file mode 100644
index 0000000..807b3b1
--- /dev/null
+++ b/frontend/src/ui/DataTable.jsx
@@ -0,0 +1,163 @@
+/* ============================================================
+   DataTable.jsx — the js/ui.js dataTable, split into a headless hook and a
+   presentational component.
+
+   The split matters: Candidates needs the sort/paginate behaviour but renders
+   its own markup (a checkbox column bound to a selection Set), so it uses
+   useDataTable alone. The other six consumers use <DataTable/>.
+
+   Sort comparator and the ellipsis pager windowing are ported verbatim.
+   Client-side sort/paginate is retained deliberately — there are no paginated
+   list endpoints to bind to yet outside /users/fetch.
+   ============================================================ */
+
+import { useEffect, useMemo, useState } from 'react'
+import Icon from './icons'
+import { EmptyState } from './primitives'
+
+export function useDataTable({ columns, rows, pageSize = 10 }) {
+  const [sort, setSort] = useState({ key: null, dir: 1 })
+  const [page, setPage] = useState(1)
+
+  // The prototype reset to page 1 inside its imperative update(rows).
+  useEffect(() => setPage(1), [rows])
+
+  const sorted = useMemo(() => {
+    if (!sort.key) return rows
+    const col = columns.find((c) => c.key === sort.key)
+    return [...rows].sort((a, b) => {
+      let va = col?.sortValue ? col.sortValue(a) : a[sort.key]
+      let vb = col?.sortValue ? col.sortValue(b) : b[sort.key]
+      if (typeof va === 'string') {
+        va = va.toLowerCase()
+        vb = (vb || '').toLowerCase()
+      }
+      if (va < vb) return -1 * sort.dir
+      if (va > vb) return 1 * sort.dir
+      return 0
+    })
+  }, [rows, columns, sort])
+
+  const total = sorted.length
+  const pages = Math.max(1, Math.ceil(total / pageSize))
+  const current = Math.min(page, pages)
+  const start = (current - 1) * pageSize
+
+  function toggleSort(key) {
+    setSort((s) => (s.key === key ? { key, dir: s.dir * -1 } : { key, dir: 1 }))
+  }
+
+  return {
+    pageRows: sorted.slice(start, start + pageSize),
+    sort,
+    toggleSort,
+    page: current,
+    pages,
+    setPage,
+    from: total ? start + 1 : 0,
+    to: Math.min(start + pageSize, total),
+    total,
+    pageButtons: pageWindow(current, pages),
+  }
+}
+
+/** 1 … cur-1 cur cur+1 … n — the prototype's windowing, unchanged. */
+function pageWindow(cur, pages) {
+  const list = []
+  for (let i = 1; i <= pages; i++) {
+    if (i === 1 || i === pages || Math.abs(i - cur) <= 1) list.push(i)
+    else if (list[list.length - 1] !== '…') list.push('…')
+  }
+  return list
+}
+
+export function Pagination({ from, to, total, page, pages, setPage, pageButtons }) {
+  return (
+    <div className="pagination">
+      <span className="page-info">
+        Showing <b>{from}–{to}</b> of <b>{total}</b>
+      </span>
+      <div className="page-controls">
+        <button className="page-btn" disabled={page === 1} onClick={() => setPage(page - 1)} aria-label="Previous page">
+          <Icon name="chevron-left" />
+        </button>
+        {pageButtons.map((p, i) =>
+          p === '…' ? (
+            <span key={`gap-${i}`} className="page-btn" style={{ cursor: 'default' }}>…</span>
+          ) : (
+            <button
+              key={p}
+              className={`page-btn ${p === page ? 'active' : ''}`}
+              onClick={() => setPage(p)}
+              aria-current={p === page ? 'page' : undefined}
+            >
+              {p}
+            </button>
+          ),
+        )}
+        <button className="page-btn" disabled={page === pages} onClick={() => setPage(page + 1)} aria-label="Next page">
+          <Icon name="chevron-right" />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default function DataTable({ columns, rows, pageSize = 10, empty }) {
+  const t = useDataTable({ columns, rows, pageSize })
+
+  return (
+    <div className="dt">
+      <div className="table-wrap">
+        <table className="data">
+          <thead>
+            <tr>
+              {columns.map((c) => {
+                const isSorted = t.sort.key === c.key
+                const cls = [
+                  c.sortable ? 'sortable' : '',
+                  isSorted ? (t.sort.dir === 1 ? 'sorted-asc' : 'sorted-desc') : '',
+                ].filter(Boolean).join(' ')
+                return (
+                  <th
+                    key={c.key}
+                    className={cls}
+                    style={{ textAlign: c.align || 'left' }}
+                    onClick={c.sortable ? () => t.toggleSort(c.key) : undefined}
+                  >
+                    {c.label}
+                    {c.sortable && (
+                      <span className="sort-ind">
+                        {isSorted ? (t.sort.dir === 1 ? '▲' : '▼') : '⇅'}
+                      </span>
+                    )}
+                  </th>
+                )
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {t.pageRows.length === 0 ? (
+              <tr>
+                <td colSpan={columns.length}>
+                  <EmptyState>{empty}</EmptyState>
+                </td>
+              </tr>
+            ) : (
+              t.pageRows.map((row, i) => (
+                <tr key={row.id ?? i}>
+                  {columns.map((c) => (
+                    <td key={c.key} style={{ textAlign: c.align || 'left' }}>
+                      {c.render ? c.render(row) : (row[c.key] ?? '')}
+                    </td>
+                  ))}
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+      <Pagination {...t} />
+    </div>
+  )
+}
diff --git a/frontend/src/ui/Dropdown.jsx b/frontend/src/ui/Dropdown.jsx
new file mode 100644
index 0000000..62407d2
--- /dev/null
+++ b/frontend/src/ui/Dropdown.jsx
@@ -0,0 +1,52 @@
+/* ============================================================
+   Dropdown.jsx — replaces the [data-dd-toggle]/[data-dd-panel] delegation in
+   js/app.js:200-215, including its "only one open at a time" behaviour.
+   ============================================================ */
+
+import { createContext, useContext, useEffect, useId, useMemo, useRef, useState } from 'react'
+
+const GroupContext = createContext(null)
+
+/** Wrap sibling dropdowns so opening one closes the others. */
+export function DropdownGroup({ children }) {
+  const [openId, setOpenId] = useState(null)
+  const value = useMemo(() => ({ openId, setOpenId }), [openId])
+  return <GroupContext.Provider value={value}>{children}</GroupContext.Provider>
+}
+
+export default function Dropdown({ trigger, children, className = '', panelClassName = '' }) {
+  const id = useId()
+  const group = useContext(GroupContext)
+  const [localOpen, setLocalOpen] = useState(false)
+  const ref = useRef(null)
+
+  const open = group ? group.openId === id : localOpen
+  const setOpen = (next) => {
+    if (group) group.setOpenId(next ? id : null)
+    else setLocalOpen(next)
+  }
+
+  useEffect(() => {
+    if (!open) return undefined
+    const onDocClick = (e) => {
+      if (!ref.current?.contains(e.target)) setOpen(false)
+    }
+    const onKey = (e) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('click', onDocClick)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('click', onDocClick)
+      document.removeEventListener('keydown', onKey)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])
+
+  return (
+    <div className={`dropdown ${open ? 'open' : ''} ${className}`} ref={ref}>
+      {trigger({ open, toggle: () => setOpen(!open) })}
+      <div className={`dropdown-menu ${panelClassName}`}>{children}</div>
+    </div>
+  )
+}
diff --git a/frontend/src/ui/Modal.jsx b/frontend/src/ui/Modal.jsx
new file mode 100644
index 0000000..258adfc
--- /dev/null
+++ b/frontend/src/ui/Modal.jsx
@@ -0,0 +1,104 @@
+/* ============================================================
+   Modal.jsx — the js/ui.js modal, as a portal.
+
+   Same markup and class names. Adds the two things the original lacked and that
+   01-repository-assessment.md §5 item 9 calls out: a focus trap, and focus
+   restored to whatever opened the modal. Closing the prototype's modal dropped
+   focus to <body>, which strands keyboard and screen-reader users.
+
+   Body scroll locking is reference-counted, because the mobile nav drawer also
+   sets body.overflow — without the count, closing a modal while the drawer is
+   open would unlock scrolling underneath it.
+   ============================================================ */
+
+import { useCallback, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import Icon from './icons'
+
+let scrollLocks = 0
+function lockScroll() {
+  scrollLocks += 1
+  document.body.style.overflow = 'hidden'
+}
+function unlockScroll() {
+  scrollLocks = Math.max(0, scrollLocks - 1)
+  if (scrollLocks === 0) document.body.style.overflow = ''
+}
+
+const FOCUSABLE =
+  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+export default function Modal({ open = true, title, subtitle, size, footer, onClose, children }) {
+  const dialogRef = useRef(null)
+  const restoreRef = useRef(null)
+
+  const close = useCallback(() => onClose?.(), [onClose])
+
+  useEffect(() => {
+    if (!open) return undefined
+    restoreRef.current = document.activeElement
+    lockScroll()
+
+    const node = dialogRef.current
+    const first = node?.querySelector(FOCUSABLE)
+    ;(first ?? node)?.focus?.()
+
+    const onKeyDown = (e) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        close()
+        return
+      }
+      if (e.key !== 'Tab' || !node) return
+      const items = Array.from(node.querySelectorAll(FOCUSABLE)).filter(
+        (el) => el.offsetParent !== null,
+      )
+      if (!items.length) return
+      const firstEl = items[0]
+      const lastEl = items[items.length - 1]
+      if (e.shiftKey && document.activeElement === firstEl) {
+        e.preventDefault()
+        lastEl.focus()
+      } else if (!e.shiftKey && document.activeElement === lastEl) {
+        e.preventDefault()
+        firstEl.focus()
+      }
+    }
+
+    document.addEventListener('keydown', onKeyDown, true)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown, true)
+      unlockScroll()
+      restoreRef.current?.focus?.()
+    }
+  }, [open, close])
+
+  if (!open) return null
+
+  return createPortal(
+    <div className="modal-root open">
+      <div className="modal-backdrop" onClick={close} />
+      <div
+        className={`modal ${size || ''}`}
+        role="dialog"
+        aria-modal="true"
+        aria-label={typeof title === 'string' ? title : undefined}
+        tabIndex={-1}
+        ref={dialogRef}
+      >
+        <div className="modal-head">
+          <div>
+            <h2>{title}</h2>
+            {subtitle && <p>{subtitle}</p>}
+          </div>
+          <button className="modal-close" onClick={close} aria-label="Close">
+            <Icon name="x" />
+          </button>
+        </div>
+        <div className="modal-body">{children}</div>
+        {footer && <div className="modal-foot">{footer}</div>}
+      </div>
+    </div>,
+    document.body,
+  )
+}
diff --git a/frontend/src/ui/Tabs.jsx b/frontend/src/ui/Tabs.jsx
new file mode 100644
index 0000000..8f507be
--- /dev/null
+++ b/frontend/src/ui/Tabs.jsx
@@ -0,0 +1,49 @@
+/* ============================================================
+   Tabs.jsx — new primitive.
+
+   js/ui.js had no tab component, so settings (10 tabs), candidates (8), inbox
+   (7) and rbac each hand-rolled one by pre-rendering every pane and toggling
+   `.active`. One component replaces four ad-hoc implementations, and only the
+   active pane is mounted — which also means a chart in a hidden pane no longer
+   draws into a zero-width canvas.
+   ============================================================ */
+
+import { useId, useState } from 'react'
+
+export function Tabs({ tabs, value, onChange, className = 'tabs' }) {
+  const id = useId()
+  return (
+    <div className={className} role="tablist">
+      {tabs.map((t) => {
+        const key = t.key ?? t
+        const label = t.label ?? t
+        const active = key === value
+        return (
+          <button
+            key={key}
+            id={`${id}-${key}`}
+            role="tab"
+            aria-selected={active}
+            className={`tab${active ? ' active' : ''}`}
+            onClick={() => onChange(key)}
+          >
+            {label}
+            {t.count != null && <span className="tab-count">{t.count}</span>}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+/** Uncontrolled convenience wrapper: <TabPanel tabs={[{key,label,render}]} /> */
+export default function TabPanel({ tabs, initial, className }) {
+  const [value, setValue] = useState(initial ?? tabs[0]?.key)
+  const active = tabs.find((t) => t.key === value) ?? tabs[0]
+  return (
+    <>
+      <Tabs tabs={tabs} value={value} onChange={setValue} className={className} />
+      <div role="tabpanel">{active?.render?.()}</div>
+    </>
+  )
+}
diff --git a/frontend/src/ui/Toast.jsx b/frontend/src/ui/Toast.jsx
new file mode 100644
index 0000000..97835e8
--- /dev/null
+++ b/frontend/src/ui/Toast.jsx
@@ -0,0 +1,103 @@
+/* ============================================================
+   Toast.jsx — the js/ui.js toast, as a provider + portal.
+
+   Timing is preserved exactly: 4200ms visible, then `.out` is added and the
+   node is removed 300ms later. The `.out` exit transition lives in the frozen
+   CSS, so collapsing this into a single removal makes toasts vanish instead of
+   sliding away.
+   ============================================================ */
+
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import Icon from './icons'
+
+const VISIBLE_MS = 4200
+const EXIT_MS = 300
+
+const CONFIG = {
+  success: { icon: 'check-circle', tone: 'i-green', title: 'Success' },
+  error: { icon: 'x-circle', tone: 'i-red', title: 'Error' },
+  info: { icon: 'info', tone: 'i-blue', title: 'Notice' },
+  warning: { icon: 'alert', tone: 'i-amber', title: 'Warning' },
+}
+
+const ToastContext = createContext(null)
+
+// Module-level escape hatch, so non-component code (the ~40 call sites that were
+// `App.toast(...)`) can raise a toast without threading the hook through.
+let externalToast = () => {}
+export function toast(msg, type, title) {
+  externalToast(msg, type, title)
+}
+
+export function useToast() {
+  const ctx = useContext(ToastContext)
+  if (!ctx) throw new Error('useToast must be used inside <ToastProvider>')
+  return ctx
+}
+
+export default function ToastProvider({ children }) {
+  const [items, setItems] = useState([])
+  const timers = useRef(new Map())
+
+  const remove = useCallback((id) => {
+    setItems((cur) => cur.map((t) => (t.id === id ? { ...t, leaving: true } : t)))
+    const t = setTimeout(() => {
+      setItems((cur) => cur.filter((x) => x.id !== id))
+      timers.current.delete(id)
+    }, EXIT_MS)
+    timers.current.set(`exit-${id}`, t)
+  }, [])
+
+  const push = useCallback(
+    (msg, type = 'info', title) => {
+      const id = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+      setItems((cur) => [...cur, { id, msg, type, title, leaving: false }])
+      timers.current.set(id, setTimeout(() => remove(id), VISIBLE_MS))
+      return id
+    },
+    [remove],
+  )
+
+  useEffect(() => {
+    externalToast = push
+    return () => {
+      externalToast = () => {}
+    }
+  }, [push])
+
+  useEffect(() => {
+    const map = timers.current
+    return () => map.forEach(clearTimeout)
+  }, [])
+
+  const value = useMemo(() => ({ toast: push, dismiss: remove }), [push, remove])
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      {createPortal(
+        <div className="toast-root">
+          {items.map((t) => {
+            const cfg = CONFIG[t.type] || CONFIG.info
+            return (
+              <div key={t.id} className={`toast${t.leaving ? ' out' : ''}`}>
+                <span className={`toast-icn ${cfg.tone}`}>
+                  <Icon name={cfg.icon} />
+                </span>
+                <div className="toast-body">
+                  <div className="toast-title">{t.title || cfg.title}</div>
+                  <div className="toast-msg">{t.msg}</div>
+                </div>
+                <button className="toast-close" onClick={() => remove(t.id)} aria-label="Dismiss">
+                  <Icon name="x" />
+                </button>
+              </div>
+            )
+          })}
+        </div>,
+        document.body,
+      )}
+    </ToastContext.Provider>
+  )
+}
diff --git a/frontend/src/ui/icons.jsx b/frontend/src/ui/icons.jsx
new file mode 100644
index 0000000..fc1eab2
--- /dev/null
+++ b/frontend/src/ui/icons.jsx
@@ -0,0 +1,412 @@
+/* ============================================================
+   icons.jsx — the prototype's inline SVG set, as JSX.
+
+   js/ui.js held these as raw markup strings and injected them with innerHTML.
+   Rendering strings would require dangerouslySetInnerHTML, which ADR 0013 bans
+   outright, so each entry is a fragment of SVG children instead. Every attribute
+   in the original set is single-word lowercase (d, points, cx, cy, r, x, y, x1,
+   y1, x2, y2, rx, width, height), all of which are valid React props unchanged —
+   so this is a pure mechanical wrap with no attribute renaming.
+
+   Stroke styling lives in css/styles.css and is untouched.
+   ============================================================ */
+
+export const ICONS = {
+  'user-plus': (
+    <>
+      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <line x1="19" y1="8" x2="19" y2="14" />
+      <line x1="22" y1="11" x2="16" y2="11" />
+    </>
+  ),
+  calendar: (
+    <>
+      <rect x="3" y="4" width="18" height="18" rx="2" />
+      <line x1="16" y1="2" x2="16" y2="6" />
+      <line x1="8" y1="2" x2="8" y2="6" />
+      <line x1="3" y1="10" x2="21" y2="10" />
+    </>
+  ),
+  check: <polyline points="20 6 9 17 4 12" />,
+  'check-circle': (
+    <>
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+      <polyline points="22 4 12 14.01 9 11.01" />
+    </>
+  ),
+  x: (
+    <>
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </>
+  ),
+  'x-circle': (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <line x1="15" y1="9" x2="9" y2="15" />
+      <line x1="9" y1="9" x2="15" y2="15" />
+    </>
+  ),
+  file: (
+    <>
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+    </>
+  ),
+  star: (
+    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+  ),
+  message: <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />,
+  info: (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="16" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12.01" y2="8" />
+    </>
+  ),
+  alert: (
+    <>
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </>
+  ),
+  eye: (
+    <>
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      <circle cx="12" cy="12" r="3" />
+    </>
+  ),
+  edit: (
+    <>
+      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+      <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z" />
+    </>
+  ),
+  trash: (
+    <>
+      <polyline points="3 6 5 6 21 6" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    </>
+  ),
+  more: (
+    <>
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" />
+    </>
+  ),
+  plus: (
+    <>
+      <line x1="12" y1="5" x2="12" y2="19" />
+      <line x1="5" y1="12" x2="19" y2="12" />
+    </>
+  ),
+  download: (
+    <>
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="7 10 12 15 17 10" />
+      <line x1="12" y1="15" x2="12" y2="3" />
+    </>
+  ),
+  filter: <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />,
+  clock: (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
+    </>
+  ),
+  mail: (
+    <>
+      <path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" />
+      <polyline points="22,6 12,13 2,6" />
+    </>
+  ),
+  phone: (
+    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.98.36 1.94.7 2.85a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.87.57 2.85.7A2 2 0 0 1 22 16.92z" />
+  ),
+  map: (
+    <>
+      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+      <circle cx="12" cy="10" r="3" />
+    </>
+  ),
+  briefcase: (
+    <>
+      <rect x="2" y="7" width="20" height="14" rx="2" />
+      <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
+    </>
+  ),
+  'trending-up': (
+    <>
+      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" />
+      <polyline points="17 6 23 6 23 12" />
+    </>
+  ),
+  'trending-down': (
+    <>
+      <polyline points="23 18 13.5 8.5 8.5 13.5 1 6" />
+      <polyline points="17 18 23 18 23 12" />
+    </>
+  ),
+  users: (
+    <>
+      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+    </>
+  ),
+  award: (
+    <>
+      <circle cx="12" cy="8" r="7" />
+      <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" />
+    </>
+  ),
+  dollar: (
+    <>
+      <line x1="12" y1="1" x2="12" y2="23" />
+      <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+    </>
+  ),
+  target: (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <circle cx="12" cy="12" r="6" />
+      <circle cx="12" cy="12" r="2" />
+    </>
+  ),
+  send: (
+    <>
+      <line x1="22" y1="2" x2="11" y2="13" />
+      <polygon points="22 2 15 22 11 13 2 9 22 2" />
+    </>
+  ),
+  video: (
+    <>
+      <polygon points="23 7 16 12 23 17 23 7" />
+      <rect x="1" y="5" width="15" height="14" rx="2" />
+    </>
+  ),
+  search: (
+    <>
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </>
+  ),
+  'chevron-left': <polyline points="15 18 9 12 15 6" />,
+  'chevron-right': <polyline points="9 18 15 12 9 6" />,
+  'chevron-down': <path d="M6 9l6 6 6-6" />,
+  refresh: (
+    <>
+      <polyline points="23 4 23 10 17 10" />
+      <polyline points="1 20 1 14 7 14" />
+      <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+    </>
+  ),
+  copy: (
+    <>
+      <rect x="9" y="9" width="13" height="13" rx="2" />
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+    </>
+  ),
+  upload: (
+    <>
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="17 8 12 3 7 8" />
+      <line x1="12" y1="3" x2="12" y2="15" />
+    </>
+  ),
+  linkedin: (
+    <>
+      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+      <rect x="2" y="9" width="4" height="12" />
+      <circle cx="4" cy="4" r="2" />
+    </>
+  ),
+  inbox: (
+    <>
+      <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+      <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+    </>
+  ),
+  sparkles: (
+    <>
+      <path d="M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2z" />
+      <path d="M19 3v4M21 5h-4M5 17v4M7 19H3" />
+    </>
+  ),
+  zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />,
+  grid: (
+    <>
+      <rect x="3" y="3" width="7" height="7" />
+      <rect x="14" y="3" width="7" height="7" />
+      <rect x="14" y="14" width="7" height="7" />
+      <rect x="3" y="14" width="7" height="7" />
+    </>
+  ),
+  bookmark: <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />,
+  paperclip: (
+    <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
+  ),
+  external: (
+    <>
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+      <polyline points="15 3 21 3 21 9" />
+      <line x1="10" y1="14" x2="21" y2="3" />
+    </>
+  ),
+  shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />,
+  lock: (
+    <>
+      <rect x="3" y="11" width="18" height="11" rx="2" />
+      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </>
+  ),
+  flame: (
+    <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" />
+  ),
+  bell: (
+    <>
+      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+    </>
+  ),
+  layers: (
+    <>
+      <polygon points="12 2 2 7 12 12 22 7 12 2" />
+      <polyline points="2 17 12 22 22 17" />
+      <polyline points="2 12 12 17 22 12" />
+    </>
+  ),
+  list: (
+    <>
+      <line x1="8" y1="6" x2="21" y2="6" />
+      <line x1="8" y1="12" x2="21" y2="12" />
+      <line x1="8" y1="18" x2="21" y2="18" />
+      <line x1="3" y1="6" x2="3.01" y2="6" />
+      <line x1="3" y1="12" x2="3.01" y2="12" />
+      <line x1="3" y1="18" x2="3.01" y2="18" />
+    </>
+  ),
+  'check-square': (
+    <>
+      <polyline points="9 11 12 14 22 4" />
+      <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
+    </>
+  ),
+  'arrow-right': (
+    <>
+      <line x1="5" y1="12" x2="19" y2="12" />
+      <polyline points="12 5 19 12 12 19" />
+    </>
+  ),
+
+  /* --- shell icons: these lived inline in index.html, not in js/ui.js --- */
+  dashboard: (
+    <>
+      <rect x="3" y="3" width="7" height="9" />
+      <rect x="14" y="3" width="7" height="5" />
+      <rect x="14" y="12" width="7" height="9" />
+      <rect x="3" y="16" width="7" height="5" />
+    </>
+  ),
+  pipeline: (
+    <>
+      <rect x="2" y="4" width="6" height="16" rx="1" />
+      <rect x="9" y="4" width="6" height="10" rx="1" />
+      <rect x="16" y="4" width="6" height="13" rx="1" />
+    </>
+  ),
+  reports: (
+    <>
+      <path d="M3 3v18h18" />
+      <path d="M18 17V9" />
+      <path d="M13 17V5" />
+      <path d="M8 17v-3" />
+    </>
+  ),
+  analytics: (
+    <>
+      <path d="M21 21H3V3" />
+      <path d="M7 14l4-4 3 3 5-6" />
+    </>
+  ),
+  offers: (
+    <>
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <path d="M14 2v6h6" />
+      <path d="M9 15l2 2 4-4" />
+    </>
+  ),
+  managers: (
+    <>
+      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <line x1="19" y1="8" x2="19" y2="14" />
+      <line x1="22" y1="11" x2="16" y2="11" />
+    </>
+  ),
+  settings: (
+    <>
+      <circle cx="12" cy="12" r="3" />
+      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+    </>
+  ),
+  help: (
+    <>
+      <circle cx="12" cy="12" r="10" />
+      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </>
+  ),
+  menu: (
+    <>
+      <line x1="3" y1="12" x2="21" y2="12" />
+      <line x1="3" y1="6" x2="21" y2="6" />
+      <line x1="3" y1="18" x2="21" y2="18" />
+    </>
+  ),
+  sun: (
+    <>
+      <circle cx="12" cy="12" r="5" />
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </>
+  ),
+  moon: <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />,
+  user: (
+    <>
+      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+      <circle cx="12" cy="7" r="4" />
+    </>
+  ),
+  logout: (
+    <>
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <path d="M16 17l5-5-5-5" />
+      <line x1="21" y1="12" x2="9" y2="12" />
+    </>
+  ),
+  talent: (
+    <>
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+      <path d="M22 4L12 14.01l-3-3" />
+    </>
+  ),
+}
+
+export default function Icon({ name, className = '' }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" aria-hidden="true">
+      {ICONS[name] ?? ICONS.info}
+    </svg>
+  )
+}
diff --git a/frontend/src/ui/primitives.jsx b/frontend/src/ui/primitives.jsx
new file mode 100644
index 0000000..e2327b8
--- /dev/null
+++ b/frontend/src/ui/primitives.jsx
@@ -0,0 +1,124 @@
+/* ============================================================
+   primitives.jsx — Avatar, Badge, ScoreChip, ProgressBar, EmptyState, KpiCard.
+
+   Ported one-for-one from js/ui.js. Every class name is preserved verbatim so
+   css/styles.css keeps matching without a single selector change (ADR 0013 §3).
+   ============================================================ */
+
+import Icon from './icons'
+import { avatarColor, initials as initialsOf } from '../data/seed'
+
+export function Avatar({ name = '', initials, color, className = '' }) {
+  const bg = color || avatarColor(name || '')
+  const text = initials || initialsOf(name || '?')
+  return (
+    <span className={`avatar ${className}`} style={{ background: bg }}>
+      {text}
+    </span>
+  )
+}
+
+export function AvatarStack({ names = [], max = 3 }) {
+  const shown = names.slice(0, max)
+  const extra = names.length - max
+  return (
+    <div className="avatar-stack">
+      {shown.map((n, i) => (
+        <Avatar key={`${n}-${i}`} name={n} />
+      ))}
+      {extra > 0 && <span className="more-count">+{extra}</span>}
+    </div>
+  )
+}
+
+// The 30-entry status -> class map from js/ui.js:73-81, verbatim.
+export const STATUS_CLASS = {
+  Open: 'b-green', Closed: 'b-gray', 'On Hold': 'b-amber', Draft: 'b-blue',
+  Applied: 'b-blue', Screening: 'b-purple', Assessment: 'b-amber', Interview: 'b-indigo',
+  Offer: 'b-teal', Hired: 'b-green', Rejected: 'b-red',
+  Scheduled: 'b-blue', Completed: 'b-green', Cancelled: 'b-red', 'No Show': 'b-amber',
+  Sent: 'b-blue', Accepted: 'b-green', Negotiating: 'b-amber', Declined: 'b-red', Expired: 'b-gray',
+  'In Progress': 'b-amber', Pending: 'b-gray', Active: 'b-green', Invited: 'b-amber',
+  'Strong Hire': 'b-green', Hire: 'b-teal', 'Lean Hire': 'b-amber', 'No Hire': 'b-red',
+}
+
+export function Badge({ children, className }) {
+  const cls = className || STATUS_CLASS[children] || 'b-gray'
+  return <span className={`badge ${cls}`}>{children}</span>
+}
+
+export function ScoreChip({ score }) {
+  // Theme tokens, not fixed hex — the old greens/blues dropped to ~2.6:1 on dark cards.
+  const color =
+    score >= 85 ? 'var(--success)'
+      : score >= 70 ? 'var(--warning)'
+        : score >= 55 ? 'var(--info)' : 'var(--danger)'
+  return (
+    <span className="score">
+      <span className="score-ring" style={{ '--pct': score, '--sc-color': color }}>
+        <span style={{ color }}>{score}</span>
+      </span>
+    </span>
+  )
+}
+
+export function ProgressBar({ pct, className }) {
+  const c = pct >= 80 ? 'green' : pct >= 50 ? '' : pct >= 30 ? 'amber' : 'red'
+  return (
+    <div className="pbar">
+      <div className={`pbar-fill ${className || c}`} style={{ width: `${pct}%` }} />
+    </div>
+  )
+}
+
+export function EmptyState({ icon = 'search', title = 'No results found', children }) {
+  return (
+    <div className="empty-state">
+      <Icon name={icon} />
+      <h3>{title}</h3>
+      <p>{children || 'Try adjusting your filters or search.'}</p>
+    </div>
+  )
+}
+
+/** Trend chip: `dir` is 'up' | 'down' | 'flat', matching js/dashboard.js:21-26. */
+export function Trend({ dir, children }) {
+  if (dir === 'flat') return <span className="trend trend-flat">{children}</span>
+  return (
+    <span className={`trend ${dir === 'up' ? 'trend-up' : 'trend-down'}`}>
+      <Icon name={dir === 'up' ? 'trending-up' : 'trending-down'} />
+      {children}
+    </span>
+  )
+}
+
+/**
+ * The KPI card repeated across dashboard (8), interviews, jobboard and
+ * recruiterhub. Markup is exactly js/dashboard.js:27-35 so the frozen CSS
+ * matches: .kpi > .kpi-top > (.kpi-label + .kpi-icn), .kpi-value, .kpi-foot.
+ */
+export function KpiCard({ icon, tone = 'i-indigo', label, value, foot, trend, dir = 'up' }) {
+  return (
+    <div className="kpi">
+      <div className="kpi-top">
+        <span className="kpi-label">{label}</span>
+        <span className={`kpi-icn ${tone}`}>
+          <Icon name={icon} />
+        </span>
+      </div>
+      <div className="kpi-value">{value}</div>
+      {(trend || foot) && (
+        <div className="kpi-foot">
+          {trend && <Trend dir={dir}>{trend}</Trend>}
+          {foot && <span className="kpi-foot-text">{foot}</span>}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function FieldError({ children }) {
+  return <span className={`field-error${children ? ' show' : ''}`}>{children || ''}</span>
+}
+
+export { Icon }
diff --git a/frontend/token.test.mjs b/frontend/token.test.mjs
new file mode 100644
index 0000000..3b2302e
--- /dev/null
+++ b/frontend/token.test.mjs
@@ -0,0 +1,212 @@
+/**
+ * Token-layer test — the headline behaviour of this migration.
+ *
+ *   npm run test:token
+ *
+ * Covers, against a scripted fake server:
+ *   1. proactive renewal inside the 60s skew window
+ *   2. reactive 401 -> refresh -> retry, exactly once
+ *   3. SINGLE-FLIGHT: N concurrent 401s produce ONE /users/refresh
+ *   4. permissions survive a refresh (the response omits them)
+ *   5. a rejected refresh token clears the session and fires onSessionExpired
+ *   6. no infinite retry when the retry also 401s
+ */
+import { mkdtempSync, rmSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { pathToFileURL } from 'node:url'
+
+import esbuild from 'esbuild'
+import { JSDOM } from 'jsdom'
+
+const dom = new JSDOM('', { url: 'http://localhost:5173/' })
+globalThis.window = dom.window
+globalThis.document = dom.window.document
+globalThis.localStorage = dom.window.localStorage
+Object.defineProperty(globalThis, 'navigator', { value: dom.window.navigator, configurable: true })
+
+const outDir = mkdtempSync(join(tmpdir(), 'tf-token-'))
+const outFile = join(outDir, 'entry.mjs')
+await esbuild.build({
+  entryPoints: ['src/__smoke__/token.entry.js'],
+  outfile: outFile, bundle: true, format: 'esm', platform: 'node', target: 'node20',
+  logLevel: 'error',
+  define: { 'import.meta.env': JSON.stringify({ VITE_API_BASE: '' }) },
+})
+
+const T = await import(pathToFileURL(outFile).href)
+
+// ------------------------------------------------------------------ harness
+let calls = []
+let accessValid = 'A1'
+let refreshValid = 'R1'
+let refreshCount = 0
+let rejectRefresh = false
+let alwaysUnauthorized = false
+
+function json(status, body) {
+  return {
+    ok: status >= 200 && status < 300,
+    status,
+    statusText: '',
+    // apiClient reads text(); refresh.js reads json(). Provide both.
+    text: async () => JSON.stringify(body),
+    json: async () => body,
+  }
+}
+
+globalThis.fetch = async (url, opts = {}) => {
+  // apiClient builds absolute URLs via `new URL(...)`; refresh.js uses a
+  // relative path. Normalise so the harness sees one shape.
+  const path = String(url).replace(/^https?:\/\/[^/]+/, '')
+  calls.push(path)
+
+  if (path === '/users/refresh') {
+    const sent = JSON.parse(opts.body).refresh_token
+    if (rejectRefresh || sent !== refreshValid) return json(401, { detail: 'Invalid or expired refresh token' })
+    refreshCount += 1
+    accessValid = `A${refreshCount + 1}`
+    refreshValid = `R${refreshCount + 1}`   // the backend ROTATES both
+    // NOTE: no `permissions` in `data` — this is the real backend's shape.
+    return json(200, {
+      access_token: accessValid, refresh_token: refreshValid, token_type: 'bearer',
+      expires_in: 1800, data: { id: 1, name: 'Test User', email: 't@example.com' },
+    })
+  }
+
+  const bearer = (opts.headers?.Authorization || '').replace('Bearer ', '')
+  if (alwaysUnauthorized || bearer !== accessValid) return json(401, { detail: 'Could not validate credentials' })
+  return json(200, { data: { path }, status_code: 200 })
+}
+
+function reset({ expiresIn = 1800 } = {}) {
+  calls = []
+  refreshCount = 0
+  rejectRefresh = false
+  alwaysUnauthorized = false
+  accessValid = 'A1'
+  refreshValid = 'R1'
+  T.clearSession()
+  T.setSession({
+    access_token: 'A1', refresh_token: 'R1', expires_in: expiresIn,
+    data: { id: 1, name: 'Test User', permissions: ['jobs.view', 'candidates.view'] },
+  })
+}
+
+const results = []
+function check(name, pass, detail = '') {
+  results.push({ name, pass, detail })
+  console.log(`${pass ? 'ok  ' : 'FAIL'}  ${name}${detail ? `\n        ${detail}` : ''}`)
+}
+
+// ------------------------------------------------------------------ 1. proactive
+{
+  reset({ expiresIn: 30 })     // already inside the 60s skew window
+  await T.request('/jobs/fetch')
+  const order = calls.join(' ')
+  check(
+    'proactive renewal fires BEFORE any 401',
+    calls[0] === '/users/refresh' && calls[1] === '/jobs/fetch' && refreshCount === 1,
+    `calls: ${order}`,
+  )
+}
+
+// ------------------------------------------------------------------ 2. reactive
+{
+  reset()                       // token not near expiry…
+  accessValid = 'SOMETHING-ELSE' // …but the server rejects it anyway
+  await T.request('/jobs/fetch')
+  check(
+    'reactive 401 -> refresh -> retry (exactly one retry)',
+    calls.filter((c) => c === '/jobs/fetch').length === 2 && refreshCount === 1,
+    `calls: ${calls.join(' ')}`,
+  )
+}
+
+// ------------------------------------------------------------------ 3. SINGLE-FLIGHT
+{
+  reset()
+  accessValid = 'SOMETHING-ELSE'
+  await Promise.all([
+    T.request('/jobs/fetch'), T.request('/candidates/fetch'), T.request('/roles/fetch'),
+    T.request('/users/fetch'), T.request('/permissions/fetch'), T.request('/inbox/fetch'),
+  ])
+  const refreshes = calls.filter((c) => c === '/users/refresh').length
+  check(
+    'SINGLE-FLIGHT: 6 concurrent 401s produce exactly ONE /users/refresh',
+    refreshes === 1,
+    `saw ${refreshes} refresh call(s); the backend rotates the refresh token, so >1 orphans a pair`,
+  )
+}
+
+// ------------------------------------------------------------------ 3b. proactive single-flight
+{
+  reset({ expiresIn: 10 })
+  await Promise.all([T.request('/a'), T.request('/b'), T.request('/c'), T.request('/d')])
+  const refreshes = calls.filter((c) => c === '/users/refresh').length
+  check('SINGLE-FLIGHT: 4 concurrent proactive renewals produce ONE refresh', refreshes === 1, `saw ${refreshes}`)
+}
+
+// ------------------------------------------------------------------ 4. permissions survive
+{
+  reset({ expiresIn: 30 })
+  await T.request('/jobs/fetch')
+  const perms = T.getSession()?.data?.permissions
+  check(
+    'permissions survive a refresh (response omits them)',
+    Array.isArray(perms) && perms.includes('jobs.view'),
+    `permissions after refresh: ${JSON.stringify(perms)}`,
+  )
+}
+
+// ------------------------------------------------------------------ 4b. rotation stored
+{
+  reset({ expiresIn: 30 })
+  await T.request('/jobs/fetch')
+  const s = T.getSession()
+  check(
+    'both tokens rotate and are persisted',
+    s.access_token === 'A2' && s.refresh_token === 'R2' && s.expires_at > Date.now(),
+    `access=${s.access_token} refresh=${s.refresh_token}`,
+  )
+}
+
+// ------------------------------------------------------------------ 5. expired refresh
+{
+  reset()
+  accessValid = 'SOMETHING-ELSE'
+  rejectRefresh = true
+  let expiredFired = false
+  T.setSessionExpiredHandler(() => { expiredFired = true })
+  let threw = false
+  try { await T.request('/jobs/fetch') } catch { threw = true }
+  check(
+    'rejected refresh token -> session cleared + onSessionExpired fired',
+    threw && expiredFired && T.getSession() === null,
+    `threw=${threw} handlerFired=${expiredFired} session=${T.getSession()}`,
+  )
+  T.setSessionExpiredHandler(() => {})
+}
+
+// ------------------------------------------------------------------ 6. no retry loop
+{
+  reset()
+  alwaysUnauthorized = true     // refresh succeeds, but the resource still 401s
+  let expiredFired = false
+  T.setSessionExpiredHandler(() => { expiredFired = true })
+  let threw = false
+  try { await T.request('/jobs/fetch') } catch { threw = true }
+  const attempts = calls.filter((c) => c === '/jobs/fetch').length
+  check(
+    'no infinite loop when the retry also 401s (deactivated user)',
+    threw && expiredFired && attempts === 2,
+    `resource attempts=${attempts} (expected exactly 2)`,
+  )
+  T.setSessionExpiredHandler(() => {})
+}
+
+rmSync(outDir, { recursive: true, force: true })
+
+const failed = results.filter((r) => !r.pass).length
+console.log(failed ? `\n${failed}/${results.length} token checks FAILED` : `\nAll ${results.length} token checks passed`)
+process.exit(failed ? 1 : 0)
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
new file mode 100644
index 0000000..99b4120
--- /dev/null
+++ b/frontend/vite.config.js
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+// One SPA at `/`. The auth screens keep /auth/* as *router* paths so the
+// backend's CONFIRM_EMAIL_PATH=/auth/confirm-email links resolve unchanged.
+//
+// `vite dev` and `vite preview` both serve index.html for unmatched paths, which
+// is what devserver.py's SPA_ROOTS hack used to fake — and they do it for every
+// path, not just /auth/. A CDN/S3 deploy needs an equivalent rewrite rule.
+export default defineConfig({
+  plugins: [react()],
+  base: '/',
+  build: { outDir: 'dist', emptyOutDir: true, sourcemap: true },
+  resolve: { alias: { '@': path.resolve(__dirname, 'src') } },
+  server: { port: 5173 },
+  preview: { port: 4173 },
+})
diff --git a/index.html b/index.html
deleted file mode 100644
index e24d668..0000000
--- a/index.html
+++ /dev/null
@@ -1,288 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" data-theme="light">
-<head>
-  <meta charset="UTF-8" />
-  <!-- viewport-fit=cover lets the layout reach under the iOS notch/home bar;
-       the safe-area insets in styles.css keep content clear of them.
-       No maximum-scale/user-scalable — pinch-zoom must stay available. -->
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-  <meta name="color-scheme" content="light dark" />
-  <meta name="mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-  <meta name="format-detection" content="telephone=no" />
-  <title>TalentFlow · Applicant Tracking System</title>
-  <meta name="theme-color" content="#004d43" media="(prefers-color-scheme: light)" />
-  <meta name="theme-color" content="#0e1d1f" media="(prefers-color-scheme: dark)" />
-
-  <!-- Utopia brand type: Belleza (main headings) + Inter as the metric-
-       compatible stand-in for Neue Montreal, which is a licensed face.
-       If Neue Montreal is installed locally it wins via the CSS stack. -->
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Belleza&family=Inter:wght@400;500;600;700;800&display=swap" />
-
-  <link rel="stylesheet" href="css/styles.css" />
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='22' fill='%23004d43'/><g transform='translate(14 32) scale(0.72)'><path d='M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z' fill='%23ceff71'/></g></svg>" />
-</head>
-<body>
-  <div id="app">
-    <!-- Sidebar -->
-    <aside class="sidebar" id="sidebar">
-      <div class="sidebar-brand">
-        <div class="brand-logo">
-          <!-- Utopia Brands emblem — vector traced from the brand guideline.
-               The upright left edge is the abstract 'u'; the curve is the leaf. -->
-          <svg class="brand-mark" viewBox="0 0 100 64.46" aria-hidden="true">
-            <path d="M100 3.65C97.86 20.99 91.89 43.03 79.48 55.33 76 58.77 71.84 61.46 66.96 62.14 50.4 64.46 41.84 47.5 29.07 42.7 21.85 39.98 14.5 42.02 9.66 47.95 6.54 51.78 4.49 56.35 2.97 61.13 2.41 61.64 0.97 61.66 0 61.31L0 0.13C1.05 0 2.27 0.02 3.09 0.28 14.9 15.86 26.77 30.82 40.15 45.28L60.79 24.7C67.38 18.22 74.41 12.74 82.59 8.51 88.11 5.83 93.64 3.93 100 3.65Z"/>
-          </svg>
-        </div>
-        <div class="brand-text">
-          <span class="brand-name">TalentFlow</span>
-          <span class="brand-sub">Utopia Brands · ATS</span>
-        </div>
-        <button class="sidebar-collapse-btn" id="sidebarCollapse" title="Collapse sidebar" aria-label="Collapse sidebar">
-          <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>
-        </button>
-      </div>
-
-      <nav class="sidebar-nav" id="sidebarNav">
-        <div class="nav-section-label">Workspace</div>
-        <a class="nav-item" data-route="dashboard" href="#dashboard">
-          <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
-          <span>Dashboard</span>
-        </a>
-        <a class="nav-item" data-route="inbox" href="#inbox">
-          <svg viewBox="0 0 24 24"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
-          <span>Recruitment Inbox</span>
-          <span class="nav-badge nav-badge-alert" id="navInboxBadge">0</span>
-        </a>
-        <a class="nav-item" data-route="jobs" href="#jobs">
-          <svg viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
-          <span>Jobs</span>
-          <span class="nav-badge" id="navJobsBadge">0</span>
-        </a>
-        <a class="nav-item" data-route="candidates" href="#candidates">
-          <svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
-          <span>Candidates</span>
-        </a>
-        <a class="nav-item" data-route="talentpool" href="#talentpool">
-          <svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
-          <span>Talent Pool</span>
-        </a>
-        <a class="nav-item" data-route="pipeline" href="#pipeline">
-          <svg viewBox="0 0 24 24"><rect x="2" y="4" width="6" height="16" rx="1"/><rect x="9" y="4" width="6" height="10" rx="1"/><rect x="16" y="4" width="6" height="13" rx="1"/></svg>
-          <span>Pipeline</span>
-        </a>
-
-        <div class="nav-section-label">Recruiting</div>
-        <a class="nav-item" data-route="import" href="#import">
-          <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-          <span>CV Import</span>
-        </a>
-        <a class="nav-item" data-route="jobboard" href="#jobboard">
-          <svg viewBox="0 0 24 24"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
-          <span>Job Board</span>
-        </a>
-        <a class="nav-item" data-route="recruiterhub" href="#recruiterhub">
-          <svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
-          <span>Recruiter Hub</span>
-        </a>
-        <a class="nav-item" data-route="tasks" href="#tasks">
-          <svg viewBox="0 0 24 24"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
-          <span>Tasks</span>
-          <span class="nav-badge" id="navTaskBadge">0</span>
-        </a>
-        <a class="nav-item" data-route="aiassistant" href="#aiassistant">
-          <svg viewBox="0 0 24 24"><path d="M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2z"/></svg>
-          <span>AI Assistant</span>
-          <span class="nav-badge nav-badge-ai">AI</span>
-        </a>
-
-        <div class="nav-section-label">Hiring</div>
-        <a class="nav-item" data-route="interviews" href="#interviews">
-          <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-          <span>Interviews</span>
-        </a>
-        <a class="nav-item" data-route="assessments" href="#assessments">
-          <svg viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
-          <span>Assessments</span>
-        </a>
-        <a class="nav-item" data-route="offers" href="#offers">
-          <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M9 15l2 2 4-4"/></svg>
-          <span>Offers</span>
-        </a>
-        <a class="nav-item" data-route="managers" href="#managers">
-          <svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
-          <span>Hiring Managers</span>
-        </a>
-        <a class="nav-item" data-route="calendar" href="#calendar">
-          <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-          <span>Calendar</span>
-        </a>
-
-        <div class="nav-section-label">Insights</div>
-        <a class="nav-item" data-route="reports" href="#reports">
-          <svg viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>
-          <span>Reports</span>
-        </a>
-        <a class="nav-item" data-route="analytics" href="#analytics">
-          <svg viewBox="0 0 24 24"><path d="M21 21H3V3"/><path d="M7 14l4-4 3 3 5-6"/></svg>
-          <span>Analytics</span>
-        </a>
-        <a class="nav-item" data-route="aistudio" href="#aistudio">
-          <svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
-          <span>AI Studio</span>
-        </a>
-        <a class="nav-item" data-route="notifications" href="#notifications">
-          <svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
-          <span>Notifications</span>
-          <span class="nav-badge nav-badge-alert" id="navNotifBadge">0</span>
-        </a>
-
-        <div class="nav-section-label">System</div>
-        <a class="nav-item" data-route="rbac" href="#rbac">
-          <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
-          <span>Access Control</span>
-        </a>
-        <a class="nav-item" data-route="settings" href="#settings">
-          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
-          <span>Settings</span>
-        </a>
-        <a class="nav-item" data-route="help" href="#help">
-          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
-          <span>Help</span>
-        </a>
-      </nav>
-
-      <div class="sidebar-footer">
-        <div class="usage-card">
-          <div class="usage-top"><span>Seats used</span><span id="usageCount">14 / 20</span></div>
-          <div class="usage-bar"><div class="usage-fill" style="width:70%"></div></div>
-          <button class="btn btn-ghost btn-block" onclick="App.toast('Upgrade flow coming soon','info')">Upgrade plan</button>
-        </div>
-      </div>
-    </aside>
-
-    <!-- Main -->
-    <div class="main-wrap">
-      <!-- Topbar -->
-      <header class="topbar">
-        <button class="icon-btn menu-toggle" id="mobileMenu" aria-label="Toggle menu">
-          <svg viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
-        </button>
-
-        <div class="topbar-search">
-          <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-          <input type="text" id="globalSearch" placeholder="Search jobs, candidates, managers…" autocomplete="off" />
-          <div class="search-results" id="searchResults"></div>
-          <kbd class="search-kbd">⌘K</kbd>
-        </div>
-
-        <div class="topbar-actions">
-          <button class="icon-btn" id="themeToggle" title="Toggle theme" aria-label="Toggle theme">
-            <svg class="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
-            <svg class="icon-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
-          </button>
-
-          <div class="dropdown" id="messagesDropdown">
-            <button class="icon-btn" data-dd-toggle title="Messages" aria-label="Messages">
-              <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-              <span class="dot dot-blue"></span>
-            </button>
-            <div class="dropdown-menu dropdown-menu-wide" data-dd-panel>
-              <div class="dropdown-head">Messages</div>
-              <div id="messagesList"></div>
-              <div class="dropdown-foot"><a href="#notifications" data-route="notifications">Open inbox</a></div>
-            </div>
-          </div>
-
-          <div class="dropdown" id="notifDropdown">
-            <button class="icon-btn" data-dd-toggle title="Notifications" aria-label="Notifications">
-              <svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
-              <span class="dot dot-red"></span>
-            </button>
-            <div class="dropdown-menu dropdown-menu-wide" data-dd-panel>
-              <div class="dropdown-head">Notifications <button class="link-btn" onclick="App.markAllNotifsRead()">Mark all read</button></div>
-              <div id="notifList"></div>
-              <div class="dropdown-foot"><a href="#notifications" data-route="notifications">View all</a></div>
-            </div>
-          </div>
-
-          <div class="topbar-divider"></div>
-
-          <div class="dropdown" id="profileDropdown">
-            <button class="profile-btn" data-dd-toggle>
-              <span class="avatar avatar-grad">AA</span>
-              <span class="profile-meta">
-                <span class="profile-name">Asfand Ahmed</span>
-                <span class="profile-role">Talent Lead</span>
-              </span>
-              <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>
-            </button>
-            <div class="dropdown-menu" data-dd-panel>
-              <div class="dropdown-profile">
-                <span class="avatar avatar-grad avatar-lg">AA</span>
-                <div>
-                  <div class="dp-name">Asfand Ahmed</div>
-                  <div class="dp-email">asfand.ahmed@utopiabrands.com</div>
-                </div>
-              </div>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-link" href="#settings" data-route="settings"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>My Profile</a>
-              <a class="dropdown-link" href="#settings" data-route="settings"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Settings</a>
-              <a class="dropdown-link" href="#help" data-route="help"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>Help Center</a>
-              <div class="dropdown-divider"></div>
-              <button class="dropdown-link danger" onclick="App.toast('Signed out (demo)','info')"><svg viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5"/><line x1="21" y1="12" x2="9" y2="12"/></svg>Sign out</button>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      <!-- Content -->
-      <main class="content" id="main-content"></main>
-    </div>
-  </div>
-
-  <!-- AI Assistant floating launcher -->
-  <button class="ai-fab" id="aiFab" title="AI Recruiter Assistant" aria-label="Open AI Assistant">
-    <svg viewBox="0 0 24 24"><path d="M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2z"/></svg>
-  </button>
-
-  <!-- AI Assistant slide-over dock -->
-  <div class="ai-dock" id="aiDock">
-    <div class="ai-dock-inner" id="aiDockInner"></div>
-  </div>
-
-  <!-- Modal root -->
-  <div class="modal-root" id="modalRoot"></div>
-  <!-- Toast root -->
-  <div class="toast-root" id="toastRoot"></div>
-  <!-- Mobile overlay -->
-  <div class="scrim" id="scrim"></div>
-
-  <script src="js/data.js"></script>
-  <script src="js/charts.js"></script>
-  <script src="js/ui.js"></script>
-  <script src="js/api.js"></script>
-  <script src="js/dashboard.js"></script>
-  <script src="js/jobs.js"></script>
-  <script src="js/candidates.js"></script>
-  <script src="js/pipeline.js"></script>
-  <script src="js/interviews.js"></script>
-  <script src="js/assessments.js"></script>
-  <script src="js/offers.js"></script>
-  <script src="js/reports.js"></script>
-  <script src="js/analytics.js"></script>
-  <script src="js/settings.js"></script>
-  <script src="js/misc.js"></script>
-  <script src="js/inbox.js"></script>
-  <script src="js/import.js"></script>
-  <script src="js/jobboard.js"></script>
-  <script src="js/recruiterhub.js"></script>
-  <script src="js/aiassistant.js"></script>
-  <script src="js/rbac.js"></script>
-  <script src="js/tasks.js"></script>
-  <script src="js/app.js"></script>
-</body>
-</html>
diff --git a/js/aiassistant.js b/js/aiassistant.js
deleted file mode 100644
index e2b601c..0000000
--- a/js/aiassistant.js
+++ /dev/null
@@ -1,218 +0,0 @@
-/* ============================================================
-   aiassistant.js — ChatGPT-style AI Recruiter Assistant (UI only)
-   + AI Studio (future modules gallery). API-ready, no AI wired.
-   ============================================================ */
-window.Views = window.Views || {};
-window.AI = {};
-
-// simulated (non-AI) canned responses keyed by intent — clearly a UI stub
-AI._reply = function (prompt) {
-  const p = prompt.toLowerCase();
-  if (p.includes('rank')) {
-    const top = [...DB.candidates].sort((a, b) => b.aiScore - a.aiScore).slice(0, 5);
-    return `<p>Here are the top-ranked candidates by ATS match score:</p><ul>${top.map((c, i) => `<li><b>${i + 1}. ${c.name}</b> — ${c.aiScore}% match · ${c.jobTitle} · ${c.recommendation}</li>`).join('')}</ul><p class="text-muted">This is a UI preview. Connect an LLM endpoint to generate live rankings from resume + JD embeddings.</p>`;
-  }
-  if (p.includes('compare')) {
-    const two = DB.candidates.slice(0, 2);
-    return `<p>Comparing <b>${two[0].name}</b> vs <b>${two[1].name}</b>:</p><ul><li><b>Experience:</b> ${two[0].experience}y vs ${two[1].experience}y</li><li><b>ATS Score:</b> ${two[0].aiScore}% vs ${two[1].aiScore}%</li><li><b>Recommendation:</b> ${two[0].recommendation} vs ${two[1].recommendation}</li></ul><p><b>Suggested:</b> ${two[0].aiScore >= two[1].aiScore ? two[0].name : two[1].name} appears stronger on core criteria.</p>`;
-  }
-  if (p.includes('job description') || p.includes('jd')) {
-    return `<p><b>Senior Product Designer</b></p><p>We're looking for a Senior Product Designer to craft intuitive, delightful experiences across our platform. You'll own end-to-end design, from research to polished UI, and partner closely with product and engineering.</p><p><b>Responsibilities:</b> lead design for key initiatives, run user research, build and maintain design systems, mentor peers.</p><p><b>Requirements:</b> 5+ years product design, strong portfolio, fluency in Figma, systems thinking.</p>`;
-  }
-  if (p.includes('interview question')) {
-    return `<p>Here are role-specific interview questions:</p><ul><li>Walk me through how you'd design a system to handle 1M concurrent users.</li><li>Describe a technically challenging project and the tradeoffs you made.</li><li>How do you approach debugging a production incident under time pressure?</li><li>Tell me about a time you disagreed with a teammate on an approach.</li></ul>`;
-  }
-  if (p.includes('summar')) {
-    const c = DB.candidates[0];
-    return `<p><b>Resume summary — ${c.name}</b></p><p>${c.experience} years of experience, currently ${c.currentTitle} at ${c.currentCompany}. Strong in ${c.skills.slice(0, 3).join(', ')}. ATS match ${c.aiScore}% for ${c.jobTitle}. ${c.recommendation}.</p>`;
-  }
-  if (p.includes('email')) {
-    return `<p><b>Subject:</b> Interview Invitation — Next Steps</p><p>Hi [Candidate],</p><p>Thank you for applying. We were impressed by your background and would love to invite you to an interview. Please share your availability for this week.</p><p>Best regards,<br>Talent Team</p>`;
-  }
-  if (p.includes('offer letter')) {
-    return `<p><b>Offer Letter</b></p><p>Dear [Candidate], We are pleased to offer you the position of Product Manager at a base salary of $160,000, plus equity and benefits. This offer is contingent on standard background checks.</p><p>We're excited about the possibility of you joining the team.</p>`;
-  }
-  if (p.includes('skill gap')) {
-    return `<p><b>Skill Gap Analysis — Engineering pipeline</b></p><ul><li><span class="skill-pill skill-missing">Kubernetes</span> under-represented (only 22% of pipeline)</li><li><span class="skill-pill skill-missing">System Design</span> gap at senior level</li><li><span class="skill-pill skill-matched">React</span> well covered</li></ul><p>Consider sourcing candidates with cloud-native infra experience.</p>`;
-  }
-  if (p.includes('pipeline')) {
-    const total = DB.candidates.length;
-    return `<p><b>Pipeline health analysis</b></p><ul><li>${total} active candidates across 6 stages</li><li>Conversion Applied → Interview: ~28%</li><li>Bottleneck detected at <b>Assessment</b> stage (longest dwell time)</li><li>Offer acceptance trending at 82%</li></ul><p>Recommendation: accelerate assessment turnaround to improve velocity.</p>`;
-  }
-  if (p.includes('productivity') || p.includes('recruiter')) {
-    return `<p><b>Team productivity this month</b></p><ul><li>Top performer: ${[...DB.recruiters].sort((a, b) => b.hires - a.hires)[0].name}</li><li>Avg time-to-hire: 27 days (3 days faster than last month)</li><li>Interview completion rate: 91%</li></ul>`;
-  }
-  if (p.includes('recommend') || p.includes('suggest')) {
-    const c = [...DB.candidates].sort((a, b) => b.aiScore - a.aiScore)[0];
-    return `<p><b>Top recommendation:</b> ${c.name} (${c.aiScore}% match) for ${c.jobTitle}. Strong on ${c.matchedSkills.slice(0, 2).join(' & ')}. I'd prioritise scheduling a screen this week.</p>`;
-  }
-  return `<p>I can help with ranking candidates, comparing profiles, drafting JDs, interview questions, emails, offer letters, skill-gap and pipeline analysis, and more.</p><p class="text-muted">This is a fully-designed interface. Wire an AI endpoint (Claude / OpenAI) into <code>AI.send()</code> to make responses live.</p>`;
-};
-
-AI._chatHtml = function (compact) {
-  const promptsHtml = DB.aiPrompts.slice(0, compact ? 6 : 12).map(p =>
-    `<button class="prompt-chip" onclick="AI.usePrompt(this, ${JSON.stringify(p.prompt).replace(/"/g, '&quot;')})">${UI.icon(p.icon)} ${p.text}</button>`).join('');
-  return `
-    <div class="chat-wrap" ${compact ? 'style="height:100%"' : ''}>
-      <div class="chat-scroll" id="chatScroll">
-        <div class="ai-hero">
-          <div class="ai-logo">${UI.icon('sparkles')}</div>
-          <h2 style="font-size:${compact ? '18' : '22'}px;margin-bottom:6px">AI Recruiter Assistant</h2>
-          <p class="text-muted">Ask anything about your candidates, jobs, and pipeline</p>
-        </div>
-        <div style="display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:720px;margin:0 auto 10px">${promptsHtml}</div>
-      </div>
-      <div style="padding-top:12px">
-        <div class="chat-input-bar">
-          <textarea id="chatInput" rows="1" placeholder="Message AI Assistant…"></textarea>
-          <button class="chat-send" id="chatSend">${UI.icon('arrow-right')}</button>
-        </div>
-        <p class="text-muted text-sm" style="text-align:center;margin-top:8px">UI preview · responses are simulated. ${UI.icon('lock')} API-ready for backend integration.</p>
-      </div>
-    </div>`;
-};
-
-AI._bindChat = function () {
-  const input = document.getElementById('chatInput');
-  const send = document.getElementById('chatSend');
-  if (!input) return;
-  input.oninput = () => { input.style.height = 'auto'; input.style.height = Math.min(input.scrollHeight, 140) + 'px'; };
-  input.onkeydown = e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); AI.send(); } };
-  send.onclick = AI.send;
-  AI._started = false;
-};
-
-AI.usePrompt = function (btn, prompt) {
-  const input = document.getElementById('chatInput');
-  input.value = prompt;
-  AI.send();
-};
-
-AI.send = function () {
-  const input = document.getElementById('chatInput');
-  const scroll = document.getElementById('chatScroll');
-  const text = input.value.trim();
-  if (!text) return;
-
-  if (!AI._started) { scroll.innerHTML = ''; AI._started = true; }
-
-  // user message
-  scroll.insertAdjacentHTML('beforeend', `
-    <div class="chat-msg"><div class="chat-av user">${UI.icon('users')}</div>
-      <div class="chat-bubble"><div class="chat-role">You</div><div class="chat-text">${text.replace(/</g, '&lt;')}</div></div></div>`);
-  input.value = ''; input.style.height = 'auto';
-  scroll.scrollTop = scroll.scrollHeight;
-
-  // typing indicator
-  const typingId = 'typing_' + Math.random().toString(36).slice(2, 7);
-  scroll.insertAdjacentHTML('beforeend', `
-    <div class="chat-msg" id="${typingId}"><div class="chat-av ai">${UI.icon('sparkles')}</div>
-      <div class="chat-bubble"><div class="chat-role">AI Assistant</div><div class="chat-typing"><span></span><span></span><span></span></div></div></div>`);
-  scroll.scrollTop = scroll.scrollHeight;
-
-  setTimeout(() => {
-    const t = document.getElementById(typingId);
-    if (t) t.querySelector('.chat-bubble').innerHTML = `<div class="chat-role">AI Assistant</div><div class="chat-text">${AI._reply(text)}</div>`;
-    scroll.scrollTop = scroll.scrollHeight;
-  }, 850 + Math.random() * 500);
-};
-
-// ---------------- Full page ----------------
-Views.aiassistant = function () {
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">AI Assistant</h1><p class="page-sub">Your recruiting copilot — powered by AI (interface preview)</p></div>
-        <div class="page-head-actions">
-          <span class="integration-status pending"><span class="pulse"></span>Model endpoint · Not connected</span>
-          <button class="btn btn-secondary" onclick="AI.newChat()">${UI.icon('plus')} New Chat</button>
-        </div>
-      </div>
-      <div class="card"><div class="card-body" id="aiChatMount">${AI._chatHtml(false)}</div></div>
-    </div>`;
-  return { html, onMount() { AI._bindChat(); } };
-};
-AI.newChat = function () {
-  const mount = document.getElementById('aiChatMount');
-  if (mount) { mount.innerHTML = AI._chatHtml(false); AI._bindChat(); }
-  else { AI._dockOpen(true); }
-};
-
-// ---------------- Floating dock ----------------
-AI._dockOpen = function (force) {
-  const dock = document.getElementById('aiDock');
-  const inner = document.getElementById('aiDockInner');
-  const willOpen = force || !dock.classList.contains('open');
-  if (willOpen) {
-    inner.innerHTML = `
-      <div class="card-head" style="border-radius:0"><div><h3>${UI.icon('sparkles')} AI Assistant</h3></div>
-        <div class="flex items-center gap-8">
-          <button class="btn btn-ghost btn-sm" onclick="Router.go('aiassistant');AI._dockClose()">Expand</button>
-          <button class="modal-close" onclick="AI._dockClose()">${UI.icon('x')}</button></div></div>
-      <div style="flex:1;padding:16px;overflow:hidden;display:flex" id="dockChatMount">${AI._chatHtml(true)}</div>`;
-    dock.classList.add('open');
-    AI._bindChat();
-  } else { AI._dockClose(); }
-};
-AI._dockClose = function () { document.getElementById('aiDock').classList.remove('open'); };
-
-// ---------------- AI Studio (future modules) ----------------
-Views.aistudio = function () {
-  const cards = DB.aiModules.map(m => `
-    <div class="card" style="cursor:pointer" onclick="AI.moduleDetail('${m.name.replace(/'/g, "\\'")}')">
-      <div class="card-body">
-        <div class="flex items-center" style="justify-content:space-between;margin-bottom:12px">
-          <span class="kpi-icn ${m.cls}" style="width:46px;height:46px;border-radius:13px">${UI.icon(m.icon)}</span>
-          ${UI.badge(m.status, m.status === 'Beta' ? 'b-indigo' : 'b-gray')}
-        </div>
-        <div class="lr-title" style="font-size:15px">${m.name}</div>
-        <div class="lr-sub" style="margin-top:5px;line-height:1.5">${m.desc}</div>
-        <div style="margin-top:14px;color:var(--primary);font-weight:600;font-size:13px">${m.status === 'Beta' ? 'Try it' : 'Join waitlist'} ${UI.icon('arrow-right')}</div>
-      </div>
-    </div>`).join('');
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">AI Studio</h1><p class="page-sub">Next-generation AI modules — designed and API-ready for backend integration</p></div>
-        <div class="page-head-actions"><span class="integration-status pending"><span class="pulse"></span>${DB.aiModules.filter(m => m.status === 'Beta').length} in Beta</span>
-          <button class="btn btn-primary" onclick="AI._dockOpen(true)">${UI.icon('sparkles')} Open Assistant</button></div>
-      </div>
-      <div class="card brand-hero mb-18">
-        <div class="card-body" style="display:flex;align-items:center;gap:20px;flex-wrap:wrap">
-          <div class="ai-logo" style="margin:0;width:56px;height:56px">${UI.icon('sparkles')}</div>
-          <div style="flex:1;min-width:220px"><h2 style="font-size:19px;margin-bottom:4px">Everything is API-ready</h2>
-            <p style="opacity:.88">Each module below ships with a complete, production-grade interface. Connect your model endpoint to activate them — no UI work required.</p></div>
-          <button class="btn btn-on-brand" onclick="UI.toast('Integration guide opened','info')">${UI.icon('external')} Integration Guide</button>
-        </div>
-      </div>
-      <div class="grid g-3">${cards}</div>
-    </div>`;
-  return { html };
-};
-AI.moduleDetail = function (name) {
-  const m = DB.aiModules.find(x => x.name === name);
-  UI.modal({
-    title: m.name, subtitle: m.status + ' · AI Module',
-    body: `<div class="flex items-center gap-16" style="margin-bottom:18px"><span class="kpi-icn ${m.cls}" style="width:56px;height:56px;border-radius:16px">${UI.icon(m.icon)}</span>
-      <div><div class="fw-600" style="font-size:16px">${m.name}</div><div class="text-muted">${m.desc}</div></div></div>
-      <div class="card" style="box-shadow:none;background:var(--bg-sunken)"><div class="card-body">
-        <div class="form-section-title" style="margin-top:0">API Contract (preview)</div>
-        <div class="resume-thumb" style="max-height:none">POST /api/ai/${m.name.toLowerCase().replace(/ /g, '-')}
-{
-  "context": { "jobId": "JOB-1001", "candidateIds": [...] },
-  "options": { "model": "claude-opus", "stream": true }
-}
-
-→ 200 OK
-{
-  "result": { ... },
-  "usage": { "tokens": 1240 }
-}</div>
-      </div></div>
-      <p class="text-muted text-sm" style="margin-top:14px">${UI.icon('lock')} This feature's UI is complete. Backend wiring is the only remaining step.</p>`,
-    footer: `<button class="btn btn-secondary" onclick="UI.closeModal()">Close</button>
-      <button class="btn btn-primary" onclick="UI.closeModal();AI._dockOpen(true)">${UI.icon('sparkles')} Try in Assistant</button>`,
-    size: 'modal-lg'
-  });
-};
diff --git a/js/analytics.js b/js/analytics.js
deleted file mode 100644
index 6af8a81..0000000
--- a/js/analytics.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/* ============================================================
-   analytics.js — Analytics dashboard (many charts)
-   ============================================================ */
-window.Views = window.Views || {};
-
-Views.analytics = function () {
-  const a = DB.analytics;
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Analytics</h1><p class="page-sub">Deep-dive metrics across your recruitment funnel</p></div>
-        <div class="page-head-actions">
-          <div class="pill-tabs"><span class="pill-tab">Week</span><span class="pill-tab active">Month</span><span class="pill-tab">Quarter</span></div>
-          <button class="btn btn-secondary" onclick="UI.toast('Analytics exported','success')">${UI.icon('download')} Export</button>
-        </div>
-      </div>
-
-      <div class="grid g-2 mb-18">
-        <div class="card">
-          <div class="card-head"><div><h3>Hiring Trend</h3><span class="ch-sub">Hires vs applications</span></div></div>
-          <div class="card-body"><div class="chart-wrap"><canvas id="anTrend" height="260"></canvas></div>
-            ${Charts.legend([{ label: 'Applications', color: Charts.PALETTE[4] }, { label: 'Hires', color: Charts.PALETTE[0] }])}</div>
-        </div>
-        <div class="card">
-          <div class="card-head"><div><h3>Applications Received</h3><span class="ch-sub">Monthly volume</span></div></div>
-          <div class="card-body"><div class="chart-wrap"><canvas id="anApps" height="260"></canvas></div></div>
-        </div>
-      </div>
-
-      <div class="grid g-3 mb-18">
-        <div class="card">
-          <div class="card-head"><div><h3>Source Breakdown</h3></div></div>
-          <div class="card-body">
-            <div class="chart-wrap"><canvas id="anSource" height="220"></canvas></div>
-            <div class="chart-legend" id="anSourceLegend"></div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-head"><div><h3>Offer Acceptance</h3></div></div>
-          <div class="card-body">
-            <div class="chart-wrap"><canvas id="anOffer" height="220"></canvas></div>
-            <div class="chart-legend">
-              <span class="legend-item"><span class="legend-dot" style="background:var(--success)"></span>Accepted</span>
-              <span class="legend-item"><span class="legend-dot" style="background:var(--warning)"></span>Pending</span>
-              <span class="legend-item"><span class="legend-dot" style="background:var(--danger)"></span>Declined</span>
-            </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-head"><div><h3>Pipeline Distribution</h3></div></div>
-          <div class="card-body"><div class="chart-wrap"><canvas id="anPipeline" height="260"></canvas></div></div>
-        </div>
-      </div>
-
-      <div class="grid g-2 mb-18">
-        <div class="card">
-          <div class="card-head"><div><h3>Applications by Department</h3><span class="ch-sub">Volume per team</span></div></div>
-          <div class="card-body"><div class="chart-wrap"><canvas id="anDept" height="300"></canvas></div></div>
-        </div>
-        <div class="card">
-          <div class="card-head"><div><h3>Recruiter Performance</h3><span class="ch-sub">Hires by recruiter (top 8)</span></div></div>
-          <div class="card-body"><div class="chart-wrap"><canvas id="anRec" height="300"></canvas></div></div>
-        </div>
-      </div>
-
-      <div class="grid g-2">
-        <div class="card">
-          <div class="card-head"><div><h3>Time to Hire</h3><span class="ch-sub">Days, monthly average</span></div></div>
-          <div class="card-body"><div class="chart-wrap"><canvas id="anTTH" height="240"></canvas></div></div>
-        </div>
-        <div class="card">
-          <div class="card-head"><div><h3>Time to Fill</h3><span class="ch-sub">Days, monthly average</span></div></div>
-          <div class="card-body"><div class="chart-wrap"><canvas id="anTTF" height="240"></canvas></div></div>
-        </div>
-      </div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      Charts.line(document.getElementById('anTrend'), {
-        labels: a.hiringTrend.labels, area: true,
-        datasets: [
-          { label: 'Applications', data: a.hiringTrend.applications, color: Charts.PALETTE[4] },
-          { label: 'Hires', data: a.hiringTrend.hires, color: Charts.PALETTE[0] }
-        ]
-      });
-      Charts.bar(document.getElementById('anApps'), { labels: a.hiringTrend.labels, data: a.hiringTrend.applications });
-      Charts.doughnut(document.getElementById('anSource'), {
-        labels: a.sources.map(s => s.source), data: a.sources.map(s => s.count),
-        centerValue: DB.candidates.length, centerLabel: 'Total'
-      });
-      document.getElementById('anSourceLegend').innerHTML = a.sources.map((s, i) =>
-        `<span class="legend-item"><span class="legend-dot" style="background:${Charts.PALETTE[i % Charts.PALETTE.length]}"></span>${s.source}</span>`).join('');
-      Charts.doughnut(document.getElementById('anOffer'), {
-        labels: ['Accepted', 'Pending', 'Declined'],
-        data: [a.offerAcceptance.accepted, a.offerAcceptance.pending, a.offerAcceptance.declined],
-        colors: [Charts.token('--success'), Charts.token('--warning'), Charts.token('--danger')],
-        centerValue: Math.round(a.offerAcceptance.accepted / (a.offerAcceptance.accepted + a.offerAcceptance.declined || 1) * 100) + '%',
-        centerLabel: 'Accept rate'
-      });
-      Charts.horizontalBar(document.getElementById('anPipeline'), {
-        labels: a.pipeline.map(p => p.stage), data: a.pipeline.map(p => p.count),
-        colors: Charts.PALETTE
-      });
-      Charts.bar(document.getElementById('anDept'), { labels: a.departments.map(d => d.dept), data: a.departments.map(d => d.apps) });
-      const topRecs = [...DB.recruiters].sort((x, y) => y.hires - x.hires).slice(0, 8);
-      Charts.horizontalBar(document.getElementById('anRec'), { labels: topRecs.map(r => r.name), data: topRecs.map(r => r.hires) });
-      Charts.line(document.getElementById('anTTH'), { labels: a.hiringTrend.labels, area: true, yFmt: v => v + 'd', datasets: [{ label: 'Time to Hire', data: a.timeToHire, color: Charts.PALETTE[0] }] });
-      Charts.line(document.getElementById('anTTF'), { labels: a.hiringTrend.labels, area: true, yFmt: v => v + 'd', datasets: [{ label: 'Time to Fill', data: a.timeToFill, color: Charts.PALETTE[2] }] });
-    }
-  };
-};
diff --git a/js/api.js b/js/api.js
deleted file mode 100644
index 304253a..0000000
--- a/js/api.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/* ============================================================
-   api.js — minimal HTTP client for the FastAPI backend
-   ============================================================ */
-window.Api = {
-  base: 'http://localhost:8000',
-
-  async get(path, params) {
-    const url = new URL(path.replace(/^\//, ''), this.base.endsWith('/') ? this.base : this.base + '/');
-    if (params) {
-      Object.entries(params).forEach(([key, value]) => {
-        if (value !== undefined && value !== null && value !== '') {
-          url.searchParams.set(key, value);
-        }
-      });
-    }
-    const res = await fetch(url.toString());
-    let body = null;
-    try { body = await res.json(); } catch (_) { body = null; }
-    if (!res.ok) {
-      const detail = body && body.detail != null ? body.detail : res.statusText;
-      throw new Error(typeof detail === 'string' ? detail : JSON.stringify(detail));
-    }
-    return body;
-  }
-};
diff --git a/js/app.js b/js/app.js
deleted file mode 100644
index 5978053..0000000
--- a/js/app.js
+++ /dev/null
@@ -1,278 +0,0 @@
-/* ============================================================
-   app.js — Core: router, sidebar, topbar, theme, search, init
-   ============================================================ */
-window.Router = {};
-window.App = {};
-
-const ROUTES = {
-  dashboard: { title: 'Dashboard' }, inbox: { title: 'Recruitment Inbox' }, jobs: { title: 'Jobs' }, candidates: { title: 'Candidates' },
-  talentpool: { title: 'Talent Pool' }, pipeline: { title: 'Pipeline' }, interviews: { title: 'Interviews' },
-  assessments: { title: 'Assessments' }, offers: { title: 'Offers' }, managers: { title: 'Hiring Managers' },
-  calendar: { title: 'Calendar' }, reports: { title: 'Reports' }, analytics: { title: 'Analytics' },
-  notifications: { title: 'Notifications' }, settings: { title: 'Settings' }, help: { title: 'Help' },
-  import: { title: 'CV Import' }, jobboard: { title: 'Job Board' }, recruiterhub: { title: 'Recruiter Hub' },
-  aiassistant: { title: 'AI Assistant' }, aistudio: { title: 'AI Studio' }, rbac: { title: 'Access Control' },
-  tasks: { title: 'Tasks' }
-};
-
-let currentRoute = 'dashboard';
-
-Router.go = function (route) {
-  if (!ROUTES[route]) route = 'dashboard';
-  location.hash = route;
-};
-Router.reload = function () { Router.render(currentRoute); };
-
-Router.render = function (route) {
-  currentRoute = route;
-  const view = (window.Views[route] || window.Views.dashboard)();
-  const main = document.getElementById('main-content');
-  main.innerHTML = view.html;
-  main.scrollTop = 0;
-  if (view.onMount) view.onMount();
-
-  // Expose the route so CSS can react to it (e.g. hide the AI launcher on
-  // the AI Assistant page, where it sat on top of the chat send button).
-  // Deliberately NOT `data-route`: initNav() binds a click handler to every
-  // [data-route] element, and <html> matching that would fire on any click.
-  document.documentElement.setAttribute('data-view', route);
-
-  // active nav
-  document.querySelectorAll('.nav-item').forEach(n => n.classList.toggle('active', n.dataset.route === route));
-  document.title = 'TalentFlow · ' + (ROUTES[route] ? ROUTES[route].title : 'ATS');
-
-  // close mobile sidebar + AI dock
-  if (App.setNavOpen) App.setNavOpen(false);
-  else {
-    document.getElementById('sidebar').classList.remove('mobile-open');
-    document.getElementById('scrim').classList.remove('open');
-  }
-  const dock = document.getElementById('aiDock');
-  if (dock) dock.classList.remove('open');
-};
-
-function handleHash() {
-  const route = (location.hash || '#dashboard').slice(1);
-  Router.render(ROUTES[route] ? route : 'dashboard');
-}
-
-// ---------------- Theme ----------------
-// `persist` is false when the OS drives the change, so following the
-// system stays the default until the user makes an explicit choice.
-App.applyTheme = function (theme, persist) {
-  document.documentElement.setAttribute('data-theme', theme);
-  if (persist) { try { localStorage.setItem('tf-theme', theme); } catch (e) {} }
-  const btn = document.getElementById('themeToggle');
-  if (btn) {
-    btn.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
-    btn.setAttribute('title', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
-    btn.setAttribute('aria-label', btn.getAttribute('title'));
-  }
-};
-App.setTheme = function (theme) {
-  App.applyTheme(theme, true);
-  // re-render current view so canvas charts pick up new theme colors
-  Router.render(currentRoute);
-};
-App.toggleTheme = function () {
-  const cur = document.documentElement.getAttribute('data-theme');
-  App.setTheme(cur === 'dark' ? 'light' : 'dark');
-};
-
-// ---------------- Toast passthrough ----------------
-App.toast = function (msg, type, title) { UI.toast(msg, type, title); };
-
-// ---------------- Badges ----------------
-App.updateBadges = function () {
-  const openJobs = DB.jobs.filter(j => j.status === 'Open').length;
-  setBadge('navJobsBadge', openJobs);
-  const unread = DB.notifications.filter(n => n.unread).length;
-  setBadge('navNotifBadge', unread);
-  const emailUnread = (window.Inbox && Array.isArray(Inbox._emails))
-    ? Inbox._emails.filter(e => e.unread).length
-    : 0;
-  const inboxUnread = DB.inbox.filter(i => i.unread).length + emailUnread;
-  setBadge('navInboxBadge', inboxUnread);
-  const openTasks = DB.tasks.filter(t => !t.done).length;
-  setBadge('navTaskBadge', openTasks);
-};
-function setBadge(id, n) {
-  const el = document.getElementById(id);
-  if (!el) return;
-  el.textContent = n;
-  el.style.display = n ? '' : 'none';
-}
-App.markAllNotifsRead = function () {
-  DB.notifications.forEach(n => n.unread = false);
-  App.updateBadges();
-  App.renderNotifDropdown();
-  UI.toast('All notifications marked as read', 'success');
-};
-
-// ---------------- Topbar dropdown content ----------------
-App.renderNotifDropdown = function () {
-  const list = document.getElementById('notifList');
-  list.className = 'dd-scroll';
-  list.innerHTML = DB.notifications.slice(0, 6).map(n => `
-    <div class="notif-row ${n.unread ? 'unread' : ''}">
-      <span class="notif-icn ${n.color}">${UI.icon(n.icon)}</span>
-      <div class="notif-body"><div class="notif-title">${n.title}</div><div class="notif-text">${n.text}</div><div class="notif-time">${n.time}</div></div>
-    </div>`).join('');
-};
-App.renderMessages = function () {
-  const list = document.getElementById('messagesList');
-  list.className = 'dd-scroll';
-  list.innerHTML = DB.messages.map(m => `
-    <div class="notif-row ${m.unread ? 'unread' : ''}">
-      ${UI.avatar(m.name, m.initials, m.color)}
-      <div class="notif-body"><div class="notif-title">${m.name}</div><div class="notif-text">${m.text}</div><div class="notif-time">${m.time} ago</div></div>
-    </div>`).join('');
-};
-
-// ---------------- Global search ----------------
-App.search = function (q) {
-  const box = document.getElementById('searchResults');
-  q = q.trim().toLowerCase();
-  if (!q) { box.classList.remove('open'); return; }
-
-  const jobs = DB.jobs.filter(j => (j.title + j.id + j.department).toLowerCase().includes(q)).slice(0, 4);
-  const cands = DB.candidates.filter(c => (c.name + c.email + c.jobTitle).toLowerCase().includes(q)).slice(0, 4);
-  const mgrs = DB.managers.filter(m => m.name.toLowerCase().includes(q)).slice(0, 3);
-
-  let html = '';
-  if (jobs.length) html += `<div class="search-group-label">Jobs</div>` + jobs.map(j =>
-    `<div class="search-item" onclick="App.searchGo('jobs',()=>Jobs.view('${j.id}'))"><span class="kpi-icn i-indigo" style="width:32px;height:32px;border-radius:8px">${UI.icon('briefcase')}</span><div><div class="si-title">${j.title}</div><div class="si-sub">${j.id} · ${j.department}</div></div></div>`).join('');
-  if (cands.length) html += `<div class="search-group-label">Candidates</div>` + cands.map(c =>
-    `<div class="search-item" onclick="App.searchGo('candidates',()=>Candidates.openProfile('${c.id}'))">${UI.avatar(c.name, c.initials, c.color)}<div><div class="si-title">${c.name}</div><div class="si-sub">${c.jobTitle}</div></div></div>`).join('');
-  if (mgrs.length) html += `<div class="search-group-label">Hiring Managers</div>` + mgrs.map(m =>
-    `<div class="search-item" onclick="App.searchGo('managers',()=>Views._mgrDetail('${m.id}'))">${UI.avatar(m.name, m.initials, m.color)}<div><div class="si-title">${m.name}</div><div class="si-sub">${m.title}</div></div></div>`).join('');
-  if (!html) html = `<div class="search-empty">No results for "${q}"</div>`;
-
-  box.innerHTML = html;
-  box.classList.add('open');
-};
-App.searchGo = function (route, cb) {
-  document.getElementById('searchResults').classList.remove('open');
-  document.getElementById('globalSearch').value = '';
-  Router.go(route);
-  if (cb) setTimeout(cb, 120);
-};
-
-// ---------------- Dropdown behavior ----------------
-function initDropdowns() {
-  document.querySelectorAll('.dropdown').forEach(dd => {
-    const toggle = dd.querySelector('[data-dd-toggle]');
-    toggle.addEventListener('click', e => {
-      e.stopPropagation();
-      const wasOpen = dd.classList.contains('open');
-      document.querySelectorAll('.dropdown.open').forEach(o => o.classList.remove('open'));
-      if (!wasOpen) dd.classList.add('open');
-    });
-    dd.querySelector('[data-dd-panel]').addEventListener('click', e => e.stopPropagation());
-  });
-  document.addEventListener('click', () => {
-    document.querySelectorAll('.dropdown.open').forEach(o => o.classList.remove('open'));
-    document.getElementById('searchResults').classList.remove('open');
-  });
-}
-
-// ---------------- Nav link interception ----------------
-function initNav() {
-  document.querySelectorAll('[data-route]').forEach(el => {
-    el.addEventListener('click', e => {
-      if (el.tagName === 'A') { /* href hash handles it */ }
-      const route = el.dataset.route;
-      if (route) { e.preventDefault(); Router.go(route); document.querySelectorAll('.dropdown.open').forEach(o => o.classList.remove('open')); }
-    });
-  });
-}
-
-// ---------------- Init ----------------
-function init() {
-  // Theme: an explicit past choice wins; otherwise follow the OS and keep
-  // following it until the user picks a side themselves.
-  const mq = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
-  let saved = null;
-  try { saved = localStorage.getItem('tf-theme'); } catch (e) {}
-  App.applyTheme(saved || (mq && mq.matches ? 'dark' : 'light'), false);
-  if (mq && !saved) {
-    const onSystemChange = e => {
-      let s = null;
-      try { s = localStorage.getItem('tf-theme'); } catch (err) {}
-      if (s) return;                                  // user has chosen; stop following
-      App.applyTheme(e.matches ? 'dark' : 'light', false);
-      Router.render(currentRoute);                    // recolour canvas charts
-    };
-    mq.addEventListener ? mq.addEventListener('change', onSystemChange)
-                        : mq.addListener(onSystemChange);
-  }
-
-  document.getElementById('themeToggle').addEventListener('click', App.toggleTheme);
-
-  // Canvas charts are drawn at a fixed pixel size, so they blur when the
-  // window changes width. Re-render on resize — but never while a modal or
-  // the AI dock is open, since that would discard what the user is doing.
-  // Width only: on iOS/Android the address bar collapsing fires `resize` with
-  // a height change on nearly every scroll, and re-rendering there would tear
-  // the view out from under the user mid-gesture.
-  let resizeTimer, lastW = window.innerWidth;
-  window.addEventListener('resize', () => {
-    if (window.innerWidth === lastW) return;
-    lastW = window.innerWidth;
-    clearTimeout(resizeTimer);
-    resizeTimer = setTimeout(() => {
-      const busy = document.getElementById('modalRoot').classList.contains('open')
-                || document.getElementById('aiDock').classList.contains('open');
-      if (!busy) Router.render(currentRoute);
-    }, 220);
-  }, { passive: true });
-  window.addEventListener('orientationchange', () => {
-    lastW = -1; // force the next resize through
-  });
-
-  // AI Assistant floating dock
-  document.getElementById('aiFab').addEventListener('click', () => AI._dockOpen());
-
-  // sidebar collapse (desktop)
-  document.getElementById('sidebarCollapse').addEventListener('click', () => {
-    document.getElementById('sidebar').classList.toggle('collapsed');
-  });
-  // Mobile nav drawer. `nav-open` on <html> is what CSS keys off — the FAB
-  // sits before .scrim in the DOM, so no sibling selector can reach it, and
-  // :has() would exclude older Safari/Firefox.
-  App.setNavOpen = function (open) {
-    document.getElementById('sidebar').classList.toggle('mobile-open', open);
-    document.getElementById('scrim').classList.toggle('open', open);
-    document.documentElement.classList.toggle('nav-open', open);
-    // Stop the page behind the drawer from scrolling under the user's finger.
-    document.body.style.overflow = open ? 'hidden' : '';
-  };
-  document.getElementById('mobileMenu').addEventListener('click', () => {
-    App.setNavOpen(!document.getElementById('sidebar').classList.contains('mobile-open'));
-  });
-  document.getElementById('scrim').addEventListener('click', () => App.setNavOpen(false));
-
-  // search
-  const search = document.getElementById('globalSearch');
-  search.addEventListener('input', () => App.search(search.value));
-  search.addEventListener('click', e => e.stopPropagation());
-  document.addEventListener('keydown', e => {
-    if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); search.focus(); }
-    if (e.key === 'Escape') { UI.closeModal(); document.getElementById('searchResults').classList.remove('open'); document.getElementById('aiDock').classList.remove('open'); App.setNavOpen(false); }
-  });
-
-  initDropdowns();
-  initNav();
-  App.renderNotifDropdown();
-  App.renderMessages();
-  App.updateBadges();
-
-  window.addEventListener('hashchange', handleHash);
-  handleHash();
-
-  // redraw charts on resize (debounced)
-  let rt;
-  window.addEventListener('resize', () => { clearTimeout(rt); rt = setTimeout(() => Router.reload(), 250); });
-}
-
-document.addEventListener('DOMContentLoaded', init);
diff --git a/js/assessments.js b/js/assessments.js
deleted file mode 100644
index 0f2eb55..0000000
--- a/js/assessments.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/* ============================================================
-   assessments.js — Assessments listing & assign
-   ============================================================ */
-window.Views = window.Views || {};
-window.Assessments = {};
-
-Views.assessments = function () {
-  const filters = { q: '', status: '', type: '' };
-  let table;
-
-  const stats = {
-    total: DB.assessments.length,
-    completed: DB.assessments.filter(a => a.status === 'Completed').length,
-    pending: DB.assessments.filter(a => ['Pending', 'In Progress'].includes(a.status)).length,
-    avg: Math.round(DB.assessments.filter(a => a.score).reduce((s, a) => s + a.score, 0) / (DB.assessments.filter(a => a.score).length || 1))
-  };
-
-  function apply() {
-    const rows = DB.assessments.filter(a => {
-      if (filters.status && a.status !== filters.status) return false;
-      if (filters.type && a.type !== filters.type) return false;
-      if (filters.q && !(a.candidate + a.jobTitle + a.type).toLowerCase().includes(filters.q.toLowerCase())) return false;
-      return true;
-    });
-    table.update(rows);
-  }
-
-  table = UI.dataTable({
-    pageSize: 8,
-    rows: DB.assessments,
-    columns: [
-      { key: 'candidate', label: 'Candidate', sortable: true, render: a => `<div class="user-cell">${UI.avatar(a.candidate, a.initials, a.color)}<div><div class="cell-primary">${a.candidate}</div><div class="cell-sub">${a.jobTitle}</div></div></div>` },
-      { key: 'type', label: 'Assessment', sortable: true, render: a => `<div class="cell-primary text-sm">${a.type}</div><div class="cell-sub">${a.duration}</div>` },
-      { key: 'assigned', label: 'Assigned', sortable: true, sortValue: a => a.assigned.getTime(), render: a => `<span class="text-muted">${DB.fmtShort(a.assigned)}</span>` },
-      { key: 'due', label: 'Due', sortable: true, sortValue: a => a.due.getTime(), render: a => `<span class="text-muted">${DB.fmtShort(a.due)}</span>` },
-      { key: 'score', label: 'Score', sortable: true, align: 'center', render: a => a.score !== null ? UI.scoreChip(a.score) : '<span class="text-muted">—</span>' },
-      { key: 'status', label: 'Status', sortable: true, render: a => UI.badge(a.status) },
-      { key: '_a', label: 'Actions', align: 'right', render: a => `
-        <div class="row-actions">
-          <button class="act-btn" data-tip="View" onclick="Assessments.view('${a.id}')">${UI.icon('eye')}</button>
-          <button class="act-btn" data-tip="Remind" onclick="UI.toast('Reminder sent to ${a.candidate}','info')">${UI.icon('mail')}</button>
-        </div>` }
-    ]
-  });
-
-  const statusOpts = ['<option value="">All Status</option>'].concat(['Completed', 'In Progress', 'Pending', 'Expired'].map(s => `<option>${s}</option>`)).join('');
-  const typeOpts = ['<option value="">All Types</option>'].concat([...new Set(DB.assessments.map(a => a.type))].map(t => `<option>${t}</option>`)).join('');
-  const statCard = (label, val, icn, cls) => `<div class="kpi"><div class="kpi-top"><span class="kpi-label">${label}</span><span class="kpi-icn ${cls}">${UI.icon(icn)}</span></div><div class="kpi-value">${val}</div></div>`;
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Assessments</h1><p class="page-sub">Coding tests, take-homes, and evaluations</p></div>
-        <div class="page-head-actions"><button class="btn btn-primary" onclick="Assessments.assign()">${UI.icon('plus')} Assign Assessment</button></div>
-      </div>
-      <div class="grid g-kpi mb-18">
-        ${statCard('Total Assigned', stats.total, 'file', 'i-indigo')}
-        ${statCard('Completed', stats.completed, 'check-circle', 'i-green')}
-        ${statCard('In Progress / Pending', stats.pending, 'clock', 'i-amber')}
-        ${statCard('Average Score', stats.avg + '%', 'target', 'i-teal')}
-      </div>
-      <div class="card">
-        <div class="card-body" style="padding-bottom:0">
-          <div class="toolbar">
-            <div class="toolbar-search">${UI.icon('search')}<input id="asSearch" placeholder="Search candidate or assessment…"/></div>
-            <select class="select" id="asStatus">${statusOpts}</select>
-            <select class="select" id="asType">${typeOpts}</select>
-          </div>
-        </div>
-        ${table.html}
-      </div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      table.mount();
-      const s = document.getElementById('asSearch');
-      s.oninput = () => { filters.q = s.value; apply(); };
-      document.getElementById('asStatus').onchange = e => { filters.status = e.target.value; apply(); };
-      document.getElementById('asType').onchange = e => { filters.type = e.target.value; apply(); };
-    }
-  };
-};
-
-Assessments.view = function (id) {
-  const a = DB.assessments.find(x => x.id === id);
-  const body = `
-    <div class="flex items-center gap-12 mb-18">${UI.avatar(a.candidate, a.initials, a.color, 'avatar-lg')}
-      <div><div class="ph-name" style="font-size:17px">${a.candidate}</div><div class="ph-role">${a.type} · ${a.jobTitle}</div></div>
-      <div style="margin-left:auto">${UI.badge(a.status)}</div></div>
-    <div class="info-grid mb-18">
-      <div class="info-item"><div class="il">Type</div><div class="iv">${a.type}</div></div>
-      <div class="info-item"><div class="il">Duration</div><div class="iv">${a.duration}</div></div>
-      <div class="info-item"><div class="il">Assigned</div><div class="iv">${DB.fmtDate(a.assigned)}</div></div>
-      <div class="info-item"><div class="il">Due</div><div class="iv">${DB.fmtDate(a.due)}</div></div>
-    </div>
-    ${a.score !== null ? `
-    <div class="divider"></div>
-    <div style="text-align:center;padding:10px 0">
-      <div style="font-size:44px;font-weight:800;letter-spacing:-1px;color:${a.score >= 70 ? 'var(--success)' : 'var(--warning)'}">${a.score}%</div>
-      <div class="text-muted">Overall Score</div>
-    </div>
-    <div class="mb-18">${UI.pbar(a.score)}</div>
-    <div class="form-section-title" style="margin-top:0">Section Breakdown</div>
-    ${['Problem Solving', 'Code Quality', 'Communication', 'Time Management'].map(sec => {
-      const sc = DB.int(60, 98);
-      return `<div class="flex items-center gap-12" style="margin-bottom:10px"><span style="width:130px;font-size:13px">${sec}</span><div style="flex:1">${UI.pbar(sc)}</div><b style="width:40px;text-align:right">${sc}%</b></div>`;
-    }).join('')}` : `<div class="empty-state">${UI.icon('clock')}<h3>Assessment not completed</h3><p>Results will appear once the candidate submits.</p></div>`}`;
-  const footer = `<button class="btn btn-secondary" onclick="UI.closeModal()">Close</button>
-    <button class="btn btn-primary" onclick="UI.closeModal();Candidates.openProfile('${a.candidateId}')">View Candidate</button>`;
-  UI.modal({ title: 'Assessment Result', subtitle: a.id, body, footer });
-};
-
-Assessments.assign = function () {
-  const opt = arr => arr.map(o => `<option>${o}</option>`).join('');
-  const body = `<form><div class="form-grid">
-    <div class="form-field col-span-2"><label>Candidate</label><select>${opt(DB.candidates.slice(0, 40).map(c => c.name))}</select></div>
-    <div class="form-field"><label>Assessment Type</label><select>${opt([...new Set(DB.assessments.map(a => a.type))])}</select></div>
-    <div class="form-field"><label>Time Limit</label><select><option>45 min</option><option>60 min</option><option>90 min</option><option>3 days</option></select></div>
-    <div class="form-field col-span-2"><label>Due Date</label><input type="date"/></div>
-  </div></form>`;
-  const footer = `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button>
-    <button class="btn btn-primary" onclick="UI.closeModal();UI.toast('Assessment assigned & invite sent','success')">${UI.icon('send')} Assign</button>`;
-  UI.modal({ title: 'Assign Assessment', subtitle: 'Send an evaluation to a candidate', body, footer });
-};
diff --git a/js/candidates.js b/js/candidates.js
deleted file mode 100644
index ad80747..0000000
--- a/js/candidates.js
+++ /dev/null
@@ -1,441 +0,0 @@
-/* ============================================================
-   candidates.js — Candidate list, filters, profile modal w/ tabs
-   ============================================================ */
-window.Views = window.Views || {};
-window.Candidates = {};
-
-Views.candidates = function () {
-  const f = { q: '', job: '', skill: '', dept: '', location: '', exp: '', edu: '', recruiter: '', manager: '', source: '', ats: '', stage: '', interview: '', notice: '', availability: '' };
-  const selected = new Set();
-  let sortMode = 'relevance';
-  let table;
-  Candidates._selected = selected;
-
-  function relevance(c) {
-    // composite relevance: ATS + matched-skill ratio + recency
-    const req = (DB.getJob(c.jobId) || {}).skills || [];
-    const skillRatio = req.length ? c.matchedSkills.length / req.length : 0.5;
-    const recency = 1 - Math.min(1, (new Date('2026-07-09') - c.applied) / (90 * 864e5));
-    return Math.round(c.aiScore * 0.7 + skillRatio * 20 + recency * 10);
-  }
-
-  function apply() {
-    let rows = DB.candidates.filter(c => {
-      if (f.job && c.jobTitle !== f.job) return false;
-      if (f.skill && !c.skills.includes(f.skill)) return false;
-      if (f.dept && c.department !== f.dept) return false;
-      if (f.location && c.location !== f.location) return false;
-      if (f.exp === '0-2' && c.experience > 2) return false;
-      if (f.exp === '3-5' && (c.experience < 3 || c.experience > 5)) return false;
-      if (f.exp === '6-9' && (c.experience < 6 || c.experience > 9)) return false;
-      if (f.exp === '10+' && c.experience < 10) return false;
-      if (f.edu && c.education !== f.edu) return false;
-      if (f.recruiter && c.recruiter !== f.recruiter) return false;
-      if (f.manager) { const job = DB.getJob(c.jobId); if (!job || job.manager !== f.manager) return false; }
-      if (f.source && c.source !== f.source) return false;
-      if (f.ats === '85+' && c.aiScore < 85) return false;
-      if (f.ats === '70-84' && (c.aiScore < 70 || c.aiScore > 84)) return false;
-      if (f.ats === '<70' && c.aiScore >= 70) return false;
-      if (f.stage && c.stage !== f.stage) return false;
-      if (f.interview && c.interviewStatus !== f.interview) return false;
-      if (f.notice && c.noticePeriod !== f.notice) return false;
-      if (f.availability && c.availability !== f.availability) return false;
-      if (f.q) { const q = f.q.toLowerCase(); if (!(c.name + c.email + c.jobTitle + c.currentCompany + c.recruiter + c.skills.join(' ')).toLowerCase().includes(q)) return false; }
-      return true;
-    });
-    if (sortMode === 'relevance') rows = [...rows].sort((a, b) => relevance(b) - relevance(a));
-    else if (sortMode === 'ats') rows = [...rows].sort((a, b) => b.aiScore - a.aiScore);
-    else if (sortMode === 'recent') rows = [...rows].sort((a, b) => b.applied - a.applied);
-    else if (sortMode === 'name') rows = [...rows].sort((a, b) => a.name.localeCompare(b.name));
-    table.update(rows);
-    updateBulkBar();
-    const cnt = document.getElementById('canResultCount');
-    if (cnt) cnt.textContent = rows.length + ' candidate' + (rows.length === 1 ? '' : 's');
-  }
-
-  function updateBulkBar() {
-    const bar = document.getElementById('bulkBar');
-    if (!bar) return;
-    if (selected.size) { bar.style.display = 'flex'; document.getElementById('bulkCount').textContent = selected.size + ' selected'; }
-    else bar.style.display = 'none';
-  }
-
-  table = UI.dataTable({
-    pageSize: 10,
-    rows: DB.candidates,
-    columns: [
-      { key: '_sel', label: '', render: c => `<span class="checkbox ${selected.has(c.id) ? 'on' : ''}" data-sel="${c.id}">${UI.icon('check')}</span>` },
-      { key: 'name', label: 'Candidate', sortable: true, render: c => `<div class="user-cell">${UI.avatar(c.name, c.initials, c.color)}<div><div class="cell-primary">${c.name} ${c.favorite ? '<span class="star-btn on" style="display:inline">' + UI.icon('star') + '</span>' : ''}</div><div class="cell-sub">${c.currentTitle} · ${c.location}</div></div></div>` },
-      { key: 'jobTitle', label: 'Applied Job', sortable: true, render: c => `<div class="text-sm">${c.jobTitle}</div><div class="cell-sub">${c.department}</div>` },
-      { key: 'experience', label: 'Exp', sortable: true, align: 'center', render: c => `<b>${c.experience}</b>y` },
-      { key: '_rel', label: 'Relevance', sortable: true, align: 'center', sortValue: c => relevance(c), render: c => `<span class="badge ${DB.atsRecommendationClass(c.recommendation)} badge-plain">${relevance(c)}%</span>` },
-      { key: 'stage', label: 'Stage', sortable: true, render: c => UI.badge(c.stage) },
-      { key: 'aiScore', label: 'ATS', sortable: true, align: 'center', render: c => `<span style="cursor:pointer" onclick="Candidates.atsMatch('${c.id}')">${UI.scoreChip(c.aiScore)}</span>` },
-      { key: 'availability', label: 'Availability', render: c => `<span class="text-sm">${c.availability}</span><div class="cell-sub">${c.noticePeriod} notice</div>` },
-      { key: '_a', label: 'Actions', align: 'right', render: c => `
-        <div class="row-actions">
-          <button class="act-btn star-btn ${c.favorite ? 'on' : ''}" data-tip="Favorite" data-fav="${c.id}">${UI.icon('star')}</button>
-          <button class="act-btn" data-tip="ATS Match" onclick="Candidates.atsMatch('${c.id}')">${UI.icon('target')}</button>
-          <button class="act-btn" data-tip="Profile" onclick="Candidates.openProfile('${c.id}')">${UI.icon('eye')}</button>
-          <button class="act-btn" data-tip="Advance" onclick="Candidates.advance('${c.id}')">${UI.icon('check')}</button>
-        </div>` }
-    ],
-    onRender(el) {
-      el.querySelectorAll('[data-sel]').forEach(chk => chk.onclick = () => {
-        const id = chk.dataset.sel;
-        if (selected.has(id)) selected.delete(id); else selected.add(id);
-        chk.classList.toggle('on'); updateBulkBar();
-      });
-      el.querySelectorAll('[data-fav]').forEach(st => st.onclick = () => {
-        const c = DB.getCandidate(st.dataset.fav); c.favorite = !c.favorite;
-        st.classList.toggle('on'); UI.toast(c.favorite ? c.name + ' added to favorites' : 'Removed from favorites', 'success');
-      });
-    }
-  });
-
-  const optList = (arr, label) => [`<option value="">${label}</option>`].concat(arr.map(o => `<option>${o}</option>`)).join('');
-  const jobTitles = [...new Set(DB.candidates.map(c => c.jobTitle))];
-
-  const filterPanel = `
-    <div class="filter-panel" id="filterPanel" style="display:none;padding:16px 0;border-top:1px solid var(--border);margin-top:12px">
-      <div class="form-field"><label>Job</label><select data-f="job">${optList(jobTitles, 'Any Job')}</select></div>
-      <div class="form-field"><label>Skill</label><select data-f="skill">${optList(DB.skillsPool, 'Any Skill')}</select></div>
-      <div class="form-field"><label>Department</label><select data-f="dept">${optList(DB.departments, 'Any Dept')}</select></div>
-      <div class="form-field"><label>Location</label><select data-f="location">${optList(DB.locations, 'Any Location')}</select></div>
-      <div class="form-field"><label>Experience</label><select data-f="exp">${optList(['0-2', '3-5', '6-9', '10+'], 'Any Exp')}</select></div>
-      <div class="form-field"><label>Education</label><select data-f="edu">${optList(DB.educationLevels, 'Any')}</select></div>
-      <div class="form-field"><label>Recruiter</label><select data-f="recruiter">${optList(DB.recruiters.map(r => r.name), 'Any Recruiter')}</select></div>
-      <div class="form-field"><label>Hiring Manager</label><select data-f="manager">${optList(DB.managers.map(m => m.name), 'Any Manager')}</select></div>
-      <div class="form-field"><label>Source</label><select data-f="source">${optList(DB.sources, 'Any Source')}</select></div>
-      <div class="form-field"><label>ATS Score</label><select data-f="ats">${optList(['85+', '70-84', '<70'], 'Any Score')}</select></div>
-      <div class="form-field"><label>Pipeline Stage</label><select data-f="stage">${optList(DB.stages, 'Any Stage')}</select></div>
-      <div class="form-field"><label>Interview Status</label><select data-f="interview">${optList(['Not Scheduled', 'Scheduled', 'Completed'], 'Any')}</select></div>
-      <div class="form-field"><label>Notice Period</label><select data-f="notice">${optList(['Immediate', '2 weeks', '1 month', '2 months', '3 months'], 'Any')}</select></div>
-      <div class="form-field"><label>Availability</label><select data-f="availability">${optList(['Immediate', '2 weeks', '1 month', 'Passive'], 'Any')}</select></div>
-    </div>`;
-
-  // recently viewed strip
-  const rv = DB.recentlyViewed.slice(0, 6).map(id => DB.getCandidate(id)).filter(Boolean);
-  const rvHtml = rv.length ? `<div class="flex items-center gap-8" style="margin-bottom:14px;flex-wrap:wrap">
-    <span class="text-muted text-sm fw-600">Recently viewed:</span>
-    ${rv.map(c => `<button class="prompt-chip" style="padding:5px 10px" onclick="Candidates.openProfile('${c.id}')">${UI.avatar(c.name, c.initials, c.color)} ${c.name.split(' ')[0]}</button>`).join('')}
-  </div>` : '';
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Candidates</h1><p class="page-sub"><span id="canResultCount">${DB.candidates.length} candidates</span> · ranked by AI relevance</p></div>
-        <div class="page-head-actions">
-          <button class="btn btn-secondary" onclick="UI.toast('Search saved','success')">${UI.icon('bookmark')} Save Search</button>
-          <button class="btn btn-secondary" onclick="UI.toast('Candidates exported','success')">${UI.icon('download')} Export</button>
-          <button class="btn btn-primary" onclick="Candidates.openAdd()">${UI.icon('plus')} Add Candidate</button>
-        </div>
-      </div>
-      ${rvHtml}
-      <div class="bulk-bar" id="bulkBar" style="display:none">
-        <span class="checkbox on">${UI.icon('check')}</span>
-        <span class="fw-600" id="bulkCount">0 selected</span>
-        <div style="flex:1"></div>
-        <button class="btn btn-sm" onclick="Candidates.bulk('email')">${UI.icon('mail')} Bulk Email</button>
-        <button class="btn btn-sm" onclick="Candidates.bulk('assign')">${UI.icon('users')} Assign</button>
-        <button class="btn btn-sm" onclick="Candidates.bulk('advance')">${UI.icon('check')} Advance</button>
-        <button class="btn btn-sm" onclick="Candidates.bulk('reject')">${UI.icon('x')} Reject</button>
-        <button class="btn btn-sm" onclick="Candidates.bulkClear()">${UI.icon('x')} Clear</button>
-      </div>
-      <div class="card">
-        <div class="card-body" style="padding-bottom:0">
-          <div class="toolbar">
-            <div class="toolbar-search">${UI.icon('search')}<input id="canSearch" placeholder="Search name, skill, company…"/></div>
-            <button class="btn btn-secondary" id="filterToggle">${UI.icon('filter')} Filters</button>
-            <div class="spacer"></div>
-            <label class="text-muted text-sm">Sort:</label>
-            <select class="select" id="canSort">
-              <option value="relevance">AI Relevance</option>
-              <option value="ats">ATS Score</option>
-              <option value="recent">Most Recent</option>
-              <option value="name">Name A–Z</option>
-            </select>
-          </div>
-          ${filterPanel}
-        </div>
-        ${table.html}
-      </div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      table.mount();
-      apply();
-      const s = document.getElementById('canSearch');
-      s.oninput = () => { f.q = s.value; apply(); };
-      document.getElementById('canSort').onchange = e => { sortMode = e.target.value; apply(); };
-      document.getElementById('filterToggle').onclick = () => {
-        const p = document.getElementById('filterPanel');
-        p.style.display = p.style.display === 'none' ? 'grid' : 'none';
-      };
-      document.querySelectorAll('#filterPanel [data-f]').forEach(sel => sel.onchange = e => { f[e.target.dataset.f] = e.target.value; apply(); });
-    }
-  };
-};
-
-// ---------------- Bulk actions ----------------
-Candidates.bulk = function (action) {
-  const ids = [...Candidates._selected];
-  if (!ids.length) return;
-  if (action === 'email') UI.toast(`Bulk email drafted to ${ids.length} candidates`, 'success');
-  else if (action === 'assign') {
-    const opts = DB.recruiters.map(r => `<option>${r.name}</option>`).join('');
-    UI.modal({ title: 'Bulk Assign Recruiter', subtitle: ids.length + ' candidates',
-      body: `<div class="form-field"><label>Assign to</label><select id="bulkRec">${opts}</select></div>`,
-      footer: `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button><button class="btn btn-primary" onclick="Candidates._bulkAssign()">Assign</button>` });
-    return;
-  }
-  else if (action === 'advance') { ids.forEach(id => Candidates._advanceSilent(id)); UI.toast(`${ids.length} candidates advanced`, 'success'); Router.reload(); return; }
-  else if (action === 'reject') { ids.forEach(id => { const c = DB.getCandidate(id); c.stage = 'Rejected'; c.status = 'Rejected'; }); UI.toast(`${ids.length} candidates rejected`, 'warning'); Router.reload(); return; }
-  Candidates.bulkClear();
-};
-Candidates._bulkAssign = function () {
-  const rec = document.getElementById('bulkRec').value;
-  [...Candidates._selected].forEach(id => { DB.getCandidate(id).recruiter = rec; });
-  UI.closeModal(); UI.toast('Recruiter assigned to selected candidates', 'success');
-  Candidates.bulkClear(); Router.reload();
-};
-Candidates.bulkClear = function () { Candidates._selected.clear(); Router.reload(); };
-Candidates._advanceSilent = function (id) {
-  const c = DB.getCandidate(id);
-  const order = ['Applied', 'Screening', 'Assessment', 'Interview', 'Offer', 'Hired'];
-  const i = order.indexOf(c.stage);
-  if (i > -1 && i < order.length - 1) { c.stage = order[i + 1]; c.status = c.stage; }
-};
-
-// ---------------- ATS Match detail ----------------
-Candidates.atsMatch = function (id) {
-  const c = DB.getCandidate(id);
-  const job = DB.getJob(c.jobId) || {};
-  const recCls = c.recommendation === 'Strong Match' ? 'recc-strong' : c.recommendation === 'Potential Match' ? 'recc-potential' : 'recc-weak';
-  const ringColor = c.aiScore >= 82 ? 'var(--success)' : c.aiScore >= 65 ? 'var(--warning)' : 'var(--danger)';
-  const sub = c.subScores;
-  const subRow = (label, val) => `<div class="flex items-center gap-12" style="margin-bottom:12px"><span style="width:110px;font-size:13px">${label}</span><div style="flex:1">${UI.pbar(val)}</div><b style="width:42px;text-align:right">${val}%</b></div>`;
-
-  const body = `
-    <div class="recc-banner ${recCls}">
-      <span class="recc-icn">${UI.icon(c.recommendation === 'Weak Match' ? 'x-circle' : 'check-circle')}</span>
-      <div style="flex:1"><div class="fw-600" style="font-size:15px">${c.recommendation}</div>
-        <div style="opacity:.85;font-size:13px">${c.name} for ${c.jobTitle}</div></div>
-    </div>
-    <div class="grid g-2" style="align-items:center;margin-bottom:20px">
-      <div style="text-align:center">
-        <div class="ats-ring" style="--pct:${c.aiScore};--c:${ringColor}"><div class="ats-val"><div class="ats-num">${c.aiScore}</div><div class="ats-lbl">ATS MATCH</div></div></div>
-      </div>
-      <div>
-        ${subRow('Skills', sub.skills)}
-        ${subRow('Experience', sub.experience)}
-        ${subRow('Education', sub.education)}
-        ${subRow('Keywords', sub.keywords)}
-        ${subRow('Location', sub.location)}
-        ${subRow('Salary', sub.salary)}
-      </div>
-    </div>
-    <div class="form-section-title" style="margin-top:0">Matched Skills (${c.matchedSkills.length})</div>
-    <div class="k-tags" style="margin-bottom:16px">${c.matchedSkills.length ? c.matchedSkills.map(s => `<span class="skill-pill skill-matched">${UI.icon('check')} ${s}</span>`).join('') : '<span class="text-muted">—</span>'}</div>
-    <div class="form-section-title" style="margin-top:0">Missing Skills (${c.missingSkills.length})</div>
-    <div class="k-tags">${c.missingSkills.length ? c.missingSkills.map(s => `<span class="skill-pill skill-missing">${UI.icon('x')} ${s}</span>`).join('') : '<span class="text-muted">None — full match</span>'}</div>
-    <div class="divider"></div>
-    <p class="text-muted text-sm">${UI.icon('sparkles')} Score computed from JD keywords, resume parsing, experience, education, location and salary alignment. Connect an AI model to refine with semantic matching.</p>`;
-  UI.modal({
-    title: 'ATS Match Analysis', subtitle: c.id + ' · ' + c.jobTitle, body, size: 'modal-lg',
-    footer: `<button class="btn btn-secondary" onclick="UI.closeModal()">Close</button><button class="btn btn-primary" onclick="UI.closeModal();Candidates.openProfile('${c.id}')">View Full Profile</button>`
-  });
-};
-
-Candidates.toggleFav = function (id, btn) {
-  const c = DB.getCandidate(id); c.favorite = !c.favorite;
-  if (btn) { btn.classList.toggle('on'); btn.innerHTML = UI.icon('star') + (c.favorite ? ' Favorited' : ' Favorite'); }
-  UI.toast(c.favorite ? c.name + ' added to favorites' : 'Removed from favorites', 'success');
-};
-
-Candidates.advance = function (id) {
-  const c = DB.getCandidate(id);
-  const order = ['Applied', 'Screening', 'Assessment', 'Interview', 'Offer', 'Hired'];
-  const i = order.indexOf(c.stage);
-  if (i === -1 || i >= order.length - 1) { UI.toast(c.name + ' cannot be advanced further', 'warning'); return; }
-  c.stage = order[i + 1]; c.status = c.stage;
-  UI.toast(`${c.name} moved to ${c.stage}`, 'success');
-  Router.reload();
-};
-
-// ---------------- Candidate profile w/ tabs ----------------
-Candidates.openProfile = function (id) {
-  const c = DB.getCandidate(id);
-  // track recently viewed
-  const rvIdx = DB.recentlyViewed.indexOf(id);
-  if (rvIdx > -1) DB.recentlyViewed.splice(rvIdx, 1);
-  DB.recentlyViewed.unshift(id);
-  if (DB.recentlyViewed.length > 12) DB.recentlyViewed.pop();
-  const tabs = ['Overview', 'Resume', 'Timeline', 'Interview', 'Notes', 'Activity', 'Documents', 'Feedback'];
-  const body = `
-    <div class="profile-hero">
-      ${UI.avatar(c.name, c.initials, c.color, 'avatar-lg')}
-      <div style="flex:1">
-        <div class="ph-name">${c.name}</div>
-        <div class="ph-role">${c.currentTitle} at ${c.currentCompany}</div>
-        <div class="ph-tags">${UI.badge(c.stage)} ${UI.badge(c.source, 'b-gray')}
-          <span class="badge b-plain b-indigo badge-plain">${c.experience} yrs exp</span></div>
-      </div>
-      <div style="text-align:center">${UI.scoreChip(c.aiScore)}<div class="cell-sub" style="margin-top:4px">AI Match</div></div>
-    </div>
-    <div class="tabs" id="canTabs" style="margin-top:22px">
-      ${tabs.map((t, i) => `<div class="tab ${i === 0 ? 'active' : ''}" data-tab="${i}">${t}</div>`).join('')}
-    </div>
-    <div id="canPanes">
-      ${Candidates._pane('Overview', c)}
-      ${Candidates._pane('Resume', c)}
-      ${Candidates._pane('Timeline', c)}
-      ${Candidates._pane('Interview', c)}
-      ${Candidates._pane('Notes', c)}
-      ${Candidates._pane('Activity', c)}
-      ${Candidates._pane('Documents', c)}
-      ${Candidates._pane('Feedback', c)}
-    </div>`;
-  const footer = `<button class="btn btn-ghost star-btn ${c.favorite ? 'on' : ''}" style="margin-right:auto" onclick="Candidates.toggleFav('${c.id}',this)">${UI.icon('star')} ${c.favorite ? 'Favorited' : 'Favorite'}</button>
-    <button class="btn btn-secondary" onclick="Candidates.atsMatch('${c.id}')">${UI.icon('target')} ATS Match</button>
-    <button class="btn btn-secondary" onclick="UI.toast('Email drafted','info')">${UI.icon('mail')} Message</button>
-    <button class="btn btn-primary" onclick="Candidates.advance('${c.id}');UI.closeModal()">${UI.icon('check')} Advance Stage</button>`;
-  UI.modal({ title: 'Candidate Profile', subtitle: c.id, body, footer, size: 'modal-lg' });
-
-  const paneEls = document.querySelectorAll('#canPanes .tab-pane');
-  document.querySelectorAll('#canTabs .tab').forEach(tab => tab.onclick = () => {
-    document.querySelectorAll('#canTabs .tab').forEach(t => t.classList.remove('active'));
-    tab.classList.add('active');
-    paneEls.forEach(p => p.classList.remove('active'));
-    paneEls[+tab.dataset.tab].classList.add('active');
-  });
-};
-
-Candidates._pane = function (name, c) {
-  const active = name === 'Overview' ? 'active' : '';
-  let content = '';
-  if (name === 'Overview') {
-    content = `
-      <div class="info-grid" style="margin-bottom:20px">
-        <div class="info-item"><div class="il">Email</div><div class="iv">${c.email}</div></div>
-        <div class="info-item"><div class="il">Phone</div><div class="iv">${c.phone}</div></div>
-        <div class="info-item"><div class="il">Location</div><div class="iv">${c.location}</div></div>
-        <div class="info-item"><div class="il">Applied For</div><div class="iv">${c.jobTitle}</div></div>
-        <div class="info-item"><div class="il">Current Company</div><div class="iv">${c.currentCompany}</div></div>
-        <div class="info-item"><div class="il">Experience</div><div class="iv">${c.experience} years</div></div>
-        <div class="info-item"><div class="il">Education</div><div class="iv">${c.education}</div></div>
-        <div class="info-item"><div class="il">Source</div><div class="iv">${c.source}</div></div>
-        <div class="info-item"><div class="il">Recruiter</div><div class="iv">${c.recruiter}</div></div>
-        <div class="info-item"><div class="il">Applied On</div><div class="iv">${DB.fmtDate(c.applied)}</div></div>
-        <div class="info-item"><div class="il">Expected Salary</div><div class="iv">${DB.moneyK(c.salary)}</div></div>
-        <div class="info-item"><div class="il">Rating</div><div class="iv">⭐ ${c.rating} / 5.0</div></div>
-      </div>
-      <div class="il" style="font-size:12px;color:var(--text-3);font-weight:600;text-transform:uppercase;margin-bottom:8px">Skills</div>
-      <div class="k-tags">${c.skills.map(s => `<span class="tag">${s}</span>`).join('')}</div>`;
-  } else if (name === 'Resume') {
-    content = `<div class="card" style="box-shadow:none;background:var(--bg-sunken)"><div class="card-body">
-      <h3 style="margin-bottom:4px">${c.name}</h3><p class="text-muted">${c.currentTitle} · ${c.location}</p>
-      <div class="divider"></div>
-      <div class="form-section-title" style="margin-top:0">Summary</div>
-      <p class="text-muted">Results-driven ${c.currentTitle.toLowerCase()} with ${c.experience} years of experience across ${c.department.toLowerCase()}. Passionate about building high-quality products and collaborating with cross-functional teams.</p>
-      <div class="form-section-title">Experience</div>
-      <div class="info-item"><div class="iv">${c.currentTitle} — ${c.currentCompany}</div><div class="il" style="text-transform:none">2021 – Present</div></div>
-      <div class="info-item" style="margin-top:10px"><div class="iv">Associate — ${DB.pick(DB.companies)}</div><div class="il" style="text-transform:none">2018 – 2021</div></div>
-      <div class="form-section-title">Education</div>
-      <div class="iv">${c.education}</div>
-      </div></div>
-      <button class="btn btn-secondary" style="margin-top:14px" onclick="UI.toast('Downloading resume.pdf','info')">${UI.icon('download')} Download PDF</button>`;
-  } else if (name === 'Timeline') {
-    const events = [
-      { icon: 'user-plus', title: 'Application received', meta: DB.fmtDate(c.applied), desc: `Applied via ${c.source}` },
-      { icon: 'star', title: 'AI screening completed', meta: '1 day later', desc: `Match score: ${c.aiScore}%` },
-      { icon: 'phone', title: 'Recruiter screen', meta: '3 days later', desc: `Call with ${c.recruiter}` },
-      { icon: 'calendar', title: 'Technical interview', meta: '1 week later', desc: 'Panel of 3 interviewers' },
-      { icon: 'check', title: `Moved to ${c.stage}`, meta: 'Recently', desc: 'Current stage in pipeline' }
-    ];
-    content = `<div class="timeline">${events.map(e => `
-      <div class="tl-item"><div class="tl-dot">${UI.icon(e.icon)}</div>
-        <div class="tl-title">${e.title}</div><div class="tl-meta">${e.meta}</div><div class="tl-desc">${e.desc}</div></div>`).join('')}</div>`;
-  } else if (name === 'Interview') {
-    const ivs = DB.interviews.filter(i => i.candidateId === c.id);
-    content = ivs.length ? `<div class="list-tight">${ivs.map(iv => `
-      <div class="list-row"><span class="kpi-icn i-blue" style="width:38px;height:38px;border-radius:10px">${UI.icon('calendar')}</span>
-        <div class="lr-main"><div class="lr-title">${iv.type}</div><div class="lr-sub">${DB.fmtDate(iv.when)} · ${iv.meeting}</div></div>
-        <div class="lr-right">${UI.badge(iv.status)}</div></div>`).join('')}</div>`
-      : `<div class="empty-state">${UI.icon('calendar')}<h3>No interviews scheduled</h3><p>Schedule an interview to get started.</p>
-         <button class="btn btn-primary btn-sm" style="margin-top:10px" onclick="UI.toast('Interview scheduler opened','info')">Schedule Interview</button></div>`;
-  } else if (name === 'Notes') {
-    content = `
-      <div class="form-field"><label>Add a note</label><textarea id="noteInput" placeholder="Write a private note about this candidate…"></textarea></div>
-      <button class="btn btn-primary btn-sm" style="margin:10px 0 18px" onclick="UI.toast('Note saved','success')">${UI.icon('plus')} Add Note</button>
-      <div class="list-tight">
-        <div class="list-row">${UI.avatar(c.recruiter)}<div class="lr-main"><div class="lr-title">${c.recruiter}</div><div class="lr-sub" style="color:var(--text-2)">Strong communication skills, great culture fit. Recommend advancing.</div><div class="lr-sub">2 days ago</div></div></div>
-        <div class="list-row">${UI.avatar('Asfand Ahmed', 'AA')}<div class="lr-main"><div class="lr-title">Asfand Ahmed</div><div class="lr-sub" style="color:var(--text-2)">Reviewed portfolio — impressive work. Schedule technical round.</div><div class="lr-sub">4 days ago</div></div></div>
-      </div>`;
-  } else if (name === 'Activity') {
-    content = `<div class="list-tight">
-      <div class="list-row"><span class="kpi-icn i-green" style="width:34px;height:34px;border-radius:9px">${UI.icon('eye')}</span><div class="lr-main"><div class="lr-sub" style="color:var(--text-2);font-size:13px">Profile viewed by ${c.recruiter}</div><div class="lr-sub">1h ago</div></div></div>
-      <div class="list-row"><span class="kpi-icn i-blue" style="width:34px;height:34px;border-radius:9px">${UI.icon('mail')}</span><div class="lr-main"><div class="lr-sub" style="color:var(--text-2);font-size:13px">Email sent: Interview invitation</div><div class="lr-sub">1 day ago</div></div></div>
-      <div class="list-row"><span class="kpi-icn i-amber" style="width:34px;height:34px;border-radius:9px">${UI.icon('star')}</span><div class="lr-main"><div class="lr-sub" style="color:var(--text-2);font-size:13px">Assessment score updated to ${c.aiScore}%</div><div class="lr-sub">2 days ago</div></div></div>
-      <div class="list-row"><span class="kpi-icn i-purple" style="width:34px;height:34px;border-radius:9px">${UI.icon('user-plus')}</span><div class="lr-main"><div class="lr-sub" style="color:var(--text-2);font-size:13px">Applied for ${c.jobTitle}</div><div class="lr-sub">${DB.fmtDate(c.applied)}</div></div></div>
-    </div>`;
-  } else if (name === 'Documents') {
-    const docs = [{ n: 'Resume.pdf', s: '284 KB' }, { n: 'Cover_Letter.pdf', s: '112 KB' }, { n: 'Portfolio.pdf', s: '4.2 MB' }, { n: 'References.docx', s: '48 KB' }];
-    content = `<div class="list-tight">${docs.map(d => `
-      <div class="list-row"><span class="kpi-icn i-red" style="width:38px;height:38px;border-radius:10px">${UI.icon('file')}</span>
-      <div class="lr-main"><div class="lr-title">${d.n}</div><div class="lr-sub">${d.s}</div></div>
-      <button class="act-btn" onclick="UI.toast('Downloading ${d.n}','info')">${UI.icon('download')}</button></div>`).join('')}</div>`;
-  } else if (name === 'Feedback') {
-    const scores = ['Strong Hire', 'Hire', 'Lean Hire'];
-    content = `<div class="list-tight">
-      ${[0, 1, 2].map(i => `<div class="list-row">${UI.avatar(DB.recruiters[i].name, DB.recruiters[i].initials, DB.recruiters[i].color)}
-        <div class="lr-main"><div class="lr-title">${DB.recruiters[i].name}</div><div class="lr-sub" style="color:var(--text-2)">${['Excellent technical depth and clear communication.', 'Good problem solving, would benefit from more system design exposure.', 'Solid candidate, positive team energy.'][i]}</div></div>
-        <div class="lr-right">${UI.badge(scores[i])}</div></div>`).join('')}
-    </div>
-    <button class="btn btn-primary btn-sm" style="margin-top:14px" onclick="UI.toast('Scorecard form opened','info')">${UI.icon('plus')} Submit Scorecard</button>`;
-  }
-  return `<div class="tab-pane ${active}">${content}</div>`;
-};
-
-Candidates.openAdd = function () {
-  const opt = (arr) => arr.map(o => `<option>${o}</option>`).join('');
-  const body = `<form id="canForm" novalidate><div class="form-grid">
-    <div class="form-field"><label>Full Name <span class="req">*</span></label><input name="name" placeholder="Jane Doe"/><span class="field-error">Required</span></div>
-    <div class="form-field"><label>Email <span class="req">*</span></label><input name="email" type="email" placeholder="jane@email.com"/><span class="field-error">Valid email required</span></div>
-    <div class="form-field"><label>Phone</label><input name="phone" placeholder="+1 (555) 000-0000"/></div>
-    <div class="form-field"><label>Applied Job <span class="req">*</span></label><select name="job">${opt(DB.jobs.filter(j => j.status === 'Open').map(j => j.title))}</select></div>
-    <div class="form-field"><label>Experience (years)</label><input name="experience" type="number" value="3"/></div>
-    <div class="form-field"><label>Current Company</label><input name="company" placeholder="Acme Inc."/></div>
-    <div class="form-field"><label>Source</label><select name="source">${opt(DB.sources)}</select></div>
-    <div class="form-field"><label>Stage</label><select name="stage">${opt(DB.stages)}</select></div>
-  </div></form>`;
-  const footer = `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button>
-    <button class="btn btn-primary" onclick="Candidates._add()">${UI.icon('check')} Add Candidate</button>`;
-  UI.modal({ title: 'Add Candidate', subtitle: 'Manually add a candidate to the pipeline', body, footer });
-};
-Candidates._add = function () {
-  const form = document.getElementById('canForm');
-  UI.clearErrors(form);
-  const f = Object.fromEntries(new FormData(form));
-  let ok = true;
-  if (!f.name.trim()) { UI.fieldError(form.querySelector('[name=name]'), 'Required'); ok = false; }
-  if (!/^\S+@\S+\.\S+$/.test(f.email)) { UI.fieldError(form.querySelector('[name=email]'), 'Valid email required'); ok = false; }
-  if (!ok) { UI.toast('Please fix the highlighted fields', 'error'); return; }
-  const job = DB.jobs.find(j => j.title === f.job) || DB.jobs[0];
-  const score = DB.int(55, 95);
-  DB.candidates.unshift({
-    id: 'CAN-' + (5001 + DB.candidates.length), name: f.name, initials: DB.initials(f.name), color: DB.avatarColor(f.name),
-    email: f.email, phone: f.phone || '+1 (555) 000-0000', jobId: job.id, jobTitle: job.title, department: job.department,
-    experience: +f.experience || 1, currentCompany: f.company || '—', currentTitle: job.title, location: job.location,
-    stage: f.stage, status: f.stage, aiScore: score, source: f.source, recruiter: job.recruiter, recruiterId: job.recruiterId,
-    applied: new Date('2026-07-09'), education: "Bachelor's Degree", skills: job.skills.slice(0, 4), rating: '4.0', salary: 120000,
-    matchedSkills: job.skills.slice(0, 3), missingSkills: job.skills.slice(3), recommendation: score >= 82 ? 'Strong Match' : score >= 65 ? 'Potential Match' : 'Weak Match',
-    subScores: { skills: score, experience: 80, education: 80, keywords: score, location: 100, salary: 90 },
-    noticePeriod: '1 month', availability: '2 weeks', certifications: [], favorite: false, interviewStatus: 'Not Scheduled'
-  });
-  UI.closeModal();
-  UI.toast('Candidate added to pipeline', 'success');
-  Router.reload();
-};
diff --git a/js/dashboard.js b/js/dashboard.js
deleted file mode 100644
index fc99eb7..0000000
--- a/js/dashboard.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/* ============================================================
-   dashboard.js — Main dashboard view
-   ============================================================ */
-window.Views = window.Views || {};
-
-Views.dashboard = function () {
-  const k = DB.kpis;
-  const kpiCards = [
-    { label: 'Open Jobs', value: k.openJobs, icon: 'briefcase', cls: 'i-indigo', trend: '+8%', dir: 'up', foot: 'vs last month' },
-    { label: 'Total Candidates', value: k.totalCandidates, icon: 'users', cls: 'i-blue', trend: '+12%', dir: 'up', foot: 'active in pipeline' },
-    { label: 'Interviews Today', value: k.interviewsToday, icon: 'calendar', cls: 'i-purple', trend: '3 upcoming', dir: 'flat', foot: 'next at 2:00 PM' },
-    { label: 'Offers Accepted', value: k.offersAccepted, icon: 'check-circle', cls: 'i-green', trend: '+5%', dir: 'up', foot: `of ${k.offersSent} sent` }
-  ];
-  const kpiCards2 = [
-    { label: 'Time to Hire', value: k.timeToHire + ' days', icon: 'clock', cls: 'i-teal', trend: '-3 days', dir: 'up', foot: 'faster than target' },
-    { label: 'Time to Fill', value: k.timeToFill + ' days', icon: 'target', cls: 'i-amber', trend: '-2 days', dir: 'up', foot: '41 day average' },
-    { label: 'Cost per Hire', value: DB.money(k.costPerHire), icon: 'dollar', cls: 'i-red', trend: '+4%', dir: 'down', foot: 'above budget' },
-    { label: 'Closed Jobs', value: k.closedJobs + k.hires, icon: 'award', cls: 'i-purple', trend: '+15%', dir: 'up', foot: 'this quarter' }
-  ];
-
-  function trendHtml(dir, txt) {
-    if (dir === 'flat') return `<span class="trend trend-flat">${txt}</span>`;
-    const cls = dir === 'up' ? 'trend-up' : 'trend-down';
-    const ic = dir === 'up' ? 'trending-up' : 'trending-down';
-    return `<span class="trend ${cls}">${UI.icon(ic)}${txt}</span>`;
-  }
-  const kpiHtml = arr => arr.map(c => `
-    <div class="kpi">
-      <div class="kpi-top">
-        <span class="kpi-label">${c.label}</span>
-        <span class="kpi-icn ${c.cls}">${UI.icon(c.icon)}</span>
-      </div>
-      <div class="kpi-value">${c.value}</div>
-      <div class="kpi-foot">${trendHtml(c.dir, c.trend)}<span class="kpi-foot-text">${c.foot}</span></div>
-    </div>`).join('');
-
-  // upcoming interviews
-  const upcoming = DB.interviews.filter(iv => iv.status === 'Scheduled').slice(0, 5);
-  const upcomingHtml = upcoming.length ? upcoming.map(iv => `
-    <div class="list-row" onclick="Router.go('interviews')" style="cursor:pointer">
-      ${UI.avatar(iv.candidate, iv.candInitials, iv.color)}
-      <div class="lr-main">
-        <div class="lr-title">${iv.candidate}</div>
-        <div class="lr-sub">${iv.type} · ${iv.jobTitle}</div>
-      </div>
-      <div class="lr-right">
-        <div class="fw-600 text-sm">${DB.fmtShort(iv.when)}</div>
-        <div class="lr-sub">${iv.when.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}</div>
-      </div>
-    </div>`).join('') : '<div class="empty-state" style="padding:30px">No upcoming interviews</div>';
-
-  // recent applications
-  const recentApps = [...DB.candidates].sort((a, b) => b.applied - a.applied).slice(0, 5);
-  const recentHtml = recentApps.map(c => `
-    <div class="list-row" onclick="Candidates.openProfile('${c.id}')" style="cursor:pointer">
-      ${UI.avatar(c.name, c.initials, c.color)}
-      <div class="lr-main">
-        <div class="lr-title">${c.name}</div>
-        <div class="lr-sub">${c.jobTitle}</div>
-      </div>
-      <div class="lr-right">${UI.scoreChip(c.aiScore)}</div>
-    </div>`).join('');
-
-  // activity feed
-  const activityHtml = DB.activity.slice(0, 8).map(a => `
-    <div class="list-row">
-      <span class="kpi-icn ${a.color}" style="width:36px;height:36px;border-radius:9px">${UI.icon(a.icon)}</span>
-      <div class="lr-main">
-        <div class="lr-sub" style="color:var(--text-2);font-size:13px">${a.html}</div>
-        <div class="lr-sub">${DB.relTime(a.time)}</div>
-      </div>
-    </div>`).join('');
-
-  // recruiter performance
-  const topRecs = [...DB.recruiters].sort((a, b) => b.hires - a.hires).slice(0, 5);
-  const recPerf = topRecs.map(r => `
-    <div class="list-row">
-      ${UI.avatar(r.name, r.initials, r.color)}
-      <div class="lr-main">
-        <div class="lr-title">${r.name}</div>
-        <div class="lr-sub">${r.openReqs} open reqs · ${r.avgTimeToHire}d avg</div>
-      </div>
-      <div class="lr-right"><div class="fw-600">${r.hires}</div><div class="lr-sub">hires</div></div>
-    </div>`).join('');
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div>
-          <h1 class="page-title">Good morning, Asfand 👋</h1>
-          <p class="page-sub">Here's what's happening with your hiring today — Thursday, July 9, 2026</p>
-        </div>
-        <div class="page-head-actions">
-          <button class="btn btn-secondary" onclick="Router.go('reports')">${UI.icon('download')} Export</button>
-          <button class="btn btn-primary" onclick="Jobs.openCreate()">${UI.icon('plus')} Create Job</button>
-        </div>
-      </div>
-
-      <div class="grid g-kpi">${kpiHtml(kpiCards)}</div>
-      <div class="grid g-kpi mt-18">${kpiHtml(kpiCards2)}</div>
-
-      <div class="grid g-2-1 mt-18">
-        <div class="card">
-          <div class="card-head">
-            <div><h3>Hiring Trend</h3><span class="ch-sub">Hires vs applications over the last 7 months</span></div>
-            <div class="pill-tabs"><span class="pill-tab active">7M</span><span class="pill-tab">1Y</span></div>
-          </div>
-          <div class="card-body">
-            <div class="chart-wrap"><canvas id="chartTrend" height="280"></canvas></div>
-            ${Charts.legend([{ label: 'Applications', color: Charts.PALETTE[4] }, { label: 'Hires', color: Charts.PALETTE[0] }])}
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-head"><div><h3>Candidate Pipeline</h3><span class="ch-sub">Active by stage</span></div></div>
-          <div class="card-body">
-            <div class="chart-wrap"><canvas id="chartPipeline" height="280"></canvas></div>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid g-2-1 mt-18">
-        <div class="card">
-          <div class="card-head"><div><h3>Upcoming Interviews</h3><span class="ch-sub">Next scheduled sessions</span></div>
-            <button class="btn btn-ghost btn-sm" onclick="Router.go('interviews')">View all</button></div>
-          <div class="card-body"><div class="list-tight">${upcomingHtml}</div></div>
-        </div>
-        <div class="card">
-          <div class="card-head"><div><h3>Source Analytics</h3><span class="ch-sub">Where candidates come from</span></div></div>
-          <div class="card-body"><div class="chart-wrap"><canvas id="chartSource" height="240"></canvas></div></div>
-        </div>
-      </div>
-
-      <div class="grid g-3 mt-18">
-        <div class="card">
-          <div class="card-head"><div><h3>Recent Applications</h3></div>
-            <button class="btn btn-ghost btn-sm" onclick="Router.go('candidates')">View all</button></div>
-          <div class="card-body"><div class="list-tight">${recentHtml}</div></div>
-        </div>
-        <div class="card">
-          <div class="card-head"><div><h3>Recruiter Performance</h3></div></div>
-          <div class="card-body"><div class="list-tight">${recPerf}</div></div>
-        </div>
-        <div class="card">
-          <div class="card-head"><div><h3>Recent Activity</h3></div></div>
-          <div class="card-body" style="max-height:360px;overflow-y:auto"><div class="list-tight">${activityHtml}</div></div>
-        </div>
-      </div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      const a = DB.analytics;
-      Charts.line(document.getElementById('chartTrend'), {
-        labels: a.hiringTrend.labels, area: true,
-        datasets: [
-          { label: 'Applications', data: a.hiringTrend.applications, color: Charts.PALETTE[4] },
-          { label: 'Hires', data: a.hiringTrend.hires, color: Charts.PALETTE[0] }
-        ]
-      });
-      Charts.horizontalBar(document.getElementById('chartPipeline'), {
-        labels: a.pipeline.map(p => p.stage), data: a.pipeline.map(p => p.count),
-        colors: Charts.PALETTE
-      });
-      Charts.bar(document.getElementById('chartSource'), {
-        labels: a.sources.map(s => s.source), data: a.sources.map(s => s.count)
-      });
-    }
-  };
-};
diff --git a/js/import.js b/js/import.js
deleted file mode 100644
index a9998c9..0000000
--- a/js/import.js
+++ /dev/null
@@ -1,176 +0,0 @@
-/* ============================================================
-   import.js — Manual CV Import (drag&drop, parse, match, dedupe)
-   ============================================================ */
-window.Views = window.Views || {};
-window.CVImport = {};
-
-Views.import = function () {
-  const queue = []; // {name, size, status, atsScore, matchedJob, duplicate}
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">CV Import</h1><p class="page-sub">Upload resumes — we parse, score, match, and dedupe automatically</p></div>
-        <div class="page-head-actions">
-          <span class="integration-status pending"><span class="pulse"></span>AI Resume Parser · Ready</span>
-        </div>
-      </div>
-
-      <div class="grid g-2-1">
-        <div>
-          <div class="card mb-18"><div class="card-body">
-            <div class="dropzone" id="dropzone">
-              <div class="dz-icn">${UI.icon('upload')}</div>
-              <h3>Drag &amp; drop resumes here</h3>
-              <p class="text-muted" style="margin-bottom:16px">or click to browse — PDF, DOC, DOCX and ZIP supported · up to 20 files</p>
-              <button class="btn btn-primary" id="browseBtn">${UI.icon('upload')} Browse Files</button>
-              <div class="flex items-center gap-8" style="justify-content:center;margin-top:16px">
-                ${['PDF', 'DOC', 'DOCX', 'ZIP'].map(t => `<span class="badge b-gray badge-plain">${t}</span>`).join('')}
-              </div>
-            </div>
-            <div class="flex items-center gap-8" style="margin-top:16px;flex-wrap:wrap">
-              <button class="btn btn-secondary btn-sm" onclick="CVImport.simulate(3)">${UI.icon('sparkles')} Simulate 3 files</button>
-              <button class="btn btn-secondary btn-sm" onclick="CVImport.simulate(1,true)">${UI.icon('layers')} Simulate ZIP (8 CVs)</button>
-              <span class="text-muted text-sm" style="margin-left:auto">Files are processed locally in this demo</span>
-            </div>
-          </div></div>
-
-          <div class="card" id="queueCard" style="display:none">
-            <div class="card-head"><div><h3>Processing Queue</h3><span class="ch-sub" id="queueSub">0 files</span></div>
-              <button class="btn btn-primary btn-sm" id="importAllBtn" onclick="CVImport.importAll()">${UI.icon('check')} Import All</button></div>
-            <div class="card-body" id="queueList"></div>
-          </div>
-        </div>
-
-        <div class="card" style="align-self:start">
-          <div class="card-head"><div><h3>Auto-Processing</h3><span class="ch-sub">What happens on upload</span></div></div>
-          <div class="card-body"><div class="timeline">
-            ${[
-              { i: 'file', t: 'Resume parsing', d: 'Extract name, contact, experience, skills & education' },
-              { i: 'target', t: 'ATS scoring', d: 'Generate a match score against the requisition' },
-              { i: 'briefcase', t: 'Job matching', d: 'Suggest the best-matching open roles' },
-              { i: 'users', t: 'Duplicate detection', d: 'Flag candidates already in the system' },
-              { i: 'user-plus', t: 'Profile creation', d: 'Create a candidate profile in Applied stage' }
-            ].map(s => `<div class="tl-item"><div class="tl-dot">${UI.icon(s.i)}</div><div class="tl-title">${s.t}</div><div class="tl-desc">${s.d}</div></div>`).join('')}
-          </div></div>
-        </div>
-      </div>
-    </div>`;
-
-  CVImport._queue = queue;
-
-  return {
-    html,
-    onMount() {
-      const dz = document.getElementById('dropzone');
-      const browse = document.getElementById('browseBtn');
-      dz.addEventListener('click', () => CVImport.simulate(DB.int(2, 4)));
-      browse.addEventListener('click', e => { e.stopPropagation(); CVImport.simulate(DB.int(2, 4)); });
-      dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('drag'); });
-      dz.addEventListener('dragleave', () => dz.classList.remove('drag'));
-      dz.addEventListener('drop', e => { e.preventDefault(); dz.classList.remove('drag'); CVImport.simulate(e.dataTransfer.files.length || DB.int(2, 4)); });
-      CVImport._renderQueue();
-    }
-  };
-};
-
-CVImport.simulate = function (count, isZip) {
-  const n = isZip ? 8 : count;
-  const jobs = DB.jobs.filter(j => j.status === 'Open');
-  for (let k = 0; k < n; k++) {
-    const name = DB.pick(['Olivia', 'Liam', 'Emma', 'Noah', 'Ava', 'Ethan', 'Sophia', 'Mason', 'Priya', 'Diego', 'Yuki', 'Omar']) + ' ' + DB.pick(['Chen', 'Patel', 'Kim', 'Garcia', 'Silva', 'Ahmed', 'Novak', 'Reyes', 'Khan', 'Costa']);
-    const item = {
-      id: 'UP-' + Math.random().toString(36).slice(2, 8), name, file: name.split(' ')[0] + '_Resume.' + DB.pick(['pdf', 'docx', 'doc']),
-      size: DB.int(120, 620) + ' KB', progress: 0, status: 'Uploading', atsScore: null,
-      job: DB.pick(jobs.length ? jobs : DB.jobs), duplicate: Math.random() < 0.18, imported: false
-    };
-    CVImport._queue.push(item);
-    CVImport._process(item);
-  }
-  document.getElementById('queueCard').style.display = '';
-  UI.toast(isZip ? 'ZIP extracted — 8 resumes queued' : n + ' file(s) uploaded', 'info');
-  CVImport._renderQueue();
-};
-
-CVImport._process = function (item) {
-  const tick = setInterval(() => {
-    item.progress += DB.int(12, 30);
-    if (item.progress >= 100) {
-      item.progress = 100; clearInterval(tick);
-      item.status = 'Parsing';
-      CVImport._renderQueue();
-      setTimeout(() => {
-        item.status = 'Ready'; item.atsScore = DB.int(52, 96);
-        CVImport._renderQueue();
-      }, 700 + DB.int(0, 500));
-    }
-    CVImport._renderQueue();
-  }, 220);
-};
-
-CVImport._renderQueue = function () {
-  const el = document.getElementById('queueList');
-  if (!el) return;
-  const q = CVImport._queue;
-  document.getElementById('queueSub').textContent = q.length + ' file' + (q.length === 1 ? '' : 's') + ' · ' + q.filter(i => i.imported).length + ' imported';
-  el.innerHTML = q.map(i => `
-    <div class="upload-row">
-      <span class="attach-icn" style="width:38px;height:38px">${UI.icon('file')}</span>
-      <div style="flex:1;min-width:0">
-        <div class="flex items-center gap-8"><span class="fw-600 text-sm">${i.name}</span>
-          ${i.duplicate ? '<span class="badge b-red badge-plain" style="padding:1px 7px;font-size:10px">DUPLICATE</span>' : ''}</div>
-        <div class="cell-sub">${i.file} · ${i.size}</div>
-        ${i.status === 'Uploading' || i.status === 'Parsing' ? `<div class="upload-progress" style="margin-top:6px"><div class="upload-progress-fill" style="width:${i.progress}%"></div></div>` :
-          `<div class="cell-sub" style="margin-top:4px">Best match: <b>${i.job.title}</b></div>`}
-      </div>
-      <div style="text-align:right;flex-shrink:0">
-        ${i.status === 'Ready' ? UI.scoreChip(i.atsScore) : `<span class="badge ${i.status === 'Parsing' ? 'b-amber' : 'b-blue'}">${i.status}${i.status === 'Uploading' ? ' ' + i.progress + '%' : ''}</span>`}
-      </div>
-      <div style="flex-shrink:0">
-        ${i.imported ? `<span class="badge b-green">Imported</span>` :
-          i.status === 'Ready' ? `<button class="btn btn-primary btn-sm" onclick="CVImport.importOne('${i.id}')">Import</button>` :
-          `<button class="act-btn" disabled>${UI.icon('clock')}</button>`}
-      </div>
-    </div>`).join('');
-};
-
-CVImport.importOne = function (id) {
-  const i = CVImport._queue.find(x => x.id === id);
-  if (!i || i.imported) return;
-  if (i.duplicate) {
-    UI.modal({
-      title: 'Duplicate Detected', subtitle: i.name,
-      body: `<div class="flex gap-16 items-center"><span class="kpi-icn i-amber" style="width:48px;height:48px;border-radius:12px;flex-shrink:0">${UI.icon('users')}</span>
-        <div><p class="fw-600" style="font-size:15px">A similar candidate already exists</p>
-        <p class="text-muted" style="margin-top:4px">${i.name} matches an existing profile (95% similarity on name + email). Importing will create a duplicate.</p></div></div>`,
-      footer: `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button>
-        <button class="btn btn-secondary" onclick="UI.closeModal();UI.toast('Merged into existing profile','success')">Merge</button>
-        <button class="btn btn-primary" onclick="UI.closeModal();CVImport._doImport('${id}')">Import Anyway</button>`
-    });
-    return;
-  }
-  CVImport._doImport(id);
-};
-CVImport._doImport = function (id) {
-  const i = CVImport._queue.find(x => x.id === id);
-  const job = i.job;
-  DB.candidates.unshift({
-    id: 'CAN-' + (5001 + DB.candidates.length), name: i.name, initials: DB.initials(i.name), color: DB.avatarColor(i.name),
-    email: i.name.toLowerCase().replace(/ /g, '.') + '@email.com', phone: '+1 (555) 000-0000', jobId: job.id, jobTitle: job.title, department: job.department,
-    experience: DB.int(2, 12), currentCompany: DB.pick(DB.companies), currentTitle: job.title, location: DB.pick(DB.locations),
-    stage: 'Applied', status: 'Applied', aiScore: i.atsScore, source: 'Manual CV Upload', recruiter: DB.pick(DB.recruiters).name, recruiterId: '',
-    applied: new Date('2026-07-09'), education: "Bachelor's Degree", skills: job.skills.slice(0, 4), rating: '4.0', salary: DB.int(90, 180) * 1000,
-    matchedSkills: job.skills.slice(0, 3), missingSkills: job.skills.slice(3), recommendation: i.atsScore >= 82 ? 'Strong Match' : 'Potential Match',
-    subScores: { skills: i.atsScore, experience: 80, education: 80, keywords: i.atsScore, location: 100, salary: 90 },
-    noticePeriod: '1 month', availability: '2 weeks', certifications: [], favorite: false, interviewStatus: 'Not Scheduled'
-  });
-  i.imported = true;
-  CVImport._renderQueue(); App.updateBadges();
-  UI.toast(`${i.name} imported → ${job.title}`, 'success');
-};
-CVImport.importAll = function () {
-  const ready = CVImport._queue.filter(i => i.status === 'Ready' && !i.imported && !i.duplicate);
-  if (!ready.length) { UI.toast('No files ready to import', 'warning'); return; }
-  ready.forEach(i => CVImport._doImport(i.id));
-  UI.toast(`${ready.length} candidates imported`, 'success');
-};
diff --git a/js/inbox.js b/js/inbox.js
deleted file mode 100644
index 28e0008..0000000
--- a/js/inbox.js
+++ /dev/null
@@ -1,419 +0,0 @@
-/* ============================================================
-   inbox.js — Central Recruitment Inbox + Outlook Email tab
-   ============================================================ */
-window.Views = window.Views || {};
-window.Inbox = {};
-
-Views.inbox = function () {
-  const state = { tab: 'All Applications', selected: null, emailSelected: null, q: '' };
-  const tabs = ['All Applications', 'Unread', 'Imported', 'Processed', 'Rejected', 'Duplicates', 'Email'];
-
-  function filtered() {
-    let list = DB.inbox;
-    if (state.tab === 'Unread') list = list.filter(i => i.processing === 'Unread');
-    else if (state.tab === 'Imported') list = list.filter(i => i.processing === 'Imported');
-    else if (state.tab === 'Processed') list = list.filter(i => i.processing === 'Processed');
-    else if (state.tab === 'Rejected') list = list.filter(i => i.processing === 'Rejected');
-    else if (state.tab === 'Duplicates') list = list.filter(i => i.duplicate);
-    if (state.q) list = list.filter(i => (i.name + i.position + i.source).toLowerCase().includes(state.q.toLowerCase()));
-    return list;
-  }
-
-  function counts() {
-    return {
-      'All Applications': DB.inbox.length,
-      'Unread': DB.inbox.filter(i => i.processing === 'Unread').length,
-      'Imported': DB.inbox.filter(i => i.processing === 'Imported').length,
-      'Processed': DB.inbox.filter(i => i.processing === 'Processed').length,
-      'Rejected': DB.inbox.filter(i => i.processing === 'Rejected').length,
-      'Duplicates': DB.inbox.filter(i => i.duplicate).length,
-      'Email': (Inbox._emails || []).filter(e => e.unread).length
-    };
-  }
-
-  function sourceChip(item) {
-    const m = item.sourceMeta;
-    // The dot carries the partner's brand colour; the label uses theme text.
-    // Rendering 11px labels in the partner colour failed AA in both themes.
-    // `--chip` carries the source colour; CSS mixes the tint. String-concat
-    // alpha ("#0a66c214") breaks for the tokenised sources (var(--c1)14).
-    return `<span class="source-chip" style="--chip:${m.color}"><span class="source-dot"></span>${item.source}</span>`;
-  }
-
-  function renderList() {
-    const el = document.getElementById('inboxList');
-    if (!el) return;
-    const list = filtered();
-    if (!list.length) { el.innerHTML = `<div class="empty-state">${UI.icon('inbox')}<h3>Nothing here</h3><p>No applications in this view.</p></div>`; return; }
-    el.innerHTML = list.map(i => `
-      <div class="inbox-item ${i.unread ? 'unread' : ''} ${state.selected === i.id ? 'active' : ''}" data-id="${i.id}">
-        ${UI.avatar(i.name, i.initials, i.color)}
-        <div class="ii-main">
-          <div class="ii-name">${i.name} ${i.duplicate ? '<span class="badge b-red badge-plain" style="padding:1px 6px;font-size:10px">DUP</span>' : ''}</div>
-          <div class="ii-pos">${i.position}</div>
-          <div class="ii-meta">${sourceChip(i)} ${UI.badge(i.processing)}</div>
-        </div>
-        <div style="text-align:right;flex-shrink:0">
-          <div class="ii-time">${DB.relTime(Math.round((new Date('2026-07-09T20:00') - i.received) / 60000))}</div>
-          <div style="margin-top:6px">${UI.scoreChip(i.atsScore)}</div>
-        </div>
-      </div>`).join('');
-    el.querySelectorAll('.inbox-item').forEach(row => row.onclick = () => {
-      state.selected = row.dataset.id;
-      const it = DB.inbox.find(x => x.id === state.selected); if (it) it.unread = false;
-      renderList(); renderDetail(); App.updateBadges();
-    });
-  }
-
-  function renderDetail() {
-    const el = document.getElementById('inboxDetail');
-    if (!el) return;
-    const i = DB.inbox.find(x => x.id === state.selected);
-    if (!i) { el.innerHTML = `<div class="empty-state" style="padding:100px 20px">${UI.icon('inbox')}<h3>Select an application</h3><p>Choose an item from the list to view details and take action.</p></div>`; return; }
-    const rec = DB.atsRecommendationClass;
-    const recLabel = i.atsScore >= 82 ? 'Strong Match' : i.atsScore >= 65 ? 'Potential Match' : 'Weak Match';
-    el.innerHTML = `
-      <div style="padding:24px">
-        <div class="flex items-center gap-16" style="margin-bottom:20px">
-          ${UI.avatar(i.name, i.initials, i.color, 'avatar-lg')}
-          <div style="flex:1"><div class="ph-name" style="font-size:19px">${i.name}</div>
-            <div class="ph-role">${i.position}</div>
-            <div class="ph-tags" style="margin-top:8px">${sourceChip(i)} ${UI.badge(i.processing)} ${UI.badge(i.resumeStatus, i.resumeStatus === 'Parsed' ? 'b-green' : i.resumeStatus === 'Failed' ? 'b-red' : 'b-amber')}</div>
-          </div>
-          <div style="text-align:center">
-            <div class="ats-ring" style="width:84px;height:84px;--pct:${i.atsScore};--c:${i.atsScore >= 82 ? 'var(--success)' : i.atsScore >= 65 ? 'var(--warning)' : 'var(--danger)'}">
-              <div class="ats-val"><div class="ats-num" style="font-size:22px">${i.atsScore}</div></div></div>
-            <div class="cell-sub" style="margin-top:4px">ATS Score</div>
-          </div>
-        </div>
-
-        <div class="info-grid" style="margin-bottom:20px">
-          <div class="info-item"><div class="il">Email</div><div class="iv">${i.email}</div></div>
-          <div class="info-item"><div class="il">Phone</div><div class="iv">${i.phone}</div></div>
-          <div class="info-item"><div class="il">Experience</div><div class="iv">${i.experience} years</div></div>
-          <div class="info-item"><div class="il">Assigned Recruiter</div><div class="iv">${i.recruiter}</div></div>
-          <div class="info-item"><div class="il">Received</div><div class="iv">${DB.fmtDate(i.received)}</div></div>
-          <div class="info-item"><div class="il">Match</div><div class="iv">${UI.badge(recLabel, rec(recLabel))}</div></div>
-        </div>
-
-        <div class="card" style="box-shadow:none;background:var(--bg-sunken);margin-bottom:20px"><div class="card-body">
-          <div class="flex items-center gap-12" style="justify-content:space-between;margin-bottom:12px">
-            <div class="fw-600">${UI.icon('paperclip')} ${i.attachment}</div>
-            <button class="btn btn-secondary btn-sm" onclick="Inbox.viewResume('${i.id}')">${UI.icon('eye')} Preview</button>
-          </div>
-          <div class="resume-thumb">${Inbox._resumeText(i)}</div>
-        </div></div>
-
-        <div class="flex gap-8" style="flex-wrap:wrap">
-          <button class="btn btn-primary" onclick="Inbox.import('${i.id}')">${UI.icon('user-plus')} Import Candidate</button>
-          <button class="btn btn-secondary" onclick="Inbox.parse('${i.id}')">${UI.icon('sparkles')} Parse Resume</button>
-          <button class="btn btn-secondary" onclick="Inbox.assign('${i.id}')">${UI.icon('users')} Assign Recruiter</button>
-          <button class="btn btn-secondary" onclick="Inbox.moveToPipeline('${i.id}')">${UI.icon('layers')} Move to Pipeline</button>
-          <button class="btn btn-secondary" onclick="Inbox.note('${i.id}')">${UI.icon('edit')} Add Note</button>
-          <button class="btn btn-ghost" style="color:var(--danger)" onclick="Inbox.reject('${i.id}')">${UI.icon('x')} Reject</button>
-        </div>
-      </div>`;
-  }
-
-  function renderBody() {
-    const body = document.getElementById('inboxBody');
-    if (state.tab === 'Email') { body.innerHTML = Inbox._emailView(); Inbox._bindEmail(state); return; }
-    body.innerHTML = `
-      <div class="split">
-        <div class="split-list">
-          <div style="padding:12px 16px;border-bottom:1px solid var(--border)">
-            <div class="toolbar-search" style="max-width:none"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input id="inboxSearch" placeholder="Search applications…" value="${state.q}"/></div>
-          </div>
-          <div id="inboxList"></div>
-        </div>
-        <div class="split-detail" id="inboxDetail"></div>
-      </div>`;
-    renderList(); renderDetail();
-    const s = document.getElementById('inboxSearch');
-    s.oninput = () => { state.q = s.value; renderList(); };
-  }
-
-  Inbox._render = { list: renderList, detail: renderDetail, body: renderBody };
-  Inbox._state = state;
-
-  const c = counts();
-  const tabHtml = tabs.map(t => `<div class="tab ${t === state.tab ? 'active' : ''}" data-tab="${t}">${t} <span class="k-count" style="margin-left:4px">${c[t]}</span></div>`).join('');
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Recruitment Inbox</h1><p class="page-sub">Every candidate, every source — one unified queue</p></div>
-        <div class="page-head-actions">
-          <span class="integration-status"><span class="pulse"></span>Microsoft Graph API · Connected</span>
-          <button class="btn btn-secondary" onclick="UI.toast('Syncing all sources…','info');setTimeout(()=>UI.toast('Inbox synced','success'),900)">${UI.icon('refresh')} Sync</button>
-          <button class="btn btn-primary" onclick="Router.go('import')">${UI.icon('upload')} Upload CVs</button>
-        </div>
-      </div>
-      <div class="card">
-        <div class="tabs" id="inboxTabs" style="margin:0 16px;padding-top:8px">${tabHtml}</div>
-        <div id="inboxBody"></div>
-      </div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      renderBody();
-      document.querySelectorAll('#inboxTabs .tab').forEach(tab => tab.onclick = () => {
-        state.tab = tab.dataset.tab; state.selected = null;
-        document.querySelectorAll('#inboxTabs .tab').forEach(t => t.classList.remove('active'));
-        tab.classList.add('active');
-        renderBody();
-      });
-    }
-  };
-};
-
-Inbox._resumeText = function (i) {
-  return `${i.name.toUpperCase()}\n${i.email} · ${i.phone}\n${'—'.repeat(30)}\nPROFESSIONAL SUMMARY\n${i.experience} years of experience. Applied for ${i.position} via ${i.source}.\n\nEXPERIENCE\n• ${DB.pick(DB.companies)} — Senior role (2021–Present)\n• ${DB.pick(DB.companies)} — Associate (2018–2021)\n\nEDUCATION\n• Bachelor's Degree, Computer Science\n\nSKILLS\n• ${DB.pick(DB.skillsPool)}, ${DB.pick(DB.skillsPool)}, ${DB.pick(DB.skillsPool)}, ${DB.pick(DB.skillsPool)}`;
-};
-
-Inbox.viewResume = function (id) {
-  const i = DB.inbox.find(x => x.id === id);
-  UI.modal({
-    title: i.attachment, subtitle: 'Resume preview · ' + i.name,
-    body: `<div class="resume-thumb" style="max-height:none;font-size:12px">${Inbox._resumeText(i)}</div>`,
-    footer: `<button class="btn btn-secondary" onclick="UI.closeModal()">Close</button><button class="btn btn-primary" onclick="UI.closeModal();Inbox.import('${id}')">${UI.icon('user-plus')} Import Candidate</button>`,
-    size: 'modal-lg'
-  });
-};
-
-Inbox.parse = function (id) {
-  const i = DB.inbox.find(x => x.id === id);
-  i.resumeStatus = 'Parsing';
-  Inbox._render.detail();
-  UI.toast('Parsing resume with AI…', 'info');
-  setTimeout(() => { i.resumeStatus = 'Parsed'; i.atsScore = DB.int(60, 96); Inbox._render.list(); Inbox._render.detail(); UI.toast('Resume parsed — profile fields extracted', 'success'); }, 1100);
-};
-
-Inbox.import = function (id) {
-  const i = DB.inbox.find(x => x.id === id);
-  const job = DB.getJob(i.jobId) || DB.jobs[0];
-  // create candidate
-  const newC = {
-    id: 'CAN-' + (5001 + DB.candidates.length), name: i.name, initials: i.initials, color: i.color,
-    email: i.email, phone: i.phone, jobId: job.id, jobTitle: job.title, department: job.department,
-    experience: i.experience, currentCompany: DB.pick(DB.companies), currentTitle: job.title, location: DB.pick(DB.locations),
-    stage: 'Applied', status: 'Applied', aiScore: i.atsScore, source: i.source, recruiter: i.recruiter, recruiterId: '',
-    applied: new Date('2026-07-09'), education: "Bachelor's Degree", skills: job.skills.slice(0, 4), rating: '4.0', salary: DB.int(90, 180) * 1000,
-    matchedSkills: job.skills.slice(0, 3), missingSkills: job.skills.slice(3), recommendation: i.atsScore >= 82 ? 'Strong Match' : 'Potential Match',
-    subScores: { skills: i.atsScore, experience: i.atsScore, education: 80, keywords: i.atsScore, location: 100, salary: 90 },
-    noticePeriod: '1 month', availability: '2 weeks', certifications: [], favorite: false, interviewStatus: 'Not Scheduled'
-  };
-  DB.candidates.unshift(newC);
-  i.processing = 'Imported'; i.unread = false;
-  Inbox._render.list(); Inbox._render.detail(); App.updateBadges();
-  UI.toast(`${i.name} imported → Applied stage of ${job.title}`, 'success');
-};
-
-Inbox.moveToPipeline = function (id) {
-  const i = DB.inbox.find(x => x.id === id);
-  if (i.processing !== 'Imported' && i.processing !== 'Processed') Inbox.import(id);
-  i.processing = 'Processed';
-  Inbox._render.list(); Inbox._render.detail();
-  UI.toast(`${i.name} moved to pipeline`, 'success');
-  setTimeout(() => Router.go('pipeline'), 700);
-};
-
-Inbox.assign = function (id) {
-  const i = DB.inbox.find(x => x.id === id);
-  const opts = DB.recruiters.map(r => `<option ${r.name === i.recruiter ? 'selected' : ''}>${r.name}</option>`).join('');
-  UI.modal({
-    title: 'Assign Recruiter', subtitle: i.name,
-    body: `<div class="form-field"><label>Recruiter</label><select id="assignRec">${opts}</select></div>
-      <p class="text-muted text-sm" style="margin-top:10px">Current workload is factored automatically. This recruiter has ${DB.getRecruiterByName(i.recruiter) ? DB.getRecruiterByName(i.recruiter).openReqs : 5} open reqs.</p>`,
-    footer: `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button><button class="btn btn-primary" onclick="Inbox._doAssign('${id}')">Assign</button>`
-  });
-};
-Inbox._doAssign = function (id) {
-  const i = DB.inbox.find(x => x.id === id);
-  i.recruiter = document.getElementById('assignRec').value;
-  UI.closeModal(); Inbox._render.detail();
-  UI.toast('Recruiter assigned to ' + i.name, 'success');
-};
-
-Inbox.note = function (id) {
-  const i = DB.inbox.find(x => x.id === id);
-  UI.modal({
-    title: 'Add Note', subtitle: i.name,
-    body: `<div class="form-field"><label>Note</label><textarea id="inboxNote" placeholder="Add a note about this application…"></textarea></div>`,
-    footer: `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button><button class="btn btn-primary" onclick="UI.closeModal();UI.toast('Note added','success')">${UI.icon('check')} Save Note</button>`
-  });
-};
-
-Inbox.reject = function (id) {
-  const i = DB.inbox.find(x => x.id === id);
-  i.processing = 'Rejected'; i.unread = false;
-  Inbox._render.list(); Inbox._render.detail(); App.updateBadges();
-  UI.toast(`${i.name} rejected`, 'warning');
-};
-
-// ---------------- Email (Outlook) tab ----------------
-Inbox._emails = [];
-Inbox._lastSync = null;
-
-Inbox._mapApiEmail = function (row) {
-  const from = row.sender_name || row.fromEmail || 'Unknown';
-  return {
-    id: String(row.id),
-    from,
-    fromEmail: row.fromEmail || '',
-    subject: row.subject || '',
-    body: row.body || '',
-    when: row.when ? new Date(row.when) : new Date(),
-    unread: !!row.unread,
-    attachment: row.attachment_name || 'Resume.pdf',
-    attachmentSize: '—',
-    atsScore: 70,
-    imported: false,
-    jobId: null,
-    jobTitle: ''
-  };
-};
-
-Inbox._syncLabel = function () {
-  if (!Inbox._lastSync) return 'Not synced yet';
-  const mins = Math.max(0, Math.round((Date.now() - Inbox._lastSync.getTime()) / 60000));
-  if (mins < 1) return 'Just now';
-  return DB.relTime(mins);
-};
-
-Inbox._loadEmails = async function () {
-  const res = await Api.get('/inbox/fetch');
-  const rows = Array.isArray(res.data) ? res.data : [];
-  Inbox._emails = rows.map(Inbox._mapApiEmail);
-  Inbox._lastSync = new Date();
-  return Inbox._emails;
-};
-
-Inbox._refreshEmailCounts = function () {
-  const tab = document.querySelector('#inboxTabs .tab[data-tab="Email"]');
-  if (tab) {
-    const countEl = tab.querySelector('.k-count');
-    if (countEl) countEl.textContent = Inbox._emails.filter(e => e.unread).length;
-  }
-  if (window.App && App.updateBadges) App.updateBadges();
-};
-
-Inbox._emailView = function () {
-  return `
-    <div style="padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px">
-      <span class="integration-status"><span class="pulse"></span>Outlook · Microsoft Graph API</span>
-      <span class="text-muted text-sm" id="emailSyncMeta">Loading…</span>
-      <button class="btn btn-secondary btn-sm" style="margin-left:auto" onclick="Inbox.syncMailbox()">${UI.icon('refresh')} Sync Mailbox</button>
-    </div>
-    <div class="split">
-      <div class="split-list" id="emailList"><div class="empty-state">${UI.icon('mail')}<h3>Loading…</h3><p>Fetching mailbox from the server.</p></div></div>
-      <div class="split-detail" id="emailDetail"></div>
-    </div>`;
-};
-
-Inbox._bindEmail = function (state) {
-  const detail = document.getElementById('emailDetail');
-
-  function renderDetail() {
-    const e = Inbox._emails.find(x => x.id === state.emailSelected);
-    if (!e) { detail.innerHTML = `<div class="empty-state" style="padding:100px 20px">${UI.icon('mail')}<h3>Select an email</h3><p>Preview email body and resume attachments here.</p></div>`; return; }
-    detail.innerHTML = `<div style="padding:24px">
-      <div class="flex items-center gap-12" style="margin-bottom:6px">
-        <h2 style="font-size:18px;flex:1">${e.subject}</h2>${e.imported ? UI.badge('Imported', 'b-green') : UI.badge('New', 'b-blue')}</div>
-      <div class="flex items-center gap-12" style="margin-bottom:20px">
-        ${UI.avatar(e.from, e.initials, e.color)}
-        <div><div class="fw-600">${e.from}</div><div class="cell-sub">${e.fromEmail} · ${DB.fmtDate(e.when)}</div></div>
-      </div>
-      <div class="email-preview" style="margin-bottom:18px">${e.body}</div>
-      <div class="attach-card" style="margin-bottom:18px">
-        <span class="attach-icn">${UI.icon('file')}</span>
-        <div style="flex:1"><div class="fw-600">${e.attachment}</div><div class="cell-sub">${e.attachmentSize} · PDF</div></div>
-        <div class="flex items-center gap-8">${UI.scoreChip(e.atsScore)}
-        <button class="btn btn-secondary btn-sm" onclick="UI.toast('Opening attachment preview','info')">${UI.icon('eye')} Preview</button></div>
-      </div>
-      <div class="flex gap-8">
-        ${e.imported ? `<button class="btn btn-secondary" disabled>${UI.icon('check')} Already Imported</button>` :
-        `<button class="btn btn-primary" onclick="Inbox._importEmail('${e.id}')">${UI.icon('user-plus')} Import Candidate</button>`}
-        <button class="btn btn-secondary" onclick="UI.toast('Reply drafted','info')">${UI.icon('mail')} Reply</button>
-        <button class="btn btn-ghost" style="color:var(--danger)" onclick="UI.toast('Email archived','info')">${UI.icon('trash')} Archive</button>
-      </div>
-    </div>`;
-  }
-
-  function paintList() {
-    const list = document.getElementById('emailList');
-    const meta = document.getElementById('emailSyncMeta');
-    if (!list) return;
-    if (!Inbox._emails.length) {
-      list.innerHTML = `<div class="empty-state">${UI.icon('mail')}<h3>Nothing here</h3><p>No emails in the mailbox.</p></div>`;
-    } else {
-      list.innerHTML = Inbox._emails.map(e => `
-        <div class="inbox-item ${e.unread ? 'unread' : ''} ${state.emailSelected === e.id ? 'active' : ''}" data-email="${e.id}">
-          ${UI.avatar(e.from, e.initials, e.color)}
-          <div class="ii-main">
-            <div class="ii-name">${e.from}</div>
-            <div class="ii-pos">${e.subject}</div>
-            <div class="ii-meta"><span class="source-chip" style="--chip:#0078d4"><svg viewBox="0 0 24 24"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>Outlook</span>${e.imported ? UI.badge('Imported', 'b-green') : ''}</div>
-          </div>
-          <div class="ii-time">${DB.fmtShort(e.when)}</div>
-        </div>`).join('');
-      list.querySelectorAll('.inbox-item').forEach(row => row.onclick = () => {
-        state.emailSelected = row.dataset.email;
-        const e = Inbox._emails.find(x => x.id === state.emailSelected); if (e) e.unread = false;
-        list.querySelectorAll('.inbox-item').forEach(r => r.classList.remove('active', 'unread'));
-        row.classList.add('active');
-        renderDetail(); Inbox._refreshEmailCounts();
-      });
-    }
-    if (meta) meta.textContent = `Last sync: ${Inbox._syncLabel()} · ${Inbox._emails.filter(e => e.unread).length} unread`;
-    renderDetail();
-    Inbox._refreshEmailCounts();
-  }
-
-  Inbox._paintEmail = paintList;
-  renderDetail();
-
-  Inbox._loadEmails()
-    .then(() => paintList())
-    .catch(err => {
-      const list = document.getElementById('emailList');
-      const meta = document.getElementById('emailSyncMeta');
-      if (list) list.innerHTML = `<div class="empty-state">${UI.icon('mail')}<h3>Couldn't load mailbox</h3><p>${err.message || 'Request failed'}</p></div>`;
-      if (meta) meta.textContent = 'Sync failed';
-      UI.toast(err.message || 'Failed to load mailbox', 'error');
-      renderDetail();
-    });
-};
-
-Inbox.syncMailbox = async function () {
-  UI.toast('Fetching from Outlook…', 'info');
-  try {
-    await Inbox._loadEmails();
-    if (typeof Inbox._paintEmail === 'function') Inbox._paintEmail();
-    UI.toast('Mailbox synced', 'success');
-  } catch (err) {
-    UI.toast(err.message || 'Sync failed', 'error');
-  }
-};
-
-Inbox._importEmail = function (id) {
-  const e = Inbox._emails.find(x => x.id === id);
-  if (!e) return;
-  const job = DB.getJob(e.jobId) || DB.jobs[0];
-  DB.candidates.unshift({
-    id: 'CAN-' + (5001 + DB.candidates.length), name: e.from, initials: e.initials || DB.initials(e.from), color: e.color || DB.avatarColor(e.from),
-    email: e.fromEmail, phone: '+1 (555) 000-0000', jobId: job.id, jobTitle: job.title, department: job.department,
-    experience: DB.int(2, 10), currentCompany: DB.pick(DB.companies), currentTitle: job.title, location: DB.pick(DB.locations),
-    stage: 'Applied', status: 'Applied', aiScore: e.atsScore, source: 'Microsoft Outlook', recruiter: DB.pick(DB.recruiters).name, recruiterId: '',
-    applied: new Date('2026-07-09'), education: "Bachelor's Degree", skills: job.skills.slice(0, 4), rating: '4.0', salary: 130000,
-    matchedSkills: job.skills.slice(0, 3), missingSkills: job.skills.slice(3), recommendation: 'Potential Match',
-    subScores: { skills: e.atsScore, experience: 80, education: 80, keywords: e.atsScore, location: 100, salary: 90 },
-    noticePeriod: '1 month', availability: '2 weeks', certifications: [], favorite: false, interviewStatus: 'Not Scheduled'
-  });
-  e.imported = true; e.unread = false;
-  if (typeof Inbox._paintEmail === 'function') Inbox._paintEmail();
-  App.updateBadges();
-  UI.toast(`${e.from} imported from Outlook → ${job.title}`, 'success');
-};
diff --git a/js/interviews.js b/js/interviews.js
deleted file mode 100644
index 54ae7b1..0000000
--- a/js/interviews.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/* ============================================================
-   interviews.js — Interviews list, upcoming, mini calendar
-   ============================================================ */
-window.Views = window.Views || {};
-window.Interviews = {};
-
-Views.interviews = function () {
-  const filters = { q: '', status: '', type: '' };
-  let table;
-
-  const upcoming = DB.interviews.filter(iv => iv.status === 'Scheduled').slice(0, 4);
-  const stats = {
-    scheduled: DB.interviews.filter(i => i.status === 'Scheduled').length,
-    completed: DB.interviews.filter(i => i.status === 'Completed').length,
-    today: 5,
-    cancelled: DB.interviews.filter(i => ['Cancelled', 'No Show'].includes(i.status)).length
-  };
-
-  function apply() {
-    const rows = DB.interviews.filter(iv => {
-      if (filters.status && iv.status !== filters.status) return false;
-      if (filters.type && iv.type !== filters.type) return false;
-      if (filters.q && !(iv.candidate + iv.jobTitle + iv.interviewers.join(' ')).toLowerCase().includes(filters.q.toLowerCase())) return false;
-      return true;
-    });
-    table.update(rows);
-  }
-
-  table = UI.dataTable({
-    pageSize: 8,
-    rows: DB.interviews,
-    columns: [
-      { key: 'candidate', label: 'Candidate', sortable: true, render: iv => `<div class="user-cell">${UI.avatar(iv.candidate, iv.candInitials, iv.color)}<div><div class="cell-primary">${iv.candidate}</div><div class="cell-sub">${iv.jobTitle}</div></div></div>` },
-      { key: 'type', label: 'Round', sortable: true, render: iv => UI.badge(iv.type, 'b-indigo') },
-      { key: 'when', label: 'Date & Time', sortable: true, sortValue: iv => iv.when.getTime(), render: iv => `<div class="text-sm fw-600">${DB.fmtShort(iv.when)}</div><div class="cell-sub">${iv.when.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })} · ${iv.duration}m</div>` },
-      { key: 'meeting', label: 'Type', render: iv => `<span class="flex items-center gap-8">${UI.icon(iv.meeting === 'Video Call' ? 'video' : iv.meeting === 'Phone' ? 'phone' : 'map')} ${iv.meeting}</span>` },
-      { key: 'interviewers', label: 'Interviewers', render: iv => UI.avatarStack(iv.interviewers) },
-      { key: 'status', label: 'Status', sortable: true, render: iv => UI.badge(iv.status) },
-      { key: 'feedback', label: 'Feedback', render: iv => iv.feedback ? UI.badge(iv.feedback) : '<span class="text-muted">—</span>' },
-      { key: '_a', label: 'Actions', align: 'right', render: iv => `
-        <div class="row-actions">
-          <button class="act-btn" data-tip="View candidate" onclick="Candidates.openProfile('${iv.candidateId}')">${UI.icon('eye')}</button>
-          <button class="act-btn" data-tip="Feedback" onclick="Interviews.feedback('${iv.id}')">${UI.icon('star')}</button>
-        </div>` }
-    ]
-  });
-
-  const statusOpts = ['<option value="">All Status</option>'].concat(['Scheduled', 'Completed', 'Cancelled', 'No Show'].map(s => `<option>${s}</option>`)).join('');
-  const typeOpts = ['<option value="">All Rounds</option>'].concat(DB.interviewTypes.map(t => `<option>${t}</option>`)).join('');
-
-  const statCard = (label, val, icn, cls) => `<div class="kpi"><div class="kpi-top"><span class="kpi-label">${label}</span><span class="kpi-icn ${cls}">${UI.icon(icn)}</span></div><div class="kpi-value">${val}</div></div>`;
-
-  const upcomingHtml = upcoming.map(iv => `
-    <div class="list-row">
-      ${UI.avatar(iv.candidate, iv.candInitials, iv.color)}
-      <div class="lr-main"><div class="lr-title">${iv.candidate}</div><div class="lr-sub">${iv.type} · ${iv.meeting}</div></div>
-      <div class="lr-right"><div class="fw-600 text-sm">${DB.fmtShort(iv.when)}</div><div class="lr-sub">${iv.when.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}</div></div>
-    </div>`).join('');
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Interviews</h1><p class="page-sub">Manage and track all interview activity</p></div>
-        <div class="page-head-actions">
-          <button class="btn btn-secondary" onclick="Router.go('calendar')">${UI.icon('calendar')} Calendar View</button>
-          <button class="btn btn-primary" onclick="Interviews.schedule()">${UI.icon('plus')} Schedule Interview</button>
-        </div>
-      </div>
-      <div class="grid g-kpi mb-18">
-        ${statCard('Scheduled', stats.scheduled, 'calendar', 'i-blue')}
-        ${statCard('Completed', stats.completed, 'check-circle', 'i-green')}
-        ${statCard('Today', stats.today, 'clock', 'i-purple')}
-        ${statCard('Cancelled / No-show', stats.cancelled, 'x-circle', 'i-red')}
-      </div>
-      <div class="grid g-2-1">
-        <div class="card">
-          <div class="card-head"><div><h3>All Interviews</h3></div></div>
-          <div class="card-body" style="padding-bottom:0">
-            <div class="toolbar">
-              <div class="toolbar-search">${UI.icon('search')}<input id="ivSearch" placeholder="Search candidate or interviewer…"/></div>
-              <select class="select" id="ivStatus">${statusOpts}</select>
-              <select class="select" id="ivType">${typeOpts}</select>
-            </div>
-          </div>
-          ${table.html}
-        </div>
-        <div class="card" style="align-self:start">
-          <div class="card-head"><div><h3>Up Next</h3><span class="ch-sub">Scheduled sessions</span></div></div>
-          <div class="card-body"><div class="list-tight">${upcomingHtml}</div></div>
-        </div>
-      </div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      table.mount();
-      const s = document.getElementById('ivSearch');
-      s.oninput = () => { filters.q = s.value; apply(); };
-      document.getElementById('ivStatus').onchange = e => { filters.status = e.target.value; apply(); };
-      document.getElementById('ivType').onchange = e => { filters.type = e.target.value; apply(); };
-    }
-  };
-};
-
-Interviews.feedback = function (id) {
-  const iv = DB.interviews.find(i => i.id === id);
-  // pick evaluation template by department
-  const job = DB.jobs.find(j => j.title === iv.jobTitle);
-  const dept = job ? job.department : 'All';
-  const tmpl = DB.evalTemplates.find(t => t.dept === dept) || DB.evalTemplates.find(t => t.dept === 'All');
-  const tmplOpts = DB.evalTemplates.map(t => `<option ${t === tmpl ? 'selected' : ''}>${t.name}</option>`).join('');
-
-  const ratingRow = (crit) => `
-    <div class="setting-row" style="padding:12px 0">
-      <div class="setting-info"><h4>${crit}</h4></div>
-      <div class="rating-stars" data-crit="${crit}">
-        ${[1, 2, 3, 4, 5].map(n => `<span class="rs" data-val="${n}">${UI.icon('star')}</span>`).join('')}
-      </div>
-    </div>`;
-
-  const body = `
-    <div class="flex items-center gap-12 mb-18">${UI.avatar(iv.candidate, iv.candInitials, iv.color, 'avatar-lg')}
-      <div style="flex:1"><div class="ph-name" style="font-size:17px">${iv.candidate}</div><div class="ph-role">${iv.type} · ${iv.jobTitle}</div></div>
-      ${UI.badge(iv.status)}</div>
-
-    <div class="tabs" id="evalTabs" style="margin-bottom:18px">
-      <div class="tab active" data-etab="0">Dynamic Form</div>
-      <div class="tab" data-etab="1">Upload Sheet</div>
-      <div class="tab" data-etab="2">Both</div>
-    </div>
-
-    <div id="evalPanes">
-      <div class="tab-pane active" data-epane="0">
-        <div class="form-field" style="margin-bottom:8px"><label>Evaluation Template</label><select id="evalTmpl">${tmplOpts}</select></div>
-        <div id="critList">${tmpl.criteria.map(ratingRow).join('')}</div>
-        <div class="form-field" style="margin-top:8px"><label>Comments</label><textarea placeholder="Strengths, concerns, and areas explored…"></textarea></div>
-        <div class="form-field" style="margin-top:14px"><label>Overall Recommendation</label>
-          <div class="seg" style="margin-top:4px"><button type="button" class="active" data-rec="Hire">Hire</button><button type="button" data-rec="Hold">Hold</button><button type="button" data-rec="Reject">Reject</button></div></div>
-      </div>
-
-      <div class="tab-pane" data-epane="1">
-        <div class="dropzone" onclick="UI.toast('File picker (demo)','info')" style="padding:32px">
-          <div class="dz-icn">${UI.icon('upload')}</div>
-          <h3 style="font-size:15px">Upload evaluation sheet</h3>
-          <p class="text-muted">PDF, DOC, or DOCX · scanned scorecards supported</p>
-          <div class="flex items-center gap-8" style="justify-content:center;margin-top:12px">${['PDF', 'DOC', 'DOCX'].map(t => `<span class="badge b-gray badge-plain">${t}</span>`).join('')}</div>
-        </div>
-      </div>
-
-      <div class="tab-pane" data-epane="2">
-        <p class="text-muted" style="margin-bottom:14px">Capture structured ratings <b>and</b> attach a signed sheet — both are stored on the scorecard.</p>
-        <div id="critList2">${tmpl.criteria.slice(0, 3).map(ratingRow).join('')}</div>
-        <div class="upload-row" style="margin-top:12px"><span class="attach-icn" style="width:38px;height:38px">${UI.icon('file')}</span>
-          <div style="flex:1"><div class="fw-600 text-sm">Interviewer_Scorecard.pdf</div><div class="cell-sub">Attached · 214 KB</div></div>${UI.badge('Uploaded', 'b-green')}</div>
-      </div>
-    </div>`;
-
-  const footer = `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button>
-    <button class="btn btn-primary" onclick="UI.closeModal();UI.toast('Scorecard submitted','success')">${UI.icon('check')} Submit Scorecard</button>`;
-  UI.modal({ title: 'Interview Evaluation', subtitle: iv.id + ' · ' + iv.type, body, footer, size: 'modal-lg' });
-
-  // wire tabs
-  const panes = document.querySelectorAll('#evalPanes .tab-pane');
-  document.querySelectorAll('#evalTabs .tab').forEach(tab => tab.onclick = () => {
-    document.querySelectorAll('#evalTabs .tab').forEach(t => t.classList.remove('active'));
-    tab.classList.add('active');
-    panes.forEach(p => p.classList.remove('active'));
-    panes[+tab.dataset.etab].classList.add('active');
-  });
-  // wire star ratings
-  Interviews._bindStars();
-  // template switch rebuilds criteria
-  const tmplSel = document.getElementById('evalTmpl');
-  if (tmplSel) tmplSel.onchange = () => {
-    const t = DB.evalTemplates.find(x => x.name === tmplSel.value);
-    document.getElementById('critList').innerHTML = t.criteria.map(ratingRow).join('');
-    Interviews._bindStars();
-  };
-  // recommendation seg
-  document.querySelectorAll('[data-rec]').forEach(b => b.onclick = () => {
-    b.parentElement.querySelectorAll('button').forEach(x => x.classList.remove('active'));
-    b.classList.add('active');
-  });
-};
-Interviews._bindStars = function () {
-  document.querySelectorAll('.rating-stars').forEach(group => {
-    group.querySelectorAll('.rs').forEach(star => star.onclick = () => {
-      const val = +star.dataset.val;
-      group.querySelectorAll('.rs').forEach(s => s.classList.toggle('on', +s.dataset.val <= val));
-    });
-  });
-};
-
-Interviews.schedule = function () {
-  const opt = arr => arr.map(o => `<option>${o}</option>`).join('');
-  const body = `<form id="schForm"><div class="form-grid">
-    <div class="form-field col-span-2"><label>Candidate <span class="req">*</span></label><select name="candidate">${opt(DB.candidates.slice(0, 40).map(c => c.name))}</select></div>
-    <div class="form-field"><label>Interview Round</label><select name="type">${opt(DB.interviewTypes)}</select></div>
-    <div class="form-field"><label>Meeting Type</label><select name="meeting">${opt(DB.meetingTypes)}</select></div>
-    <div class="form-field"><label>Date</label><input type="date" name="date"/></div>
-    <div class="form-field"><label>Time</label><input type="time" name="time" value="14:00"/></div>
-    <div class="form-field"><label>Duration</label><select name="dur"><option>30 min</option><option>45 min</option><option selected>60 min</option><option>90 min</option></select></div>
-    <div class="form-field"><label>Interviewer</label><select name="interviewer">${opt(DB.recruiters.concat(DB.managers).map(r => r.name))}</select></div>
-  </div></form>`;
-  const footer = `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button>
-    <button class="btn btn-primary" onclick="UI.closeModal();UI.toast('Interview scheduled & invite sent','success')">${UI.icon('calendar')} Schedule</button>`;
-  UI.modal({ title: 'Schedule Interview', subtitle: 'Set up a new interview session', body, footer });
-};
diff --git a/js/jobboard.js b/js/jobboard.js
deleted file mode 100644
index efaf466..0000000
--- a/js/jobboard.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/* ============================================================
-   jobboard.js — Job Posting Center: publish + track performance
-   ============================================================ */
-window.Views = window.Views || {};
-window.JobBoard = {};
-
-Views.jobboard = function () {
-  const totals = DB.publishings.reduce((a, p) => ({ views: a.views + p.views, clicks: a.clicks + p.clicks, apps: a.apps + p.apps }), { views: 0, clicks: 0, apps: 0 });
-  const conv = totals.views ? ((totals.apps / totals.views) * 100).toFixed(1) : 0;
-
-  const statCard = (label, val, icn, cls, sub) => `<div class="kpi"><div class="kpi-top"><span class="kpi-label">${label}</span><span class="kpi-icn ${cls}">${UI.icon(icn)}</span></div><div class="kpi-value">${val}</div><div class="kpi-foot"><span class="kpi-foot-text">${sub}</span></div></div>`;
-
-  // per-platform aggregate
-  const platAgg = {};
-  DB.publishings.forEach(p => {
-    if (!platAgg[p.platform]) platAgg[p.platform] = { views: 0, clicks: 0, apps: 0, jobs: 0 };
-    platAgg[p.platform].views += p.views; platAgg[p.platform].clicks += p.clicks; platAgg[p.platform].apps += p.apps; platAgg[p.platform].jobs++;
-  });
-  const platRows = Object.entries(platAgg).sort((a, b) => b[1].apps - a[1].apps);
-
-  // publishing table
-  const table = UI.dataTable({
-    pageSize: 8,
-    rows: DB.publishings,
-    columns: [
-      { key: 'jobTitle', label: 'Job', sortable: true, render: p => `<div class="cell-primary">${p.jobTitle}</div><div class="cell-sub">${p.jobId}</div>` },
-      { key: 'platform', label: 'Platform', sortable: true, render: p => { const pl = DB.publishPlatforms.find(x => x.name === p.platform) || {}; return `<span class="flex items-center gap-8"><span class="platform-logo" style="width:26px;height:26px;background:${pl.color || '#888'}">${UI.icon(pl.icon || 'briefcase')}</span>${p.platform}</span>`; } },
-      { key: 'status', label: 'Status', sortable: true, render: p => UI.badge(p.status, p.status === 'Live' ? 'b-green' : p.status === 'Paused' ? 'b-amber' : 'b-blue') },
-      { key: 'views', label: 'Views', sortable: true, align: 'right', render: p => p.views.toLocaleString() },
-      { key: 'clicks', label: 'Clicks', sortable: true, align: 'right', render: p => p.clicks.toLocaleString() },
-      { key: 'apps', label: 'Applications', sortable: true, align: 'right', render: p => `<b>${p.apps}</b>` },
-      { key: '_conv', label: 'Conversion', sortable: true, sortValue: p => p.apps / p.views, render: p => `<span class="badge b-indigo badge-plain">${((p.apps / p.views) * 100).toFixed(1)}%</span>` },
-      { key: '_a', label: '', align: 'right', render: p => `<button class="act-btn" data-tip="Manage" onclick="UI.toast('Managing ${p.platform} posting','info')">${UI.icon('external')}</button>` }
-    ]
-  });
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Job Board</h1><p class="page-sub">Publish requisitions across channels and track performance</p></div>
-        <div class="page-head-actions">
-          <button class="btn btn-secondary" onclick="Router.go('analytics')">${UI.icon('trending-up')} Analytics</button>
-          <button class="btn btn-primary" onclick="JobBoard.publishFlow()">${UI.icon('send')} Publish a Job</button>
-        </div>
-      </div>
-
-      <div class="grid g-kpi mb-18">
-        ${statCard('Total Views', totals.views.toLocaleString(), 'eye', 'i-blue', 'across all platforms')}
-        ${statCard('Total Clicks', totals.clicks.toLocaleString(), 'target', 'i-purple', ((totals.clicks / totals.views) * 100).toFixed(1) + '% CTR')}
-        ${statCard('Applications', totals.apps.toLocaleString(), 'users', 'i-green', 'from job boards')}
-        ${statCard('Conversion Rate', conv + '%', 'trending-up', 'i-teal', 'view → application')}
-      </div>
-
-      <div class="grid g-2-1 mb-18">
-        <div class="card">
-          <div class="card-head"><div><h3>Platform Performance</h3><span class="ch-sub">Applications by channel</span></div></div>
-          <div class="card-body"><div class="chart-wrap"><canvas id="jbChart" height="300"></canvas></div></div>
-        </div>
-        <div class="card">
-          <div class="card-head"><div><h3>Connected Platforms</h3></div></div>
-          <div class="card-body"><div class="list-tight">
-            ${DB.publishPlatforms.map(p => `<div class="list-row">
-              <span class="platform-logo" style="background:${p.color}">${UI.icon(p.icon)}</span>
-              <div class="lr-main"><div class="lr-title">${p.name}</div><div class="lr-sub">${p.cost === 'Free' ? 'Free posting' : 'Paid · ' + p.cost}</div></div>
-              ${p.connected ? UI.badge('Connected', 'b-green') : `<button class="btn btn-secondary btn-sm" onclick="UI.toast('Connecting ${p.name}…','info')">Connect</button>`}
-            </div>`).join('')}
-          </div></div>
-        </div>
-      </div>
-
-      <div class="card">
-        <div class="card-head"><div><h3>Active Postings</h3><span class="ch-sub">${DB.publishings.length} live postings across ${platRows.length} platforms</span></div>
-          <button class="btn btn-secondary btn-sm" onclick="UI.toast('Performance report exported','success')">${UI.icon('download')} Export</button></div>
-        ${table.html}
-      </div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      table.mount();
-      Charts.horizontalBar(document.getElementById('jbChart'), {
-        labels: platRows.map(p => p[0]), data: platRows.map(p => p[1].apps)
-      });
-    }
-  };
-};
-
-// ---------------- Publish flow (stepper modal) ----------------
-JobBoard.publishFlow = function (jobId) {
-  const state = { step: 1, jobId: jobId || DB.jobs.filter(j => j.status === 'Open')[0].id, platforms: ['Career Portal'] };
-  JobBoard._state = state;
-  JobBoard._renderFlow();
-};
-
-JobBoard._renderFlow = function () {
-  const state = JobBoard._state;
-  const steps = ['Select Job', 'Approval', 'Platforms', 'Publish'];
-  const stepper = `<div class="stepper">${steps.map((s, i) => {
-    const n = i + 1;
-    const cls = n < state.step ? 'done' : n === state.step ? 'active' : '';
-    return `<div class="step ${cls}"><div class="step-num">${n < state.step ? '✓' : n}</div><div class="step-label">${s}</div></div>${i < steps.length - 1 ? `<div class="step-line ${n < state.step ? 'done' : ''}"></div>` : ''}`;
-  }).join('')}</div>`;
-
-  let body = stepper;
-  if (state.step === 1) {
-    const opts = DB.jobs.filter(j => j.status !== 'Draft').map(j => `<option value="${j.id}" ${j.id === state.jobId ? 'selected' : ''}>${j.title} · ${j.id}</option>`).join('');
-    const job = DB.getJob(state.jobId);
-    body += `<div class="form-field"><label>Select requisition to publish</label><select id="pubJob">${opts}</select></div>
-      <div class="card" style="box-shadow:none;background:var(--bg-sunken);margin-top:16px"><div class="card-body">
-        <div class="flex items-center gap-12"><span class="kpi-icn i-indigo" style="width:44px;height:44px;border-radius:12px">${UI.icon('briefcase')}</span>
-        <div><div class="fw-600">${job.title}</div><div class="cell-sub">${job.department} · ${job.location} · ${job.type}</div></div></div>
-      </div></div>`;
-  } else if (state.step === 2) {
-    body += `<div class="card" style="box-shadow:none;background:var(--bg-sunken)"><div class="card-body">
-      <div class="flex items-center gap-12" style="margin-bottom:14px"><span class="kpi-icn i-green" style="width:44px;height:44px;border-radius:12px">${UI.icon('check-circle')}</span>
-      <div><div class="fw-600">Approval granted</div><div class="cell-sub">Approved by Department Head · Budget confirmed</div></div></div>
-      <div class="setting-row" style="padding:10px 0"><div class="setting-info"><h4>Hiring Manager sign-off</h4></div>${UI.badge('Approved', 'b-green')}</div>
-      <div class="setting-row" style="padding:10px 0"><div class="setting-info"><h4>Finance budget approval</h4></div>${UI.badge('Approved', 'b-green')}</div>
-      <div class="setting-row" style="padding:10px 0;border:none"><div class="setting-info"><h4>Compliance review</h4></div>${UI.badge('Approved', 'b-green')}</div>
-    </div></div>`;
-  } else if (state.step === 3) {
-    body += `<p class="text-muted" style="margin-bottom:14px">Select the platforms to publish this role to</p>
-      <div class="grid g-2" id="platGrid">
-        ${DB.publishPlatforms.map(p => `<div class="platform-card ${state.platforms.includes(p.name) ? 'selected' : ''} ${!p.connected ? 'disabled' : ''}" data-plat="${p.name}" ${!p.connected ? 'style="opacity:.5;pointer-events:none"' : ''}>
-          <span class="platform-logo" style="background:${p.color}">${UI.icon(p.icon)}</span>
-          <div style="flex:1"><div class="fw-600">${p.name}</div><div class="cell-sub">${p.cost === 'Free' ? 'Free' : 'Paid · ' + p.cost}</div></div>
-          <span class="platform-check">${UI.icon('check')}</span>
-        </div>`).join('')}
-      </div>`;
-  } else if (state.step === 4) {
-    body += `<div style="text-align:center;padding:20px 0">
-      <div class="kpi-icn i-green" style="width:64px;height:64px;border-radius:18px;margin:0 auto 16px">${UI.icon('check-circle')}</div>
-      <h2 style="font-size:20px;margin-bottom:6px">Published Successfully</h2>
-      <p class="text-muted" style="margin-bottom:20px">${DB.getJob(state.jobId).title} is now live on ${state.platforms.length} platform${state.platforms.length > 1 ? 's' : ''}</p>
-      <div class="flex gap-8" style="justify-content:center;flex-wrap:wrap">
-        ${state.platforms.map(p => { const pl = DB.publishPlatforms.find(x => x.name === p); return `<span class="badge b-green">${pl.name}</span>`; }).join('')}
-      </div>
-    </div>`;
-  }
-
-  let footer;
-  if (state.step === 4) footer = `<button class="btn btn-primary" onclick="UI.closeModal();Router.reload()">${UI.icon('check')} Done</button>`;
-  else footer = `<button class="btn btn-secondary" onclick="${state.step === 1 ? 'UI.closeModal()' : 'JobBoard._back()'}">${state.step === 1 ? 'Cancel' : 'Back'}</button>
-    <button class="btn btn-primary" onclick="JobBoard._next()">${state.step === 3 ? UI.icon('send') + ' Publish' : 'Continue'} </button>`;
-
-  UI.modal({ title: 'Publish Job', subtitle: 'Distribute this requisition to job boards', body, footer, size: 'modal-lg' });
-
-  if (state.step === 3) {
-    document.querySelectorAll('#platGrid .platform-card').forEach(card => card.onclick = () => {
-      const name = card.dataset.plat;
-      const idx = state.platforms.indexOf(name);
-      if (idx > -1) state.platforms.splice(idx, 1); else state.platforms.push(name);
-      card.classList.toggle('selected');
-    });
-  }
-};
-JobBoard._next = function () {
-  const state = JobBoard._state;
-  if (state.step === 1) { const sel = document.getElementById('pubJob'); if (sel) state.jobId = sel.value; }
-  if (state.step === 3 && !state.platforms.length) { UI.toast('Select at least one platform', 'warning'); return; }
-  state.step++;
-  if (state.step === 4) {
-    // create publishing records
-    const job = DB.getJob(state.jobId);
-    state.platforms.forEach(p => {
-      DB.publishings.unshift({ jobId: job.id, jobTitle: job.title, platform: p, status: 'Live', views: DB.int(0, 30), clicks: 0, apps: 0, published: new Date('2026-07-09') });
-    });
-  }
-  JobBoard._renderFlow();
-};
-JobBoard._back = function () { JobBoard._state.step--; JobBoard._renderFlow(); };
diff --git a/js/jobs.js b/js/jobs.js
deleted file mode 100644
index ff58987..0000000
--- a/js/jobs.js
+++ /dev/null
@@ -1,252 +0,0 @@
-/* ============================================================
-   jobs.js — Jobs listing, filters, create/edit/view/delete
-   ============================================================ */
-window.Views = window.Views || {};
-window.Jobs = {};
-
-Views.jobs = function () {
-  const filters = { q: '', dept: '', status: '', type: '' };
-  let table;
-
-  function apply() {
-    let rows = DB.jobs.filter(j => {
-      if (filters.dept && j.department !== filters.dept) return false;
-      if (filters.status && j.status !== filters.status) return false;
-      if (filters.type && j.type !== filters.type) return false;
-      if (filters.q) {
-        const q = filters.q.toLowerCase();
-        if (!(j.title + j.id + j.department + j.manager + j.recruiter + j.location).toLowerCase().includes(q)) return false;
-      }
-      return true;
-    });
-    table.update(rows);
-  }
-
-  table = UI.dataTable({
-    pageSize: 8,
-    rows: DB.jobs,
-    columns: [
-      { key: 'id', label: 'Job ID', sortable: true, render: j => `<span class="cell-mono">${j.id}</span>` },
-      { key: 'title', label: 'Job Title', sortable: true, render: j => `<div class="cell-primary">${j.title}</div><div class="cell-sub">${j.businessUnit} · ${j.grade}</div>` },
-      { key: 'department', label: 'Department', sortable: true },
-      { key: 'manager', label: 'Hiring Manager', sortable: true, render: j => `<div class="user-cell">${UI.avatar(j.manager)}<span>${j.manager}</span></div>` },
-      { key: 'location', label: 'Location', sortable: true, render: j => `<span class="text-muted">${j.location}</span>` },
-      { key: 'type', label: 'Type', render: j => UI.badge(j.type, 'b-gray') },
-      { key: 'applications', label: 'Apps', sortable: true, align: 'center', render: j => `<b>${j.applications}</b>` },
-      { key: 'status', label: 'Status', sortable: true, render: j => UI.badge(j.status) },
-      { key: 'created', label: 'Created', sortable: true, sortValue: j => j.created.getTime(), render: j => `<span class="text-muted">${DB.fmtShort(j.created)}</span>` },
-      { key: '_a', label: 'Actions', align: 'right', render: j => `
-        <div class="row-actions">
-          <button class="act-btn" data-tip="View" onclick="Jobs.view('${j.id}')">${UI.icon('eye')}</button>
-          <button class="act-btn" data-tip="Publish" onclick="JobBoard.publishFlow('${j.id}')">${UI.icon('send')}</button>
-          <button class="act-btn" data-tip="Edit" onclick="Jobs.openEdit('${j.id}')">${UI.icon('edit')}</button>
-          <button class="act-btn danger" data-tip="Delete" onclick="Jobs.confirmDelete('${j.id}')">${UI.icon('trash')}</button>
-        </div>` }
-    ]
-  });
-
-  const deptOpts = ['<option value="">All Departments</option>'].concat(DB.departments.map(d => `<option>${d}</option>`)).join('');
-  const statusOpts = ['<option value="">All Status</option>'].concat(DB.jobStatuses.map(s => `<option>${s}</option>`)).join('');
-  const typeOpts = ['<option value="">All Types</option>'].concat(DB.empTypes.map(t => `<option>${t}</option>`)).join('');
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Jobs</h1><p class="page-sub">${DB.jobs.length} requisitions · ${DB.kpis.openJobs} currently open</p></div>
-        <div class="page-head-actions">
-          <button class="btn btn-secondary" onclick="UI.toast('Jobs exported to CSV','success')">${UI.icon('download')} Export</button>
-          <button class="btn btn-primary" onclick="Jobs.openCreate()">${UI.icon('plus')} Create Job</button>
-        </div>
-      </div>
-      <div class="card">
-        <div class="card-body" style="padding-bottom:0">
-          <div class="toolbar">
-            <div class="toolbar-search">${UI.icon('search')}<input id="jobSearch" placeholder="Search jobs, IDs, managers…"/></div>
-            <select class="select" id="jobDept">${deptOpts}</select>
-            <select class="select" id="jobStatus">${statusOpts}</select>
-            <select class="select" id="jobType">${typeOpts}</select>
-          </div>
-        </div>
-        ${table.html}
-      </div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      table.mount();
-      const s = document.getElementById('jobSearch');
-      s.oninput = () => { filters.q = s.value; apply(); };
-      document.getElementById('jobDept').onchange = e => { filters.dept = e.target.value; apply(); };
-      document.getElementById('jobStatus').onchange = e => { filters.status = e.target.value; apply(); };
-      document.getElementById('jobType').onchange = e => { filters.type = e.target.value; apply(); };
-    }
-  };
-};
-
-// ---------------- View job ----------------
-Jobs.view = function (id) {
-  const j = DB.getJob(id);
-  const body = `
-    <div class="flex items-center gap-16 mb-18">
-      <span class="kpi-icn i-indigo" style="width:52px;height:52px;border-radius:14px">${UI.icon('briefcase')}</span>
-      <div>
-        <div style="font-size:19px;font-weight:700">${j.title}</div>
-        <div class="text-muted">${j.id} · ${j.department} · ${j.businessUnit}</div>
-      </div>
-      <div style="margin-left:auto">${UI.badge(j.status)}</div>
-    </div>
-    <div class="info-grid mb-18">
-      <div class="info-item"><div class="il">Hiring Manager</div><div class="iv">${j.manager}</div></div>
-      <div class="info-item"><div class="il">Assigned Recruiter</div><div class="iv flex items-center gap-8">${j.recruiter} ${(() => { const r = DB.getRecruiterByName(j.recruiter); return r ? `<span class="badge ${r.workload > 80 ? 'b-red' : r.workload > 60 ? 'b-amber' : 'b-green'} badge-plain" style="font-size:10px">${r.workload}% load</span>` : ''; })()} <button class="link-btn" onclick="Jobs.reassign('${j.id}')">Reassign</button></div></div>
-      <div class="info-item"><div class="il">Location</div><div class="iv">${j.location}</div></div>
-      <div class="info-item"><div class="il">Employment Type</div><div class="iv">${j.type}</div></div>
-      <div class="info-item"><div class="il">Grade</div><div class="iv">${j.grade}</div></div>
-      <div class="info-item"><div class="il">Vacancies</div><div class="iv">${j.vacancies}</div></div>
-      <div class="info-item"><div class="il">Salary Range</div><div class="iv">${DB.moneyK(j.salaryMin)} – ${DB.moneyK(j.salaryMax)}</div></div>
-      <div class="info-item"><div class="il">Experience</div><div class="iv">${j.experience}</div></div>
-      <div class="info-item"><div class="il">Education</div><div class="iv">${j.education}</div></div>
-      <div class="info-item"><div class="il">Deadline</div><div class="iv">${DB.fmtDate(j.deadline)}</div></div>
-    </div>
-    <div class="divider"></div>
-    <div style="margin-bottom:16px"><div class="il" style="font-size:12px;color:var(--text-3);font-weight:600;text-transform:uppercase;margin-bottom:6px">Description</div><p style="color:var(--text-2)">${j.description}</p></div>
-    <div style="margin-bottom:16px"><div class="il" style="font-size:12px;color:var(--text-3);font-weight:600;text-transform:uppercase;margin-bottom:6px">Key Responsibilities</div>
-      <ul style="padding-left:18px;color:var(--text-2)">${j.responsibilities.map(r => `<li>${r}</li>`).join('')}</ul></div>
-    <div style="margin-bottom:16px"><div class="il" style="font-size:12px;color:var(--text-3);font-weight:600;text-transform:uppercase;margin-bottom:6px">Required Skills</div>
-      <div class="k-tags">${j.skills.map(s => `<span class="tag">${s}</span>`).join('')}</div></div>
-    <div><div class="il" style="font-size:12px;color:var(--text-3);font-weight:600;text-transform:uppercase;margin-bottom:6px">Benefits</div>
-      <div class="k-tags">${j.benefits.map(s => `<span class="tag">${s}</span>`).join('')}</div></div>
-    <div class="divider"></div>
-    <div class="flex items-center gap-12"><span class="text-muted text-sm">Hiring progress</span><div style="flex:1">${UI.pbar(j.progress)}</div><span class="fw-600">${j.progress}%</span></div>`;
-  const footer = `<button class="btn btn-secondary" onclick="UI.closeModal()">Close</button>
-    <button class="btn btn-secondary" onclick="UI.closeModal();JobBoard.publishFlow('${j.id}')">${UI.icon('send')} Publish</button>
-    <button class="btn btn-primary" onclick="UI.closeModal();Jobs.openEdit('${j.id}')">${UI.icon('edit')} Edit Job</button>`;
-  UI.modal({ title: 'Job Details', subtitle: j.id, body, footer, size: 'modal-lg' });
-};
-
-Jobs.reassign = function (id) {
-  const j = DB.getJob(id);
-  const opts = DB.recruiters.map(r => `<option ${r.name === j.recruiter ? 'selected' : ''}>${r.name} — ${r.workload}% load · ${r.openReqs} reqs</option>`).join('');
-  UI.modal({
-    title: 'Reassign Recruiter', subtitle: j.title,
-    body: `<div class="form-field"><label>Assigned Recruiter</label><select id="reassignRec">${DB.recruiters.map(r => `<option value="${r.name}" ${r.name === j.recruiter ? 'selected' : ''}>${r.name} — ${r.workload}% load</option>`).join('')}</select></div>
-      <p class="text-muted text-sm" style="margin-top:10px">Workload is recalculated automatically across the recruiter's assigned requisitions.</p>`,
-    footer: `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button><button class="btn btn-primary" onclick="Jobs._doReassign('${id}')">Reassign</button>`
-  });
-};
-Jobs._doReassign = function (id) {
-  const j = DB.getJob(id);
-  j.recruiter = document.getElementById('reassignRec').value;
-  UI.closeModal(); UI.toast('Recruiter reassigned', 'success');
-  if (typeof Router !== 'undefined') Router.reload();
-};
-
-// ---------------- Create / Edit form ----------------
-Jobs.openCreate = function () { Jobs._form(null); };
-Jobs.openEdit = function (id) { Jobs._form(DB.getJob(id)); };
-
-Jobs._form = function (job) {
-  const isEdit = !!job;
-  const opt = (arr, sel) => arr.map(o => `<option ${o === sel ? 'selected' : ''}>${o}</option>`).join('');
-  const body = `
-    <form id="jobForm" novalidate>
-      <div class="form-grid">
-        <div class="form-field col-span-2">
-          <label>Job Title <span class="req">*</span></label>
-          <input name="title" value="${job ? job.title : ''}" placeholder="e.g. Senior Product Designer"/>
-          <span class="field-error">Job title is required</span>
-        </div>
-        <div class="form-field"><label>Department <span class="req">*</span></label>
-          <select name="department">${opt(DB.departments, job && job.department)}</select></div>
-        <div class="form-field"><label>Business Unit</label><select name="businessUnit">${opt(DB.businessUnits, job && job.businessUnit)}</select></div>
-        <div class="form-field"><label>Grade</label><select name="grade">${opt(DB.grades, job && job.grade)}</select></div>
-        <div class="form-field"><label>Employment Type</label><select name="type">${opt(DB.empTypes, job && job.type)}</select></div>
-        <div class="form-field"><label>Hiring Manager <span class="req">*</span></label>
-          <select name="manager">${opt(DB.managers.map(m => m.name), job && job.manager)}</select></div>
-        <div class="form-field"><label>Recruiter <span class="req">*</span></label>
-          <select name="recruiter">${opt(DB.recruiters.map(r => r.name), job && job.recruiter)}</select></div>
-        <div class="form-field"><label>Salary Min ($) <span class="req">*</span></label>
-          <input name="salaryMin" type="number" value="${job ? job.salaryMin : ''}" placeholder="90000"/>
-          <span class="field-error">Enter a valid amount</span></div>
-        <div class="form-field"><label>Salary Max ($)</label><input name="salaryMax" type="number" value="${job ? job.salaryMax : ''}" placeholder="130000"/></div>
-        <div class="form-field"><label>Experience</label><input name="experience" value="${job ? job.experience : ''}" placeholder="5+ years"/></div>
-        <div class="form-field"><label>Education</label><select name="education">${opt(DB.educationLevels, job && job.education)}</select></div>
-        <div class="form-field"><label>Location <span class="req">*</span></label><select name="location">${opt(DB.locations, job && job.location)}</select></div>
-        <div class="form-field"><label>Vacancies</label><input name="vacancies" type="number" value="${job ? job.vacancies : 1}" min="1"/></div>
-        <div class="form-field col-span-2"><label>Job Description <span class="req">*</span></label>
-          <textarea name="description" placeholder="Describe the role…">${job ? job.description : ''}</textarea>
-          <span class="field-error">Description is required</span></div>
-        <div class="form-field col-span-2"><label>Responsibilities</label>
-          <textarea name="responsibilities" placeholder="One per line…">${job ? job.responsibilities.join('\n') : ''}</textarea></div>
-        <div class="form-field col-span-2"><label>Required Skills</label>
-          <input name="skills" value="${job ? job.skills.join(', ') : ''}" placeholder="React, TypeScript, System Design"/></div>
-        <div class="form-field col-span-2"><label>Benefits</label>
-          <input name="benefits" value="${job ? job.benefits.join(', ') : ''}" placeholder="Equity, 401(k), Unlimited PTO"/></div>
-        <div class="form-field"><label>Deadline</label><input name="deadline" type="date"/></div>
-        <div class="form-field"><label>Status</label><select name="status">${opt(DB.jobStatuses, job ? job.status : 'Open')}</select></div>
-      </div>
-    </form>`;
-  const footer = `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button>
-    <button class="btn btn-primary" onclick="Jobs._save(${isEdit ? `'${job.id}'` : 'null'})">${UI.icon('check')} ${isEdit ? 'Save Changes' : 'Create Job'}</button>`;
-  UI.modal({ title: isEdit ? 'Edit Job' : 'Create New Job', subtitle: isEdit ? job.id : 'Fill in the details to post a requisition', body, footer, size: 'modal-lg' });
-};
-
-Jobs._save = function (id) {
-  const form = document.getElementById('jobForm');
-  UI.clearErrors(form);
-  const f = Object.fromEntries(new FormData(form));
-  let ok = true;
-  const req = (name, cond) => { if (!cond) { UI.fieldError(form.querySelector(`[name="${name}"]`), 'Required'); ok = false; } };
-  req('title', f.title.trim());
-  req('description', f.description.trim());
-  req('salaryMin', f.salaryMin && +f.salaryMin > 0);
-  if (!ok) { UI.toast('Please fix the highlighted fields', 'error'); return; }
-
-  const skills = f.skills.split(',').map(s => s.trim()).filter(Boolean);
-  const benefits = f.benefits.split(',').map(s => s.trim()).filter(Boolean);
-  const responsibilities = f.responsibilities.split('\n').map(s => s.trim()).filter(Boolean);
-
-  if (id) {
-    const job = DB.getJob(id);
-    Object.assign(job, {
-      title: f.title, department: f.department, businessUnit: f.businessUnit, grade: f.grade, type: f.type,
-      manager: f.manager, recruiter: f.recruiter, salaryMin: +f.salaryMin, salaryMax: +f.salaryMax || +f.salaryMin + 20000,
-      experience: f.experience, education: f.education, location: f.location, vacancies: +f.vacancies || 1,
-      description: f.description, responsibilities, skills: skills.length ? skills : job.skills, benefits: benefits.length ? benefits : job.benefits, status: f.status
-    });
-    UI.toast('Job updated successfully', 'success');
-  } else {
-    const newJob = {
-      id: 'JOB-' + (1001 + DB.jobs.length), title: f.title, department: f.department, businessUnit: f.businessUnit,
-      grade: f.grade, manager: f.manager, managerId: '', recruiter: f.recruiter, recruiterId: '', location: f.location,
-      type: f.type, vacancies: +f.vacancies || 1, applications: 0, status: f.status, created: new Date('2026-07-09'),
-      deadline: f.deadline ? new Date(f.deadline) : new Date('2026-08-09'), salaryMin: +f.salaryMin, salaryMax: +f.salaryMax || +f.salaryMin + 20000,
-      experience: f.experience || '3+ years', education: f.education, skills, benefits, description: f.description,
-      responsibilities: responsibilities.length ? responsibilities : ['Own key projects'], progress: 0
-    };
-    DB.jobs.unshift(newJob);
-    UI.toast('Job created successfully', 'success');
-    App.updateBadges();
-  }
-  UI.closeModal();
-  Router.reload();
-};
-
-Jobs.confirmDelete = function (id) {
-  const j = DB.getJob(id);
-  const body = `<div class="flex gap-16 items-center">
-    <span class="kpi-icn i-red" style="width:48px;height:48px;border-radius:12px;flex-shrink:0">${UI.icon('trash')}</span>
-    <div><p style="font-weight:600;font-size:15px">Delete "${j.title}"?</p>
-    <p class="text-muted" style="margin-top:4px">This will permanently remove requisition ${j.id} and its ${j.applications} applications. This action cannot be undone.</p></div></div>`;
-  const footer = `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button>
-    <button class="btn btn-danger" onclick="Jobs._delete('${id}')">${UI.icon('trash')} Delete Job</button>`;
-  UI.modal({ title: 'Confirm Deletion', body, footer });
-};
-Jobs._delete = function (id) {
-  const i = DB.jobs.findIndex(j => j.id === id);
-  if (i > -1) DB.jobs.splice(i, 1);
-  UI.closeModal();
-  UI.toast('Job deleted', 'success');
-  App.updateBadges();
-  Router.reload();
-};
diff --git a/js/misc.js b/js/misc.js
deleted file mode 100644
index 0edc541..0000000
--- a/js/misc.js
+++ /dev/null
@@ -1,207 +0,0 @@
-/* ============================================================
-   misc.js — Hiring Managers, Calendar, Notifications, Help
-   ============================================================ */
-window.Views = window.Views || {};
-
-// ---------------- Hiring Managers ----------------
-Views.managers = function () {
-  function card(m) {
-    const jobs = DB.jobs.filter(j => j.manager === m.name && j.status === 'Open');
-    return `<div class="card">
-      <div class="card-body">
-        <div class="flex items-center gap-12" style="margin-bottom:14px">
-          ${UI.avatar(m.name, m.initials, m.color, 'avatar-lg')}
-          <div style="flex:1"><div class="lr-title">${m.name}</div><div class="lr-sub">${m.title}</div></div>
-        </div>
-        <div class="grid g-2" style="gap:10px;margin-bottom:14px">
-          <div class="stat-mini"><span class="stat-mini-val">${m.openReqs}</span><span class="stat-mini-lbl">Open Reqs</span></div>
-          <div class="stat-mini"><span class="stat-mini-val">${m.teamSize}</span><span class="stat-mini-lbl">Team Size</span></div>
-        </div>
-        <div class="divider" style="margin:12px 0"></div>
-        <div class="flex items-center" style="justify-content:space-between">
-          <span class="cell-sub">${UI.icon('mail')} ${m.email.split('@')[0]}</span>
-          <button class="btn btn-ghost btn-sm" onclick="Views._mgrDetail('${m.id}')">View</button>
-        </div>
-      </div>
-    </div>`;
-  }
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Hiring Managers</h1><p class="page-sub">${DB.managers.length} managers · ${DB.managers.reduce((s, m) => s + m.openReqs, 0)} active requisitions</p></div>
-        <div class="page-head-actions"><button class="btn btn-primary" onclick="UI.toast('Invite manager','info')">${UI.icon('plus')} Add Manager</button></div>
-      </div>
-      <div class="grid g-3">${DB.managers.map(card).join('')}</div>
-    </div>`;
-  return { html };
-};
-Views._mgrDetail = function (id) {
-  const m = DB.getManager(id);
-  const jobs = DB.jobs.filter(j => j.manager === m.name);
-  const body = `
-    <div class="profile-hero" style="margin-bottom:18px">${UI.avatar(m.name, m.initials, m.color, 'avatar-lg')}
-      <div><div class="ph-name">${m.name}</div><div class="ph-role">${m.title}</div>
-        <div class="ph-tags">${UI.badge(m.department, 'b-indigo')}<span class="badge b-gray badge-plain">${m.teamSize} reports</span></div></div></div>
-    <div class="grid g-3" style="margin-bottom:18px">
-      <div class="stat-mini"><span class="stat-mini-val">${m.openReqs}</span><span class="stat-mini-lbl">Open Reqs</span></div>
-      <div class="stat-mini"><span class="stat-mini-val">${jobs.length}</span><span class="stat-mini-lbl">Total Jobs</span></div>
-      <div class="stat-mini"><span class="stat-mini-val">${jobs.reduce((s, j) => s + j.applications, 0)}</span><span class="stat-mini-lbl">Applications</span></div>
-    </div>
-    <div class="form-section-title" style="margin-top:0">Hiring Manager Portal</div>
-    <div class="grid g-2" style="gap:10px;margin-bottom:16px">
-      <button class="btn btn-secondary" onclick="UI.closeModal();Jobs.openCreate()">${UI.icon('plus')} Raise Requisition</button>
-      <button class="btn btn-secondary" onclick="UI.closeModal();Router.go('candidates')">${UI.icon('users')} Review Candidates</button>
-      <button class="btn btn-secondary" onclick="UI.closeModal();Interviews.schedule()">${UI.icon('calendar')} Schedule Interview</button>
-      <button class="btn btn-secondary" onclick="UI.closeModal();Router.go('offers')">${UI.icon('check-circle')} Approve Offers</button>
-    </div>
-    <div class="form-section-title">Requisitions</div>
-    <div class="list-tight">${jobs.length ? jobs.map(j => `<div class="list-row" style="cursor:pointer" onclick="UI.closeModal();Jobs.view('${j.id}')">
-      <span class="kpi-icn i-indigo" style="width:36px;height:36px;border-radius:9px">${UI.icon('briefcase')}</span>
-      <div class="lr-main"><div class="lr-title">${j.title}</div><div class="lr-sub">${j.applications} applications</div></div>${UI.badge(j.status)}</div>`).join('') : '<p class="text-muted">No requisitions</p>'}</div>`;
-  UI.modal({ title: 'Hiring Manager', subtitle: m.id, body, size: 'modal-lg', footer: `<button class="btn btn-secondary" onclick="UI.closeModal()">Close</button><button class="btn btn-primary" onclick="UI.toast('Message sent','success')">${UI.icon('mail')} Message</button>` });
-};
-
-// ---------------- Calendar ----------------
-Views.calendar = function () {
-  const state = { month: 6, year: 2026 }; // July 2026 (0-indexed)
-  const evColors = { 'Phone Screen': 'b-blue', 'Technical': 'b-indigo', 'System Design': 'b-purple', 'Onsite Loop': 'b-teal', 'Hiring Manager': 'b-amber', 'Culture Fit': 'b-green', 'Final Round': 'b-red' };
-
-  function build() {
-    const first = new Date(state.year, state.month, 1);
-    const startDow = first.getDay();
-    const daysInMonth = new Date(state.year, state.month + 1, 0).getDate();
-    const prevDays = new Date(state.year, state.month, 0).getDate();
-    const cells = [];
-    for (let i = startDow - 1; i >= 0; i--) cells.push({ day: prevDays - i, other: true });
-    for (let d = 1; d <= daysInMonth; d++) cells.push({ day: d, other: false, date: new Date(state.year, state.month, d) });
-    while (cells.length % 7 !== 0 || cells.length < 42) cells.push({ day: cells.length - daysInMonth - startDow + 1, other: true });
-
-    const today = new Date('2026-07-09');
-    const dow = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    let html = dow.map(d => `<div class="cal-dow">${d}</div>`).join('');
-    cells.slice(0, 42).forEach(c => {
-      let evs = '';
-      if (!c.other && c.date) {
-        const dayEvents = DB.interviews.filter(iv => iv.when.toDateString() === c.date.toDateString());
-        evs = dayEvents.slice(0, 3).map(iv => `<div class="cal-event ${evColors[iv.type] || 'b-blue'}" onclick="Candidates.openProfile('${iv.candidateId}')" title="${iv.candidate} · ${iv.type}">${iv.when.toLocaleTimeString('en-US', { hour: 'numeric' })} ${iv.candidate.split(' ')[0]}</div>`).join('');
-        if (dayEvents.length > 3) evs += `<div class="cal-event b-gray">+${dayEvents.length - 3} more</div>`;
-      }
-      const isToday = !c.other && c.date && c.date.toDateString() === today.toDateString();
-      html += `<div class="cal-cell ${c.other ? 'other' : ''} ${isToday ? 'today' : ''}"><div class="cal-date">${c.day}</div>${evs}</div>`;
-    });
-    return html;
-  }
-
-  const monthName = new Date(state.year, state.month).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
-  const todayIvs = DB.interviews.filter(iv => iv.when.toDateString() === new Date('2026-07-09').toDateString());
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Calendar</h1><p class="page-sub">Interview schedule at a glance</p></div>
-        <div class="page-head-actions">
-          <div class="flex items-center gap-8">
-            <button class="btn btn-icon btn-secondary" id="calPrev">${UI.icon('chevron-left')}</button>
-            <span class="fw-600" id="calMonth" style="min-width:140px;text-align:center">${monthName}</span>
-            <button class="btn btn-icon btn-secondary" id="calNext">${UI.icon('chevron-right')}</button>
-          </div>
-          <button class="btn btn-primary" onclick="Interviews.schedule()">${UI.icon('plus')} Schedule</button>
-        </div>
-      </div>
-      <div class="grid g-2-1">
-        <div class="card"><div class="card-body"><div class="cal-grid" id="calGrid">${build()}</div></div></div>
-        <div class="card" style="align-self:start"><div class="card-head"><div><h3>Today</h3><span class="ch-sub">July 9, 2026</span></div></div>
-          <div class="card-body"><div class="list-tight">${todayIvs.length ? todayIvs.map(iv => `
-            <div class="list-row" style="cursor:pointer" onclick="Candidates.openProfile('${iv.candidateId}')">${UI.avatar(iv.candidate, iv.candInitials, iv.color)}
-            <div class="lr-main"><div class="lr-title">${iv.candidate}</div><div class="lr-sub">${iv.type}</div></div>
-            <div class="lr-right"><div class="fw-600 text-sm">${iv.when.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}</div></div></div>`).join('') : '<p class="text-muted">No interviews today</p>'}</div></div>
-        </div>
-      </div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      const upd = () => {
-        document.getElementById('calGrid').innerHTML = build();
-        document.getElementById('calMonth').textContent = new Date(state.year, state.month).toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
-      };
-      document.getElementById('calPrev').onclick = () => { state.month--; if (state.month < 0) { state.month = 11; state.year--; } upd(); };
-      document.getElementById('calNext').onclick = () => { state.month++; if (state.month > 11) { state.month = 0; state.year++; } upd(); };
-    }
-  };
-};
-
-// ---------------- Notifications ----------------
-Views.notifications = function () {
-  const rows = DB.notifications.map((n, i) => `
-    <div class="notif-row ${n.unread ? 'unread' : ''}" onclick="this.classList.remove('unread')">
-      <span class="notif-icn ${n.color}">${UI.icon(n.icon)}</span>
-      <div class="notif-body"><div class="notif-title">${n.title}</div><div class="notif-text">${n.text}</div><div class="notif-time">${n.time}</div></div>
-      ${n.unread ? '<span class="dot dot-blue" style="position:static;border:none;align-self:center"></span>' : ''}
-    </div>`).join('');
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Notifications</h1><p class="page-sub">Stay on top of hiring activity</p></div>
-        <div class="page-head-actions">
-          <button class="btn btn-secondary" onclick="App.markAllNotifsRead();Router.reload()">${UI.icon('check')} Mark all read</button>
-          <button class="btn btn-ghost" onclick="UI.toast('Notification settings','info')">${UI.icon('more')}</button>
-        </div>
-      </div>
-      <div class="card"><div class="list-tight" style="padding:0">${rows}</div></div>
-    </div>`;
-  return { html };
-};
-
-// ---------------- Help ----------------
-Views.help = function () {
-  const faqs = [
-    { q: 'How do I create a new job requisition?', a: 'Navigate to Jobs and click "Create Job". Fill in the required fields marked with an asterisk and click Save. The job will immediately appear in your listings.' },
-    { q: 'How does the AI candidate score work?', a: 'The AI score (0–100) evaluates how well a candidate matches the job requirements based on skills, experience, and education. Higher scores indicate stronger matches.' },
-    { q: 'Can I move candidates between pipeline stages?', a: 'Yes. Open the Pipeline view and simply drag any candidate card between stage columns. The candidate\'s status updates automatically.' },
-    { q: 'How do I schedule an interview?', a: 'Go to Interviews or Calendar and click "Schedule Interview". Select the candidate, round, date, time, and interviewers.' },
-    { q: 'How do I export reports?', a: 'On the Reports page, use the "Export Report" button for a full PDF, or the CSV buttons on individual tables.' }
-  ];
-  const resources = [
-    { icn: 'file', t: 'Documentation', d: 'Complete product guides', cls: 'i-indigo' },
-    { icn: 'video', t: 'Video Tutorials', d: 'Watch step-by-step walkthroughs', cls: 'i-red' },
-    { icn: 'message', t: 'Live Chat', d: 'Chat with our support team', cls: 'i-green' },
-    { icn: 'users', t: 'Community', d: 'Connect with other recruiters', cls: 'i-purple' }
-  ];
-  const html = `
-    <div class="page">
-      <div class="page-head"><div><h1 class="page-title">Help Center</h1><p class="page-sub">Find answers and get support</p></div></div>
-      <div class="card brand-hero mb-18">
-        <div class="card-body" style="padding:32px;text-align:center">
-          <h2 style="font-size:22px;margin-bottom:8px">How can we help you?</h2>
-          <p style="opacity:.85;margin-bottom:18px">Search our knowledge base or browse the topics below</p>
-          <div class="topbar-search" style="max-width:480px;margin:0 auto">
-            <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-            <input placeholder="Search help articles…" />
-          </div>
-        </div>
-      </div>
-      <div class="grid g-kpi mb-18">
-        ${resources.map(r => `<div class="card" style="cursor:pointer" onclick="UI.toast('Opening ${r.t}','info')"><div class="card-body" style="text-align:center">
-          <span class="kpi-icn ${r.cls}" style="margin:0 auto 12px;width:48px;height:48px;border-radius:14px">${UI.icon(r.icn)}</span>
-          <div class="fw-600">${r.t}</div><div class="lr-sub" style="margin-top:4px">${r.d}</div></div></div>`).join('')}
-      </div>
-      <div class="card">
-        <div class="card-head"><div><h3>Frequently Asked Questions</h3></div></div>
-        <div class="card-body"><div id="faqList">
-          ${faqs.map((f, i) => `<div class="setting-row" style="cursor:pointer;flex-direction:column;align-items:stretch" onclick="Views._toggleFaq(${i})">
-            <div class="flex items-center" style="justify-content:space-between"><h4>${f.q}</h4><span id="faqChev${i}" style="color:var(--text-3);transition:.2s">${UI.icon('chevron-right')}</span></div>
-            <p id="faqA${i}" style="display:none;margin-top:10px">${f.a}</p></div>`).join('')}
-        </div></div>
-      </div>
-    </div>`;
-  return { html };
-};
-Views._toggleFaq = function (i) {
-  const a = document.getElementById('faqA' + i);
-  const chev = document.getElementById('faqChev' + i);
-  const open = a.style.display === 'block';
-  a.style.display = open ? 'none' : 'block';
-  chev.style.transform = open ? 'rotate(0deg)' : 'rotate(90deg)';
-};
diff --git a/js/offers.js b/js/offers.js
deleted file mode 100644
index ddb61a8..0000000
--- a/js/offers.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/* ============================================================
-   offers.js — Offer management
-   ============================================================ */
-window.Views = window.Views || {};
-window.Offers = {};
-
-Views.offers = function () {
-  const filters = { q: '', status: '' };
-  let table;
-
-  const stats = {
-    sent: DB.offers.filter(o => o.status !== 'Draft').length,
-    accepted: DB.offers.filter(o => o.status === 'Accepted').length,
-    pending: DB.offers.filter(o => ['Sent', 'Negotiating'].includes(o.status)).length,
-    rate: Math.round(DB.offers.filter(o => o.status === 'Accepted').length / (DB.offers.filter(o => ['Accepted', 'Declined'].includes(o.status)).length || 1) * 100)
-  };
-
-  function apply() {
-    const rows = DB.offers.filter(o => {
-      if (filters.status && o.status !== filters.status) return false;
-      if (filters.q && !(o.candidate + o.jobTitle + o.recruiter).toLowerCase().includes(filters.q.toLowerCase())) return false;
-      return true;
-    });
-    table.update(rows);
-  }
-
-  table = UI.dataTable({
-    pageSize: 8,
-    rows: DB.offers,
-    columns: [
-      { key: 'candidate', label: 'Candidate', sortable: true, render: o => `<div class="user-cell">${UI.avatar(o.candidate, o.initials, o.color)}<div><div class="cell-primary">${o.candidate}</div><div class="cell-sub">${o.jobTitle}</div></div></div>` },
-      { key: 'department', label: 'Department', sortable: true },
-      { key: 'base', label: 'Base Salary', sortable: true, align: 'right', render: o => `<b>${DB.money(o.base)}</b>` },
-      { key: 'equity', label: 'Equity', render: o => `<span class="text-muted">${o.equity}</span>` },
-      { key: 'bonus', label: 'Bonus', align: 'center', render: o => `<span class="text-muted">${o.bonus}</span>` },
-      { key: 'sent', label: 'Sent', sortable: true, sortValue: o => o.sent.getTime(), render: o => `<span class="text-muted">${DB.fmtShort(o.sent)}</span>` },
-      { key: 'status', label: 'Status', sortable: true, render: o => UI.badge(o.status) },
-      { key: '_a', label: 'Actions', align: 'right', render: o => `
-        <div class="row-actions">
-          <button class="act-btn" data-tip="View" onclick="Offers.view('${o.id}')">${UI.icon('eye')}</button>
-          <button class="act-btn" data-tip="Resend" onclick="UI.toast('Offer resent to ${o.candidate}','info')">${UI.icon('send')}</button>
-        </div>` }
-    ]
-  });
-
-  const statusOpts = ['<option value="">All Status</option>'].concat(['Sent', 'Accepted', 'Negotiating', 'Declined', 'Draft', 'Expired'].map(s => `<option>${s}</option>`)).join('');
-  const statCard = (label, val, icn, cls) => `<div class="kpi"><div class="kpi-top"><span class="kpi-label">${label}</span><span class="kpi-icn ${cls}">${UI.icon(icn)}</span></div><div class="kpi-value">${val}</div></div>`;
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Offers</h1><p class="page-sub">Track offer letters and acceptance</p></div>
-        <div class="page-head-actions"><button class="btn btn-primary" onclick="Offers.create()">${UI.icon('plus')} Create Offer</button></div>
-      </div>
-      <div class="grid g-kpi mb-18">
-        ${statCard('Offers Sent', stats.sent, 'send', 'i-indigo')}
-        ${statCard('Accepted', stats.accepted, 'check-circle', 'i-green')}
-        ${statCard('Awaiting Response', stats.pending, 'clock', 'i-amber')}
-        ${statCard('Acceptance Rate', stats.rate + '%', 'trending-up', 'i-teal')}
-      </div>
-      <div class="card">
-        <div class="card-body" style="padding-bottom:0">
-          <div class="toolbar">
-            <div class="toolbar-search">${UI.icon('search')}<input id="ofSearch" placeholder="Search candidate or role…"/></div>
-            <select class="select" id="ofStatus">${statusOpts}</select>
-          </div>
-        </div>
-        ${table.html}
-      </div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      table.mount();
-      const s = document.getElementById('ofSearch');
-      s.oninput = () => { filters.q = s.value; apply(); };
-      document.getElementById('ofStatus').onchange = e => { filters.status = e.target.value; apply(); };
-    }
-  };
-};
-
-Offers.view = function (id) {
-  const o = DB.offers.find(x => x.id === id);
-  const total = o.base + Math.round(o.base * parseInt(o.bonus) / 100);
-  const body = `
-    <div class="flex items-center gap-12 mb-18">${UI.avatar(o.candidate, o.initials, o.color, 'avatar-lg')}
-      <div><div class="ph-name" style="font-size:17px">${o.candidate}</div><div class="ph-role">${o.jobTitle} · ${o.department}</div></div>
-      <div style="margin-left:auto">${UI.badge(o.status)}</div></div>
-    <div class="card" style="box-shadow:none;background:var(--bg-sunken);margin-bottom:18px"><div class="card-body">
-      <div class="form-section-title" style="margin-top:0">Compensation Package</div>
-      <div class="info-grid">
-        <div class="info-item"><div class="il">Base Salary</div><div class="iv" style="font-size:18px">${DB.money(o.base)}</div></div>
-        <div class="info-item"><div class="il">Annual Bonus</div><div class="iv" style="font-size:18px">${o.bonus}</div></div>
-        <div class="info-item"><div class="il">Equity</div><div class="iv" style="font-size:18px">${o.equity}</div></div>
-        <div class="info-item"><div class="il">Est. Total Cash</div><div class="iv" style="font-size:18px;color:var(--success)">${DB.money(total)}</div></div>
-      </div>
-    </div></div>
-    <div class="info-grid">
-      <div class="info-item"><div class="il">Sent On</div><div class="iv">${DB.fmtDate(o.sent)}</div></div>
-      <div class="info-item"><div class="il">Expires</div><div class="iv">${DB.fmtDate(o.expires)}</div></div>
-      <div class="info-item"><div class="il">Recruiter</div><div class="iv">${o.recruiter}</div></div>
-      <div class="info-item"><div class="il">Offer ID</div><div class="iv mono">${o.id}</div></div>
-    </div>`;
-  const footer = `<button class="btn btn-secondary" onclick="UI.closeModal()">Close</button>
-    <button class="btn btn-secondary" onclick="UI.toast('Offer PDF downloaded','info')">${UI.icon('download')} Download</button>
-    <button class="btn btn-primary" onclick="UI.closeModal();UI.toast('Offer resent','success')">${UI.icon('send')} Resend Offer</button>`;
-  UI.modal({ title: 'Offer Details', subtitle: o.id, body, footer, size: 'modal-lg' });
-};
-
-Offers.create = function () {
-  const opt = arr => arr.map(o => `<option>${o}</option>`).join('');
-  const body = `<form id="offerForm" novalidate><div class="form-grid">
-    <div class="form-field col-span-2"><label>Candidate <span class="req">*</span></label><select name="candidate">${opt(DB.candidates.filter(c => ['Interview', 'Offer'].includes(c.stage)).map(c => c.name))}</select></div>
-    <div class="form-field"><label>Base Salary ($) <span class="req">*</span></label><input name="base" type="number" placeholder="140000"/><span class="field-error">Required</span></div>
-    <div class="form-field"><label>Annual Bonus (%)</label><input name="bonus" type="number" value="10"/></div>
-    <div class="form-field"><label>Equity (RSU)</label><input name="equity" placeholder="20k RSU"/></div>
-    <div class="form-field"><label>Expiration Date</label><input name="expires" type="date"/></div>
-    <div class="form-field col-span-2"><label>Notes</label><textarea name="notes" placeholder="Additional details for the offer…"></textarea></div>
-  </div></form>`;
-  const footer = `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button>
-    <button class="btn btn-primary" onclick="Offers._save()">${UI.icon('send')} Send Offer</button>`;
-  UI.modal({ title: 'Create Offer', subtitle: 'Generate and send an offer letter', body, footer });
-};
-Offers._save = function () {
-  const form = document.getElementById('offerForm');
-  UI.clearErrors(form);
-  const f = Object.fromEntries(new FormData(form));
-  if (!f.base || +f.base <= 0) { UI.fieldError(form.querySelector('[name=base]'), 'Required'); UI.toast('Enter a base salary', 'error'); return; }
-  const cand = DB.candidates.find(c => c.name === f.candidate) || DB.candidates[0];
-  DB.offers.unshift({
-    id: 'OFR-' + (9001 + DB.offers.length), candidate: cand.name, candidateId: cand.id, initials: cand.initials, color: cand.color,
-    jobTitle: cand.jobTitle, department: cand.department, status: 'Sent', base: +f.base, equity: f.equity || '10k RSU',
-    bonus: (f.bonus || 10) + '%', sent: new Date('2026-07-09'), expires: f.expires ? new Date(f.expires) : new Date('2026-07-23'), recruiter: cand.recruiter
-  });
-  UI.closeModal();
-  UI.toast('Offer sent successfully', 'success');
-  Router.reload();
-};
diff --git a/js/pipeline.js b/js/pipeline.js
deleted file mode 100644
index 2f54be5..0000000
--- a/js/pipeline.js
+++ /dev/null
@@ -1,166 +0,0 @@
-/* ============================================================
-   pipeline.js — Kanban board (drag & drop) + Talent Pool
-   ============================================================ */
-window.Views = window.Views || {};
-window.Pipeline = {};
-
-// Stage colours reference CSS tokens so the board re-tints with the theme.
-const KANBAN_STAGES = [
-  { name: 'Applied',    color: 'var(--stage-1)' },
-  { name: 'Screening',  color: 'var(--stage-2)' },
-  { name: 'Assessment', color: 'var(--stage-3)' },
-  { name: 'Interview',  color: 'var(--stage-4)' },
-  { name: 'Offer',      color: 'var(--stage-5)' },
-  { name: 'Hired',      color: 'var(--stage-6)' },
-  { name: 'Rejected',   color: 'var(--stage-7)' }
-];
-
-Views.pipeline = function () {
-  const jobFilter = { id: '' };
-
-  function columns() {
-    const list = jobFilter.id ? DB.candidates.filter(c => c.jobId === jobFilter.id) : DB.candidates;
-    return KANBAN_STAGES.map(st => {
-      const cards = list.filter(c => c.stage === st.name);
-      return `<div class="kanban-col" data-stage="${st.name}">
-        <div class="kanban-col-head"><span class="k-dot" style="background:${st.color}"></span><h4>${st.name}</h4><span class="k-count">${cards.length}</span></div>
-        <div class="kanban-cards" data-stage="${st.name}">
-          ${cards.map(c => Pipeline._card(c)).join('')}
-        </div></div>`;
-    }).join('');
-  }
-
-  const jobOpts = ['<option value="">All Jobs</option>'].concat(DB.jobs.filter(j => j.status === 'Open').map(j => `<option value="${j.id}">${j.title}</option>`)).join('');
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Pipeline</h1><p class="page-sub">Drag candidates between stages to update their status</p></div>
-        <div class="page-head-actions">
-          <select class="select" id="pipeJob">${jobOpts}</select>
-          <button class="btn btn-primary" onclick="Candidates.openAdd()">${UI.icon('plus')} Add Candidate</button>
-        </div>
-      </div>
-      <div class="kanban" id="kanban">${columns()}</div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      Pipeline._bindDnd();
-      document.getElementById('pipeJob').onchange = e => {
-        jobFilter.id = e.target.value;
-        document.getElementById('kanban').innerHTML = columns();
-        Pipeline._bindDnd();
-      };
-    }
-  };
-};
-
-Pipeline._card = function (c) {
-  return `<div class="k-card" draggable="true" data-id="${c.id}" onclick="Candidates.openProfile('${c.id}')">
-    <div class="k-card-top">${UI.avatar(c.name, c.initials, c.color)}
-      <div><div class="kc-name">${c.name}</div><div class="kc-role">${c.currentTitle}</div></div></div>
-    <div class="kc-role">${c.jobTitle}</div>
-    <div class="k-tags">${c.skills.slice(0, 3).map(s => `<span class="tag">${s}</span>`).join('')}</div>
-    <div class="k-card-meta"><span class="cell-sub">${c.currentCompany}</span>${UI.scoreChip(c.aiScore)}</div>
-  </div>`;
-};
-
-Pipeline._bindDnd = function () {
-  let dragged = null;
-  document.querySelectorAll('.k-card').forEach(card => {
-    card.addEventListener('dragstart', e => {
-      dragged = card; card.classList.add('dragging');
-      e.dataTransfer.effectAllowed = 'move';
-      e.dataTransfer.setData('text/plain', card.dataset.id);
-    });
-    card.addEventListener('dragend', () => { card.classList.remove('dragging'); dragged = null; });
-    // prevent click-through opening profile right after drag
-    card.addEventListener('click', e => { if (card._justDropped) { e.stopPropagation(); card._justDropped = false; } });
-  });
-  document.querySelectorAll('.kanban-cards').forEach(zone => {
-    zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('drag-over'); });
-    zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
-    zone.addEventListener('drop', e => {
-      e.preventDefault();
-      zone.classList.remove('drag-over');
-      if (!dragged) return;
-      const id = dragged.dataset.id;
-      const cand = DB.getCandidate(id);
-      const newStage = zone.dataset.stage;
-      if (cand.stage === newStage) return;
-      cand.stage = newStage; cand.status = newStage;
-      zone.appendChild(dragged);
-      // update counts
-      document.querySelectorAll('.kanban-col').forEach(col => {
-        col.querySelector('.k-count').textContent = col.querySelectorAll('.k-card').length;
-      });
-      UI.toast(`${cand.name} moved to ${newStage}`, 'success');
-    });
-  });
-};
-
-// ---------------- Talent Pool ----------------
-Views.talentpool = function () {
-  const filters = { q: '', dept: '' };
-  // Talent pool = candidates not currently in active loop (silver medalists / passive talent)
-  const pool = DB.candidates.filter(c => ['Rejected', 'Applied', 'Hired'].includes(c.stage));
-
-  function render(list) {
-    const grid = document.getElementById('poolGrid');
-    if (!grid) return;
-    if (!list.length) { grid.innerHTML = `<div class="empty-state" style="grid-column:1/-1">${UI.icon('search')}<h3>No talent found</h3></div>`; return; }
-    grid.innerHTML = list.map(c => `
-      <div class="card" style="cursor:pointer" onclick="Candidates.openProfile('${c.id}')">
-        <div class="card-body">
-          <div class="flex items-center gap-12" style="margin-bottom:12px">
-            ${UI.avatar(c.name, c.initials, c.color, 'avatar-lg')}
-            <div style="flex:1;min-width:0"><div class="lr-title">${c.name}</div><div class="lr-sub">${c.currentTitle}</div></div>
-            ${UI.scoreChip(c.aiScore)}
-          </div>
-          <div class="k-tags" style="margin-bottom:12px">${c.skills.slice(0, 4).map(s => `<span class="tag">${s}</span>`).join('')}</div>
-          <div class="divider" style="margin:12px 0"></div>
-          <div class="flex items-center" style="justify-content:space-between">
-            <span class="cell-sub">${UI.icon('briefcase')} ${c.experience} yrs</span>
-            <span class="cell-sub">${c.currentCompany}</span>
-            ${UI.badge(c.source, 'b-gray')}
-          </div>
-        </div>
-      </div>`).join('');
-  }
-  function apply() {
-    let list = pool.filter(c => {
-      if (filters.dept && c.department !== filters.dept) return false;
-      if (filters.q && !(c.name + c.currentCompany + c.skills.join(' ')).toLowerCase().includes(filters.q.toLowerCase())) return false;
-      return true;
-    });
-    render(list);
-  }
-  const deptOpts = ['<option value="">All Departments</option>'].concat(DB.departments.map(d => `<option>${d}</option>`)).join('');
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Talent Pool</h1><p class="page-sub">${pool.length} silver-medalists & passive candidates to re-engage</p></div>
-        <div class="page-head-actions"><button class="btn btn-primary" onclick="UI.toast('Talent campaign created','success')">${UI.icon('send')} Start Campaign</button></div>
-      </div>
-      <div class="card mb-18"><div class="card-body" style="padding:16px">
-        <div class="toolbar" style="margin-bottom:0">
-          <div class="toolbar-search">${UI.icon('search')}<input id="poolSearch" placeholder="Search by name, skill, company…"/></div>
-          <select class="select" id="poolDept">${deptOpts}</select>
-        </div>
-      </div></div>
-      <div class="grid g-3" id="poolGrid"></div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      apply();
-      const s = document.getElementById('poolSearch');
-      s.oninput = () => { filters.q = s.value; apply(); };
-      document.getElementById('poolDept').onchange = e => { filters.dept = e.target.value; apply(); };
-    }
-  };
-};
diff --git a/js/rbac.js b/js/rbac.js
deleted file mode 100644
index 31c9981..0000000
--- a/js/rbac.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/* ============================================================
-   rbac.js — Enterprise Role Based Access Control
-   Microsoft Admin Center-style permission matrix
-   ============================================================ */
-window.Views = window.Views || {};
-window.RBAC = {};
-
-Views.rbac = function () {
-  const state = { roleIdx: 0 };
-  RBAC._state = state;
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Access Control</h1><p class="page-sub">Enterprise RBAC — configure permissions for every role and module</p></div>
-        <div class="page-head-actions">
-          <button class="btn btn-secondary" onclick="RBAC.addRole()">${UI.icon('plus')} New Role</button>
-          <button class="btn btn-primary" onclick="UI.toast('Permission changes saved','success')">${UI.icon('check')} Save Changes</button>
-        </div>
-      </div>
-      <div class="rbac-layout">
-        <div class="card" style="align-self:start"><div class="card-body" style="padding:12px">
-          <div class="nav-section-label" style="padding:6px 8px">Roles</div>
-          <div class="role-list" id="roleList"></div>
-        </div></div>
-        <div class="card"><div id="rbacDetail"></div></div>
-      </div>
-    </div>`;
-
-  return {
-    html,
-    onMount() { RBAC._renderRoles(); RBAC._renderDetail(); }
-  };
-};
-
-RBAC._renderRoles = function () {
-  const el = document.getElementById('roleList');
-  el.innerHTML = DB.rbacRoles.map((r, i) => `
-    <div class="role-item ${i === RBAC._state.roleIdx ? 'active' : ''}" data-idx="${i}">
-      <span class="role-badge" style="background:${r.color}">${UI.icon('shield')}</span>
-      <div style="flex:1;min-width:0"><div class="fw-600 text-sm">${r.name}</div><div class="cell-sub">${r.users} user${r.users === 1 ? '' : 's'}</div></div>
-    </div>`).join('');
-  el.querySelectorAll('.role-item').forEach(item => item.onclick = () => {
-    RBAC._state.roleIdx = +item.dataset.idx;
-    RBAC._renderRoles(); RBAC._renderDetail();
-  });
-};
-
-RBAC._renderDetail = function () {
-  const r = DB.rbacRoles[RBAC._state.roleIdx];
-  const el = document.getElementById('rbacDetail');
-
-  const matrixRows = DB.rbacModules.map(mod => `
-    <tr>
-      <td>${mod}</td>
-      ${DB.permTypes.map((pt, pi) => `<td><span class="perm-check ${r.matrix[mod][pi] ? 'on' : ''}" data-mod="${mod}" data-perm="${pi}">${UI.icon('check')}</span></td>`).join('')}
-    </tr>`).join('');
-
-  el.innerHTML = `
-    <div class="card-head">
-      <div class="flex items-center gap-12"><span class="role-badge" style="background:${r.color}">${UI.icon('shield')}</span>
-        <div><h3>${r.name}</h3><span class="ch-sub">${r.desc}</span></div></div>
-      <div class="flex items-center gap-8">
-        <span class="badge b-gray badge-plain">${r.users} users</span>
-        <button class="btn btn-ghost btn-sm" onclick="RBAC.toggleAll(true)">Grant all</button>
-        <button class="btn btn-ghost btn-sm" onclick="RBAC.toggleAll(false)">Revoke all</button>
-      </div>
-    </div>
-    <div class="card-body">
-      <div class="table-wrap"><table class="rbac-matrix">
-        <thead><tr><th>Module</th>${DB.permTypes.map(p => `<th>${p}</th>`).join('')}</tr></thead>
-        <tbody>${matrixRows}</tbody>
-      </table></div>
-    </div>`;
-
-  el.querySelectorAll('.perm-check').forEach(chk => chk.onclick = () => {
-    const mod = chk.dataset.mod, pi = +chk.dataset.perm;
-    r.matrix[mod][pi] = !r.matrix[mod][pi];
-    chk.classList.toggle('on');
-  });
-};
-
-RBAC.toggleAll = function (on) {
-  const r = DB.rbacRoles[RBAC._state.roleIdx];
-  DB.rbacModules.forEach(mod => r.matrix[mod] = r.matrix[mod].map(() => on));
-  RBAC._renderDetail();
-  UI.toast(on ? 'All permissions granted for ' + r.name : 'All permissions revoked for ' + r.name, on ? 'success' : 'warning');
-};
-
-RBAC.addRole = function () {
-  UI.modal({
-    title: 'Create Role', subtitle: 'Define a new access role',
-    body: `<form id="roleForm"><div class="form-grid">
-      <div class="form-field col-span-2"><label>Role Name <span class="req">*</span></label><input name="name" placeholder="e.g. Regional Recruiter"/><span class="field-error">Required</span></div>
-      <div class="form-field col-span-2"><label>Description</label><input name="desc" placeholder="What can this role do?"/></div>
-      <div class="form-field"><label>Base Template</label><select name="template"><option>View only</option><option>Editor</option><option>Approver</option><option>Manager</option><option>Administrator</option></select></div>
-      <div class="form-field"><label>Color</label><select name="color"><option value="var(--av-1)">Utopia Green</option><option value="var(--av-3)">Periwinkle</option><option value="var(--av-6)">Teal</option><option value="var(--av-7)">Violet</option><option value="var(--av-8)">Rose</option></select></div>
-    </div></form>`,
-    footer: `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button><button class="btn btn-primary" onclick="RBAC._saveRole()">${UI.icon('check')} Create Role</button>`
-  });
-};
-RBAC._saveRole = function () {
-  const form = document.getElementById('roleForm');
-  UI.clearErrors(form);
-  const f = Object.fromEntries(new FormData(form));
-  if (!f.name.trim()) { UI.fieldError(form.querySelector('[name=name]'), 'Required'); return; }
-  const levelMap = { 'View only': 'View', 'Editor': 'Edit', 'Approver': 'Approve', 'Manager': 'Manage', 'Administrator': 'Administrator' };
-  const level = levelMap[f.template] || 'View';
-  const idxMap = { 'View': 1, 'Edit': 3, 'Approve': 5, 'Manage': 7, 'Administrator': 8 };
-  const cutoff = idxMap[level];
-  const matrix = {};
-  DB.rbacModules.forEach(mod => matrix[mod] = DB.permTypes.map((p, i) => i < cutoff));
-  DB.rbacRoles.push({ name: f.name, users: 0, color: f.color, desc: f.desc || 'Custom role', level, matrix });
-  RBAC._state.roleIdx = DB.rbacRoles.length - 1;
-  UI.closeModal(); RBAC._renderRoles(); RBAC._renderDetail();
-  UI.toast('Role "' + f.name + '" created', 'success');
-};
diff --git a/js/recruiterhub.js b/js/recruiterhub.js
deleted file mode 100644
index b9622e7..0000000
--- a/js/recruiterhub.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/* ============================================================
-   recruiterhub.js — Personalized recruiter dashboard + leaderboard
-   ============================================================ */
-window.Views = window.Views || {};
-window.RecruiterHub = {};
-
-Views.recruiterhub = function () {
-  const state = { recId: DB.recruiters[0].id };
-  RecruiterHub._state = state;
-
-  const recOpts = DB.recruiters.map(r => `<option value="${r.id}">${r.name}</option>`).join('');
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Recruiter Hub</h1><p class="page-sub">Personalized performance dashboard & workload</p></div>
-        <div class="page-head-actions">
-          <select class="select" id="recSelect">${recOpts}</select>
-          <button class="btn btn-secondary" onclick="UI.toast('Report exported','success')">${UI.icon('download')} Export</button>
-        </div>
-      </div>
-      <div id="recHubBody"></div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      RecruiterHub._render();
-      document.getElementById('recSelect').onchange = e => { state.recId = e.target.value; RecruiterHub._render(); };
-    }
-  };
-};
-
-RecruiterHub._render = function () {
-  const r = DB.getRecruiter(RecruiterHub._state.recId);
-  const el = document.getElementById('recHubBody');
-  const slaCls = r.sla === 'On Track' ? 'b-green' : r.sla === 'At Risk' ? 'b-amber' : 'b-red';
-
-  const kpi = (label, val, icn, cls, sub) => `<div class="kpi"><div class="kpi-top"><span class="kpi-label">${label}</span><span class="kpi-icn ${cls}">${UI.icon(icn)}</span></div><div class="kpi-value">${val}</div>${sub ? `<div class="kpi-foot"><span class="kpi-foot-text">${sub}</span></div>` : ''}</div>`;
-
-  // leaderboard
-  const board = [...DB.recruiters].sort((a, b) => b.hires - a.hires).slice(0, 8);
-  const leaderHtml = board.map((rec, i) => {
-    const rankCls = i === 0 ? 'gold' : i === 1 ? 'silver' : i === 2 ? 'bronze' : '';
-    return `<div class="leader-row" style="${rec.id === r.id ? 'background:var(--primary-soft);border-radius:10px;padding-left:8px;padding-right:8px' : ''}">
-      <span class="leader-rank ${rankCls}">${i + 1}</span>
-      ${UI.avatar(rec.name, rec.initials, rec.color)}
-      <div class="lr-main"><div class="lr-title">${rec.name}</div><div class="lr-sub">${rec.efficiency}% efficiency · ${rec.avgTimeToHire}d avg</div></div>
-      <div class="lr-right"><div class="fw-600">${rec.hires}</div><div class="lr-sub">hires</div></div>
-    </div>`;
-  }).join('');
-
-  // heatmap
-  const maxHeat = 5;
-  const heatColor = v => { const t = v / maxHeat; return t === 0 ? 'var(--bg-sunken)' : `rgba(79,70,229,${0.2 + t * 0.8})`; };
-  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
-  const heatHtml = `<div class="heatmap">
-    <div class="hm-label"></div>${['W1', 'W2', 'W3', 'W4', 'W5'].map(w => `<div class="hm-label" style="justify-content:center">${w}</div>`).join('')}
-    ${days.map((d, di) => `<div class="hm-label">${d}</div>${r.heatmap[di].map(v => `<div class="hm-cell" style="background:${heatColor(v)}" data-tip="${v} interviews"></div>`).join('')}`).join('')}
-  </div>
-  <div class="hm-legend">Less ${[0, 1, 2, 3, 5].map(v => `<span class="hm-box" style="background:${heatColor(v)}"></span>`).join('')} More</div>`;
-
-  el.innerHTML = `
-    <div class="card brand-hero mb-18">
-      <div class="card-body" style="display:flex;align-items:center;gap:18px">
-        ${UI.avatar(r.name, r.initials, 'rgba(255,255,255,.18)', 'avatar-lg')}
-        <div style="flex:1"><div style="font-size:20px;font-weight:700">${r.name}</div><div style="opacity:.85">${r.department} Recruiter · ⭐ ${r.rating} rating</div></div>
-        <div style="text-align:center"><div style="font-size:26px;font-weight:800">${r.workload}%</div><div style="opacity:.85;font-size:12px">Workload</div></div>
-        <div style="text-align:center"><div style="font-size:26px;font-weight:800">${r.efficiency}%</div><div style="opacity:.85;font-size:12px">Efficiency</div></div>
-        <div style="text-align:center">${UI.badge(r.sla, slaCls)}</div>
-      </div>
-    </div>
-
-    <div class="grid g-kpi mb-18">
-      ${kpi('Open Positions', r.openPositions, 'briefcase', 'i-indigo', 'active reqs')}
-      ${kpi('Closed Positions', r.closedPositions, 'check-circle', 'i-green', 'this year')}
-      ${kpi('Avg Time to Hire', r.avgTimeToHire + 'd', 'clock', 'i-teal', 'target 30d')}
-      ${kpi('Avg Time to Fill', r.avgTimeToFill + 'd', 'target', 'i-amber', 'req → offer')}
-    </div>
-    <div class="grid g-kpi mb-18">
-      ${kpi('Interviews Today', r.interviewsToday, 'calendar', 'i-purple')}
-      ${kpi('Offers Pending', r.offersPending, 'file', 'i-blue')}
-      ${kpi('Awaiting Approval', r.jobsAwaitingApproval, 'clock', 'i-amber')}
-      ${kpi('Jobs Overdue', r.jobsOverdue, 'alert', 'i-red')}
-    </div>
-    <div class="grid g-kpi mb-18">
-      ${kpi('Conversion Rate', r.conversionRate + '%', 'trending-up', 'i-green', 'applicant → hire')}
-      ${kpi('Interview Completion', r.interviewCompletion + '%', 'check-square', 'i-teal')}
-      ${kpi('Avg Response Time', r.avgResponseTime + 'h', 'zap', 'i-purple', 'to candidates')}
-      ${kpi('TAT Performance', r.tat + '%', 'award', 'i-indigo', 'turnaround')}
-    </div>
-
-    <div class="grid g-2-1 mb-18">
-      <div class="card">
-        <div class="card-head"><div><h3>Monthly Hiring Trend</h3><span class="ch-sub">Hires per month</span></div></div>
-        <div class="card-body"><div class="chart-wrap"><canvas id="recTrend" height="260"></canvas></div></div>
-      </div>
-      <div class="card">
-        <div class="card-head"><div><h3>Workload Heatmap</h3><span class="ch-sub">Interview load</span></div></div>
-        <div class="card-body">${heatHtml}</div>
-      </div>
-    </div>
-
-    <div class="grid g-2">
-      <div class="card">
-        <div class="card-head"><div><h3>Recruiter Leaderboard</h3><span class="ch-sub">Top performers by hires</span></div></div>
-        <div class="card-body">${leaderHtml}</div>
-      </div>
-      <div class="card">
-        <div class="card-head"><div><h3>Candidate Pipeline</h3><span class="ch-sub">This recruiter's active candidates</span></div></div>
-        <div class="card-body"><div class="chart-wrap"><canvas id="recPipeline" height="260"></canvas></div></div>
-      </div>
-    </div>`;
-
-  Charts.line(document.getElementById('recTrend'), { labels: DB.analytics.hiringTrend.labels, area: true, datasets: [{ label: 'Hires', data: r.monthlyTrend, color: Charts.PALETTE[0] }] });
-  const stageCounts = ['Applied', 'Screening', 'Assessment', 'Interview', 'Offer', 'Hired'].map(() => DB.int(2, 14));
-  Charts.horizontalBar(document.getElementById('recPipeline'), {
-    labels: ['Applied', 'Screening', 'Assessment', 'Interview', 'Offer', 'Hired'], data: stageCounts,
-    colors: Charts.PALETTE
-  });
-};
diff --git a/js/reports.js b/js/reports.js
deleted file mode 100644
index 6ee9e97..0000000
--- a/js/reports.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/* ============================================================
-   reports.js — Reports page (cards, charts, table, export)
-   ============================================================ */
-window.Views = window.Views || {};
-
-Views.reports = function () {
-  const a = DB.analytics;
-  const reportCards = [
-    { title: 'Total Hires (YTD)', val: a.hiringTrend.hires.reduce((s, v) => s + v, 0), icn: 'award', cls: 'i-green', sub: '+18% vs last year' },
-    { title: 'Total Applications', val: a.hiringTrend.applications.reduce((s, v) => s + v, 0).toLocaleString(), icn: 'users', cls: 'i-blue', sub: 'across all channels' },
-    { title: 'Avg. Time to Hire', val: '27 days', icn: 'clock', cls: 'i-teal', sub: '3 days faster' },
-    { title: 'Avg. Cost per Hire', val: '$4,280', icn: 'dollar', cls: 'i-amber', sub: 'within budget' }
-  ];
-
-  const deptRows = a.departments.map(d => {
-    const rate = Math.round((d.open ? d.apps / (d.open * 40) : 0.5) * 100);
-    return { dept: d.dept, open: d.open, apps: d.apps, hires: DB.int(1, 8), ttf: DB.int(28, 52), rate: Math.min(rate, 98) };
-  });
-
-  const table = UI.dataTable({
-    pageSize: 10,
-    rows: deptRows,
-    columns: [
-      { key: 'dept', label: 'Department', sortable: true, render: r => `<span class="cell-primary">${r.dept}</span>` },
-      { key: 'open', label: 'Open Roles', sortable: true, align: 'center' },
-      { key: 'apps', label: 'Applications', sortable: true, align: 'center', render: r => `<b>${r.apps}</b>` },
-      { key: 'hires', label: 'Hires', sortable: true, align: 'center' },
-      { key: 'ttf', label: 'Time to Fill', sortable: true, align: 'center', render: r => r.ttf + ' days' },
-      { key: 'rate', label: 'Fill Rate', sortable: true, render: r => `<div class="flex items-center gap-8"><div style="flex:1">${UI.pbar(r.rate)}</div><b style="width:38px;text-align:right">${r.rate}%</b></div>` }
-    ]
-  });
-
-  const reportTypes = [
-    { name: 'Hiring Funnel Report', desc: 'Conversion rates across each pipeline stage', icn: 'filter', cls: 'i-indigo' },
-    { name: 'Source Effectiveness', desc: 'ROI and quality by sourcing channel', icn: 'target', cls: 'i-teal' },
-    { name: 'Diversity & Inclusion', desc: 'Demographic breakdown of the pipeline', icn: 'users', cls: 'i-purple' },
-    { name: 'Recruiter Scorecard', desc: 'Individual performance metrics', icn: 'award', cls: 'i-amber' },
-    { name: 'Offer Analysis', desc: 'Acceptance rates and compensation trends', icn: 'file', cls: 'i-green' },
-    { name: 'Interview Analytics', desc: 'Interviewer load and feedback quality', icn: 'calendar', cls: 'i-blue' }
-  ];
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Reports</h1><p class="page-sub">Recruitment metrics and downloadable insights</p></div>
-        <div class="page-head-actions">
-          <select class="select"><option>Last 7 months</option><option>This quarter</option><option>This year</option></select>
-          <button class="btn btn-primary" onclick="UI.toast('Full report exported to PDF','success')">${UI.icon('download')} Export Report</button>
-        </div>
-      </div>
-
-      <div class="grid g-kpi mb-18">
-        ${reportCards.map(c => `<div class="kpi"><div class="kpi-top"><span class="kpi-label">${c.title}</span><span class="kpi-icn ${c.cls}">${UI.icon(c.icn)}</span></div><div class="kpi-value">${c.val}</div><div class="kpi-foot"><span class="kpi-foot-text">${c.sub}</span></div></div>`).join('')}
-      </div>
-
-      <div class="grid g-2 mb-18">
-        <div class="card">
-          <div class="card-head"><div><h3>Hiring Funnel</h3><span class="ch-sub">Stage-by-stage conversion</span></div>
-            <button class="btn btn-ghost btn-sm" onclick="UI.toast('Chart exported','info')">${UI.icon('download')}</button></div>
-          <div class="card-body"><div class="chart-wrap"><canvas id="rptFunnel" height="280"></canvas></div></div>
-        </div>
-        <div class="card">
-          <div class="card-head"><div><h3>Time to Hire vs Fill</h3><span class="ch-sub">Monthly trend (days)</span></div></div>
-          <div class="card-body"><div class="chart-wrap"><canvas id="rptTime" height="280"></canvas></div>
-            ${Charts.legend([{ label: 'Time to Hire', color: Charts.PALETTE[0] }, { label: 'Time to Fill', color: Charts.PALETTE[2] }])}</div>
-        </div>
-      </div>
-
-      <div class="card mb-18">
-        <div class="card-head"><div><h3>Department Performance</h3><span class="ch-sub">Hiring breakdown by team</span></div>
-          <button class="btn btn-secondary btn-sm" onclick="UI.toast('Table exported to CSV','success')">${UI.icon('download')} CSV</button></div>
-        ${table.html}
-      </div>
-
-      <div class="card">
-        <div class="card-head"><div><h3>Report Library</h3><span class="ch-sub">Generate a detailed report</span></div></div>
-        <div class="card-body"><div class="grid g-3">
-          ${reportTypes.map(r => `
-            <div class="card" style="box-shadow:none;background:var(--bg-sunken);cursor:pointer" onclick="UI.toast('Generating: ${r.name}','info')">
-              <div class="card-body">
-                <span class="kpi-icn ${r.cls}" style="margin-bottom:12px">${UI.icon(r.icn)}</span>
-                <div class="lr-title">${r.name}</div>
-                <div class="lr-sub" style="margin-top:4px">${r.desc}</div>
-                <div style="margin-top:12px;color:var(--primary);font-weight:600;font-size:13px">Generate ${UI.icon('chevron-right')}</div>
-              </div>
-            </div>`).join('')}
-        </div></div>
-      </div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      table.mount();
-      const funnel = [{ stage: 'Applied', v: 100 }, { stage: 'Screened', v: 62 }, { stage: 'Assessed', v: 41 }, { stage: 'Interviewed', v: 28 }, { stage: 'Offered', v: 14 }, { stage: 'Hired', v: 9 }];
-      Charts.bar(document.getElementById('rptFunnel'), {
-        labels: funnel.map(f => f.stage), data: funnel.map(f => f.v),
-        colors: Charts.PALETTE, yFmt: v => v + '%'
-      });
-      Charts.groupedBar(document.getElementById('rptTime'), {
-        labels: DB.analytics.hiringTrend.labels,
-        datasets: [
-          { label: 'Time to Hire', data: DB.analytics.timeToHire, color: Charts.PALETTE[0] },
-          { label: 'Time to Fill', data: DB.analytics.timeToFill, color: Charts.PALETTE[2] }
-        ], yFmt: v => v + 'd'
-      });
-    }
-  };
-};
diff --git a/js/settings.js b/js/settings.js
deleted file mode 100644
index 2db2378..0000000
--- a/js/settings.js
+++ /dev/null
@@ -1,193 +0,0 @@
-/* ============================================================
-   settings.js — Settings page with many tabs
-   ============================================================ */
-window.Views = window.Views || {};
-window.Settings = {};
-
-Views.settings = function () {
-  const tabs = ['General', 'Users', 'Roles', 'Permissions', 'Notifications', 'Email Templates', 'Career Portal', 'Branding', 'Security', 'Appearance'];
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Settings</h1><p class="page-sub">Configure your workspace and team preferences</p></div>
-        <div class="page-head-actions"><button class="btn btn-primary" onclick="UI.toast('Settings saved','success')">${UI.icon('check')} Save Changes</button></div>
-      </div>
-      <div class="tabs" id="setTabs">${tabs.map((t, i) => `<div class="tab ${i === 0 ? 'active' : ''}" data-tab="${i}">${t}</div>`).join('')}</div>
-      <div id="setPanes">
-        ${tabs.map((t, i) => `<div class="tab-pane ${i === 0 ? 'active' : ''}" data-pane="${i}">${Settings.pane(t)}</div>`).join('')}
-      </div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      const panes = document.querySelectorAll('#setPanes .tab-pane');
-      document.querySelectorAll('#setTabs .tab').forEach(tab => tab.onclick = () => {
-        document.querySelectorAll('#setTabs .tab').forEach(t => t.classList.remove('active'));
-        tab.classList.add('active');
-        panes.forEach(p => p.classList.remove('active'));
-        panes[+tab.dataset.tab].classList.add('active');
-        if (tab.textContent === 'Appearance') Settings._bindTheme();
-      });
-      Settings._bindTheme();
-    }
-  };
-};
-
-function toggleRow(title, desc, checked) {
-  return `<div class="setting-row"><div class="setting-info"><h4>${title}</h4><p>${desc}</p></div>
-    <label class="switch"><input type="checkbox" ${checked ? 'checked' : ''} onchange="UI.toast('Preference updated','success')"/><span class="switch-track"></span></label></div>`;
-}
-
-Settings.pane = function (name) {
-  if (name === 'General') {
-    return `<div class="card"><div class="card-body">
-      <div class="form-grid">
-        <div class="form-field"><label>Organization Name</label><input value="Utopia Brands Inc."/></div>
-        <div class="form-field"><label>Company Website</label><input value="https://utopiabrands.com"/></div>
-        <div class="form-field"><label>Industry</label><select><option>Consumer Goods</option><option>Technology</option><option>Retail</option></select></div>
-        <div class="form-field"><label>Company Size</label><select><option>201–500</option><option>51–200</option><option>500+</option></select></div>
-        <div class="form-field"><label>Default Time Zone</label><select><option>(GMT-08:00) Pacific Time</option><option>(GMT-05:00) Eastern Time</option><option>(GMT+00:00) UTC</option></select></div>
-        <div class="form-field"><label>Default Currency</label><select><option>USD ($)</option><option>EUR (€)</option><option>GBP (£)</option></select></div>
-      </div>
-      <div class="divider"></div>
-      ${toggleRow('Auto-archive stale jobs', 'Automatically close requisitions inactive for 90 days', true)}
-      ${toggleRow('Duplicate detection', 'Flag candidates that already exist in the system', true)}
-    </div></div>`;
-  }
-  if (name === 'Users') {
-    const rows = DB.users.map(u => `<tr>
-      <td><div class="user-cell">${UI.avatar(u.name, u.initials, u.color)}<div><div class="cell-primary">${u.name}</div><div class="cell-sub">${u.email}</div></div></div></td>
-      <td>${UI.badge(u.role, 'b-indigo')}</td>
-      <td>${UI.badge(u.status)}</td>
-      <td class="text-muted">${u.lastActive}</td>
-      <td style="text-align:right"><div class="row-actions"><button class="act-btn" onclick="UI.toast('Editing ${u.name}','info')">${UI.icon('edit')}</button><button class="act-btn danger" onclick="UI.toast('User removed','success')">${UI.icon('trash')}</button></div></td>
-    </tr>`).join('');
-    return `<div class="card">
-      <div class="card-head"><div><h3>Team Members</h3><span class="ch-sub">${DB.users.length} users</span></div>
-        <button class="btn btn-primary btn-sm" onclick="UI.toast('Invite sent','success')">${UI.icon('plus')} Invite User</button></div>
-      <div class="table-wrap"><table class="data"><thead><tr><th>User</th><th>Role</th><th>Status</th><th>Last Active</th><th style="text-align:right">Actions</th></tr></thead><tbody>${rows}</tbody></table></div>
-    </div>`;
-  }
-  if (name === 'Roles') {
-    return `<div class="card"><div class="card-head"><div><h3>Roles</h3><span class="ch-sub">Define access levels</span></div>
-      <button class="btn btn-primary btn-sm" onclick="UI.toast('New role dialog','info')">${UI.icon('plus')} Add Role</button></div>
-      <div class="card-body"><div class="list-tight">
-        ${DB.roles.map(r => `<div class="list-row">
-          <span class="kpi-icn i-purple" style="width:40px;height:40px;border-radius:11px">${UI.icon('users')}</span>
-          <div class="lr-main"><div class="lr-title">${r.name}</div><div class="lr-sub">${r.desc}</div></div>
-          <div class="lr-right"><div class="fw-600">${r.users} users</div><div class="lr-sub">${r.perms}</div></div>
-          <button class="act-btn" onclick="UI.toast('Editing ${r.name} role','info')">${UI.icon('edit')}</button>
-        </div>`).join('')}
-      </div></div></div>`;
-  }
-  if (name === 'Permissions') {
-    const modules = ['Jobs', 'Candidates', 'Interviews', 'Offers', 'Reports', 'Settings'];
-    const perms = ['View', 'Create', 'Edit', 'Delete'];
-    return `<div class="card"><div class="card-head"><div><h3>Permission Matrix</h3><span class="ch-sub">Recruiter role</span></div>
-      <select class="select"><option>Recruiter</option><option>Hiring Manager</option><option>Administrator</option></select></div>
-      <div class="table-wrap"><table class="data"><thead><tr><th>Module</th>${perms.map(p => `<th style="text-align:center">${p}</th>`).join('')}</tr></thead>
-      <tbody>${modules.map(m => `<tr><td class="cell-primary">${m}</td>${perms.map((p, i) => `<td style="text-align:center">
-        <label class="switch"><input type="checkbox" ${(i < 3 || m !== 'Settings') && !(m === 'Settings') ? 'checked' : ''} onchange="UI.toast('Permission updated','success')"/><span class="switch-track"></span></label></td>`).join('')}</tr>`).join('')}</tbody></table></div>
-    </div>`;
-  }
-  if (name === 'Notifications') {
-    return `<div class="card"><div class="card-body">
-      <div class="form-section-title" style="margin-top:0">Email Notifications</div>
-      ${toggleRow('New applications', 'Get notified when a candidate applies', true)}
-      ${toggleRow('Interview reminders', 'Reminders 30 minutes before interviews', true)}
-      ${toggleRow('Offer responses', 'When candidates accept or decline offers', true)}
-      ${toggleRow('Weekly digest', 'A summary of hiring activity every Monday', false)}
-      <div class="form-section-title">In-App Notifications</div>
-      ${toggleRow('Mentions', 'When a teammate @mentions you', true)}
-      ${toggleRow('Stage changes', 'When a candidate moves stages', false)}
-      ${toggleRow('Task assignments', 'When you are assigned a task', true)}
-    </div></div>`;
-  }
-  if (name === 'Email Templates') {
-    const templates = ['Application Received', 'Interview Invitation', 'Assessment Assignment', 'Offer Letter', 'Rejection — Post Interview', 'Reference Request'];
-    return `<div class="card"><div class="card-head"><div><h3>Email Templates</h3></div>
-      <button class="btn btn-primary btn-sm" onclick="UI.toast('New template','info')">${UI.icon('plus')} New Template</button></div>
-      <div class="card-body"><div class="list-tight">
-      ${templates.map(t => `<div class="list-row"><span class="kpi-icn i-blue" style="width:38px;height:38px;border-radius:10px">${UI.icon('mail')}</span>
-        <div class="lr-main"><div class="lr-title">${t}</div><div class="lr-sub">Last edited 3 days ago</div></div>
-        ${UI.badge('Active', 'b-green')}<button class="act-btn" onclick="UI.toast('Editing template','info')">${UI.icon('edit')}</button></div>`).join('')}
-      </div></div></div>`;
-  }
-  if (name === 'Career Portal') {
-    return `<div class="card"><div class="card-body">
-      <div class="form-grid">
-        <div class="form-field col-span-2"><label>Careers Page URL</label><input value="https://careers.utopiabrands.com"/></div>
-        <div class="form-field"><label>Page Headline</label><input value="Build the future with us"/></div>
-        <div class="form-field"><label>Primary CTA Text</label><input value="View Open Roles"/></div>
-      </div>
-      <div class="divider"></div>
-      ${toggleRow('Public job board', 'Make open roles visible to the public', true)}
-      ${toggleRow('Allow one-click apply', 'Let candidates apply with LinkedIn', true)}
-      ${toggleRow('Show salary ranges', 'Display compensation on job listings', false)}
-      ${toggleRow('Enable referrals', 'Employees can refer candidates', true)}
-    </div></div>`;
-  }
-  if (name === 'Branding') {
-    return `<div class="card"><div class="card-body">
-      <div class="setting-row"><div class="setting-info"><h4>Company Logo</h4><p>Displayed on career pages and emails</p></div>
-        <div class="flex items-center gap-12"><span class="brand-logo" style="width:48px;height:48px">UB</span><button class="btn btn-secondary btn-sm" onclick="UI.toast('Upload dialog','info')">Upload</button></div></div>
-      <div class="setting-row"><div class="setting-info"><h4>Brand Color</h4><p>Primary accent across the portal</p></div>
-        <div class="flex items-center gap-8">
-          ${['#004d43', '#ceff71', '#25e9a5', '#8e92ff', '#1a3134', '#eafff4'].map(c => `<span style="width:28px;height:28px;border-radius:8px;background:${c};cursor:pointer;border:2px solid var(--border)" onclick="UI.toast('Brand color updated','success')"></span>`).join('')}
-        </div></div>
-      <div class="form-grid" style="margin-top:16px">
-        <div class="form-field"><label>Email Footer</label><input value="Utopia Brands · San Francisco, CA"/></div>
-        <div class="form-field"><label>Support Email</label><input value="talent@utopiabrands.com"/></div>
-      </div>
-    </div></div>`;
-  }
-  if (name === 'Security') {
-    return `<div class="card"><div class="card-body">
-      ${toggleRow('Two-factor authentication', 'Require 2FA for all team members', true)}
-      ${toggleRow('Single Sign-On (SSO)', 'Enable SAML-based SSO login', false)}
-      ${toggleRow('IP allowlist', 'Restrict access to approved IP ranges', false)}
-      ${toggleRow('Audit logging', 'Track all data access and changes', true)}
-      <div class="form-grid" style="margin-top:16px">
-        <div class="form-field"><label>Session Timeout</label><select><option>30 minutes</option><option>1 hour</option><option>8 hours</option></select></div>
-        <div class="form-field"><label>Password Policy</label><select><option>Strong (12+ chars)</option><option>Medium (8+ chars)</option></select></div>
-      </div>
-      <div class="divider"></div>
-      <div class="setting-row"><div class="setting-info"><h4>Data Retention</h4><p>Auto-delete candidate data after set period</p></div>
-        <select class="select"><option>24 months</option><option>12 months</option><option>36 months</option></select></div>
-    </div></div>`;
-  }
-  if (name === 'Appearance') {
-    return `<div class="card"><div class="card-body">
-      <div class="form-section-title" style="margin-top:0">Theme</div>
-      <div class="grid g-3" style="margin-bottom:8px">
-        <div class="card theme-opt" data-theme-set="light" style="cursor:pointer;overflow:hidden">
-          <div style="height:80px;background:#f1f7f4;border-bottom:1px solid var(--border);display:flex"><div style="width:30%;background:#1a3134"></div><div style="flex:1;padding:10px"><div style="height:8px;background:#fff;border-radius:4px;margin-bottom:6px"></div><div style="height:8px;width:45%;background:#004d43;border-radius:4px"></div></div></div>
-          <div class="card-body" style="padding:12px"><div class="fw-600">Light</div><div class="lr-sub">Clean and bright</div></div>
-        </div>
-        <div class="card theme-opt" data-theme-set="dark" style="cursor:pointer;overflow:hidden">
-          <div style="height:80px;background:#0e1d1f;border-bottom:1px solid var(--border);display:flex"><div style="width:30%;background:#0a1618"></div><div style="flex:1;padding:10px"><div style="height:8px;background:#24403f;border-radius:4px;margin-bottom:6px"></div><div style="height:8px;width:45%;background:#ceff71;border-radius:4px"></div></div></div>
-          <div class="card-body" style="padding:12px"><div class="fw-600">Dark</div><div class="lr-sub">Easy on the eyes</div></div>
-        </div>
-        <div class="card theme-opt" data-theme-set="system" style="cursor:pointer;overflow:hidden">
-          <div style="height:80px;background:linear-gradient(90deg,#f1f7f4 50%,#0e1d1f 50%);border-bottom:1px solid var(--border)"></div>
-          <div class="card-body" style="padding:12px"><div class="fw-600">System</div><div class="lr-sub">Match OS setting</div></div>
-        </div>
-      </div>
-      <div class="divider"></div>
-      ${toggleRow('Compact mode', 'Reduce spacing for denser layouts', false)}
-      ${toggleRow('Show animations', 'Enable transitions and motion', true)}
-    </div></div>`;
-  }
-  return '';
-};
-
-Settings._bindTheme = function () {
-  document.querySelectorAll('.theme-opt').forEach(opt => opt.onclick = () => {
-    const mode = opt.dataset.themeSet;
-    if (mode === 'system') { App.setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); }
-    else App.setTheme(mode);
-    UI.toast('Theme updated to ' + mode, 'success');
-  });
-};
diff --git a/js/tasks.js b/js/tasks.js
deleted file mode 100644
index 8a70485..0000000
--- a/js/tasks.js
+++ /dev/null
@@ -1,131 +0,0 @@
-/* ============================================================
-   tasks.js — Recruitment Tasks (with saved searches & favorites)
-   ============================================================ */
-window.Views = window.Views || {};
-window.Tasks = {};
-
-Views.tasks = function () {
-  const state = { filter: 'All' };
-
-  function render() {
-    const el = document.getElementById('taskList');
-    if (!el) return;
-    let list = DB.tasks;
-    if (state.filter === 'Open') list = list.filter(t => !t.done);
-    else if (state.filter === 'Completed') list = list.filter(t => t.done);
-    else if (state.filter === 'Overdue') list = list.filter(t => !t.done && t.due < new Date('2026-07-09'));
-    else if (['High', 'Medium', 'Low'].includes(state.filter)) list = list.filter(t => t.priority === state.filter);
-
-    if (!list.length) { el.innerHTML = `<div class="empty-state">${UI.icon('check-square')}<h3>All caught up</h3><p>No tasks in this view.</p></div>`; return; }
-    const prCls = { High: 'b-red', Medium: 'b-amber', Low: 'b-gray' };
-    el.innerHTML = list.map(t => {
-      const overdue = !t.done && t.due < new Date('2026-07-09');
-      return `<div class="list-row" style="align-items:center">
-        <span class="checkbox ${t.done ? 'on' : ''}" data-id="${t.id}">${UI.icon('check')}</span>
-        <div class="lr-main" style="cursor:pointer" onclick="Tasks.open('${t.id}')">
-          <div class="lr-title" style="${t.done ? 'text-decoration:line-through;color:var(--text-3)' : ''}">${t.title}</div>
-          <div class="lr-sub">${UI.icon('users')} ${t.assignee} · ${t.type}</div>
-        </div>
-        <div class="lr-right">
-          ${UI.badge(t.priority, prCls[t.priority])}
-          <div class="lr-sub" style="margin-top:4px;${overdue ? 'color:var(--danger);font-weight:600' : ''}">${overdue ? 'Overdue · ' : 'Due '}${DB.fmtShort(t.due)}</div>
-        </div>
-      </div>`;
-    }).join('');
-    el.querySelectorAll('.checkbox').forEach(chk => chk.onclick = e => {
-      e.stopPropagation();
-      const t = DB.tasks.find(x => x.id === chk.dataset.id);
-      t.done = !t.done; render(); App.updateBadges();
-      UI.toast(t.done ? 'Task completed' : 'Task reopened', t.done ? 'success' : 'info');
-    });
-  }
-  Tasks._render = render;
-
-  const openCount = DB.tasks.filter(t => !t.done).length;
-  const overdueCount = DB.tasks.filter(t => !t.done && t.due < new Date('2026-07-09')).length;
-  const filters = ['All', 'Open', 'Completed', 'Overdue', 'High', 'Medium', 'Low'];
-
-  // saved searches sidebar
-  const savedHtml = DB.savedSearches.map(s => `
-    <div class="list-row" style="cursor:pointer" onclick="Router.go('candidates')">
-      <span class="kpi-icn i-indigo" style="width:36px;height:36px;border-radius:9px">${UI.icon('bookmark')}</span>
-      <div class="lr-main"><div class="lr-title">${s.name}</div><div class="lr-sub">${s.filters}</div></div>
-      <span class="badge b-gray badge-plain">${s.count}</span>
-    </div>`).join('');
-
-  const html = `
-    <div class="page">
-      <div class="page-head">
-        <div><h1 class="page-title">Tasks</h1><p class="page-sub">${openCount} open · ${overdueCount} overdue</p></div>
-        <div class="page-head-actions"><button class="btn btn-primary" onclick="Tasks.add()">${UI.icon('plus')} New Task</button></div>
-      </div>
-      <div class="grid g-2-1">
-        <div class="card">
-          <div class="card-body" style="padding-bottom:0">
-            <div class="seg" id="taskSeg">${filters.map((f, i) => `<button class="${i === 0 ? 'active' : ''}" data-f="${f}">${f}</button>`).join('')}</div>
-          </div>
-          <div class="card-body"><div class="list-tight" id="taskList"></div></div>
-        </div>
-        <div class="card" style="align-self:start">
-          <div class="card-head"><div><h3>Saved Searches</h3><span class="ch-sub">Quick candidate filters</span></div>
-            <button class="act-btn" onclick="UI.toast('New saved search','info')">${UI.icon('plus')}</button></div>
-          <div class="card-body"><div class="list-tight">${savedHtml}</div></div>
-        </div>
-      </div>
-    </div>`;
-
-  return {
-    html,
-    onMount() {
-      render();
-      document.querySelectorAll('#taskSeg button').forEach(b => b.onclick = () => {
-        document.querySelectorAll('#taskSeg button').forEach(x => x.classList.remove('active'));
-        b.classList.add('active'); state.filter = b.dataset.f; render();
-      });
-    }
-  };
-};
-
-Tasks.open = function (id) {
-  const t = DB.tasks.find(x => x.id === id);
-  const c = DB.getCandidate(t.candidateId);
-  UI.modal({
-    title: t.title, subtitle: t.id + ' · ' + t.type,
-    body: `<div class="info-grid" style="margin-bottom:16px">
-      <div class="info-item"><div class="il">Assignee</div><div class="iv">${t.assignee}</div></div>
-      <div class="info-item"><div class="il">Priority</div><div class="iv">${t.priority}</div></div>
-      <div class="info-item"><div class="il">Due Date</div><div class="iv">${DB.fmtDate(t.due)}</div></div>
-      <div class="info-item"><div class="il">Status</div><div class="iv">${t.done ? 'Completed' : 'Open'}</div></div>
-      ${c ? `<div class="info-item"><div class="il">Candidate</div><div class="iv">${c.name}</div></div>` : ''}
-    </div>
-    <div class="form-field"><label>Notes</label><textarea placeholder="Add task notes…"></textarea></div>`,
-    footer: `<button class="btn btn-secondary" onclick="UI.closeModal()">Close</button>
-      ${c ? `<button class="btn btn-secondary" onclick="UI.closeModal();Candidates.openProfile('${c.id}')">View Candidate</button>` : ''}
-      <button class="btn btn-primary" onclick="UI.closeModal();Tasks._complete('${id}')">${UI.icon('check')} Mark Complete</button>`
-  });
-};
-Tasks._complete = function (id) { const t = DB.tasks.find(x => x.id === id); t.done = true; Tasks._render(); App.updateBadges(); UI.toast('Task completed', 'success'); };
-
-Tasks.add = function () {
-  const opt = arr => arr.map(o => `<option>${o}</option>`).join('');
-  UI.modal({
-    title: 'New Task', subtitle: 'Create a recruitment task',
-    body: `<form id="taskForm" novalidate><div class="form-grid">
-      <div class="form-field col-span-2"><label>Task Title <span class="req">*</span></label><input name="title" placeholder="e.g. Screen candidate"/><span class="field-error">Required</span></div>
-      <div class="form-field"><label>Priority</label><select name="priority"><option>High</option><option selected>Medium</option><option>Low</option></select></div>
-      <div class="form-field"><label>Type</label><select name="type">${opt(['Interview', 'Review', 'Offer', 'Admin'])}</select></div>
-      <div class="form-field"><label>Assignee</label><select name="assignee">${opt(DB.recruiters.map(r => r.name))}</select></div>
-      <div class="form-field"><label>Due Date</label><input name="due" type="date"/></div>
-    </div></form>`,
-    footer: `<button class="btn btn-secondary" onclick="UI.closeModal()">Cancel</button><button class="btn btn-primary" onclick="Tasks._save()">${UI.icon('check')} Create Task</button>`
-  });
-};
-Tasks._save = function () {
-  const form = document.getElementById('taskForm');
-  UI.clearErrors(form);
-  const f = Object.fromEntries(new FormData(form));
-  if (!f.title.trim()) { UI.fieldError(form.querySelector('[name=title]'), 'Required'); return; }
-  DB.tasks.unshift({ id: 'TSK-' + (50001 + DB.tasks.length), title: f.title, candidateId: null, priority: f.priority, due: f.due ? new Date(f.due) : new Date('2026-07-16'), assignee: f.assignee, done: false, type: f.type });
-  UI.closeModal(); Tasks._render(); App.updateBadges();
-  UI.toast('Task created', 'success');
-};
diff --git a/js/ui.js b/js/ui.js
deleted file mode 100644
index 97ad730..0000000
--- a/js/ui.js
+++ /dev/null
@@ -1,252 +0,0 @@
-/* ============================================================
-   ui.js — Reusable UI primitives & helpers
-   Exposes global `UI`
-   ============================================================ */
-(function () {
-  'use strict';
-
-  const ICONS = {
-    'user-plus': '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/>',
-    'calendar': '<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>',
-    'check': '<polyline points="20 6 9 17 4 12"/>',
-    'check-circle': '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>',
-    'x': '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>',
-    'x-circle': '<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>',
-    'file': '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>',
-    'star': '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
-    'message': '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
-    'info': '<circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>',
-    'alert': '<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>',
-    'eye': '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>',
-    'edit': '<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z"/>',
-    'trash': '<polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>',
-    'more': '<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>',
-    'plus': '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',
-    'download': '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>',
-    'filter': '<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>',
-    'clock': '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
-    'mail': '<path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><polyline points="22,6 12,13 2,6"/>',
-    'phone': '<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.98.36 1.94.7 2.85a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.87.57 2.85.7A2 2 0 0 1 22 16.92z"/>',
-    'map': '<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>',
-    'briefcase': '<rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>',
-    'trending-up': '<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>',
-    'trending-down': '<polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/>',
-    'users': '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
-    'award': '<circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/>',
-    'dollar': '<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>',
-    'target': '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',
-    'send': '<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>',
-    'video': '<polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/>',
-    'search': '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>',
-    'chevron-left': '<polyline points="15 18 9 12 15 6"/>',
-    'chevron-right': '<polyline points="9 18 15 12 9 6"/>',
-    'refresh': '<polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>',
-    'copy': '<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>',
-    'upload': '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>',
-    'linkedin': '<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>',
-    'inbox': '<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>',
-    'sparkles': '<path d="M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2z"/><path d="M19 3v4M21 5h-4M5 17v4M7 19H3"/>',
-    'zap': '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
-    'grid': '<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>',
-    'bookmark': '<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>',
-    'paperclip': '<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>',
-    'external': '<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>',
-    'shield': '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
-    'lock': '<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
-    'flame': '<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>',
-    'bell': '<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>',
-    'layers': '<polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>',
-    'list': '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>',
-    'check-square': '<polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>',
-    'arrow-right': '<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>'
-  };
-
-  function icon(name, cls) { return `<svg class="${cls || ''}" viewBox="0 0 24 24">${ICONS[name] || ICONS['info']}</svg>`; }
-
-  function avatar(name, initials, color, cls) {
-    const bg = color || DB.avatarColor(name || '');
-    const init = initials || DB.initials(name || '?');
-    return `<span class="avatar ${cls || ''}" style="background:${bg}">${init}</span>`;
-  }
-
-  // ---------- badge helpers ----------
-  const statusMap = {
-    'Open': 'b-green', 'Closed': 'b-gray', 'On Hold': 'b-amber', 'Draft': 'b-blue',
-    'Applied': 'b-blue', 'Screening': 'b-purple', 'Assessment': 'b-amber', 'Interview': 'b-indigo',
-    'Offer': 'b-teal', 'Hired': 'b-green', 'Rejected': 'b-red',
-    'Scheduled': 'b-blue', 'Completed': 'b-green', 'Cancelled': 'b-red', 'No Show': 'b-amber',
-    'Sent': 'b-blue', 'Accepted': 'b-green', 'Negotiating': 'b-amber', 'Declined': 'b-red', 'Expired': 'b-gray',
-    'In Progress': 'b-amber', 'Pending': 'b-gray', 'Active': 'b-green', 'Invited': 'b-amber',
-    'Strong Hire': 'b-green', 'Hire': 'b-teal', 'Lean Hire': 'b-amber', 'No Hire': 'b-red'
-  };
-  function badge(text, cls) { return `<span class="badge ${cls || statusMap[text] || 'b-gray'}">${text}</span>`; }
-
-  function scoreChip(score) {
-    // Theme tokens, not fixed hex — the old greens/blues dropped to ~2.6:1 on dark cards.
-    const color = score >= 85 ? 'var(--success)' : score >= 70 ? 'var(--warning)' : score >= 55 ? 'var(--info)' : 'var(--danger)';
-    return `<span class="score"><span class="score-ring" style="--pct:${score};--sc-color:${color}"><span style="color:${color}">${score}</span></span></span>`;
-  }
-
-  function pbar(pct, cls) {
-    const c = pct >= 80 ? 'green' : pct >= 50 ? '' : pct >= 30 ? 'amber' : 'red';
-    return `<div class="pbar"><div class="pbar-fill ${cls || c}" style="width:${pct}%"></div></div>`;
-  }
-
-  function avatarStack(names, max) {
-    max = max || 3;
-    const shown = names.slice(0, max);
-    const extra = names.length - max;
-    let html = '<div class="avatar-stack">';
-    shown.forEach(n => html += avatar(n, DB.initials(n)));
-    if (extra > 0) html += `<span class="more-count">+${extra}</span>`;
-    return html + '</div>';
-  }
-
-  // ---------- Modal ----------
-  function modal({ title, subtitle, body, footer, size }) {
-    const root = document.getElementById('modalRoot');
-    root.innerHTML = `
-      <div class="modal-backdrop" data-close></div>
-      <div class="modal ${size || ''}" role="dialog" aria-modal="true">
-        <div class="modal-head">
-          <div><h2>${title}</h2>${subtitle ? `<p>${subtitle}</p>` : ''}</div>
-          <button class="modal-close" data-close aria-label="Close">${icon('x')}</button>
-        </div>
-        <div class="modal-body">${body}</div>
-        ${footer ? `<div class="modal-foot">${footer}</div>` : ''}
-      </div>`;
-    root.classList.add('open');
-    document.body.style.overflow = 'hidden';
-    root.querySelectorAll('[data-close]').forEach(el => el.addEventListener('click', closeModal));
-    return root;
-  }
-  function closeModal() {
-    const root = document.getElementById('modalRoot');
-    root.classList.remove('open');
-    root.innerHTML = '';
-    document.body.style.overflow = '';
-  }
-
-  // ---------- Toast ----------
-  function toast(msg, type = 'info', title) {
-    const root = document.getElementById('toastRoot');
-    const cfg = {
-      success: { i: 'check-circle', c: 'i-green', t: 'Success' },
-      error: { i: 'x-circle', c: 'i-red', t: 'Error' },
-      info: { i: 'info', c: 'i-blue', t: 'Notice' },
-      warning: { i: 'alert', c: 'i-amber', t: 'Warning' }
-    }[type] || { i: 'info', c: 'i-blue', t: 'Notice' };
-    const el = document.createElement('div');
-    el.className = 'toast';
-    el.innerHTML = `
-      <span class="toast-icn ${cfg.c}">${icon(cfg.i)}</span>
-      <div class="toast-body"><div class="toast-title">${title || cfg.t}</div><div class="toast-msg">${msg}</div></div>
-      <button class="toast-close">${icon('x')}</button>`;
-    root.appendChild(el);
-    const remove = () => { el.classList.add('out'); setTimeout(() => el.remove(), 300); };
-    el.querySelector('.toast-close').onclick = remove;
-    setTimeout(remove, 4200);
-  }
-
-  // ---------- Sortable / paginated table ----------
-  function dataTable(config) {
-    // config: { columns:[{key,label,sortable,render,align}], rows, pageSize, empty }
-    const state = { sortKey: null, sortDir: 1, page: 1, rows: config.rows };
-    const pageSize = config.pageSize || 10;
-    const id = 'tbl_' + Math.random().toString(36).slice(2, 8);
-
-    function sorted() {
-      let r = state.rows;
-      if (state.sortKey) {
-        const col = config.columns.find(c => c.key === state.sortKey);
-        r = [...r].sort((a, b) => {
-          let va = col.sortValue ? col.sortValue(a) : a[state.sortKey];
-          let vb = col.sortValue ? col.sortValue(b) : b[state.sortKey];
-          if (typeof va === 'string') { va = va.toLowerCase(); vb = (vb || '').toLowerCase(); }
-          if (va < vb) return -1 * state.sortDir;
-          if (va > vb) return 1 * state.sortDir;
-          return 0;
-        });
-      }
-      return r;
-    }
-    function render() {
-      const rows = sorted();
-      const total = rows.length;
-      const pages = Math.max(1, Math.ceil(total / pageSize));
-      if (state.page > pages) state.page = pages;
-      const start = (state.page - 1) * pageSize;
-      const pageRows = rows.slice(start, start + pageSize);
-
-      const thead = config.columns.map(c => {
-        const sortedCls = state.sortKey === c.key ? (state.sortDir === 1 ? 'sorted-asc' : 'sorted-desc') : '';
-        const ind = c.sortable ? `<span class="sort-ind">${state.sortKey === c.key ? (state.sortDir === 1 ? '▲' : '▼') : '⇅'}</span>` : '';
-        return `<th class="${c.sortable ? 'sortable ' : ''}${sortedCls}" data-sort="${c.key}" style="text-align:${c.align || 'left'}">${c.label}${ind}</th>`;
-      }).join('');
-
-      let tbody;
-      if (!pageRows.length) {
-        tbody = `<tr><td colspan="${config.columns.length}">
-          <div class="empty-state">${icon('search')}<h3>No results found</h3><p>${config.empty || 'Try adjusting your filters or search.'}</p></div></td></tr>`;
-      } else {
-        tbody = pageRows.map(row => `<tr>${config.columns.map(c =>
-          `<td style="text-align:${c.align || 'left'}">${c.render ? c.render(row) : (row[c.key] ?? '')}</td>`).join('')}</tr>`).join('');
-      }
-
-      const from = total ? start + 1 : 0, to = Math.min(start + pageSize, total);
-      const pager = pageButtons(state.page, pages);
-
-      const el = document.getElementById(id);
-      el.innerHTML = `
-        <div class="table-wrap"><table class="data">
-          <thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table></div>
-        <div class="pagination">
-          <span class="page-info">Showing <b>${from}–${to}</b> of <b>${total}</b></span>
-          <div class="page-controls">${pager}</div>
-        </div>`;
-
-      el.querySelectorAll('th.sortable').forEach(th => th.onclick = () => {
-        const k = th.dataset.sort;
-        if (state.sortKey === k) state.sortDir *= -1; else { state.sortKey = k; state.sortDir = 1; }
-        render();
-      });
-      el.querySelectorAll('[data-page]').forEach(b => b.onclick = () => {
-        const p = b.dataset.page;
-        if (p === 'prev') state.page = Math.max(1, state.page - 1);
-        else if (p === 'next') state.page = Math.min(pages, state.page + 1);
-        else state.page = +p;
-        render();
-      });
-      if (config.onRender) config.onRender(el);
-    }
-    function pageButtons(cur, pages) {
-      let btns = `<button class="page-btn" data-page="prev" ${cur === 1 ? 'disabled' : ''}>${icon('chevron-left')}</button>`;
-      const list = [];
-      for (let i = 1; i <= pages; i++) {
-        if (i === 1 || i === pages || Math.abs(i - cur) <= 1) list.push(i);
-        else if (list[list.length - 1] !== '…') list.push('…');
-      }
-      list.forEach(i => btns += i === '…' ? `<span class="page-btn" style="cursor:default">…</span>` : `<button class="page-btn ${i === cur ? 'active' : ''}" data-page="${i}">${i}</button>`);
-      btns += `<button class="page-btn" data-page="next" ${cur === pages ? 'disabled' : ''}>${icon('chevron-right')}</button>`;
-      return btns;
-    }
-    // public API
-    return {
-      html: `<div id="${id}" class="dt"></div>`,
-      mount: render,
-      update(rows) { state.rows = rows; state.page = 1; render(); }
-    };
-  }
-
-  function fieldError(inputEl, msg) {
-    inputEl.classList.add('err');
-    let err = inputEl.parentElement.querySelector('.field-error');
-    if (err) { err.textContent = msg; err.classList.add('show'); }
-  }
-  function clearErrors(form) {
-    form.querySelectorAll('.err').forEach(e => e.classList.remove('err'));
-    form.querySelectorAll('.field-error').forEach(e => e.classList.remove('show'));
-  }
-
-  window.UI = { icon, avatar, badge, scoreChip, pbar, avatarStack, modal, closeModal, toast, dataTable, fieldError, clearErrors, ICONS };
-})();
diff --git a/tools/check_evidence_citations.py b/tools/check_evidence_citations.py
index 353991a..b494496 100755
--- a/tools/check_evidence_citations.py
+++ b/tools/check_evidence_citations.py
@@ -37,11 +37,42 @@ from __future__ import annotations
 
 import os
 import re
+import subprocess
 import sys
 
 REPO = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 DOCS = os.path.join(REPO, 'docs', 'architecture')
 
+# --- prototype evidence outlives the prototype ------------------------------
+# The React migration deletes the browser-only prototype (`index.html`, `js/`,
+# and moves `css/styles.css` into the web app). Around 600 citations in this
+# package are evidence *about that prototype* — they were true when written and
+# stay true of it forever, so they must not rot just because the working tree
+# moved on. Resolve those paths from the `prototype-final` tag, which marks the
+# last commit where the prototype existed intact.
+#
+# If the tag is absent (a fresh clone that never fetched tags, or a checkout
+# from before the migration) this falls back to the working tree, so the script
+# keeps working either way.
+LEGACY_TAG = 'prototype-final'
+LEGACY_PREFIXES = ('js/', 'index.html', 'css/', 'devserver.py')
+
+
+def is_legacy(path: str) -> bool:
+    return path.startswith(LEGACY_PREFIXES)
+
+
+def read_from_tag(path: str) -> list[str] | None:
+    """Contents of `path` at LEGACY_TAG, or None if unavailable."""
+    try:
+        out = subprocess.run(
+            ['git', '-C', REPO, 'show', f'{LEGACY_TAG}:{path}'],
+            capture_output=True, check=True,
+        )
+    except (OSError, subprocess.CalledProcessError):
+        return None
+    return out.stdout.decode('utf-8', 'replace').split('\n')
+
 # Only extensions that exist in this repository today. Citations to planned files
 # (.sql migrations, .tsx components, .yml workflows) are intentionally not matched —
 # they cannot be verified and are design intent, not evidence.
@@ -158,15 +189,28 @@ def main() -> int:
         return 1
 
     cache: dict[str, list[str] | None] = {}
+    from_tag: set[str] = set()
+
+    def read_worktree(path: str) -> list[str] | None:
+        try:
+            with open(os.path.join(REPO, path), encoding='utf-8') as fh:
+                return fh.read().split('\n')
+        except OSError:
+            return None
 
     def source(path: str) -> list[str] | None:
         if path not in cache:
-            full = os.path.join(REPO, path)
-            try:
-                with open(full, encoding='utf-8') as fh:
-                    cache[path] = fh.read().split('\n')
-            except OSError:
-                cache[path] = None
+            if is_legacy(path):
+                # Prefer the tagged prototype so these citations are stable whether
+                # or not the files still exist in the tree.
+                tagged = read_from_tag(path)
+                if tagged is not None:
+                    from_tag.add(path)
+                    cache[path] = tagged
+                else:
+                    cache[path] = read_worktree(path)
+            else:
+                cache[path] = read_worktree(path)
         return cache[path]
 
     docs = []
@@ -241,13 +285,20 @@ def main() -> int:
         f'{claim_checked} claim/anchor pairings checked '
         f'({len(CLAIM_RULES)} rules)'
     )
+    if from_tag:
+        print(
+            f'{len(from_tag)} prototype file(s) resolved from `{LEGACY_TAG}` '
+            f'rather than the working tree: {", ".join(sorted(from_tag))}'
+        )
     if problems:
         print(f'\n{len(problems)} bad citation(s):\n', file=sys.stderr)
         for p in problems:
             print(f'  {p}', file=sys.stderr)
         print(
             '\nFix the citation, or update ANCHORS in this script if the source moved '
-            'deliberately.',
+            f'deliberately. Prototype paths ({", ".join(LEGACY_PREFIXES)}) resolve from '
+            f'the `{LEGACY_TAG}` tag, so moving or deleting them in the working tree '
+            'does not affect this check.',
             file=sys.stderr,
         )
         return 1