feat: implement robust security middleware, authentication system, and frontend UI components

.env.example

@@ -1,24 +1,49 @@
-# Flask app
-ICH_APP_DEBUG=1
+# ICH Screening Application - Environment Configuration
+# STEP 1: Copy this file to .env
+# STEP 2: Update values below with your configuration
+# STEP 3: DO NOT commit .env to version control!
+
+# ════════════════════════════════════════════════════════════════════════════
+# APPLICATION & DEBUG
+# ════════════════════════════════════════════════════════════════════════════
+FLASK_ENV=production
+FLASK_DEBUG=False
+ICH_APP_DEBUG=False
 ICH_APP_PORT=7860
-ICH_SECRET_KEY=change-me-in-production
 
-# Upload limits (MB)
+# Secret key for Flask sessions - MUST be set in production
+# Generate with: python -c "import secrets; print(secrets.token_hex(32))"
+SECRET_KEY=CHANGE_ME_IN_PRODUCTION_USE_COMMAND_ABOVE
+
+# ════════════════════════════════════════════════════════════════════════════
+# DATABASE - NEON POSTGRESQL (REQUIRED)
+# ════════════════════════════════════════════════════════════════════════════
+# Your connection string from Neon
+DATABASE_URL=postgresql://neondb_owner:npg_0hvkoPnReMz9@ep-rough-feather-aojsbj8l-pooler.c-2.ap-southeast-1.aws.neon.tech/neondb?sslmode=require&channel_binding=require
+
+# ════════════════════════════════════════════════════════════════════════════
+# FILE UPLOADS & STORAGE
+# ════════════════════════════════════════════════════════════════════════════
 ICH_MAX_UPLOAD_MB=2048
+UPLOAD_BASE_DIR=uploads
 
-# Runtime model selection
-# Values: ensemble | best | 0 | 1 | 2 | 3 | 4
+# ════════════════════════════════════════════════════════════════════════════
+# MODEL CONFIGURATION
+# ════════════════════════════════════════════════════════════════════════════
+# Fold selection: ensemble | best | 0 | 1 | 2 | 3 | 4
 ICH_FOLD_SELECTION=ensemble
 
-# Local mode enables server-side directory scan route
-ICH_LOCAL_MODE=1
+# Hugging Face model repository
+ICH_HF_MODEL_REPO=HarshCode/eff_b4_brain
+ICH_HF_TOKEN=
 
-# Logging level
-# Values: DEBUG | INFO | WARNING | ERROR
+# ════════════════════════════════════════════════════════════════════════════
+# LOGGING & MONITORING
+# ════════════════════════════════════════════════════════════════════════════
 ICH_LOG_LEVEL=INFO
+ICH_LOCAL_MODE=True
 
-# Hugging Face publishing
-# Create token: https://huggingface.co/settings/tokens
-HF_TOKEN=
-# Example: your-username/ich-b4-model
-HF_REPO_ID=
+# ════════════════════════════════════════════════════════════════════════════
+# RENDER.COM DEPLOYMENT (optional)
+# ════════════════════════════════════════════════════════════════════════════
+# RENDER_EXTERNAL_HOSTNAME is set automatically by Render

.gitignore

@@ -63,3 +63,5 @@ datasets/
 Thumbs.db
 .vscode/
 .idea/
+
+doc_tem/

app_new.py

@@ -0,0 +1,972 @@
+"""
+ICH Screening Web Application with User Authentication & Data Privacy
+======================================================================
+Features:
+  1. User authentication (login/register)
+  2. User-specific data storage and privacy
+  3. Upload .dcm files -> run AI model -> display screening report
+  4. Browse past screening reports (user's data only)
+  5. View execution logs (user's logs only)
+  6. Production-ready security
+
+Run:
+    python app.py (gunicorn in production)
+    Open http://127.0.0.1:7860
+"""
+
+# pyright: reportCallIssue=false, reportArgumentType=false, reportUnknownArgumentType=false, reportUnknownParameterType=false, reportUnknownVariableType=false, reportUnknownMemberType=false, reportMissingParameterType=false, reportAttributeAccessIssue=false, reportMissingTypeStubs=false, reportDeprecated=false
+
+from __future__ import annotations
+import run_interface as ri
+import datetime
+import json
+import logging
+import os
+import shutil
+import sys
+import tempfile
+import threading
+import time
+import uuid
+import zipfile
+import math
+from dataclasses import dataclass
+from pathlib import Path
+from typing import Any
+
+try:
+    from dotenv import load_dotenv
+except Exception:
+    load_dotenv = None
+
+if load_dotenv:
+    load_dotenv()
+
+hf_hub_download: Any = None
+try:
+    import huggingface_hub
+    hf_hub_download = getattr(huggingface_hub, "hf_hub_download", None)
+except Exception:
+    hf_hub_download = None
+
+try:
+    import blackbox_recorder as bbr
+except Exception:
+    class _NoopRecorder:
+        def configure(self, **_kwargs: Any) -> None:
+            return None
+        def start(self) -> None:
+            return None
+        def stop(self) -> None:
+            return None
+        def save_report(self, _path: str) -> None:
+            return None
+        def save_json(self, _path: str) -> None:
+            return None
+    bbr = _NoopRecorder()
+
+from flask import (
+    Flask, abort, flash, g, jsonify, redirect, render_template, request,
+    send_from_directory, url_for
+)
+from werkzeug.utils import secure_filename
+from flask_login import current_user, login_required
+
+# Import new security and auth modules
+from models import db, User, ScreeningReport
+from auth_utils import init_auth, log_audit, get_client_ip
+from auth_routes import auth_bp
+from data_isolation import UserDataManager
+from security import (
+    init_security, sanitize_filename, check_upload_rate_limit
+)
+
+# ══════════════════════════════════════════════════════════════════════════
+#  PATH CONFIGURATION
+# ══════════════════════════════════════════════════════════════════════════
+
+BASE_DIR = Path(__file__).resolve().parent
+MODEL_DIR = BASE_DIR / "download_imp"
+CALIB_JSON = MODEL_DIR / "calibration_params.json"
+NORM_JSON = MODEL_DIR / "normalization_stats.json"
+LOGS_DIR = BASE_DIR / "logs"
+UPLOAD_BASE_DIR = os.environ.get("UPLOAD_BASE_DIR", str(BASE_DIR / "uploads"))
+
+# ══════════════════════════════════════════════════════════════════════════
+#  CONFIGURATION
+# ══════════════════════════════════════════════════════════════════════════
+
+def _env_bool(name: str, default: bool) -> bool:
+    raw = os.environ.get(name)
+    return raw.strip().lower() in ("1", "true", "yes", "on") if raw else default
+
+def _env_int(name: str, default: int, *, minimum: int | None = None) -> int:
+    raw = os.environ.get(name)
+    if not raw:
+        return default
+    try:
+        value = int(raw)
+        return value if minimum is None or value >= minimum else default
+    except ValueError:
+        return default
+
+APP_DEBUG = _env_bool("ICH_APP_DEBUG", False)
+APP_PORT = _env_int("ICH_APP_PORT", _env_int("PORT", 7860, minimum=1), minimum=1)
+MAX_UPLOAD_MB = _env_int("ICH_MAX_UPLOAD_MB", 2048, minimum=1)
+LOG_LEVEL_NAME = os.environ.get("ICH_LOG_LEVEL", "INFO").strip().upper()
+LOG_LEVEL = getattr(logging, LOG_LEVEL_NAME, logging.INFO)
+SECRET_KEY = os.environ.get("SECRET_KEY", os.environ.get("ICH_SECRET_KEY", "")).strip()
+DATABASE_URL = os.environ.get("DATABASE_URL", "").strip()
+HF_MODEL_REPO = os.environ.get("ICH_HF_MODEL_REPO", "").strip()
+HF_TOKEN = os.environ.get("ICH_HF_TOKEN", "").strip()
+LOCAL_MODE = _env_bool("ICH_LOCAL_MODE", True)
+
+# ══════════════════════════════════════════════════════════════════════════
+#  FLASK APP SETUP
+# ══════════════════════════════════════════════════════════════════════════
+
+app = Flask(__name__, template_folder="templates", static_folder="static")
+
+# Configuration
+app.config.update(
+    MAX_CONTENT_LENGTH=MAX_UPLOAD_MB * 1024 * 1024,
+    SECRET_KEY=SECRET_KEY or os.urandom(32).hex(),
+    DEBUG=APP_DEBUG and os.environ.get("FLASK_ENV") == "development",
+    SQLALCHEMY_DATABASE_URI=DATABASE_URL or "sqlite:///ich_app.db",
+    SQLALCHEMY_TRACK_MODIFICATIONS=False,
+    SESSION_COOKIE_SECURE=not APP_DEBUG,
+    SESSION_COOKIE_HTTPONLY=True,
+    SESSION_COOKIE_SAMESITE="Lax",
+    PERMANENT_SESSION_LIFETIME=datetime.timedelta(days=30),
+)
+
+# Initialize extensions
+db.init_app(app)
+init_auth(app)
+init_security(app)
+
+# Register blueprints
+app.register_blueprint(auth_bp)
+
+# ══════════════════════════════════════════════════════════════════════════
+#  LOGGING
+# ══════════════════════════════════════════════════════════════════════════
+
+logging.basicConfig(
+    level=LOG_LEVEL,
+    format="%(asctime)s | %(levelname)s | %(name)s | %(message)s",
+)
+logger = logging.getLogger("ich_app")
+
+# ══════════════════════════════════════════════════════════════════════════
+#  DATABASE INITIALIZATION
+# ══════════════════════════════════════════════════════════════════════════
+
+def init_db():
+    """Initialize database tables"""
+    with app.app_context():
+        db.create_all()
+        logger.info("Database initialized")
+
+# ══════════════════════════════════════════════════════════════════════════
+#  MODEL & INFERENCE STATE
+# ══════════════════════════════════════════════════════════════════════════
+
+LOGS_DIR.mkdir(parents=True, exist_ok=True)
+bbr.configure(
+    include=["run_interface", "app"],
+    capture_args=True,
+    capture_returns=True,
+    sampling_rate=1.0,
+)
+
+_MODEL: dict[str, Any] = {
+    "loaded": False,
+    "model": None,
+    "grad_cam": None,
+    "loaded_folds": [],
+    "transform": None,
+    "device": None,
+    "temperature": None,
+    "calib_cfg": None,
+    "inference_mod": None,
+}
+
+_BATCHES: dict[str, dict[str, Any]] = {}
+_BATCHES_LOCK = threading.Lock()
+
+# ══════════════════════════════════════════════════════════════════════════
+#  MODEL LOADING
+# ══════════════════════════════════════════════════════════════════════════
+
+def _required_model_files(fold_selection: str) -> list[str]:
+    """Get list of required model files"""
+    files = ["calibration_params.json", "normalization_stats.json"]
+    raw = (fold_selection or "ensemble").strip().lower()
+    if raw in ("", "ensemble", "all"):
+        files.extend([f"best_model_fold{i}.pth" for i in range(5)])
+    elif raw == "best":
+        files.append("best_model_fold4.pth")
+    elif raw.isdigit():
+        files.append(f"best_model_fold{int(raw)}.pth")
+    else:
+        files.extend([f"best_model_fold{i}.pth" for i in range(5)])
+    return files
+
+def _download_runtime_artifacts_if_needed(fold_selection: str) -> bool:
+    """Download missing model files from Hugging Face"""
+    required_files = _required_model_files(fold_selection)
+    missing = [f for f in required_files if not (MODEL_DIR / f).exists()]
+    
+    if not missing:
+        return True
+    if not HF_MODEL_REPO or not hf_hub_download:
+        logger.warning(f"Missing model files and HF_MODEL_REPO not configured: {missing}")
+        return False
+    
+    try:
+        MODEL_DIR.mkdir(parents=True, exist_ok=True)
+        for filename in missing:
+            logger.info(f"Downloading {filename}...")
+            hf_hub_download(
+                repo_id=HF_MODEL_REPO,
+                filename=filename,
+                repo_type="model",
+                local_dir=str(MODEL_DIR),
+                token=HF_TOKEN or None,
+            )
+        return True
+    except Exception as e:
+        logger.error(f"Failed downloading model artifacts: {e}")
+        return False
+
+def _ensure_model_loaded() -> bool:
+    """Lazy-load ML model on first inference"""
+    if _MODEL["loaded"]:
+        return True
+    
+    try:
+        import torch
+        sys.path.insert(0, str(BASE_DIR))
+        
+        device = "cuda" if torch.cuda.is_available() else "cpu"
+        fold_selection = os.environ.get("ICH_FOLD_SELECTION", "ensemble")
+        
+        if not _download_runtime_artifacts_if_needed(fold_selection):
+            return False
+        
+        if not CALIB_JSON.exists():
+            logger.error(f"Calibration file not found: {CALIB_JSON}")
+            return False
+        
+        with open(CALIB_JSON) as f:
+            calib_cfg = json.load(f)
+        
+        if NORM_JSON.exists():
+            with open(NORM_JSON) as f:
+                norm = json.load(f)
+            mean = norm.get("mean_3ch", [0.162136, 0.141483, 0.183675])
+            std = norm.get("std_3ch", [0.312067, 0.283885, 0.305968])
+        else:
+            mean, std = [0.485, 0.456, 0.406], [0.229, 0.224, 0.225]
+        
+        models, grad_cams, loaded_folds = ri.load_runtime_models(device, fold_selection)
+        if not models:
+            logger.error(f"Failed to load model checkpoints from {MODEL_DIR}")
+            return False
+        
+        transform = ri.T.Compose([
+            ri.T.ToPILImage(),
+            ri.T.ToTensor(),
+            ri.T.Normalize(mean=mean, std=std),
+        ])
+        
+        _MODEL.update({
+            "loaded": True,
+            "model": models,
+            "grad_cam": grad_cams,
+            "loaded_folds": loaded_folds,
+            "transform": transform,
+            "device": device,
+            "temperature": float(calib_cfg.get("temperature", 1.0)),
+            "calib_cfg": calib_cfg,
+            "inference_mod": ri,
+        })
+        logger.info(f"Model loaded: device={device}, folds={loaded_folds}")
+        return True
+    
+    except Exception as e:
+        logger.error(f"Model loading failed: {e}", exc_info=True)
+        return False
+
+# ══════════════════════════════════════════════════════════════════════════
+#  INFERENCE & BATCH PROCESSING
+# ══════════════════════════════════════════════════════════════════════════
+
+def _run_inference_on_dcm(dcm_path: Path, user_id: int) -> tuple[dict[str, Any] | None, dict[str, Any] | None]:
+    """Run inference on a single DICOM file"""
+    if not _ensure_model_loaded():
+        return None, None
+    
+    ri_mod = _MODEL["inference_mod"]
+    image_id = dcm_path.stem
+    user_reports_dir = UserDataManager().get_user_reports_dir(user_id)
+    
+    bbr.start()
+    
+    try:
+        img_rgb = ri_mod.dicom_to_rgb(str(dcm_path), size=ri_mod.IMG_SIZE)
+        inference = ri_mod.infer_single(
+            img_rgb,
+            _MODEL["model"],
+            _MODEL["grad_cam"],
+            _MODEL["transform"],
+            _MODEL["device"],
+            _MODEL["temperature"],
+        )
+        
+        user_reports_dir.mkdir(parents=True, exist_ok=True)
+        report = ri_mod.build_report(
+            image_id, inference, _MODEL["calib_cfg"],
+            user_reports_dir, img_rgb, true_label=None,
+        )
+        
+        pred = report.get("prediction", {})
+        pred.setdefault("raw_probability", inference.get("raw_prob_any"))
+        pred.setdefault("calibrated_probability", inference.get("cal_prob_any"))
+        pred.setdefault("decision_threshold", pred.get("decision_threshold_any"))
+        report["prediction"] = pred
+        
+        report_path = user_reports_dir / f"{image_id}_report.json"
+        with open(report_path, "w") as f:
+            json.dump(report, f, indent=2)
+        
+        # Save to database
+        screening_report = ScreeningReport(
+            user_id=user_id,
+            upload_id=0,  # Will be set by caller if needed
+            image_id=image_id,
+            screening_outcome=pred.get("screening_outcome"),
+            raw_probability=pred.get("raw_probability"),
+            calibrated_probability=pred.get("calibrated_probability"),
+            confidence_band=pred.get("confidence_band"),
+            decision_threshold=pred.get("decision_threshold"),
+            triage_action=report.get("triage", {}).get("action"),
+            urgency=report.get("triage", {}).get("urgency"),
+            report_json_path=str(report_path.relative_to(BASE_DIR)),
+            generated_at=datetime.datetime.utcnow(),
+        )
+        db.session.add(screening_report)
+        db.session.commit()
+        
+        log_audit("inference_completed", user_id=user_id, resource_type="report", 
+                 resource_id=screening_report.id, status="success")
+    
+    except Exception as e:
+        bbr.stop()
+        logger.error(f"Inference failed: {e}", exc_info=True)
+        log_audit("inference_failed", user_id=user_id, status="failure", details=str(e))
+        raise
+    
+    bbr.stop()
+    
+    # Save trace
+    ts = datetime.datetime.now().strftime("%Y%m%d_%H%M%S")
+    base = f"{ts}_{image_id}"
+    try:
+        bbr.save_report(str(LOGS_DIR / f"{base}.txt"))
+        bbr.save_json(str(LOGS_DIR / f"{base}.json"))
+    except Exception as e:
+        logger.warning(f"Could not save trace: {e}")
+    
+    return report, {"timestamp": ts, "image_id": image_id}
+
+def _new_batch(user_id: int, total: int, temp_dir: str | None = None) -> str:
+    """Create a batch processing job"""
+    batch_id = uuid.uuid4().hex[:12]
+    with _BATCHES_LOCK:
+        _BATCHES[batch_id] = {
+            "user_id": user_id,
+            "status": "running",
+            "total": total,
+            "processed": 0,
+            "succeeded": 0,
+            "failed_ids": [],
+            "current_file": "",
+            "image_ids": [],
+            "started_at": datetime.datetime.now().isoformat(),
+            "finished_at": None,
+            "error": None,
+            "temp_dir": temp_dir,
+        }
+    return batch_id
+
+def _batch_update(batch_id: str, **kw: Any) -> None:
+    """Update batch job status"""
+    with _BATCHES_LOCK:
+        if batch_id in _BATCHES:
+            _BATCHES[batch_id].update(kw)
+
+def _run_batch_worker(batch_id: str, dcm_paths: list[Path], user_id: int):
+    """Process multiple DICOM files in background"""
+    succeeded_ids = []
+    failed_ids = []
+    
+    for i, path in enumerate(dcm_paths, 1):
+        image_id = path.stem
+        _batch_update(batch_id, current_file=image_id, processed=i - 1)
+        
+        try:
+            report, _ = _run_inference_on_dcm(path, user_id)
+            if report:
+                succeeded_ids.append(image_id)
+            else:
+                failed_ids.append(image_id)
+        except Exception as e:
+            logger.error(f"Batch {batch_id}: failed {image_id} — {e}")
+            failed_ids.append(image_id)
+        
+        _batch_update(
+            batch_id,
+            processed=i,
+            succeeded=len(succeeded_ids),
+            image_ids=list(succeeded_ids),
+            failed_ids=list(failed_ids),
+        )
+    
+    # Clean up
+    with _BATCHES_LOCK:
+        b = _BATCHES.get(batch_id, {})
+        td = b.get("temp_dir")
+    if td and Path(td).exists():
+        shutil.rmtree(td, ignore_errors=True)
+    
+    _batch_update(
+        batch_id,
+        status="completed",
+        current_file="",
+        finished_at=datetime.datetime.now().isoformat(),
+    )
+    logger.info(f"Batch {batch_id} complete: {len(succeeded_ids)}/{len(dcm_paths)}, {len(failed_ids)} failed")
+
+def _start_batch(dcm_paths: list[Path], user_id: int, temp_dir: str | None = None) -> str:
+    """Start async batch processing"""
+    batch_id = _new_batch(user_id, len(dcm_paths), temp_dir)
+    t = threading.Thread(
+        target=_run_batch_worker,
+        args=(batch_id, dcm_paths, user_id),
+        daemon=True,
+        name=f"batch-{batch_id}",
+    )
+    t.start()
+    return batch_id
+
+# ══════════════════════════════════════════════════════════════════════════
+#  DATA MODEL & UTILITIES
+# ══════════════════════════════════════════════════════════════════════════
+
+@dataclass
+class CaseRow:
+    """Display row for screening report"""
+    image_id: str = ""
+    outcome: str = "Unknown"
+    raw_prob: float | None = None
+    cal_prob: float | None = None
+    band: str = "N/A"
+    triage: str = "N/A"
+    urgency: str = "N/A"
+    generated_at: str = ""
+    report_file: str | None = None
+    gradcam_file: str | None = None
+    
+    @property
+    def date_display(self) -> str:
+        if not self.generated_at:
+            return "—"
+        try:
+            dt = datetime.datetime.fromisoformat(self.generated_at)
+            return dt.strftime("%Y-%m-%d %H:%M")
+        except (ValueError, TypeError):
+            return self.generated_at[:16]
+    
+    @property
+    def is_positive(self) -> bool:
+        return "no hemorrhage" not in self.outcome.lower()
+
+def _load_user_cases(user_id: int) -> list[CaseRow]:
+    """Load user's screening reports from database"""
+    reports = ScreeningReport.query.filter_by(user_id=user_id).order_by(
+        ScreeningReport.generated_at.desc()
+    ).all()
+    
+    cases = []
+    for r in reports:
+        cases.append(CaseRow(
+            image_id=r.image_id,
+            outcome=r.screening_outcome or "Unknown",
+            raw_prob=r.raw_probability,
+            cal_prob=r.calibrated_probability,
+            band=r.confidence_band or "N/A",
+            triage=r.triage_action or "N/A",
+            urgency=r.urgency or "N/A",
+            generated_at=r.generated_at.isoformat() if r.generated_at else "",
+            report_file=Path(r.report_json_path).name if r.report_json_path else None,
+        ))
+    
+    return cases
+
+def compute_stats(rows: list[CaseRow]) -> dict[str, Any]:
+    """Compute statistics for dashboard"""
+    total = len(rows)
+    positive = sum(1 for r in rows if r.is_positive)
+    urgent = sum(1 for r in rows if r.urgency.upper() == "URGENT")
+    cal_probs = [r.cal_prob for r in rows if r.cal_prob is not None]
+    avg_cal = sum(cal_probs) / len(cal_probs) if cal_probs else 0.0
+    pos_rate = (positive / total * 100) if total else 0.0
+    
+    return {
+        "total": total,
+        "positive": positive,
+        "negative": total - positive,
+        "urgent": urgent,
+        "avg_cal_prob": avg_cal,
+        "pos_rate": pos_rate,
+        "heatmaps": sum(1 for r in rows if r.gradcam_file),
+    }
+
+
+def _load_calibration() -> dict[str, Any]:
+    """Load calibration file safely for template rendering."""
+    if not CALIB_JSON.exists():
+        return {}
+    try:
+        with open(CALIB_JSON, "r", encoding="utf-8") as f:
+            calib = json.load(f)
+        # Add backward-compatible aliases expected by templates
+        return {
+            **calib,
+            "method": calib.get("method", calib.get("best_method", "N/A")),
+            "temperature": calib.get("temperature", 1.0),
+            "raw_ece": calib.get("ece_raw", 0.0),
+            "cal_ece": calib.get("ece_isotonic", calib.get("ece_temp", 0.0)),
+            "raw_brier": calib.get("brier_raw", 0.0),
+            "cal_brier": calib.get("brier_isotonic", calib.get("brier_temp", 0.0)),
+            "calibrated_threshold": calib.get("threshold_at_spec90", 0.5),
+            "base_threshold": calib.get("base_threshold", 0.5),
+            "high_threshold": calib.get("high_threshold", calib.get("triage_high_thresh", 0.7)),
+            "low_threshold": calib.get("low_threshold", calib.get("triage_low_thresh", 0.3)),
+        }
+    except (OSError, json.JSONDecodeError):
+        return {}
+
+
+def _load_normalization() -> dict[str, Any]:
+    """Load normalization statistics safely for template rendering."""
+    if not NORM_JSON.exists():
+        return {}
+    try:
+        with open(NORM_JSON, "r", encoding="utf-8") as f:
+            data = json.load(f)
+    except (OSError, json.JSONDecodeError):
+        return {}
+
+    mean = data.get("mean_3ch") or data.get("mean")
+    std = data.get("std_3ch") or data.get("std")
+    return {
+        "mean": mean,
+        "std": std,
+        "n_images": data.get("n_images"),
+    }
+
+# ══════════════════════════════════════════════════════════════════════════
+#  MIDDLEWARE
+# ══════════════════════════════════════════════════════════════════════════
+
+@app.before_request
+def _log_request():  # pyright: ignore[reportUnusedFunction]
+    g._start = time.perf_counter()
+    g._client_info = get_client_ip()
+
+@app.after_request
+def _log_response(response):  # pyright: ignore[reportUnusedFunction]
+    elapsed = (time.perf_counter() - getattr(g, "_start", time.perf_counter())) * 1000
+    logger.info(
+        f"{request.method} {request.path} -> {response.status_code} ({elapsed:.1f}ms) from {getattr(g, '_client_info', 'unknown')}"
+    )
+    return response
+
+# ══════════════════════════════════════════════════════════════════════════
+#  ROUTES
+# ══════════════════════════════════════════════════════════════════════════
+
+@app.route("/")
+def home():
+    """Home page"""
+    if not current_user.is_authenticated:
+        return redirect(url_for("auth.login"))
+    
+    cases = _load_user_cases(current_user.id)
+    stats = compute_stats(cases)
+    
+    log_audit("page_view_home", user_id=current_user.id, status="success")
+    return render_template("home.html", stats=stats, user=current_user)
+
+@app.route("/upload", methods=["GET"])
+@login_required
+def upload():
+    """Upload page"""
+    return render_template("upload.html", local_mode=LOCAL_MODE)
+
+@app.route("/analyze", methods=["POST"])
+@login_required
+def analyze():
+    """Process uploaded DICOM files"""
+    # Check rate limit
+    is_limited, msg = check_upload_rate_limit(current_user.id)
+    if is_limited:
+        log_audit("upload_rate_limited", user_id=current_user.id, status="failure")
+        return jsonify({"error": msg}), 429
+    
+    files = request.files.getlist("file")
+    files = [f for f in files if f.filename]
+    
+    if not files:
+        flash("No files were uploaded.", "error")
+        return redirect(url_for("upload"))
+    
+    user_upload_dir = UserDataManager().get_user_upload_dir(current_user.id)
+    user_upload_dir.mkdir(parents=True, exist_ok=True)
+    
+    dcm_paths: list[Path] = []
+    temp_dir: str | None = None
+    
+    for f in files:
+        filename = f.filename or ""
+        fname = filename.lower()
+        
+        if fname.endswith(".zip"):
+            temp_dir = tempfile.mkdtemp(prefix="ich_zip_")
+            zip_path = Path(temp_dir) / secure_filename(filename)
+            f.save(str(zip_path))
+            try:
+                with zipfile.ZipFile(zip_path, "r") as zf:
+                    zf.extractall(temp_dir)
+                dcm_paths.extend(sorted(Path(temp_dir).rglob("*.dcm")))
+            except zipfile.BadZipFile:
+                shutil.rmtree(temp_dir, ignore_errors=True)
+                log_audit("upload_failed", user_id=current_user.id, 
+                         status="failure", details="Bad ZIP file")
+                flash("The uploaded ZIP file is corrupted.", "error")
+                return redirect(url_for("upload"))
+        
+        elif fname.endswith(".dcm"):
+            safe = sanitize_filename(filename)
+            save_path = user_upload_dir / safe
+            f.save(str(save_path))
+            dcm_paths.append(save_path)
+    
+    if not dcm_paths:
+        if temp_dir:
+            shutil.rmtree(temp_dir, ignore_errors=True)
+        log_audit("upload_no_dcm", user_id=current_user.id, status="failure")
+        flash("No .dcm files found in the upload.", "error")
+        return redirect(url_for("upload"))
+    
+    # Single file - synchronous
+    if len(dcm_paths) == 1 and temp_dir is None:
+        path = dcm_paths[0]
+        try:
+            report, _ = _run_inference_on_dcm(path, current_user.id)
+            if not report:
+                flash("Model failed to load. Check server logs.", "error")
+                return redirect(url_for("upload"))
+            return redirect(url_for("case_detail", image_id=path.stem))
+        except Exception as e:
+            logger.error(f"Analysis failed: {e}")
+            log_audit("analysis_failed", user_id=current_user.id, status="failure", details=str(e))
+            flash(f"Analysis failed: {e}", "error")
+            return redirect(url_for("upload"))
+        finally:
+            if path.exists() and path.parent == user_upload_dir:
+                path.unlink()
+    
+    # Multiple files - async batch
+    batch_id = _start_batch(dcm_paths, current_user.id, temp_dir)
+    log_audit("batch_started", user_id=current_user.id, 
+             details=f"batch_id={batch_id}, files={len(dcm_paths)}")
+    return redirect(url_for("batch_progress", batch_id=batch_id))
+
+
+@app.route("/analyze/directory", methods=["POST"])
+@login_required
+def analyze_directory():
+    """Local-only route for scanning a server-side directory of DICOM files."""
+    if not LOCAL_MODE:
+        abort(403)
+
+    dir_path_str = request.form.get("dir_path", "").strip()
+    if not dir_path_str:
+        flash("Please enter a directory path.", "error")
+        return redirect(url_for("upload"))
+
+    scan_dir = Path(dir_path_str)
+    if not scan_dir.is_dir():
+        flash(f"Directory not found: {dir_path_str}", "error")
+        return redirect(url_for("upload"))
+
+    dcm_paths = sorted(scan_dir.rglob("*.dcm"))
+    if not dcm_paths:
+        flash(f"No .dcm files found in: {dir_path_str}", "error")
+        return redirect(url_for("upload"))
+
+    batch_id = _start_batch(dcm_paths, current_user.id)
+    log_audit("directory_batch_started", user_id=current_user.id, details=f"batch_id={batch_id}, files={len(dcm_paths)}")
+    return redirect(url_for("batch_progress", batch_id=batch_id))
+
+@app.route("/batch/<batch_id>")
+@login_required
+def batch_progress(batch_id):
+    """Batch processing progress page"""
+    with _BATCHES_LOCK:
+        batch = _BATCHES.get(batch_id)
+        if not batch or batch.get("user_id") != current_user.id:
+            abort(404)
+        batch_copy = dict(batch)
+    
+    return render_template("batch_progress.html", batch=batch_copy, batch_id=batch_id)
+
+@app.route("/batch/<batch_id>/status")
+@login_required
+def batch_status(batch_id):
+    """Get batch status (JSON API)"""
+    with _BATCHES_LOCK:
+        batch = _BATCHES.get(batch_id)
+        if not batch or batch.get("user_id") != current_user.id:
+            return jsonify({"error": "Not found"}), 404
+        return jsonify(batch)
+
+@app.route("/reports")
+@login_required
+def reports():
+    """User's screening reports"""
+    route_start = time.perf_counter()
+    cases = _load_user_cases(current_user.id)
+    total_cases = len(cases)
+    
+    # Filtering
+    q = request.args.get("q", "").strip()
+    band = request.args.get("band", "")
+    urgency = request.args.get("urgency", "")
+    outcome = request.args.get("outcome", "")
+    sort_by = request.args.get("sort", "date_desc")
+    try:
+        page = max(1, int(request.args.get("page", "1") or 1))
+    except ValueError:
+        page = 1
+    try:
+        page_size = int(request.args.get("page_size", "50") or 50)
+    except ValueError:
+        page_size = 50
+    if page_size not in (10, 50, 100):
+        page_size = 50
+    
+    if q:
+        ql = q.lower()
+        cases = [c for c in cases if ql in c.image_id.lower() or ql in c.outcome.lower()]
+    if band:
+        cases = [c for c in cases if c.band.upper() == band.upper()]
+    if urgency:
+        cases = [c for c in cases if c.urgency.upper() == urgency.upper()]
+    if outcome == "POSITIVE":
+        cases = [c for c in cases if c.is_positive]
+    elif outcome == "NEGATIVE":
+        cases = [c for c in cases if not c.is_positive]
+    
+    if sort_by == "date_desc":
+        cases = sorted(cases, key=lambda c: c.generated_at or "", reverse=True)
+    elif sort_by == "date_asc":
+        cases = sorted(cases, key=lambda c: c.generated_at or "")
+    elif sort_by == "prob_desc":
+        cases = sorted(cases, key=lambda c: c.cal_prob or 0, reverse=True)
+    elif sort_by == "prob_asc":
+        cases = sorted(cases, key=lambda c: c.cal_prob or 0)
+    
+    stats = compute_stats(cases)
+    total_items = len(cases)
+    total_pages = max(1, math.ceil(total_items / page_size))
+    page = min(page, total_pages)
+    page_start = (page - 1) * page_size
+    rows = cases[page_start: page_start + page_size]
+    route_compute_ms = (time.perf_counter() - route_start) * 1000
+    
+    return render_template(
+        "reports.html",
+        rows=rows,
+        cases=rows,
+        stats=stats,
+        calib=_load_calibration(),
+        q=q,
+        band=band,
+        urgency=urgency,
+        outcome=outcome,
+        sort=sort_by,
+        sort_by=sort_by,
+        page=page,
+        page_size=page_size,
+        page_start=page_start,
+        total_pages=total_pages,
+        total_items=total_items,
+        total_cases=total_cases,
+        route_compute_ms=route_compute_ms,
+        data_refresh_ms=0,
+        data_cache_hit=False,
+    )
+
+@app.route("/case/<image_id>")
+@login_required
+def case_detail(image_id):
+    """View screening report details"""
+    report = ScreeningReport.query.filter_by(user_id=current_user.id, image_id=image_id).first()
+    if not report:
+        abort(404)
+    
+    user_reports_dir = UserDataManager().get_user_reports_dir(current_user.id)
+    report_path = user_reports_dir / f"{image_id}_report.json"
+    
+    if not report_path.exists():
+        abort(404)
+    
+    try:
+        with open(report_path) as f:
+            report_data = json.load(f)
+    except (json.JSONDecodeError, OSError):
+        abort(500)
+    
+    log_audit("report_viewed", user_id=current_user.id, resource_type="report", resource_id=report.id)
+    return render_template("detail.html", report=report_data)
+
+@app.route("/logs")
+@login_required
+def logs_page():
+    """View user's inference logs"""
+    log_files = []
+    
+    if LOGS_DIR.exists():
+        for path in sorted(LOGS_DIR.iterdir(), reverse=True)[:50]:  # Last 50 logs
+            if path.suffix in (".txt", ".json"):
+                log_files.append({
+                    "name": path.name,
+                    "size": round(path.stat().st_size / 1024, 1),
+                    "modified": datetime.datetime.fromtimestamp(path.stat().st_mtime).isoformat(),
+                })
+    
+    return render_template("logs.html", logs=log_files)
+
+@app.route("/about")
+def about():
+    """About page"""
+    return render_template("about.html", calib=_load_calibration())
+
+@app.route("/evaluation")
+def evaluation():
+    """Model evaluation page"""
+    cases = _load_user_cases(current_user.id) if current_user.is_authenticated else []
+    cal_probs = [r.cal_prob for r in cases if r.cal_prob is not None]
+
+    bins = [0] * 10
+    for p in cal_probs:
+        bins[min(int(p * 10), 9)] += 1
+
+    band_data: dict[str, dict[str, int]] = {}
+    for bnd in ("HIGH", "MEDIUM", "LOW"):
+        subset = [r for r in cases if r.band.upper() == bnd]
+        positive = sum(1 for r in subset if r.is_positive)
+        band_data[bnd] = {
+            "total": len(subset),
+            "positive": positive,
+            "negative": len(subset) - positive,
+        }
+
+    return render_template(
+        "evaluation.html",
+        stats=compute_stats(cases),
+        calib=_load_calibration(),
+        norm=_load_normalization(),
+        bins=bins,
+        band_data=band_data,
+        total=len(cases),
+    )
+
+
+@app.route("/gradcam/<path:filename>")
+@login_required
+def serve_gradcam(filename: str):
+    """Serve a user's Grad-CAM image from their report directory."""
+    safe_name = Path(filename).name
+    reports_dir = UserDataManager().get_user_reports_dir(current_user.id)
+    return send_from_directory(reports_dir, safe_name)
+
+@app.errorhandler(401)
+def unauthorized(e):
+    if request.path.startswith("/api/"):
+        return jsonify({"error": "Unauthorized"}), 401
+    return redirect(url_for("auth.login"))
+
+@app.errorhandler(403)
+def forbidden(e):
+    if request.path.startswith("/api/"):
+        return jsonify({"error": "Forbidden"}), 403
+    flash("Access denied", "error")
+    return redirect(url_for("home"))
+
+@app.errorhandler(404)
+def not_found(e):
+    if request.path.startswith("/api/"):
+        return jsonify({"error": "Not found"}), 404
+    return render_template("404.html"), 404
+
+@app.errorhandler(500)
+def server_error(e):
+    logger.error(f"Server error: {e}", exc_info=True)
+    if request.path.startswith("/api/"):
+        return jsonify({"error": "Server error"}), 500
+    return render_template("500.html"), 500
+
+# ══════════════════════════════════════════════════════════════════════════
+#  CLI COMMANDS
+# ══════════════════════════════════════════════════════════════════════════
+
+@app.cli.command()
+def init_db_cmd():
+    """Initialize database"""
+    init_db()
+    print("Database initialized!")
+
+@app.cli.command()
+def create_admin():
+    """Create admin user (interactive)"""
+    from getpass import getpass
+    
+    username = input("Username: ").strip()
+    email = input("Email: ").strip()
+    password = getpass("Password: ")
+    
+    if User.query.filter_by(username=username).first():
+        print("User already exists!")
+        return
+    
+    user = User(username=username, email=email, full_name="Admin")
+    user.set_password(password)
+    db.session.add(user)
+    db.session.commit()
+    print(f"Admin user '{username}' created!")
+
+# ══════════════════════════════════════════════════════════════════════════
+#  MAIN
+# ══════════════════════════════════════════════════════════════════════════
+
+if __name__ == "__main__":
+    with app.app_context():
+        init_db()
+    
+    app.run(host="0.0.0.0", port=APP_PORT, debug=APP_DEBUG)

auth_routes.py

@@ -0,0 +1,205 @@
+"""
+Authentication routes: login, register, logout
+"""
+import logging
+from flask import Blueprint, render_template, request, redirect, url_for, flash, jsonify
+from flask_login import login_user, logout_user, current_user
+from models import db, User
+from auth_utils import (
+    validate_username, validate_password, validate_email, log_audit
+)
+
+logger = logging.getLogger(__name__)
+auth_bp = Blueprint('auth', __name__, url_prefix='/auth')
+
+
+@auth_bp.route('/register', methods=['GET', 'POST'])
+def register():
+    """User registration"""
+    if current_user.is_authenticated:
+        return redirect(url_for('home'))
+    
+    if request.method == 'POST':
+        username = request.form.get('username', '').strip()
+        email = request.form.get('email', '').strip().lower()
+        password = request.form.get('password', '')
+        confirm_password = request.form.get('confirm_password', '')
+        full_name = request.form.get('full_name', '').strip()
+        
+        # Validate inputs
+        valid, msg = validate_username(username)
+        if not valid:
+            flash(msg, 'error')
+            return render_template('auth/register.html'), 400
+        
+        valid, msg = validate_email(email)
+        if not valid:
+            flash(msg, 'error')
+            return render_template('auth/register.html'), 400
+        
+        if password != confirm_password:
+            flash('Passwords do not match', 'error')
+            return render_template('auth/register.html'), 400
+        
+        valid, msg = validate_password(password)
+        if not valid:
+            flash(msg, 'error')
+            return render_template('auth/register.html'), 400
+        
+        # Check if user exists
+        if User.query.filter_by(username=username).first():
+            flash('Username already exists', 'error')
+            return render_template('auth/register.html'), 400
+        
+        if User.query.filter_by(email=email).first():
+            flash('Email already registered', 'error')
+            return render_template('auth/register.html'), 400
+        
+        try:
+            # Create new user
+            user = User(
+                username=username,
+                email=email,
+                full_name=full_name
+            )
+            user.set_password(password)
+            
+            db.session.add(user)
+            db.session.commit()
+            
+            log_audit('user_registered', user_id=user.id, status='success')
+            
+            flash('Registration successful! Please log in.', 'success')
+            return redirect(url_for('auth.login'))
+        
+        except Exception as e:
+            db.session.rollback()
+            logger.error(f"Registration error: {e}")
+            log_audit('user_registration_failed', status='failure', details=str(e))
+            flash('Registration failed. Please try again.', 'error')
+            return render_template('auth/register.html'), 500
+    
+    return render_template('auth/register.html')
+
+
+@auth_bp.route('/login', methods=['GET', 'POST'])
+def login():
+    """User login"""
+    if current_user.is_authenticated:
+        return redirect(url_for('home'))
+    
+    if request.method == 'POST':
+        username = request.form.get('username', '').strip()
+        password = request.form.get('password', '')
+        remember = request.form.get('remember', False)
+        
+        user = User.query.filter_by(username=username).first()
+        
+        if not user:
+            logger.warning(f"Login attempt with non-existent username: {username}")
+            log_audit('login_failed', status='failure', details=f'User not found: {username}')
+            flash('Invalid username or password', 'error')
+            return render_template('auth/login.html'), 401
+        
+        if not user.is_active:
+            log_audit('login_failed', user_id=user.id, status='failure', details='Account inactive')
+            flash('Your account has been deactivated', 'error')
+            return render_template('auth/login.html'), 403
+        
+        if not user.check_password(password):
+            logger.warning(f"Failed login attempt for user: {username}")
+            log_audit('login_failed', user_id=user.id, status='failure', details='Invalid password')
+            flash('Invalid username or password', 'error')
+            return render_template('auth/login.html'), 401
+        
+        try:
+            login_user(user, remember=remember)
+            log_audit('login_success', user_id=user.id, status='success')
+            
+            next_page = request.args.get('next')
+            if next_page and next_page.startswith('/'):
+                return redirect(next_page)
+            return redirect(url_for('home'))
+        
+        except Exception as e:
+            logger.error(f"Login error: {e}")
+            log_audit('login_error', user_id=user.id, status='failure', details=str(e))
+            flash('Login failed. Please try again.', 'error')
+            return render_template('auth/login.html'), 500
+    
+    return render_template('auth/login.html')
+
+
+@auth_bp.route('/logout', methods=['POST'])
+def logout():
+    """User logout"""
+    if current_user.is_authenticated:
+        log_audit('logout', user_id=current_user.id, status='success')
+        logout_user()
+    return redirect(url_for('auth.login'))
+
+
+@auth_bp.route('/forgot-password', methods=['GET', 'POST'])
+def forgot_password():
+    """Forgot password — shows a polished form; no email is sent (SMTP not configured)."""
+    if current_user.is_authenticated:
+        return redirect(url_for('home'))
+
+    if request.method == 'POST':
+        email = request.form.get('email', '').strip().lower()
+        # We always return the same response to prevent user enumeration.
+        logger.info(f"Password reset requested for email: {email}")
+        log_audit('password_reset_requested', status='info', details=f'Email: {email}')
+        # Redirect with ?sent=1 so the template can show the success state
+        return redirect(url_for('auth.forgot_password') + '?sent=1')
+
+    return render_template('auth/forgot_password.html')
+
+
+@auth_bp.route('/profile', methods=['GET'])
+def profile():
+    """View user profile"""
+    if not current_user.is_authenticated:
+        return redirect(url_for('auth.login'))
+    
+    return render_template('auth/profile.html', user=current_user)
+
+
+@auth_bp.route('/change-password', methods=['POST'])
+def change_password():
+    """Change user password"""
+    if not current_user.is_authenticated:
+        return redirect(url_for('auth.login'))
+    
+    if not request.is_json:
+        return jsonify({'error': 'Content-Type must be application/json'}), 400
+    
+    data = request.get_json()
+    current_password = data.get('current_password', '')
+    new_password = data.get('new_password', '')
+    confirm_password = data.get('confirm_password', '')
+    
+    if not current_user.check_password(current_password):
+        log_audit('password_change_failed', user_id=current_user.id, 
+                 status='failure', details='Invalid current password')
+        return jsonify({'error': 'Current password is incorrect'}), 401
+    
+    if new_password != confirm_password:
+        return jsonify({'error': 'New passwords do not match'}), 400
+    
+    valid, msg = validate_password(new_password)
+    if not valid:
+        return jsonify({'error': msg}), 400
+    
+    try:
+        current_user.set_password(new_password)
+        db.session.commit()
+        log_audit('password_changed', user_id=current_user.id, status='success')
+        return jsonify({'message': 'Password changed successfully'}), 200
+    
+    except Exception as e:
+        db.session.rollback()
+        logger.error(f"Password change error: {e}")
+        log_audit('password_change_error', user_id=current_user.id, 
+                 status='failure', details=str(e))
+        return jsonify({'error': 'Password change failed'}), 500

auth_utils.py

@@ -0,0 +1,111 @@
+"""
+Authentication utilities and decorators for user management and security
+"""
+import os
+import logging
+from functools import wraps
+from flask import session, redirect, url_for, request, g, abort
+from flask_login import LoginManager, current_user
+from models import db, User, AuditLog
+from datetime import datetime
+
+logger = logging.getLogger(__name__)
+
+login_manager = LoginManager()
+
+
+def init_auth(app):
+    """Initialize authentication system"""
+    login_manager.init_app(app)
+    login_manager.login_view = 'auth.login'
+    login_manager.login_message = 'Please log in to access this page.'
+    login_manager.login_message_category = 'info'
+
+
+@login_manager.user_loader
+def load_user(user_id):
+    """Load user from database by ID"""
+    return User.query.get(int(user_id))
+
+
+def get_client_ip():
+    """Extract client IP address from request"""
+    if request.headers.get('X-Forwarded-For'):
+        return request.headers.get('X-Forwarded-For').split(',')[0].strip()
+    return request.remote_addr or 'unknown'
+
+
+def log_audit(action, user_id=None, resource_type=None, resource_id=None, 
+              details=None, status='success'):
+    """Log action to audit trail"""
+    try:
+        audit_entry = AuditLog(
+            user_id=user_id,
+            action=action,
+            resource_type=resource_type,
+            resource_id=resource_id,
+            details=details,
+            ip_address=get_client_ip(),
+            timestamp=datetime.utcnow(),
+            status=status
+        )
+        db.session.add(audit_entry)
+        db.session.commit()
+    except Exception as e:
+        logger.error(f"Failed to log audit entry: {e}")
+        # Don't raise - audit failures shouldn't break the app
+
+
+def login_required_with_audit(f):
+    """Decorator that requires login and logs the access"""
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if not current_user.is_authenticated:
+            log_audit('access_denied', status='failure', details=f'Unauthorized access to {request.path}')
+            return redirect(url_for('auth.login'))
+        return f(*args, **kwargs)
+    return decorated_function
+
+
+def require_json_content_type(f):
+    """Decorator to ensure request has JSON content type"""
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if request.method in ['POST', 'PUT', 'PATCH']:
+            if not request.is_json:
+                return {'error': 'Content-Type must be application/json'}, 400
+        return f(*args, **kwargs)
+    return decorated_function
+
+
+def validate_username(username):
+    """Validate username format"""
+    if not username or len(username) < 3 or len(username) > 80:
+        return False, "Username must be between 3 and 80 characters"
+    if not all(c.isalnum() or c in '_-' for c in username):
+        return False, "Username can only contain letters, numbers, underscores, and hyphens"
+    return True, ""
+
+
+def validate_password(password):
+    """Validate password strength"""
+    if not password or len(password) < 8:
+        return False, "Password must be at least 8 characters long"
+    if len(password) > 128:
+        return False, "Password must be less than 128 characters"
+    # Check for at least one uppercase, one lowercase, one digit
+    has_upper = any(c.isupper() for c in password)
+    has_lower = any(c.islower() for c in password)
+    has_digit = any(c.isdigit() for c in password)
+    if not (has_upper and has_lower and has_digit):
+        return False, "Password must contain uppercase, lowercase, and digits"
+    return True, ""
+
+
+def validate_email(email):
+    """Basic email validation"""
+    import re
+    pattern = r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$'
+    if not re.match(pattern, email):
+        return False, "Invalid email format"
+    return True, ""

data_isolation.py

@@ -0,0 +1,213 @@
+"""
+Data isolation and file management for user-specific screening data
+Ensures users can only access their own files and data
+"""
+import os
+import logging
+from pathlib import Path
+from flask_login import current_user
+from models import db, ScreeningUpload, ScreeningReport
+
+logger = logging.getLogger(__name__)
+
+
+class UserDataManager:
+    """Manages user-specific data storage and access control"""
+    
+    def __init__(self, base_upload_dir: str = "uploads"):
+        self.base_upload_dir = Path(base_upload_dir)
+        self.base_upload_dir.mkdir(parents=True, exist_ok=True)
+    
+    def get_user_upload_dir(self, user_id: int) -> Path:
+        """Get the uploads directory for a specific user"""
+        user_dir = self.base_upload_dir / f"user_{user_id}" / "uploads"
+        user_dir.mkdir(parents=True, exist_ok=True)
+        return user_dir
+    
+    def get_user_reports_dir(self, user_id: int) -> Path:
+        """Get the reports directory for a specific user"""
+        reports_dir = self.base_upload_dir / f"user_{user_id}" / "reports"
+        reports_dir.mkdir(parents=True, exist_ok=True)
+        return reports_dir
+    
+    def get_user_data_dir(self, user_id: int) -> Path:
+        """Get the root data directory for a specific user"""
+        data_dir = self.base_upload_dir / f"user_{user_id}"
+        data_dir.mkdir(parents=True, exist_ok=True)
+        return data_dir
+    
+    def get_current_user_dir(self) -> Path:
+        """Get upload directory for the current authenticated user"""
+        if not current_user.is_authenticated:
+            raise PermissionError("User not authenticated")
+        return self.get_user_upload_dir(current_user.id)
+    
+    def get_current_user_reports_dir(self) -> Path:
+        """Get reports directory for the current authenticated user"""
+        if not current_user.is_authenticated:
+            raise PermissionError("User not authenticated")
+        return self.get_user_reports_dir(current_user.id)
+    
+    @staticmethod
+    def verify_file_ownership(user_id: int, file_path: str) -> bool:
+        """
+        Verify that a file belongs to the specified user.
+        Prevents directory traversal attacks.
+        """
+        user_data_dir = Path("uploads") / f"user_{user_id}"
+        try:
+            file_full_path = user_data_dir.resolve() / file_path
+            # Ensure the resolved path is still within the user's directory
+            return str(file_full_path).startswith(str(user_data_dir.resolve()))
+        except Exception:
+            return False
+    
+    @staticmethod
+    def verify_upload_ownership(user_id: int, upload_id: int) -> bool:
+        """Verify that an upload record belongs to the specified user"""
+        upload = ScreeningUpload.query.filter_by(id=upload_id, user_id=user_id).first()
+        return upload is not None
+    
+    @staticmethod
+    def verify_report_ownership(user_id: int, report_id: int) -> bool:
+        """Verify that a report record belongs to the specified user"""
+        report = ScreeningReport.query.filter_by(id=report_id, user_id=user_id).first()
+        return report is not None
+    
+    @staticmethod
+    def get_user_uploads(user_id: int, limit: int = None):
+        """Get all uploads for a user with optional limit"""
+        query = ScreeningUpload.query.filter_by(user_id=user_id).order_by(
+            ScreeningUpload.upload_timestamp.desc()
+        )
+        if limit:
+            query = query.limit(limit)
+        return query.all()
+    
+    @staticmethod
+    def get_user_reports(user_id: int, limit: int = None):
+        """Get all reports for a user with optional limit"""
+        query = ScreeningReport.query.filter_by(user_id=user_id).order_by(
+            ScreeningReport.generated_at.desc()
+        )
+        if limit:
+            query = query.limit(limit)
+        return query.all()
+    
+    @staticmethod
+    def get_report_statistics(user_id: int) -> dict:
+        """Get statistics about a user's reports"""
+        reports = ScreeningReport.query.filter_by(user_id=user_id).all()
+        
+        total = len(reports)
+        positive = len([r for r in reports if r.urgency and 'urgent' in r.urgency.lower()])
+        negative = total - positive
+        
+        avg_cal_prob = 0
+        if total > 0:
+            avg_cal_prob = sum(r.calibrated_probability or 0 for r in reports) / total
+        
+        return {
+            'total': total,
+            'positive': positive,
+            'negative': negative,
+            'avg_cal_prob': avg_cal_prob,
+            'pos_rate': (positive / total * 100) if total > 0 else 0
+        }
+
+
+class SecureFileAccess:
+    """Handles secure file access with permission checks"""
+    
+    @staticmethod
+    def is_path_safe(base_dir: Path, requested_path: Path) -> bool:
+        """
+        Verify that requested_path is within base_dir.
+        Prevents directory traversal attacks.
+        """
+        try:
+            # Resolve both paths to absolute to prevent symlink tricks
+            base_resolved = base_dir.resolve()
+            path_resolved = (base_dir / requested_path).resolve()
+            
+            # Check if the resolved path is within the base directory
+            path_resolved.relative_to(base_resolved)
+            return True
+        except ValueError:
+            return False
+    
+    @staticmethod
+    def get_user_file(user_id: int, file_path: str):
+        """
+        Safely retrieve a file that belongs to the user.
+        Returns None if file doesn't exist or user doesn't own it.
+        """
+        if not UserDataManager.verify_file_ownership(user_id, file_path):
+            logger.warning(f"Unauthorized file access attempt by user {user_id}: {file_path}")
+            return None
+        
+        user_data_dir = Path("uploads") / f"user_{user_id}"
+        full_path = (user_data_dir / file_path).resolve()
+        
+        if not full_path.exists() or not full_path.is_file():
+            return None
+        
+        return full_path
+    
+    @staticmethod
+    def delete_user_file(user_id: int, file_path: str) -> bool:
+        """
+        Safely delete a file that belongs to the user.
+        Returns True if successful, False otherwise.
+        """
+        file_to_delete = SecureFileAccess.get_user_file(user_id, file_path)
+        if not file_to_delete:
+            return False
+        
+        try:
+            file_to_delete.unlink()
+            logger.info(f"Deleted file for user {user_id}: {file_path}")
+            return True
+        except Exception as e:
+            logger.error(f"Failed to delete file for user {user_id}: {e}")
+            return False
+
+
+def require_user_ownership(resource_type: str):
+    """
+    Decorator to verify user ownership of resources before processing.
+    
+    Args:
+        resource_type: 'upload' or 'report'
+    """
+    from functools import wraps
+    from flask import request, abort
+    
+    def decorator(f):
+        @wraps(f)
+        def decorated_function(*args, **kwargs):
+            if not current_user.is_authenticated:
+                abort(401)
+            
+            resource_id = request.view_args.get('id')
+            if not resource_id:
+                abort(400)
+            
+            try:
+                resource_id = int(resource_id)
+            except (ValueError, TypeError):
+                abort(400)
+            
+            if resource_type == 'upload':
+                if not UserDataManager.verify_upload_ownership(current_user.id, resource_id):
+                    abort(403)
+            elif resource_type == 'report':
+                if not UserDataManager.verify_report_ownership(current_user.id, resource_id):
+                    abort(403)
+            else:
+                abort(400)
+            
+            return f(*args, **kwargs)
+        
+        return decorated_function
+    return decorator

models.py

@@ -0,0 +1,114 @@
+"""
+Database models for ICH Screening Application with user authentication and privacy
+"""
+import os
+from datetime import datetime
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import UserMixin
+from werkzeug.security import generate_password_hash, check_password_hash
+import secrets
+
+db = SQLAlchemy()
+
+
+class User(UserMixin, db.Model):
+    """User account model for authentication"""
+    __tablename__ = 'users'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(80), unique=True, nullable=False, index=True)
+    email = db.Column(db.String(120), unique=True, nullable=False, index=True)
+    password_hash = db.Column(db.String(255), nullable=False)
+    full_name = db.Column(db.String(120))
+    created_at = db.Column(db.DateTime, default=datetime.utcnow, nullable=False)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+    is_active = db.Column(db.Boolean, default=True, nullable=False)
+    
+    # Relationships
+    screening_uploads = db.relationship('ScreeningUpload', backref='user', lazy=True, cascade='all, delete-orphan')
+    screening_reports = db.relationship('ScreeningReport', backref='user', lazy=True, cascade='all, delete-orphan')
+    
+    def set_password(self, password):
+        """Hash and set the user's password"""
+        self.password_hash = generate_password_hash(password, method='pbkdf2:sha256')
+    
+    def check_password(self, password):
+        """Verify password against stored hash"""
+        return check_password_hash(self.password_hash, password)
+    
+    def __repr__(self):
+        return f'<User {self.username}>'
+
+
+class ScreeningUpload(db.Model):
+    """Track uploaded DICOM files with user ownership"""
+    __tablename__ = 'screening_uploads'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False, index=True)
+    file_name = db.Column(db.String(255), nullable=False)
+    original_filename = db.Column(db.String(255), nullable=False)
+    file_size = db.Column(db.Integer)  # bytes
+    file_path = db.Column(db.String(500), nullable=False)  # Relative to user's upload dir
+    upload_timestamp = db.Column(db.DateTime, default=datetime.utcnow, nullable=False, index=True)
+    processing_status = db.Column(db.String(20), default='pending')  # pending, processing, completed, failed
+    processing_error = db.Column(db.Text)  # Error message if failed
+    
+    # Relationships
+    reports = db.relationship('ScreeningReport', backref='upload', lazy=True, cascade='all, delete-orphan')
+    
+    def __repr__(self):
+        return f'<ScreeningUpload {self.id} - user {self.user_id}>'
+
+
+class ScreeningReport(db.Model):
+    """Store screening results with full user isolation"""
+    __tablename__ = 'screening_reports'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=False, index=True)
+    upload_id = db.Column(db.Integer, db.ForeignKey('screening_uploads.id'), nullable=False, index=True)
+    image_id = db.Column(db.String(100), nullable=False)
+    
+    # Prediction results
+    screening_outcome = db.Column(db.String(100))
+    raw_probability = db.Column(db.Float)
+    calibrated_probability = db.Column(db.Float)
+    confidence_band = db.Column(db.String(50))
+    decision_threshold = db.Column(db.Float)
+    
+    # Triage information
+    triage_action = db.Column(db.String(100))
+    urgency = db.Column(db.String(50))
+    
+    # Ground truth (for validation only)
+    true_label = db.Column(db.String(100))
+    
+    # File paths (relative to user's data dir)
+    report_json_path = db.Column(db.String(500))
+    gradcam_image_path = db.Column(db.String(500))
+    
+    # Generated timestamp
+    generated_at = db.Column(db.DateTime, default=datetime.utcnow, nullable=False, index=True)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow, nullable=False)
+    
+    def __repr__(self):
+        return f'<ScreeningReport {self.id} - user {self.user_id} - {self.image_id}>'
+
+
+class AuditLog(db.Model):
+    """Audit trail for security and compliance"""
+    __tablename__ = 'audit_logs'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id'), nullable=True, index=True)
+    action = db.Column(db.String(100), nullable=False)  # login, logout, upload, delete, download, etc.
+    resource_type = db.Column(db.String(50))  # upload, report, etc.
+    resource_id = db.Column(db.Integer)
+    details = db.Column(db.Text)  # JSON or plain text with additional info
+    ip_address = db.Column(db.String(45))  # IPv4 or IPv6
+    timestamp = db.Column(db.DateTime, default=datetime.utcnow, nullable=False, index=True)
+    status = db.Column(db.String(20), default='success')  # success, failure
+    
+    def __repr__(self):
+        return f'<AuditLog {self.action} - user {self.user_id} - {self.timestamp}>'

render.yaml

@@ -0,0 +1,16 @@
+services:
+  - type: web
+    name: intracranial-hemorrhage-detection
+    env: python
+    plan: free
+    buildCommand: pip install -r requirements.txt
+    startCommand: gunicorn app:app --bind 0.0.0.0:$PORT --workers 1 --timeout 180
+    envVars:
+      - key: ICH_APP_DEBUG
+        value: "0"
+      - key: ICH_LOCAL_MODE
+        value: "0"
+      - key: ICH_MAX_UPLOAD_MB
+        value: "256"
+      - key: ICH_HF_MODEL_REPO
+        value: "HarshCode/eff_b4_brain"

requirements.txt

@@ -1,17 +1,34 @@
-flask
-werkzeug
+# Web Framework & Server
+flask>=3.0.0
+werkzeug>=3.0.0
+gunicorn>=21.0.0
 
-numpy
-pandas
-opencv-python
-pydicom
+# Database & ORM
+SQLAlchemy>=2.0.0
+psycopg2-binary>=2.9.0
+flask-sqlalchemy>=3.1.0
+flask-migrate>=4.0.0
 
-torch
-timm
-scikit-learn
+# Authentication & Security
+flask-login>=0.6.0
+bcrypt>=4.1.0
+python-dotenv>=1.0.0
+cryptography>=41.0.0
 
-blackbox-recorder
-python-dotenv
-huggingface_hub
+# Data Processing & ML
+numpy>=1.24.0
+pandas>=2.0.0
+opencv-python>=4.8.0
+pydicom>=2.4.0
+torch>=2.0.0
+timm>=0.9.0
+scikit-learn>=1.3.0
 
+# Debugging & Monitoring
+blackbox-recorder>=0.2.0
+huggingface_hub>=0.17.0
+
+# Additional utilities
+requests>=2.31.0
+python-dateutil>=2.8.0
 

security.py

@@ -0,0 +1,231 @@
+"""
+Security utilities: headers, CSRF protection, input validation
+"""
+import os
+import logging
+from flask import request
+from datetime import datetime, timedelta
+
+logger = logging.getLogger(__name__)
+
+
+def init_security(app):
+    """Initialize security features for Flask app"""
+    
+    @app.before_request
+    def set_security_headers():
+        """Add security headers to all responses"""
+        pass  # Headers are set in after_request
+    
+    @app.after_request
+    def add_security_headers(response):
+        """Add security headers to all responses"""
+        
+        # Prevent clickjacking attacks
+        response.headers['X-Frame-Options'] = 'SAMEORIGIN'
+        
+        # Prevent MIME type sniffing
+        response.headers['X-Content-Type-Options'] = 'nosniff'
+        
+        # Enable XSS protection in older browsers
+        response.headers['X-XSS-Protection'] = '1; mode=block'
+        
+        # Content Security Policy - restrictive but functional
+        csp = (
+            "default-src 'self'; "
+            "script-src 'self' 'unsafe-inline'; "  # Minimal unsafe-inline for compatibility
+            "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; "
+            "font-src 'self' https://fonts.gstatic.com; "
+            "img-src 'self' data:; "
+            "connect-src 'self'; "
+            "frame-ancestors 'self'; "
+            "base-uri 'self'; "
+            "form-action 'self'"
+        )
+        response.headers['Content-Security-Policy'] = csp
+        
+        # Referrer policy
+        response.headers['Referrer-Policy'] = 'strict-origin-when-cross-origin'
+        
+        # Feature policy / Permissions policy
+        response.headers['Permissions-Policy'] = (
+            'geolocation=(), microphone=(), camera=(), usb=(), payment=()'
+        )
+        
+        # HSTS (HTTP Strict-Transport-Security) - only on HTTPS
+        if request.is_secure or os.environ.get('FLASK_ENV') == 'production':
+            response.headers['Strict-Transport-Security'] = 'max-age=31536000; includeSubDomains'
+        
+        return response
+    
+    # Session security
+    app.config.update(
+        SESSION_COOKIE_SECURE=os.environ.get('FLASK_ENV') == 'production',
+        SESSION_COOKIE_HTTPONLY=True,
+        SESSION_COOKIE_SAMESITE='Lax',
+        PERMANENT_SESSION_LIFETIME=timedelta(days=30),
+    )
+    
+    logger.info("Security headers and features initialized")
+
+
+def sanitize_filename(filename: str, max_length: int = 255) -> str:
+    """
+    Sanitize filename to prevent directory traversal and other attacks.
+    
+    Args:
+        filename: The filename to sanitize
+        max_length: Maximum length for the sanitized filename
+    
+    Returns:
+        Safe filename
+    """
+    import re
+    
+    # Remove any path components
+    filename = os.path.basename(filename)
+    
+    # Remove null bytes
+    filename = filename.replace('\0', '')
+    
+    # Allow only safe characters (alphanumeric, dash, underscore, dot)
+    filename = re.sub(r'[^\w\-\.]', '_', filename)
+    
+    # Remove leading/trailing dots and spaces
+    filename = filename.strip('. ')
+    
+    # Prevent empty filename
+    if not filename:
+        filename = 'file'
+    
+    # Limit length
+    if len(filename) > max_length:
+        # Preserve extension
+        name, ext = os.path.splitext(filename)
+        filename = name[:max_length - len(ext)] + ext
+    
+    return filename
+
+
+def validate_file_extension(filename: str, allowed_extensions: list) -> bool:
+    """
+    Validate that file has an allowed extension.
+    
+    Args:
+        filename: The filename to validate
+        allowed_extensions: List of allowed extensions (without dots)
+    
+    Returns:
+        True if extension is allowed, False otherwise
+    """
+    if not filename or '.' not in filename:
+        return False
+    
+    ext = filename.rsplit('.', 1)[-1].lower()
+    return ext in [e.lower() for e in allowed_extensions]
+
+
+def mask_sensitive_data(data: dict, fields_to_mask: list) -> dict:
+    """
+    Mask sensitive fields in a dictionary before logging or sending to client.
+    
+    Args:
+        data: Dictionary containing data to mask
+        fields_to_mask: List of field names to mask
+    
+    Returns:
+        Dictionary with masked fields
+    """
+    import copy
+    
+    masked = copy.deepcopy(data)
+    for field in fields_to_mask:
+        if field in masked:
+            value = str(masked[field])
+            if len(value) > 4:
+                masked[field] = value[:2] + '*' * (len(value) - 4) + value[-2:]
+            else:
+                masked[field] = '*' * len(value)
+    
+    return masked
+
+
+def get_client_info() -> dict:
+    """Extract client information from request for logging"""
+    return {
+        'ip_address': request.remote_addr,
+        'user_agent': request.headers.get('User-Agent', 'Unknown'),
+        'endpoint': request.endpoint,
+        'method': request.method,
+        'timestamp': datetime.utcnow().isoformat()
+    }
+
+
+class RateLimiter:
+    """Simple in-memory rate limiter for protecting against abuse"""
+    
+    def __init__(self, max_requests: int = 100, window_seconds: int = 60):
+        self.max_requests = max_requests
+        self.window_seconds = window_seconds
+        self.requests = {}  # {key: [(timestamp, count), ...]}
+    
+    def is_rate_limited(self, key: str) -> bool:
+        """Check if a key has exceeded rate limit"""
+        now = datetime.utcnow()
+        window_start = now - timedelta(seconds=self.window_seconds)
+        
+        # Clean old entries
+        if key in self.requests:
+            self.requests[key] = [
+                (ts, count) for ts, count in self.requests[key]
+                if ts > window_start
+            ]
+        
+        # Count requests in window
+        total_requests = sum(count for _, count in self.requests.get(key, []))
+        
+        return total_requests >= self.max_requests
+    
+    def record_request(self, key: str):
+        """Record a request for rate limiting"""
+        now = datetime.utcnow()
+        
+        if key not in self.requests:
+            self.requests[key] = []
+        
+        # Add or increment the count for this second
+        if self.requests[key] and self.requests[key][-1][0] == now:
+            ts, count = self.requests[key][-1]
+            self.requests[key][-1] = (ts, count + 1)
+        else:
+            self.requests[key].append((now, 1))
+
+
+# Global rate limiter instances
+login_rate_limiter = RateLimiter(max_requests=5, window_seconds=300)  # 5 attempts in 5 minutes
+upload_rate_limiter = RateLimiter(max_requests=20, window_seconds=3600)  # 20 uploads per hour
+
+
+def check_login_rate_limit(identifier: str) -> tuple[bool, str]:
+    """
+    Check if login attempt should be rate limited.
+    Returns (is_limited, message)
+    """
+    if login_rate_limiter.is_rate_limited(identifier):
+        return True, "Too many login attempts. Please try again later."
+    
+    login_rate_limiter.record_request(identifier)
+    return False, ""
+
+
+def check_upload_rate_limit(user_id: int) -> tuple[bool, str]:
+    """
+    Check if upload should be rate limited.
+    Returns (is_limited, message)
+    """
+    key = f"upload_{user_id}"
+    if upload_rate_limiter.is_rate_limited(key):
+        return True, "Upload rate limit exceeded. Maximum 20 uploads per hour."
+    
+    upload_rate_limiter.record_request(key)
+    return False, ""

static/css/auth.css

@@ -0,0 +1,356 @@
+/* ═══════════════════════════════════════════════════
+   ICH Screening — Auth Pages CSS
+   Split-layout, glassmorphism, micro-animations
+   ═══════════════════════════════════════════════════ */
+
+/* ── Auth root ──────────────────────────────────── */
+.auth-page {
+  min-height: 100vh;
+  display: flex;
+  background: #070d1a;
+  overflow: hidden;
+}
+
+/* ── Left brand panel ───────────────────────────── */
+.auth-brand {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 56px 52px;
+  width: 44%;
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(ellipse 700px 500px at 15% 25%, rgba(110,168,254,.14) 0%, transparent 70%),
+    radial-gradient(ellipse 500px 500px at 85% 80%, rgba(99,102,241,.12) 0%, transparent 65%),
+    linear-gradient(145deg, #0a1628 0%, #0d1f3c 50%, #0c1427 100%);
+  border-right: 1px solid rgba(36,51,86,.6);
+}
+.auth-brand::before {
+  content: '';
+  position: absolute;
+  width: 380px; height: 380px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(110,168,254,.07) 0%, transparent 70%);
+  top: -80px; left: -80px;
+  animation: orb 7s ease-in-out infinite;
+}
+.auth-brand::after {
+  content: '';
+  position: absolute;
+  width: 280px; height: 280px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(99,102,241,.09) 0%, transparent 70%);
+  bottom: -60px; right: -60px;
+  animation: orb 9s ease-in-out infinite reverse;
+}
+@keyframes orb {
+  0%,100%{ transform:scale(1); opacity:.8; }
+  50%    { transform:scale(1.18); opacity:1; }
+}
+
+.auth-brand-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 48px;
+  position: relative; z-index: 1;
+}
+.auth-brand-icon {
+  width: 42px; height: 42px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #6ea8fe 0%, #6366f1 100%);
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 0 22px rgba(110,168,254,.4);
+}
+.auth-brand-icon svg { color: #fff; }
+.auth-brand-name {
+  font-size: 1.05rem; font-weight: 800;
+  color: #e8ecf6; letter-spacing: -.02em;
+}
+
+.auth-headline {
+  position: relative; z-index: 1; margin-bottom: 20px;
+}
+.auth-headline h2 {
+  font-size: 2rem; font-weight: 800;
+  line-height: 1.2; letter-spacing: -.03em;
+  color: #e8ecf6; margin-bottom: 12px;
+}
+.auth-headline h2 .grad {
+  background: linear-gradient(135deg, #6ea8fe 0%, #a78bfa 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.auth-headline p {
+  font-size: .95rem; color: #8ba0c4;
+  line-height: 1.65; max-width: 320px;
+}
+
+.auth-features {
+  list-style: none; padding: 0; margin: 32px 0 0;
+  display: flex; flex-direction: column; gap: 14px;
+  position: relative; z-index: 1;
+}
+.auth-features li {
+  display: flex; align-items: center; gap: 12px;
+  font-size: .9rem; color: #8ba0c4;
+}
+.feat-icon {
+  width: 32px; height: 32px; border-radius: 9px;
+  background: rgba(110,168,254,.1);
+  border: 1px solid rgba(110,168,254,.2);
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0; color: #6ea8fe;
+}
+
+.auth-illustration {
+  position: relative; z-index: 1;
+  margin-top: 44px; display: flex; justify-content: center;
+}
+.auth-illustration svg {
+  filter: drop-shadow(0 0 28px rgba(110,168,254,.25));
+  animation: float-scan 4s ease-in-out infinite;
+}
+@keyframes float-scan {
+  0%,100%{ transform:translateY(0); }
+  50%    { transform:translateY(-10px); }
+}
+
+/* ── Right form panel ───────────────────────────── */
+.auth-form-panel {
+  flex: 1;
+  display: flex; flex-direction: column;
+  justify-content: center; align-items: center;
+  padding: 48px 40px;
+  overflow-y: auto;
+}
+.auth-card {
+  width: 100%; max-width: 420px;
+  animation: slide-in .4s cubic-bezier(.16,1,.3,1) both;
+}
+@keyframes slide-in {
+  from{ opacity:0; transform:translateX(22px); }
+  to  { opacity:1; transform:translateX(0); }
+}
+.auth-card-header { margin-bottom: 28px; }
+.auth-card-header h2 {
+  font-size: 1.7rem; font-weight: 800;
+  color: #e8ecf6; letter-spacing: -.03em; margin-bottom: 5px;
+}
+.auth-card-header p { color: #8ba0c4; font-size: .9rem; }
+
+/* ── Alerts ──────────────────────────────────────── */
+.auth-alerts { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
+.alert {
+  display:flex; align-items:flex-start; gap:10px;
+  padding:11px 15px; border-radius:10px;
+  font-size:.87rem; line-height:1.5;
+  animation:alert-in .3s ease;
+}
+@keyframes alert-in { from{opacity:0;transform:translateY(-7px);} to{opacity:1;transform:translateY(0);} }
+.alert-error   { background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.3); color:#fb7185; }
+.alert-success { background:rgba(52,211,153,.1);  border:1px solid rgba(52,211,153,.3);  color:#34d399; }
+.alert-info    { background:rgba(110,168,254,.1); border:1px solid rgba(110,168,254,.3); color:#6ea8fe; }
+
+/* ── Form ────────────────────────────────────────── */
+.auth-form { display:flex; flex-direction:column; gap:16px; }
+.form-group { display:flex; flex-direction:column; gap:6px; }
+.form-group label {
+  font-size:.78rem; font-weight:700;
+  color:#8ba0c4; text-transform:uppercase; letter-spacing:.06em;
+}
+.form-hint { font-size:.76rem; color:#3d5482; margin-top:2px; }
+
+.input-wrap { position:relative; }
+.input-icon {
+  position:absolute; left:13px; top:50%; transform:translateY(-50%);
+  color:#3d5482; pointer-events:none; transition:color .2s;
+}
+.input-wrap input {
+  width:100%;
+  background:rgba(11,18,36,.8);
+  color:#e8ecf6;
+  border:1px solid #243356;
+  border-radius:11px;
+  padding:12px 13px 12px 40px;
+  font-size:.92rem; font-family:inherit;
+  transition:border-color .2s,box-shadow .2s,background .2s;
+  -webkit-appearance:none;
+}
+.input-wrap input::placeholder { color:#3d5482; }
+.input-wrap input:focus {
+  outline:none;
+  border-color:#6ea8fe;
+  background:rgba(15,24,50,.9);
+  box-shadow:0 0 0 3px rgba(110,168,254,.12);
+}
+.input-wrap:focus-within .input-icon { color:#6ea8fe; }
+.input-wrap input.has-toggle { padding-right:40px; }
+
+.btn-pw-toggle {
+  position:absolute; right:11px; top:50%; transform:translateY(-50%);
+  background:transparent; border:none; color:#3d5482;
+  cursor:pointer; padding:4px; border-radius:6px;
+  display:flex; align-items:center; transition:color .2s;
+}
+.btn-pw-toggle:hover { color:#6ea8fe; background:transparent; border:none; box-shadow:none; }
+
+/* password strength */
+.pw-strength-bar {
+  height:3px; border-radius:3px; background:#162244; overflow:hidden; margin-top:6px;
+}
+.pw-strength-fill {
+  height:100%; border-radius:3px; transition:width .35s ease,background .35s ease; width:0%;
+}
+.pw-strength-text { font-size:.73rem; margin-top:3px; font-weight:700; }
+.pw-strength-fill.weak   { width:25%; background:#fb7185; }
+.pw-strength-fill.fair   { width:55%; background:#fbbf24; }
+.pw-strength-fill.good   { width:78%; background:#34d399; }
+.pw-strength-fill.strong { width:100%; background:#6ea8fe; }
+.pw-strength-text.weak   { color:#fb7185; }
+.pw-strength-text.fair   { color:#fbbf24; }
+.pw-strength-text.good   { color:#34d399; }
+.pw-strength-text.strong { color:#6ea8fe; }
+
+/* remember / forgot row */
+.auth-row {
+  display:flex; align-items:center;
+  justify-content:space-between; flex-wrap:wrap; gap:8px;
+}
+.form-check { display:flex; align-items:center; gap:7px; cursor:pointer; }
+.form-check-input { width:15px; height:15px; accent-color:#6ea8fe; cursor:pointer; }
+.form-check-label { font-size:.86rem; color:#8ba0c4; cursor:pointer; }
+.auth-link-sm {
+  font-size:.83rem; color:#6ea8fe; text-decoration:none; transition:color .2s;
+}
+.auth-link-sm:hover { color:#a8c9ff; text-decoration:underline; }
+
+/* submit button */
+.btn-auth-submit {
+  width:100%; padding:13px;
+  background:linear-gradient(135deg,#6ea8fe 0%,#6366f1 100%);
+  color:#fff; border:none; border-radius:12px;
+  font-size:.93rem; font-weight:700; font-family:inherit;
+  cursor:pointer; letter-spacing:.01em; margin-top:4px;
+  box-shadow:0 4px 20px rgba(110,168,254,.3);
+  transition:opacity .2s,transform .15s,box-shadow .2s;
+}
+.btn-auth-submit:hover {
+  opacity:.9; transform:translateY(-1px);
+  box-shadow:0 6px 26px rgba(110,168,254,.4);
+  border:none; background:linear-gradient(135deg,#6ea8fe 0%,#6366f1 100%);
+}
+.btn-auth-submit:active { transform:translateY(0); }
+
+/* footer */
+.auth-footer {
+  margin-top:24px; text-align:center;
+  font-size:.87rem; color:#8ba0c4;
+}
+.auth-footer a { color:#6ea8fe; font-weight:600; text-decoration:none; transition:color .2s; }
+.auth-footer a:hover { color:#a8c9ff; }
+
+/* ── Profile ─────────────────────────────────────── */
+.profile-page { max-width:660px; margin:0 auto; padding-top:16px; }
+.profile-hero {
+  display:flex; align-items:center; gap:22px;
+  margin-bottom:24px; padding:26px 28px;
+  background:linear-gradient(135deg,#111c33 0%,#162244 100%);
+  border:1px solid #243356; border-radius:20px; position:relative; overflow:hidden;
+}
+.profile-hero::before {
+  content:''; position:absolute; inset:0;
+  background:radial-gradient(ellipse 400px 250px at 0% 0%,rgba(110,168,254,.07),transparent);
+  pointer-events:none;
+}
+.profile-avatar {
+  width:68px; height:68px; border-radius:50%;
+  background:linear-gradient(135deg,#6ea8fe,#6366f1);
+  display:flex; align-items:center; justify-content:center;
+  font-size:1.7rem; font-weight:800; color:#fff; flex-shrink:0;
+  box-shadow:0 0 0 4px rgba(110,168,254,.15),0 0 22px rgba(110,168,254,.28);
+}
+.profile-identity h2 {
+  font-size:1.35rem; font-weight:800; color:#e8ecf6; letter-spacing:-.02em;
+}
+.profile-identity .profile-email { color:#8ba0c4; font-size:.88rem; margin-top:2px; }
+.profile-badge {
+  display:inline-flex; align-items:center; gap:5px; margin-top:8px;
+  font-size:.75rem; color:#6ea8fe; font-weight:700;
+  background:rgba(110,168,254,.1); border:1px solid rgba(110,168,254,.2);
+  border-radius:999px; padding:3px 11px;
+}
+
+.profile-section {
+  background:linear-gradient(180deg,#162244 0%,#111c33 100%);
+  border:1px solid #243356; border-radius:16px;
+  padding:22px 26px; margin-bottom:14px;
+}
+.profile-section h3 {
+  font-size:.78rem; font-weight:700; color:#8ba0c4;
+  text-transform:uppercase; letter-spacing:.07em; margin-bottom:16px;
+  display:flex; align-items:center; gap:8px;
+}
+.profile-section h3 svg { color:#6ea8fe; }
+.profile-row {
+  display:flex; justify-content:space-between; align-items:center;
+  padding:10px 0; border-bottom:1px solid rgba(36,51,86,.5);
+  font-size:.9rem; gap:12px;
+}
+.profile-row:last-child { border-bottom:none; }
+.pr-label { color:#8ba0c4; font-weight:500; }
+.pr-value  { color:#e8ecf6; font-weight:600; text-align:right; }
+
+/* inline pw form */
+.pw-change-section { display:flex; flex-direction:column; gap:12px; margin-top:4px; }
+.pw-toggle-btn {
+  display:inline-flex; align-items:center; gap:7px;
+  background:transparent; border:1px solid #243356; color:#6ea8fe;
+  font-size:.86rem; padding:8px 16px; border-radius:9px; cursor:pointer;
+  font-family:inherit; font-weight:600; transition:all .2s; width:fit-content;
+}
+.pw-toggle-btn:hover { background:rgba(110,168,254,.08); border-color:#6ea8fe; }
+.pw-change-fields { display:none; flex-direction:column; gap:12px; }
+.pw-change-fields.active { display:flex; }
+.pw-action-row { display:flex; gap:9px; flex-wrap:wrap; }
+.btn-save-pw {
+  padding:9px 20px; background:linear-gradient(135deg,#6ea8fe,#6366f1);
+  color:#fff; border:none; border-radius:9px;
+  font-weight:700; font-family:inherit; cursor:pointer; font-size:.86rem;
+  transition:opacity .2s,transform .15s;
+}
+.btn-save-pw:hover { opacity:.88; transform:translateY(-1px); border:none; }
+.btn-cancel-pw {
+  padding:9px 20px; background:transparent; border:1px solid #243356;
+  color:#8ba0c4; border-radius:9px; font-weight:600;
+  font-family:inherit; cursor:pointer; font-size:.86rem; transition:all .2s;
+}
+.btn-cancel-pw:hover { border-color:#6ea8fe; color:#6ea8fe; background:transparent; }
+#pwMessage { font-size:.83rem; padding:9px 13px; border-radius:9px; display:none; }
+#pwMessage.success { display:block; background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.3); color:#34d399; }
+#pwMessage.error   { display:block; background:rgba(251,113,133,.1); border:1px solid rgba(251,113,133,.3); color:#fb7185; }
+
+/* danger zone */
+.profile-danger { border-color:rgba(251,113,133,.22); background:linear-gradient(180deg,rgba(251,113,133,.05) 0%,#111c33 100%); }
+.profile-danger h3 { color:#fb7185; }
+.profile-danger h3 svg { color:#fb7185; }
+.btn-logout-danger {
+  display:inline-flex; align-items:center; gap:8px;
+  padding:9px 20px; background:rgba(251,113,133,.1);
+  border:1px solid rgba(251,113,133,.28); color:#fb7185;
+  border-radius:10px; font-weight:700; font-family:inherit;
+  font-size:.88rem; cursor:pointer; transition:all .2s;
+}
+.btn-logout-danger:hover { background:rgba(251,113,133,.18); border-color:#fb7185; transform:none; }
+
+/* ── Responsive ─────────────────────────────────── */
+@media(max-width:860px){
+  .auth-brand { display:none; }
+  .auth-form-panel { padding:40px 28px; background:#070d1a; }
+}
+@media(max-width:480px){
+  .auth-form-panel { padding:32px 18px; }
+  .auth-card-header h2 { font-size:1.45rem; }
+}

static/css/base.css

@@ -0,0 +1,229 @@
+/* Shared user menu and profile modal styles */
+/* ═══════════════════════════════════════════════════════════════
+   ICH Screening Dashboard — Stylesheet
+   ═══════════════════════════════════════════════════════════════ */
+
+:root {
+  --bg: #070d1a;
+  --bg2: #0c1427;
+  --panel: #111c33;
+  --panel2: #162244;
+  --surface: #1a2850;
+  --text: #e8ecf6;
+  --muted: #8ba0c4;
+  --line: #243356;
+  --accent: #6ea8fe;
+  --green: #34d399;
+  --red: #fb7185;
+  --orange: #fbbf24;
+  --blue: #60a5fa;
+  --radius: 14px;
+}
+
+/* ── Reset ─────────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+html {
+  scroll-behavior: smooth;
+}
+body {
+  font-family:
+    "Inter",
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  background:
+    radial-gradient(
+      ellipse 1400px 500px at 5% -5%,
+      #1a2f55 0%,
+      transparent 60%
+    ),
+    radial-gradient(
+      ellipse 1200px 500px at 95% -5%,
+      #2a1d46 0%,
+      transparent 55%
+    ),
+    var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  min-height: 100vh;
+}
+
+/* ── Layout ────────────────────────────────────────────────── */
+.container {
+  width: min(1240px, 94vw);
+  margin: 0 auto;
+}
+.page {
+  padding: 20px 0 48px;
+}
+
+/* ── Topbar ────────────────────────────────────────────────── */
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: rgba(7, 13, 26, 0.88);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--line);
+}
+.topbar-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 14px 24px;
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 800;
+  font-size: 1.05rem;
+  color: var(--text);
+  text-decoration: none;
+}
+.brand-icon {
+  color: var(--accent);
+  display: flex;
+}
+.nav-links {
+  display: flex;
+  gap: 6px;
+}
+.nav-links a {
+  padding: 6px 14px;
+  border-radius: 8px;
+  color: var(--muted);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.9rem;
+  transition: all 0.15s;
+}
+.nav-links a:hover {
+  color: var(--text);
+  background: var(--panel);
+}
+.nav-links a.active {
+  color: var(--accent);
+  background: rgba(110, 168, 254, 0.1);
+}
+
+/* ── Hero ──────────────────────────────────────────────────── */
+.hero {
+  padding: 8px 0 6px;
+}
+.hero h1 {
+  font-size: 1.8rem;
+  font-weight: 800;
+}
+.hero p {
+  color: var(--muted);
+  margin-top: 6px;
+}
+
+/* ── Stats row ─────────────────────────────────────────────── */
+.stats-row {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 12px;
+  margin: 16px 0;
+}
+.stat-card {
+  background: linear-gradient(180deg, var(--panel2), var(--panel));
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 16px;
+}
+.stat-label {
+  font-size: 0.82rem;
+  color: var(--muted);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.stat-value {
+  font-size: 1.6rem;
+  font-weight: 800;
+  margin-top: 4px;
+}
+.stat-card.accent-green .stat-value {
+  color: var(--green);
+}
+.stat-card.accent-red .stat-value {
+  color: var(--red);
+}
+.stat-card.accent-orange .stat-value {
+  color: var(--orange);
+}
+.stat-card.accent-blue .stat-value {
+  color: var(--blue);
+}
+
+/* ── Info bar ──────────────────────────────────────────────── */
+.info-bar {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  padding: 10px 16px;
+  border-radius: 10px;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  font-size: 0.88rem;
+  color: var(--muted);
+  margin-bottom: 12px;
+}
+.info-bar strong {
+  color: var(--text);
+}
+
+/* ── Panel ─────────────────────────────────────────────────── */
+.panel {
+  background: linear-gradient(180deg, var(--panel2), var(--panel));
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 20px;
+  margin-top: 16px;
+}
+.panel h3 {
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+
+/* ── Filters ───────────────────────────────────────────────── */
+.filters {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+}
+.filters input,
+.filters select {
+  flex: 1;
+  min-width: 140px;
+}
+input,
+select {
+  background: var(--bg2);
+  color: var(--text);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 10px 12px;
+  font-size: 0.9rem;
+  font-family: inherit;
+  transition: border-color 0.15s;
+}
+input:focus,
+select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+

static/css/components.css

@@ -0,0 +1,139 @@
+/* ── Buttons ───────────────────────────────────────────────── */
+.btn,
+button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: 10px;
+  border: 1px solid var(--line);
+  background: var(--panel);
+  color: var(--text);
+  font-size: 0.88rem;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.15s;
+}
+.btn:hover,
+button:hover {
+  border-color: var(--accent);
+  background: var(--surface);
+}
+.btn-sm {
+  padding: 5px 12px;
+  font-size: 0.82rem;
+}
+.btn-ghost {
+  background: transparent;
+}
+.btn-outline {
+  background: transparent;
+  border-color: var(--line);
+  color: var(--muted);
+}
+.btn-outline:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* ── Table ─────────────────────────────────────────────────── */
+.table-wrap {
+  overflow-x: auto;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 940px;
+}
+th,
+td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+}
+th {
+  color: var(--muted);
+  font-weight: 600;
+  font-size: 0.82rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+tr.row-positive {
+  background: rgba(251, 113, 133, 0.04);
+}
+a {
+  color: var(--accent);
+  transition: color 0.15s;
+}
+a:hover {
+  color: #9ec5ff;
+}
+
+.link-icon {
+  display: inline-flex;
+}
+
+/* ── Badges ────────────────────────────────────────────────── */
+.badge {
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.04);
+}
+.badge-high {
+  border-color: #3b82f6;
+  color: #93bbfd;
+}
+.badge-medium {
+  border-color: #f59e0b;
+  color: #fcd34d;
+}
+.badge-low {
+  border-color: #6b7280;
+  color: #9ca3af;
+}
+.badge-urgent {
+  border-color: #ef4444;
+  color: #fca5a5;
+  background: rgba(239, 68, 68, 0.08);
+}
+.badge-standard {
+  border-color: #22c55e;
+  color: #86efac;
+}
+
+/* ── Dots ──────────────────────────────────────────────────── */
+.dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+.dot-green {
+  background: var(--green);
+  box-shadow: 0 0 8px var(--green);
+}
+.dot-red {
+  background: var(--red);
+  box-shadow: 0 0 8px var(--red);
+}
+
+/* ── Utility ───────────────────────────────────────────────── */
+.mono {
+  font-family: "Consolas", "SF Mono", "Fira Code", monospace;
+}
+.muted {
+  color: var(--muted);
+}
+.small {
+  font-size: 0.85rem;
+}
+

static/css/error_pages.css

@@ -0,0 +1,197 @@
+/* ═══════════════════════════════════════════════════
+   ICH Screening — Error Pages (404 / 500)
+   Standalone full-viewport animated pages
+   ═══════════════════════════════════════════════════ */
+
+.error-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background:
+    radial-gradient(ellipse 900px 600px at 50% 0%, rgba(110,168,254,.08) 0%, transparent 65%),
+    radial-gradient(ellipse 600px 500px at 80% 90%, rgba(99,102,241,.07) 0%, transparent 60%),
+    #070d1a;
+  font-family: "Inter", system-ui, -apple-system, sans-serif;
+  color: #e8ecf6;
+  text-align: center;
+  padding: 40px 24px;
+  position: relative;
+  overflow: hidden;
+}
+
+/* floating background orbs */
+.error-orb {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  animation: orb-drift linear infinite;
+  opacity: 0;
+}
+.error-orb:nth-child(1){
+  width:320px;height:320px;
+  background:radial-gradient(circle,rgba(110,168,254,.06),transparent 70%);
+  top:-80px;left:-80px; animation-duration:12s; animation-delay:0s;
+}
+.error-orb:nth-child(2){
+  width:240px;height:240px;
+  background:radial-gradient(circle,rgba(99,102,241,.08),transparent 70%);
+  bottom:-60px;right:-60px; animation-duration:15s; animation-delay:-4s;
+}
+.error-orb:nth-child(3){
+  width:180px;height:180px;
+  background:radial-gradient(circle,rgba(251,113,133,.05),transparent 70%);
+  top:50%;left:60%; animation-duration:10s; animation-delay:-7s;
+}
+@keyframes orb-drift {
+  0%   { opacity:0; transform:scale(.8) translate(0,0); }
+  15%  { opacity:1; }
+  85%  { opacity:1; }
+  100% { opacity:0; transform:scale(1.1) translate(20px,20px); }
+}
+
+/* big number */
+.error-code {
+  font-size: clamp(7rem, 18vw, 14rem);
+  font-weight: 900;
+  line-height: 1;
+  letter-spacing: -.05em;
+  position: relative;
+  z-index: 1;
+  background: linear-gradient(135deg, #6ea8fe 10%, #a78bfa 50%, #6366f1 90%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  filter: drop-shadow(0 0 48px rgba(110,168,254,.35));
+  animation: code-in 0.7s cubic-bezier(.16,1,.3,1) both;
+}
+@keyframes code-in {
+  from{ opacity:0; transform:scale(.85) translateY(20px); }
+  to  { opacity:1; transform:scale(1) translateY(0); }
+}
+
+/* animated scan line inside code */
+.error-code-wrap {
+  position: relative;
+  display: inline-block;
+}
+.error-scanline {
+  position: absolute;
+  left: 0; right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, rgba(110,168,254,.6), transparent);
+  animation: scanline 2.5s linear infinite;
+  top: 50%;
+}
+@keyframes scanline {
+  from { transform:translateY(-80px); opacity:0; }
+  10%  { opacity:1; }
+  90%  { opacity:1; }
+  to   { transform:translateY(80px); opacity:0; }
+}
+
+/* SVG illustration */
+.error-illustration {
+  margin: -10px 0 28px;
+  position: relative; z-index: 1;
+  animation: float-err 4s ease-in-out infinite;
+}
+@keyframes float-err {
+  0%,100%{ transform:translateY(0); }
+  50%    { transform:translateY(-10px); }
+}
+
+/* text */
+.error-title {
+  font-size: 1.6rem; font-weight: 800;
+  letter-spacing: -.02em; margin-bottom: 12px;
+  position: relative; z-index: 1;
+  animation: fade-up .5s ease .2s both;
+}
+.error-desc {
+  font-size: 1rem; color: #8ba0c4;
+  max-width: 440px; line-height: 1.7;
+  margin: 0 auto 36px;
+  position: relative; z-index: 1;
+  animation: fade-up .5s ease .3s both;
+}
+@keyframes fade-up {
+  from{ opacity:0; transform:translateY(14px); }
+  to  { opacity:1; transform:translateY(0); }
+}
+
+/* action buttons */
+.error-actions {
+  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
+  position: relative; z-index: 1;
+  animation: fade-up .5s ease .4s both;
+}
+.btn-err-primary {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 12px 28px;
+  background: linear-gradient(135deg,#6ea8fe,#6366f1);
+  color: #fff; text-decoration: none;
+  border-radius: 12px; font-weight: 700; font-size: .95rem;
+  font-family: inherit;
+  box-shadow: 0 4px 20px rgba(110,168,254,.35);
+  transition: opacity .2s, transform .15s, box-shadow .2s;
+  border: none; cursor: pointer;
+}
+.btn-err-primary:hover {
+  opacity: .9; transform: translateY(-2px);
+  box-shadow: 0 6px 26px rgba(110,168,254,.45);
+  color: #fff;
+}
+.btn-err-secondary {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 12px 28px;
+  background: transparent;
+  border: 1px solid #243356; color: #8ba0c4;
+  text-decoration: none; border-radius: 12px;
+  font-weight: 600; font-size: .93rem;
+  font-family: inherit; cursor: pointer;
+  transition: all .2s;
+}
+.btn-err-secondary:hover {
+  border-color: #6ea8fe; color: #6ea8fe; background: rgba(110,168,254,.06);
+}
+
+/* error code badge */
+.error-badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  margin-bottom: 16px;
+  padding: 5px 14px;
+  border-radius: 999px; font-size: .78rem; font-weight: 700;
+  letter-spacing: .06em; text-transform: uppercase;
+  position: relative; z-index: 1;
+  animation: fade-up .4s ease .1s both;
+}
+.error-badge-404 {
+  background: rgba(110,168,254,.1);
+  border: 1px solid rgba(110,168,254,.25);
+  color: #6ea8fe;
+}
+.error-badge-500 {
+  background: rgba(251,113,133,.1);
+  border: 1px solid rgba(251,113,133,.25);
+  color: #fb7185;
+}
+
+/* footer brand link */
+.error-footer {
+  position: absolute; bottom: 24px;
+  font-size: .8rem; color: #3d5482;
+}
+.error-footer a { color: #6ea8fe; text-decoration: none; }
+.error-footer a:hover { text-decoration: underline; }
+
+/* 500 specific tint */
+.error-page-500 .error-code {
+  background: linear-gradient(135deg,#fb7185 10%,#f97316 60%,#fbbf24 100%);
+  -webkit-background-clip: text; background-clip: text;
+  filter: drop-shadow(0 0 48px rgba(251,113,133,.3));
+}
+.error-page-500 .error-scanline {
+  background: linear-gradient(90deg,transparent,rgba(251,113,133,.5),transparent);
+}

static/css/home.css

@@ -0,0 +1,364 @@
+/* ═══════════════════════════════════════════════════
+   ICH Screening — Home / Dashboard Page Styles
+   ═══════════════════════════════════════════════════ */
+
+/* ── Landing hero ─────────────────────────────────── */
+.landing-hero {
+  text-align: center;
+  padding: 72px 0 48px;
+  position: relative;
+}
+.landing-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 14px;
+  border-radius: 999px;
+  font-size: .75rem;
+  font-weight: 700;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  background: rgba(110,168,254,.1);
+  border: 1px solid rgba(110,168,254,.25);
+  color: #6ea8fe;
+  margin-bottom: 20px;
+  animation: badge-pop .5s cubic-bezier(.16,1,.3,1) both;
+}
+@keyframes badge-pop {
+  from { opacity: 0; transform: scale(.85); }
+  to   { opacity: 1; transform: scale(1); }
+}
+.badge-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #6ea8fe;
+  animation: blink 1.8s ease-in-out infinite;
+}
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: .3; }
+}
+.landing-hero h1 {
+  font-size: clamp(2.2rem, 5vw, 3.4rem);
+  font-weight: 900;
+  line-height: 1.12;
+  letter-spacing: -.04em;
+  margin-bottom: 18px;
+  animation: hero-in .6s cubic-bezier(.16,1,.3,1) .1s both;
+}
+@keyframes hero-in {
+  from { opacity: 0; transform: translateY(22px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.hero-grad {
+  background: linear-gradient(135deg, #6ea8fe 0%, #a78bfa 55%, #6366f1 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.landing-hero p {
+  font-size: 1.1rem;
+  color: #8ba0c4;
+  max-width: 580px;
+  margin: 0 auto 36px;
+  line-height: 1.7;
+  animation: hero-in .6s cubic-bezier(.16,1,.3,1) .2s both;
+}
+.hero-cta-row {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+  animation: hero-in .6s cubic-bezier(.16,1,.3,1) .3s both;
+}
+.btn-hero-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 13px 30px;
+  background: linear-gradient(135deg, #6ea8fe, #6366f1);
+  color: #fff;
+  text-decoration: none;
+  border-radius: 14px;
+  font-weight: 700;
+  font-size: .96rem;
+  border: none;
+  box-shadow: 0 4px 22px rgba(110,168,254,.35);
+  transition: opacity .2s, transform .15s, box-shadow .2s;
+  cursor: pointer;
+}
+.btn-hero-primary:hover {
+  opacity: .9;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 28px rgba(110,168,254,.45);
+  color: #fff;
+}
+.btn-hero-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 13px 28px;
+  background: transparent;
+  border: 1px solid #243356;
+  color: #8ba0c4;
+  text-decoration: none;
+  border-radius: 14px;
+  font-weight: 600;
+  font-size: .94rem;
+  cursor: pointer;
+  transition: all .2s;
+}
+.btn-hero-secondary:hover {
+  border-color: #6ea8fe;
+  color: #6ea8fe;
+  background: rgba(110,168,254,.06);
+}
+
+/* ── Stats grid ───────────────────────────────────── */
+.stats-section {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 12px;
+  margin: 48px 0 0;
+}
+.stat-card {
+  background: linear-gradient(180deg, #162244, #111c33);
+  border: 1px solid #243356;
+  border-radius: 14px;
+  padding: 18px 16px;
+  animation: card-in .5s cubic-bezier(.16,1,.3,1) both;
+  transition: transform .2s, box-shadow .2s;
+}
+.stat-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px rgba(0,0,0,.3);
+}
+@keyframes card-in {
+  from { opacity: 0; transform: translateY(14px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.stat-label {
+  font-size: .78rem;
+  color: #8ba0c4;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+}
+.stat-value {
+  font-size: 1.7rem;
+  font-weight: 900;
+  margin-top: 6px;
+}
+.stat-card.accent-red    .stat-value { color: #fb7185; }
+.stat-card.accent-green  .stat-value { color: #34d399; }
+.stat-card.accent-orange .stat-value { color: #fbbf24; }
+.stat-card.accent-blue   .stat-value { color: #6ea8fe; }
+
+/* ── Section heading ──────────────────────────────── */
+.section-heading {
+  margin: 52px 0 20px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.section-heading h2 {
+  font-size: 1.15rem;
+  font-weight: 800;
+  color: #e8ecf6;
+  letter-spacing: -.02em;
+}
+.section-line {
+  flex: 1;
+  height: 1px;
+  background: #243356;
+}
+
+/* ── Main action cards ────────────────────────────── */
+.action-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 18px;
+}
+.action-card {
+  display: block;
+  text-decoration: none;
+  background: linear-gradient(135deg, #162244 0%, #111c33 100%);
+  border: 1px solid #243356;
+  border-radius: 18px;
+  padding: 28px;
+  transition: transform .2s, box-shadow .2s, border-color .2s;
+  position: relative;
+  overflow: hidden;
+  animation: card-in .5s cubic-bezier(.16,1,.3,1) .1s both;
+}
+.action-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse 300px 200px at 0% 0%, rgba(110,168,254,.07), transparent);
+  opacity: 0;
+  transition: opacity .3s;
+}
+.action-card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(110,168,254,.4);
+  box-shadow: 0 12px 36px rgba(0,0,0,.35);
+}
+.action-card:hover::before { opacity: 1; }
+.action-card-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
+  background: rgba(110,168,254,.1);
+  border: 1px solid rgba(110,168,254,.18);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6ea8fe;
+  margin-bottom: 18px;
+  transition: background .2s, box-shadow .2s;
+}
+.action-card:hover .action-card-icon {
+  background: rgba(110,168,254,.16);
+  box-shadow: 0 0 18px rgba(110,168,254,.2);
+}
+.action-card h2 {
+  font-size: 1.1rem;
+  font-weight: 800;
+  color: #e8ecf6;
+  margin-bottom: 8px;
+  letter-spacing: -.02em;
+}
+.action-card p {
+  font-size: .88rem;
+  color: #8ba0c4;
+  line-height: 1.65;
+  margin-bottom: 16px;
+}
+.action-card-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: .84rem;
+  font-weight: 700;
+  color: #6ea8fe;
+  transition: gap .2s;
+}
+.action-card:hover .action-card-cta { gap: 9px; }
+
+/* ── Mini cards ───────────────────────────────────── */
+.mini-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+  margin-top: 18px;
+}
+.mini-card {
+  display: block;
+  text-decoration: none;
+  background: #111c33;
+  border: 1px solid #243356;
+  border-radius: 14px;
+  padding: 20px;
+  transition: transform .2s, border-color .2s, box-shadow .2s;
+  animation: card-in .5s cubic-bezier(.16,1,.3,1) .2s both;
+}
+.mini-card:hover {
+  transform: translateY(-3px);
+  border-color: rgba(110,168,254,.3);
+  box-shadow: 0 8px 24px rgba(0,0,0,.25);
+}
+.mini-card-icon {
+  color: #6ea8fe;
+  margin-bottom: 12px;
+}
+.mini-card h3 {
+  font-size: .95rem;
+  font-weight: 700;
+  color: #e8ecf6;
+  margin-bottom: 4px;
+}
+.mini-card p {
+  font-size: .82rem;
+  color: #8ba0c4;
+  line-height: 1.5;
+}
+
+/* ── How it works ─────────────────────────────────── */
+.how-section { margin: 52px 0 0; }
+.how-steps {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14px;
+  margin-top: 18px;
+}
+.how-step {
+  background: #111c33;
+  border: 1px solid #243356;
+  border-radius: 14px;
+  padding: 22px;
+  animation: card-in .5s cubic-bezier(.16,1,.3,1) both;
+}
+.how-step:nth-child(1) { animation-delay: .05s; }
+.how-step:nth-child(2) { animation-delay: .12s; }
+.how-step:nth-child(3) { animation-delay: .19s; }
+.how-step:nth-child(4) { animation-delay: .26s; }
+.how-num {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6ea8fe, #6366f1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: .78rem;
+  font-weight: 900;
+  color: #fff;
+  margin-bottom: 14px;
+  box-shadow: 0 0 12px rgba(110,168,254,.35);
+}
+.how-step h4 {
+  font-size: .9rem;
+  font-weight: 700;
+  color: #e8ecf6;
+  margin-bottom: 6px;
+}
+.how-step p {
+  font-size: .8rem;
+  color: #8ba0c4;
+  line-height: 1.6;
+}
+
+/* ── Disclaimer ───────────────────────────────────── */
+.disclaimer-box {
+  margin-top: 40px;
+  padding: 16px 22px;
+  border-radius: 14px;
+  background: rgba(251,191,36,.05);
+  border: 1px solid rgba(251,191,36,.18);
+  font-size: .88rem;
+  line-height: 1.65;
+  color: #8ba0c4;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+.disclaimer-icon {
+  color: #fbbf24;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+.disclaimer-box strong { color: #fbbf24; }
+
+/* ── Responsive ───────────────────────────────────── */
+@media (max-width: 900px) {
+  .stats-section { grid-template-columns: repeat(3, 1fr); }
+  .how-steps     { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 640px) {
+  .action-cards  { grid-template-columns: 1fr; }
+  .mini-cards    { grid-template-columns: 1fr 1fr; }
+  .stats-section { grid-template-columns: repeat(2, 1fr); }
+  .how-steps     { grid-template-columns: 1fr; }
+}

static/css/pages.css

@@ -0,0 +1,1078 @@
+/* ── Detail page ───────────────────────────────────────────── */
+.breadcrumb {
+  padding: 8px 0;
+  font-size: 0.88rem;
+  color: var(--muted);
+}
+.breadcrumb a {
+  color: var(--accent);
+  text-decoration: none;
+}
+.sep {
+  margin: 0 8px;
+  opacity: 0.4;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin: 6px 0 10px;
+}
+.detail-header h1 {
+  font-size: 1.5rem;
+}
+.detail-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.kv-group {
+}
+.kv {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 9px 0;
+  border-bottom: 1px solid rgba(36, 51, 86, 0.6);
+  font-size: 0.92rem;
+  gap: 12px;
+}
+.kv span {
+  color: var(--muted);
+}
+
+.heatmap-img {
+  width: 100%;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 16px;
+  gap: 12px;
+}
+
+/* Probability bar */
+.prob-bar-wrap {
+  margin-top: 20px;
+}
+.prob-bar-label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.78rem;
+  color: var(--muted);
+  margin-bottom: 4px;
+}
+.prob-bar {
+  position: relative;
+  height: 24px;
+  border-radius: 12px;
+  background: var(--bg2);
+  border: 1px solid var(--line);
+  overflow: visible;
+}
+.prob-fill {
+  height: 100%;
+  border-radius: 12px;
+  transition: width 0.4s;
+}
+.fill-high {
+  background: linear-gradient(90deg, #3b82f6, #6366f1);
+}
+.fill-medium {
+  background: linear-gradient(90deg, #f59e0b, #f97316);
+}
+.fill-low {
+  background: linear-gradient(90deg, #6b7280, #9ca3af);
+}
+.prob-marker {
+  position: absolute;
+  top: -22px;
+  transform: translateX(-50%);
+  font-size: 0.76rem;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.json-pre {
+  background: #080e1d;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 16px;
+  overflow: auto;
+  max-height: 500px;
+  font-size: 0.82rem;
+  line-height: 1.5;
+}
+
+/* Disclaimer */
+.disclaimer-box {
+  margin-top: 16px;
+  padding: 16px 20px;
+  border-radius: var(--radius);
+  background: rgba(251, 191, 36, 0.06);
+  border: 1px solid rgba(251, 191, 36, 0.2);
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--muted);
+}
+.disclaimer-box strong {
+  color: var(--orange);
+}
+
+/* ── Evaluation page ───────────────────────────────────────── */
+.eval-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.metric-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.metric-card {
+  background: var(--bg2);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 14px;
+  text-align: center;
+}
+.metric-label {
+  font-size: 0.78rem;
+  color: var(--muted);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.metric-value {
+  font-size: 1.3rem;
+  font-weight: 800;
+  margin-top: 2px;
+  color: var(--accent);
+}
+
+/* Band analysis */
+.band-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-top: 12px;
+}
+.band-card {
+  background: var(--bg2);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 14px;
+}
+.band-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+.band-total {
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+.band-bar-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.band-bar-label {
+  width: 60px;
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+.band-bar {
+  flex: 1;
+  height: 14px;
+  border-radius: 7px;
+  background: var(--panel);
+  overflow: hidden;
+}
+.band-bar-fill {
+  height: 100%;
+  border-radius: 7px;
+  transition: width 0.4s;
+}
+.fill-red {
+  background: var(--red);
+}
+.fill-green {
+  background: var(--green);
+}
+.band-bar-val {
+  width: 36px;
+  font-size: 0.82rem;
+  text-align: right;
+}
+
+/* Histogram */
+.histogram {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 8px 0;
+  min-height: 220px;
+}
+.hist-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.hist-bar {
+  width: 100%;
+  border-radius: 6px 6px 0 0;
+  background: linear-gradient(180deg, var(--accent), #3b82f6);
+  min-height: 2px;
+  position: relative;
+}
+.hist-count {
+  position: absolute;
+  top: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--muted);
+}
+.hist-label {
+  font-size: 0.72rem;
+  color: var(--muted);
+  margin-top: 4px;
+}
+
+/* ── About page ─────────────────────────────────��──────────── */
+.about-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-top: 16px;
+}
+
+/* Architecture flow */
+.arch-flow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 16px;
+  padding: 12px 0;
+}
+.arch-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--bg2);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 10px 14px;
+}
+.arch-num {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--bg);
+  font-weight: 800;
+  font-size: 0.82rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.arch-label {
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+.arch-arrow {
+  color: var(--muted);
+  font-size: 1.2rem;
+}
+
+/* Triage cards */
+.triage-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-top: 12px;
+}
+.triage-card {
+  background: var(--bg2);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 16px;
+}
+.triage-card p {
+  font-size: 0.88rem;
+  margin-top: 6px;
+  color: var(--muted);
+}
+.triage-card p strong {
+  color: var(--text);
+}
+.triage-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+/* Ethics */
+.ethics-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  margin-top: 12px;
+}
+.ethics-columns h4 {
+  font-size: 0.95rem;
+  margin-bottom: 8px;
+}
+.check-list,
+.cross-list {
+  list-style: none;
+  padding: 0;
+}
+.check-list li,
+.cross-list li {
+  padding: 5px 0;
+  padding-left: 24px;
+  position: relative;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+.check-list li::before {
+  content: "✓";
+  position: absolute;
+  left: 0;
+  color: var(--green);
+  font-weight: 700;
+}
+.cross-list li::before {
+  content: "✕";
+  position: absolute;
+  left: 0;
+  color: var(--red);
+  font-weight: 700;
+}
+
+/* Tech tags */
+.tech-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
+.tech-tag {
+  padding: 5px 14px;
+  border-radius: 999px;
+  font-size: 0.82rem;
+  font-weight: 500;
+  background: rgba(110, 168, 254, 0.08);
+  border: 1px solid rgba(110, 168, 254, 0.2);
+  color: var(--accent);
+}
+
+/* ── Footer ────────────────────────────────────────────────── */
+.footer {
+  margin-top: 48px;
+  padding: 20px 0;
+  border-top: 1px solid var(--line);
+  text-align: center;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+.footer p + p {
+  margin-top: 4px;
+}
+
+/* ── Home Page ─────────────────────────────────────────────── */
+.home-hero {
+  text-align: center;
+  padding: 48px 0 12px;
+}
+.home-hero h1 {
+  font-size: 2.2rem;
+  font-weight: 800;
+}
+.home-hero p {
+  color: var(--muted);
+  margin-top: 8px;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.home-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-top: 32px;
+}
+
+.home-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 40px 32px;
+  border-radius: var(--radius);
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, var(--panel2), var(--panel));
+  text-decoration: none;
+  color: var(--text);
+  transition: all 0.2s;
+}
+.home-card:hover {
+  border-color: var(--accent);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 32px rgba(110, 168, 254, 0.1);
+}
+.home-card-icon {
+  color: var(--accent);
+  margin-bottom: 16px;
+}
+.home-card h2 {
+  font-size: 1.3rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+.home-card p {
+  color: var(--muted);
+  font-size: 0.92rem;
+  line-height: 1.5;
+}
+.home-card-action {
+  margin-top: 16px;
+  color: var(--accent);
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.home-cards-secondary {
+  grid-template-columns: repeat(3, 1fr);
+  margin-top: 16px;
+}
+.home-card-sm {
+  padding: 28px 24px;
+}
+.home-card-sm h3 {
+  font-size: 1.05rem;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+/* ── Page Header ───────────────────────────────────────────── */
+.page-header {
+  margin-bottom: 24px;
+}
+.page-header h1 {
+  font-size: 1.8rem;
+  font-weight: 800;
+}
+.page-header p {
+  color: var(--muted);
+  margin-top: 6px;
+  line-height: 1.5;
+}
+
+/* ── Logs ───────────────────────────────────────────────────── */
+.log-summary {
+  margin-bottom: 12px;
+}
+.logs-table td code {
+  font-family: "SF Mono", "Cascadia Code", monospace;
+  font-size: 0.85rem;
+  color: var(--accent);
+}
+.log-actions {
+  display: flex;
+  gap: 6px;
+}
+
+/* ── Upload Page ───────────────────────────────────────────── */
+.upload-hero {
+  padding: 8px 0 6px;
+}
+.upload-hero h1 {
+  font-size: 1.8rem;
+  font-weight: 800;
+}
+.upload-hero p {
+  color: var(--muted);
+  margin-top: 6px;
+}
+
+.upload-panel {
+  position: relative;
+}
+
+.dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  border: 2px dashed var(--line);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--muted);
+}
+.dropzone:hover,
+.dropzone.dragover {
+  border-color: var(--accent);
+  background: rgba(110, 168, 254, 0.04);
+}
+.dropzone-text {
+  font-size: 1.05rem;
+  font-weight: 600;
+  margin-top: 12px;
+  color: var(--text);
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  border: 1px solid var(--accent);
+  border-radius: 10px;
+  background: rgba(110, 168, 254, 0.06);
+  color: var(--accent);
+  font-weight: 500;
+}
+.file-info span {
+  flex: 1;
+}
+
+.btn-primary {
+  margin-top: 16px;
+  width: 100%;
+  justify-content: center;
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #3b82f6, #6366f1);
+  border-color: #3b82f6;
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+.btn-primary:hover {
+  background: linear-gradient(135deg, #2563eb, #4f46e5);
+}
+.btn-primary:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(17, 28, 51, 0.95);
+  border-radius: var(--radius);
+  z-index: 10;
+  gap: 16px;
+}
+
+.spinner {
+  width: 48px;
+  height: 48px;
+  border: 3px solid var(--line);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.user-menu {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.user-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: none;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  color: #374151;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.user-button:hover {
+  background-color: #f9fafb;
+  border-color: #d1d5db;
+}
+
+.user-menu-dropdown {
+  display: none;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 8px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  min-width: 160px;
+  z-index: 1000;
+}
+
+.user-menu-dropdown.active {
+  display: block;
+}
+
+.menu-item {
+  display: block;
+  width: 100%;
+  padding: 12px 16px;
+  text-align: left;
+  color: #374151;
+  text-decoration: none;
+  font-size: 14px;
+  transition: all 0.2s;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.menu-item:hover {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+
+.menu-item:first-child {
+  border-radius: 5px 5px 0 0;
+}
+
+.logout-btn {
+  color: #dc2626;
+}
+
+.logout-btn:hover {
+  background-color: #fef2f2;
+  color: #991b1b;
+}
+
+.logout-form {
+  width: 100%;
+  margin: 0;
+}
+
+.user-menu-dropdown hr {
+  margin: 4px 0;
+  border: none;
+  border-top: 1px solid #e5e7eb;
+}
+
+.auth-buttons {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.profile-container {
+  display: flex;
+  justify-content: center;
+  padding: 40px 20px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.profile-card {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  padding: 40px;
+  width: 100%;
+}
+
+.profile-card h1 {
+  margin-bottom: 30px;
+  color: #333;
+}
+
+.profile-section {
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.profile-section h3 {
+  color: #333;
+  margin-bottom: 15px;
+}
+
+.profile-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.profile-label {
+  font-weight: 500;
+  color: #666;
+}
+
+.profile-value {
+  color: #333;
+}
+
+.profile-footer {
+  margin-top: 30px;
+  display: flex;
+  gap: 10px;
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+  background-color: white;
+  margin: 10% auto;
+  padding: 30px;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 400px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.close:hover {
+  color: #000;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #333;
+}
+
+.form-group small {
+  font-size: 12px;
+  color: #666;
+  margin-top: 4px;
+}
+
+@media (max-width: 768px) {
+  .user-button {
+    padding: 8px 12px;
+    font-size: 13px;
+  }
+
+  .user-button svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .auth-buttons {
+    gap: 8px;
+  }
+
+  .profile-container {
+    padding: 24px 16px;
+  }
+
+  .profile-card {
+    padding: 24px 18px;
+  }
+
+  .profile-item {
+    flex-direction: column;
+    gap: 4px;
+  }
+}
+.steps-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-top: 12px;
+}
+.step {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+.step-num {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--bg);
+  font-weight: 800;
+  font-size: 0.82rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.step-text strong {
+  font-size: 0.92rem;
+}
+
+/* ── Flash Messages ────────────────────────────────────────── */
+.flash-messages {
+  margin-bottom: 16px;
+}
+.flash {
+  padding: 12px 16px;
+  border-radius: 10px;
+  font-size: 0.9rem;
+  margin-bottom: 8px;
+}
+.flash-error {
+  background: rgba(251, 113, 133, 0.1);
+  border: 1px solid rgba(251, 113, 133, 0.3);
+  color: var(--red);
+}
+.flash-success {
+  background: rgba(52, 211, 153, 0.1);
+  border: 1px solid rgba(52, 211, 153, 0.3);
+  color: var(--green);
+}
+
+/* ── Upload Tabs ───────────────────────────────────────────── */
+.upload-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 0;
+  border-bottom: 2px solid var(--line);
+  padding-bottom: 0;
+}
+.upload-tab {
+  padding: 10px 20px;
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 0.9rem;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  transition: all 0.15s;
+}
+.upload-tab:hover {
+  color: var(--text);
+}
+.upload-tab.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+.tab-panel {
+  display: none;
+  margin-top: 16px;
+}
+.tab-panel.active {
+  display: block;
+}
+
+/* ── Directory Input ───────────────────────────────────────── */
+.dir-label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 8px;
+  font-size: 0.92rem;
+}
+.dir-input-row {
+  display: flex;
+  gap: 10px;
+}
+.dir-input-row .input {
+  flex: 1;
+  padding: 10px 14px;
+  font-size: 0.92rem;
+  font-family: "SF Mono", "Cascadia Code", monospace;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  color: var(--text);
+  outline: none;
+  transition: border-color 0.15s;
+}
+.dir-input-row .input:focus {
+  border-color: var(--accent);
+}
+.dir-input-row .btn-primary {
+  margin-top: 0;
+  width: auto;
+  white-space: nowrap;
+}
+
+/* ── Batch Progress Page ───────────────────────────────────── */
+.batch-header {
+  margin-bottom: 20px;
+}
+.batch-header h1 {
+  font-size: 1.6rem;
+  font-weight: 800;
+}
+.batch-panel {
+  padding: 24px;
+}
+.batch-stats-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.batch-stat {
+  text-align: center;
+}
+.batch-stat-label {
+  display: block;
+  font-size: 0.78rem;
+  color: var(--muted);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.batch-stat-value {
+  display: block;
+  font-size: 1.6rem;
+  font-weight: 800;
+  margin-top: 2px;
+}
+.batch-stat.accent-green .batch-stat-value {
+  color: var(--green);
+}
+.batch-stat.accent-red .batch-stat-value {
+  color: var(--red);
+}
+
+.progress-track {
+  width: 100%;
+  height: 12px;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #3b82f6, #6366f1);
+  border-radius: 6px;
+  transition: width 0.4s ease;
+}
+.progress-text {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+
+.batch-feed {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.batch-feed li {
+  padding: 6px 0;
+  border-bottom: 1px solid var(--line);
+  font-size: 0.88rem;
+}
+.batch-feed li a {
+  color: var(--accent);
+  text-decoration: none;
+}
+.batch-feed li a:hover {
+  text-decoration: underline;
+}
+
+.batch-done-panel {
+  text-align: center;
+  padding: 40px 24px;
+}
+.batch-done-icon {
+  margin-bottom: 16px;
+}
+.batch-done-panel h2 {
+  font-size: 1.5rem;
+  font-weight: 800;
+  margin-bottom: 8px;
+}
+.batch-done-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  margin-top: 20px;
+}
+.batch-done-actions .btn-primary {
+  width: auto;
+  margin-top: 0;
+}
+
+.batch-fail-list {
+  padding-left: 20px;
+}
+.batch-fail-list li {
+  color: var(--red);
+  font-family: "SF Mono", "Cascadia Code", monospace;
+  font-size: 0.85rem;
+  padding: 3px 0;
+}
+.text-red {
+  color: var(--red);
+}
+

static/css/responsive.css

@@ -0,0 +1,75 @@
+/* ── Responsive ────────────────────────────────────────────── */
+@media (max-width: 1024px) {
+  .stats-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .home-cards-secondary {
+    grid-template-columns: 1fr;
+  }
+  .topbar-inner {
+    padding: 14px 16px;
+  }
+  .detail-grid,
+  .eval-grid,
+  .about-grid,
+  .ethics-columns {
+    grid-template-columns: 1fr;
+  }
+  .triage-grid,
+  .band-grid {
+    grid-template-columns: 1fr;
+  }
+  .arch-flow {
+    justify-content: center;
+  }
+  .home-cards {
+    grid-template-columns: 1fr;
+  }
+  .steps-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  .batch-stats-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 640px) {
+  .stats-row {
+    grid-template-columns: 1fr 1fr;
+  }
+  .topbar-inner {
+    flex-direction: column;
+    gap: 8px;
+  }
+  .nav-links {
+    width: 100%;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+  .detail-header {
+    flex-direction: column;
+  }
+  .filters {
+    flex-direction: column;
+  }
+  .home-hero h1 {
+    font-size: 1.7rem;
+  }
+  .home-card {
+    padding: 28px 20px;
+  }
+  .steps-grid {
+    grid-template-columns: 1fr;
+  }
+  .upload-tabs {
+    flex-wrap: wrap;
+  }
+  .dir-input-row {
+    flex-direction: column;
+  }
+  .dir-input-row .btn-primary {
+    width: 100%;
+  }
+  .batch-done-actions {
+    flex-direction: column;
+  }
+}

static/js/auth-shared.js

@@ -0,0 +1,61 @@
+/**
+ * auth-shared.js — Shared utility for all auth pages
+ * Provides: makePasswordToggle(), passwordStrengthMeter()
+ */
+
+/**
+ * Wire up a show/hide password toggle button.
+ * @param {string} btnId     - ID of the toggle button
+ * @param {string} inputId   - ID of the password input
+ * @param {string} iconId    - ID of the SVG element inside the button
+ */
+function makePasswordToggle(btnId, inputId, iconId) {
+  const btn   = document.getElementById(btnId);
+  const input = document.getElementById(inputId);
+  const icon  = document.getElementById(iconId);
+  if (!btn || !input || !icon) return;
+
+  btn.addEventListener('click', function () {
+    const isHidden = input.type === 'password';
+    input.type = isHidden ? 'text' : 'password';
+    icon.innerHTML = isHidden
+      /* eye-off */
+      ? '<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.94"/>' +
+        '<path d="M9.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.19"/>' +
+        '<line x1="1" y1="1" x2="23" y2="23"/>'
+      /* 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"/>';
+  });
+}
+
+/**
+ * Wire up a live password-strength indicator.
+ * @param {string} inputId   - ID of the password input
+ * @param {string} barId     - ID of the strength fill div
+ * @param {string} textId    - ID of the strength label span
+ */
+function passwordStrengthMeter(inputId, barId, textId) {
+  const input = document.getElementById(inputId);
+  const bar   = document.getElementById(barId);
+  const text  = document.getElementById(textId);
+  if (!input || !bar || !text) return;
+
+  input.addEventListener('input', function () {
+    const v = this.value;
+    let score = 0;
+    if (v.length >= 8)            score++;
+    if (/[A-Z]/.test(v))          score++;
+    if (/[a-z]/.test(v))          score++;
+    if (/[0-9]/.test(v))          score++;
+    if (/[^A-Za-z0-9]/.test(v))   score++;
+
+    const classes = ['', 'weak', 'fair', 'good', 'good', 'strong'];
+    const labels  = ['', 'Weak', 'Fair', 'Good', 'Good', 'Strong'];
+    const cls = classes[score] || '';
+
+    bar.className  = 'pw-strength-fill ' + cls;
+    text.className = 'pw-strength-text ' + cls;
+    text.textContent = v.length ? labels[score] : '';
+  });
+}

static/js/batch.js

@@ -0,0 +1,99 @@
+(function () {
+  function initBatchProgress() {
+    var page = document.querySelector('.batch-page');
+    if (!page) {
+      return;
+    }
+
+    var statusUrl = page.dataset.statusUrl;
+    var pollMs = 1000;
+
+    var title = document.getElementById('batchTitle');
+    var subtitle = document.getElementById('batchSubtitle');
+    var fill = document.getElementById('progressFill');
+    var pctLabel = document.getElementById('progressPct');
+    var currentFile = document.getElementById('currentFile');
+    var statTotal = document.getElementById('statTotal');
+    var statProc = document.getElementById('statProcessed');
+    var statOK = document.getElementById('statSucceeded');
+    var statFail = document.getElementById('statFailed');
+    var feedPanel = document.getElementById('feedPanel');
+    var feedList = document.getElementById('batchFeed');
+    var donePanel = document.getElementById('donePanel');
+    var doneSummary = document.getElementById('doneSummary');
+    var failPanel = document.getElementById('failPanel');
+    var failList = document.getElementById('failList');
+    var prevIds = [];
+
+    if (!statusUrl || !title || !subtitle || !fill || !pctLabel || !currentFile || !statTotal || !statProc || !statOK || !statFail || !feedPanel || !feedList || !donePanel || !doneSummary || !failPanel || !failList) {
+      return;
+    }
+
+    function poll() {
+      fetch(statusUrl)
+        .then(function (response) {
+          return response.json();
+        })
+        .then(function (data) {
+          var pct = data.total > 0 ? Math.round(data.processed / data.total * 100) : 0;
+
+          statTotal.textContent = data.total;
+          statProc.textContent = data.processed;
+          statOK.textContent = data.succeeded;
+          statFail.textContent = data.failed_count;
+
+          fill.style.width = pct + '%';
+          pctLabel.textContent = pct + '%';
+          currentFile.textContent = data.current_file ? 'Processing: ' + data.current_file : '';
+
+          if (data.image_ids && data.image_ids.length) {
+            feedPanel.style.display = 'block';
+            data.image_ids.forEach(function (imageId) {
+              if (prevIds.indexOf(imageId) === -1) {
+                prevIds.push(imageId);
+                var li = document.createElement('li');
+                var link = document.createElement('a');
+                link.href = '/case/' + imageId;
+                link.textContent = imageId;
+                li.appendChild(link);
+                feedList.insertBefore(li, feedList.firstChild);
+                while (feedList.children.length > 20) {
+                  feedList.removeChild(feedList.lastChild);
+                }
+              }
+            });
+          }
+
+          if (data.status === 'completed' || data.status === 'failed') {
+            title.textContent = 'Batch Complete';
+            subtitle.textContent = '';
+            donePanel.style.display = 'block';
+            doneSummary.textContent = data.succeeded + ' of ' + data.total + ' files processed successfully' + (data.failed_count > 0 ? ', ' + data.failed_count + ' failed' : '') + '.';
+
+            if (data.failed_ids && data.failed_ids.length) {
+              failPanel.style.display = 'block';
+              data.failed_ids.forEach(function (failedId) {
+                var li = document.createElement('li');
+                li.textContent = failedId;
+                failList.appendChild(li);
+              });
+            }
+            return;
+          }
+
+          setTimeout(poll, pollMs);
+        })
+        .catch(function () {
+          setTimeout(poll, pollMs * 3);
+        });
+    }
+
+    poll();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initBatchProgress);
+  } else {
+    initBatchProgress();
+  }
+})();

static/js/forgot-password.js

@@ -0,0 +1,15 @@
+/**
+ * forgot-password.js — Forgot password page interactions
+ */
+document.addEventListener('DOMContentLoaded', function () {
+  // If redirected back with ?sent=1, show the success state
+  const params = new URLSearchParams(window.location.search);
+  if (params.get('sent') === '1') {
+    const form   = document.getElementById('fpForm');
+    const footer = document.querySelector('.auth-footer');
+    const state  = document.getElementById('successState');
+    if (form)   form.style.display   = 'none';
+    if (footer) footer.style.display = 'none';
+    if (state)  state.style.display  = 'block';
+  }
+});

static/js/home.js

@@ -0,0 +1,23 @@
+/**
+ * home.js — Dashboard home page scripts
+ * Count-up animation for stat cards
+ */
+document.addEventListener('DOMContentLoaded', function () {
+  document.querySelectorAll('[data-count]').forEach(function (el) {
+    const target = parseInt(el.dataset.count, 10);
+    if (!target) return;
+
+    let current = 0;
+    const duration = 900; // ms
+    const step = target / (duration / 16);
+
+    const timer = setInterval(function () {
+      current = Math.min(current + step, target);
+      el.textContent = Math.floor(current);
+      if (current >= target) {
+        el.textContent = target;
+        clearInterval(timer);
+      }
+    }, 16);
+  });
+});

static/js/layout.js

@@ -0,0 +1,29 @@
+(function () {
+  function initUserMenu() {
+    var menu = document.querySelector('.user-menu');
+    var toggleButton = document.querySelector('[data-user-menu-toggle="true"]');
+    var dropdown = document.getElementById('userMenuDropdown');
+
+    if (!menu || !toggleButton || !dropdown) {
+      return;
+    }
+
+    toggleButton.addEventListener('click', function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+      dropdown.classList.toggle('active');
+    });
+
+    document.addEventListener('click', function (event) {
+      if (!menu.contains(event.target)) {
+        dropdown.classList.remove('active');
+      }
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initUserMenu);
+  } else {
+    initUserMenu();
+  }
+})();

static/js/login.js

@@ -0,0 +1,7 @@
+/**
+ * login.js — Login page interactions
+ * Depends on: auth-shared.js
+ */
+document.addEventListener('DOMContentLoaded', function () {
+  makePasswordToggle('togglePw', 'password', 'eyeIcon');
+});

static/js/pages.js

@@ -0,0 +1,369 @@
+(function () {
+  function initUserMenu() {
+    var menu = document.querySelector('.user-menu');
+    var toggleButton = document.querySelector('[data-user-menu-toggle="true"]');
+    var dropdown = document.getElementById('userMenuDropdown');
+
+    if (!menu || !toggleButton || !dropdown) {
+      return;
+    }
+
+    function closeMenu() {
+      dropdown.classList.remove('active');
+    }
+
+    function toggleMenu(event) {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      dropdown.classList.toggle('active');
+    }
+
+    toggleButton.addEventListener('click', toggleMenu);
+    document.addEventListener('click', function (event) {
+      if (!menu.contains(event.target)) {
+        closeMenu();
+      }
+    });
+  }
+
+  function initPasswordModal() {
+    var openButton = document.querySelector('.js-open-password-modal');
+    var closeButtons = document.querySelectorAll('.js-close-password-modal');
+    var modal = document.querySelector('.js-password-modal');
+    var form = document.getElementById('changePasswordForm');
+    var message = document.getElementById('passwordMessage');
+
+    if (!openButton || !closeButtons.length || !modal || !form || !message) {
+      return;
+    }
+
+    function openModal() {
+      modal.style.display = 'block';
+      form.reset();
+      message.innerHTML = '';
+    }
+
+    function closeModal() {
+      modal.style.display = 'none';
+    }
+
+    openButton.addEventListener('click', openModal);
+    closeButtons.forEach(function (button) {
+      button.addEventListener('click', closeModal);
+    });
+
+    document.addEventListener('click', function (event) {
+      if (event.target === modal) {
+        closeModal();
+      }
+    });
+
+    form.addEventListener('submit', async function (event) {
+      event.preventDefault();
+
+      var currentPassword = document.getElementById('currentPassword').value;
+      var newPassword = document.getElementById('newPassword').value;
+      var confirmPassword = document.getElementById('confirmPassword').value;
+      var endpoint = form.dataset.changePasswordUrl;
+
+      if (newPassword !== confirmPassword) {
+        message.innerHTML = '<div class="alert alert-error">Passwords do not match</div>';
+        return;
+      }
+
+      try {
+        var response = await fetch(endpoint, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            current_password: currentPassword,
+            new_password: newPassword,
+            confirm_password: confirmPassword
+          })
+        });
+
+        var data = await response.json();
+
+        if (response.ok) {
+          message.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
+          setTimeout(closeModal, 2000);
+        } else {
+          message.innerHTML = '<div class="alert alert-error">' + (data.error || 'Unable to update password') + '</div>';
+        }
+      } catch (error) {
+        message.innerHTML = '<div class="alert alert-error">An error occurred</div>';
+      }
+    });
+  }
+
+  function initUploadPage() {
+    var tabs = document.querySelectorAll('.upload-tab');
+    var panels = document.querySelectorAll('.tab-panel');
+
+    if (!tabs.length || !panels.length) {
+      return;
+    }
+
+    tabs.forEach(function (tab) {
+      tab.addEventListener('click', function () {
+        tabs.forEach(function (item) {
+          item.classList.remove('active');
+        });
+        panels.forEach(function (panel) {
+          panel.classList.remove('active');
+        });
+
+        tab.classList.add('active');
+        var target = document.getElementById('tab-' + tab.dataset.tab);
+        if (target) {
+          target.classList.add('active');
+        }
+      });
+    });
+
+    function wireDropzone(options) {
+      var zone = document.getElementById(options.zoneId);
+      var input = document.getElementById(options.inputId);
+      var info = document.getElementById(options.infoId);
+      var label = document.getElementById(options.labelId);
+      var clearButton = document.querySelector(options.clearSel);
+      var submit = document.getElementById(options.submitId);
+      var form = document.getElementById(options.formId);
+      var overlay = document.getElementById(options.overlayId);
+
+      if (!zone || !input || !info || !label || !submit) {
+        return;
+      }
+
+      function showFiles(files) {
+        var validFiles = [];
+        for (var i = 0; i < files.length; i++) {
+          var name = files[i].name.toLowerCase();
+          if (name.endsWith('.dcm') || name.endsWith('.zip')) {
+            validFiles.push(files[i]);
+          }
+        }
+
+        if (!validFiles.length) {
+          return;
+        }
+
+        if (options.multi) {
+          var totalSizeMB = 0;
+          for (var j = 0; j < validFiles.length; j++) {
+            totalSizeMB += validFiles[j].size / (1024 * 1024);
+          }
+          label.textContent = validFiles.length + ' file' + (validFiles.length > 1 ? 's' : '') + ' (' + totalSizeMB.toFixed(1) + ' MB)';
+        } else {
+          label.textContent = validFiles[0].name;
+        }
+
+        info.style.display = 'flex';
+        zone.style.display = 'none';
+        submit.disabled = false;
+      }
+
+      function reset() {
+        input.value = '';
+        info.style.display = 'none';
+        zone.style.display = 'flex';
+        submit.disabled = true;
+      }
+
+      zone.addEventListener('click', function () {
+        input.click();
+      });
+
+      zone.addEventListener('dragover', function (event) {
+        event.preventDefault();
+        zone.classList.add('dragover');
+      });
+
+      zone.addEventListener('dragleave', function () {
+        zone.classList.remove('dragover');
+      });
+
+      zone.addEventListener('drop', function (event) {
+        event.preventDefault();
+        zone.classList.remove('dragover');
+        if (event.dataTransfer.files.length) {
+          input.files = event.dataTransfer.files;
+          showFiles(event.dataTransfer.files);
+        }
+      });
+
+      input.addEventListener('change', function () {
+        if (input.files.length) {
+          showFiles(input.files);
+        }
+      });
+
+      if (clearButton) {
+        clearButton.addEventListener('click', reset);
+      }
+
+      if (form && overlay) {
+        form.addEventListener('submit', function () {
+          overlay.style.display = 'flex';
+          submit.disabled = true;
+        });
+      }
+    }
+
+    wireDropzone({
+      zoneId: 'dropzoneSingle',
+      inputId: 'singleInput',
+      infoId: 'singleInfo',
+      labelId: 'singleFileName',
+      clearSel: '.js-clear-single',
+      submitId: 'singleSubmit',
+      formId: 'singleForm',
+      overlayId: 'singleOverlay',
+      multi: false
+    });
+
+    wireDropzone({
+      zoneId: 'dropzoneMulti',
+      inputId: 'multiInput',
+      infoId: 'multiInfo',
+      labelId: 'multiFileName',
+      clearSel: '.js-clear-multi',
+      submitId: 'multiSubmit',
+      formId: 'multiForm',
+      overlayId: 'multiOverlay',
+      multi: true
+    });
+
+    var dirInput = document.getElementById('dirPath');
+    var dirSubmit = document.getElementById('dirSubmit');
+
+    if (dirInput && dirSubmit) {
+      function checkDir() {
+        dirSubmit.disabled = !dirInput.value.trim();
+      }
+
+      dirInput.addEventListener('input', checkDir);
+      checkDir();
+    }
+  }
+
+  function initBatchProgress() {
+    var page = document.querySelector('.batch-page');
+
+    if (!page) {
+      return;
+    }
+
+    var statusUrl = page.dataset.statusUrl;
+    var reportsUrl = page.dataset.reportsUrl;
+    var pollMs = 1000;
+
+    var title = document.getElementById('batchTitle');
+    var subtitle = document.getElementById('batchSubtitle');
+    var fill = document.getElementById('progressFill');
+    var pctLabel = document.getElementById('progressPct');
+    var currentFile = document.getElementById('currentFile');
+    var statTotal = document.getElementById('statTotal');
+    var statProc = document.getElementById('statProcessed');
+    var statOK = document.getElementById('statSucceeded');
+    var statFail = document.getElementById('statFailed');
+    var feedPanel = document.getElementById('feedPanel');
+    var feedList = document.getElementById('batchFeed');
+    var donePanel = document.getElementById('donePanel');
+    var doneSummary = document.getElementById('doneSummary');
+    var failPanel = document.getElementById('failPanel');
+    var failList = document.getElementById('failList');
+    var prevIds = [];
+
+    if (!statusUrl || !title || !subtitle || !fill || !pctLabel || !currentFile || !statTotal || !statProc || !statOK || !statFail || !feedPanel || !feedList || !donePanel || !doneSummary || !failPanel || !failList) {
+      return;
+    }
+
+    function poll() {
+      fetch(statusUrl)
+        .then(function (response) {
+          return response.json();
+        })
+        .then(function (data) {
+          var pct = data.total > 0 ? Math.round(data.processed / data.total * 100) : 0;
+
+          statTotal.textContent = data.total;
+          statProc.textContent = data.processed;
+          statOK.textContent = data.succeeded;
+          statFail.textContent = data.failed_count;
+
+          fill.style.width = pct + '%';
+          pctLabel.textContent = pct + '%';
+
+          if (data.current_file) {
+            currentFile.textContent = 'Processing: ' + data.current_file;
+          } else {
+            currentFile.textContent = '';
+          }
+
+          if (data.image_ids && data.image_ids.length) {
+            feedPanel.style.display = 'block';
+            data.image_ids.forEach(function (imageId) {
+              if (prevIds.indexOf(imageId) === -1) {
+                prevIds.push(imageId);
+                var li = document.createElement('li');
+                var link = document.createElement('a');
+                link.href = '/case/' + imageId;
+                link.textContent = imageId;
+                li.appendChild(link);
+                feedList.insertBefore(li, feedList.firstChild);
+                while (feedList.children.length > 20) {
+                  feedList.removeChild(feedList.lastChild);
+                }
+              }
+            });
+          }
+
+          if (data.status === 'completed' || data.status === 'failed') {
+            title.textContent = 'Batch Complete';
+            subtitle.textContent = '';
+            donePanel.style.display = 'block';
+            doneSummary.textContent = data.succeeded + ' of ' + data.total + ' files processed successfully' + (data.failed_count > 0 ? ', ' + data.failed_count + ' failed' : '') + '.';
+
+            if (data.failed_ids && data.failed_ids.length) {
+              failPanel.style.display = 'block';
+              data.failed_ids.forEach(function (failedId) {
+                var li = document.createElement('li');
+                li.textContent = failedId;
+                failList.appendChild(li);
+              });
+            }
+
+            if (reportsUrl) {
+              return;
+            }
+            return;
+          }
+
+          setTimeout(poll, pollMs);
+        })
+        .catch(function () {
+          setTimeout(poll, pollMs * 3);
+        });
+    }
+
+    poll();
+  }
+
+  function initPages() {
+    initUserMenu();
+    initPasswordModal();
+    initUploadPage();
+    initBatchProgress();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initPages);
+  } else {
+    initPages();
+  }
+})();

static/js/profile-page.js

@@ -0,0 +1,43 @@
+/**
+ * profile-page.js — Profile page interactions
+ * Handles: pw-fields toggle, eye toggles, strength meter
+ * NOTE: AJAX password-change is still handled by profile.js (legacy)
+ * Depends on: auth-shared.js
+ */
+document.addEventListener('DOMContentLoaded', function () {
+
+  /* ── Change-password field toggle ── */
+  const pwFields    = document.getElementById('pwFields');
+  const pwToggleBtn = document.getElementById('pwToggleBtn');
+  const pwCancelBtn = document.getElementById('pwCancelBtn');
+
+  if (pwToggleBtn && pwFields) {
+    pwToggleBtn.addEventListener('click', function () {
+      pwFields.classList.add('active');
+      pwToggleBtn.style.display = 'none';
+    });
+  }
+
+  if (pwCancelBtn && pwFields) {
+    pwCancelBtn.addEventListener('click', function () {
+      pwFields.classList.remove('active');
+      if (pwToggleBtn) pwToggleBtn.style.display = '';
+      const form = document.getElementById('changePasswordForm');
+      if (form) form.reset();
+      const msg = document.getElementById('pwMessage');
+      if (msg) { msg.className = ''; msg.textContent = ''; }
+      // Reset strength bar
+      const bar  = document.getElementById('profilePwBar');
+      const text = document.getElementById('profilePwText');
+      if (bar)  { bar.className  = 'pw-strength-fill'; }
+      if (text) { text.className = 'pw-strength-text'; text.textContent = ''; }
+    });
+  }
+
+  /* ── Eye toggles ── */
+  makePasswordToggle('toggleCur', 'currentPassword', 'eyeCur');
+  makePasswordToggle('toggleNew', 'newPassword',     'eyeNew');
+
+  /* ── Strength meter on new password ── */
+  passwordStrengthMeter('newPassword', 'profilePwBar', 'profilePwText');
+});

static/js/profile.js

@@ -0,0 +1,79 @@
+(function () {
+  function initProfilePage() {
+    var openButton = document.querySelector('.js-open-password-modal');
+    var closeButtons = document.querySelectorAll('.js-close-password-modal');
+    var modal = document.querySelector('.js-password-modal');
+    var form = document.getElementById('changePasswordForm');
+    var message = document.getElementById('passwordMessage');
+
+    if (!openButton || !closeButtons.length || !modal || !form || !message) {
+      return;
+    }
+
+    function openModal() {
+      modal.style.display = 'block';
+      form.reset();
+      message.innerHTML = '';
+    }
+
+    function closeModal() {
+      modal.style.display = 'none';
+    }
+
+    openButton.addEventListener('click', openModal);
+    closeButtons.forEach(function (button) {
+      button.addEventListener('click', closeModal);
+    });
+
+    document.addEventListener('click', function (event) {
+      if (event.target === modal) {
+        closeModal();
+      }
+    });
+
+    form.addEventListener('submit', async function (event) {
+      event.preventDefault();
+
+      var currentPassword = document.getElementById('currentPassword').value;
+      var newPassword = document.getElementById('newPassword').value;
+      var confirmPassword = document.getElementById('confirmPassword').value;
+      var endpoint = form.dataset.changePasswordUrl;
+
+      if (newPassword !== confirmPassword) {
+        message.innerHTML = '<div class="alert alert-error">Passwords do not match</div>';
+        return;
+      }
+
+      try {
+        var response = await fetch(endpoint, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            current_password: currentPassword,
+            new_password: newPassword,
+            confirm_password: confirmPassword
+          })
+        });
+
+        var data = await response.json();
+
+        if (response.ok) {
+          message.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
+          setTimeout(closeModal, 2000);
+        } else {
+          message.innerHTML = '<div class="alert alert-error">' + (data.error || 'Unable to update password') + '</div>';
+        }
+      } catch (error) {
+        message.innerHTML = '<div class="alert alert-error">An error occurred</div>';
+      }
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initProfilePage);
+  } else {
+    initProfilePage();
+  }
+})();

static/js/register.js

@@ -0,0 +1,12 @@
+/**
+ * register.js — Registration page interactions
+ * Depends on: auth-shared.js
+ */
+document.addEventListener('DOMContentLoaded', function () {
+  // Show/hide toggles for both password fields
+  makePasswordToggle('togglePw',  'password',         'eyeIcon');
+  makePasswordToggle('togglePw2', 'confirm_password', 'eyeIcon2');
+
+  // Live password strength meter
+  passwordStrengthMeter('password', 'pwBar', 'pwText');
+});

static/js/upload.js

@@ -0,0 +1,158 @@
+(function () {
+  function wireDropzone(options) {
+    var zone = document.getElementById(options.zoneId);
+    var input = document.getElementById(options.inputId);
+    var info = document.getElementById(options.infoId);
+    var label = document.getElementById(options.labelId);
+    var clearButton = document.querySelector(options.clearSel);
+    var submit = document.getElementById(options.submitId);
+    var form = document.getElementById(options.formId);
+    var overlay = document.getElementById(options.overlayId);
+
+    if (!zone || !input || !info || !label || !submit) {
+      return;
+    }
+
+    function showFiles(files) {
+      var validFiles = [];
+      for (var i = 0; i < files.length; i++) {
+        var name = files[i].name.toLowerCase();
+        if (name.endsWith('.dcm') || name.endsWith('.zip')) {
+          validFiles.push(files[i]);
+        }
+      }
+
+      if (!validFiles.length) {
+        return;
+      }
+
+      if (options.multi) {
+        var totalSizeMB = 0;
+        for (var j = 0; j < validFiles.length; j++) {
+          totalSizeMB += validFiles[j].size / (1024 * 1024);
+        }
+        label.textContent = validFiles.length + ' file' + (validFiles.length > 1 ? 's' : '') + ' (' + totalSizeMB.toFixed(1) + ' MB)';
+      } else {
+        label.textContent = validFiles[0].name;
+      }
+
+      info.style.display = 'flex';
+      zone.style.display = 'none';
+      submit.disabled = false;
+    }
+
+    function reset() {
+      input.value = '';
+      info.style.display = 'none';
+      zone.style.display = 'flex';
+      submit.disabled = true;
+    }
+
+    zone.addEventListener('click', function () {
+      input.click();
+    });
+
+    zone.addEventListener('dragover', function (event) {
+      event.preventDefault();
+      zone.classList.add('dragover');
+    });
+
+    zone.addEventListener('dragleave', function () {
+      zone.classList.remove('dragover');
+    });
+
+    zone.addEventListener('drop', function (event) {
+      event.preventDefault();
+      zone.classList.remove('dragover');
+      if (event.dataTransfer.files.length) {
+        input.files = event.dataTransfer.files;
+        showFiles(event.dataTransfer.files);
+      }
+    });
+
+    input.addEventListener('change', function () {
+      if (input.files.length) {
+        showFiles(input.files);
+      }
+    });
+
+    if (clearButton) {
+      clearButton.addEventListener('click', reset);
+    }
+
+    if (form && overlay) {
+      form.addEventListener('submit', function () {
+        overlay.style.display = 'flex';
+        submit.disabled = true;
+      });
+    }
+  }
+
+  function initUploadPage() {
+    var tabs = document.querySelectorAll('.upload-tab');
+    var panels = document.querySelectorAll('.tab-panel');
+
+    if (!tabs.length || !panels.length) {
+      return;
+    }
+
+    tabs.forEach(function (tab) {
+      tab.addEventListener('click', function () {
+        tabs.forEach(function (item) {
+          item.classList.remove('active');
+        });
+        panels.forEach(function (panel) {
+          panel.classList.remove('active');
+        });
+
+        tab.classList.add('active');
+        var target = document.getElementById('tab-' + tab.dataset.tab);
+        if (target) {
+          target.classList.add('active');
+        }
+      });
+    });
+
+    wireDropzone({
+      zoneId: 'dropzoneSingle',
+      inputId: 'singleInput',
+      infoId: 'singleInfo',
+      labelId: 'singleFileName',
+      clearSel: '.js-clear-single',
+      submitId: 'singleSubmit',
+      formId: 'singleForm',
+      overlayId: 'singleOverlay',
+      multi: false
+    });
+
+    wireDropzone({
+      zoneId: 'dropzoneMulti',
+      inputId: 'multiInput',
+      infoId: 'multiInfo',
+      labelId: 'multiFileName',
+      clearSel: '.js-clear-multi',
+      submitId: 'multiSubmit',
+      formId: 'multiForm',
+      overlayId: 'multiOverlay',
+      multi: true
+    });
+
+    var dirInput = document.getElementById('dirPath');
+    var dirSubmit = document.getElementById('dirSubmit');
+
+    if (dirInput && dirSubmit) {
+      function checkDir() {
+        dirSubmit.disabled = !dirInput.value.trim();
+      }
+
+      dirInput.addEventListener('input', checkDir);
+      checkDir();
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initUploadPage);
+  } else {
+    initUploadPage();
+  }
+})();

static/styles.css

@@ -1,3 +1,4 @@
+/* Shared user menu and profile modal styles */
 /* ═══════════════════════════════════════════════════════════════
    ICH Screening Dashboard — Stylesheet
    ═══════════════════════════════════════════════════════════════ */
@@ -980,6 +981,235 @@ a:hover {
   }
 }
 
+.user-menu {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.user-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: none;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  color: #374151;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.user-button:hover {
+  background-color: #f9fafb;
+  border-color: #d1d5db;
+}
+
+.user-menu-dropdown {
+  display: none;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 8px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  min-width: 160px;
+  z-index: 1000;
+}
+
+.user-menu-dropdown.active {
+  display: block;
+}
+
+.menu-item {
+  display: block;
+  width: 100%;
+  padding: 12px 16px;
+  text-align: left;
+  color: #374151;
+  text-decoration: none;
+  font-size: 14px;
+  transition: all 0.2s;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.menu-item:hover {
+  background-color: #f3f4f6;
+  color: #111827;
+}
+
+.menu-item:first-child {
+  border-radius: 5px 5px 0 0;
+}
+
+.logout-btn {
+  color: #dc2626;
+}
+
+.logout-btn:hover {
+  background-color: #fef2f2;
+  color: #991b1b;
+}
+
+.logout-form {
+  width: 100%;
+  margin: 0;
+}
+
+.user-menu-dropdown hr {
+  margin: 4px 0;
+  border: none;
+  border-top: 1px solid #e5e7eb;
+}
+
+.auth-buttons {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.profile-container {
+  display: flex;
+  justify-content: center;
+  padding: 40px 20px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.profile-card {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  padding: 40px;
+  width: 100%;
+}
+
+.profile-card h1 {
+  margin-bottom: 30px;
+  color: #333;
+}
+
+.profile-section {
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.profile-section h3 {
+  color: #333;
+  margin-bottom: 15px;
+}
+
+.profile-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.profile-label {
+  font-weight: 500;
+  color: #666;
+}
+
+.profile-value {
+  color: #333;
+}
+
+.profile-footer {
+  margin-top: 30px;
+  display: flex;
+  gap: 10px;
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+  background-color: white;
+  margin: 10% auto;
+  padding: 30px;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 400px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.close:hover {
+  color: #000;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #333;
+}
+
+.form-group small {
+  font-size: 12px;
+  color: #666;
+  margin-top: 4px;
+}
+
+@media (max-width: 768px) {
+  .user-button {
+    padding: 8px 12px;
+    font-size: 13px;
+  }
+
+  .user-button svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .auth-buttons {
+    gap: 8px;
+  }
+
+  .profile-container {
+    padding: 24px 16px;
+  }
+
+  .profile-card {
+    padding: 24px 18px;
+  }
+
+  .profile-item {
+    flex-direction: column;
+    gap: 4px;
+  }
+}
 .steps-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);

templates/404.html

@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Page Not Found — ICH Screening</title>
+  <meta name="description" content="The page you requested could not be found."/>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/error_pages.css') }}"/>
+</head>
+<body>
+<div class="error-page">
+  <!-- background orbs -->
+  <div class="error-orb"></div>
+  <div class="error-orb"></div>
+  <div class="error-orb"></div>
+
+  <span class="error-badge error-badge-404">
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+    Error 404
+  </span>
+
+  <!-- Glowing code -->
+  <div class="error-code-wrap">
+    <div class="error-code">404</div>
+    <div class="error-scanline"></div>
+  </div>
+
+  <!-- Inline SVG illustration (floating brain scan) -->
+  <div class="error-illustration">
+    <svg width="160" height="110" viewBox="0 0 160 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <!-- CT scan ring -->
+      <ellipse cx="80" cy="55" rx="72" ry="48" stroke="#243356" stroke-width="1.5"/>
+      <ellipse cx="80" cy="55" rx="56" ry="36" stroke="#1e3060" stroke-width="1"/>
+      <!-- gantry frame -->
+      <rect x="8" y="18" width="12" height="74" rx="4" fill="#162244" stroke="#243356" stroke-width="1"/>
+      <rect x="140" y="18" width="12" height="74" rx="4" fill="#162244" stroke="#243356" stroke-width="1"/>
+      <!-- scan table -->
+      <rect x="28" y="50" width="104" height="10" rx="4" fill="#111c33" stroke="#243356" stroke-width="1"/>
+      <!-- question mark inside -->
+      <text x="80" y="63" text-anchor="middle" font-family="Inter,sans-serif" font-size="28" font-weight="900"
+            fill="url(#qgrad)" opacity=".9">?</text>
+      <!-- sweep arc -->
+      <path d="M80 7 A48 48 0 0 1 128 55" stroke="#6ea8fe" stroke-width="1.5" stroke-dasharray="6 4" opacity=".4"/>
+      <defs>
+        <linearGradient id="qgrad" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0%" stop-color="#6ea8fe"/>
+          <stop offset="100%" stop-color="#a78bfa"/>
+        </linearGradient>
+      </defs>
+    </svg>
+  </div>
+
+  <h1 class="error-title">Page Not Found</h1>
+  <p class="error-desc">
+    We couldn't find the page you were looking for. It may have been moved, deleted,
+    or the URL might be incorrect.
+  </p>
+
+  <div class="error-actions">
+    <a href="{{ url_for('home') }}" class="btn-err-primary">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M3 12L12 3l9 9"/><path d="M9 21V12h6v9"/></svg>
+      Back to Home
+    </a>
+    <button onclick="history.back()" class="btn-err-secondary">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
+      Go Back
+    </button>
+  </div>
+
+  <p class="error-footer">
+    <a href="{{ url_for('home') }}">ICH Screening</a> — AI-Assisted CT Hemorrhage Detection
+  </p>
+</div>
+</body>
+</html>

templates/500.html

@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Server Error — ICH Screening</title>
+  <meta name="description" content="An internal server error occurred. Our team has been notified."/>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/error_pages.css') }}"/>
+</head>
+<body>
+<div class="error-page error-page-500">
+  <div class="error-orb"></div>
+  <div class="error-orb"></div>
+  <div class="error-orb"></div>
+
+  <span class="error-badge error-badge-500">
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><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"/></svg>
+    Error 500
+  </span>
+
+  <div class="error-code-wrap">
+    <div class="error-code">500</div>
+    <div class="error-scanline"></div>
+  </div>
+
+  <!-- Inline SVG — server/crash illustration -->
+  <div class="error-illustration">
+    <svg width="160" height="110" viewBox="0 0 160 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <!-- server box -->
+      <rect x="30" y="20" width="100" height="70" rx="8" fill="#111c33" stroke="#243356" stroke-width="1.5"/>
+      <!-- server slots -->
+      <rect x="42" y="32" width="76" height="10" rx="3" fill="#0c1427" stroke="#1e3060" stroke-width="1"/>
+      <rect x="42" y="48" width="76" height="10" rx="3" fill="#0c1427" stroke="#1e3060" stroke-width="1"/>
+      <rect x="42" y="64" width="76" height="10" rx="3" fill="#0c1427" stroke="#1e3060" stroke-width="1"/>
+      <!-- led lights -->
+      <circle cx="50" cy="37" r="2.5" fill="#fb7185" opacity=".9"/>
+      <circle cx="50" cy="53" r="2.5" fill="#fbbf24" opacity=".7"/>
+      <circle cx="50" cy="69" r="2.5" fill="#243356"/>
+      <!-- lightning bolt -->
+      <path d="M92 14 L78 46 H88 L76 82 L104 44 H93 L104 14 Z"
+            fill="url(#boltgrad)" opacity=".85"/>
+      <defs>
+        <linearGradient id="boltgrad" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stop-color="#fb7185"/>
+          <stop offset="100%" stop-color="#f97316"/>
+        </linearGradient>
+      </defs>
+    </svg>
+  </div>
+
+  <h1 class="error-title">Something Went Wrong</h1>
+  <p class="error-desc">
+    An unexpected error occurred on the server. Our team has been notified.
+    Please try again in a moment, or return to the home page.
+  </p>
+
+  <div class="error-actions">
+    <a href="{{ url_for('home') }}" class="btn-err-primary">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M3 12L12 3l9 9"/><path d="M9 21V12h6v9"/></svg>
+      Back to Home
+    </a>
+    <button onclick="location.reload()" class="btn-err-secondary">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+      Retry
+    </button>
+  </div>
+
+  <p class="error-footer">
+    <a href="{{ url_for('home') }}">ICH Screening</a> — AI-Assisted CT Hemorrhage Detection
+  </p>
+</div>
+</body>
+</html>

templates/auth/forgot_password.html

@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Forgot Password — ICH Screening</title>
+  <meta name="description" content="Reset your ICH Screening account password."/>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}"/>
+</head>
+<body>
+<div class="auth-page">
+
+  <!-- ── Left brand panel ── -->
+  <aside class="auth-brand">
+    <div class="auth-brand-logo">
+      <div class="auth-brand-icon">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
+        </svg>
+      </div>
+      <span class="auth-brand-name">ICH Screening</span>
+    </div>
+
+    <div class="auth-headline">
+      <h2>Secure <span class="grad">Account</span> Recovery</h2>
+      <p>We'll help you regain access to your account quickly and securely.</p>
+    </div>
+
+    <ul class="auth-features">
+      <li>
+        <span class="feat-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+        </span>
+        Reset link sent to your email
+      </li>
+      <li>
+        <span class="feat-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+        </span>
+        Secure token-based reset
+      </li>
+      <li>
+        <span class="feat-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        </span>
+        Link expires in 30 minutes
+      </li>
+    </ul>
+
+    <div class="auth-illustration">
+      <svg width="200" height="150" viewBox="0 0 200 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <!-- envelope body -->
+        <rect x="20" y="55" width="160" height="88" rx="10" fill="#111c33" stroke="#243356" stroke-width="1.5"/>
+        <!-- envelope flap fold lines -->
+        <polyline points="20,55 100,108 180,55"
+                  stroke="#1e3060" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+        <!-- envelope top edge highlight -->
+        <line x1="20" y1="55" x2="180" y2="55" stroke="#243356" stroke-width="1"/>
+        <!-- lock body — centered in envelope: cx=100, cy=90 -->
+        <rect x="85" y="88" width="30" height="24" rx="4"
+              fill="#6ea8fe" opacity=".92"/>
+        <!-- lock shackle -->
+        <path d="M90 88 v-8 a10 10 0 0 1 20 0 v8"
+              stroke="#6ea8fe" stroke-width="3" stroke-linecap="round" fill="none"/>
+        <!-- keyhole dot -->
+        <circle cx="100" cy="100" r="3" fill="#0c1427"/>
+        <!-- subtle glow around lock -->
+        <circle cx="100" cy="97" r="22" stroke="#6ea8fe" stroke-width="1" opacity=".12"/>
+      </svg>
+    </div>
+  </aside>
+
+  <!-- ── Right form panel ── -->
+  <main class="auth-form-panel">
+    <div class="auth-card" id="formCard">
+      <div class="auth-card-header">
+        <h2>Forgot password?</h2>
+        <p>Enter your email and we'll send you a reset link</p>
+      </div>
+
+      {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+          <div class="auth-alerts">
+            {% for category, message in messages %}
+              <div class="alert alert-{{ category }}">
+                {% if category == 'error' %}
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+                {% else %}
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+                {% endif %}
+                {{ message }}
+              </div>
+            {% endfor %}
+          </div>
+        {% endif %}
+      {% endwith %}
+
+      <!-- Success state (shown via JS or flash) -->
+      <div id="successState" style="display:none; text-align:center; padding: 16px 0;">
+        <div style="width:64px;height:64px;border-radius:50%;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;">
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+        </div>
+        <h3 style="color:#e8ecf6;font-size:1.2rem;font-weight:800;margin-bottom:10px;">Check your inbox</h3>
+        <p style="color:#8ba0c4;font-size:.9rem;line-height:1.65;margin-bottom:24px;">
+          If that email address is registered, you'll receive a password reset link shortly. Check your spam folder if you don't see it.
+        </p>
+        <a href="{{ url_for('auth.login') }}" class="btn-auth-submit" style="display:block;text-decoration:none;text-align:center;">
+          Back to Sign In
+        </a>
+      </div>
+
+      <form method="POST" class="auth-form" id="fpForm">
+        <div class="form-group">
+          <label for="email">Email address</label>
+          <div class="input-wrap">
+            <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+            <input type="email" id="email" name="email" required autofocus
+                   placeholder="your@email.com" autocomplete="email"/>
+          </div>
+        </div>
+
+        <button type="submit" class="btn-auth-submit">Send Reset Link</button>
+      </form>
+
+      <div class="auth-footer">
+        Remember your password? <a href="{{ url_for('auth.login') }}">Sign in</a>
+      </div>
+    </div>
+  </main>
+</div>
+
+<script src="{{ url_for('static', filename='js/forgot-password.js') }}" defer></script>
+</body>
+</html>

templates/auth/login.html

@@ -0,0 +1,197 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Login — ICH Screening</title>
+  <meta name="description" content="Sign in to the ICH Screening AI dashboard."/>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}"/>
+</head>
+<body>
+<div class="auth-page">
+
+  <!-- ── Left brand panel ── -->
+  <aside class="auth-brand">
+    <div class="auth-brand-logo">
+      <div class="auth-brand-icon">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
+        </svg>
+      </div>
+      <span class="auth-brand-name">ICH Screening</span>
+    </div>
+
+    <div class="auth-headline">
+      <h2>AI-Powered <span class="grad">Hemorrhage</span> Detection</h2>
+      <p>Clinical-grade CT scan analysis with Grad-CAM explainability and automated triage reporting.</p>
+    </div>
+
+    <ul class="auth-features">
+      <li>
+        <span class="feat-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
+        </span>
+        Deep learning ICH classification
+      </li>
+      <li>
+        <span class="feat-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
+        </span>
+        Grad-CAM heatmap visualisation
+      </li>
+      <li>
+        <span class="feat-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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"/></svg>
+        </span>
+        Automated clinical PDF reports
+      </li>
+      <li>
+        <span class="feat-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+        </span>
+        Secure, per-user data isolation
+      </li>
+    </ul>
+
+    <!-- CT Scanner Radar Illustration -->
+    <div class="auth-illustration">
+      <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <radialGradient id="scanGlow" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stop-color="#6ea8fe" stop-opacity=".18"/>
+            <stop offset="100%" stop-color="#6ea8fe" stop-opacity="0"/>
+          </radialGradient>
+          <clipPath id="scanClip">
+            <circle cx="100" cy="100" r="96"/>
+          </clipPath>
+        </defs>
+
+        <!-- Scanner frame -->
+        <circle cx="100" cy="100" r="96" fill="#07101f" stroke="#243356" stroke-width="2"/>
+
+        <!-- Brain tissue layers (filled — depth via lightness) -->
+        <circle cx="100" cy="100" r="80" fill="#0b1728"/>
+        <circle cx="100" cy="100" r="64" fill="#0e1d32"/>
+        <circle cx="100" cy="100" r="46" fill="#111e34"/>
+        <circle cx="100" cy="100" r="26" fill="#09131e"/>
+
+        <!-- Layer stroke rings -->
+        <circle cx="100" cy="100" r="80" stroke="#1a2d4e" stroke-width="1"/>
+        <circle cx="100" cy="100" r="64" stroke="#162244" stroke-width=".75"/>
+        <circle cx="100" cy="100" r="46" stroke="#162244" stroke-width=".5"/>
+
+        <!-- Crosshair guide lines (clipped to scanner) -->
+        <g clip-path="url(#scanClip)" opacity=".22">
+          <line x1="4" y1="100" x2="196" y2="100" stroke="#6ea8fe" stroke-width=".75"/>
+          <line x1="100" y1="4" x2="100" y2="196" stroke="#6ea8fe" stroke-width=".75"/>
+          <line x1="29" y1="29" x2="171" y2="171" stroke="#6ea8fe" stroke-width=".5"/>
+          <line x1="171" y1="29" x2="29" y2="171" stroke="#6ea8fe" stroke-width=".5"/>
+        </g>
+
+        <!-- Radar sweep wedge: top-right quarter (0° → 90°) -->
+        <!-- Wedge fill -->
+        <path d="M100,100 L100,20 A80,80 0 0,1 180,100 Z" fill="#6ea8fe" opacity=".07"/>
+        <!-- Trailing edge (vertical) -->
+        <line x1="100" y1="100" x2="100" y2="20" stroke="#6ea8fe" stroke-width="1" opacity=".4"/>
+        <!-- Leading edge (horizontal) -->
+        <line x1="100" y1="100" x2="180" y2="100" stroke="#6ea8fe" stroke-width="1.5" opacity=".85"/>
+        <!-- Arc from top to right —  A80,80 0 0,1 means clockwise, rx=ry=80 -->
+        <path d="M100,20 A80,80 0 0,1 180,100" stroke="#6ea8fe" stroke-width="2" stroke-linecap="round" opacity=".9"/>
+
+        <!-- Anchor dots at sweep endpoints -->
+        <circle cx="100" cy="20" r="2.5" fill="#6ea8fe" opacity=".6"/>
+        <circle cx="180" cy="100" r="3.5" fill="#6ea8fe" opacity=".9"/>
+
+        <!-- Cardinal tick marks -->
+        <line x1="100" y1="4"  x2="100" y2="14"  stroke="#6ea8fe" stroke-width="2" stroke-linecap="round" opacity=".7"/>
+        <line x1="100" y1="186" x2="100" y2="196" stroke="#6ea8fe" stroke-width="2" stroke-linecap="round" opacity=".7"/>
+        <line x1="4"   y1="100" x2="14"  y2="100" stroke="#6ea8fe" stroke-width="2" stroke-linecap="round" opacity=".7"/>
+        <line x1="186" y1="100" x2="196" y2="100" stroke="#6ea8fe" stroke-width="2" stroke-linecap="round" opacity=".7"/>
+
+        <!-- Outer scanner ring overlay -->
+        <circle cx="100" cy="100" r="96" fill="none" stroke="#6ea8fe" stroke-width="1" opacity=".35"/>
+
+        <!-- Center reticle -->
+        <circle cx="100" cy="100" r="17" stroke="#6ea8fe" stroke-width=".75" fill="none" opacity=".2"/>
+        <circle cx="100" cy="100" r="10" stroke="#6ea8fe" stroke-width="1"    fill="none" opacity=".45"/>
+        <circle cx="100" cy="100" r="4"  fill="#6ea8fe" opacity=".95"/>
+
+        <!-- Radial glow overlay -->
+        <circle cx="100" cy="100" r="96" fill="url(#scanGlow)"/>
+      </svg>
+    </div>
+  </aside>
+
+  <!-- ── Right form panel ── -->
+  <main class="auth-form-panel">
+    <div class="auth-card">
+      <div class="auth-card-header">
+        <h2>Welcome back</h2>
+        <p>Sign in to your ICH Screening account</p>
+      </div>
+
+      {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+          <div class="auth-alerts">
+            {% for category, message in messages %}
+              <div class="alert alert-{{ category }}">
+                {% if category == 'error' %}
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" flex-shrink="0"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+                {% else %}
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+                {% endif %}
+                {{ message }}
+              </div>
+            {% endfor %}
+          </div>
+        {% endif %}
+      {% endwith %}
+
+      <form method="POST" class="auth-form" id="loginForm">
+        <div class="form-group">
+          <label for="username">Username</label>
+          <div class="input-wrap">
+            <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+            <input type="text" id="username" name="username" required autofocus
+                   placeholder="Enter your username" autocomplete="username"/>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="password">Password</label>
+          <div class="input-wrap">
+            <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+            <input type="password" id="password" name="password" required
+                   class="has-toggle" placeholder="Enter your password" autocomplete="current-password"/>
+            <button type="button" class="btn-pw-toggle" id="togglePw" aria-label="Toggle password visibility">
+              <svg id="eyeIcon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+        </div>
+
+        <div class="auth-row">
+          <label class="form-check">
+            <input type="checkbox" name="remember" id="remember" class="form-check-input"/>
+            <span class="form-check-label">Remember me</span>
+          </label>
+          <a href="{{ url_for('auth.forgot_password') }}" class="auth-link-sm">Forgot password?</a>
+        </div>
+
+        <button type="submit" class="btn-auth-submit" id="loginBtn">Sign In</button>
+      </form>
+
+      <div class="auth-footer">
+        Don't have an account? <a href="{{ url_for('auth.register') }}">Create one</a>
+      </div>
+    </div>
+  </main>
+</div>
+
+<script src="{{ url_for('static', filename='js/auth-shared.js') }}" defer></script>
+<script src="{{ url_for('static', filename='js/login.js') }}" defer></script>
+</body>
+</html>

templates/auth/profile.html

@@ -0,0 +1,137 @@
+{% extends "base.html" %}
+
+{% block title %}Profile — ICH Screening{% endblock %}
+
+{% block content %}
+<div class="profile-page">
+
+  <!-- ── Profile hero ── -->
+  <div class="profile-hero">
+    <div class="profile-avatar" aria-label="User avatar">
+      {{ user.username[0].upper() }}
+    </div>
+    <div class="profile-identity">
+      <h2>{{ user.full_name or user.username }}</h2>
+      <div class="profile-email">{{ user.email }}</div>
+      <span class="profile-badge">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        Member since {{ user.created_at.strftime('%B %Y') }}
+      </span>
+    </div>
+  </div>
+
+  <!-- ── Account info ── -->
+  <div class="profile-section">
+    <h3>
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><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>
+      Account Information
+    </h3>
+    <div class="profile-row">
+      <span class="pr-label">Username</span>
+      <span class="pr-value">{{ user.username }}</span>
+    </div>
+    <div class="profile-row">
+      <span class="pr-label">Email</span>
+      <span class="pr-value">{{ user.email }}</span>
+    </div>
+    {% if user.full_name %}
+    <div class="profile-row">
+      <span class="pr-label">Full Name</span>
+      <span class="pr-value">{{ user.full_name }}</span>
+    </div>
+    {% endif %}
+    <div class="profile-row">
+      <span class="pr-label">Account Status</span>
+      <span class="pr-value" style="color:#34d399;">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" style="margin-right:4px;vertical-align:middle"><circle cx="12" cy="12" r="10"/></svg>
+        Active
+      </span>
+    </div>
+    <div class="profile-row">
+      <span class="pr-label">Member Since</span>
+      <span class="pr-value">{{ user.created_at.strftime('%B %d, %Y') }}</span>
+    </div>
+  </div>
+
+  <!-- ── Security ── -->
+  <div class="profile-section">
+    <h3>
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+      Security
+    </h3>
+
+    <div id="pwMessage"></div>
+
+    <div class="pw-change-section">
+      <button class="pw-toggle-btn" id="pwToggleBtn" type="button">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+        Change Password
+      </button>
+
+      <div class="pw-change-fields" id="pwFields">
+        <form id="changePasswordForm" class="auth-form" style="gap:12px;"
+              data-change-password-url="{{ url_for('auth.change_password') }}">
+          <div class="form-group">
+            <label for="currentPassword">Current Password</label>
+            <div class="input-wrap">
+              <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+              <input type="password" id="currentPassword" name="current_password" required
+                     class="has-toggle" placeholder="Enter current password"/>
+              <button type="button" class="btn-pw-toggle" id="toggleCur" aria-label="Toggle">
+                <svg id="eyeCur" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+          </div>
+          <div class="form-group">
+            <label for="newPassword">New Password</label>
+            <div class="input-wrap">
+              <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+              <input type="password" id="newPassword" name="new_password" required
+                     class="has-toggle" placeholder="8+ chars, upper, lower, digit"/>
+              <button type="button" class="btn-pw-toggle" id="toggleNew" aria-label="Toggle">
+                <svg id="eyeNew" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+            <div class="pw-strength-bar"><div class="pw-strength-fill" id="profilePwBar"></div></div>
+            <span class="pw-strength-text" id="profilePwText"></span>
+          </div>
+          <div class="form-group">
+            <label for="confirmPassword">Confirm New Password</label>
+            <div class="input-wrap">
+              <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+              <input type="password" id="confirmPassword" name="confirm_password" required
+                     class="has-toggle" placeholder="Re-enter new password"/>
+            </div>
+          </div>
+          <div class="pw-action-row">
+            <button type="submit" class="btn-save-pw">Update Password</button>
+            <button type="button" class="btn-cancel-pw" id="pwCancelBtn">Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <!-- ── Danger zone ── -->
+  <div class="profile-section profile-danger">
+    <h3>
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><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"/></svg>
+      Account Actions
+    </h3>
+    <form method="POST" action="{{ url_for('auth.logout') }}">
+      <button type="submit" class="btn-logout-danger">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+        Sign Out
+      </button>
+    </form>
+  </div>
+
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/auth-shared.js') }}" defer></script>
+<script src="{{ url_for('static', filename='js/profile.js') }}" defer></script>
+<script src="{{ url_for('static', filename='js/profile-page.js') }}" defer></script>
+{% endblock %}
+

templates/auth/register.html

@@ -0,0 +1,219 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Create Account — ICH Screening</title>
+  <meta name="description" content="Register for the ICH Screening AI platform."/>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}"/>
+</head>
+<body>
+<div class="auth-page">
+
+  <!-- ── Left brand panel ── -->
+  <aside class="auth-brand">
+    <div class="auth-brand-logo">
+      <div class="auth-brand-icon">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
+        </svg>
+      </div>
+      <span class="auth-brand-name">ICH Screening</span>
+    </div>
+
+    <div class="auth-headline">
+      <h2>Start Your <span class="grad">AI Screening</span> Journey</h2>
+      <p>Join clinicians and researchers using AI-powered CT analysis for faster, more accurate hemorrhage detection.</p>
+    </div>
+
+    <ul class="auth-features">
+      <li>
+        <span class="feat-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+        Free to get started
+      </li>
+      <li>
+        <span class="feat-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+        </span>
+        Your scans stay private
+      </li>
+      <li>
+        <span class="feat-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
+        </span>
+        Full calibration metrics & reports
+      </li>
+      <li>
+        <span class="feat-icon">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        </span>
+        Results in seconds
+      </li>
+    </ul>
+
+    <!-- Scan-Complete Illustration -->
+    <div class="auth-illustration">
+      <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <radialGradient id="regGlow" cx="50%" cy="50%" r="50%">
+            <stop offset="0%"   stop-color="#34d399" stop-opacity=".15"/>
+            <stop offset="100%" stop-color="#34d399" stop-opacity="0"/>
+          </radialGradient>
+          <clipPath id="regClip">
+            <circle cx="100" cy="100" r="96"/>
+          </clipPath>
+        </defs>
+
+        <!-- Scanner frame -->
+        <circle cx="100" cy="100" r="96" fill="#07101f" stroke="#243356" stroke-width="2"/>
+
+        <!-- Brain tissue layers -->
+        <circle cx="100" cy="100" r="80" fill="#0b1f1a"/>
+        <circle cx="100" cy="100" r="64" fill="#0d2420"/>
+        <circle cx="100" cy="100" r="46" fill="#0f2822"/>
+        <circle cx="100" cy="100" r="26" fill="#091a14"/>
+
+        <!-- Layer stroke rings -->
+        <circle cx="100" cy="100" r="80" stroke="#163830" stroke-width="1"/>
+        <circle cx="100" cy="100" r="64" stroke="#1a4035" stroke-width=".75"/>
+
+        <!-- Crosshair guide lines (clipped) -->
+        <g clip-path="url(#regClip)" opacity=".2">
+          <line x1="4"   y1="100" x2="196" y2="100" stroke="#34d399" stroke-width=".75"/>
+          <line x1="100" y1="4"   x2="100" y2="196" stroke="#34d399" stroke-width=".75"/>
+          <line x1="29"  y1="29"  x2="171" y2="171" stroke="#34d399" stroke-width=".4"/>
+          <line x1="171" y1="29"  x2="29"  y2="171" stroke="#34d399" stroke-width=".4"/>
+        </g>
+
+        <!-- Full scan ring (all 360° — scan complete) -->
+        <circle cx="100" cy="100" r="80" fill="none" stroke="#34d399" stroke-width="1.5" opacity=".35"/>
+
+        <!-- Cardinal tick marks (green = complete) -->
+        <line x1="100" y1="4"   x2="100" y2="14"  stroke="#34d399" stroke-width="2" stroke-linecap="round" opacity=".8"/>
+        <line x1="100" y1="186" x2="100" y2="196" stroke="#34d399" stroke-width="2" stroke-linecap="round" opacity=".8"/>
+        <line x1="4"   y1="100" x2="14"  y2="100" stroke="#34d399" stroke-width="2" stroke-linecap="round" opacity=".8"/>
+        <line x1="186" y1="100" x2="196" y2="100" stroke="#34d399" stroke-width="2" stroke-linecap="round" opacity=".8"/>
+
+        <!-- Outer scanner ring overlay -->
+        <circle cx="100" cy="100" r="96" fill="none" stroke="#34d399" stroke-width="1" opacity=".35"/>
+
+        <!-- Center reticle circle -->
+        <circle cx="100" cy="100" r="22" fill="rgba(52,211,153,.1)" stroke="#34d399" stroke-width="1.5"/>
+        <circle cx="100" cy="100" r="32" stroke="#34d399" stroke-width=".75" fill="none" opacity=".2"/>
+
+        <!-- Checkmark inside reticle -->
+        <polyline points="89,100 97,109 114,88"
+                  stroke="#34d399" stroke-width="2.5"
+                  stroke-linecap="round" stroke-linejoin="round"/>
+
+        <!-- Glow overlay -->
+        <circle cx="100" cy="100" r="96" fill="url(#regGlow)"/>
+      </svg>
+    </div>
+  </aside>
+
+  <!-- ── Right form panel ── -->
+  <main class="auth-form-panel">
+    <div class="auth-card">
+      <div class="auth-card-header">
+        <h2>Create account</h2>
+        <p>Fill in your details to get started</p>
+      </div>
+
+      {% with messages = get_flashed_messages(with_categories=true) %}
+        {% if messages %}
+          <div class="auth-alerts">
+            {% for category, message in messages %}
+              <div class="alert alert-{{ category }}">
+                {% if category == 'error' %}
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+                {% else %}
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+                {% endif %}
+                {{ message }}
+              </div>
+            {% endfor %}
+          </div>
+        {% endif %}
+      {% endwith %}
+
+      <form method="POST" class="auth-form" id="registerForm">
+        <!-- Username -->
+        <div class="form-group">
+          <label for="username">Username</label>
+          <div class="input-wrap">
+            <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+            <input type="text" id="username" name="username" required autofocus
+                   placeholder="3–80 chars, letters/numbers/-/_" autocomplete="username"/>
+          </div>
+          <span class="form-hint">Letters, numbers, hyphens and underscores only</span>
+        </div>
+
+        <!-- Email -->
+        <div class="form-group">
+          <label for="email">Email</label>
+          <div class="input-wrap">
+            <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+            <input type="email" id="email" name="email" required
+                   placeholder="your@email.com" autocomplete="email"/>
+          </div>
+        </div>
+
+        <!-- Full Name (optional) -->
+        <div class="form-group">
+          <label for="full_name">Full Name <span style="color:#3d5482;font-weight:500;text-transform:none;letter-spacing:0">(optional)</span></label>
+          <div class="input-wrap">
+            <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+            <input type="text" id="full_name" name="full_name"
+                   placeholder="Dr. Jane Smith" autocomplete="name"/>
+          </div>
+        </div>
+
+        <!-- Password -->
+        <div class="form-group">
+          <label for="password">Password</label>
+          <div class="input-wrap">
+            <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+            <input type="password" id="password" name="password" required
+                   class="has-toggle" placeholder="8+ chars, upper, lower, digit" autocomplete="new-password"/>
+            <button type="button" class="btn-pw-toggle" id="togglePw" aria-label="Toggle password visibility">
+              <svg id="eyeIcon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+          <div class="pw-strength-bar"><div class="pw-strength-fill" id="pwBar"></div></div>
+          <span class="pw-strength-text" id="pwText"></span>
+        </div>
+
+        <!-- Confirm Password -->
+        <div class="form-group">
+          <label for="confirm_password">Confirm Password</label>
+          <div class="input-wrap">
+            <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+            <input type="password" id="confirm_password" name="confirm_password" required
+                   class="has-toggle" placeholder="Re-enter your password" autocomplete="new-password"/>
+            <button type="button" class="btn-pw-toggle" id="togglePw2" aria-label="Toggle confirm password">
+              <svg id="eyeIcon2" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
+        </div>
+
+        <button type="submit" class="btn-auth-submit">Create Account</button>
+      </form>
+
+      <div class="auth-footer">
+        Already have an account? <a href="{{ url_for('auth.login') }}">Sign in</a>
+      </div>
+    </div>
+  </main>
+</div>
+
+<script src="{{ url_for('static', filename='js/auth-shared.js') }}" defer></script>
+<script src="{{ url_for('static', filename='js/register.js') }}" defer></script>
+</body>
+</html>

templates/base.html

@@ -10,10 +10,11 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
       rel="stylesheet"
     />
-    <link
-      rel="stylesheet"
-      href="{{ url_for('static', filename='styles.css') }}"
-    />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/components.css') }}" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/pages.css') }}" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/responsive.css') }}" />
     {% block head %}{% endblock %}
   </head>
   <body>
@@ -39,19 +40,45 @@
         </a>
 
         <nav class="nav-links">
-          <a href="{{ url_for('home') }}"
-             class="{% if request.endpoint == 'home' %}active{% endif %}">Home</a>
-          <a href="{{ url_for('upload') }}"
-             class="{% if request.endpoint == 'upload' %}active{% endif %}">New Scan</a>
-          <a href="{{ url_for('reports') }}"
-             class="{% if request.endpoint == 'reports' %}active{% endif %}">Past Reports</a>
-          <a href="{{ url_for('logs_page') }}"
-             class="{% if request.endpoint == 'logs_page' %}active{% endif %}">Logs</a>
-          <a href="{{ url_for('evaluation') }}"
-             class="{% if request.endpoint == 'evaluation' %}active{% endif %}">Evaluation</a>
-          <a href="{{ url_for('about') }}"
-             class="{% if request.endpoint == 'about' %}active{% endif %}">About</a>
+          {% if current_user.is_authenticated %}
+            <a href="{{ url_for('home') }}"
+               class="{% if request.endpoint == 'home' %}active{% endif %}">Home</a>
+            <a href="{{ url_for('upload') }}"
+               class="{% if request.endpoint == 'upload' %}active{% endif %}">New Scan</a>
+            <a href="{{ url_for('reports') }}"
+               class="{% if request.endpoint == 'reports' %}active{% endif %}">Past Reports</a>
+            <a href="{{ url_for('logs_page') }}"
+               class="{% if request.endpoint == 'logs_page' %}active{% endif %}">Logs</a>
+            <a href="{{ url_for('evaluation') }}"
+               class="{% if request.endpoint == 'evaluation' %}active{% endif %}">Evaluation</a>
+            <a href="{{ url_for('about') }}"
+               class="{% if request.endpoint == 'about' %}active{% endif %}">About</a>
+          {% endif %}
         </nav>
+
+        {% if current_user.is_authenticated %}
+        <div class="user-menu">
+          <button class="user-button" type="button" data-user-menu-toggle="true" title="User menu">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+              <circle cx="12" cy="7" r="4"></circle>
+            </svg>
+            <span>{{ current_user.username }}</span>
+          </button>
+          <div id="userMenuDropdown" class="user-menu-dropdown">
+            <a href="{{ url_for('auth.profile') }}" class="menu-item">Profile</a>
+            <hr>
+            <form method="POST" action="{{ url_for('auth.logout') }}" class="logout-form">
+              <button type="submit" class="menu-item logout-btn">Logout</button>
+            </form>
+          </div>
+        </div>
+        {% else %}
+        <div class="auth-buttons">
+          <a href="{{ url_for('auth.login') }}" class="btn btn-sm btn-outline">Login</a>
+          <a href="{{ url_for('auth.register') }}" class="btn btn-sm btn-primary">Register</a>
+        </div>
+        {% endif %}
       </div>
     </header>
 
@@ -72,5 +99,6 @@
     </footer>
 
     {% block scripts %}{% endblock %}
+    <script src="{{ url_for('static', filename='js/layout.js') }}" defer></script>
   </body>
 </html>

templates/batch_progress.html

@@ -3,6 +3,7 @@
 {% block title %}Batch Processing — ICH Screening{% endblock %}
 
 {% block content %}
+<div class="batch-page" data-batch-id="{{ batch_id }}" data-status-url="{{ url_for('batch_status', batch_id=batch_id) }}" data-reports-url="{{ url_for('reports') }}">
 <section class="breadcrumb">
   <a href="{{ url_for('home') }}">Home</a>
   <span class="sep">/</span>
@@ -76,109 +77,9 @@
   <h3 class="text-red">Failed Files</h3>
   <ul class="batch-fail-list" id="failList"></ul>
 </section>
+ </div>
 {% endblock %}
 
 {% block scripts %}
-<script>
-(function () {
-  var BATCH_ID    = "{{ batch_id }}";
-  var POLL_MS     = 1000;
-  var statusUrl   = "/batch/status/" + BATCH_ID;
-  var reportsUrl  = "{{ url_for('reports') }}";
-
-  var title        = document.getElementById("batchTitle");
-  var subtitle     = document.getElementById("batchSubtitle");
-  var fill         = document.getElementById("progressFill");
-  var pctLabel     = document.getElementById("progressPct");
-  var currentFile  = document.getElementById("currentFile");
-  var statTotal    = document.getElementById("statTotal");
-  var statProc     = document.getElementById("statProcessed");
-  var statOK       = document.getElementById("statSucceeded");
-  var statFail     = document.getElementById("statFailed");
-  var feedPanel    = document.getElementById("feedPanel");
-  var feedList     = document.getElementById("batchFeed");
-  var donePanel    = document.getElementById("donePanel");
-  var doneSummary  = document.getElementById("doneSummary");
-  var failPanel    = document.getElementById("failPanel");
-  var failList     = document.getElementById("failList");
-
-  var prevIds = [];   // track already-shown image_ids
-
-  function poll() {
-    fetch(statusUrl)
-      .then(function (r) { return r.json(); })
-      .then(function (d) {
-        var pct = d.total > 0 ? Math.round(d.processed / d.total * 100) : 0;
-
-        /* Update numbers */
-        statTotal.textContent = d.total;
-        statProc.textContent  = d.processed;
-        statOK.textContent    = d.succeeded;
-        statFail.textContent  = d.failed_count;
-
-        /* Progress bar */
-        fill.style.width = pct + "%";
-        pctLabel.textContent = pct + "%";
-
-        /* Current file label */
-        if (d.current_file) {
-          currentFile.textContent = "Processing: " + d.current_file;
-        } else {
-          currentFile.textContent = "";
-        }
-
-        /* Live feed of recently processed IDs */
-        if (d.image_ids && d.image_ids.length) {
-          feedPanel.style.display = "block";
-          d.image_ids.forEach(function (iid) {
-            if (prevIds.indexOf(iid) === -1) {
-              prevIds.push(iid);
-              var li = document.createElement("li");
-              var a  = document.createElement("a");
-              a.href = "/case/" + iid;
-              a.textContent = iid;
-              li.appendChild(a);
-              feedList.insertBefore(li, feedList.firstChild);
-              /* Keep max 20 items visible */
-              while (feedList.children.length > 20) {
-                feedList.removeChild(feedList.lastChild);
-              }
-            }
-          });
-        }
-
-        /* Done? */
-        if (d.status === "completed" || d.status === "failed") {
-          title.textContent = "Batch Complete";
-          subtitle.textContent = "";
-          donePanel.style.display = "block";
-          doneSummary.textContent =
-            d.succeeded + " of " + d.total + " files processed successfully" +
-            (d.failed_count > 0 ? ", " + d.failed_count + " failed" : "") + ".";
-
-          /* Show failed files */
-          if (d.failed_ids && d.failed_ids.length) {
-            failPanel.style.display = "block";
-            d.failed_ids.forEach(function (fid) {
-              var li = document.createElement("li");
-              li.textContent = fid;
-              failList.appendChild(li);
-            });
-          }
-          return; /* stop polling */
-        }
-
-        /* Keep polling */
-        setTimeout(poll, POLL_MS);
-      })
-      .catch(function () {
-        /* Network error — retry after a longer delay */
-        setTimeout(poll, POLL_MS * 3);
-      });
-  }
-
-  /* Start polling immediately */
-  poll();
-})();
-</script>
+<script src="{{ url_for('static', filename='js/batch.js') }}" defer></script>
 {% endblock %}

templates/home.html

@@ -1,120 +1,146 @@
 {% extends "base.html" %}
 
-{% block title %}ICH Screening — Home{% endblock %}
+{% block title %}ICH Screening — Dashboard{% endblock %}
+
+{% block head %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}"/>
+{% endblock %}
 
 {% block content %}
-<section class="home-hero">
-  <h1>ICH Screening System</h1>
+
+<!-- ── Hero ── -->
+<section class="landing-hero">
+  <div class="landing-badge">
+    <span class="badge-dot"></span>
+    AI-Powered Screening
+  </div>
+  <h1>Intracranial Hemorrhage<br><span class="hero-grad">Detection System</span></h1>
   <p>
-    AI-Assisted CT-Based Intracranial Hemorrhage Detection with
-    Explainability and Clinical Reporting
+    Clinical-grade CT scan analysis powered by deep learning — with Grad-CAM visualisation,
+    automated triage, and exportable PDF reports.
   </p>
+  <div class="hero-cta-row">
+    <a href="{{ url_for('upload') }}" class="btn-hero-primary">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+           stroke-width="2.5" stroke-linecap="round">
+        <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>
+      Upload a Scan
+    </a>
+    <a href="{{ url_for('reports') }}" class="btn-hero-secondary">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+           stroke-width="2" stroke-linecap="round">
+        <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"/>
+      </svg>
+      View Reports
+    </a>
+  </div>
 </section>
 
-<!-- Quick stats row -->
+<!-- ── Stats ── -->
 {% if stats.total > 0 %}
-<section class="stats-row home-stats">
-  <div class="stat-card">
+<section class="stats-section">
+  <div class="stat-card" style="animation-delay:.05s">
     <div class="stat-label">Total Scans</div>
-    <div class="stat-value">{{ stats.total }}</div>
+    <div class="stat-value" data-count="{{ stats.total }}">0</div>
   </div>
-  <div class="stat-card accent-red">
+  <div class="stat-card accent-red" style="animation-delay:.1s">
     <div class="stat-label">Positive</div>
-    <div class="stat-value">{{ stats.positive }}</div>
+    <div class="stat-value" data-count="{{ stats.positive }}">0</div>
   </div>
-  <div class="stat-card accent-green">
+  <div class="stat-card accent-green" style="animation-delay:.15s">
     <div class="stat-label">Negative</div>
-    <div class="stat-value">{{ stats.negative }}</div>
+    <div class="stat-value" data-count="{{ stats.negative }}">0</div>
   </div>
-  <div class="stat-card accent-orange">
+  <div class="stat-card accent-orange" style="animation-delay:.2s">
     <div class="stat-label">Urgent</div>
-    <div class="stat-value">{{ stats.urgent }}</div>
+    <div class="stat-value" data-count="{{ stats.urgent }}">0</div>
   </div>
-  <div class="stat-card accent-blue">
+  <div class="stat-card accent-blue" style="animation-delay:.25s">
     <div class="stat-label">Positivity Rate</div>
     <div class="stat-value">{{ '%.1f'|format(stats.pos_rate) }}%</div>
   </div>
-  <div class="stat-card">
+  <div class="stat-card" style="animation-delay:.3s">
     <div class="stat-label">Avg Cal. Prob</div>
     <div class="stat-value">{{ '%.3f'|format(stats.avg_cal_prob) }}</div>
   </div>
 </section>
 {% endif %}
 
-<!-- Main action cards -->
-<section class="home-cards">
-  <a href="{{ url_for('upload') }}" class="home-card">
-    <div class="home-card-icon">
-      <svg width="48" height="48" viewBox="0 0 24 24" fill="none"
-           stroke="currentColor" stroke-width="1.5"
-           stroke-linecap="round" stroke-linejoin="round">
-        <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" />
+<!-- ── Quick Actions heading ── -->
+<div class="section-heading">
+  <h2>Quick Actions</h2>
+  <div class="section-line"></div>
+</div>
+
+<!-- ── Main action cards ── -->
+<section class="action-cards">
+  <a href="{{ url_for('upload') }}" class="action-card">
+    <div class="action-card-icon">
+      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+           stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+        <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>
     </div>
     <h2>Upload Scans</h2>
-    <p>
-      Upload single or batch DICOM scans (.dcm / .zip) for AI-powered
-      hemorrhage screening with Grad-CAM visualization.
-    </p>
-    <span class="home-card-action">Upload files &rarr;</span>
+    <p>Upload single or batch DICOM scans (.dcm / .zip) for AI-powered hemorrhage screening
+       with Grad-CAM heatmap visualisation.</p>
+    <span class="action-card-cta">Upload files →</span>
   </a>
 
-  <a href="{{ url_for('reports') }}" class="home-card">
-    <div class="home-card-icon">
-      <svg width="48" height="48" viewBox="0 0 24 24" fill="none"
-           stroke="currentColor" stroke-width="1.5"
-           stroke-linecap="round" stroke-linejoin="round">
-        <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" />
-        <line x1="16" y1="13" x2="8" y2="13" />
-        <line x1="16" y1="17" x2="8" y2="17" />
+  <a href="{{ url_for('reports') }}" class="action-card">
+    <div class="action-card-icon">
+      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+           stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+        <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"/>
+        <line x1="16" y1="13" x2="8" y2="13"/>
+        <line x1="16" y1="17" x2="8" y2="17"/>
       </svg>
     </div>
     <h2>Past Reports</h2>
-    <p>
-      Browse {{ stats.total }} screening reports with confidence bands,
-      triage actions, and Grad-CAM heatmaps.
-    </p>
-    <span class="home-card-action">View reports &rarr;</span>
+    <p>Browse {{ stats.total }} screening report{{ 's' if stats.total != 1 }} with confidence bands,
+       triage actions, and Grad-CAM heatmaps.</p>
+    <span class="action-card-cta">View reports →</span>
   </a>
 </section>
 
-<!-- Secondary cards -->
-<section class="home-cards home-cards-secondary">
-  <a href="{{ url_for('logs_page') }}" class="home-card home-card-sm">
-    <div class="home-card-icon">
-      <svg width="32" height="32" viewBox="0 0 24 24" fill="none"
-           stroke="currentColor" stroke-width="1.5">
-        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
-        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+<!-- ── Mini cards ── -->
+<section class="mini-cards">
+  <a href="{{ url_for('logs_page') }}" class="mini-card">
+    <div class="mini-card-icon">
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
+        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
       </svg>
     </div>
     <h3>Execution Logs</h3>
     <p class="muted small">{{ log_count }} inference trace{{ 's' if log_count != 1 }} recorded</p>
   </a>
 
-  <a href="{{ url_for('evaluation') }}" class="home-card home-card-sm">
-    <div class="home-card-icon">
-      <svg width="32" height="32" viewBox="0 0 24 24" fill="none"
-           stroke="currentColor" stroke-width="1.5">
-        <line x1="18" y1="20" x2="18" y2="10" />
-        <line x1="12" y1="20" x2="12" y2="4" />
-        <line x1="6" y1="20" x2="6" y2="14" />
+  <a href="{{ url_for('evaluation') }}" class="mini-card">
+    <div class="mini-card-icon">
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+        <line x1="18" y1="20" x2="18" y2="10"/>
+        <line x1="12" y1="20" x2="12" y2="4"/>
+        <line x1="6" y1="20" x2="6" y2="14"/>
       </svg>
     </div>
     <h3>Model Evaluation</h3>
     <p class="muted small">Calibration metrics and band analysis</p>
   </a>
 
-  <a href="{{ url_for('about') }}" class="home-card home-card-sm">
-    <div class="home-card-icon">
-      <svg width="32" height="32" viewBox="0 0 24 24" fill="none"
-           stroke="currentColor" stroke-width="1.5">
-        <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" />
+  <a href="{{ url_for('about') }}" class="mini-card">
+    <div class="mini-card-icon">
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+        <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"/>
       </svg>
     </div>
     <h3>About</h3>
@@ -122,9 +148,54 @@
   </a>
 </section>
 
-<section class="disclaimer-box" style="margin-top: 32px">
-  <strong>Disclaimer:</strong>
-  This is an AI-assisted screening tool and does NOT constitute a medical
-  diagnosis. All findings must be reviewed by a qualified medical professional.
+<!-- ── How it works ── -->
+<section class="how-section">
+  <div class="section-heading">
+    <h2>How It Works</h2>
+    <div class="section-line"></div>
+  </div>
+  <div class="how-steps">
+    <div class="how-step">
+      <div class="how-num">1</div>
+      <h4>Upload DICOM</h4>
+      <p>Upload a .dcm file or a .zip batch. Single slices or full series are both supported.</p>
+    </div>
+    <div class="how-step">
+      <div class="how-num">2</div>
+      <h4>AI Inference</h4>
+      <p>A calibrated deep-learning model scores each slice for ICH probability.</p>
+    </div>
+    <div class="how-step">
+      <div class="how-num">3</div>
+      <h4>Grad-CAM Heatmap</h4>
+      <p>Gradient-weighted class activation maps highlight regions driving the prediction.</p>
+    </div>
+    <div class="how-step">
+      <div class="how-num">4</div>
+      <h4>Clinical Report</h4>
+      <p>An auto-generated PDF report with findings, confidence bands, and triage action.</p>
+    </div>
+  </div>
 </section>
+
+<!-- ── Disclaimer ── -->
+<div class="disclaimer-box" style="margin-top:36px;">
+  <svg class="disclaimer-icon" width="18" height="18" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="2">
+    <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"/>
+  </svg>
+  <div>
+    <strong>Medical Disclaimer:</strong>
+    This is an AI-assisted screening tool and does <strong>not</strong> constitute a medical diagnosis.
+    All findings must be reviewed and confirmed by a qualified medical professional before
+    any clinical action is taken.
+  </div>
+</div>
+
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/home.js') }}" defer></script>
 {% endblock %}

templates/upload.html

@@ -197,135 +197,5 @@
 {% endblock %}
 
 {% block scripts %}
-<script>
-(function () {
-  /* ── Tab switching ────────────────────────────────────────────────── */
-  var tabs   = document.querySelectorAll(".upload-tab");
-  var panels = document.querySelectorAll(".tab-panel");
-
-  tabs.forEach(function (tab) {
-    tab.addEventListener("click", function () {
-      tabs.forEach(function (t) { t.classList.remove("active"); });
-      panels.forEach(function (p) { p.classList.remove("active"); });
-      tab.classList.add("active");
-      var target = document.getElementById("tab-" + tab.dataset.tab);
-      if (target) target.classList.add("active");
-    });
-  });
-
-  /* ── Helper: generic dropzone wiring ─────────────────────────────── */
-  function wireDropzone(opts) {
-    var zone    = document.getElementById(opts.zoneId);
-    var input   = document.getElementById(opts.inputId);
-    var info    = document.getElementById(opts.infoId);
-    var label   = document.getElementById(opts.labelId);
-    var clear   = document.querySelector(opts.clearSel);
-    var submit  = document.getElementById(opts.submitId);
-    var form    = document.getElementById(opts.formId);
-    var overlay = document.getElementById(opts.overlayId);
-
-    if (!zone || !input) return;
-
-    function showFiles(files) {
-      var validFiles = [];
-      for (var i = 0; i < files.length; i++) {
-        var name = files[i].name.toLowerCase();
-        if (name.endsWith(".dcm") || name.endsWith(".zip")) {
-          validFiles.push(files[i]);
-        }
-      }
-      if (!validFiles.length) return;
-
-      if (opts.multi) {
-        var totalSizeMB = 0;
-        for (var j = 0; j < validFiles.length; j++) {
-          totalSizeMB += validFiles[j].size / (1024 * 1024);
-        }
-        label.textContent = validFiles.length + " file" +
-          (validFiles.length > 1 ? "s" : "") +
-          " (" + totalSizeMB.toFixed(1) + " MB)";
-      } else {
-        label.textContent = validFiles[0].name;
-      }
-
-      info.style.display  = "flex";
-      zone.style.display  = "none";
-      submit.disabled     = false;
-    }
-
-    function reset() {
-      input.value         = "";
-      info.style.display  = "none";
-      zone.style.display  = "flex";
-      submit.disabled     = true;
-    }
-
-    zone.addEventListener("click", function () { input.click(); });
-
-    zone.addEventListener("dragover", function (e) {
-      e.preventDefault();
-      zone.classList.add("dragover");
-    });
-    zone.addEventListener("dragleave", function () {
-      zone.classList.remove("dragover");
-    });
-    zone.addEventListener("drop", function (e) {
-      e.preventDefault();
-      zone.classList.remove("dragover");
-      if (e.dataTransfer.files.length) {
-        input.files = e.dataTransfer.files;
-        showFiles(e.dataTransfer.files);
-      }
-    });
-
-    input.addEventListener("change", function () {
-      if (input.files.length) showFiles(input.files);
-    });
-
-    if (clear) clear.addEventListener("click", reset);
-
-    if (form && overlay) {
-      form.addEventListener("submit", function () {
-        overlay.style.display = "flex";
-        submit.disabled = true;
-      });
-    }
-  }
-
-  /* ── Wire single-file dropzone ───────────────────────────────────── */
-  wireDropzone({
-    zoneId:    "dropzoneSingle",
-    inputId:   "singleInput",
-    infoId:    "singleInfo",
-    labelId:   "singleFileName",
-    clearSel:  ".js-clear-single",
-    submitId:  "singleSubmit",
-    formId:    "singleForm",
-    overlayId: "singleOverlay",
-    multi:     false,
-  });
-
-  /* ── Wire multi-file dropzone ────────────────────────────────────── */
-  wireDropzone({
-    zoneId:    "dropzoneMulti",
-    inputId:   "multiInput",
-    infoId:    "multiInfo",
-    labelId:   "multiFileName",
-    clearSel:  ".js-clear-multi",
-    submitId:  "multiSubmit",
-    formId:    "multiForm",
-    overlayId: "multiOverlay",
-    multi:     true,
-  });
-
-  /* ── Directory scan: disable submit when input is empty ──────────── */
-  var dirInput  = document.getElementById("dirPath");
-  var dirSubmit = document.getElementById("dirSubmit");
-  if (dirInput && dirSubmit) {
-    function checkDir() { dirSubmit.disabled = !dirInput.value.trim(); }
-    dirInput.addEventListener("input", checkDir);
-    checkDir();
-  }
-})();
-</script>
+<script src="{{ url_for('static', filename='js/upload.js') }}" defer></script>
 {% endblock %}