<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clariqo — Personal Finance</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>

<!-- Title bar -->
<div class="titlebar">
  <div class="titlebar-left"></div>
  <button type="button" class="update-pill hidden" id="titlebar-update-pill" style="display:none">⬆ Update Available!</button>
  <div class="titlebar-center">
    <button id="version-pill" class="version-pill" onclick="openVersionPill()" title=""></button>
  </div>
  <div class="titlebar-controls">
    <button type="button" class="topbar-btn"><span class="btn-icon contact-icon"></span><span class="btn-text">Contact Us</span></button>
    <button type="button" class="topbar-btn"><span class="btn-icon bug-icon"></span><span class="btn-text">Report a Bug</span></button>
    <div class="topbar-divider"></div>
    <button type="button" class="theme-toggle" onclick="toggleTheme()"><span class="theme-icon"><span class="sun"></span><span class="moon"></span></span></button>
  </div>
</div>

<script>
function toggleTheme(){document.body.classList.toggle('light');localStorage.setItem('clariqo-theme',document.body.classList.contains('light')?'light':'dark');}
document.addEventListener('DOMContentLoaded',()=>{if(localStorage.getItem('clariqo-theme')==='light')document.body.classList.add('light');});
</script>

<!-- Splash -->
<div id="splash-screen">
  <img class="splash-logo" src="https://i.postimg.cc/zfNKvjGN/Clariqo-Main-Logo.png" alt="Clariqo" style="object-fit:contain">
  <div class="splash-name">Clariqo</div>
  <div class="splash-ver" id="splash-ver">Personal Finance</div>
  <div class="splash-bar-wrap"><div class="splash-bar" id="splash-bar"></div></div>
  <div class="splash-status" id="splash-status">Loading...</div>
  <div id="splash-update" class="splash-update hidden"></div>
  <div id="splash-revoked" class="hidden" style="margin-top:18px;background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.35);border-radius:var(--radius-sm);padding:14px 20px;text-align:center;width:340px;max-width:90vw">
    <div style="font-size:22px;margin-bottom:6px">🔒</div>
    <div style="font-weight:700;color:var(--red);font-size:14px;margin-bottom:4px">Activation Revoked</div>
    <div style="font-size:12px;color:rgba(255,255,255,0.5);line-height:1.6">Your Clariqo Premium activation has been revoked. The app will continue in free mode.<br>Please contact <a href="mailto:support@clariqo.app" style="color:var(--red)">support@clariqo.app</a> for help.</div>
  </div>
</div>

<!-- Loading -->
<div id="loading-screen" class="hidden">
  <div style="text-align:center"><img src="https://i.postimg.cc/zfNKvjGN/Clariqo-Main-Logo.png" alt="Clariqo" style="height:48px;object-fit:contain;margin-bottom:10px"><div style="font-size:15px;font-weight:600">Loading...</div></div>
</div>

<!-- ═══ SETUP WIZARD ═══ -->
<div id="setup-screen" class="hidden">

  <!-- Terms -->
  <div id="setup-step-terms" class="hidden" style="width:680px;max-width:95vw;background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;">
    <div style="background:var(--accent);padding:22px 28px"><img src="https://i.postimg.cc/zfNKvjGN/Clariqo-Main-Logo.png" alt="Clariqo" style="height:36px;object-fit:contain;margin-bottom:6px"><div style="font-size:18px;font-weight:700;color:#000">Welcome to Clariqo</div><div style="font-size:12px;color:rgba(0,0,0,0.55);margin-top:3px">Please read and accept the following before continuing.</div></div>
    <div style="display:flex;background:var(--panel2);border-bottom:1px solid var(--border)">
      <button id="ttab-privacy" onclick="showTermsTab('privacy')" style="flex:1;padding:10px;font-size:12px;font-weight:600;border:none;cursor:pointer;background:var(--accent);color:#000;transition:all 0.15s">Privacy Policy</button>
      <button id="ttab-disclaimer" onclick="showTermsTab('disclaimer')" style="flex:1;padding:10px;font-size:12px;font-weight:600;border:none;cursor:pointer;background:var(--panel2);color:var(--text2);transition:all 0.15s">Financial Disclaimer</button>
      <button id="ttab-licence" onclick="showTermsTab('licence')" style="flex:1;padding:10px;font-size:12px;font-weight:600;border:none;cursor:pointer;background:var(--panel2);color:var(--text2);transition:all 0.15s">Licence Terms</button>
    </div>
    <div style="padding:18px 26px;height:240px;overflow-y:auto;font-size:13px;line-height:1.7;color:var(--text2);background:var(--bg)">
      <div id="terms-privacy"><b style="color:var(--text)">1. Overview</b><br>Clariqo operates entirely on your local device. We do not collect, store, or transmit your personal or financial data to any external server.<br><br><b style="color:var(--text)">2. Data Storage</b><br>All financial data is stored locally on your computer. You retain full ownership and control at all times.<br><br><b style="color:var(--text)">3. No Financial Data Collection</b><br>We do not collect personal or financial information, usage analytics, or tracking data. No internet connection is required for normal use of the app.<br><br><b style="color:var(--text)">4. Premium Activation</b><br>If you choose to activate Clariqo Premium, an internet connection is required at the point of activation. During activation, your email address, activation code, and an anonymous hardware identifier are sent to a secure validation server. No financial or budgeting data is ever transmitted. Your activation details are stored locally in a separate file.<br><br><b style="color:var(--text)">5. Ongoing Validity Checks</b><br>Each time Clariqo starts, a brief background check is made to confirm your activation is still valid. Only your activation code and hardware identifier are sent — no personal or financial data. If the check cannot be completed (e.g. no internet), the app continues normally. If your activation has been revoked, the app will notify you and switch to free mode.<br><br><b style="color:var(--text)">6. Your Responsibility</b><br>You are solely responsible for maintaining backups of your data.</div>
      <div id="terms-disclaimer" class="hidden"><b style="color:var(--red)">IMPORTANT — PLEASE READ CAREFULLY</b><br><br>Clariqo is provided for personal budgeting and organisational purposes only.<br><br><b style="color:var(--text)">Not Financial Advice</b><br>Nothing in this application constitutes financial, investment, legal, or tax advice.<br><br><b style="color:var(--text)">No Guarantees</b><br>Budget figures are based on your inputs. Clariqo accepts no liability for financial decisions.<br><br><b style="color:var(--text)">Use at Your Own Risk</b><br>Always verify important figures with your bank or a qualified financial adviser.</div>
      <div id="terms-licence" class="hidden"><b style="color:var(--text)">1. Licence Grant</b><br>Clariqo is free to use for personal budgeting. A one-time activation unlocks Premium features. The licence is non-transferable and for a single installation.<br><br><b style="color:var(--text)">2. No Resale</b><br>Activation codes may not be resold, shared, or transferred to any third party. Each code is for a single installation only.<br><br><b style="color:var(--text)">3. Online Activation</b><br>Activating Clariqo Premium requires an internet connection to validate your code. Your email, activation code, and an anonymous hardware identifier are sent to a secure validation server. After successful validation, your activation is stored locally and the app operates fully offline for all budgeting functions.<br><br><b style="color:var(--text)">4. Ongoing Validity Checks</b><br>Each time the app starts, a brief background request confirms your activation is still valid. This check only transmits your activation code and hardware identifier. If your activation is revoked (e.g. for misuse or code sharing), the app will notify you and revert to free mode. The developer reserves the right to revoke activations used in violation of these terms.<br><br><b style="color:var(--text)">5. Local Operation</b><br>No financial or budgeting data is ever transmitted externally under any circumstances. Only activation-related data is sent during the checks described above.<br><br><b style="color:var(--text)">6. Limitation of Liability</b><br>The developer accepts no liability for any loss arising from use of this application, including data loss or reliance on figures shown.</div>
    </div>
    <div style="padding:14px 26px;background:var(--panel);border-top:1px solid var(--border)">
      <label style="display:flex;align-items:flex-start;gap:9px;margin-bottom:7px;cursor:pointer;font-size:13px;color:var(--text)"><input type="checkbox" id="chk-privacy" onchange="updateTermsBtn()" style="margin-top:2px;width:auto"> I have read and accept the Privacy Policy</label>
      <label style="display:flex;align-items:flex-start;gap:9px;margin-bottom:7px;cursor:pointer;font-size:13px;color:var(--text)"><input type="checkbox" id="chk-disclaimer" onchange="updateTermsBtn()" style="margin-top:2px;width:auto"> I understand Clariqo does not provide financial advice</label>
      <label style="display:flex;align-items:flex-start;gap:9px;margin-bottom:12px;cursor:pointer;font-size:13px;color:var(--text)"><input type="checkbox" id="chk-licence" onchange="updateTermsBtn()" style="margin-top:2px;width:auto"> I have read and accept the Licence Terms</label>
      <button id="terms-accept-btn" disabled onclick="acceptTerms()" style="width:100%;padding:11px;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;background:var(--border);color:var(--text3);cursor:not-allowed;transition:all 0.2s;font-family:var(--font)">I Accept — Continue to Clariqo</button>
    </div>
  </div>

  <!-- Choice -->
  <div id="setup-step-choice" class="setup-card hidden" style="text-align:center">
    <img src="https://i.postimg.cc/zfNKvjGN/Clariqo-Main-Logo.png" alt="Clariqo" style="height:44px;object-fit:contain;margin-bottom:10px">
    <h1 style="margin-bottom:4px">Get Started</h1>
    <p style="margin-bottom:24px">How would you like to set up Clariqo?</p>
    <div style="display:flex;gap:12px">
      <div onclick="chooseSetup('fresh')" style="flex:1;padding:20px 14px;border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:all 0.15s" onmouseover="this.style.borderColor='var(--accent)';this.style.background='var(--accent-dim)'" onmouseout="this.style.borderColor='var(--border)';this.style.background=''">
        <div style="font-size:26px;margin-bottom:7px">✨</div>
        <div style="font-weight:700;margin-bottom:3px;font-size:14px">Start Fresh</div>
        <div style="font-size:12px;color:var(--text2)">Set up a new budget from scratch</div>
      </div>
      <div onclick="chooseSetup('import')" style="flex:1;padding:20px 14px;border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:all 0.15s" onmouseover="this.style.borderColor='var(--accent)';this.style.background='var(--accent-dim)'" onmouseout="this.style.borderColor='var(--border)';this.style.background=''">
        <div style="font-size:26px;margin-bottom:7px">📂</div>
        <div style="font-weight:700;margin-bottom:3px;font-size:14px">Import Existing</div>
        <div style="font-size:12px;color:var(--text2)">Load a Clariqo backup file</div>
      </div>
    </div>
    <input type="file" id="setup-import-file" accept=".json" class="hidden" onchange="doImportSetup(event)">
  </div>

  <!-- Wizard wrapper -->
  <div id="setup-step-wizard" class="hidden" style="width:560px;max-width:95vw;background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;">
    <!-- Progress bar -->
    <div style="height:3px;background:var(--border)"><div id="wiz-progress" style="height:100%;background:var(--accent);transition:width 0.3s ease;width:0%"></div></div>
    <div style="padding:28px 32px" id="wiz-body"><!-- filled by JS --></div>
  </div>

</div>

<!-- ═══ MAIN APP ═══ -->
<div id="app-shell" class="hidden">
  <div id="sidebar">
    <div class="sidebar-logo" style="justify-content:center;padding:14px 10px">
      <img src="https://i.postimg.cc/zfNKvjGN/Clariqo-Main-Logo.png" alt="Clariqo" style="height:52px;object-fit:contain">
    </div>
    <!-- Profile switcher -->
    <div id="profile-switcher" style="padding:8px 10px 0">
      <div id="profile-tabs" style="display:flex;gap:4px"></div>
    </div>
    <div class="sidebar-period-badge" onclick="showTab('overview')" title="Go to Overview">
      <div class="period-label">Current Period</div>
      <div class="period-name" id="sb-period-name">—</div>
    </div>
    <div id="sb-snapshot">
      <div class="sb-snap-row" data-snap="personal" onclick="showTab('personal')"><span class="sb-snap-label">Personal Left</span><span class="sb-snap-val green" id="sb-personal-avail">—</span></div>
      <div id="sb-joint-row" class="sb-snap-row" data-snap="joint" onclick="showTab('joint')"><span class="sb-snap-label">Joint Left</span><span class="sb-snap-val blue" id="sb-joint-remain">—</span></div>
      <div class="sb-snap-row" data-snap="savings" onclick="showTab('savings')"><span class="sb-snap-label">Total Savings</span><span class="sb-snap-val" id="sb-savings">—</span></div>
      <div id="sb-bills-row" class="sb-snap-row" data-snap="bills" onclick="showTab('overview')"><span class="sb-snap-label">Next Bill</span><span class="sb-snap-val amber" id="sb-next-bill">—</span></div>
    </div>
    <div class="nav-section-label">Navigation</div>
    <button class="nav-item active" data-tab="overview"    onclick="showTab('overview')"   ><span class="nav-icon">📊</span> Overview</button>
    <button class="nav-item"        data-tab="joint"       onclick="showTab('joint')"      ><span class="nav-icon">🤝</span> Joint Budget</button>
    <button class="nav-item"        data-tab="personal"    onclick="showTab('personal')"   ><span class="nav-icon">👤</span> Personal</button>
    <button class="nav-item"        data-tab="mortgage"    onclick="showTab('mortgage')"   ><span class="nav-icon">🏠</span> Mortgage</button>
    <button class="nav-item"        data-tab="savings"     onclick="showTab('savings')"    ><span class="nav-icon">🏦</span> Savings</button>
    <button class="nav-item"        data-tab="investments" onclick="showTab('investments')"><span class="nav-icon">📈</span> Investments</button>
    <button class="nav-item"        data-tab="settings"    onclick="showTab('settings')"   ><span class="nav-icon">⚙️</span> Settings</button>
    <div class="sidebar-bottom">
      <div style="font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.7px;margin-bottom:5px">Budget Period</div>
      <select id="period-select" onchange="selectPeriod(this.value)"></select>
      <button class="btn btn-secondary btn-sm w-full" style="justify-content:center" onclick="openModal('modal-new-period')">+ New Period</button>
    </div>
  </div>

  <div id="main">
    <div id="topbar">
      <div class="topbar-title" id="topbar-title">Overview</div>
      <div class="topbar-actions">
        <button class="btn btn-primary btn-sm" onclick="openModal('modal-quick-add')">⚡ Quick Add</button>
        <span id="topbar-lock-badge"></span>
      </div>
    </div>
    <div id="content-area">

      <!-- OVERVIEW -->
      <div id="tab-overview" class="tab-content">
        <div class="stat-grid" id="ov-stats"></div>
        <div class="two-col">
          <div>
            <div class="card"><div class="card-title tip-below" data-tip="Bills due in the next 14 days based on the day of month you set. Add them in Settings → Bill Reminders.">📅 Upcoming Bills</div><div id="ov-bills"></div></div>
            <div class="card"><div class="card-title tip-below" data-tip="Track savings targets. Set a goal name and amount, then contribute towards it over time.">🎯 Goals</div><div id="ov-goals"></div></div>
          </div>
          <div>
            <div class="card">
              <div class="section-header"><div class="card-title" style="margin:0" data-tip="The latest spending logged against your shared joint budget.">Recent Joint Transactions</div><button class="btn btn-secondary btn-sm" onclick="showTab('joint')">See all →</button></div>
              <div class="table-scroll table-wrap"><table class="data-table"><thead><tr><th>Date</th><th>Category</th><th>Reason</th><th class="amount">Amount</th></tr></thead><tbody id="ov-joint-txns"></tbody></table></div>
            </div>
            <div class="card mt-12">
              <div class="section-header"><div class="card-title" style="margin:0" data-tip="The latest variable expenses logged to your personal budget this period.">Recent Personal Expenses</div><button class="btn btn-secondary btn-sm" onclick="showTab('personal')">See all →</button></div>
              <div class="table-scroll table-wrap"><table class="data-table"><thead><tr><th>Date</th><th>Category</th><th>Reason</th><th class="amount">Amount</th></tr></thead><tbody id="ov-personal-txns"></tbody></table></div>
            </div>
          </div>
        </div>
        <div class="card"><div class="flex-between mb-8"><div class="card-title" style="margin:0" data-tip="Free-text notes for this budget period. Saved automatically as you type.">📝 Period Notes</div></div><textarea id="period-notes" rows="3" placeholder="Notes for this period..." oninput="saveNotes()" style="resize:vertical;user-select:text"></textarea></div>
      </div>

      <!-- JOINT -->
      <div id="tab-joint" class="tab-content hidden">
        <div class="two-col">
          <div>
            <div class="card">
              <div class="card-title tip-below" data-tip="Set how much to allocate per joint category and your share %. Click Apply after changing values.">Budget Allocation</div>
              <div class="form-row mb-8">
                <span style="font-size:12px;color:var(--text2);flex:1">Leftover carried:</span>
                <input type="number" id="j-leftover" class="input-sm" step="0.01" placeholder="0.00" onchange="setLeftover()">
              </div>
              <div id="j-alloc-rows"></div>
              <div class="sep"></div>
              <div id="j-summary" style="font-size:13px"></div>
            </div>
            <div class="card">
              <div class="card-title" data-tip="Move money between joint and personal. Top-Up adds funds to joint categories. Joint → Personal routes joint money back to you.">💸 Transfers</div>
              <div class="btn-row" style="margin-bottom:10px">
                <button class="btn btn-secondary btn-sm" onclick="openModal('modal-j2p')">Joint → Personal</button>
                <button class="btn btn-primary btn-sm" onclick="openModal('modal-topup')">➕ Top-Up</button>
              </div>
              <div class="card-title" style="margin-bottom:6px" data-tip="A record of all top-ups and transfers this period. Deleting a top-up entry will reverse the allocation.">Transfer Log</div>
              <div id="transfer-log"></div>
            </div>
          </div>
          <div>
            <div class="card">
              <div class="card-title" data-tip="Log a joint expense against a category. You'll see a confirmation showing the impact before it saves.">Add Transaction</div>
              <div class="form-row">
                <div class="form-group" style="flex:1"><label class="form-label">Category</label><select id="j-cat"></select></div>
                <div class="form-group" style="flex:1"><label class="form-label">Reason</label><input type="text" id="j-reason" placeholder="What for?" style="user-select:text"></div>
              </div>
              <div class="form-row">
                <div class="form-group" style="flex:1"><label class="form-label">Amount</label><input type="number" id="j-amount" step="0.01" placeholder="0.00"></div>
                <div class="form-group" style="flex:1"><label class="form-label">Notes</label><input type="text" id="j-notes" placeholder="Optional" style="user-select:text"></div>
              </div>
              <button class="btn btn-primary" onclick="addJointTxn()">+ Add Transaction</button>
            </div>
            <div class="card">
              <div class="section-header">
                <div class="card-title" style="margin:0" data-tip="All joint transactions this period. Use the search box to filter. Delete with the × button.">Transaction History</div>
                <input type="text" id="j-search" placeholder="🔍 Search..." style="width:160px;padding:4px 9px;font-size:12px" oninput="renderJoint()">
              </div>
              <div class="table-scroll table-wrap">
                <table class="data-table"><thead><tr><th>Date</th><th>Category</th><th>Reason</th><th>Notes</th><th class="amount">Amount</th><th></th></tr></thead><tbody id="j-txn-body"></tbody></table>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- PERSONAL -->
      <div id="tab-personal" class="tab-content hidden">
        <div class="two-col">
          <div>
            <div class="card">
              <div class="card-title tip-below" data-tip="Log a one-off personal spend. Optionally tag a budget category or link to a card.">Add Variable Expense</div>
              <div class="form-group"><label class="form-label">Category</label><select id="p-cat"></select></div>
              <div class="form-group"><label class="form-label">Budget Category</label><select id="p-budget-cat"><option value="">None</option></select></div>
              <div class="form-group"><label class="form-label">Reason</label><input type="text" id="p-reason" placeholder="What was this for?" style="user-select:text"></div>
              <div class="form-group"><label class="form-label">Amount</label><input type="number" id="p-amount" step="0.01" placeholder="0.00"></div>
              <div class="form-group"><label class="form-label">Paid with card</label><select id="p-card"><option value="">None</option></select></div>
              <div class="form-group"><label class="form-label">Notes</label><input type="text" id="p-notes" placeholder="Optional" style="user-select:text"></div>
              <button class="btn btn-primary" onclick="addPersonalExpense()">+ Add Expense</button>
            </div>
            <div class="card">
              <div class="card-title" data-tip="Record extra income this period on top of your wage — freelance, cashback, gifts etc.">Additional Income</div>
              <div class="form-row">
                <div class="form-group" style="flex:2"><label class="form-label">Description</label><input type="text" id="ai-desc" placeholder="e.g. Freelance" style="user-select:text"></div>
                <div class="form-group" style="flex:1"><label class="form-label">Amount</label><input type="number" id="ai-amount" step="0.01" placeholder="0.00"></div>
              </div>
              <button class="btn btn-secondary btn-sm" onclick="addIncome()">+ Add Income</button>
              <div class="table-scroll mt-8" style="max-height:180px"><div id="ai-list"></div></div>
            </div>
            <div class="card">
              <div class="section-header">
                <div class="card-title" style="margin:0" data-tip="Fixed monthly costs that come out every period — rent, subscriptions, phone bill etc. These carry over automatically to new periods.">Core Expenses (Fixed)</div>
                <button class="btn btn-primary btn-sm" onclick="openModal('modal-add-core')">+ Add</button>
              </div>
              <div id="p-core-list"></div>
            </div>
          </div>
          <div>
            <div class="card">
              <div class="section-header">
                <div class="card-title" style="margin:0" data-tip="All personal spending logged this period. Sorted newest first. Search and filter using the box above.">Variable Expenses</div>
                <input type="text" id="p-search" placeholder="🔍 Search..." style="width:150px;padding:4px 9px;font-size:12px" oninput="renderPersonal()">
              </div>
              <div class="table-scroll table-wrap">
                <table class="data-table"><thead><tr><th>Date</th><th>Category</th><th>Reason</th><th>Card</th><th class="amount">Amount</th><th></th></tr></thead><tbody id="p-exp-body"></tbody></table>
              </div>
              <div id="p-total" class="mt-8" style="text-align:right;font-size:13px;font-weight:600"></div>
            </div>
            <div class="card">
              <div class="card-title" data-tip="Set a spending budget per category with a warning threshold. Fills up as you log expenses against it.">📊 Budget Categories</div>
              <div id="p-budget-cats"></div>
              <div class="sep"></div>
              <div class="form-row">
                <input type="text" id="bc-name" placeholder="Category name" style="flex:2;user-select:text">
                <input type="number" id="bc-alloc" placeholder="Budget" step="0.01" style="flex:1">
                <input type="number" id="bc-warn" placeholder="Warn %" value="80" style="flex:1">
                <button class="btn btn-secondary btn-sm" onclick="addBudgetCat()">+ Add</button>
              </div>
            </div>
            <div class="card">
              <div class="flex-between mb-8"><div class="card-title" style="margin:0" data-tip="Track debts with balance, APR and minimum payments. Log payments to reduce the balance over time.">💳 Debts</div><button class="btn btn-secondary btn-sm" onclick="openModal('modal-add-debt')">+ Add</button></div>
              <div id="debt-list"></div>
            </div>
            <div class="card">
              <div class="flex-between mb-8"><div class="card-title" style="margin:0" data-tip="Track credit and debit cards. Balance updates when you log card purchases or make payments.">💴 Cards</div><button class="btn btn-secondary btn-sm" onclick="openModal('modal-add-card')">+ Add</button></div>
              <div id="card-list"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- SAVINGS -->
      <div id="tab-savings" class="tab-content hidden">
        <div class="two-col">
          <div>
            <div class="card"><div class="card-title tip-below" data-tip="Add or remove named savings pots used across the savings tab.">Savings Pots</div><div id="savings-pots"></div></div>
            <div class="card">
              <div class="card-title" data-tip="Record an investment contribution from your wage or a savings pot.">Add Contribution</div>
              <div class="form-group"><label class="form-label">Pot</label><select id="sav-contrib-pot"></select></div>
              <div class="form-group"><label class="form-label">Amount</label><input type="number" id="sav-contrib-amt" step="0.01" placeholder="0.00"></div>
              <div class="form-group"><label class="form-label">From</label><select id="sav-contrib-src"><option value="wage">Wage / Available</option><option value="savings">Another pot</option></select></div>
              <button class="btn btn-primary" onclick="addSavingsContrib()">+ Contribute</button>
            </div>
          </div>
          <div><div class="card"><div class="card-title" data-tip="A total view of all your savings pots and their balances.">Savings Summary</div><div id="savings-summary"></div></div></div>
        </div>
      </div>

      <!-- MORTGAGE -->
      <div id="tab-mortgage" class="tab-content hidden">
        <div id="mortgage-premium-gate" style="position:relative">
          <div class="two-col">
            <div>
              <div class="card" id="mortgage-details-card">
                <div class="card-title tip-below" data-tip="Your mortgage summary — balance, LTV, equity and rate. Edit details as your balance changes over time.">🏠 Mortgage Details</div>
                <div id="mortgage-display"></div>
                <div class="btn-row" id="mortgage-action-btns" style="display:none">
                  <button class="btn btn-secondary btn-sm" onclick="openModal('modal-edit-mortgage')">✏ Edit Details</button>
                  <button class="btn btn-primary btn-sm" onclick="openModal('modal-remortgage')">🔄 Remortgage</button>
                </div>
                <div id="mortgage-setup-form" style="display:none">
                  <div class="form-row">
                    <div class="form-group" style="flex:1"><label class="form-label">Property value</label><input type="number" id="m-prop-val" step="0.01" placeholder="0.00"></div>
                    <div class="form-group" style="flex:1"><label class="form-label">Original loan</label><input type="number" id="m-orig-loan" step="0.01" placeholder="0.00"></div>
                  </div>
                  <div class="form-row">
                    <div class="form-group" style="flex:1"><label class="form-label">Current balance</label><input type="number" id="m-balance" step="0.01" placeholder="0.00"></div>
                    <div class="form-group" style="flex:1"><label class="form-label">Interest rate (%)</label><input type="number" id="m-rate" step="0.01" placeholder="e.g. 4.5"></div>
                  </div>
                  <div class="form-row">
                    <div class="form-group" style="flex:1"><label class="form-label">Monthly payment</label><input type="number" id="m-payment" step="0.01" placeholder="0.00"></div>
                    <div class="form-group" style="flex:1"><label class="form-label">Remaining term (months)</label><input type="number" id="m-term" step="1" placeholder="e.g. 240"></div>
                  </div>
                  <div class="form-group"><label class="form-label">Link to core expense (optional)</label><select id="m-linked-core"><option value="">None — not tracked as core expense</option></select><div class="muted small mt-4">If your mortgage payment is already in your core expenses, link it here so the breakdown shows it's accounted for.</div></div>
                  <button class="btn btn-primary" onclick="saveMortgage()">Save Mortgage</button>
                </div>
              </div>
              <div class="card" id="mortgage-history-card" style="display:none">
                <div class="card-title" data-tip="A log of previous mortgage rates and terms saved each time you remortgage.">📋 Rate History</div>
                <div id="mortgage-rate-history"></div>
              </div>
            </div>
            <div>
              <div class="card" id="mortgage-breakdown-card" style="display:none">
                <div class="card-title" data-tip="Estimated split of your monthly payment into interest and capital repayment based on current balance and rate.">📊 Monthly Breakdown</div>
                <div id="mortgage-breakdown"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- INVESTMENTS -->
      <div id="tab-investments" class="tab-content hidden">
        <div class="two-col">
          <div>
            <div class="card">
              <div class="card-title tip-below" data-tip="Named investment pots you contribute to. Add a pot first, then log contributions against it.">Investment Pots</div>
              <div id="inv-pots-list"></div>
              <div class="sep"></div>
              <div class="form-row">
                <input type="text" id="inv-pot-name" placeholder="Pot name" style="flex:2;user-select:text">
                <button class="btn btn-secondary btn-sm" onclick="addInvPot()">+ Add Pot</button>
              </div>
            </div>
            <div class="card">
              <div class="card-title" data-tip="Record an investment contribution from your wage or a savings pot.">Add Contribution</div>
              <div class="form-group"><label class="form-label">Investment Pot</label><select id="inv-pot-select"></select></div>
              <div class="form-group"><label class="form-label">Amount</label><input type="number" id="inv-amount" step="0.01" placeholder="0.00"></div>
              <div class="form-group"><label class="form-label">From</label><select id="inv-source" onchange="toggleInvSavPot()"><option value="wage">Wage / Available</option><option value="savings">Savings pot</option></select></div>
              <div class="form-group" id="inv-sav-pot-row" style="display:none"><label class="form-label">Savings Pot</label><select id="inv-sav-pot"></select></div>
              <button class="btn btn-primary" onclick="addInvContrib()">+ Add Contribution</button>
            </div>
          </div>
          <div>
            <div class="card">
              <div class="card-title" data-tip="All investment contributions logged this period with source and amount.">Contribution History</div>
              <div class="table-scroll table-wrap"><table class="data-table"><thead><tr><th>Date</th><th>Pot</th><th>Source</th><th class="amount">Amount</th></tr></thead><tbody id="inv-history"></tbody></table></div>
              <div id="inv-total" class="mt-8" style="text-align:right;font-size:13px;font-weight:600"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- SETTINGS -->
      <div id="tab-settings" class="tab-content hidden">
        <div class="two-col-equal">
          <div>
            <div class="card">
              <div class="card-title tip-below" data-tip="Your display name used throughout the app.">Profile</div>
              <div class="form-group"><label class="form-label">Your name</label><input type="text" id="set-name" style="user-select:text"></div>
              <div class="form-group"><label class="form-label">Profile Theme</label><div id="settings-theme-picker" class="theme-picker"></div></div>
              <button class="btn btn-primary btn-sm" onclick="saveSettings()">Save</button>
            </div>
            <div class="card">
              <div class="card-title" data-tip="Lock completed periods to prevent accidental edits, or delete old periods you no longer need.">Period Management</div>
              <div id="set-periods-list"></div>
            </div>
            <div class="card">
              <div class="card-title" data-tip="Export a full backup of your data as JSON, or import a previous backup to restore everything.">Data</div>
              <p class="muted small mb-8">All data stored locally. No cloud, no accounts.</p>
              <div class="btn-row">
                <button class="btn btn-secondary btn-sm" onclick="exportData()">📤 Export</button>
                <button class="btn btn-secondary btn-sm" onclick="document.getElementById('import-file').click()">📥 Import</button>
              </div>
              <input type="file" id="import-file" accept=".json" class="hidden" onchange="importData(event)">
            </div>
            <div class="card" id="activation-card">
              <div class="card-title" data-tip="Enter a Clariqo Premium activation code to unlock joint budgeting, investments, and more.">🔐 Activation</div>
              <div id="act-status-block"></div>
            </div>
          </div>
          <div>
            <!-- Categories — chip based -->
            <div class="card" id="joint-cats-setting">
              <div class="card-title tip-below" data-tip="Add or remove the categories used in your joint budget. Premium required.">Joint Categories</div>
              <div id="set-joint-cats-chips" class="cat-chips"></div>
              <div class="form-row mt-8">
                <input type="text" id="set-jcat-input" placeholder="New category name" style="flex:1;user-select:text" onkeydown="if(event.key==='Enter')addCatChip('joint')">
                <button class="btn btn-secondary btn-sm" onclick="addCatChip('joint')">+ Add</button>
              </div>
            </div>
            <div class="card">
              <div class="card-title" data-tip="Add or remove your personal spending categories used when logging expenses.">Personal Categories</div>
              <div id="set-personal-cats-chips" class="cat-chips"></div>
              <div class="form-row mt-8">
                <input type="text" id="set-pcat-input" placeholder="New category name" style="flex:1;user-select:text" onkeydown="if(event.key==='Enter')addCatChip('personal')">
                <button class="btn btn-secondary btn-sm" onclick="addCatChip('personal')">+ Add</button>
              </div>
            </div>
            <div class="card">
              <div class="card-title" data-tip="Add or remove named savings pots used across the savings tab.">Savings Pots</div>
              <div id="set-savings-chips" class="cat-chips"></div>
              <div class="form-row mt-8">
                <input type="text" id="set-sav-input" placeholder="New pot name" style="flex:1;user-select:text" onkeydown="if(event.key==='Enter')addCatChip('savings')">
                <button class="btn btn-secondary btn-sm" onclick="addCatChip('savings')">+ Add</button>
              </div>
            </div>
            <div class="card" id="bill-reminders-setting">
              <div class="card-title" data-tip="Set recurring bills by day of month. The app calculates the next real due date accounting for month lengths.">Bill Reminders</div>
              <div id="bill-list"></div>
              <div class="sep"></div>
              <div class="form-row">
                <input type="text" id="bill-name" placeholder="Bill name" style="flex:2;user-select:text">
                <input type="number" id="bill-day" placeholder="Day" min="1" max="31" style="flex:1">
                <input type="number" id="bill-amount" placeholder="Amount" step="0.01" style="flex:1">
                <button class="btn btn-secondary btn-sm" onclick="addBill()">+ Add</button>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- ═══ MODALS ═══ -->
<div id="modal-quick-add" class="modal-overlay hidden">
  <div class="modal modal-md">
    <h3>⚡ Quick Add</h3><p class="modal-sub">Log a transaction quickly.</p>
    <div style="display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap">
      <button class="btn btn-primary btn-sm" id="qa-btn-joint" onclick="qaSetType('joint')">💰 Joint</button>
      <button class="btn btn-secondary btn-sm" id="qa-btn-personal" onclick="qaSetType('personal')">👤 Personal</button>
      <button class="btn btn-secondary btn-sm" id="qa-btn-card" onclick="qaSetType('card')">💳 Card Spend</button>
      <button class="btn btn-secondary btn-sm" id="qa-btn-payoff" onclick="qaSetType('payoff')">💸 Pay Off</button>
    </div>
    <div id="qa-form"></div>
    <div class="modal-actions">
      <button class="btn btn-secondary" onclick="closeModal('modal-quick-add')">Cancel</button>
      <button class="btn btn-primary" id="qa-submit-btn" onclick="submitQuickAdd()">+ Add</button>
    </div>
  </div>
</div>

<div id="modal-new-period" class="modal-overlay hidden">
  <div class="modal modal-lg">
    <h3>New Budget Period</h3><p class="modal-sub">Set up your next budget period.</p>
    <div style="display:flex;gap:4px;margin-bottom:18px">
      <div id="np-step-ind-1" style="flex:1;height:3px;border-radius:2px;background:var(--accent);transition:background 0.2s"></div>
      <div id="np-step-ind-2" style="flex:1;height:3px;border-radius:2px;background:var(--border);transition:background 0.2s"></div>
      <div id="np-step-ind-3" style="flex:1;height:3px;border-radius:2px;background:var(--border);transition:background 0.2s"></div>
    </div>
    <div id="np-step-1">
      <div style="font-size:13px;font-weight:600;margin-bottom:12px">Step 1 of 3 — Period Details</div>
      <div class="form-row">
        <div class="form-group" style="flex:1"><label class="form-label">Pay / start date</label><input type="date" id="np-start" onchange="updateNpPeriodName()"></div>
        <div class="form-group" style="flex:1"><label class="form-label">End date</label><input type="date" id="np-end" onchange="updateNpPeriodName()"></div>
      </div>
      <div id="np-period-preview" style="font-size:12px;color:var(--text2);background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;margin-bottom:10px;min-height:28px"></div>
      <div class="form-group" id="np-wage-row"><label class="form-label">Take-home wage</label><input type="number" id="np-wage" step="0.01" placeholder="0.00"></div>
      <div class="modal-actions"><button class="btn btn-secondary" onclick="closeModal('modal-new-period')">Cancel</button><button class="btn btn-primary" onclick="npNext(1)">Next →</button></div>
    </div>
    <div id="np-step-2" class="hidden">
      <div style="font-size:13px;font-weight:600;margin-bottom:12px">Step 2 of 3 — Review Core Expenses</div>
      <p class="muted small mb-8">These carry over from your profile. Edit amounts for this period if needed.</p>
      <div id="np-core-list"></div>
      <div class="sep"></div>
      <div class="form-row">
        <input type="text" id="np-ce-name" placeholder="Add expense name" style="flex:2;user-select:text">
        <input type="number" id="np-ce-amt" placeholder="Amount" step="0.01" style="flex:1">
        <button class="btn btn-secondary btn-sm" onclick="npAddCore()">+ Add</button>
      </div>
      <div class="modal-actions"><button class="btn btn-secondary" onclick="npBack(2)">← Back</button><button class="btn btn-primary" onclick="npNext(2)">Next →</button></div>
    </div>
    <div id="np-step-3" class="hidden">
      <div style="font-size:13px;font-weight:600;margin-bottom:12px">Step 3 of 3 — Joint Budget Allocation</div>
      <p class="muted small mb-8">Set how much to allocate per category and your share %. Recommended based on last period.</p>
      <div id="np-alloc-rows"></div>
      <div class="modal-actions"><button class="btn btn-secondary" onclick="npBack(3)">← Back</button><button class="btn btn-primary" onclick="createPeriod()">Create Period ✓</button></div>
    </div>
  </div>
</div>

<div id="modal-add-core" class="modal-overlay hidden">
  <div class="modal modal-sm">
    <h3>Add Core Expense</h3>
    <div class="form-group"><label class="form-label">Name</label><input type="text" id="ce-name" placeholder="e.g. Rent" style="user-select:text"></div>
    <div class="form-group"><label class="form-label">Amount</label><input type="number" id="ce-amount" step="0.01" placeholder="0.00"></div>
    <div class="modal-actions"><button class="btn btn-secondary" onclick="closeModal('modal-add-core')">Cancel</button><button class="btn btn-primary" onclick="addCoreExpense()">Add</button></div>
  </div>
</div>

<div id="modal-edit-core" class="modal-overlay hidden">
  <div class="modal modal-sm">
    <h3>Edit Core Expense</h3>
    <div class="form-group"><label class="form-label">Name</label><input type="text" id="ece-name" style="user-select:text"></div>
    <div class="form-group"><label class="form-label">Amount</label><input type="number" id="ece-amount" step="0.01"></div>
    <input type="hidden" id="ece-index">
    <div class="modal-actions"><button class="btn btn-secondary" onclick="closeModal('modal-edit-core')">Cancel</button><button class="btn btn-primary" onclick="editCoreExpense()">Save</button></div>
  </div>
</div>

<div id="modal-add-debt" class="modal-overlay hidden">
  <div class="modal modal-sm">
    <h3>Add Debt</h3>
    <div class="form-group"><label class="form-label">Creditor name</label><input type="text" id="d-name" style="user-select:text"></div>
    <div class="form-group"><label class="form-label">Type</label><select id="d-type"><option>Credit Card</option><option>Personal Loan</option><option>Overdraft</option><option>Retail Finance</option><option>Other</option></select></div>
    <div class="form-row">
      <div class="form-group" style="flex:1"><label class="form-label">Original balance</label><input type="number" id="d-orig" step="0.01"></div>
      <div class="form-group" style="flex:1"><label class="form-label">Current balance</label><input type="number" id="d-curr" step="0.01"></div>
    </div>
    <div class="form-row">
      <div class="form-group" style="flex:1"><label class="form-label">APR (%)</label><input type="number" id="d-apr" step="0.1"></div>
      <div class="form-group" style="flex:1"><label class="form-label">Min payment</label><input type="number" id="d-min" step="0.01"></div>
    </div>
    <div class="modal-actions"><button class="btn btn-secondary" onclick="closeModal('modal-add-debt')">Cancel</button><button class="btn btn-primary" onclick="addDebt()">Save</button></div>
  </div>
</div>

<div id="modal-pay-debt" class="modal-overlay hidden">
  <div class="modal modal-sm">
    <h3 id="pay-debt-title">Make Payment</h3>
    <div class="form-group"><label class="form-label">Amount</label><input type="number" id="pd-amount" step="0.01" placeholder="0.00"></div>
    <div class="form-group"><label class="form-label">Note</label><input type="text" id="pd-note" style="user-select:text"></div>
    <input type="hidden" id="pd-index">
    <div class="modal-actions"><button class="btn btn-secondary" onclick="closeModal('modal-pay-debt')">Cancel</button><button class="btn btn-primary" onclick="payDebt()">Make Payment</button></div>
  </div>
</div>

<div id="modal-add-card" class="modal-overlay hidden">
  <div class="modal modal-sm">
    <h3>Add Card</h3>
    <div class="form-group"><label class="form-label">Card name</label><input type="text" id="c-name" placeholder="e.g. Amex Gold" style="user-select:text"></div>
    <div class="form-group"><label class="form-label">Type</label><select id="c-type"><option>Credit Card</option><option>Debit Card</option><option>Store Card</option></select></div>
    <div class="form-row">
      <div class="form-group" style="flex:1"><label class="form-label">Current balance</label><input type="number" id="c-bal" step="0.01"></div>
      <div class="form-group" style="flex:1"><label class="form-label">Limit</label><input type="number" id="c-limit" step="0.01"></div>
    </div>
    <div class="form-group"><label class="form-label">Notes</label><input type="text" id="c-notes" style="user-select:text"></div>
    <div class="modal-actions"><button class="btn btn-secondary" onclick="closeModal('modal-add-card')">Cancel</button><button class="btn btn-primary" onclick="addCard()">Save Card</button></div>
  </div>
</div>

<div id="modal-pay-card" class="modal-overlay hidden">
  <div class="modal modal-sm">
    <h3 id="pay-card-title">Make Card Payment</h3>
    <div class="form-group"><label class="form-label">Amount</label><input type="number" id="pc-amount" step="0.01" placeholder="0.00"></div>
    <div class="form-group"><label class="form-label">Note</label><input type="text" id="pc-note" style="user-select:text"></div>
    <input type="hidden" id="pc-index">
    <div class="modal-actions"><button class="btn btn-secondary" onclick="closeModal('modal-pay-card')">Cancel</button><button class="btn btn-primary" onclick="payCard()">Make Payment</button></div>
  </div>
</div>

<div id="modal-j2p" class="modal-overlay hidden">
  <div class="modal modal-md">
    <h3>Joint → Personal Transfer</h3><p class="modal-sub">Deducts from a joint category. Routes to personal income, savings, or charges a card.</p>
    <div class="form-group"><label class="form-label">From category</label><select id="j2p-cat"></select></div>
    <div class="form-group"><label class="form-label">Amount</label><input type="number" id="j2p-amount" step="0.01" placeholder="0.00" oninput="updateJ2pPreview()"></div>
    <div class="form-group"><label class="form-label">Send to</label><select id="j2p-dest" onchange="updateJ2pPreview()"></select></div>
    <div class="form-group"><label class="form-label">Charge to card (optional)</label><select id="j2p-card" onchange="updateJ2pPreview()"><option value="None">None</option></select></div>
    <div class="form-group"><label class="form-label">Note</label><input type="text" id="j2p-note" placeholder="Optional" style="user-select:text"></div>
    <div id="j2p-preview" style="font-size:12px;color:var(--text2);background:var(--panel2);padding:10px;border-radius:6px;margin-bottom:4px;min-height:36px"></div>
    <div class="modal-actions"><button class="btn btn-secondary" onclick="closeModal('modal-j2p')">Cancel</button><button class="btn btn-primary" onclick="doJ2P()">Confirm Transfer</button></div>
  </div>
</div>

<div id="modal-topup" class="modal-overlay hidden">
  <div class="modal modal-lg">
    <h3>➕ Joint Top-Up</h3><p class="modal-sub">Split source between you and partner, then allocate to categories.</p>
    <div class="two-col-equal">
      <div>
        <div class="card-title" data-tip="Enter how much you and your partner are each contributing to this top-up.">Source Split</div>
        <div class="form-row">
          <div class="form-group" style="flex:1"><label class="form-label">From me</label><input type="number" id="tu-me" step="0.01" placeholder="0" oninput="updateTopupTotal()"></div>
          <div class="form-group" style="flex:1"><label class="form-label">From partner</label><input type="number" id="tu-partner" step="0.01" placeholder="0" oninput="updateTopupTotal()"></div>
        </div>
        <div id="tu-total-lbl" style="font-size:13px;font-weight:600;margin-bottom:10px"></div>
      </div>
      <div>
        <div class="card-title" data-tip="Distribute the total top-up across your joint categories.">Category Allocation</div>
        <div id="tu-cat-rows"></div>
        <div id="tu-alloc-lbl" style="font-size:13px;margin-top:7px"></div>
      </div>
    </div>
    <div class="modal-actions"><button class="btn btn-secondary" onclick="closeModal('modal-topup')">Cancel</button><button class="btn btn-primary" onclick="doTopup()">Confirm Top-Up</button></div>
  </div>
</div>

<!-- Confirm modal -->
<div id="modal-confirm" class="modal-overlay hidden">
  <div class="modal modal-md">
    <div style="display:flex;align-items:center;gap:10px;margin-bottom:4px">
      <span id="confirm-icon" style="font-size:22px">✅</span>
      <h3 id="confirm-title">Confirm Action</h3>
    </div>
    <p class="modal-sub" id="confirm-subtitle">Please review the changes below before confirming.</p>
    <div id="confirm-lines" style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:4px;font-size:13px;line-height:1.9"></div>
    <div class="modal-actions">
      <button class="btn btn-secondary" onclick="closeModal('modal-confirm');if(window._confirmReject)window._confirmReject()">Cancel</button>
      <button class="btn btn-primary" onclick="closeModal('modal-confirm');if(window._confirmResolve)window._confirmResolve()">Confirm</button>
    </div>
  </div>
</div>

<!-- Profile modal (add second profile only — switching done via tabs in sidebar) -->
<div id="modal-profile" class="modal-overlay hidden">
  <div class="modal modal-md">
    <h3>Manage Profiles</h3>
    <p class="modal-sub">Profile affects personal data only. Joint budget is always shared.</p>
    <div id="profile-list" style="margin-bottom:14px"></div>
    <div class="sep"></div>
    <div style="font-size:13px;font-weight:600;margin-bottom:10px;color:var(--text2)">Add a Second Profile</div>
    <div class="form-group"><label class="form-label">Name</label><input type="text" id="new-profile-name" placeholder="e.g. Partner" style="user-select:text"></div>
    <div class="form-group"><label class="form-label">Take-home wage</label><input type="number" id="new-profile-wage" step="0.01" placeholder="0.00"></div>
    <div class="form-group"><label class="form-label">Theme</label><div id="new-profile-theme-picker" class="theme-picker"></div></div>
    <div class="modal-actions">
      <button class="btn btn-secondary" onclick="closeModal('modal-profile')">Close</button>
      <button class="btn btn-primary" onclick="addProfile()">+ Add Profile</button>
    </div>
  </div>
</div>

<!-- Activation modal -->
<div id="modal-activate" class="modal-overlay hidden">
  <div class="modal modal-sm" style="text-align:center">
    <div style="font-size:36px;margin-bottom:8px">🔐</div>
    <h3>Activate Clariqo Premium</h3>
    <p class="modal-sub" style="margin-bottom:16px">Enter your email and activation code to unlock all premium features. Each code can only be used once.</p>
    <div class="form-group">
      <input type="email" id="act-email" placeholder="your@email.com" style="width:100%;padding:9px 12px;font-size:13px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);outline:none;user-select:text;margin-bottom:8px">
    </div>
    <div class="form-group">
      <input type="text" id="act-code" placeholder="XXXX-XXXX-XXXX" style="text-align:center;font-size:16px;font-weight:600;letter-spacing:2px;text-transform:uppercase;user-select:text" maxlength="14">
    </div>
    <div id="act-err" style="color:var(--red);font-size:12px;min-height:16px;margin-bottom:8px"></div>
    <div class="modal-actions">
      <button class="btn btn-secondary" onclick="closeModal('modal-activate')">Cancel</button>
      <button class="btn btn-primary" onclick="doActivate()">🔓 Activate</button>
    </div>
    <div style="margin-top:12px;font-size:11px;color:var(--text3)">Need a code? Visit <a href="https://www.clariqo.app" target="_blank" style="color:var(--accent)">clariqo.app</a></div>
  </div>
</div>

<!-- Profile edit modal -->
<div id="modal-edit-profile" class="modal-overlay hidden">
  <div class="modal modal-sm">
    <h3>Edit Profile</h3>
    <div class="form-group"><label class="form-label">Name</label><input type="text" id="ep-name" style="user-select:text"></div>
    <input type="hidden" id="ep-index">
    <div class="modal-actions">
      <button class="btn btn-secondary" onclick="closeModal('modal-edit-profile')">Cancel</button>
      <button class="btn btn-primary" onclick="saveProfileEdit()">Save</button>
    </div>
  </div>
</div>

<!-- Revoked modal — shown after app loads if activation was revoked on startup -->
<div id="modal-revoked" class="modal-overlay hidden">
  <div class="modal modal-sm" style="text-align:center">
    <div style="font-size:42px;margin-bottom:10px">🔒</div>
    <h3 style="color:var(--red);margin-bottom:6px">Activation Revoked</h3>
    <p class="modal-sub" style="margin-bottom:16px">Your Clariqo Premium activation has been revoked. The app has switched back to free mode and your activation has been removed.</p>
    <div style="background:var(--red-dim);border:1px solid rgba(239,68,68,0.3);border-radius:var(--radius-sm);padding:12px;margin-bottom:16px;font-size:12px;color:var(--text2);line-height:1.7">
      If you believe this is an error or need assistance, please contact support at<br>
      <a href="mailto:support@clariqo.app" style="color:var(--red);font-weight:600">support@clariqo.app</a>
    </div>
    <button class="btn btn-primary" style="width:100%;justify-content:center" onclick="closeModal('modal-revoked')">Understood</button>
  </div>
</div>

<!-- Premium benefits modal (from FREE VERSION pill) -->
<div id="modal-premium-info" class="modal-overlay hidden">
  <div class="modal modal-md" style="text-align:center">
    <img src="https://i.postimg.cc/zfNKvjGN/Clariqo-Main-Logo.png" alt="Clariqo" style="height:44px;object-fit:contain;margin-bottom:8px">
    <h3 style="margin-bottom:4px">Unlock Clariqo Premium</h3>
    <p class="modal-sub" style="margin-bottom:18px">Everything in free, plus all of these:</p>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;text-align:left">
      <div class="premium-benefit"><span class="benefit-icon">🤝</span><div><div class="benefit-title">Joint Budgeting</div><div class="benefit-desc">Track shared spending with your partner</div></div></div>
      <div class="premium-benefit"><span class="benefit-icon">📈</span><div><div class="benefit-title">Investments</div><div class="benefit-desc">Track pots and contributions</div></div></div>
      <div class="premium-benefit"><span class="benefit-icon">🏠</span><div><div class="benefit-title">Mortgage Tracker</div><div class="benefit-desc">LTV, rate history and breakdowns</div></div></div>
      <div class="premium-benefit"><span class="benefit-icon">👥</span><div><div class="benefit-title">Multiple Profiles</div><div class="benefit-desc">Switch between two profiles</div></div></div>
      <div class="premium-benefit"><span class="benefit-icon">📅</span><div><div class="benefit-title">Bill Reminders</div><div class="benefit-desc">Never miss a payment date</div></div></div>
      <div class="premium-benefit"><span class="benefit-icon">🏷</span><div><div class="benefit-title">Joint Categories</div><div class="benefit-desc">Fully customise your shared budget</div></div></div>
    </div>
    <button class="btn btn-primary" style="width:100%;justify-content:center;padding:13px;font-size:14px;margin-bottom:8px" onclick="openGumroad()">🚀 Get Premium</button>
    <button class="btn btn-secondary" style="width:100%;justify-content:center" onclick="closeModal('modal-premium-info')">Maybe later</button>
    <div style="margin-top:10px;font-size:11px;color:var(--text3)">Already have a code? <span style="color:var(--accent);cursor:pointer" onclick="closeModal('modal-premium-info');openModal('modal-activate')">Enter it here →</span></div>
  </div>
</div>

<!-- Nag modal — shown every 3 startups for free users -->
<div id="modal-nag" class="modal-overlay hidden">
  <div class="modal modal-sm" style="text-align:center">
    <div style="font-size:36px;margin-bottom:8px">👋</div>
    <h3 style="margin-bottom:4px">Enjoying Clariqo?</h3>
    <p class="modal-sub" style="margin-bottom:14px">You're using the free version. Upgrade to Premium to unlock joint budgeting, investments, mortgage tracking and more.</p>
    <button class="btn btn-primary" style="width:100%;justify-content:center;padding:12px;font-size:14px;margin-bottom:8px" onclick="closeModal('modal-nag');openModal('modal-premium-info')">See what's included →</button>
    <button class="btn btn-secondary" style="width:100%;justify-content:center" onclick="closeModal('modal-nag')">Maybe later</button>
  </div>
</div>

<!-- Confetti canvas -->
<canvas id="confetti-canvas" style="position:fixed;inset:0;pointer-events:none;z-index:9000;display:none"></canvas>

<!-- Activation celebration modal -->
<div id="modal-celebration" class="modal-overlay hidden" style="z-index:9001">
  <div class="modal modal-sm" style="text-align:center;background:var(--panel);border:2px solid var(--accent)">
    <div style="font-size:52px;margin-bottom:10px">🎉</div>
    <h2 style="color:var(--accent);margin-bottom:6px">Welcome to Premium!</h2>
    <p style="font-size:14px;color:var(--text);margin-bottom:4px">Clariqo has been successfully activated.</p>
    <p class="muted small mb-16">Thank you for your support! All premium features are now unlocked.<br>Please restart Clariqo to apply all changes.</p>
    <button class="btn btn-primary" style="width:100%;padding:13px;font-size:15px;justify-content:center" onclick="doRestart()">🔄 Restart Clariqo Now</button>
    <div class="muted small mt-8">You can also restart manually by closing and reopening the app.</div>
  </div>
</div>

<!-- Edit mortgage modal -->
<div id="modal-edit-mortgage" class="modal-overlay hidden">
  <div class="modal modal-md">
    <h3>Edit Mortgage Details</h3>
    <div class="form-row">
      <div class="form-group" style="flex:1"><label class="form-label">Property value</label><input type="number" id="me-prop-val" step="0.01"></div>
      <div class="form-group" style="flex:1"><label class="form-label">Current balance</label><input type="number" id="me-balance" step="0.01"></div>
    </div>
    <div class="form-row">
      <div class="form-group" style="flex:1"><label class="form-label">Monthly payment</label><input type="number" id="me-payment" step="0.01"></div>
      <div class="form-group" style="flex:1"><label class="form-label">Remaining term (months)</label><input type="number" id="me-term" step="1"></div>
    </div>
    <div class="form-group"><label class="form-label">Linked core expense</label><select id="me-linked-core"><option value="">None</option></select></div>
    <div class="modal-actions">
      <button class="btn btn-secondary" onclick="closeModal('modal-edit-mortgage')">Cancel</button>
      <button class="btn btn-primary" onclick="updateMortgage()">Save Changes</button>
    </div>
  </div>
</div>

<!-- Remortgage modal -->
<div id="modal-remortgage" class="modal-overlay hidden">
  <div class="modal modal-md">
    <h3>🔄 Remortgage</h3>
    <p class="modal-sub">Update your rate and term. The current details will be saved to your rate history.</p>
    <div class="form-row">
      <div class="form-group" style="flex:1"><label class="form-label">New interest rate (%)</label><input type="number" id="rm-rate" step="0.01" placeholder="e.g. 3.99"></div>
      <div class="form-group" style="flex:1"><label class="form-label">New term (months)</label><input type="number" id="rm-term" step="1" placeholder="e.g. 240"></div>
    </div>
    <div class="form-group"><label class="form-label">New monthly payment</label><input type="number" id="rm-payment" step="0.01" placeholder="0.00"></div>
    <div class="form-group"><label class="form-label">Notes (e.g. lender, deal name)</label><input type="text" id="rm-note" placeholder="e.g. Fixed 2yr with Nationwide" style="user-select:text"></div>
    <div class="modal-actions">
      <button class="btn btn-secondary" onclick="closeModal('modal-remortgage')">Cancel</button>
      <button class="btn btn-primary" onclick="doRemortgage()">Apply Remortgage</button>
    </div>
  </div>
</div>

<div id="snap-tooltip" class="snap-tooltip"></div>
<div id="toast-container"></div>
<script src="/static/js/app.js"></script>
</body>
</html>
