Reset DCT options to Color+JPEG when switching from LSB

Compact mode UI with smart output options
Encode page: - Inline mode buttons: DCT | LSB | Color | Gray | JPEG | PNG - LSB mode auto-selects Color+PNG and disables Gray/JPEG - Dynamic hint text with icons below mode buttons Decode page: - Compact inline mode buttons: Auto | LSB | DCT - Dynamic hints that change per mode selection CSS: - Disabled btn-check styling for dimmed unavailable options 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-07 19:29:29 -05:00 · 2026-01-07 19:28:38 -05:00 · 2026-01-07 19:16:24 -05:00 · 2026-01-07 18:36:33 -05:00
21 changed files with 2950 additions and 762 deletions
--- a/PLAN-4.1.6.md
+++ b/PLAN-4.1.6.md
@@ -0,0 +1,97 @@
+# Stegasoo v4.1.6 Planning
+
+## UI Tweaks
+
+### 1. Revamp Tron Lines Animation (Carrier/Stego Image)
+**Current state:**
+- 6-8 snake paths, each with 3-5 segments (~24-40 total lines)
+- 2px thick lines
+- 30-60px length per segment
+- Starting points spread across 80% of image area
+- Colors: yellow, cyan, purple, blue with glow
+
+**Target improvements:**
+- [x] Thinner lines (1px instead of 2px)
+- [x] More numerous (20-40 paths via 5x4 grid, ~60-200 segments total)
+- [x] Better distribution across entire image (grid-based seeding)
+- [x] Shorter segments (12-30px) for denser "circuit board" look
+
+**Files:**
+- `frontends/web/static/style.css` (~881-979) - `.embed-trace` styling
+- `frontends/web/static/js/stegasoo.js` (~333-390) - `generateEmbedTraces()`
+
+---
+
+## Tools Page Expansion
+
+### Analysis Tools
+- [x] **JPEG Compression Tester** - Preview image at different quality levels (10-100%), show file size delta. Useful for understanding stego survivability.
+- [ ] **LSB Plane Viewer** - Visualize least significant bit plane(s) of RGB channels. Classic stego analysis tool.
+- [ ] **Histogram Viewer** - Color distribution graph per channel. Anomalies can indicate hidden data.
+- [ ] **Image Diff** - Compare two images side-by-side with pixel difference highlighting. Great for original vs stego comparison.
+- [ ] **Noise Analysis** - Chi-square or similar statistical analysis for detecting LSB embedding.
+
+### Transform Tools
+- [x] **Rotate/Flip** - 90°/180°/270° rotation, horizontal/vertical flip
+- [ ] **Resize** - Scale with aspect ratio lock, common presets (50%, 25%, etc.)
+- [ ] **Crop** - Basic rectangular crop with preview
+- [x] **Format Convert** - PNG ↔ JPEG ↔ WebP with quality slider
+
+### Existing Tools (already done)
+- [x] Capacity Calculator
+- [x] EXIF Viewer
+- [x] EXIF Strip
+- [x] Image Peek (header analysis)
+
+### Tools UI/UX Overhaul
+
+**Final Layout: Office-style Ribbon + Two-Panel**
+```
+┌─────────────────────────────────────────────────────────────┐
+│  📏  📋  👁️  📊  ┃  ✂️  🔄  📐  🔀      Image Tools         │ ← Icon toolbar
+├────────────────────────────────────────┬────────────────────┤
+│  [Format: PNG ▼] [Quality: 85]         │                    │
+├────────────────────────────────────────┤  Capacity          │
+│                                        │  Calculator        │
+│    ┌────────────────────────────┐     │  ──────────────    │
+│    │                            │     │                    │
+│    │      Drop image here       │     │  Dimensions:       │
+│    │         or click           │     │  1920 × 1080       │
+│    │                            │     │                    │
+│    └────────────────────────────┘     │  LSB Capacity:     │
+│                                        │  245 KB            │
+│           [image.jpg]                  │                    │
+│                                        │  ──────────────    │
+│                                        │  [Clear] [Export]  │
+└────────────────────────────────────────┴────────────────────┘
+      Options + dropzone/preview             Results sidebar
+```
+
+- Top ribbon: Icon buttons grouped by category (Analyze | Transform)
+- Left panel: Tool options + dropzone/preview (INPUT)
+- Right panel: Tool name + results/metadata + actions (OUTPUT)
+- Flow: Left → Right (input → output)
+
+**Implementation Tasks:**
+- [x] Move inline CSS to style.css
+- [x] Build icon toolbar ribbon
+- [x] Build two-panel layout structure
+- [x] Migrate existing tools (Capacity, EXIF, Strip)
+- [x] Add new tools (Rotate, Compress, Convert)
+- [ ] Loading spinner on all async operations
+- [ ] Toast notifications instead of alerts
+- [ ] Consistent color coding (green=analysis, amber=transform)
+- [ ] Mobile: stack panels vertically
+
+---
+
+## CLI Improvements
+
+### (Add items here)
+
+---
+
+## Other UI Tweaks
+
+### (Add items here)
+
--- a/SECURITY_AUDIT_PLAN.md
+++ b/SECURITY_AUDIT_PLAN.md
@@ -0,0 +1,284 @@
+# Stegasoo Security Audit Plan
+
+> **Target Audience**: Developers, security reviewers, and deployment administrators
+> **Scope**: Web UI, REST API, CLI, and cryptographic core
+> **Deployment Model**: Air-gapped / private LAN (primary), Internet-facing (secondary)
+
+---
+
+## Overview
+
+Stegasoo is a steganography tool designed for **air-gapped deployments** on private networks. While the primary threat model assumes a trusted local network, this audit plan covers security best practices for both isolated and potentially exposed deployments.
+
+### Known Limitations (By Design)
+
+- **Self-signed certificates**: HTTPS uses self-signed certs; users must add exceptions or deploy their own CA
+- **No rate limiting**: Assumes trusted users on private network
+- **Single-node**: No distributed session store; sessions are per-instance
+- **Air-gap focus**: External security (firewalls, network isolation) is user's responsibility
+
+---
+
+## 1. Authentication & Authorization
+
+### 1.1 Password Security
+- [ ] Passwords hashed with Argon2id (preferred) or PBKDF2 fallback
+- [ ] Minimum password length enforced (8+ characters)
+- [ ] Password not logged or exposed in error messages
+- [ ] Password change requires current password verification
+- [ ] Admin re-authentication required for sensitive operations (channel key export)
+
+### 1.2 Session Management
+- [ ] Session tokens are cryptographically random
+- [ ] Session cookies have `HttpOnly` flag
+- [ ] Session cookies have `Secure` flag (when HTTPS enabled)
+- [ ] Session cookies have `SameSite` attribute
+- [ ] Sessions invalidated on logout
+- [ ] Sessions invalidated on password change
+- [ ] Session timeout configured appropriately
+
+### 1.3 Authorization
+- [ ] Admin-only routes protected by `@admin_required` decorator
+- [ ] User-only routes protected by `@login_required` decorator
+- [ ] Users cannot access other users' saved channel keys
+- [ ] Users cannot modify other users' accounts
+- [ ] Role escalation not possible through API manipulation
+
+---
+
+## 2. Cryptographic Implementation
+
+### 2.1 Key Derivation
+- [ ] KDF uses Argon2id with appropriate parameters (memory, iterations, parallelism)
+- [ ] PBKDF2 fallback uses sufficient iterations (600,000+)
+- [ ] Salt is cryptographically random and unique per operation
+- [ ] PIN/passphrase combined securely before KDF
+
+### 2.2 Encryption
+- [ ] AES-256-GCM used for payload encryption
+- [ ] Nonce/IV is unique per encryption operation
+- [ ] Authentication tag verified before decryption
+- [ ] No padding oracle vulnerabilities
+
+### 2.3 Channel Keys
+- [ ] Channel keys are 128-bit (32 hex chars)
+- [ ] Channel key derivation uses HKDF or similar
+- [ ] Channel isolation prevents cross-channel decryption
+- [ ] Fingerprint reveals no information about full key
+
+### 2.4 Random Number Generation
+- [ ] All random values use `secrets` module or OS CSPRNG
+- [ ] No use of `random` module for security-sensitive operations
+
+---
+
+## 3. Input Validation & Injection Prevention
+
+### 3.1 Web UI
+- [ ] All user input sanitized before rendering (XSS prevention)
+- [ ] Jinja2 auto-escaping enabled
+- [ ] No `| safe` filter on user-controlled content
+- [ ] Content-Security-Policy header configured
+- [ ] X-Content-Type-Options: nosniff
+
+### 3.2 File Uploads
+- [ ] File size limits enforced server-side
+- [ ] File type validation (magic bytes, not just extension)
+- [ ] Uploaded files not executed
+- [ ] Filenames sanitized (path traversal prevention)
+- [ ] Temporary files cleaned up after processing
+
+### 3.3 API Inputs
+- [ ] JSON schema validation on API endpoints
+- [ ] Integer overflow checks on size parameters
+- [ ] No SQL injection (parameterized queries only)
+- [ ] No command injection (no shell=True with user input)
+
+---
+
+## 4. Steganography-Specific Security
+
+### 4.1 Carrier Image Handling
+- [ ] Malformed images don't crash the server (PIL/jpegio hardening)
+- [ ] DCT mode subprocess isolation for crash protection
+- [ ] Memory limits on image processing
+- [ ] No arbitrary code execution from image metadata
+
+### 4.2 Payload Security
+- [ ] Payload size limits enforced
+- [ ] Encrypted payload indistinguishable from random noise
+- [ ] No metadata leakage in output images
+- [ ] Reference photo required (prevents dictionary attacks)
+
+### 4.3 Capacity Reporting
+- [ ] Capacity calculation doesn't leak information about encoding method
+- [ ] Failed decodes don't reveal why (wrong key vs no data vs corrupted)
+
+---
+
+## 5. Network & Transport Security
+
+### 5.1 HTTPS Configuration
+- [ ] TLS 1.2+ only (no SSLv3, TLS 1.0/1.1)
+- [ ] Strong cipher suites configured
+- [ ] Certificate generation uses 2048+ bit RSA or P-256 EC
+- [ ] Private key file permissions restricted (600)
+
+### 5.2 Headers
+- [ ] X-Frame-Options: DENY (clickjacking prevention)
+- [ ] X-Content-Type-Options: nosniff
+- [ ] Referrer-Policy: same-origin
+- [ ] Permissions-Policy configured
+
+### 5.3 CORS (if applicable)
+- [ ] CORS not enabled (or restricted to specific origins)
+- [ ] Credentials not allowed cross-origin
+
+---
+
+## 6. Error Handling & Logging
+
+### 6.1 Error Messages
+- [ ] Stack traces not exposed to users in production
+- [ ] Error messages don't reveal sensitive paths or config
+- [ ] Failed login doesn't reveal if username exists
+
+### 6.2 Logging
+- [ ] Passwords never logged
+- [ ] Channel keys never logged
+- [ ] Passphrases never logged
+- [ ] Log files have appropriate permissions
+- [ ] Sensitive operations logged for audit trail (optional)
+
+---
+
+## 7. Dependency Security
+
+### 7.1 Python Dependencies
+- [ ] All dependencies pinned to specific versions
+- [ ] No known vulnerabilities in dependencies (run `pip-audit` or `safety`)
+- [ ] Dependencies from trusted sources only (PyPI)
+
+### 7.2 Frontend Dependencies
+- [ ] All JS/CSS served locally (air-gap ready)
+- [ ] No CDN dependencies
+- [ ] Bootstrap and libraries are official releases
+- [ ] Subresource integrity considered for any external loads
+
+---
+
+## 8. Deployment Security
+
+### 8.1 File Permissions
+- [ ] Database file not world-readable (600 or 640)
+- [ ] SSL certificates/keys not world-readable
+- [ ] Config files with secrets protected
+- [ ] Instance directory not in web root
+
+### 8.2 Docker Deployment
+- [ ] Container runs as non-root user
+- [ ] No unnecessary capabilities
+- [ ] Resource limits configured
+- [ ] Health checks don't expose sensitive info
+
+### 8.3 Raspberry Pi Deployment
+- [ ] Default passwords changed
+- [ ] SSH key-only authentication (recommended)
+- [ ] Unnecessary services disabled
+- [ ] Firewall configured (UFW/iptables)
+
+---
+
+## 9. Air-Gap Specific Considerations
+
+### 9.1 Network Isolation
+- [ ] Document expected network topology
+- [ ] No phone-home or telemetry
+- [ ] No external API calls
+- [ ] Works fully offline after deployment
+
+### 9.2 Key Distribution
+- [ ] QR code export for channel keys (offline transfer)
+- [ ] Print sheet for physical key backup
+- [ ] No cloud sync or external key servers
+
+### 9.3 Updates
+- [ ] Document offline update procedure
+- [ ] Signed releases (future consideration)
+- [ ] Checksum verification for downloads
+
+---
+
+## 10. Penetration Testing Checklist
+
+### 10.1 Authentication Attacks
+- [ ] Brute force login (note: no rate limiting by design)
+- [ ] Session fixation
+- [ ] Session hijacking
+- [ ] Password reset flow abuse
+
+### 10.2 Injection Attacks
+- [ ] SQL injection on all inputs
+- [ ] XSS (stored, reflected, DOM-based)
+- [ ] Command injection
+- [ ] Path traversal
+- [ ] SSTI (Server-Side Template Injection)
+
+### 10.3 Business Logic
+- [ ] Access control bypass
+- [ ] IDOR (Insecure Direct Object Reference)
+- [ ] Race conditions
+- [ ] Integer overflow in capacity calculations
+
+### 10.4 Cryptographic Attacks
+- [ ] Known-plaintext attacks on stego output
+- [ ] Timing attacks on password verification
+- [ ] Padding oracle attacks
+- [ ] Key reuse vulnerabilities
+
+---
+
+## Tools for Automated Testing
+
+```bash
+# Dependency vulnerability scan
+pip-audit
+safety check
+
+# Static analysis
+bandit -r stegasoo/ frontends/
+
+# Web security scan (if exposed)
+nikto -h https://localhost:5000
+OWASP ZAP (manual)
+
+# SSL/TLS configuration
+testssl.sh https://localhost:5000
+
+# Python code quality
+ruff check .
+mypy stegasoo/
+```
+
+---
+
+## Audit Schedule
+
+| Phase | Focus Area | Priority |
+|-------|-----------|----------|
+| Pre-release | Crypto implementation, auth flow | Critical |
+| Post-release | Dependency scan, static analysis | High |
+| Quarterly | Full penetration test | Medium |
+| Ongoing | CVE monitoring for dependencies | High |
+
+---
+
+## Notes
+
+- This plan assumes **trusted users on a private network** as the primary deployment model
+- Internet-facing deployments should add rate limiting, fail2ban, and reverse proxy hardening
+- For high-security deployments, consider external security audit by professionals
+
+---
+
+*Last updated: 2026-01-07*
--- a/frontends/web/app.py
+++ b/frontends/web/app.py
@@ -2105,6 +2105,145 @@ def api_tools_exif_clear():
        return jsonify({"success": False, "error": str(e)}), 500


+@app.route("/api/tools/rotate", methods=["POST"])
+@login_required
+def api_tools_rotate():
+    """Rotate and/or flip an image."""
+    from PIL import Image
+
+    image_file = request.files.get("image")
+    if not image_file:
+        return jsonify({"success": False, "error": "No image provided"}), 400
+
+    rotation = int(request.form.get("rotation", 0))
+    flip_h = request.form.get("flip_h", "false").lower() == "true"
+    flip_v = request.form.get("flip_v", "false").lower() == "true"
+
+    try:
+        img = Image.open(io.BytesIO(image_file.read()))
+
+        # Apply rotation (PIL rotates counter-clockwise, so negate)
+        if rotation:
+            img = img.rotate(-rotation, expand=True)
+
+        # Apply flips
+        if flip_h:
+            img = img.transpose(Image.FLIP_LEFT_RIGHT)
+        if flip_v:
+            img = img.transpose(Image.FLIP_TOP_BOTTOM)
+
+        # Output as PNG (lossless)
+        buffer = io.BytesIO()
+        img.save(buffer, format="PNG")
+        buffer.seek(0)
+
+        stem = (
+            image_file.filename.rsplit(".", 1)[0]
+            if "." in image_file.filename
+            else image_file.filename
+        )
+        return send_file(
+            buffer,
+            mimetype="image/png",
+            as_attachment=True,
+            download_name=f"{stem}_transformed.png",
+        )
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)}), 500
+
+
+@app.route("/api/tools/compress", methods=["POST"])
+@login_required
+def api_tools_compress():
+    """Compress image to JPEG at specified quality."""
+    from PIL import Image
+
+    image_file = request.files.get("image")
+    if not image_file:
+        return jsonify({"success": False, "error": "No image provided"}), 400
+
+    quality = int(request.form.get("quality", 85))
+    quality = max(10, min(100, quality))  # Clamp to valid range
+
+    try:
+        img = Image.open(io.BytesIO(image_file.read()))
+
+        # Convert to RGB if necessary (JPEG doesn't support alpha)
+        if img.mode in ("RGBA", "LA", "P"):
+            img = img.convert("RGB")
+
+        buffer = io.BytesIO()
+        img.save(buffer, format="JPEG", quality=quality)
+        buffer.seek(0)
+
+        stem = (
+            image_file.filename.rsplit(".", 1)[0]
+            if "." in image_file.filename
+            else image_file.filename
+        )
+        return send_file(
+            buffer,
+            mimetype="image/jpeg",
+            as_attachment=True,
+            download_name=f"{stem}_q{quality}.jpg",
+        )
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)}), 500
+
+
+@app.route("/api/tools/convert", methods=["POST"])
+@login_required
+def api_tools_convert():
+    """Convert image to different format."""
+    from PIL import Image
+
+    image_file = request.files.get("image")
+    if not image_file:
+        return jsonify({"success": False, "error": "No image provided"}), 400
+
+    output_format = request.form.get("format", "PNG").upper()
+    quality = int(request.form.get("quality", 90))
+    quality = max(10, min(100, quality))
+
+    # Validate format
+    format_map = {
+        "PNG": ("png", "image/png"),
+        "JPEG": ("jpg", "image/jpeg"),
+        "WEBP": ("webp", "image/webp"),
+    }
+    if output_format not in format_map:
+        return jsonify({"success": False, "error": f"Unsupported format: {output_format}"}), 400
+
+    try:
+        img = Image.open(io.BytesIO(image_file.read()))
+
+        # Convert to RGB for JPEG (no alpha)
+        if output_format == "JPEG" and img.mode in ("RGBA", "LA", "P"):
+            img = img.convert("RGB")
+
+        buffer = io.BytesIO()
+        save_kwargs = {"format": output_format}
+        if output_format in ("JPEG", "WEBP"):
+            save_kwargs["quality"] = quality
+        img.save(buffer, **save_kwargs)
+        buffer.seek(0)
+
+        ext, mimetype = format_map[output_format]
+        stem = (
+            image_file.filename.rsplit(".", 1)[0]
+            if "." in image_file.filename
+            else image_file.filename
+        )
+        return send_file(
+            buffer,
+            mimetype=mimetype,
+            as_attachment=True,
+            download_name=f"{stem}.{ext}",
+        )
+    except Exception as e:
+        return jsonify({"success": False, "error": str(e)}), 500
+
+
 # Add these two test routes anywhere in app.py after the app = Flask(...) line:


@@ -2554,6 +2693,70 @@ def api_channel_key_use(key_id):
 # ============================================================================


+@app.route("/admin/settings")
+@admin_required
+def admin_settings():
+    """System settings page (admin only)."""
+    import platform
+    import sys
+
+    from stegasoo import __version__
+    from stegasoo.channel import get_channel_status
+
+    channel_status = get_channel_status()
+
+    return render_template(
+        "admin/settings.html",
+        # Channel info (key hidden until password verified)
+        channel_configured=channel_status["configured"],
+        channel_fingerprint=channel_status.get("fingerprint"),
+        channel_source=channel_status.get("source"),
+        # Server config
+        hostname=os.environ.get("STEGASOO_HOSTNAME") or socket.gethostname(),
+        port=os.environ.get("STEGASOO_PORT", "5000"),
+        https_enabled=app.config.get("HTTPS_ENABLED", False),
+        auth_enabled=app.config.get("AUTH_ENABLED", True),
+        max_payload_kb=MAX_FILE_PAYLOAD_SIZE // 1024,
+        max_upload_mb=MAX_FILE_SIZE // (1024 * 1024),
+        dct_available=has_dct_support(),
+        qr_available=HAS_QRCODE_READ,
+        # Environment
+        version=__version__,
+        python_version=f"{sys.version_info.major}.{sys.version_info.minor}.{sys.version_info.micro}",
+        platform=platform.system(),
+        kdf_type="Argon2id" if has_argon2() else "PBKDF2",
+    )
+
+
+@app.route("/admin/settings/unlock", methods=["POST"])
+@admin_required
+def admin_settings_unlock():
+    """Verify password and return channel key (AJAX)."""
+    from stegasoo.channel import get_channel_status
+
+    data = request.get_json() or {}
+    password = data.get("password", "")
+
+    if not password:
+        return jsonify({"success": False, "error": "Password required"})
+
+    # Get current user and verify password
+    username = get_username()
+    user = verify_user_password(username, password)
+
+    if not user:
+        return jsonify({"success": False, "error": "Incorrect password"})
+
+    # Password verified - return channel key
+    channel_status = get_channel_status()
+    channel_key = channel_status.get("key") if channel_status["configured"] else ""
+
+    return jsonify({
+        "success": True,
+        "channel_key": channel_key
+    })
+
+
@app.route("/admin/users")
@admin_required
 def admin_users():
--- a/frontends/web/dev_run.sh
+++ b/frontends/web/dev_run.sh
@@ -0,0 +1,52 @@
+#!/bin/bash
+# Stegasoo Web Frontend - Development Runner
+# Press 'r' to restart, 'q' to quit (single keypress, no Enter needed)
+
+cd "$(dirname "$0")"
+
+PID=""
+
+cleanup() {
+    echo -e "\n\033[33mShutting down...\033[0m"
+    [[ -n "$PID" ]] && kill "$PID" 2>/dev/null
+    stty sane 2>/dev/null
+    exit 0
+}
+
+trap cleanup SIGINT SIGTERM EXIT
+
+start_server() {
+    clear
+    echo -e "\033[36m┌──────────────────────────────────────┐\033[0m"
+    echo -e "\033[36m│  Stegasoo Dev Server                 │\033[0m"
+    echo -e "\033[36m│  \033[0m[r] restart  [q] quit\033[36m              │\033[0m"
+    echo -e "\033[36m└──────────────────────────────────────┘\033[0m"
+
+    pkill -f "python app.py" 2>/dev/null
+    sleep 0.3
+
+    python app.py 2>&1 &
+    PID=$!
+    echo -e "\033[32m✓ Running on http://localhost:5000 (PID: $PID)\033[0m\n"
+}
+
+start_server
+
+# Single keypress mode
+stty -echo -icanon time 0 min 0
+
+while true; do
+    key=$(dd bs=1 count=1 2>/dev/null)
+    case "$key" in
+        r|R) start_server ;;
+        q|Q) cleanup ;;
+    esac
+
+    # Check if crashed
+    if [[ -n "$PID" ]] && ! kill -0 "$PID" 2>/dev/null; then
+        echo -e "\033[31m✗ Crashed! Press 'r' to restart\033[0m"
+        PID=""
+    fi
+
+    sleep 0.1
+done
--- a/frontends/web/static/js/qrcode.min.js
+++ b/frontends/web/static/js/qrcode.min.js
--- a/frontends/web/static/js/stegasoo.js
+++ b/frontends/web/static/js/stegasoo.js
@@ -334,19 +334,29 @@ const Stegasoo = {
        // Color classes for variety
        const colors = ['color-yellow', 'color-cyan', 'color-purple', 'color-blue'];

-        // Generate 6-8 snake paths spread across the whole image
-        const numPaths = 6 + Math.floor(Math.random() * 3);
+        // Grid-based distribution: divide image into cells for even coverage
+        const gridCols = 5;
+        const gridRows = 4;
+        const cellWidth = width / gridCols;
+        const cellHeight = height / gridRows;

-        for (let p = 0; p < numPaths; p++) {
-            // Each path gets a random color
+        let pathIndex = 0;
+
+        // Spawn 1-2 paths from each grid cell for even distribution
+        for (let row = 0; row < gridRows; row++) {
+            for (let col = 0; col < gridCols; col++) {
+                // 1-2 paths per cell
+                const pathsInCell = 1 + Math.floor(Math.random() * 2);
+
+                for (let p = 0; p < pathsInCell; p++) {
                    const pathColor = colors[Math.floor(Math.random() * colors.length)];

-            // Distribute starting points across the image
-            let x = (width * 0.1) + (Math.random() * width * 0.8);
-            let y = (height * 0.1) + (Math.random() * height * 0.8);
-            let delay = p * 40;
+                    // Start within this grid cell (with padding)
+                    let x = (col * cellWidth) + (cellWidth * 0.15) + (Math.random() * cellWidth * 0.7);
+                    let y = (row * cellHeight) + (cellHeight * 0.15) + (Math.random() * cellHeight * 0.7);
+                    let delay = pathIndex * 15;

-            // Each path has 3-5 segments for more coverage
+                    // Each path has 3-5 short segments
                    const numSegments = 3 + Math.floor(Math.random() * 3);
                    let horizontal = Math.random() > 0.5;

@@ -354,9 +364,10 @@ const Stegasoo = {
                        const trace = document.createElement('div');
                        trace.className = 'embed-trace ' + (horizontal ? 'h' : 'v') + ' ' + pathColor;

-                const length = 30 + Math.random() * 60;
-                trace.style.left = x + 'px';
-                trace.style.top = y + 'px';
+                        // Shorter segments: 12-30px for denser circuit look
+                        const length = 12 + Math.random() * 18;
+                        trace.style.left = Math.max(0, Math.min(x, width - length)) + 'px';
+                        trace.style.top = Math.max(0, Math.min(y, height - length)) + 'px';
                        trace.style.animationDelay = delay + 'ms';

                        if (horizontal) {
@@ -369,20 +380,21 @@ const Stegasoo = {

                        // Move position for next segment
                        if (horizontal) {
-                    x += length;
+                            x += length * (Math.random() > 0.5 ? 1 : -1);
                        } else {
-                    y += length;
+                            y += length * (Math.random() > 0.5 ? 1 : -1);
                        }

-                // Wrap around if out of bounds to keep traces in view
-                if (x > width - 20) x = 10 + Math.random() * 40;
-                if (y > height - 20) y = 10 + Math.random() * 40;
-                if (x < 10) x = width - 60 + Math.random() * 40;
-                if (y < 10) y = height - 60 + Math.random() * 40;
+                        // Keep within bounds
+                        x = Math.max(5, Math.min(x, width - 20));
+                        y = Math.max(5, Math.min(y, height - 20));

                        // Alternate direction (90 degree turn)
                        horizontal = !horizontal;
-                delay += 30;
+                        delay += 20;
+                    }
+                    pathIndex++;
+                }
            }
        }
    },
--- a/frontends/web/static/style.css
+++ b/frontends/web/static/style.css
@@ -91,6 +91,31 @@
    min-width: 0;
 }

+/* Compact inline mode buttons */
+.mode-btn.mode-btn-sm {
+    padding: 0.35rem 0.6rem;
+    padding-left: 1.75rem;
+    font-size: 0.8rem;
+    border-radius: 0.375rem;
+    border-width: 1px;
+}
+
+.mode-btn.mode-btn-sm .form-check-input {
+    left: 8px;
+    width: 14px;
+    height: 14px;
+}
+
+.mode-btn.mode-btn-sm i {
+    font-size: 0.85rem;
+}
+
+/* Disabled button labels for btn-check groups */
+.btn-check:disabled + .btn {
+    opacity: 0.4;
+    pointer-events: none;
+}
+
 /* ----------------------------------------------------------------------------
   Security Factor Boxes - Matches drop-zone dashed border style
   ---------------------------------------------------------------------------- */
@@ -125,6 +150,115 @@ body {
 .navbar {
    background: var(--overlay-dark) !important;
    backdrop-filter: blur(10px);
+    z-index: 1030;  /* Above page content for dropdowns */
+}
+
+/* Ensure navbar dropdown appears above all page content */
+.navbar .dropdown-menu {
+    z-index: 1031;
+}
+
+/* ----------------------------------------------------------------------------
+   Nav Icons - Floating Label on Hover (label floats below, no layout shift)
+   ---------------------------------------------------------------------------- */
+.nav-icons {
+    gap: 0.25rem;
+}
+
+.nav-icons .nav-item {
+    position: relative;
+}
+
+.nav-expand {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 0.75rem !important;
+    border-radius: 0.5rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: transparent;
+    position: relative;
+}
+
+.nav-expand i {
+    font-size: 1.15rem;
+    transition: all 0.3s ease;
+}
+
+/* Floating label - absolutely positioned below */
+.nav-expand span {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-4px);
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    color: var(--header-gold);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    background: linear-gradient(135deg, rgba(74, 40, 96, 0.95) 0%, rgba(85, 112, 212, 0.9) 100%);
+    padding: 0.2rem 0.5rem;
+    border-radius: 0.25rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    transition: opacity 0.2s ease,
+                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 1040;
+}
+
+.nav-expand:hover {
+    background: linear-gradient(135deg, rgba(74, 40, 96, 0.5) 0%, rgba(85, 112, 212, 0.4) 100%);
+    box-shadow: 0 0 12px rgba(102, 126, 234, 0.25),
+                inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.nav-expand:hover i {
+    color: var(--header-gold);
+    filter: drop-shadow(0 0 4px rgba(254, 232, 98, 0.4));
+}
+
+.nav-expand:hover span {
+    opacity: 1;
+    transform: translateX(-50%) translateY(2px);
+}
+
+/* Active state for current page */
+.nav-expand.active,
+.nav-item.active .nav-expand {
+    background: linear-gradient(135deg, rgba(74, 40, 96, 0.6) 0%, rgba(85, 112, 212, 0.5) 100%);
+}
+
+.nav-expand.active i,
+.nav-item.active .nav-expand i {
+    color: var(--header-gold);
+}
+
+/* Mobile: Always show labels inline in collapsed menu */
+@media (max-width: 991.98px) {
+    .nav-expand span {
+        position: static;
+        transform: none;
+        opacity: 1;
+        background: none;
+        box-shadow: none;
+        padding: 0;
+        margin-left: 0.5rem;
+        font-size: 0.9rem;
+        text-transform: none;
+        letter-spacing: normal;
+        pointer-events: auto;
+    }
+
+    .nav-expand:hover span {
+        transform: none;
+    }
+
+    .nav-expand:hover {
+        background: rgba(255, 255, 255, 0.1);
+    }
 }

 /* ----------------------------------------------------------------------------
@@ -893,36 +1027,36 @@ footer {
    opacity: 0;
 }

-/* Color variants - 60% opacity */
+/* Color variants - 70% opacity with tighter glow for thin lines */
 .embed-trace.color-yellow {
-    background: rgba(212, 225, 87, 0.6);
-    box-shadow: 0 0 6px rgba(212, 225, 87, 0.5), 0 0 12px rgba(212, 225, 87, 0.3);
+    background: rgba(212, 225, 87, 0.7);
+    box-shadow: 0 0 3px rgba(212, 225, 87, 0.6), 0 0 6px rgba(212, 225, 87, 0.3);
 }

 .embed-trace.color-cyan {
-    background: rgba(0, 255, 170, 0.6);
-    box-shadow: 0 0 6px rgba(0, 255, 170, 0.5), 0 0 12px rgba(0, 255, 170, 0.3);
+    background: rgba(0, 255, 170, 0.7);
+    box-shadow: 0 0 3px rgba(0, 255, 170, 0.6), 0 0 6px rgba(0, 255, 170, 0.3);
 }

 .embed-trace.color-purple {
-    background: rgba(167, 139, 250, 0.6);
-    box-shadow: 0 0 6px rgba(167, 139, 250, 0.5), 0 0 12px rgba(167, 139, 250, 0.3);
+    background: rgba(167, 139, 250, 0.7);
+    box-shadow: 0 0 3px rgba(167, 139, 250, 0.6), 0 0 6px rgba(167, 139, 250, 0.3);
 }

 .embed-trace.color-blue {
-    background: rgba(102, 126, 234, 0.6);
-    box-shadow: 0 0 6px rgba(102, 126, 234, 0.5), 0 0 12px rgba(102, 126, 234, 0.3);
+    background: rgba(102, 126, 234, 0.7);
+    box-shadow: 0 0 3px rgba(102, 126, 234, 0.6), 0 0 6px rgba(102, 126, 234, 0.3);
 }

 /* Vertical segments shrink from top */
 .embed-trace.v {
-    width: 2px;
+    width: 1px;
    transform-origin: top center;
 }

 /* Horizontal segments shrink from left */
 .embed-trace.h {
-    height: 2px;
+    height: 1px;
    transform-origin: left center;
 }

@@ -1699,3 +1833,456 @@ footer {
        font-size: 3rem;
    }
 }
+
+/* ============================================================================
+   TOOLS PAGE - Office-style Ribbon + Two-Panel Layout
+   ============================================================================ */
+
+/* Icon Toolbar Ribbon - Purple/Blue Gradient Theme */
+.tools-ribbon {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
+    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
+    border-radius: 0.5rem 0.5rem 0 0;
+    flex-wrap: wrap;
+}
+
+.tools-ribbon-group {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.tools-ribbon-divider {
+    width: 2px;
+    height: 32px;
+    background: linear-gradient(180deg, rgba(102, 126, 234, 0.4) 0%, rgba(139, 92, 246, 0.4) 100%);
+    margin: 0 0.75rem;
+    border-radius: 1px;
+}
+
+/* Tool Icon Buttons */
+.tool-icon-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 52px;
+    height: 48px;
+    padding: 0.25rem;
+    border: 1px solid transparent;
+    border-radius: 0.375rem;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.tool-icon-btn i {
+    font-size: 1.25rem;
+    margin-bottom: 2px;
+}
+
+.tool-icon-btn span {
+    font-size: 0.6rem;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
+.tool-icon-btn:hover {
+    background: rgba(139, 92, 246, 0.15);
+    border-color: rgba(139, 92, 246, 0.3);
+    color: rgba(255, 255, 255, 0.95);
+}
+
+.tool-icon-btn.active {
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
+    border-color: rgba(139, 92, 246, 0.5);
+    color: #c4b5fd;
+    box-shadow: 0 0 12px rgba(139, 92, 246, 0.2);
+}
+
+/* Two-Panel Layout */
+.tools-panels {
+    display: flex;
+    min-height: 400px;
+    border-radius: 0 0 0.5rem 0.5rem;
+}
+
+/* Left Panel - Input/Dropzone */
+.tools-panel-input {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: rgba(0, 0, 0, 0.15);
+    border-right: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+/* Tool Mode Banner - bottom of input panel */
+.tool-mode-banner {
+    margin-top: auto; /* Push to bottom */
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.6rem 1.25rem;
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
+    border-top: 1px solid rgba(139, 92, 246, 0.2);
+    font-size: 0.75rem;
+}
+
+.tool-mode-type {
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 600;
+    padding: 0.2rem 0.5rem;
+    border-radius: 3px;
+    background: rgba(139, 92, 246, 0.3);
+    color: #c4b5fd;
+}
+
+.tool-mode-banner.mode-analyze .tool-mode-type {
+    background: rgba(72, 187, 120, 0.3);
+    color: #9ae6b4;
+}
+
+.tool-mode-banner.mode-transform .tool-mode-type {
+    background: rgba(237, 181, 71, 0.3);
+    color: #fbd38d;
+}
+
+.tool-mode-name {
+    color: rgba(255, 255, 255, 0.7);
+    font-weight: 500;
+}
+
+/* Right Panel - Results */
+.tools-panel-results {
+    width: 280px;
+    min-width: 280px;
+    display: flex;
+    flex-direction: column;
+    padding: 1.25rem;
+    background: rgba(0, 0, 0, 0.25);
+}
+
+/* Tool Options Row */
+.tool-options {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    flex-wrap: wrap;
+}
+
+.tool-options:empty {
+    display: none;
+}
+
+.tool-options label {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 0;
+}
+
+.tool-options .form-select,
+.tool-options .form-control {
+    background: rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.15);
+    font-size: 0.85rem;
+    padding: 0.4rem 0.75rem;
+}
+
+/* Tool Drop Zone */
+.tool-dropzone {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+    border: 2px dashed rgba(255, 255, 255, 0.2);
+    border-radius: 0.5rem;
+    background: rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.tool-dropzone input[type="file"] {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 10;
+}
+
+.tool-dropzone-label {
+    text-align: center;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.tool-dropzone-label i {
+    font-size: 2.5rem;
+    margin-bottom: 0.75rem;
+    display: block;
+    opacity: 0.5;
+}
+
+.tool-dropzone.drag-over {
+    border-color: #63b3ed;
+    background: rgba(99, 179, 237, 0.1);
+}
+
+.tool-dropzone.drag-over .tool-dropzone-label i {
+    color: #63b3ed;
+    opacity: 1;
+}
+
+/* Dropzone with preview */
+.tool-dropzone.has-file .tool-dropzone-label {
+    display: none;
+}
+
+.tool-dropzone-preview {
+    display: none;
+    width: 100%;
+    height: 100%;
+    padding: 1rem;
+}
+
+.tool-dropzone.has-file .tool-dropzone-preview {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.tool-dropzone-preview img {
+    max-width: 100%;
+    max-height: 180px;
+    object-fit: contain;
+    border-radius: 0.375rem;
+    border: 2px solid rgba(99, 179, 237, 0.3);
+}
+
+/* Rotate preview - smooth transitions for size and transform */
+#rotateThumb {
+    transition: transform 0.1s ease-out, width 0.1s ease-out, height 0.1s ease-out;
+}
+
+/* Rotate image container - fixed height to contain rotated images */
+.rotate-img-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 180px;
+}
+
+/* Rotate file info - separate row below dropzone */
+.rotate-file-info {
+    text-align: center;
+    padding: 0.5rem 0;
+    margin-top: 0.25rem;
+}
+.rotate-file-info .file-name {
+    font-size: 0.85rem;
+    color: #63b3ed;
+    font-weight: 500;
+}
+.rotate-file-info .file-meta {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.tool-dropzone-preview .file-name {
+    margin-top: 0.75rem;
+    font-size: 0.85rem;
+    color: #63b3ed;
+    font-weight: 500;
+}
+
+.tool-dropzone-preview .file-meta {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.tool-dropzone-clear {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    z-index: 20;
+    opacity: 0.6;
+}
+
+.tool-dropzone-clear:hover {
+    opacity: 1;
+}
+
+/* Results Panel Content */
+.tool-results-header {
+    margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.tool-results-header h6 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #fff;
+}
+
+.tool-results-header small {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.tool-results-body {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.tool-results-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: rgba(255, 255, 255, 0.3);
+    text-align: center;
+}
+
+.tool-results-empty i {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+}
+
+/* Result Items */
+.tool-result-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.tool-result-item:last-child {
+    border-bottom: none;
+}
+
+.tool-result-label {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.tool-result-value {
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: #fff;
+    font-family: 'SF Mono', 'Consolas', monospace;
+}
+
+.tool-result-value.text-primary { color: #63b3ed !important; }
+.tool-result-value.text-success { color: #48bb78 !important; }
+.tool-result-value.text-warning { color: #edb547 !important; }
+
+/* Results Actions */
+.tool-results-actions {
+    margin-top: auto;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    gap: 0.5rem;
+}
+
+.tool-results-actions .btn {
+    flex: 1;
+    font-size: 0.85rem;
+}
+
+/* Tool Section Visibility */
+.tool-section {
+    display: none;
+    width: 100%;
+    flex: 1;
+    padding: 1.25rem;
+}
+
+.tool-section.active {
+    display: flex;
+    flex-direction: column;
+}
+
+/* EXIF Table in Results */
+.tool-exif-table {
+    font-size: 0.8rem;
+    max-height: 250px;
+    overflow-y: auto;
+}
+
+.tool-exif-table table {
+    width: 100%;
+}
+
+.tool-exif-table th,
+.tool-exif-table td {
+    padding: 0.35rem 0.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.tool-exif-table th {
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.5);
+    text-align: left;
+    width: 40%;
+}
+
+.tool-exif-table td {
+    font-family: 'SF Mono', 'Consolas', monospace;
+    word-break: break-all;
+}
+
+/* Loading State */
+.tool-loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 30;
+    border-radius: 0.5rem;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+    .tools-panels {
+        flex-direction: column;
+    }
+
+    .tools-panel-results {
+        width: 100%;
+        min-width: 100%;
+        border-right: none;
+        border-top: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+    .tools-ribbon {
+        justify-content: center;
+    }
+
+    .tool-icon-btn {
+        width: 48px;
+        height: 44px;
+    }
+
+    .tool-icon-btn span {
+        display: none;
+    }
+}
--- a/frontends/web/static/vendor/css/bootstrap-icons.min.css
+++ b/frontends/web/static/vendor/css/bootstrap-icons.min.css
--- a/frontends/web/static/vendor/css/bootstrap.min.css
+++ b/frontends/web/static/vendor/css/bootstrap.min.css
--- a/frontends/web/static/vendor/css/fonts/bootstrap-icons.woff
+++ b/frontends/web/static/vendor/css/fonts/bootstrap-icons.woff
--- a/frontends/web/static/vendor/css/fonts/bootstrap-icons.woff2
+++ b/frontends/web/static/vendor/css/fonts/bootstrap-icons.woff2
--- a/frontends/web/static/vendor/js/bootstrap.bundle.min.js
+++ b/frontends/web/static/vendor/js/bootstrap.bundle.min.js
--- a/frontends/web/static/vendor/js/html5-qrcode.min.js
+++ b/frontends/web/static/vendor/js/html5-qrcode.min.js
--- a/frontends/web/templates/about.html
+++ b/frontends/web/templates/about.html
@@ -317,58 +317,19 @@
                </div>
                
                {% if channel_configured %}
-                <div class="alert alert-success mt-3 mb-3">
+                <div class="alert alert-success mt-3 mb-0">
                    <i class="bi bi-shield-lock me-2"></i>
                    <strong>This server has a channel key configured:</strong>
                    <code class="ms-2">{{ channel_fingerprint }}</code>
                    <span class="text-muted ms-2">({{ channel_source }})</span>
                </div>
                {% else %}
-                <div class="alert alert-info mt-3 mb-3">
+                <div class="alert alert-info mt-3 mb-0">
                    <i class="bi bi-info-circle me-2"></i>
                    This server is running in <strong>public mode</strong>.
                    Set <code>STEGASOO_CHANNEL_KEY</code> to enable server-wide channel isolation.
                </div>
                {% endif %}
-
-                <!-- Channel Key QR Generator (Admin only) -->
-                {% if is_admin %}
-                <div class="card bg-dark border-secondary">
-                    <div class="card-header">
-                        <i class="bi bi-qr-code me-2"></i>Share Channel Key via QR
-                        <span class="badge bg-warning text-dark ms-2"><i class="bi bi-shield-check me-1"></i>Admin</span>
-                    </div>
-                    <div class="card-body">
-                        <p class="small text-muted mb-3">Generate a QR code to share a channel key with others.</p>
-                        <div class="row g-2 align-items-end">
-                            <div class="col-md-8">
-                                <label class="form-label small">Channel Key</label>
-                                <div class="input-group">
-                                    <input type="text" class="form-control font-monospace" id="channelKeyQrInput"
-                                           placeholder="Enter or generate a key">
-                                    <button class="btn btn-outline-secondary" type="button" id="channelKeyQrGenerate"
-                                            title="Generate random key">
-                                        <i class="bi bi-shuffle"></i>
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="col-md-4">
-                                <button class="btn btn-primary w-100" type="button" id="channelKeyQrShow">
-                                    <i class="bi bi-qr-code me-1"></i>Show QR
-                                </button>
-                            </div>
-                        </div>
-                        <div class="text-center mt-3 d-none" id="channelKeyQrContainer">
-                            <canvas id="channelKeyQrCanvas" class="bg-white p-2 rounded"></canvas>
-                            <div class="mt-2">
-                                <button class="btn btn-sm btn-outline-secondary" type="button" id="channelKeyQrDownload">
-                                    <i class="bi bi-download me-1"></i>Download PNG
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                {% endif %}
            </div>
        </div>
        
@@ -635,62 +596,3 @@
 </div>
 {% endblock %}

-{% block scripts %}
-<!-- QR Code library for channel key sharing -->
-<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
-<script src="{{ url_for('static', filename='js/stegasoo.js') }}"></script>
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const input = document.getElementById('channelKeyQrInput');
-    const generateBtn = document.getElementById('channelKeyQrGenerate');
-    const showBtn = document.getElementById('channelKeyQrShow');
-    const container = document.getElementById('channelKeyQrContainer');
-    const canvas = document.getElementById('channelKeyQrCanvas');
-    const downloadBtn = document.getElementById('channelKeyQrDownload');
-
-    // Generate random key
-    generateBtn?.addEventListener('click', function() {
-        if (input && typeof Stegasoo !== 'undefined') {
-            input.value = Stegasoo.generateChannelKey();
-        }
-    });
-
-    // Show QR code
-    showBtn?.addEventListener('click', function() {
-        const key = input?.value?.trim().replace(/-/g, '');
-        if (!key || key.length !== 32) {
-            alert('Please enter a valid 32-character channel key');
-            return;
-        }
-
-        // Format key with dashes for QR
-        const formatted = key.match(/.{4}/g)?.join('-') || key;
-
-        // Generate QR code
-        if (typeof QRCode !== 'undefined' && canvas) {
-            QRCode.toCanvas(canvas, formatted, {
-                width: 200,
-                margin: 2,
-                color: { dark: '#000', light: '#fff' }
-            }, function(error) {
-                if (error) {
-                    console.error('QR generation error:', error);
-                    return;
-                }
-                container?.classList.remove('d-none');
-            });
-        }
-    });
-
-    // Download QR as PNG
-    downloadBtn?.addEventListener('click', function() {
-        if (canvas) {
-            const link = document.createElement('a');
-            link.download = 'stegasoo-channel-key.png';
-            link.href = canvas.toDataURL('image/png');
-            link.click();
-        }
-    });
-});
-</script>
-{% endblock %}
--- a/frontends/web/templates/account.html
+++ b/frontends/web/templates/account.html
@@ -250,7 +250,10 @@
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="qrDownload">
-                    <i class="bi bi-download me-1"></i>Download PNG
+                    <i class="bi bi-download me-1"></i>Download
+                </button>
+                <button type="button" class="btn btn-sm btn-outline-secondary" id="qrPrint">
+                    <i class="bi bi-printer me-1"></i>Print Sheet
                </button>
            </div>
        </div>
@@ -263,7 +266,7 @@
 <script src="{{ url_for('static', filename='js/auth.js') }}"></script>
 <script src="{{ url_for('static', filename='js/stegasoo.js') }}"></script>
 {% if is_admin %}
-<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
+<script src="{{ url_for('static', filename='js/qrcode.min.js') }}"></script>
 {% endif %}
 <script>
 StegasooAuth.initPasswordConfirmation('accountForm', 'newPasswordInput', 'newPasswordConfirmInput');
@@ -305,20 +308,20 @@ function showKeyQr(channelKey, keyName) {
    document.getElementById('qrKeyName').textContent = keyName;
    document.getElementById('qrKeyDisplay').textContent = formatted;

-    // Generate QR code
+    // Generate QR code using QRious
    const canvas = document.getElementById('qrCanvas');
-    if (typeof QRCode !== 'undefined' && canvas) {
-        QRCode.toCanvas(canvas, formatted, {
-            width: 200,
-            margin: 2,
-            color: { dark: '#000', light: '#fff' }
-        }, function(error) {
-            if (error) {
-                console.error('QR generation error:', error);
-                return;
-            }
-            new bootstrap.Modal(document.getElementById('qrModal')).show();
+    if (typeof QRious !== 'undefined' && canvas) {
+        try {
+            new QRious({
+                element: canvas,
+                value: formatted,
+                size: 200,
+                level: 'M'
            });
+            new bootstrap.Modal(document.getElementById('qrModal')).show();
+        } catch (error) {
+            console.error('QR generation error:', error);
+        }
    }
 }

@@ -333,6 +336,105 @@ document.getElementById('qrDownload')?.addEventListener('click', function() {
        link.click();
    }
 });
+
+// Print tiled QR sheet (US Letter)
+document.getElementById('qrPrint')?.addEventListener('click', function() {
+    const canvas = document.getElementById('qrCanvas');
+    const keyText = document.getElementById('qrKeyDisplay').textContent;
+    const keyName = document.getElementById('qrKeyName').textContent;
+    if (canvas && keyText) {
+        printQrSheet(canvas, keyText, keyName);
+    }
+});
+
+// Print QR codes tiled on US Letter paper (8.5" x 11")
+function printQrSheet(canvas, keyText, title) {
+    const qrDataUrl = canvas.toDataURL('image/png');
+    const printWindow = window.open('', '_blank');
+    if (!printWindow) {
+        alert('Please allow popups to print');
+        return;
+    }
+
+    // US Letter: 8.5" x 11" - create 4x5 grid of QR codes
+    const cols = 4;
+    const rows = 5;
+
+    // Split key into two lines (4 groups each)
+    const keyParts = keyText.split('-');
+    const keyLine1 = keyParts.slice(0, 4).join('-');
+    const keyLine2 = keyParts.slice(4).join('-');
+
+    let qrGrid = '';
+    for (let i = 0; i < rows * cols; i++) {
+        qrGrid += `
+            <div class="qr-tile">
+                <div class="key-text">${keyLine1}</div>
+                <img src="${qrDataUrl}" alt="QR">
+                <div class="key-text">${keyLine2}</div>
+            </div>
+        `;
+    }
+
+    printWindow.document.write(`
+        <!DOCTYPE html>
+        <html>
+        <head>
+            <title></title>
+            <style>
+                @page {
+                    size: letter;
+                    margin: 0.2in;
+                    margin-top: 0.1in;
+                    margin-bottom: 0.1in;
+                }
+                @media print {
+                    @page { margin: 0.15in; }
+                    html, body { margin: 0; padding: 0; }
+                }
+                * { margin: 0; padding: 0; box-sizing: border-box; }
+                body {
+                    font-family: 'Courier New', monospace;
+                    background: white;
+                }
+                .grid {
+                    display: grid;
+                    grid-template-columns: repeat(${cols}, 1fr);
+                    gap: 0;
+                    margin-top: 0.09in;
+                }
+                .qr-tile {
+                    border: 1px dashed #ccc;
+                    padding: 0.04in;
+                    text-align: center;
+                    page-break-inside: avoid;
+                }
+                .qr-tile img {
+                    width: 1.6in;
+                    height: 1.6in;
+                }
+                .key-text {
+                    font-size: 10pt;
+                    font-weight: bold;
+                    color: #333;
+                    line-height: 1.2;
+                }
+                .footer {
+                    display: none;
+                }
+            </style>
+        </head>
+        <body>
+            <div class="grid">${qrGrid}</div>
+            <div class="footer">Cut along dashed lines</div>
+            <script>
+                window.onload = function() { window.print(); };
+            <\/script>
+        </body>
+        </html>
+    `);
+    printWindow.document.close();
+}
 {% endif %}
 </script>
 {% endblock %}
--- a/frontends/web/templates/admin/settings.html
+++ b/frontends/web/templates/admin/settings.html
@@ -0,0 +1,506 @@
+{% extends "base.html" %}
+
+{% block title %}System Settings - Stegasoo{% endblock %}
+
+{% block content %}
+<div class="row justify-content-center">
+    <div class="col-lg-10">
+        <!-- Channel Key Configuration -->
+        <div class="card mb-4">
+            <div class="card-header">
+                <h5 class="mb-0"><i class="bi bi-broadcast me-2"></i>Channel Key Configuration</h5>
+            </div>
+            <div class="card-body">
+                {% if channel_configured %}
+                <div class="alert alert-success mb-4">
+                    <i class="bi bi-shield-lock me-2"></i>
+                    <strong>Server channel key active:</strong>
+                    <code class="ms-2">{{ channel_fingerprint }}</code>
+                    <span class="text-muted ms-2">({{ channel_source }})</span>
+                </div>
+                {% else %}
+                <div class="alert alert-info mb-4">
+                    <i class="bi bi-info-circle me-2"></i>
+                    Server running in <strong>public mode</strong>.
+                    Set <code>STEGASOO_CHANNEL_KEY</code> environment variable to enable server-wide channel isolation.
+                </div>
+                {% endif %}
+
+                <!-- QR Code Generator -->
+                <div class="card bg-dark border-secondary">
+                    <div class="card-header">
+                        <i class="bi bi-qr-code me-2"></i>Share Channel Key via QR
+                    </div>
+                    <div class="card-body">
+                        <p class="small text-muted mb-3">Generate a QR code to share a channel key with others.</p>
+
+                        <!-- Locked state - requires password -->
+                        <div id="channelKeyLocked">
+                            <div class="row g-2 align-items-end">
+                                <div class="col-md-8">
+                                    <label class="form-label small">Channel Key</label>
+                                    <div class="input-group">
+                                        <input type="password" class="form-control font-monospace"
+                                               value="********************************" disabled>
+                                        <span class="input-group-text"><i class="bi bi-lock"></i></span>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <button class="btn btn-warning w-100" type="button" id="channelKeyUnlock">
+                                        <i class="bi bi-unlock me-1"></i>Unlock
+                                    </button>
+                                </div>
+                            </div>
+                            <small class="text-muted mt-2 d-block">
+                                <i class="bi bi-shield-lock me-1"></i>Re-enter your password to view or export the channel key.
+                            </small>
+                        </div>
+
+                        <!-- Unlocked state - shows key and QR options -->
+                        <div id="channelKeyUnlocked" style="display: none;">
+                            <div class="row g-2 align-items-end">
+                                <div class="col-md-8">
+                                    <label class="form-label small">Channel Key</label>
+                                    <div class="input-group">
+                                        <input type="text" class="form-control font-monospace" id="channelKeyQrInput"
+                                               placeholder="Enter or generate a key">
+                                        <button class="btn btn-outline-secondary" type="button" id="channelKeyQrGenerate"
+                                                title="Generate random key">
+                                            <i class="bi bi-shuffle"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="col-md-4">
+                                    <button class="btn btn-primary w-100" type="button" id="channelKeyQrShow">
+                                        <i class="bi bi-qr-code me-1"></i>Show QR
+                                    </button>
+                                </div>
+                            </div>
+                            <small class="text-success mt-2 d-block">
+                                <i class="bi bi-unlock me-1"></i>Unlocked for this session.
+                            </small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Server Configuration -->
+        <div class="card mb-4">
+            <div class="card-header">
+                <h5 class="mb-0"><i class="bi bi-gear me-2"></i>Server Configuration</h5>
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-6">
+                        <table class="table table-dark table-sm">
+                            <tbody>
+                                <tr>
+                                    <td><i class="bi bi-hdd-network me-2"></i>Hostname</td>
+                                    <td><code>{{ hostname }}</code></td>
+                                </tr>
+                                <tr>
+                                    <td><i class="bi bi-ethernet me-2"></i>Port</td>
+                                    <td><code>{{ port }}</code></td>
+                                </tr>
+                                <tr>
+                                    <td><i class="bi bi-shield-lock me-2"></i>HTTPS</td>
+                                    <td>
+                                        {% if https_enabled %}
+                                        <span class="badge bg-success"><i class="bi bi-lock me-1"></i>Enabled</span>
+                                        {% else %}
+                                        <span class="badge bg-warning text-dark"><i class="bi bi-unlock me-1"></i>Disabled</span>
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td><i class="bi bi-person-lock me-2"></i>Authentication</td>
+                                    <td>
+                                        {% if auth_enabled %}
+                                        <span class="badge bg-success"><i class="bi bi-check me-1"></i>Enabled</span>
+                                        {% else %}
+                                        <span class="badge bg-danger"><i class="bi bi-x me-1"></i>Disabled</span>
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="col-md-6">
+                        <table class="table table-dark table-sm">
+                            <tbody>
+                                <tr>
+                                    <td><i class="bi bi-file-earmark me-2"></i>Max Payload</td>
+                                    <td><code>{{ max_payload_kb }} KB</code></td>
+                                </tr>
+                                <tr>
+                                    <td><i class="bi bi-upload me-2"></i>Max Upload</td>
+                                    <td><code>{{ max_upload_mb }} MB</code></td>
+                                </tr>
+                                <tr>
+                                    <td><i class="bi bi-soundwave me-2"></i>DCT Mode</td>
+                                    <td>
+                                        {% if dct_available %}
+                                        <span class="badge bg-success"><i class="bi bi-check me-1"></i>Available</span>
+                                        {% else %}
+                                        <span class="badge bg-secondary">Not Available</span>
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td><i class="bi bi-qr-code me-2"></i>QR Support</td>
+                                    <td>
+                                        {% if qr_available %}
+                                        <span class="badge bg-success"><i class="bi bi-check me-1"></i>Available</span>
+                                        {% else %}
+                                        <span class="badge bg-secondary">Not Available</span>
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div class="alert alert-secondary small mt-3 mb-0">
+                    <i class="bi bi-info-circle me-2"></i>
+                    To change server settings, edit environment variables or config file and restart the service.
+                    <br>See <code>STEGASOO_HTTPS_ENABLED</code>, <code>STEGASOO_PORT</code>, <code>STEGASOO_CHANNEL_KEY</code>
+                </div>
+            </div>
+        </div>
+
+        <!-- Environment Info -->
+        <div class="card mb-4">
+            <div class="card-header">
+                <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Environment</h5>
+            </div>
+            <div class="card-body">
+                <div class="row text-center">
+                    <div class="col-6 col-md-3 mb-3">
+                        <div class="p-3 bg-dark rounded h-100">
+                            <i class="bi bi-box text-primary fs-3 d-block mb-2"></i>
+                            <div class="small text-muted">Version</div>
+                            <strong>{{ version }}</strong>
+                        </div>
+                    </div>
+                    <div class="col-6 col-md-3 mb-3">
+                        <div class="p-3 bg-dark rounded h-100">
+                            <i class="bi bi-terminal text-info fs-3 d-block mb-2"></i>
+                            <div class="small text-muted">Python</div>
+                            <strong>{{ python_version }}</strong>
+                        </div>
+                    </div>
+                    <div class="col-6 col-md-3 mb-3">
+                        <div class="p-3 bg-dark rounded h-100">
+                            <i class="bi bi-cpu text-warning fs-3 d-block mb-2"></i>
+                            <div class="small text-muted">Platform</div>
+                            <strong>{{ platform }}</strong>
+                        </div>
+                    </div>
+                    <div class="col-6 col-md-3 mb-3">
+                        <div class="p-3 bg-dark rounded h-100">
+                            <i class="bi bi-shield-check text-success fs-3 d-block mb-2"></i>
+                            <div class="small text-muted">KDF</div>
+                            <strong>{{ kdf_type }}</strong>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Password Verification Modal -->
+<div class="modal fade" id="passwordModal" tabindex="-1">
+    <div class="modal-dialog modal-sm modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h6 class="modal-title"><i class="bi bi-shield-lock me-2"></i>Verify Password</h6>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p class="small text-muted mb-3">Re-enter your password to access sensitive data.</p>
+                <div class="mb-3">
+                    <label class="form-label small">Password</label>
+                    <input type="password" class="form-control" id="verifyPassword" autocomplete="current-password">
+                    <div class="invalid-feedback" id="passwordError">Incorrect password</div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-warning btn-sm" id="verifyPasswordBtn">
+                    <i class="bi bi-unlock me-1"></i>Unlock
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- QR Code Modal -->
+<div class="modal fade" id="channelKeyQrModal" tabindex="-1">
+    <div class="modal-dialog modal-sm modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h6 class="modal-title"><i class="bi bi-qr-code me-2"></i>Channel Key</h6>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body text-center">
+                <canvas id="channelKeyQrCanvas" class="bg-white p-2 rounded"></canvas>
+                <div class="mt-2">
+                    <code class="small" id="channelKeyQrDisplay"></code>
+                </div>
+            </div>
+            <div class="modal-footer justify-content-center">
+                <button type="button" class="btn btn-sm btn-outline-secondary" id="channelKeyQrDownload">
+                    <i class="bi bi-download me-1"></i>Download
+                </button>
+                <button type="button" class="btn btn-sm btn-outline-secondary" id="channelKeyQrPrint">
+                    <i class="bi bi-printer me-1"></i>Print Sheet
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/qrcode.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/stegasoo.js') }}"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const input = document.getElementById('channelKeyQrInput');
+    const generateBtn = document.getElementById('channelKeyQrGenerate');
+    const showBtn = document.getElementById('channelKeyQrShow');
+    const canvas = document.getElementById('channelKeyQrCanvas');
+    const displayEl = document.getElementById('channelKeyQrDisplay');
+    const downloadBtn = document.getElementById('channelKeyQrDownload');
+    const modalEl = document.getElementById('channelKeyQrModal');
+    const modal = modalEl ? new bootstrap.Modal(modalEl) : null;
+
+    // Password verification elements
+    const lockedDiv = document.getElementById('channelKeyLocked');
+    const unlockedDiv = document.getElementById('channelKeyUnlocked');
+    const unlockBtn = document.getElementById('channelKeyUnlock');
+    const passwordModalEl = document.getElementById('passwordModal');
+    const passwordModal = passwordModalEl ? new bootstrap.Modal(passwordModalEl) : null;
+    const verifyPasswordInput = document.getElementById('verifyPassword');
+    const verifyPasswordBtn = document.getElementById('verifyPasswordBtn');
+    const passwordError = document.getElementById('passwordError');
+
+    // Unlock button shows password modal
+    unlockBtn?.addEventListener('click', function() {
+        verifyPasswordInput.value = '';
+        verifyPasswordInput.classList.remove('is-invalid');
+        passwordModal?.show();
+        setTimeout(() => verifyPasswordInput.focus(), 300);
+    });
+
+    // Handle Enter key in password field
+    verifyPasswordInput?.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            verifyPasswordBtn?.click();
+        }
+    });
+
+    // Verify password and unlock
+    verifyPasswordBtn?.addEventListener('click', async function() {
+        const password = verifyPasswordInput.value;
+        if (!password) {
+            verifyPasswordInput.classList.add('is-invalid');
+            return;
+        }
+
+        verifyPasswordBtn.disabled = true;
+        verifyPasswordBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Verifying...';
+
+        try {
+            const response = await fetch('/admin/settings/unlock', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                body: JSON.stringify({ password })
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                // Unlock successful
+                passwordModal?.hide();
+                lockedDiv.style.display = 'none';
+                unlockedDiv.style.display = 'block';
+                if (data.channel_key && input) {
+                    input.value = data.channel_key;
+                }
+            } else {
+                // Password incorrect
+                verifyPasswordInput.classList.add('is-invalid');
+                passwordError.textContent = data.error || 'Incorrect password';
+            }
+        } catch (error) {
+            verifyPasswordInput.classList.add('is-invalid');
+            passwordError.textContent = 'Verification failed';
+        } finally {
+            verifyPasswordBtn.disabled = false;
+            verifyPasswordBtn.innerHTML = '<i class="bi bi-unlock me-1"></i>Unlock';
+        }
+    });
+
+    // Generate random key
+    generateBtn?.addEventListener('click', function() {
+        if (!input) return;
+        if (typeof Stegasoo !== 'undefined' && Stegasoo.generateChannelKey) {
+            input.value = Stegasoo.generateChannelKey();
+        } else {
+            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+            let key = '';
+            for (let i = 0; i < 8; i++) {
+                if (i > 0) key += '-';
+                for (let j = 0; j < 4; j++) {
+                    key += chars.charAt(Math.floor(Math.random() * chars.length));
+                }
+            }
+            input.value = key;
+        }
+    });
+
+    // Show QR code in modal
+    showBtn?.addEventListener('click', function() {
+        const key = input?.value?.trim().replace(/-/g, '');
+        if (!key || key.length !== 32) {
+            alert('Please enter a valid 32-character channel key');
+            return;
+        }
+
+        const formatted = key.match(/.{4}/g)?.join('-') || key;
+
+        if (typeof QRious === 'undefined') {
+            alert('QR Code library failed to load.');
+            return;
+        }
+
+        try {
+            new QRious({
+                element: canvas,
+                value: formatted,
+                size: 200,
+                level: 'M'
+            });
+            if (displayEl) displayEl.textContent = formatted;
+            modal?.show();
+        } catch (error) {
+            alert('Failed to generate QR code: ' + error.message);
+        }
+    });
+
+    // Download QR as PNG
+    downloadBtn?.addEventListener('click', function() {
+        if (canvas) {
+            const link = document.createElement('a');
+            link.download = 'stegasoo-channel-key.png';
+            link.href = canvas.toDataURL('image/png');
+            link.click();
+        }
+    });
+
+    // Print tiled QR sheet (US Letter)
+    document.getElementById('channelKeyQrPrint')?.addEventListener('click', function() {
+        if (canvas && displayEl) {
+            printQrSheet(canvas, displayEl.textContent, 'Channel Key');
+        }
+    });
+});
+
+// Print QR codes tiled on US Letter paper (8.5" x 11")
+function printQrSheet(canvas, keyText, title) {
+    const qrDataUrl = canvas.toDataURL('image/png');
+    const printWindow = window.open('', '_blank');
+    if (!printWindow) {
+        alert('Please allow popups to print');
+        return;
+    }
+
+    // US Letter: 8.5" x 11" - create 4x5 grid of QR codes
+    const cols = 4;
+    const rows = 5;
+
+    // Split key into two lines (4 groups each)
+    const keyParts = keyText.split('-');
+    const keyLine1 = keyParts.slice(0, 4).join('-');
+    const keyLine2 = keyParts.slice(4).join('-');
+
+    let qrGrid = '';
+    for (let i = 0; i < rows * cols; i++) {
+        qrGrid += `
+            <div class="qr-tile">
+                <div class="key-text">${keyLine1}</div>
+                <img src="${qrDataUrl}" alt="QR">
+                <div class="key-text">${keyLine2}</div>
+            </div>
+        `;
+    }
+
+    printWindow.document.write(`
+        <!DOCTYPE html>
+        <html>
+        <head>
+            <title></title>
+            <style>
+                @page {
+                    size: letter;
+                    margin: 0.2in;
+                    margin-top: 0.1in;
+                    margin-bottom: 0.1in;
+                }
+                @media print {
+                    @page { margin: 0.15in; }
+                    html, body { margin: 0; padding: 0; }
+                }
+                * { margin: 0; padding: 0; box-sizing: border-box; }
+                body {
+                    font-family: 'Courier New', monospace;
+                    background: white;
+                }
+                .grid {
+                    display: grid;
+                    grid-template-columns: repeat(${cols}, 1fr);
+                    gap: 0;
+                    margin-top: 0.09in;
+                }
+                .qr-tile {
+                    border: 1px dashed #ccc;
+                    padding: 0.04in;
+                    text-align: center;
+                    page-break-inside: avoid;
+                }
+                .qr-tile img {
+                    width: 1.6in;
+                    height: 1.6in;
+                }
+                .key-text {
+                    font-size: 10pt;
+                    font-weight: bold;
+                    color: #333;
+                    line-height: 1.2;
+                }
+                .footer {
+                    display: none;
+                }
+            </style>
+        </head>
+        <body>
+            <div class="grid">${qrGrid}</div>
+            <div class="footer">Cut along dashed lines</div>
+            <script>
+                window.onload = function() { window.print(); };
+            <\/script>
+        </body>
+        </html>
+    `);
+    printWindow.document.close();
+}
+</script>
+{% endblock %}
--- a/frontends/web/templates/base.html
+++ b/frontends/web/templates/base.html
@@ -5,8 +5,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Stegasoo{% endblock %}</title>
    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
+    <link href="{{ url_for('static', filename='vendor/css/bootstrap.min.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='vendor/css/bootstrap-icons.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
 </head>
 <body>
@@ -23,26 +23,23 @@
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav ms-auto">
+                <ul class="navbar-nav ms-auto nav-icons">
                    <li class="nav-item">
-                        <a class="nav-link" href="/"><i class="bi bi-house me-1"></i> Home</a>
+                        <a class="nav-link nav-expand" href="/"><i class="bi bi-house"></i><span>Home</span></a>
                    </li>
                    {% if not auth_enabled or is_authenticated %}
                    <li class="nav-item">
-                        <a class="nav-link" href="/encode"><i class="bi bi-lock me-1"></i> Encode</a>
+                        <a class="nav-link nav-expand" href="/encode"><i class="bi bi-lock"></i><span>Encode</span></a>
                    </li>
                    <li class="nav-item">
-                        <a class="nav-link" href="/decode"><i class="bi bi-unlock me-1"></i> Decode</a>
+                        <a class="nav-link nav-expand" href="/decode"><i class="bi bi-unlock"></i><span>Decode</span></a>
                    </li>
                    <li class="nav-item">
-                        <a class="nav-link" href="/generate"><i class="bi bi-key me-1"></i> Generate</a>
+                        <a class="nav-link nav-expand" href="/generate"><i class="bi bi-key"></i><span>Generate</span></a>
                    </li>
                    {% endif %}
                    <li class="nav-item">
-                        <a class="nav-link" href="/about"><i class="bi bi-info-circle me-1"></i> About</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="/tools"><i class="bi bi-tools me-1"></i> Tools</a>
+                        <a class="nav-link nav-expand" href="/tools"><i class="bi bi-tools"></i><span>Tools</span></a>
                    </li>
                    {% if auth_enabled %}
                        {% if is_authenticated %}
@@ -54,6 +51,7 @@
                                <li><a class="dropdown-item" href="/account"><i class="bi bi-gear me-2"></i>Account</a></li>
                                {% if is_admin %}
                                <li><a class="dropdown-item" href="/admin/users"><i class="bi bi-people me-2"></i>Users</a></li>
+                                <li><a class="dropdown-item" href="/admin/settings"><i class="bi bi-sliders me-2"></i>System Settings</a></li>
                                {% endif %}
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="/logout"><i class="bi bi-box-arrow-left me-2"></i>Logout</a></li>
@@ -96,13 +94,15 @@
            <small>
                <img src="{{ url_for('static', filename='favicon.svg') }}" alt="" height="16" class="me-1" style="vertical-align: text-bottom;">
                Stegasoo v{{ version }} — Steganography with Reference Photo + Passphrase + PIN/Key
+                <span class="mx-2">|</span>
+                <a href="/about" class="text-muted text-decoration-none"><i class="bi bi-info-circle me-1"></i>About</a>
            </small>
        </div>
    </footer>

-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-    <!-- QR Code scanning library (v4.1.5) -->
-    <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
+    <script src="{{ url_for('static', filename='vendor/js/bootstrap.bundle.min.js') }}"></script>
+    <!-- QR Code scanning library (local) -->
+    <script src="{{ url_for('static', filename='vendor/js/html5-qrcode.min.js') }}"></script>
    <script>
    // Initialize toasts (auto-hide after delay)
    document.querySelectorAll('.toast').forEach(el => new bootstrap.Toast(el));
--- a/frontends/web/templates/decode.html
+++ b/frontends/web/templates/decode.html
@@ -273,27 +273,23 @@
                                        </div>
                                    </div>

-                                    <!-- Extraction Mode -->
-                                    <label class="form-label"><i class="bi bi-cpu me-1"></i> Extraction Mode</label>
-                                    <div class="d-flex gap-2 mb-2">
-                                        <label class="mode-btn flex-fill active" id="autoModeCard" for="modeAuto">
+                                    <!-- Extraction Mode (compact inline) -->
+                                    <div class="d-flex gap-2 align-items-center flex-wrap mb-2">
+                                        <label class="mode-btn mode-btn-sm active" id="autoModeCard" for="modeAuto">
                                            <input class="form-check-input" type="radio" name="embed_mode" id="modeAuto" value="auto" checked>
-                                            <i class="bi bi-magic text-success ms-2"></i>
-                                            <span class="ms-2"><strong>Auto</strong> <span class="text-muted d-none d-sm-inline">· Try both</span></span>
+                                            <i class="bi bi-magic text-success"></i> Auto
                                        </label>
-                                        <label class="mode-btn flex-fill" id="lsbModeCard" for="modeLsb">
+                                        <label class="mode-btn mode-btn-sm" id="lsbModeCard" for="modeLsb">
                                            <input class="form-check-input" type="radio" name="embed_mode" id="modeLsb" value="lsb">
-                                            <i class="bi bi-grid-3x3-gap text-primary ms-2"></i>
-                                            <span class="ms-2"><strong>LSB</strong> <span class="text-muted d-none d-sm-inline">· Email</span></span>
+                                            <i class="bi bi-grid-3x3-gap text-primary"></i> LSB
                                        </label>
-                                        <label class="mode-btn flex-fill {% if not has_dct %}opacity-50{% endif %}" id="dctModeCard" for="modeDct">
+                                        <label class="mode-btn mode-btn-sm {% if not has_dct %}opacity-50{% endif %}" id="dctModeCard" for="modeDct">
                                            <input class="form-check-input" type="radio" name="embed_mode" id="modeDct" value="dct" {% if not has_dct %}disabled{% endif %}>
-                                            <i class="bi bi-soundwave text-warning ms-2"></i>
-                                            <span class="ms-2"><strong>DCT</strong> <span class="text-muted d-none d-sm-inline">· Social</span></span>
+                                            <i class="bi bi-soundwave text-warning"></i> DCT
                                        </label>
                                    </div>
-                                    <div class="form-text">
-                                        <i class="bi bi-lightbulb me-1"></i><strong>Auto</strong> tries LSB first, then DCT.
+                                    <div class="form-text" id="modeHint">
+                                        <i class="bi bi-lightning me-1"></i>Tries LSB first, then DCT
                                    </div>

                                </div>
@@ -461,6 +457,25 @@
 {% block scripts %}
 <script src="{{ url_for('static', filename='js/stegasoo.js') }}"></script>
 <script>
+// ============================================================================
+// MODE HINT - Dynamic text based on selected extraction mode
+// ============================================================================
+const modeHints = {
+    auto: { icon: 'lightning', text: 'Tries LSB first, then DCT' },
+    lsb: { icon: 'hdd', text: 'For email and direct transfers' },
+    dct: { icon: 'phone', text: 'For social media images' }
+};
+
+document.querySelectorAll('input[name="embed_mode"]').forEach(radio => {
+    radio.addEventListener('change', function() {
+        const hint = document.getElementById('modeHint');
+        const data = modeHints[this.value];
+        if (hint && data) {
+            hint.innerHTML = `<i class="bi bi-${data.icon} me-1"></i>${data.text}`;
+        }
+    });
+});
+
 // ============================================================================
 // ACCORDION SUMMARY UPDATES
 // ============================================================================
--- a/frontends/web/templates/encode.html
+++ b/frontends/web/templates/encode.html
@@ -238,37 +238,35 @@
                                        </div>
                                    </div>

-                                    <!-- Embedding Mode -->
-                                    <label class="form-label"><i class="bi bi-cpu me-1"></i> Embedding Mode</label>
-                                    <div class="d-flex gap-2 mb-2">
-                                        <label class="mode-btn flex-fill {% if not has_dct %}opacity-50{% endif %} {% if has_dct %}active{% endif %}" id="dctModeCard" for="modeDct">
+                                    <!-- Embedding Mode (compact inline) -->
+                                    <div class="d-flex gap-2 align-items-center flex-wrap mb-2">
+                                        <label class="mode-btn mode-btn-sm {% if not has_dct %}opacity-50{% endif %} {% if has_dct %}active{% endif %}" id="dctModeCard" for="modeDct">
                                            <input class="form-check-input" type="radio" name="embed_mode" id="modeDct" value="dct" {% if has_dct %}checked{% endif %} {% if not has_dct %}disabled{% endif %}>
-                                            <i class="bi bi-soundwave text-warning ms-2"></i>
-                                            <span class="ms-2"><strong>DCT</strong> <span class="text-muted d-none d-sm-inline">· Social</span></span>
+                                            <i class="bi bi-soundwave text-warning"></i> DCT
                                        </label>
-                                        <label class="mode-btn flex-fill {% if not has_dct %}active{% endif %}" id="lsbModeCard" for="modeLsb">
+                                        <label class="mode-btn mode-btn-sm {% if not has_dct %}active{% endif %}" id="lsbModeCard" for="modeLsb">
                                            <input class="form-check-input" type="radio" name="embed_mode" id="modeLsb" value="lsb" {% if not has_dct %}checked{% endif %}>
-                                            <i class="bi bi-grid-3x3-gap text-primary ms-2"></i>
-                                            <span class="ms-2"><strong>LSB</strong> <span class="text-muted d-none d-sm-inline">· Email</span></span>
+                                            <i class="bi bi-grid-3x3-gap text-primary"></i> LSB
                                        </label>
+                                        <span class="d-flex gap-2 align-items-center" id="outputOptions">
+                                            <span class="text-muted">|</span>
+                                            <div class="btn-group btn-group-sm" role="group">
+                                                <input type="radio" class="btn-check" name="dct_color_mode" id="colorMode" value="color" checked>
+                                                <label class="btn btn-outline-secondary btn-sm" for="colorMode">Color</label>
+                                                <input type="radio" class="btn-check" name="dct_color_mode" id="grayMode" value="grayscale">
+                                                <label class="btn btn-outline-secondary btn-sm" for="grayMode" id="grayModeLabel">Gray</label>
                                            </div>
-
-                                    <!-- DCT Options (inline, compact) -->
-                                    <div class="{% if not has_dct %}d-none{% endif %}" id="dctOptionsInline">
-                                        <div class="row g-2 mt-2" id="dctOptionsRow">
-                                            <div class="col-6">
-                                                <select class="form-select form-select-sm" name="dct_color_mode" id="dctColorSelect">
-                                                    <option value="color" selected>Color</option>
-                                                    <option value="grayscale">Grayscale</option>
-                                                </select>
-                                            </div>
-                                            <div class="col-6">
-                                                <select class="form-select form-select-sm" name="dct_output_format" id="dctFormatSelect">
-                                                    <option value="jpeg" selected>JPEG</option>
-                                                    <option value="png">PNG</option>
-                                                </select>
+                                            <span class="text-muted">|</span>
+                                            <div class="btn-group btn-group-sm" role="group">
+                                                <input type="radio" class="btn-check" name="dct_output_format" id="jpegFormat" value="jpeg" checked>
+                                                <label class="btn btn-outline-secondary btn-sm" for="jpegFormat" id="jpegFormatLabel">JPEG</label>
+                                                <input type="radio" class="btn-check" name="dct_output_format" id="pngFormat" value="png">
+                                                <label class="btn btn-outline-secondary btn-sm" for="pngFormat">PNG</label>
                                            </div>
+                                        </span>
                                    </div>
+                                    <div class="form-text" id="modeHint">
+                                        <i class="bi bi-{% if has_dct %}phone{% else %}hdd{% endif %} me-1"></i>{% if has_dct %}Survives social media compression{% else %}Higher capacity for direct transfers{% endif %}
                                    </div>

                                </div>
@@ -483,6 +481,24 @@
 {% block scripts %}
 <script src="{{ url_for('static', filename='js/stegasoo.js') }}"></script>
 <script>
+// ============================================================================
+// MODE HINT - Dynamic text based on selected embedding mode
+// ============================================================================
+const modeHints = {
+    dct: { icon: 'phone', text: 'Survives social media compression' },
+    lsb: { icon: 'hdd', text: 'Higher capacity, outputs Color PNG' }
+};
+
+document.querySelectorAll('input[name="embed_mode"]').forEach(radio => {
+    radio.addEventListener('change', function() {
+        const hint = document.getElementById('modeHint');
+        const data = modeHints[this.value];
+        if (hint && data) {
+            hint.innerHTML = `<i class="bi bi-${data.icon} me-1"></i>${data.text}`;
+        }
+    });
+});
+
 // ============================================================================
 // ACCORDION SUMMARY UPDATES
 // ============================================================================
@@ -666,20 +682,45 @@ carrierInput?.addEventListener('change', function() {

 const modeRadios = document.querySelectorAll('input[name="embed_mode"]');
 const modeBtns = { 'dct': document.getElementById('dctModeCard'), 'lsb': document.getElementById('lsbModeCard') };
-const dctOptionsRow = document.getElementById('dctOptionsRow');
+const grayModeInput = document.getElementById('grayMode');
+const grayModeLabel = document.getElementById('grayModeLabel');
+const jpegFormatInput = document.getElementById('jpegFormat');
+const jpegFormatLabel = document.getElementById('jpegFormatLabel');
+const colorModeInput = document.getElementById('colorMode');
+const pngFormatInput = document.getElementById('pngFormat');
+
+function updateOutputOptions(mode) {
+    const isLsb = mode === 'lsb';
+    if (isLsb) {
+        // LSB only supports Color + PNG
+        colorModeInput.checked = true;
+        pngFormatInput.checked = true;
+        grayModeInput.disabled = true;
+        jpegFormatInput.disabled = true;
+        grayModeLabel?.classList.add('disabled', 'text-muted');
+        jpegFormatLabel?.classList.add('disabled', 'text-muted');
+    } else {
+        // DCT: reset to defaults (Color + JPEG) and enable all
+        colorModeInput.checked = true;
+        jpegFormatInput.checked = true;
+        grayModeInput.disabled = false;
+        jpegFormatInput.disabled = false;
+        grayModeLabel?.classList.remove('disabled', 'text-muted');
+        jpegFormatLabel?.classList.remove('disabled', 'text-muted');
+    }
+}

 modeRadios.forEach(radio => {
    radio.addEventListener('change', () => {
        Object.values(modeBtns).forEach(btn => btn?.classList.remove('active'));
        modeBtns[radio.value]?.classList.add('active');
-        dctOptionsRow?.classList.toggle('d-none', radio.value !== 'dct');
+        updateOutputOptions(radio.value);
    });
 });

-// Show DCT options if DCT selected initially
-if (document.getElementById('modeDct')?.checked) {
-    dctOptionsRow?.classList.remove('d-none');
-}
+// Initialize output options based on initial mode
+const initialMode = document.querySelector('input[name="embed_mode"]:checked')?.value || 'lsb';
+updateOutputOptions(initialMode);

 // ============================================================================
 // DUPLICATE FILE CHECK
--- a/frontends/web/templates/tools.html
+++ b/frontends/web/templates/tools.html
--- a/tests/test_stegasoo.py
+++ b/tests/test_stegasoo.py
@@ -5,27 +5,24 @@ Tests core functionality: encode/decode, LSB/DCT modes, channel keys, validation
 """

 import io
-import pytest
 from pathlib import Path
+
+import pytest
 from PIL import Image

 import stegasoo
 from stegasoo import (
-    encode,
    decode,
    decode_text,
+    encode,
+    generate_channel_key,
    generate_passphrase,
    generate_pin,
-    generate_channel_key,
-    validate_passphrase,
-    validate_pin,
+    has_dct_support,
    validate_image,
    validate_message,
-    has_dct_support,
-    EncodeResult,
-    DecodeResult,
-    ValidationError,
-    CapacityError,
+    validate_passphrase,
+    validate_pin,
 )

 # Test data paths
Author	SHA1	Message	Date
Aaron D. Lee	9c88f53cd0	Reset DCT options to Color+JPEG when switching from LSB Some checks failed Release / test (push) Failing after 34s Details Release / publish (push) Has been skipped Details Release / github-release (push) Has been skipped Details	2026-01-07 19:29:29 -05:00
Aaron D. Lee	3f8c2a6957	Compact mode UI with smart output options Encode page: - Inline mode buttons: DCT \| LSB \| Color \| Gray \| JPEG \| PNG - LSB mode auto-selects Color+PNG and disables Gray/JPEG - Dynamic hint text with icons below mode buttons Decode page: - Compact inline mode buttons: Auto \| LSB \| DCT - Dynamic hints that change per mode selection CSS: - Disabled btn-check styling for dimmed unavailable options 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-01-07 19:28:38 -05:00
Aaron D. Lee	22cf27d7f6	Security: Password-protect channel key export, add audit plan Channel Key Protection: - Hide channel key by default in admin settings - Require password re-authentication to view/export key - Add /admin/settings/unlock API endpoint for verification - Key re-locks on page navigation (per-page-load only) QR Print Sheet Refinements: - Key split above/below QR image - 10pt bold font, 1.6in QR size - Zero gap between tiles, minimal margins - No page header/footer for clean printing Security Audit Plan: - Comprehensive checklist covering auth, crypto, input validation - Steganography-specific security considerations - Air-gap deployment focus with known limitations documented - Penetration testing checklist and automated tool recommendations 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-01-07 19:16:24 -05:00
Aaron D. Lee	4d8575ce33	Web UI v4.1.6: Admin settings, nav icons, air-gap ready Admin System Settings page: - New /admin/settings route with channel key config - QR code export with tiled print sheet (4x5 on US Letter) - Server config display (HTTPS, port, auth, DCT/QR status) - Environment info (version, Python, platform, KDF) Navigation improvements: - Icon-only nav with floating labels on hover - Gold labels slide down below icons - Gradient pill background on hover Air-gap ready: - All vendor libs now local (Bootstrap CSS/JS, Icons, html5-qrcode) - QRious library for QR generation - No external CDN dependencies Other changes: - Moved About link from nav to footer - Channel QR export moved from about.html to admin/settings.html - Print sheet button for QR codes (tiled US Letter output) - Dev runner script (dev_run.sh) with r/q hotkeys - Fixed navbar dropdown z-index 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-01-07 18:36:33 -05:00