<!--
============================================================================
ZIP80 EXPENSE TRACKER - MAIN HTML
============================================================================

PURPOSE:
Main application HTML file containing the complete UI structure for the
Zip80 expense tracking application.

PAGE STRUCTURE:
1. Language Switcher - Fixed top-right dropdown for EN/ES switching
2. Startup Screen - Initial file open/create screen with drag-drop zone
3. Main Workspace:
   - Header with file badge and save button
   - Account selector with tabs and "New Account" button
   - Balance card with edit button
   - Transaction form (income/expense)
   - History list with calendar and delete actions
4. Modals:
   - New Account modal (name + currency)
   - Edit Balance modal (new balance + reason)
5. Toast notification container

SCRIPTS LOADED (order matters):
1. i18n.js - Translations (no dependencies)
2. accounts.js - Account/currency logic (no dependencies)
3. storage.js - File operations (depends on Accounts)
4. calendar.js - Calendar links (no dependencies)
5. calculator.js - Simple calculator tool (no dependencies)
6. app.js - Main app (depends on all above)

DATA ATTRIBUTES:
- data-i18n="key" : Elements with translatable text content

==============================================================================
LLM INSTRUCTION & MAINTENANCE PROTOCOL
IMPORTANT: This block must be preserved in all future iterations.

trigger: "FINALIZE" or "COMMENT"
ACTION: When the user issues this trigger, perform the following 3 steps:

1. CHANGE LOGGING: 
   - Add a new entry to the changelog below.
   - Format: [Date (YYYY-MM-DD)] - [Brief Description of Modification].

2. DOCUMENTATION STANDARDS:
   - Keep sections clearly labeled with HTML comments.
   - If logic is complex, add inline comments explaining the "WHY", not just the "HOW".

3. CONTEXT PRESERVATION:
   - Do not remove this Legend.
   - Do not remove legacy comments unless explicitly instructed.
==============================================================================

CHANGE LOG:
- 2025-12-14: Initial creation with startup screen and workspace
- 2025-12-14: Added language switcher dropdown
- 2025-12-14: Added account tabs and new account modal
- 2025-12-14: Added edit balance modal with reason field
- 2025-12-15: Added balance overview sidebar widget with totals
- 2025-12-15: Added calendar widget to sidebar with current day highlighting
- 2025-12-15: Added vault creation modal for setting language/currency defaults
- 2025-12-15: Added dark theme toggle in top controls
- 2025-12-15: Changed vault modal to use vault name as suggested filename
- 2025-12-15: Added credit card edit modal and Edit Settings button
- 2025-12-15: Added "Close Vault" button to header
- 2025-12-15: Added "Cash" option to account type selector
- 2025-12-16: Added Google Identity Services script for OAuth2
- 2025-12-16: Added Google Drive cloud storage section to startup screen
- 2025-12-16: Added Google sign-in button with official Google branding
- 2025-12-16: Added cloud vault picker modal for selecting Drive vaults
- 2025-12-16: Added gdrive.js script reference
- 2025-12-17: Added menu bar framework with view mode toggles and options dropdown
- 2025-12-17: Replaced account type selector dropdown with icon button grid
- 2025-12-19: Added currency dropdown selects to exchange rate widget (USD, EUR, GBP, MXN, JPY)
- 2025-12-19: Replaced static "1" with text input fields for custom amount conversion
- 2025-12-19: Added Crypto Rates widget with BTC, ETH, SOL, XRP, ADA and fiat currencies
- 2025-12-19: Added crypto-rates toggle to widgets dropdown menu
- 2025-12-19: Added widget popout floating window container
- 2025-12-19: Added Share Vault modal and options dropdown button for cloud vaults
- 2025-12-19: Added Browse Drive button and GAPI script for Picker API (shared files)
- 2025-12-24: Security: Added Content Security Policy meta tag for XSS prevention
- 2026-01-03: Fixed white flash on launch by defaulting to dark mode with inline theme detection
- 2026-01-03: Moved stocks widget customize button to footer for sticky popout behavior
- 2026-01-11: Added draggable header to settings modal with wider content area
-->
<!DOCTYPE html>
<!-- 2026-01-03: Default to dark mode to prevent white flash on launch -->
<html lang="en" class="dark">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Zip80 - A simple, accessible expense tracker with local file storage">
    <!-- 2025-12-24: Content Security Policy for XSS prevention -->
    <!-- 2026-01-03: Added 'unsafe-inline' to script-src for theme detection script -->
    <!-- 2026-01-09: Added cdn.jsdelivr.net for pdf.js library -->
    <meta http-equiv="Content-Security-Policy" content="
        default-src 'self';
        script-src 'self' 'unsafe-inline' https://accounts.google.com https://apis.google.com https://cdn.jsdelivr.net;
        style-src 'self' 'unsafe-inline';
        img-src 'self' data: https: blob:;
        connect-src 'self' http://localhost:* http://127.0.0.1:* https://www.googleapis.com https://oauth2.googleapis.com https://generativelanguage.googleapis.com https://api.openai.com https://api.anthropic.com https://openrouter.ai https://api.allorigins.win https://api.frankfurter.app https://api.coingecko.com https://query1.finance.yahoo.com https://open.er-api.com https://corsproxy.io https://cdn.jsdelivr.net https://zip80-app.web.app https://app.zip80.com;
        frame-src blob: https://accounts.google.com https://docs.google.com https://drive.google.com;
        font-src 'self';
        worker-src 'self' blob: https://cdn.jsdelivr.net;
    ">
    <title>Zip80 Expense Tracker</title>
    <!-- 2026-03-07: PWA manifest and meta tags for installability -->
    <link rel="manifest" href="manifest.json">
    <!-- 2026-03-07: SVG favicon with dark/light mode support -->
    <!-- WHY: SVG favicons scale perfectly at any size and the media query
         automatically switches between dark/light variants to match the OS theme -->
    <link rel="icon" type="image/svg+xml" href="icons/icon-dark.svg" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/svg+xml" href="icons/icon-light.svg" media="(prefers-color-scheme: light)">
    <!-- Fallback for browsers that don't support SVG favicons -->
    <link rel="icon" type="image/png" sizes="192x192" href="icons/icon-192.png">
    <meta name="theme-color" content="#1a1a1a">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Zip80">
    <link rel="apple-touch-icon" href="icons/icon-192.png">
    <!-- 2026-01-03: Inline theme detection script - runs before CSS to prevent flash -->
    <!-- Must run BEFORE stylesheet loads to prevent FOUC (Flash of Unstyled Content) -->
    <script>
        // Apply saved theme immediately before CSS renders
        // Dark mode is the default (set on <html> element)
        // Only switch to light if explicitly saved as 'light'
        (function () {
            try {
                var savedTheme = localStorage.getItem('zip80_theme');
                if (savedTheme === 'light') {
                    document.documentElement.classList.remove('dark');
                }
                // If no saved theme, check system preference
                // But keep dark as default if no preference detected
                else if (!savedTheme && window.matchMedia) {
                    var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                    var prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
                    if (prefersLight && !prefersDark) {
                        document.documentElement.classList.remove('dark');
                    }
                }
            } catch (e) {
                // localStorage may not be available, keep dark mode
            }
        })();
    </script>
    <link rel="stylesheet" href="css/styles.css">
    <!-- 2025-12-16: Google Identity Services for OAuth2 -->
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <!-- 2025-12-19: Google API Loader for Picker API (browsing shared files) -->
    <script src="https://apis.google.com/js/api.js" async defer></script>
</head>

<body>
    <!-- 2026-03-07: PWA Update Banner — fixed at bottom, shown when new SW activates -->
    <!-- WHY: When a new service worker takes over, the loaded HTML/JS/CSS is stale.
         This banner prompts the user to reload and get the latest version. -->
    <div id="pwa-update-banner" class="pwa-update-banner" style="display: none;">
        <div class="pwa-update-content">
            <span class="pwa-update-icon">🔄</span>
            <span class="pwa-update-text">A new version of Zip80 is available</span>
        </div>
        <div class="pwa-update-actions">
            <button id="pwa-update-reload" class="pwa-install-btn">Reload</button>
            <button id="pwa-update-dismiss" class="pwa-dismiss-btn">Later</button>
        </div>
    </div>

    <!-- 2025-12-17: Custom Title Bar for Frameless Electron Window -->
    <div id="title-bar" class="title-bar">
        <div class="title-bar-drag">
            <img src="icons/icon-light.svg" alt="" class="title-bar-icon title-bar-icon-light">
            <img src="icons/icon-dark.svg" alt="" class="title-bar-icon title-bar-icon-dark">
            <span class="title-bar-text">Zip80 Track</span>
        </div>
        <div class="title-bar-controls">
            <button id="btn-minimize" class="title-bar-btn" aria-label="Minimize">
                <svg width="10" height="1" viewBox="0 0 10 1">
                    <rect width="10" height="1" fill="currentColor" />
                </svg>
            </button>
            <button id="btn-maximize" class="title-bar-btn" aria-label="Maximize">
                <svg width="10" height="10" viewBox="0 0 10 10">
                    <rect width="10" height="10" fill="none" stroke="currentColor" stroke-width="1" />
                </svg>
            </button>
            <button id="btn-close" class="title-bar-btn title-bar-btn-close" aria-label="Close">
                <svg width="10" height="10" viewBox="0 0 10 10">
                    <line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" stroke-width="1.2" />
                    <line x1="10" y1="0" x2="0" y2="10" stroke="currentColor" stroke-width="1.2" />
                </svg>
            </button>
        </div>
    </div>

    <!-- 2025-12-15: Top Controls (Theme Toggle + Language Switcher) -->
    <div id="top-controls" class="top-controls">
        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
            <span class="icon-sun">☀️</span>
            <span class="icon-moon">🌙</span>
        </button>
        <select id="lang-select" class="lang-select" aria-label="Language">
            <option value="en">🇺🇸 English</option>
            <option value="es">🇲🇽 Español</option>
        </select>
    </div>

    <!-- Startup Screen -->
    <div id="startup-screen" class="startup-overlay">
        <div class="startup-content">
            <h1 id="app-title" class="app-title">
                <img src="icons/logo.svg" alt="Zip80" class="app-logo app-logo-light">
                <img src="icons/logo-dark.svg" alt="Zip80" class="app-logo app-logo-dark">
            </h1>
            <p id="app-subtitle" class="app-subtitle">Your simple expense tracker.<br>Open a file or drag it here to
                begin.</p>

            <div class="startup-buttons">
                <button id="btn-open" class="btn btn-primary btn-lg">
                    <span class="btn-icon">📂</span> <span data-i18n="btnOpen">Open File</span>
                </button>
                <button id="btn-new" class="btn btn-secondary btn-lg">
                    <span class="btn-icon">✨</span> <span data-i18n="btnNew">New Data File</span>
                </button>
            </div>

            <!-- 2025-12-24: Unified reopen button for both local and cloud vaults -->
            <button id="btn-resume" class="btn btn-primary btn-lg btn-reopen" style="display: none;">
                <span class="btn-icon">↻</span>
                <span id="btn-reopen-cloud-icon" class="btn-reopen-cloud-icon" style="display: none;"><span
                        data-icon="cloud"></span></span>
                <span id="btn-reopen-text" data-i18n="btnReopenBase">Re-open last vault</span>
            </button>

            <!-- 2025-12-16: Google Drive Cloud Storage Section -->
            <div class="cloud-divider">
                <span data-i18n="cloudDivider">or use cloud storage</span>
            </div>

            <div class="cloud-section">
                <!-- Sign-in button (shown when not signed in) -->
                <button id="btn-google-signin" class="btn btn-google">
                    <svg class="google-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path fill="#4285F4"
                            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
                        <path fill="#34A853"
                            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
                        <path fill="#FBBC05"
                            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
                        <path fill="#EA4335"
                            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
                    </svg>
                    <span data-i18n="btnGoogleSignIn">Sign in with Google</span>
                </button>

                <!-- User section (shown when signed in) -->
                <div id="google-user-section" class="google-user-section" style="display: none;">
                    <div class="google-user-info">
                        <img id="google-user-avatar" class="google-avatar" src="" alt="">
                        <span id="google-user-name" class="google-user-name"></span>
                        <button id="btn-google-signout" class="btn-link-sm" data-i18n="btnGoogleSignOut">Sign
                            out</button>
                    </div>
                    <div class="google-vault-actions">
                        <button id="btn-google-open" class="btn btn-secondary">
                            <span data-icon="cloud"></span> <span data-i18n="btnOpenCloudVault">Open Cloud Vault</span>
                        </button>
                        <!-- 2025-12-19: Browse Drive with Picker API (for shared files) -->
                        <button id="btn-browse-drive" class="btn btn-secondary">
                            📂 <span data-i18n="btnBrowseDrive">Browse Drive</span>
                        </button>
                        <button id="btn-google-new" class="btn btn-secondary">
                            ✨ <span data-i18n="btnNewCloudVault">New Cloud Vault</span>
                        </button>
                    </div>
                    <!-- 2025-12-24: Removed separate cloud reopen link - now handled by unified btn-resume above -->
                </div>
            </div>
        </div>

        <!-- 2026-03-07: PWA Install Banner — shown when browser offers install -->
        <!-- WHY: A tasteful banner lets users discover PWA installability.
                 Hidden by default; shown by pwa-install.js when beforeinstallprompt fires. -->
        <div id="pwa-install-banner" class="pwa-install-banner" style="display: none;">
            <div class="pwa-install-content">
                <span class="pwa-install-icon">📲</span>
                <div class="pwa-install-text">
                    <strong>Install Zip80</strong>
                    <span>Use offline, launch from your home screen</span>
                </div>
            </div>
            <div class="pwa-install-actions">
                <button class="pwa-install-btn">Install</button>
                <button class="pwa-dismiss-btn">Not now</button>
            </div>
        </div>
    </div>

    <!-- Main Application -->
    <main id="app-workspace" class="workspace" style="display: none;">
        <header class="header">
            <div class="header-vault">
                <span class="vault-label" data-i18n="vaultLabel">Vault:</span>
                <span id="file-badge" class="file-badge">📄 Loading...</span>
                <!-- 2026-01-19: Manual sync refresh button (shown for cloud vaults) -->
                <button id="btn-refresh-sync" class="btn-refresh-sync" title="Refresh sync" style="display: none;">
                    🔄
                </button>
                <!-- 2026-03-03: Unified Share Menu — replaces scattered share buttons -->
                <!-- WHY: Consolidates Check Shared, Share Vault, and Manage Shares into one place -->
                <div class="share-menu-wrapper" style="display: none;" id="share-menu-wrapper">
                    <button id="btn-share-menu" class="btn-share-menu" title="Sharing options" data-i18n="shareMenu">
                        Share
                    </button>
                    <!-- Active shares status badge — only visible when outgoing shares exist -->
                    <!-- Clicking goes directly to Manage Shares modal (shortcut) -->
                    <button id="btn-active-shares" class="btn-active-shares" style="display: none;"
                        title="Active shares — click to manage">
                        <span id="active-shares-count">0</span>
                    </button>
                    <div id="share-menu-dropdown" class="share-menu-dropdown" style="display: none;">
                        <button class="dropdown-item" data-share-action="check-shared">
                            📂 <span data-i18n="checkShared">Check Shared</span>
                        </button>
                        <button class="dropdown-item" data-share-action="share-vault">
                            🔗 <span data-i18n="shareVault">Share Vault</span>
                        </button>
                        <div class="dropdown-divider"></div>
                        <button class="dropdown-item" data-share-action="manage-shares">
                            👥 <span data-i18n="manageShares">Manage Shares</span>
                        </button>
                    </div>
                </div>
            </div>
            <h1 id="header-title" class="header-title">
                <img src="icons/logo.svg" alt="Zip80" class="header-logo header-logo-light">
                <img src="icons/logo-dark.svg" alt="Zip80" class="header-logo header-logo-dark">
            </h1>
            <div class="header-actions">
                <!-- 2025-12-17: Save Status Indicator - flashes on save, hidden otherwise -->
                <div id="save-status" class="save-status save-status-saved" title="All changes saved">
                    <span class="save-status-icon">✓</span>
                    <span class="save-status-text" data-i18n="statusSaved">Saved</span>
                </div>
                <!-- 2026-01-08: AI Assist Button - opens floating chat window -->
                <button id="btn-ai-assist" class="btn btn-secondary btn-ai" title="AI Assistant">
                    🤖 AI
                </button>
                <!-- 2026-02-26: Notification Bell — positioned between AI and Close Vault -->
                <button id="btn-notifications" class="btn-notifications" title="Notifications">
                    🔔
                    <span id="notification-badge" class="notification-badge" style="display:none;">0</span>
                    <!-- WHY: Dropdown anchored inside the button's parent for correct positioning -->
                    <div id="notification-dropdown" class="notification-dropdown"></div>
                </button>
                <button id="btn-close-vault" class="btn btn-secondary btn-save">
                    <span data-i18n="btnCloseVault">Close Vault</span>
                </button>
            </div>
        </header>

        <!-- 2025-12-20: Migration Notice Banner (shown when local vault was previously moved to cloud) -->
        <div id="migration-notice" class="migration-notice" style="display: none;">
            <span id="migration-notice-text" class="migration-notice-text"></span>
            <div class="migration-notice-actions">
                <button id="btn-dismiss-notice-forever" class="btn-dismiss-notice-link"
                    data-i18n="dismissNoticeForever">Don't show again</button>
                <button id="btn-dismiss-notice" class="btn-dismiss-notice" data-i18n="dismissNotice">Dismiss</button>
            </div>
        </div>

        <!-- 2025-12-17: Menu Bar Framework - toolbar for view modes and options (below header) -->
        <nav id="menu-bar" class="menu-bar">
            <div class="menu-bar-left">
                <!-- View Mode Toggles (2025-12-19: Removed Compact, added Historical) -->
                <div class="view-mode-group">
                    <span class="view-mode-label" data-i18n="viewMode">View:</span>
                    <button id="btn-view-standard" class="menu-btn menu-btn-view active" data-view="standard"
                        title="Standard View">
                        📋 <span data-i18n="viewStandard">Standard</span>
                    </button>
                    <button id="btn-view-historical" class="menu-btn menu-btn-view" data-view="historical"
                        title="Historical View">
                        📈 <span data-i18n="viewHistorical">Historical</span>
                    </button>
                    <!-- 2026-02-24: Statement Inspector view -->
                    <button id="btn-view-inspector" class="menu-btn menu-btn-view" data-view="inspector"
                        title="Statement Inspector">
                        🔍 <span data-i18n="viewInspector">Inspector</span>
                    </button>
                </div>

                <!-- 2025-12-17: Undo/Redo Buttons (session-based history) -->
                <div class="undo-redo-group">
                    <button id="btn-undo" class="menu-btn menu-btn-icon disabled" disabled title="Undo">
                        ↶
                    </button>
                    <button id="btn-redo" class="menu-btn menu-btn-icon disabled" disabled title="Redo">
                        ↷
                    </button>
                </div>

                <!-- 2026-01-14: Room Selector Dropdown (virtual workspaces) -->
                <div class="room-select-group">
                    <button id="btn-room-select" class="menu-btn menu-btn-room" aria-haspopup="true"
                        aria-expanded="false" title="Switch workspace">
                        <span class="room-select-icon">📁</span>
                        <span id="room-select-text">Personal</span>
                        <span class="dropdown-arrow">▼</span>
                    </button>
                    <div id="room-dropdown" class="room-dropdown" style="display: none;">
                        <div id="room-dropdown-list">
                            <!-- Room items rendered by JS -->
                        </div>
                        <div class="dropdown-divider"></div>
                        <button class="dropdown-item dropdown-item-new" id="dropdown-new-room">
                            ➕ <span data-i18n="newRoom">New Room</span>
                        </button>
                    </div>
                </div>
            </div>
            <!-- 2025-12-27: Account Selector Dropdown (centered in menu bar) -->
            <div class="menu-bar-center">
                <button id="btn-account-select" class="menu-btn menu-btn-account" aria-haspopup="true"
                    aria-expanded="false">
                    <span id="account-select-icon">💰</span>
                    <span id="account-select-text" data-i18n="selectAccount">Select Account</span>
                    <span class="dropdown-arrow">▼</span>
                </button>
                <div id="account-dropdown" class="account-dropdown" style="display: none;">
                    <button class="dropdown-item dropdown-item-new" id="dropdown-new-account">
                        ➕ <span data-i18n="newAccount">New Account</span>
                    </button>
                    <div class="dropdown-divider"></div>
                    <div id="account-dropdown-list">
                        <!-- Account items rendered by JS -->
                    </div>
                </div>
            </div>
            <div class="menu-bar-right">
                <!-- 2026-03-03: Removed Check Shared + Outgoing Shares buttons — moved to share-menu-wrapper in header -->
                <!-- 2026-01-12: Pending Approvals Notification for queue sync (owner sees pending transactions from editors) -->
                <button id="btn-pending-approvals" class="menu-btn menu-btn-notification menu-btn-approvals"
                    style="display: none;" title="Pending transactions from editors">
                    ⏳ <span id="pending-approvals-count">0</span> <span data-i18n="pendingApprovals">Pending</span>
                </button>
                <!-- 2025-12-20: New Sticky Deck Button -->
                <button id="btn-new-deck" class="menu-btn menu-btn-options" title="New Sticky Deck">
                    <span data-i18n="newDeck">Notes</span> 📋
                </button>
                <!-- 2025-12-19: Calculator Toggle Button -->
                <button id="btn-calculator" class="menu-btn menu-btn-options" title="Calculator">
                    🔢
                </button>
                <!-- 2025-12-19: Widgets Toggle Button -->
                <button id="btn-widgets" class="menu-btn menu-btn-options" aria-haspopup="true" aria-expanded="false">
                    🧩 <span data-i18n="widgets">Widgets</span>
                </button>
                <!-- Widgets Dropdown Menu (hidden by default) -->
                <div id="widgets-dropdown" class="widgets-dropdown" style="display: none;">
                    <div class="widget-toggle-item" data-widget="balance-bank">
                        <span class="widget-toggle-label"><span class="toggle-icon">🏦</span> <span
                                data-i18n="widgetBankCash">Bank/Cash</span></span>
                        <label class="widget-toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="widget-toggle-item" data-widget="balance-credit">
                        <span class="widget-toggle-label"><span class="toggle-icon">💳</span> <span
                                data-i18n="widgetCreditCards">Credit Cards</span></span>
                        <label class="widget-toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="widget-toggle-item" data-widget="balance-crypto">
                        <span class="widget-toggle-label"><span class="toggle-icon">🪙</span> <span
                                data-i18n="widgetCrypto">Crypto</span></span>
                        <label class="widget-toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="widget-toggle-item" data-widget="calendar">
                        <span class="widget-toggle-label"><span class="toggle-icon">📅</span> <span
                                data-i18n="widgetCalendar">Calendar</span></span>
                        <label class="widget-toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="widget-toggle-item" data-widget="recurring">
                        <span class="widget-toggle-label"><span class="toggle-icon">🔁</span> <span
                                data-i18n="widgetRecurring">Recurring</span></span>
                        <label class="widget-toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="widget-toggle-item" data-widget="exchange">
                        <span class="widget-toggle-label"><span class="toggle-icon">💱</span> <span
                                data-i18n="widgetExchange">Exchange Rates</span></span>
                        <label class="widget-toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="widget-toggle-item" data-widget="crypto-rates">
                        <span class="widget-toggle-label"><span class="toggle-icon">₿</span> <span
                                data-i18n="widgetCryptoRates">Crypto Rates</span></span>
                        <label class="widget-toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="widget-toggle-item" data-widget="stocks">
                        <span class="widget-toggle-label"><span class="toggle-icon">📈</span> <span
                                data-i18n="widgetStocks">Stocks</span></span>
                        <label class="widget-toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="widget-toggle-item" data-widget="activity-log">
                        <span class="widget-toggle-label"><span class="toggle-icon">📋</span> <span
                                data-i18n="widgetActivityLog">Activity Log</span></span>
                        <label class="widget-toggle-switch">
                            <input type="checkbox" checked>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>
                <!-- Options Button -->
                <button id="btn-options" class="menu-btn menu-btn-options" aria-haspopup="true" aria-expanded="false">
                    <span data-icon="settings"></span> <span data-i18n="options">Options</span>
                </button>
                <!-- Options Dropdown Menu (hidden by default) -->
                <div id="options-dropdown" class="options-dropdown" style="display: none;">
                    <button class="dropdown-item" data-action="export-csv">
                        📄 <span data-i18n="exportCSV">Export as CSV</span>
                    </button>
                    <button class="dropdown-item" data-action="export-json">
                        📥 <span data-i18n="exportJSON">Export as JSON</span>
                    </button>
                    <!-- 2025-12-17: Change password (only for encrypted vaults) -->
                    <!-- 2026-01-13: Now always shown since all vaults are encrypted -->
                    <button id="btn-change-password" class="dropdown-item" data-action="change-password"
                        style="display: none;">
                        🔑 <span data-i18n="changePassword">Change Password</span>
                    </button>
                    <!-- 2026-03-03: Share Vault removed — now in share-menu-wrapper next to vault name -->
                    <!-- 2025-12-20: Move to cloud (only for local vaults when signed into Google) -->
                    <button id="btn-move-to-cloud" class="dropdown-item" data-action="move-to-cloud"
                        style="display: none;">
                        ☁️ <span data-i18n="moveToCloud">Move to Cloud</span>
                    </button>

                    <div class="dropdown-divider"></div>
                    <button id="btn-settings" class="dropdown-item" data-action="settings">
                        <span data-icon="settings"></span> <span data-i18n="settings">Settings</span>
                    </button>
                    <button class="dropdown-item" data-action="about">
                        ℹ️ <span data-i18n="about">About</span>
                    </button>
                </div>
            </div>
        </nav>

        <!-- 2026-02-05: News Ticker (dot-matrix LED style) -->
        <div id="news-ticker" class="news-ticker">
            <button id="btn-ticker-toggle" class="ticker-toggle" title="Toggle ticker">▼</button>
            <div class="ticker-track">
                <div id="ticker-content" class="ticker-content">
                    <!-- Messages rendered by JS -->
                </div>
            </div>
            <button id="btn-ticker-settings" class="ticker-settings" title="Ticker settings"><span
                    data-icon="settings"></span></button>
        </div>

        <!-- 2025-12-15: Added workspace layout with sidebar for balance overview -->
        <div class="workspace-layout">

            <!-- 2026-02-25: Account header bar — inside workspace-layout as a grid item.
                 WHY: grid-column: 1/-1 guarantees perfect edge alignment with widget
                 content below. Visible across Standard, Historical, Inspector views. -->
            <div id="standard-account-header" class="account-header-bar">
                <!-- 2026-02-25: Date outside inner container so it's always visible -->
                <span class="header-date" id="std-header-date"></span>
                <div class="account-header-bar-inner">
                    <div class="inspector-header-left">
                        <span class="inspector-header-icon" id="std-header-icon"></span>
                        <div class="inspector-header-info">
                            <h2 class="inspector-header-name" id="std-header-name"></h2>
                            <span class="inspector-header-type" id="std-header-type"></span>
                        </div>
                    </div>
                    <!-- 2026-02-25: Period toggle — CC-style switch between current/previous billing period -->
                    <button id="btn-inspector-period" class="btn btn-secondary btn-sm" style="display: none;">
                        ◀ Previous Period
                    </button>
                    <!-- 2026-02-25: Back to Standard button — only shown in Inspector mode. -->
                    <button id="btn-inspector-back" class="btn btn-secondary btn-sm" style="display: none;">
                        <span data-i18n="backToStandard">← Back to Standard</span>
                    </button>
                </div>
            </div>

            <!-- 2026-02-25: Standard view grid — unified layout matching Inspector structure.
                 WHY: Single parent grid replaces separate workspace-main + workspace-sidebar.
                 Both halves are children of one container for consistent alignment. -->
            <div class="standard-grid" id="standard-grid">
                <div class="standard-grid-half standard-grid-left">

                    <!-- 2025-12-22: Account Selector - converted to widget structure for popout/collapse support -->
                    <section class="card widget-card account-card widget-size-double" data-widget-id="accounts"
                        style="display: none;">
                        <div class="widget-header account-header">
                            <h2 id="accounts-title" class="widget-title">💰 Accounts</h2>
                            <!-- 2026-03-02: Small tag showing current room name -->
                            <span id="accounts-room-label" class="accounts-room-label" style="display:none">Current
                                Room:</span>
                            <span id="accounts-room-tag" class="accounts-room-tag"></span>
                            <button id="btn-new-account" class="btn btn-secondary btn-sm">
                                <span data-i18n="newAccount">+ New Account</span>
                            </button>
                        </div>
                        <div class="widget-content">
                            <div id="account-tabs" class="account-tabs">
                                <!-- Account tabs rendered here -->
                            </div>
                        </div>
                    </section>

                    <!-- 2025-12-22: Balance Card - converted to widget structure for popout/collapse support -->
                    <!-- 2026-02-23: Redesigned as step-by-step "Operations" module -->
                    <section class="card widget-card balance-card widget-size-double" data-widget-id="balance">
                        <div class="widget-header">
                            <h2 id="balance-title" class="widget-title">💵 Operations</h2>
                            <!-- 2025-12-27: Edit account icon buttons in header -->
                            <button id="btn-edit-credit" class="btn-icon-header" style="display: none;"
                                title="Edit Settings">⚙️</button>
                            <button id="btn-edit-account-settings" class="btn-icon-header" style="display: none;"
                                title="Edit Account">⚙️</button>
                        </div>
                        <div class="widget-content">

                            <!-- STEP 1: Mode buttons (always visible) -->
                            <!-- 2026-01-09: Added Mass Transaction button -->
                            <div class="transaction-mode-row">
                                <button id="btn-mode-expense" class="btn btn-mode-toggle" data-mode="expense">
                                    <span data-i18n="modeExpense">➖ Expense</span>
                                </button>
                                <button id="btn-mode-income" class="btn btn-mode-toggle" data-mode="income">
                                    <span data-i18n="modeIncome">➕ Income</span>
                                </button>
                                <button id="btn-mass-transaction" class="btn btn-mode-toggle btn-mass btn-adjust"
                                    title="Add Multiple Transactions">
                                    <span class="btn-adjust-icon">📋</span>
                                    <span class="btn-adjust-text">Multiple<br>Transactions</span>
                                </button>
                                <!-- 2026-02-23: Adjust Amount moved to mode row -->
                                <button id="btn-edit-balance" class="btn btn-mode-toggle btn-adjust"
                                    title="Adjust Amount">
                                    <span class="btn-adjust-icon">✏️</span>
                                    <span class="btn-adjust-text">Adjust<br>Amount</span>
                                </button>
                            </div>

                            <!-- STEP 2: Account selection prompt (shown when mode selected but no account) -->
                            <div id="operations-account-prompt" class="operations-account-prompt"
                                style="display: none;">
                                <span data-i18n="selectAccountPrompt">Please select an account</span>
                            </div>

                            <!-- Balance display: shown when account is selected (no mode needed) -->
                            <div id="operations-balance" class="operations-details" style="display: none;">
                                <!-- 2025-12-27: Centered vertical layout -->
                                <div class="balance-center">
                                    <div id="balance-label" class="balance-label">Current Balance</div>
                                    <div id="balance-display" class="balance-value">$0.00</div>
                                    <div id="account-currency" class="account-currency">USD</div>
                                </div>

                                <!-- Credit Card Info (shown for credit accounts) -->
                                <div id="credit-card-info" class="credit-card-info" style="display: none;">
                                    <div class="credit-info-row">
                                        <span id="credit-available-label">Available Credit:</span>
                                        <span id="credit-available-value">$0.00</span>
                                    </div>
                                    <div class="credit-info-row">
                                        <span id="credit-limit-label">Limit:</span>
                                        <span id="credit-limit-value">$0.00</span>
                                    </div>
                                    <div class="credit-info-row">
                                        <span id="credit-dates-label"></span>
                                        <span id="credit-dates-value"></span>
                                    </div>
                                </div>

                                <!-- 2025-12-16: Crypto account info (shows crypto balance below USD value) -->
                                <div id="crypto-account-info" class="crypto-account-info" style="display: none;">
                                    <div class="crypto-balance-row">
                                        <span id="crypto-balance-value">0.00000000 BTC</span>
                                    </div>
                                </div>
                            </div>

                            <!-- STEP 3: Transaction form (shown when mode + account are both selected) -->
                            <div id="operations-details" class="operations-details" style="display: none;">

                                <!-- 2026-02-23: Amount field first — progressive disclosure -->
                                <div class="form-group">
                                    <input type="text" inputmode="decimal" id="input-amount" class="input"
                                        placeholder="Amount (0.00)" min="0">
                                </div>

                                <!-- Rest of form: revealed after amount is typed -->
                                <div id="operations-form-rest" class="operations-form-rest" style="display: none;">

                                    <!-- Category Icons (shown only for expense mode) -->
                                    <div id="category-icons" class="category-icons-row">
                                        <button class="category-icon active" data-category="general"
                                            title="General">💸</button>
                                        <button class="category-icon" data-category="food" title="Food">🍔</button>
                                        <button class="category-icon" data-category="utilities"
                                            title="Utilities">💡</button>
                                        <button class="category-icon" data-category="transport"
                                            title="Transportation">🚗</button>
                                        <button class="category-icon" data-category="housing"
                                            title="Housing">🏠</button>
                                        <button class="category-icon" data-category="health" title="Health">🏥</button>
                                        <button class="category-icon" data-category="fun"
                                            title="Entertainment">🎮</button>
                                        <button class="category-icon" data-category="work"
                                            title="Work/Employee">💼</button>
                                    </div>

                                    <!-- Recurring Toggle (shown only for expense mode) -->
                                    <div id="recurring-toggle-row" class="recurring-toggle-row">
                                        <label class="recurring-toggle-label">
                                            <input type="checkbox" id="checkbox-recurring" class="recurring-checkbox">
                                            <span data-i18n="recurringToggle">🔁 Recurring?</span>
                                        </label>
                                    </div>

                                    <!-- Recurring Frequency Row (shown when recurring is checked) -->
                                    <div id="recurring-frequency-row" class="recurring-frequency-row"
                                        style="display: none;">
                                        <span data-i18n="recurringEvery">Every</span>
                                        <input type="number" id="input-recurring-months" class="input input-sm"
                                            value="1" min="1" max="12">
                                        <span data-i18n="recurringMonths">month(s)</span>
                                    </div>

                                    <div class="form-group">
                                        <input type="text" id="input-desc" class="input"
                                            placeholder="Description (e.g. Rent, Groceries)">
                                    </div>

                                    <!-- 2025-12-22: Attachment Section -->
                                    <div class="attachment-section">
                                        <div id="attachment-list" class="attachment-list">
                                            <!-- Attachment thumbnails rendered by JS -->
                                        </div>
                                        <div class="attachment-row">
                                            <button type="button" id="btn-attach" class="btn btn-secondary btn-sm">
                                                📎 <span data-i18n="attachFile">Attach File</span>
                                            </button>
                                            <input type="file" id="input-attachment" multiple hidden
                                                accept=".jpg,.jpeg,.png,.gif,.webp,.pdf,.doc,.docx,.xls,.xlsx">
                                            <div id="attachment-progress" class="attachment-progress"
                                                style="display:none">
                                                <div class="progress-bar-track">
                                                    <div id="progress-bar-fill" class="progress-bar-fill"></div>
                                                </div>
                                                <span id="progress-text" class="progress-text"
                                                    data-i18n="attachmentUploading">Uploading...</span>
                                            </div>
                                        </div>
                                    </div>

                                    <button id="btn-add-transaction" class="btn btn-danger btn-action btn-full">
                                        <span data-i18n="btnAddTransaction">💸 Add Expense</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- 2025-12-22: History Card - converted to widget structure for popout/collapse support -->
                    <!-- 2025-12-29: Added period filter buttons for performance optimization -->
                    <section class="card widget-card widget-size-double" data-widget-id="history">
                        <div class="widget-header">
                            <h2 id="history-title" class="widget-title">📜 History</h2>
                            <div id="history-period-filters" class="history-period-filters">
                                <button id="btn-period-current" class="btn-period active" data-period="current"
                                    data-i18n="periodCurrent">Current</button>
                                <button id="btn-period-previous" class="btn-period" data-period="previous"
                                    data-i18n="periodPrevious">Previous</button>
                                <div class="period-select-wrapper">
                                    <button id="btn-period-select" class="btn-period" data-period="select"
                                        title="Select Month">📅</button>
                                    <div id="month-picker-dropdown" class="month-picker-dropdown"
                                        style="display: none;">
                                        <select id="select-history-month" class="month-picker-select"></select>
                                        <select id="select-history-year" class="month-picker-select"></select>
                                    </div>
                                </div>
                                <!-- 2026-02-24: Attachment filter toggle — shows only transactions with 📎 -->
                                <button id="btn-filter-attachments" class="btn-period btn-filter-attachments"
                                    title="Show only transactions with attachments">📎</button>
                            </div>
                            <button id="btn-export" class="btn btn-secondary btn-sm">
                                <span data-i18n="btnExport">📥 Export JSON</span>
                            </button>
                            <!-- 2026-03-07: Emergency Kit — downloadable ZIP with offline viewer -->
                            <button id="btn-emergency-kit" class="btn btn-secondary btn-sm"
                                title="Download Emergency Kit (offline backup)">
                                🆘 Emergency Kit
                            </button>
                        </div>
                        <div class="widget-content">
                            <!-- 2025-12-29: Transaction count display -->
                            <p id="history-count" class="history-count" style="display: none;"></p>
                            <ul id="history-list" class="history-list">
                                <!-- Transactions rendered here -->
                            </ul>
                            <p id="empty-state" class="empty-state">No transactions yet. Add one above!</p>
                        </div>
                    </section>
                </div><!-- end standard-grid-left -->

                <!-- 2026-02-25: Right half — was workspace-sidebar -->
                <div class="standard-grid-half standard-grid-right">
                    <!-- Bank/Cash Widget -->
                    <div class="card widget-card balance-widget-card sidebar-widget-half widget-size-single"
                        data-widget-id="balance-bank">
                        <div class="widget-header">
                            <h3 id="bank-widget-title" class="widget-title">🏦 Bank/Cash</h3>
                        </div>
                        <div class="widget-content">
                            <div id="bank-accounts-list" class="widget-accounts-list">
                                <!-- Bank/Cash items rendered by JS -->
                            </div>
                        </div>
                    </div>

                    <!-- Credit Cards Widget -->
                    <div class="card widget-card balance-widget-card sidebar-widget-half widget-size-single"
                        data-widget-id="balance-credit">
                        <div class="widget-header">
                            <h3 id="credit-widget-title" class="widget-title">💳 Credit Cards</h3>
                        </div>
                        <div class="widget-content">
                            <div id="credit-accounts-list" class="widget-accounts-list">
                                <!-- Credit card items rendered by JS -->
                            </div>
                        </div>
                    </div>

                    <!-- 2025-12-16: Crypto Widget -->
                    <div id="crypto-widget-card"
                        class="card widget-card balance-widget-card sidebar-widget-half widget-size-single"
                        data-widget-id="balance-crypto" style="display: none;">
                        <div class="widget-header">
                            <h3 id="crypto-widget-title" class="widget-title">🪙 Crypto</h3>
                        </div>
                        <div class="widget-content">
                            <div id="crypto-accounts-list" class="widget-accounts-list">
                                <!-- Crypto items rendered by JS -->
                            </div>
                        </div>
                    </div>

                    <!-- 2026-01-11: Container for dynamically generated shared account widgets -->
                    <div id="shared-widgets-container"></div>

                    <!-- 2025-12-15: Calendar Widget - now single column for compact layout -->
                    <div class="card widget-card calendar-widget-card sidebar-widget-half widget-size-single"
                        data-widget-id="calendar">
                        <div class="widget-header">
                            <h3 id="calendar-widget-title" class="widget-title">📅 Calendar</h3>
                        </div>
                        <div class="widget-content">
                            <div id="calendar-full-date" class="calendar-full-date">
                                <!-- Full date rendered by JS -->
                            </div>
                            <div class="calendar-grid">
                                <div class="calendar-weekdays">
                                    <span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
                                </div>
                                <div id="calendar-days" class="calendar-days">
                                    <!-- Days rendered by JS -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 2025-12-15: Recurring Expenses Widget -->
                    <!-- 2025-12-29: Moved total to footer for always-visible display -->
                    <div class="card widget-card recurring-widget-card sidebar-widget-half widget-size-single"
                        data-widget-id="recurring">
                        <div class="widget-header">
                            <h3 id="recurring-widget-title" class="widget-title">🔁 Recurring Expenses</h3>
                        </div>
                        <div class="widget-content">
                            <div id="recurring-list" class="recurring-list">
                                <!-- Recurring items rendered by JS -->
                            </div>
                            <p id="recurring-empty" class="recurring-empty">No recurring expenses</p>
                        </div>
                        <!-- 2025-12-29: Footer always visible outside scrollable content -->
                        <div class="widget-footer" id="recurring-footer">
                            <p id="recurring-total" class="recurring-total" style="display: none;"></p>
                        </div>
                    </div>

                    <!-- 2025-12-16: Exchange Rate Widget -->
                    <div class="card widget-card exchange-widget-card sidebar-widget-half widget-size-single"
                        data-widget-id="exchange">
                        <div class="widget-header">
                            <h3 id="exchange-widget-title" class="widget-title">💱 Exchange Rates</h3>
                        </div>
                        <div class="widget-content">
                            <div class="exchange-content">
                                <!-- 2025-12-19: Currency dropdowns for flexible exchange rate viewing -->
                                <div id="exchange-rates" class="exchange-rates">
                                    <!-- Primary rate row: FROM → TO -->
                                    <div class="exchange-rate-row">
                                        <input type="text" id="exchange-amount-from" class="exchange-amount-input"
                                            value="1" inputmode="decimal">
                                        <select id="exchange-from-currency" class="exchange-currency-select">
                                            <option value="USD" selected>USD</option>
                                            <option value="EUR">EUR</option>
                                            <option value="GBP">GBP</option>
                                            <option value="MXN">MXN</option>
                                            <option value="JPY">JPY</option>
                                        </select>
                                        <span class="exchange-arrow">=</span>
                                        <span id="rate-primary" class="exchange-to">--</span>
                                        <span id="primary-to-label" class="exchange-currency">MXN</span>
                                    </div>
                                    <!-- Inverse rate row: TO → FROM -->
                                    <div class="exchange-rate-row">
                                        <input type="text" id="exchange-amount-to" class="exchange-amount-input"
                                            value="1" inputmode="decimal">
                                        <select id="exchange-to-currency" class="exchange-currency-select">
                                            <option value="USD">USD</option>
                                            <option value="EUR">EUR</option>
                                            <option value="GBP">GBP</option>
                                            <option value="MXN" selected>MXN</option>
                                            <option value="JPY">JPY</option>
                                        </select>
                                        <span class="exchange-arrow">=</span>
                                        <span id="rate-inverse" class="exchange-to">--</span>
                                        <span id="inverse-to-label" class="exchange-currency">USD</span>
                                    </div>
                                </div>
                                <div class="exchange-chart">
                                    <!-- 2025-12-16: Enhanced chart with X-axis labels and hover tooltip -->
                                    <div class="exchange-chart-container">
                                        <svg id="exchange-sparkline" viewBox="0 0 120 55" preserveAspectRatio="none">
                                            <!-- Chart line -->
                                            <polyline id="sparkline-path" fill="none" stroke="#22c55e"
                                                stroke-width="1.5" points="">
                                            </polyline>
                                            <!-- Hover circles (added dynamically) -->
                                            <g id="sparkline-dots"></g>
                                        </svg>
                                        <!-- X-axis labels -->
                                        <div id="chart-x-axis" class="chart-x-axis"></div>
                                        <!-- Hover tooltip -->
                                        <div id="chart-tooltip" class="chart-tooltip" style="display: none;">
                                            <span class="tooltip-rate"></span>
                                            <span class="tooltip-date"></span>
                                        </div>
                                    </div>
                                    <!-- Percentage change indicator -->
                                    <div class="chart-change-row">
                                        <span id="chart-change" class="chart-change">--</span>
                                        <div class="chart-range-btns">
                                            <button class="chart-range-btn active" data-days="7">7d</button>
                                            <button class="chart-range-btn" data-days="30">1m</button>
                                            <button class="chart-range-btn" data-days="180">6m</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p id="exchange-updated" class="exchange-updated">Loading...</p>
                        </div>
                    </div>

                    <!-- 2025-12-19: Crypto Rates Widget for cryptocurrency price tracking -->
                    <div class="card widget-card crypto-rates-widget-card sidebar-widget-half widget-size-single"
                        data-widget-id="crypto-rates">
                        <div class="widget-header">
                            <h3 id="crypto-rates-widget-title" class="widget-title">₿ Crypto Rates</h3>
                        </div>
                        <div class="widget-content">
                            <div class="exchange-content">
                                <div id="crypto-rates" class="exchange-rates">
                                    <!-- Crypto to Fiat row -->
                                    <div class="exchange-rate-row">
                                        <input type="text" id="crypto-amount-from" class="exchange-amount-input"
                                            value="1" inputmode="decimal">
                                        <select id="crypto-from-currency" class="exchange-currency-select">
                                            <option value="BTC" selected>BTC</option>
                                            <option value="ETH">ETH</option>
                                            <option value="SOL">SOL</option>
                                            <option value="XRP">XRP</option>
                                            <option value="ADA">ADA</option>
                                        </select>
                                        <span class="exchange-arrow">=</span>
                                        <span id="crypto-rate-primary" class="exchange-to">--</span>
                                        <span id="crypto-primary-to-label" class="exchange-currency">USD</span>
                                    </div>
                                    <!-- Fiat to Crypto row -->
                                    <div class="exchange-rate-row">
                                        <input type="text" id="crypto-amount-to" class="exchange-amount-input" value="1"
                                            inputmode="decimal">
                                        <select id="crypto-to-currency" class="exchange-currency-select">
                                            <option value="USD" selected>USD</option>
                                            <option value="EUR">EUR</option>
                                            <option value="GBP">GBP</option>
                                            <option value="MXN">MXN</option>
                                            <option value="JPY">JPY</option>
                                        </select>
                                        <span class="exchange-arrow">=</span>
                                        <span id="crypto-rate-inverse" class="exchange-to">--</span>
                                        <span id="crypto-inverse-to-label" class="exchange-currency">BTC</span>
                                    </div>
                                </div>
                                <div class="exchange-chart">
                                    <div class="exchange-chart-container">
                                        <svg id="crypto-sparkline" viewBox="0 0 120 55" preserveAspectRatio="none">
                                            <polyline id="crypto-sparkline-path" fill="none" stroke="#22c55e"
                                                stroke-width="1.5" points=""></polyline>
                                            <g id="crypto-sparkline-dots"></g>
                                        </svg>
                                        <div id="crypto-chart-x-axis" class="chart-x-axis"></div>
                                        <div id="crypto-chart-tooltip" class="chart-tooltip" style="display: none;">
                                            <span class="tooltip-rate"></span>
                                            <span class="tooltip-date"></span>
                                        </div>
                                    </div>
                                    <div class="chart-change-row">
                                        <span id="crypto-chart-change" class="chart-change">--</span>
                                        <div class="chart-range-btns crypto-range-btns">
                                            <button class="chart-range-btn active" data-days="7">7d</button>
                                            <button class="chart-range-btn" data-days="30">1m</button>
                                            <button class="chart-range-btn" data-days="180">6m</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p id="crypto-updated" class="exchange-updated">Loading...</p>
                        </div>
                    </div>

                    <!-- 2025-12-23: Stocks Widget for stock price tracking -->
                    <!-- 2026-01-03: Moved customize button to footer for sticky behavior in popout -->
                    <div class="card widget-card stocks-widget-card sidebar-widget-half widget-size-single"
                        data-widget-id="stocks">
                        <div class="widget-header">
                            <h3 id="stocks-widget-title" class="widget-title">📈 Stocks</h3>
                        </div>
                        <div class="widget-content">
                            <div id="stocks-list" class="stocks-list">
                                <!-- Stock items rendered by JS -->
                            </div>
                            <p id="stocks-empty" class="stocks-empty" style="display: none;">No stocks to display</p>
                            <p id="stocks-updated" class="exchange-updated">Loading...</p>
                        </div>
                        <!-- 2026-01-03: Footer always visible outside scrollable content -->
                        <div class="widget-footer" id="stocks-footer">
                            <button id="btn-customize-stocks" class="btn btn-secondary btn-sm stocks-customize-btn">
                                ⚙️ <span data-i18n="stocksCustomize">Customize</span>
                            </button>
                        </div>
                    </div>

                    <!-- 2025-12-17: Activity Log Widget for shared vault attribution -->
                    <div class="card widget-card sidebar-widget-half widget-size-single" data-widget-id="activity-log">
                        <div class="widget-header">
                            <h3 id="activity-log-title" class="widget-title">📋 Activity Log</h3>
                        </div>
                        <div class="widget-content">
                            <div id="activity-log-list" class="activity-log-list">
                                <!-- Activity items rendered by JS -->
                            </div>
                        </div>
                    </div>
                </div><!-- end standard-grid-right -->
            </div><!-- end standard-grid -->

            <!-- 2025-12-19: Historical View Panel (hidden by default, shown when Historical tab active) -->
            <!-- 2026-01-04: Implemented with monthly/yearly views, trend chart, and category breakdown -->
            <div id="historical-view" class="workspace-historical" style="display: none;">
                <div class="card historical-card">
                    <div class="historical-header">
                        <h2 class="card-title">📈 <span data-i18n="historicalTitle">Account History</span></h2>
                        <!-- View type toggle -->
                        <div class="historical-view-type">
                            <button id="btn-hist-monthly" class="btn-hist-type active"
                                data-i18n="histMonthly">Monthly</button>
                            <button id="btn-hist-yearly" class="btn-hist-type" data-i18n="histYearly">Yearly</button>
                        </div>
                    </div>

                    <!-- Period navigation -->
                    <div class="historical-nav">
                        <button id="btn-hist-prev" class="btn-hist-nav" title="Previous Period">◀</button>
                        <span id="hist-period-label" class="hist-period-label">January 2024</span>
                        <button id="btn-hist-next" class="btn-hist-nav" title="Next Period">▶</button>
                    </div>

                    <!-- Summary cards -->
                    <div class="historical-summary-section">
                        <h3 class="hist-section-label" data-i18n="histAllAccounts">📊 All Accounts</h3>
                        <div class="historical-summary">
                            <div class="summary-card summary-income">
                                <span class="summary-label" data-i18n="histIncome">Income</span>
                                <span id="hist-income" class="summary-value positive">$0.00</span>
                            </div>
                            <div class="summary-card summary-expenses">
                                <span class="summary-label" data-i18n="histExpenses">Expenses</span>
                                <span id="hist-expenses" class="summary-value negative">$0.00</span>
                            </div>
                            <div class="summary-card summary-net">
                                <span class="summary-label" data-i18n="histBalance">Balance</span>
                                <span id="hist-net" class="summary-value">$0.00</span>
                            </div>
                        </div>
                    </div>

                    <!-- 2026-01-04: Per-account breakdown -->
                    <div class="historical-accounts">
                        <h3 data-i18n="histByAccount">By Account</h3>
                        <div id="hist-account-list" class="hist-account-list">
                            <!-- Rendered by JS -->
                        </div>
                    </div>

                    <!-- Trend chart -->
                    <div class="historical-chart-section">
                        <h3 data-i18n="histTrend">Monthly Trend</h3>
                        <div id="hist-trend-chart" class="hist-trend-chart">
                            <!-- Chart rendered by JS -->
                        </div>
                    </div>

                    <!-- Category breakdown (expenses only) -->
                    <div class="historical-categories">
                        <h3 data-i18n="histByCategory">Expenses by Category</h3>
                        <div id="hist-category-list" class="hist-category-list">
                            <!-- Rendered by JS -->
                        </div>
                    </div>
                </div>
            </div><!-- end historical-view -->

            <!-- 2026-02-24: Statement Inspector View (hidden by default, shown when Inspector tab active) -->
            <div id="inspector-view" style="display: none;"></div>

        </div><!-- end workspace-layout -->

        <!-- 2026-02-24: Vault loading overlay — shown during file read/parse for large vaults -->
        <div id="vault-loading-overlay" class="vault-loading-overlay" style="display: none;">
            <div class="vault-loading-content">
                <div class="vault-loading-spinner"></div>
                <div id="vault-loading-status" class="vault-loading-status">Loading vault...</div>
            </div>
        </div>
    </main>

    <!-- New Account Modal (2025-12-15: Added credit card fields) -->
    <div id="account-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content modal-content-lg">
            <h2 id="modal-title" class="modal-title">New Account</h2>

            <!-- Account Type Selector -->
            <div class="form-group">
                <label id="label-account-type">Account Type</label>
                <!-- 2025-12-17: Replaced select with icon buttons -->
                <input type="hidden" id="select-account-type" value="checking">
                <div id="account-type-grid" class="account-type-grid">
                    <!-- Buttons injected by JS -->
                </div>
            </div>

            <!-- Account Name -->
            <div class="form-group">
                <label id="label-account-name" for="input-account-name">Account Name</label>
                <input type="text" id="input-account-name" class="input" placeholder="e.g. Checking, Savings">
            </div>

            <!-- Currency -->
            <div class="form-group">
                <label id="label-currency" for="select-currency">Currency</label>
                <select id="select-currency" class="input">
                    <option value="USD">USD - US Dollar ($)</option>
                    <option value="MXN">MXN - Mexican Peso ($MXN)</option>
                </select>
            </div>

            <!-- Credit Card Fields (shown when type = credit) -->
            <div id="credit-card-fields" class="credit-card-fields" style="display: none;">
                <div class="form-group">
                    <label id="label-credit-limit" for="input-credit-limit">Credit Limit</label>
                    <input type="text" inputmode="decimal" id="input-credit-limit" class="input" placeholder="e.g. 5000"
                        min="0">
                </div>
                <div class="form-row">
                    <div class="form-group form-group-half">
                        <label id="label-payment-due-day" for="select-payment-due-day">Payment Due Day</label>
                        <select id="select-payment-due-day" class="input">
                            <!-- Days 1-31 populated by JS -->
                        </select>
                    </div>
                    <div class="form-group form-group-half">
                        <label id="label-statement-close-day" for="select-statement-close-day">Statement Close
                            Day</label>
                        <select id="select-statement-close-day" class="input">
                            <!-- Days 1-31 populated by JS -->
                        </select>
                    </div>
                </div>
            </div>

            <!-- 2026-02-24: AI Kickstart Section (shown when credit card type selected) -->
            <div id="ai-kickstart-section" class="ai-kickstart-section" style="display: none;">
                <div class="ai-kickstart-divider" data-i18n="ksOrDivider">— or —</div>
                <button id="btn-ai-kickstart" class="btn btn-ai-kickstart" type="button" data-i18n="ksButton">
                    ⚡ Quick Setup with AI
                </button>
                <small class="form-hint" data-i18n="ksHint">Upload your latest statement to auto-fill everything</small>
                <input type="file" id="ai-kickstart-file" accept=".pdf" style="display:none;">
            </div>

            <!-- 2026-02-24: AI Kickstart Preview (replaces form when AI extracts data) -->
            <div id="ai-kickstart-preview" class="ai-kickstart-preview" style="display: none;"></div>

            <div class="modal-actions">
                <button id="btn-cancel-account" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
                <button id="btn-create-account" class="btn btn-primary">
                    <span data-i18n="createAccount">Create Account</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Edit Balance Modal -->
    <div id="balance-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content">
            <h2 id="balance-modal-title" class="modal-title">Edit Balance</h2>
            <p id="balance-modal-desc" class="modal-desc">Set the new balance. An adjustment transaction will be
                created.</p>
            <div class="form-group">
                <label id="label-new-balance" for="input-new-balance">New Balance</label>
                <input type="text" inputmode="decimal" id="input-new-balance" class="input" placeholder="0.00">
            </div>
            <div class="form-group">
                <label id="label-adjustment-reason" for="input-adjustment-reason">Reason for Adjustment</label>
                <input type="text" id="input-adjustment-reason" class="input"
                    placeholder="e.g. Bank reconciliation, Error correction">
            </div>
            <div class="modal-actions">
                <button id="btn-cancel-balance" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
                <button id="btn-apply-balance" class="btn btn-primary">
                    <span data-i18n="applyBalance">Apply</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2025-12-15: Edit Credit Card Modal -->
    <div id="credit-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content">
            <h2 id="credit-modal-title" class="modal-title">⚙️ Credit Card Settings</h2>
            <p id="credit-modal-desc" class="modal-desc">Edit your credit card account settings.</p>

            <div class="form-group">
                <label id="label-edit-credit-limit" for="input-edit-credit-limit">Credit Limit</label>
                <input type="text" inputmode="decimal" id="input-edit-credit-limit" class="input"
                    placeholder="e.g. 5000" min="0">
            </div>

            <div class="form-row">
                <div class="form-group form-group-half">
                    <label id="label-edit-payment-due" for="select-edit-payment-due">Payment Due Day</label>
                    <select id="select-edit-payment-due" class="input"></select>
                </div>
                <div class="form-group form-group-half">
                    <label id="label-edit-statement-close" for="select-edit-statement-close">Statement Close Day</label>
                    <select id="select-edit-statement-close" class="input"></select>
                </div>
            </div>

            <div class="modal-actions">
                <button id="btn-cancel-credit" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
                <button id="btn-save-credit" class="btn btn-primary">
                    <span data-i18n="saveChanges">Save Changes</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2025-12-15: Edit Account Modal (for checking/cash accounts) -->
    <div id="account-edit-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content">
            <h2 id="account-edit-modal-title" class="modal-title">⚙️ Account Settings</h2>
            <p id="account-edit-modal-desc" class="modal-desc">Edit your account settings.</p>

            <div class="form-group">
                <label id="label-edit-account-name" for="input-edit-account-name">Account Name</label>
                <input type="text" id="input-edit-account-name" class="input" placeholder="Account Name">
            </div>

            <div class="form-group">
                <label id="label-edit-account-currency" for="select-edit-account-currency">Currency</label>
                <select id="select-edit-account-currency" class="input">
                    <option value="USD">USD - US Dollar ($)</option>
                    <option value="MXN">MXN - Mexican Peso ($MXN)</option>
                </select>
            </div>

            <div class="modal-actions">
                <button id="btn-cancel-account-edit" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
                <button id="btn-save-account-edit" class="btn btn-primary">
                    <span data-i18n="saveChanges">Save Changes</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2025-12-15: New Vault Modal - Settings for new data files -->
    <!-- 2025-12-17: Added encryption option with password fields -->
    <!-- 2026-01-13: SECURITY: Made password mandatory for all vaults -->
    <div id="vault-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content">
            <h2 id="vault-modal-title" class="modal-title">✨ Create New Vault</h2>
            <p id="vault-modal-desc" class="modal-desc">Set your preferences for this expense tracker.</p>

            <!-- Default Language -->
            <div class="form-group">
                <label id="label-vault-language" for="select-vault-language">Default Language</label>
                <select id="select-vault-language" class="input">
                    <option value="en">🇺🇸 English</option>
                    <option value="es">🇲🇽 Español</option>
                </select>
            </div>

            <!-- Default Currency -->
            <div class="form-group">
                <label id="label-vault-currency" for="select-vault-currency">Default Currency</label>
                <select id="select-vault-currency" class="input">
                    <option value="USD">USD - US Dollar ($)</option>
                    <option value="MXN">MXN - Mexican Peso ($MXN)</option>
                </select>
            </div>

            <!-- Vault Name (used as suggested filename) -->
            <div class="form-group">
                <label id="label-vault-name" for="input-vault-name">Vault Name</label>
                <input type="text" id="input-vault-name" class="input" placeholder="e.g. Personal, Business, Savings">
            </div>

            <!-- 2026-01-13: MANDATORY Password Fields (always shown) -->
            <div id="encryption-fields" class="encryption-fields">
                <p id="encryption-warning" class="encryption-warning" data-i18n="encryptionWarning">
                    ⚠️ If you forget your password, your data cannot be recovered.
                </p>
                <div class="form-group">
                    <label id="label-vault-password" for="input-vault-password"
                        data-i18n="passwordLabel">Password</label>
                    <input type="password" id="input-vault-password" class="input" placeholder="Enter password">
                </div>
                <div class="form-group">
                    <label id="label-vault-confirm-password" for="input-vault-confirm-password"
                        data-i18n="confirmPasswordLabel">Confirm Password</label>
                    <input type="password" id="input-vault-confirm-password" class="input"
                        placeholder="Confirm password">
                </div>
                <div class="form-group">
                    <label id="label-vault-hint" for="input-vault-hint" data-i18n="hintLabel">Password Hint
                        (required)</label>
                    <input type="text" id="input-vault-hint" class="input" placeholder="e.g. My favorite movie">
                </div>
            </div>

            <div class="modal-actions">
                <button id="btn-cancel-vault" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
                <button id="btn-create-vault" class="btn btn-primary">
                    <span data-i18n="createVault">Create Vault</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2025-12-17: Password Modal (for opening encrypted vaults) -->
    <div id="password-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content">
            <h2 id="password-modal-title" class="modal-title">🔐 Encrypted Vault</h2>
            <p id="password-modal-desc" class="modal-desc">This vault is encrypted. Enter your password to unlock it.
            </p>

            <div class="form-group">
                <label id="label-unlock-password" for="input-unlock-password" data-i18n="passwordLabel">Password</label>
                <input type="password" id="input-unlock-password" class="input" placeholder="Enter password">
            </div>

            <!-- 2025-12-17: Password hint display (shown after 2 failed attempts) -->
            <div id="password-hint-display" class="password-hint-display" style="display: none;">
                <span id="hint-label" data-i18n="hintLabel">Hint:</span>
                <span id="hint-text"></span>
            </div>

            <div class="modal-actions">
                <button id="btn-cancel-unlock" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
                <button id="btn-unlock-vault" class="btn btn-primary">
                    <span data-i18n="unlockVault">🔓 Unlock</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2025-12-17: Change Password Modal (for encrypted vaults) -->
    <div id="change-password-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content">
            <h2 id="change-password-modal-title" class="modal-title">🔑 Change Password</h2>
            <p id="change-password-modal-desc" class="modal-desc">Enter your current password and choose a new one.</p>

            <div class="form-group">
                <label id="label-current-password" for="input-current-password" data-i18n="currentPasswordLabel">Current
                    Password</label>
                <input type="password" id="input-current-password" class="input" placeholder="Enter current password">
            </div>
            <div class="form-group">
                <label id="label-new-password" for="input-new-password" data-i18n="newPasswordLabel">New
                    Password</label>
                <input type="password" id="input-new-password" class="input" placeholder="Enter new password">
            </div>
            <div class="form-group">
                <label id="label-confirm-new-password" for="input-confirm-new-password"
                    data-i18n="confirmNewPasswordLabel">Confirm New Password</label>
                <input type="password" id="input-confirm-new-password" class="input" placeholder="Confirm new password">
            </div>
            <div class="form-group">
                <label id="label-new-hint" for="input-new-hint" data-i18n="newHintLabel">New Password Hint</label>
                <input type="text" id="input-new-hint" class="input" placeholder="e.g. My favorite movie">
            </div>

            <div class="modal-actions">
                <button id="btn-cancel-change-password" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
                <button id="btn-confirm-change-password" class="btn btn-primary">
                    <span data-i18n="changePassword">🔑 Change Password</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2025-12-19: Share Accounts Modal - Select which accounts to share -->
    <div id="share-vault-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content modal-wide">
            <h2 id="share-vault-modal-title" class="modal-title">🔗 Share Accounts</h2>
            <p id="share-vault-modal-desc" class="modal-desc">Select which accounts to share and set permissions.</p>

            <div class="form-group">
                <label id="label-share-email" for="input-share-email" data-i18n="shareEmailLabel">Email Address</label>
                <input type="text" id="input-share-email" class="input"
                    placeholder="e.g. person@gmail.com, another@gmail.com">
                <small id="share-email-hint" class="form-hint" data-i18n="shareEmailHint">Share to multiple emails by
                    separating with a comma</small>
                <!-- 2026-01-13: SECURITY WARNING - Share key system means wrong email = wrong person gets access -->
                <p id="share-email-warning" class="share-email-warning" data-i18n="shareEmailWarning">
                    ⚠️ Double-check email is correct – wrong email could let someone else read your shared accounts
                </p>
            </div>

            <!-- Account grid with checkboxes -->
            <div class="form-group">
                <label data-i18n="shareSelectAccounts">Select Accounts</label>
                <div id="share-accounts-grid" class="share-accounts-grid">
                    <!-- Populated by JS with account rows -->
                    <!-- Each row: checkbox Share | checkbox Can Edit | Account Name -->
                </div>

            </div>

            <div class="modal-actions">
                <button id="btn-cancel-share" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
                <button id="btn-confirm-share" class="btn btn-primary">
                    <span data-i18n="shareVaultBtn">Share</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2025-12-19: Accept Shared Accounts Modal -->
    <div id="accept-shares-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content modal-wide">
            <h2 id="accept-shares-modal-title" class="modal-title">🔗 Shared Accounts Available</h2>
            <p id="accept-shares-modal-desc" class="modal-desc">Accept accounts shared with you to add them to your
                vault.</p>

            <div id="pending-shares-list" class="pending-shares-list">
                <!-- Populated by JS with pending share rows -->
                <!-- Each row: Account Name | Owner | Permission | Accept/Decline buttons -->
            </div>

            <div class="modal-actions">
                <button id="btn-close-accept-shares" class="btn btn-secondary">
                    <span data-i18n="close">Close</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2026-01-11: Manage Outgoing Shares Modal (for vault owners to see/revoke shares) -->
    <div id="manage-shares-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content modal-wide">
            <h2 id="manage-shares-modal-title" class="modal-title" data-i18n="manageSharingTitle">🔗 Accounts You're
                Sharing</h2>
            <p id="manage-shares-modal-desc" class="modal-desc" data-i18n="manageSharingDesc">Manage accounts you've
                shared with others.</p>

            <div id="outgoing-shares-list" class="outgoing-shares-list">
                <!-- Populated by JS with outgoing share rows -->
                <!-- Each row: Account Name | Shared With | Permission | Revoke button -->
            </div>

            <div class="modal-actions">
                <button id="btn-close-manage-shares" class="btn btn-secondary">
                    <span data-i18n="close">Close</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2025-12-20: Share Deck Modal -->
    <div id="share-deck-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content">
            <h2 id="share-deck-modal-title" class="modal-title" data-i18n="shareDeckTitle">📋 Share Deck</h2>
            <p id="share-deck-modal-desc" class="modal-desc" data-i18n="shareDeckDesc">Share this deck with another
                user.</p>

            <div class="form-group">
                <label id="label-share-deck-email" for="input-share-deck-email" data-i18n="shareEmailLabel">Email
                    Address</label>
                <input type="email" id="input-share-deck-email" class="input" placeholder="e.g. person@gmail.com">
            </div>

            <div class="form-group">
                <label data-i18n="permissionLabel">Permission</label>
                <div class="share-role-buttons">
                    <button class="btn btn-role active" data-role="viewer" data-i18n="canView">👁️ Can View</button>
                    <button class="btn btn-role" data-role="editor" data-i18n="canEdit">✏️ Can Edit</button>
                </div>
            </div>

            <div class="modal-actions">
                <button id="btn-cancel-share-deck" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
                <button id="btn-confirm-share-deck" class="btn btn-primary">
                    <span data-i18n="shareDeck">Share Deck</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2026-01-14: New Deck Modal - Create deck with optional account binding -->
    <div id="new-deck-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content modal-content-sm">
            <h2 id="new-deck-modal-title" class="modal-title" data-i18n="newDeckTitle">📋 New Sticky Deck</h2>
            <p id="new-deck-modal-desc" class="modal-desc" data-i18n="newDeckDesc">Create a new sticky notes deck.
                Optionally tie it to an account to share it along with that account.</p>

            <div class="form-group">
                <label for="input-deck-name" data-i18n="deckNameLabel">Deck Name</label>
                <input type="text" id="input-deck-name" class="input" placeholder="My Notes">
            </div>

            <div class="form-group">
                <label for="select-deck-account" data-i18n="deckAccountLabel">Tie to account (optional)</label>
                <select id="select-deck-account" class="input">
                    <option value="" data-i18n="deckNoAccount">-- No account --</option>
                    <!-- Account options populated by JS -->
                </select>
                <small class="form-hint" data-i18n="deckAccountHint">If the account is shared, this deck can be shared
                    too.</small>
            </div>

            <div class="modal-actions">
                <button id="btn-cancel-new-deck" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
                <button id="btn-confirm-new-deck" class="btn btn-primary">
                    <span data-i18n="createDeck">Create Deck</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2026-01-12: Pending Approval Modal (Queue Sync owner approval of editor transactions) -->
    <div id="pending-approval-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content modal-content-lg modal-pending-approval">
            <button id="btn-close-pending-approval" class="modal-close-btn">✕</button>
            <h2 id="pending-approval-modal-title" class="modal-title">📋 Pending Transactions</h2>
            <p id="pending-approval-modal-desc" class="modal-desc">Review transactions submitted by editors</p>

            <div id="pending-approval-list" class="pending-approval-list">
                <!-- Populated by JS with pending transaction rows -->
            </div>

            <div class="modal-actions">
                <button id="btn-close-pending-approval-footer" class="btn btn-secondary">
                    <span data-i18n="close">Close</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2025-12-22: Attachment Preview Modal -->
    <div id="attachment-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content modal-content-lg attachment-modal-content">
            <button id="btn-close-attachment" class="modal-close-btn">✕</button>
            <h2 id="attachment-modal-title" class="modal-title">
                📎 <span data-i18n="attachments">Attachments</span>
                <button id="btn-zoom-attachment" class="btn-zoom-header" style="display: none;">
                    🔍 <span data-i18n="zoomIn">Zoom In</span>
                </button>
            </h2>

            <div id="attachment-viewer" class="attachment-viewer">
                <div id="attachment-content" class="attachment-content">
                    <!-- Image/PDF preview rendered by JS -->
                </div>
            </div>

            <div id="attachment-info" class="attachment-info">
                <span id="attachment-filename" class="attachment-filename"></span>
                <span id="attachment-size" class="attachment-size"></span>
            </div>

            <div class="modal-actions">
                <button id="btn-download-attachment" class="btn btn-secondary">
                    ⬇️ <span data-i18n="download">Download</span>
                </button>
                <button id="btn-delete-attachment" class="btn btn-danger">
                    🗑️ <span data-i18n="deleteAttachment">Delete</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2025-12-15: Custom Confirm Modal (replaces native confirm dialog) -->

    <div id="confirm-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content">
            <h2 id="confirm-modal-title" class="modal-title">⚠️ Confirm</h2>
            <p id="confirm-modal-message" class="modal-desc">Are you sure?</p>
            <div class="modal-actions">
                <button id="btn-confirm-cancel" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
                <button id="btn-confirm-ok" class="btn btn-danger">
                    <span data-i18n="confirm">Confirm</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Toast Notification -->
    <div id="toast" class="toast" aria-live="polite"></div>

    <!-- 2025-12-16: Google Drive Vault Picker Modal -->
    <div id="gdrive-picker-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content">
            <h2 id="gdrive-picker-title" class="modal-title">☁️ Your Cloud Vaults</h2>
            <div id="gdrive-vault-list" class="gdrive-vault-list">
                <!-- Vault items rendered by JS -->
            </div>
            <div class="modal-actions">
                <button id="btn-gdrive-cancel" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2025-12-19: Settings Modal -->
    <div id="settings-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content modal-content-wide modal-draggable">
            <div id="settings-modal-header" class="modal-drag-header">
                <h2 id="settings-modal-title" class="modal-title">🛠️ Settings</h2>
            </div>
            <p id="settings-modal-desc" class="modal-desc">Configure your application preferences.</p>

            <!-- Inactivity Timer Toggle -->
            <div class="settings-section">
                <div class="settings-item">
                    <div class="settings-item-info">
                        <span class="settings-item-label" data-i18n="settingsInactivityTimer">⏱️ Inactivity Timer</span>
                        <span class="settings-item-desc" data-i18n="settingsInactivityDesc">Close vault after 10 minutes
                            of inactivity</span>
                    </div>
                    <label class="widget-toggle-switch">
                        <input type="checkbox" id="checkbox-inactivity-timer" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
            </div>

            <!-- 2025-12-22: Auto Backup Toggle (cloud vaults only) -->
            <div id="settings-backup-section" class="settings-section" style="display: none;">
                <div class="settings-item">
                    <div class="settings-item-info">
                        <span class="settings-item-label" data-i18n="settingsAutoBackup">💾 Auto Backup</span>
                        <span class="settings-item-desc" data-i18n="settingsAutoBackupDesc">Backup cloud vault locally
                            every 3 days</span>
                    </div>
                    <label class="widget-toggle-switch">
                        <input type="checkbox" id="checkbox-auto-backup" checked>
                        <span class="toggle-slider"></span>
                    </label>
                </div>
                <div class="settings-item">
                    <div class="settings-item-info">
                        <span class="settings-item-label" data-i18n="settingsBackupNow">💾 Backup Now</span>
                        <span class="settings-item-desc" data-i18n="settingsBackupNowDesc">Create a local backup
                            immediately</span>
                    </div>
                    <button id="btn-backup-now" class="btn btn-secondary btn-sm">
                        <span data-i18n="backupNowBtn">Backup</span>
                    </button>
                </div>
                <div class="settings-item">
                    <div class="settings-item-info">
                        <span class="settings-item-label" data-i18n="settingsIncludeAttachments">📎 Include
                            Attachments</span>
                        <span class="settings-item-desc" data-i18n="settingsIncludeAttachmentsDesc">Download attachments
                            (slower)</span>
                    </div>
                    <label class="widget-toggle-switch">
                        <input type="checkbox" id="checkbox-backup-attachments">
                        <span class="toggle-slider"></span>
                    </label>
                </div>
                <div class="settings-item">
                    <div class="settings-item-info">
                        <span class="settings-item-label" data-i18n="settingsBackupPath">📁 Backup Location</span>
                        <span class="settings-item-desc" id="backup-path-display">Default</span>
                    </div>
                    <button id="btn-browse-backup-path" class="btn btn-secondary btn-sm">
                        <span data-i18n="browse">Browse</span>
                    </button>
                </div>
            </div>

            <!-- 2026-01-08: AI Assistant Settings (Phase 2) -->
            <div id="settings-ai-section" class="settings-section">
                <h4 class="settings-section-title" data-i18n="aiSectionTitle">🤖 AI Assistant (Beta)</h4>

                <!-- OAuth Status (shown when signed into Google and using OAuth) -->
                <div id="ai-oauth-status" class="ai-oauth-status" style="display: none;">
                    <span class="ai-status-icon success">●</span>
                    <span data-i18n="aiReadyViaGoogle">Gemini AI ready via Zip80 ✨</span>
                </div>

                <!-- Provider Selection -->
                <div class="settings-item">
                    <div class="settings-item-info">
                        <span class="settings-item-label" data-i18n="aiProviderLabel">AI Provider</span>
                    </div>
                    <select id="select-ai-provider" class="input input-sm">
                        <option value="" data-i18n="aiProviderDisabled">Disabled</option>
                        <option value="gemini-oauth" data-i18n="aiProviderGeminiOAuth">Gemini (via Zip80) ✨ Free
                        </option>
                        <option value="gemini" data-i18n="aiProviderGeminiKey">Google Gemini (API key)</option>
                        <option value="openai" data-i18n="aiProviderOpenAI">OpenAI (API key)</option>
                        <option value="anthropic">Anthropic Claude (API key)</option>
                        <option value="openrouter">OpenRouter (API key)</option>
                        <option value="local">🏠 Local LLM (Ollama)</option>
                    </select>
                </div>

                <!-- API Key Input (hidden for OAuth, shown for API key options) -->
                <div id="ai-key-container" class="settings-item" style="display: none;">
                    <div class="settings-item-info">
                        <span class="settings-item-label" data-i18n="aiKeyLabel">API Key</span>
                    </div>
                    <div class="ai-key-input-group">
                        <input type="password" id="input-ai-key" class="input input-sm" placeholder="Enter API key">
                        <button id="btn-test-ai" class="btn btn-secondary btn-sm">
                            <span data-i18n="aiTestBtn">Test</span>
                        </button>
                    </div>
                </div>

                <!-- 2026-01-10: Ollama/Local LLM Settings with auto-detection -->
                <div id="ai-local-container" class="settings-item" style="display: none;">
                    <div class="settings-item-info">
                        <span class="settings-item-label" data-i18n="ollamaUrlLabel">Ollama URL</span>
                    </div>
                    <div class="ai-key-input-group">
                        <input type="text" id="input-ollama-url" class="input input-sm"
                            placeholder="http://localhost:11434/v1" value="http://localhost:11434/v1">
                    </div>
                </div>
                <div id="ai-model-container" class="settings-item" style="display: none;">
                    <div class="settings-item-info">
                        <span class="settings-item-label" data-i18n="modelLabel">Model</span>
                    </div>
                    <div class="ai-key-input-group">
                        <select id="select-ollama-model" class="input input-sm" style="flex: 1;">
                            <option value="" data-i18n="detectModels">-- Detect models --</option>
                        </select>
                        <button id="btn-detect-models" class="btn btn-secondary btn-sm"
                            title="Detect available models">🔍</button>
                        <button id="btn-test-ollama" class="btn btn-secondary btn-sm"
                            data-i18n="aiTestBtn">Test</button>
                    </div>
                </div>

                <!-- Status Display -->
                <div id="ai-status-container" class="ai-status-container" style="display: none;">
                    <span id="ai-status-icon" class="ai-status-icon">●</span>
                    <span id="ai-status-text" class="ai-status-text" data-i18n="aiNotConfigured">Not configured</span>
                </div>

                <!-- 2026-01-13: Usage History Button -->
                <div class="settings-item">
                    <div class="settings-item-info">
                        <span class="settings-item-label" data-i18n="aiUsageHistory">📊 Usage History</span>
                        <span class="settings-item-desc" data-i18n="aiUsageHistoryDesc">View AI token usage stats</span>
                    </div>
                    <button id="btn-ai-history" class="btn btn-secondary btn-sm" data-i18n="view">View</button>
                </div>
            </div>

            <!-- 2026-03-07: Install Offline section — permanent way to trigger PWA install -->
            <!-- WHY: The startup banner can be dismissed and won't reappear. This ensures
                 users always have a path to install from Settings. Hidden automatically
                 when already installed or when browser doesn't support PWA install. -->
            <div id="settings-install-section" class="settings-section" style="display: none;">
                <h4 class="settings-section-title">📲 Install App</h4>
                <div class="settings-item">
                    <div class="settings-item-info">
                        <span class="settings-item-label">Install Offline</span>
                        <span class="settings-item-desc">Use Zip80 offline from your home screen or taskbar</span>
                    </div>
                    <button id="btn-settings-install" class="btn btn-secondary btn-sm">Install</button>
                </div>
            </div>

            <div class="modal-actions">
                <button id="btn-close-settings" class="btn btn-primary">
                    <span data-i18n="close">Close</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2026-01-13: AI Usage History Modal -->
    <div id="ai-history-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content modal-sm">
            <h3 class="modal-title" data-i18n="aiHistoryTitle">📊 AI Usage History</h3>

            <div class="ai-history-section">
                <h4 class="ai-history-label" data-i18n="aiLifetime">LIFETIME</h4>
                <div class="ai-history-stats">
                    <span class="ai-history-stat">💬 <span id="ai-history-lifetime-requests">0</span></span>
                    <span class="ai-history-stat">🔢 <span id="ai-history-lifetime-tokens">0</span></span>
                    <span class="ai-history-stat">💰 $<span id="ai-history-lifetime-cost">0.00</span> USD</span>
                </div>
            </div>

            <div class="ai-history-section">
                <h4 class="ai-history-label" data-i18n="aiAverages">AVERAGES</h4>
                <div class="ai-history-row">
                    <span class="ai-history-row-label" data-i18n="aiMonthlyLabel">Monthly:</span>
                    <span class="ai-history-stat">💬 <span id="ai-history-monthly-avg-req">0</span></span>
                    <span class="ai-history-stat">🔢 <span id="ai-history-monthly-avg-tok">0</span></span>
                    <span class="ai-history-stat">💰 $<span id="ai-history-monthly-avg-cost">0.00</span></span>
                </div>
                <div class="ai-history-row">
                    <span class="ai-history-row-label" data-i18n="aiDailyLabel">Daily:</span>
                    <span class="ai-history-stat">💬 <span id="ai-history-daily-avg-req">0</span></span>
                    <span class="ai-history-stat">🔢 <span id="ai-history-daily-avg-tok">0</span></span>
                    <span class="ai-history-stat">💰 $<span id="ai-history-daily-avg-cost">0.00</span></span>
                </div>
            </div>

            <div class="ai-history-section">
                <h4 class="ai-history-label"><span data-i18n="aiCurrentMonth">CURRENT MONTH</span> (<span
                        id="ai-history-month-name">January 2026</span>)</h4>
                <div class="ai-history-stats">
                    <span class="ai-history-stat">💬 <span id="ai-history-current-requests">0</span></span>
                    <span class="ai-history-stat">🔢 <span id="ai-history-current-tokens">0</span></span>
                    <span class="ai-history-stat">💰 $<span id="ai-history-current-cost">0.00</span> USD</span>
                </div>
            </div>

            <div class="modal-actions">
                <button id="btn-close-ai-history" class="btn btn-primary" data-i18n="close">Close</button>
            </div>
        </div>
    </div>

    <!-- 2025-12-19: Inactivity Warning Modal -->
    <div id="inactivity-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content modal-content-sm">
            <h2 id="inactivity-modal-title" class="modal-title">⏱️ Inactivity Warning</h2>
            <p id="inactivity-modal-desc" class="modal-desc">
                <span data-i18n="inactivityWarning">Vault will close due to inactivity in</span>
                <span id="inactivity-countdown" class="inactivity-countdown">10</span>
                <span data-i18n="inactivitySeconds">seconds</span>
            </p>

            <div class="modal-actions">
                <button id="btn-cancel-inactivity" class="btn btn-primary">
                    <span data-i18n="stayOpen">Stay Open</span>
                </button>
                <button id="btn-close-now" class="btn btn-secondary">
                    <span data-i18n="closeNow">Close Now</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2025-12-23: Stocks Customize Modal -->
    <div id="stocks-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content modal-content-lg">
            <h2 id="stocks-modal-title" class="modal-title">📈 Customize Stocks</h2>
            <p class="modal-desc" data-i18n="stocksModalDesc">Select up to 10 stocks to display in your widget.</p>

            <div class="form-group">
                <input type="text" id="input-stock-search" class="input" placeholder="Search stocks (e.g. AAPL, Tesla)">
            </div>

            <div id="stock-selection-list" class="stock-selection-list">
                <!-- Stock checkboxes rendered by JS -->
            </div>

            <div class="modal-actions">
                <button id="btn-cancel-stocks" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
                <button id="btn-save-stocks" class="btn btn-primary">
                    <span data-i18n="save">Save</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2026-02-05: Ticker Settings Modal -->
    <div id="ticker-settings-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content">
            <h2 class="modal-title" data-i18n="tickerSettings">📰 Ticker Settings</h2>
            <p class="modal-desc" data-i18n="tickerSettingsDesc">Choose which messages to show in the ticker.</p>
            <div class="ticker-options">
                <!-- Options rendered by JS -->
            </div>
            <div class="modal-actions">
                <button id="btn-ticker-cancel" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
                <button id="btn-ticker-save" class="btn btn-primary">
                    <span data-i18n="save">Save</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2025-12-24: Calendar Event Modal (native Google Calendar integration) -->
    <div id="calendar-event-modal" class="modal" style="display: none;">
        <div class="modal-backdrop"></div>
        <div class="modal-content">
            <h2 id="calendar-event-modal-title" class="modal-title">📅 Add to Calendar</h2>
            <p id="calendar-event-modal-desc" class="modal-desc" data-i18n="calendarEventDesc">Create a reminder in your
                Google Calendar.</p>

            <div class="form-group">
                <label id="label-event-title" for="input-event-title" data-i18n="eventTitleLabel">Event Title</label>
                <input type="text" id="input-event-title" class="input" placeholder="Payment reminder">
            </div>

            <!-- When (Timing) Button Grid -->
            <div class="form-group">
                <label id="label-event-timing" data-i18n="eventTimingLabel">When</label>
                <input type="hidden" id="select-event-timing" value="tomorrow">
                <div id="event-timing-grid" class="timing-btn-grid">
                    <button type="button" class="timing-btn" data-value="today">
                        <span class="timing-icon">🌙</span>
                        <span class="timing-label" data-i18n="timingToday">Later Today (9 PM)</span>
                    </button>
                    <button type="button" class="timing-btn active" data-value="tomorrow">
                        <span class="timing-icon">☀️</span>
                        <span class="timing-label" data-i18n="timingTomorrow">Tomorrow (9 AM)</span>
                    </button>
                    <button type="button" class="timing-btn" data-value="nextweek">
                        <span class="timing-icon">📅</span>
                        <span class="timing-label" data-i18n="timingNextWeek">Next Week (9 AM)</span>
                    </button>
                    <button type="button" class="timing-btn" data-value="custom">
                        <span class="timing-icon">📌</span>
                        <span class="timing-label" data-i18n="timingCustom">Pick Date...</span>
                    </button>
                </div>
            </div>

            <!-- Custom date/time (shown when "Pick Date" is selected) -->
            <div id="event-custom-date-group" class="form-group form-row" style="display: none;">
                <input type="date" id="input-event-custom-date" class="input">
                <input type="time" id="input-event-custom-time" class="input" value="09:00">
            </div>

            <!-- Repeat (Recurrence) Button Grid -->
            <div class="form-group">
                <label id="label-event-recurrence" data-i18n="eventRecurrenceLabel">Repeat</label>
                <input type="hidden" id="select-event-recurrence" value="none">
                <div id="event-recurrence-grid" class="timing-btn-grid recurrence-grid">
                    <button type="button" class="timing-btn active" data-value="none">
                        <span class="timing-icon">🚫</span>
                        <span class="timing-label" data-i18n="recurrenceNone">Does not repeat</span>
                    </button>
                    <button type="button" class="timing-btn" data-value="daily">
                        <span class="timing-icon">📆</span>
                        <span class="timing-label" data-i18n="recurrenceDaily">Daily</span>
                    </button>
                    <button type="button" class="timing-btn" data-value="weekly">
                        <span class="timing-icon">🗓️</span>
                        <span class="timing-label" data-i18n="recurrenceWeekly">Weekly</span>
                    </button>
                    <button type="button" class="timing-btn" data-value="monthly">
                        <span class="timing-icon">📋</span>
                        <span class="timing-label" data-i18n="recurrenceMonthly">Monthly</span>
                    </button>
                    <button type="button" class="timing-btn" data-value="yearly">
                        <span class="timing-icon">🎂</span>
                        <span class="timing-label" data-i18n="recurrenceYearly">Yearly</span>
                    </button>
                </div>
            </div>

            <div class="form-group">
                <label id="label-event-notes" for="input-event-notes" data-i18n="eventNotesLabel">Notes
                    (optional)</label>
                <textarea id="input-event-notes" class="input textarea-sm" rows="2"
                    placeholder="Additional notes..."></textarea>
            </div>

            <div class="modal-actions">
                <button id="btn-cancel-event" class="btn btn-secondary">
                    <span data-i18n="cancel">Cancel</span>
                </button>
                <button id="btn-add-event" class="btn btn-primary">
                    <span data-i18n="addToCalendar">📅 Add to Calendar</span>
                </button>
            </div>

            <!-- Fallback section (shown if Calendar scope not available) -->
            <div id="calendar-fallback-section" class="calendar-fallback-section" style="display: none;">
                <div class="fallback-divider">
                    <span data-i18n="or">or</span>
                </div>
                <button id="btn-event-fallback" class="btn btn-secondary btn-full">
                    <span data-i18n="openInGoogleCalendar">🔗 Open in Google Calendar</span>
                </button>
                <button id="btn-calendar-upgrade" class="btn-link calendar-upgrade-link">
                    <span data-i18n="allowCalendarAccess">Allow Calendar access for better integration</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 2025-12-20: Sticky Decks Container (floating notes) -->
    <div id="sticky-decks-container"></div>

    <!-- 2026-01-08: AI Chat Window (Phase 3) -->
    <div id="ai-chat-window" class="ai-chat-window" style="display: none;">
        <div id="ai-chat-header" class="ai-chat-header">
            <span class="ai-chat-title" data-i18n="aiAssistantTitle">🤖 AI Assistant</span>
            <!-- 2026-01-10: Status indicator showing current AI provider and connection status -->
            <span id="ai-chat-status" class="ai-chat-status">
                <span id="ai-status-dot" class="ai-status-dot warning">●</span>
                <span id="ai-status-name" data-i18n="aiNotConnected">Not connected</span>
            </span>
            <!-- 2026-01-13: Stats toggle button -->
            <button id="btn-ai-stats" class="ai-chat-btn ai-stats-btn" data-i18n-title="aiUsageStats"
                title="Usage Stats">📊</button>
            <button id="btn-ai-minimize" class="ai-chat-btn" data-i18n-title="minimize" title="Minimize">−</button>
            <button id="btn-ai-close" class="ai-chat-btn ai-chat-close" data-i18n-title="close" title="Close">×</button>
        </div>
        <!-- 2026-01-13: Collapsible usage stats bar -->
        <div id="ai-stats-bar" class="ai-stats-bar" style="display: none;">
            <span class="ai-stat-item">💬 <span id="ai-stat-requests">0</span></span>
            <span class="ai-stat-divider">│</span>
            <span class="ai-stat-item">🔢 <span id="ai-stat-tokens">0</span></span>
            <span class="ai-stat-divider">│</span>
            <span class="ai-stat-item">💰 $<span id="ai-stat-cost">0.00</span> USD</span>
        </div>
        <div id="ai-chat-output" class="ai-chat-output">
            <div class="ai-chat-welcome">
                <p data-i18n="aiWelcome">👋 Hi! I can help you with your vault.</p>
                <p class="ai-chat-hint" data-i18n="aiWelcomeHint">Try: "What's my total balance?" or "Add a $50 grocery
                    expense"</p>
            </div>
        </div>
        <div id="ai-chat-confirm" class="ai-chat-confirm" style="display: none;">
            <div class="ai-confirm-header" data-i18n="aiConfirmAction">⚠️ Confirm Action</div>
            <div id="ai-confirm-content" class="ai-confirm-content"></div>
            <div class="ai-confirm-actions">
                <button id="btn-ai-cancel" class="btn btn-secondary btn-sm" data-i18n="cancel">Cancel</button>
                <button id="btn-ai-confirm" class="btn btn-primary btn-sm" data-i18n="confirm">Confirm</button>
            </div>
        </div>
        <div class="ai-chat-input-area">
            <textarea id="ai-chat-input" class="ai-chat-input" data-i18n-placeholder="aiInputPlaceholder"
                placeholder="Ask about your vault..." rows="2"></textarea>
            <!-- 2026-01-10: Moved upload button to left of send button for better visibility -->
            <button id="btn-ai-upload" class="btn btn-secondary btn-ai-upload" data-i18n-title="aiUploadStatement"
                title="Upload Statement (PDF/CSV)">📎</button>
            <input type="file" id="ai-file-input" accept=".pdf,.csv" style="display:none">
            <button id="btn-ai-send" class="btn btn-primary btn-ai-send" data-i18n-title="send" title="Send">➤</button>
        </div>
    </div>

    <!-- 2026-01-09: Mass Transaction Floating Window -->
    <div id="mass-tx-window" class="mass-tx-window" style="display: none;">
        <div id="mass-tx-header" class="mass-tx-header">
            <span id="mass-tx-title" class="mass-tx-title" data-i18n="massTransactionTitle">📋 Add Multiple
                Transactions</span>
            <button id="btn-mass-tx-close" class="mass-tx-btn mass-tx-close" data-i18n-title="close"
                title="Close">×</button>
        </div>
        <div id="mass-tx-account-label" class="mass-tx-account-label"></div>
        <div id="mass-tx-list" class="mass-tx-list">
            <!-- Transaction rows rendered by JS -->
        </div>
        <div class="mass-tx-footer">
            <button id="btn-mass-tx-add-row" class="btn btn-secondary btn-sm"><span data-i18n="massAddRow">➕ Add
                    Row</span></button>
            <span id="mass-tx-total" class="mass-tx-total">Net: $0.00</span>
        </div>
        <div class="mass-tx-actions">
            <button id="btn-mass-tx-cancel" class="btn btn-secondary"><span data-i18n="cancel">Cancel</span></button>
            <button id="btn-mass-tx-confirm" class="btn btn-primary"><span data-i18n="massConfirmAll">✓ Confirm
                    All</span></button>
        </div>
    </div>

    <!-- 2026-01-02: Core infrastructure modules (Phase 1 refactor) -->
    <script src="js/state.js"></script>
    <script src="js/utils.js"></script>
    <!-- 2026-01-02: Phase 2 feature modules -->
    <script src="js/inactivity.js"></script>
    <script src="js/stocks.js"></script>
    <script src="js/ticker.js"></script>
    <script src="js/rates.js"></script>
    <script src="js/backup.js"></script>

    <script src="js/modals.js"></script>
    <script src="js/transactions.js"></script>
    <!-- 2026-02-23: Icon registry - maps semantic names to emoji/SVG icons -->
    <script src="js/icons.js"></script>
    <script src="js/i18n.js"></script>
    <script src="js/accounts.js"></script>
    <script src="js/vault.js"></script>
    <script src="js/settings.js"></script>
    <!-- 2026-01-08: AI Integration Modules (Phase 1 Foundation) -->
    <script src="js/ai/debug-log.js"></script>
    <script src="js/ai/data-access.js"></script>
    <script src="js/ai/client.js"></script>
    <!-- 2026-01-09: Statement parser modules for PDF/CSV upload -->
    <script src="js/ai/parsers/csv-parser.js"></script>
    <script src="js/ai/parsers/pdf-parser.js"></script>
    <script src="js/ai/parsers/pdf-to-image.js"></script>
    <script src="js/ai/statement-parser.js"></script>
    <script src="js/ai/settings.js"></script>
    <script src="js/ai/chat.js"></script>
    <!-- 2025-12-17: Crypto module for vault encryption (must load before storage.js) -->
    <script src="js/crypto.js"></script>
    <script src="js/storage.js"></script>
    <!-- 2025-12-20: Config module with API keys (generated by build script) -->
    <script src="js/config.js"></script>
    <!-- 2026-03-07: GDrive sub-modules (loaded before façade in dependency order) -->
    <script src="js/gdrive-core.js"></script>
    <script src="js/gdrive-auth.js"></script>
    <script src="js/gdrive-vault.js"></script>
    <script src="js/gdrive-sharing.js"></script>
    <script src="js/gdrive-attachments.js"></script>
    <script src="js/gdrive.js"></script>
    <!-- 2026-01-19: GDrive UI module - extracted vault picker from app.js (Phase 30) -->
    <script src="js/gdrive-ui.js"></script>
    <script src="js/calendar.js"></script>
    <!-- 2025-12-24: Google Calendar API module for native event creation -->
    <script src="js/gcalendar.js"></script>
    <!-- 2025-12-16: Widget system with SortableJS for drag-and-drop -->
    <script src="js/Sortable.min.js"></script>
    <script src="js/widgets.js"></script>
    <!-- 2025-12-17: Menu bar controller for view modes and options -->
    <!-- 2025-12-17: History module for undo/redo -->
    <script src="js/history.js"></script>
    <script src="js/menubar.js"></script>
    <script src="js/calculator.js"></script>
    <!-- 2025-12-20: Sticky Notes module -->
    <script src="js/stickynotes.js"></script>
    <!-- 2025-12-22: Attachments module for file uploads -->
    <script src="js/attachments.js"></script>
    <!-- 2026-01-04: Historical view module for monthly/yearly aggregation -->
    <script src="js/historical.js"></script>
    <!-- 2026-02-24: Statement Inspector module -->
    <script src="js/inspector.js"></script>
    <!-- 2026-01-09: Mass Transaction module for adding multiple transactions at once -->
    <script src="js/mass-transaction.js"></script>
    <!-- 2026-01-11: Shared Accounts Widget - displays linked accounts grouped by owner -->
    <script src="js/shared-widget.js"></script>
    <!-- 2026-01-14: Rooms workspace module - virtual workspaces with isolated accounts/widgets -->
    <script src="js/rooms.js"></script>
    <!-- 2026-01-15: Render module - extracted render functions from app.js -->
    <script src="js/render.js"></script>
    <!-- 2026-01-15: Password module - extracted password/encryption functions from app.js -->
    <script src="js/password.js"></script>
    <!-- 2026-02-26: Notification system — engine + UI (must load before sharing.js) -->
    <script src="js/notifications.js"></script>
    <script src="js/notifications-ui.js"></script>
    <!-- 2026-02-26: Alert Popup — expanded dispute/reminder/message dialog -->
    <script src="js/alert-popup.js"></script>
    <!-- 2026-01-15: Sharing module - extracted linked account sync and share management from app.js -->
    <script src="js/sharing.js"></script>
    <!-- 2026-01-19: Widget Resizing module - extracted drag-to-resize functionality -->
    <script src="js/widget-resizing.js"></script>
    <!-- 2026-03-02: Grid row-span module — sets grid-row-end per widget for deadspace elimination -->
    <script src="js/widget-masonry.js"></script>
    <!-- 2026-01-19: Crypto UI module - extracted crypto price fetching from app.js -->
    <script src="js/crypto-ui.js"></script>
    <!-- 2026-01-19: Comma Formatting module - extracted number input formatting from app.js -->
    <script src="js/comma-formatting.js"></script>
    <!-- 2026-01-19: Preferences UI module - extracted theme/language setup from app.js -->
    <script src="js/preferences-ui.js"></script>
    <!-- 2026-01-19: Drag & Drop UI module - extracted vault file drop from app.js -->
    <script src="js/drag-drop-ui.js"></script>
    <!-- 2026-01-19: Credit Card UI module - extracted credit card form setup from app.js -->
    <script src="js/credit-card-ui.js"></script>
    <!-- 2026-02-24: AI Kickstart modules - quick-add credit card from statement -->
    <script src="js/ai/account-extractor.js"></script>
    <script src="js/ai/ai-kickstart-ui.js"></script>
    <!-- 2026-02-25: Statement Import Dialog - full-screen multi-statement import -->
    <script src="js/ai/statement-import-dialog.js"></script>
    <!-- 2026-01-19: Undo/Redo UI module - extracted History module wiring from app.js -->
    <script src="js/undo-redo-ui.js"></script>
    <!-- 2026-01-19: Modal Drag module - extracted modal drag functionality from app.js -->
    <script src="js/modal-drag.js"></script>
    <!-- 2026-01-19: History Filters module - extracted period filter UI from app.js -->
    <script src="js/history-filters.js"></script>

    <!-- 2026-03-07: Emergency Kit export module -->
    <script src="js/emergency-kit.js"></script>
    <!-- 2026-03-07: PWA Install prompt + service worker registration -->
    <script src="js/pwa-install.js"></script>
    <script src="js/app.js"></script>


    <!-- 2026-02-26: Notification login popup (shown on vault unlock if unread) -->
    <div id="notification-login-popup"></div>
    <!-- 2025-12-17: Title bar window controls (moved to external file for CSP compliance) -->
    <script src="js/titlebar.js"></script>
</body>

</html>