{"id":4387,"date":"2026-05-04T16:08:45","date_gmt":"2026-05-04T16:08:45","guid":{"rendered":"https:\/\/ilotusrealty.com\/?page_id=4387"},"modified":"2026-05-04T23:42:31","modified_gmt":"2026-05-04T23:42:31","slug":"mortgage-and-roi-calculator","status":"publish","type":"page","link":"https:\/\/ilotusrealty.com\/index.php\/mortgage-and-roi-calculator\/","title":{"rendered":"Mortgage and ROI Calculator"},"content":{"rendered":"    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n    <style>\n\n  :root {\n    --primary: #1a3c5e;\n    --primary-light: #2a5a8e;\n    --accent: #e8a020;\n    --accent-light: #f5c35a;\n    --success: #2e8b57;\n    --danger: #c0392b;\n    --bg: #f0f4f8;\n    --card: #ffffff;\n    --border: #d0dce8;\n    --text: #1e2d3d;\n    --text-muted: #607080;\n    --shadow: 0 2px 12px rgba(26,60,94,0.10);\n    --radius: 12px;\n  }\n  #ilotus-calc-wrap * { box-sizing: border-box; margin: 0; padding: 0; }\n  #ilotus-calc-wrap {\n    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    min-height: 100vh;\n  }\n\n  \/* \u2500\u2500 HEADER \u2500\u2500 *\/\n  header {\n    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);\n    color: white;\n    padding: 0 32px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 68px;\n    box-shadow: 0 2px 16px rgba(26,60,94,0.25);\n    position: sticky; top: 0; z-index: 100;\n  }\n  .logo { display: flex; align-items: center; gap: 12px; }\n  .logo-icon {\n    width: 40px; height: 40px;\n    background: var(--accent);\n    border-radius: 10px;\n    display: flex; align-items: center; justify-content: center;\n    font-size: 20px;\n  }\n  .logo-text h1 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.3px; }\n  .logo-text p { font-size: 0.72rem; opacity: 0.75; letter-spacing: 0.5px; text-transform: uppercase; }\n  .header-badge {\n    background: rgba(255,255,255,0.15);\n    border: 1px solid rgba(255,255,255,0.25);\n    border-radius: 20px;\n    padding: 6px 16px;\n    font-size: 0.78rem;\n    font-weight: 500;\n  }\n\n  \/* \u2500\u2500 NAV TABS \u2500\u2500 *\/\n  nav {\n    background: var(--card);\n    border-bottom: 1px solid var(--border);\n    padding: 0 32px;\n    display: flex;\n    gap: 4px;\n    box-shadow: var(--shadow);\n  }\n  .tab-btn {\n    padding: 16px 20px;\n    border: none;\n    background: transp\u0001rent;\n    cursor: pointer;\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: var(--text-muted);\n    border-bottom: 3px solid transparent;\n    transition: all 0.2s;\n    display: flex; align-items: center; gap: 8px;\n    white-space: nowrap;\n  }\n  .tab-btn:hover { color: var(--primary); background: rgba(26,60,94,0.04); }\n  .tab-btn.active { color: var(--primary); border-bottom-color: var(--accent); font-weight: 600; }\n  .tab-icon { font-size: 1.1rem; }\n\n  \/* \u2500\u2500 MAIN \u2500\u2500 *\/\n  main { padding: 32px; max-width: 1200px; margin: 0 auto; }\n  .tab-panel { display: none; }\n  .tab-panel.active { display: block; }\n\n  \/* \u2500\u2500 CARDS \u2500\u2500 *\/\n  .card {\n    background: var(--card);\n    border-radius: var(--radius);\n    box-shadow: var(--sh\u0001dow);\n    border: 1px solid var(--border);\n    padding: 28px;\n    margin-bottom: 24px;\n  }\n  .card-header {\n    display: flex; align-items: center; gap: 12px;\n    margin-bottom: 24px;\n    padding-bottom: 16px;\n    border-bottom: 1px solid var(--border);\n  }\n  .card-icon {\n    width: 42px; height: 42px;\n    border-radius: 10px;\n    display: flex; align-items: center; justi\u0006y-content: center;\n    font-size: 1.3rem;\n    flex-shrink: 0;\n  }\n  .card-icon.blue { background: #e8f0fb; }\n  .card-icon.gold { background: #fef3dc; }\n  .card-icon.green { background: #e2f4ec; }\n  .card-icon.purple { background: #f0eafb; }\n  .card-header h2 { font-size: 1.1rem; font-weight: 700; color: var(--primary); }\n  .card-header p { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }\n\n  \/* \u2500\u2500 FORM ELEMENTS \u2500\u2500 *\/\n  .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }\n  .input-wrap { position: relative; }\n  .input-prefix, .input-suffix {\n    position: absolute; top: 50%; transform: translateY(-50%);\n    color: var(--text-muted); font-size: 0.9rem; font-weight: 600;\n    pointer-events: none;\n  }\n  .input-prefix { left: 12px; }\n  .input-suffix { right: 12px; }\n  input[type=\"number\"], input[type=\"text\"], select {\n    width: 100%; padding: 10px 14px;\n    border: 1.5px solid var(--border);\n    border-radius: 8px;\n    font-size: 0.95rem;\n    background: #fafcff;\n    color: var(--text);\n    transition: border-color 0.2s, box-shadow 0.2s;\n    outline: none;\n  }\n  input[type=\"number\"]:focus, input[type=\"text\"]:focus, select:focus {\n    border-color: var(--primary-light);\n    box-shadow: 0 0 0 3px rgba(42,90,142,0.12);\n    background: white;\n  }\n  .has-prefix input { padding-left: 28px; }\n  .has-suffix input { padding-right: 32px; }\n\n  \/* range slider *\/\n  input[type=\"range\"] {\n    width: 100%; accent-color: var(--primary);\n    height: 6px; border-radius: 3px;\n    border: none; background: transparent; padding: 0;\n  }\n  .range-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }\n\n  \/* \u2500\u2500 BUTTONS \u2500\u2500 *\/\n  .btn {\n    padding: 11px 24px;\n    border-radius: 8px;\n    border: none;\n    font-size: 0.875rem;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s;\n    display: inline-flex; align-items: center; gap: 8px;\n  }\n  .btn-primary {\n    background: var(--primary);\n    color: white;\n  }\n  .btn-primary:hover { background: var(--primary-light); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,60,94,0.25); }\n  .btn-accent {\n    background: var(--accent);\n    color: white;\n  }\n  .btn-accent:hover { background: var(--accent-light); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(232,160,32,0.3); }\n  .btn-outline {\n    background: transparent;\n    color: var(--primary);\n    border: 1.5px solid var(--primary);\n  }\n  .btn-outline:hover { background: var(--primary); color: white; }\n  .btn-danger {\n    background: transparent;\n    color: var(--danger);\n    border: 1.5px solid var(--danger);\n    padding: 6px 12px;\n    font-size: 0.78rem;\n  }\n  .btn-danger:hover { background: var(--danger); color: white; }\n  .btn-sm { padding: 7px 14px; font-size: 0.8rem; }\n\n  \/* \u2500\u2500 RESULTS \u2500\u2500 *\/\n  .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 24px; }\n  .result-card {\n    background: linear-gradient(135deg, #f7faff 0%, #eef4ff 100%);\n    border: 1px solid #c8d8f0;\n    border-radius: 10px;\n    padding: 18px;\n    text-align: center;\n  }\n  .result-card.highlight {\n    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);\n    border-color: var(--primary);\n    color: white;\n  }\n  .result-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; }\n  .result-card.highlight .result-label { color: rgba(255,255,255,0.75); }\n  .result-value { font-size: 1.5rem; font-weight: 800; color: var(--primary); }\n  .result-card.highlight .result-value { color: white; }\n  .result-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }\n  .result-card.highlight .result-sub { color: rgba(255,255,255,0.65); }\n\n  \/* \u2500\u2500 CHART \u2500\u2500 *\/\n  .chart-wrap { position: relative; height: 280px; margin-top: 24px; }\n\n  \/* \u2500\u2500 COMPARISON \u2500\u2500 *\/\n  .properties-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 20px; }\n  .property-card {\n    background: #fafcff;\n    border: 1.5px solid var(--border);\n    border-radius: 10px;\n    padding: 20px;\n    position: relative;\n  }\n  .property-card .remove-btn { position: absolute; top: 10px; right: 10px; }\n  .property-card h3 { font-size: 0.95rem; font-weight: 700; color: var(--primary); margin-bottom: 14px; padding-right: 40px; }\n  .prop-field { margin-bottom: 10px; }\n  .compare-table { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 0.85rem; }\n  .compare-table th {\n    background: var(--primary);\n    color: white;\n    padding: 10px 14px;\n    text-align: left;\n    font-weight: 600;\n  }\n  .compare-table th:first-child { border-radius: 8px 0 0 0; }\n  .compare-table th:last-child { border-radius: 0 8px 0 0; }\n  .compare-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }\n  .compare-table tr:nth-child(even) td { background: #f5f8fc; }\n  .compare-table tr:hover td { background: #edf3fb; }\n  .best { color: var(--success); font-weight: 700; }\n  .worst { color: var(--danger); }\n  .compare-table .row-label { font-weight: 600; color: var(--text-muted); }\n\n  \/* \u2500\u2500 ROI \u2500\u2500 *\/\n  .roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }\n  @media (max-width: 700px) { .roi-grid { grid-template-columns: 1fr; } }\n  .metric-badge {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 14px 18px;\n    border-radius: 10px;\n    border: 1px solid var(--border);\n    margin-bottom: 10px;\n  }\n  .metric-badge.green { background: #e9f8f0; border-color: #b8e8cc; }\n  .metric-badge.blue { background: #e8f0fb; border-color: #b8d0f0; }\n  .metric-badge.gold { background: #fef3dc; border-color: #f5d89a; }\n  .metric-badge.purple { background: #f3eefb; border-color: #d4bef0; }\n  .metric-name { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }\n  .metric-val { font-size: 1.4rem; font-weight: 800; }\n  .metric-badge.green .metric-val { color: var(--success); }\n  .metric-badge.blue .metric-val { color: var(--primary); }\n  .metric-badge.gold .metric-val { color: #b07010; }\n  .metric-badge.purple .metric-val { color: #7040b0; }\n\n  \/* \u2500\u2500 MARKET \u2500\u2500 *\/\n  .market-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 24px; }\n  .stat-box {\n    background: var(--card);\n    border: 1px solid var(--border);\n    border-radius: 10px;\n    padding: 16px;\n    text-align: center;\n    box-shadow: var(--shadow);\n  }\n  .stat-box .stat-label { font-size: 0.72rem; color: var(--text-muted); font-wei\u0007ht: 600; text-transform: uppercase; letter-spacing: 0.4px; }\n  .stat-box .stat-val { font-size: 1.5rem; font-weight: 800; color: var(--primary); margin: 4px 0; }\n  .stat-box .stat-change { font-size: 0.75rem; font-weight: 600; }\n  .up { color: var(--success); } .down { color: var(--danger); }\n  .charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }\n  @m\u0005dia (max-width: 700px) { .charts-row { grid-template-columns: 1fr; } }\n\n  \/* \u2500\u2500 PAGE HEADER \u2500\u2500 *\/\n  .page-header { margin-bottom: 28px; }\n  .page-header h2 { font-size: 1.5rem; font-weight: 800; color: var(--primary); }\n  .page-header p { color: var(--text-muted); margin-top: 4px; font-size: 0.9rem; }\n\n  \/* \u2500\u2500 AMORTIZATION TABLE \u2500\u2500 *\/\n  .amort-wrap { max-height: 260px; overflow-y: auto; margin-top: 20px; border-radius: 8px; border: 1px solid var(--border); }\n  .amort-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }\n  .amort-table th { background: var(--primary); color: white; padding: 8px 12px; position: sticky; top: 0; }\n  .amort-table td { padding: 7px 12px; border-bottom: 1px solid #edf0f5; text-align: right; }\n  .amort-table td:first-child { text-align: left; font-weight: 600; }\n  .amort-table tr:nth-child(even) td { background: #f7faff; }\n\n  \/* \u2500\u2500 DIVIDER \u2500\u2500 *\/\n  .divider { height: 1px; background: var(--border); margin: 24px 0; }\n\n  \/* \u2500\u2500 TOOLTIP \u2500\u2500 *\/\n  .tip {\n    display: inline-flex; align-items: center; justify-content: center;\n    width: 16px; h\u0005ight: 16px; border-radius: 50%;\n    background: var(--border); color: var(--text-muted);\n    font-size: 0.65rem; font-weight: 800; cursor: help;\n    margin-left: 4px;\n  }\n\n  \/* \u2500\u2500 NEIGHBORHOOD TABLE \u2500\u2500 *\/\n  .neighborhood-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 8px; }\n  .neighborhood-table th { background: #f0f4f8; color: var(--text-muted); padding: 8px 12px; text-align: left; font-weight: 600; }\n  .neighborhood-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }\n  .neighborhood-table tr:hover td { background: #f7faff; }\n  .score-bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--primary); vertical-align: middle; margin-right: 6px; }\n\n  \/* \u2500\u2500 EMPTY STATE \u2500\u2500 *\/\n  .empty { text-align: center; padding: 40px 20px; color: var(--text-muted); }\n  .empty .empty-icon { font-size: 3rem; margin-bottom: 12px; }\n  .empty h3 { font-weight: 700; color: var(--primary); margin-bottom: 6px; }\n  .empty p { font-size: 0.85rem; }\n\n  \/* scrollbar *\/\n  ::-webkit-scrollbar { width: 6px; height: 6px; }\n  ::-webkit-scrollbar-track { background: #f0f4f8; }\n  ::-webkit-scrollbar-thumb { background: #b0c4d8; border-radius: 3px; }\n\n  .actions-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 20px; }\n  .section-title { font-size: 0.9rem; font-weight: 700; color: var(--primary); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }\n\n  \/* \u2500\u2500 DASHBOARD \u2500\u2500 *\/\n  .db-action-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }\n  .db-action-bar-label { font-size: 0.9rem; font-weight: 700; color: var(--primary); }\n  .db-empty { text-align: center; padding: 28px 16px; color: var(--text-muted); font-size: 0.85rem; }\n  .db-empty .db-empty-icon { font-size: 2.2rem; margin-bottom: 8px; }\n  .status-pill { padding: 3px 10px; border-radius: 20px; font-size: 0.73rem; font-weight: 700; display: inline-block; }\n  .note-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }\n  .note-row:last-child { border-bottom: none; }\n  .note-text { flex: 1; font-size: 0.88rem; }\n  .note-date { font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; }\n  .add-form { display: none; margin-top: 16px; background: #f7faff; border: 1px solid var(--border); border-radius: 8px; padding: 18px; }\n  .db-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin-bottom: 20px; }\n  .db-stat { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; text-align: center; }\n  .db-stat-val { font-size: 1.8rem; font-weight: 800; color: var(--primary); }\n  .db-stat-lab\u0005l { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; }\n\n  \/* \u2500\u2500 PRINT STYLES \u2500\u2500 *\/\n  @media print {\n    header, nav, .db-action-bar, .btn, .add-form,\n    #tab-mortgage, #tab-compare, #tab-roi, #tab-market { display: none !important; }\n    #tab-dashboard { display: block !important; }\n    body { background: white; font-size: 12px; }\n    .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; margin-bottom: 16px; }\n    .page-header h2 { font-size: 1.4rem; }\n    main { padding: 16px; }\n    .compare-table th { background: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }\n  }\n\n    <\/style>\n    <div id=\"ilotus-calc-wrap\">\n<!-- HEADER -->\n<header>\n  <div class=\"logo\">\n    <div class=\"logo-icon\">\ud83c\udfe0<\/div>\n    <div class=\"logo-text\">\n      <h1>Real Estate Interactive Tools<\/h1>\n    <\/div>\n  <\/div>\n  <div class=\"header-badge\" id=\"headerBadge\">iLotusRealty.com<\/div>\n<\/header>\n\n<!-- NAV TABS -->\n<nav>\n  <button class=\"tab-btn active\" onclick=\"switchTab('market')\">\n    <span class=\"tab-icon\">\ud83d\uddfa\ufe0f<\/span> Market Overview\n  <\/button>\n  <button class=\"tab-btn\" onclick=\"switchTab('compare')\">\n    <span class=\"tab-icon\">\u2696\ufe0f<\/span> Property Comparison\n  <\/button>\n  <button class=\"tab-btn\" onclick=\"switchTab('mortgage')\">\n    <span class=\"tab-icon\">\ud83c\udfe6<\/span> Mortgage Calculator\n  <\/button>\n  <button class=\"tab-btn\" onclick=\"switchTab('roi')\">\n    <span class=\"tab-icon\">\ud83d\udcc8<\/span> ROI Analysis\n  <\/button>\n  <button class=\"tab-btn\" onclick=\"switchTab('dashboard')\" id=\"dashTabBtn\">\n    <span class=\"tab-icon\">\ud83d\uddc2\ufe0f<\/span> My Dashboard\n  <\/button>\n<\/nav>\n\n<main>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     TAB 1: MORTGAGE CALCULATOR\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div id=\"tab-mortgage\" class=\"tab-panel\">\n  <div class=\"page-header\">\n    <h2>Mortgage Calculator<\/h2>\n    <p>Estimate monthly payments, total costs, and full amortization schedule<\/p>\n  <\/div>\n\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <div class=\"card-icon blue\">\ud83c\udfe6<\/div>\n      <div>\n        <h2>Loan Parameters<\/h2>\n        <p>Enter property and loan details to calculate payments<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"form-grid\">\n      <div class=\"form-group\">\n        <label>Property Price<\/label>\n        <div class=\"input-wrap has-prefix\">\n          <span class=\"input-prefix\">$<\/span>\n          <input type=\"number\" id=\"propPrice\" value=\"450000\" min=\"0\" step=\"1000\" oninput=\"calcMortgage()\">\n        <\/div>\n      <\/div>\n      <div class=\"form-group\">\n        <label>Down Payment<\/label>\n        <div class=\"input-wrap has-prefix\">\n          <span class=\"input-prefix\">$<\/span>\n          <input type=\"number\" id=\"downPayment\" value=\"90000\" min=\"0\" step=\"1000\" oninput=\"calcMortgage()\">\n        <\/div>\n      <\/div>\n      <div class=\"form-group\">\n        <label>Annual Interest Rate<\/label>\n        <div class=\"input-wrap has-suffix\">\n          <input type=\"number\" id=\"interestRate\" value=\"6.75\" min=\"0\" max=\"30\" step=\"0.01\" oninput=\"calcMortgage()\">\n          <span class=\"input-suffix\">%<\/span>\n        <\/div>\n      <\/div>\n      <div class=\"form-group\">\n        <label>Loan Term<\/label>\n        <select id=\"loanTerm\" onchange=\"calcMortgage()\">\n          <option value=\"30\" selected>30 Years<\/option>\n          <option value=\"20\">20 Years<\/option>\n          <option value=\"15\">15 Years<\/option>\n          <option value=\"10\">10 Years<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"form-group\">\n        <label>Property Tax (Annual)<\/label>\n        <div class=\"input-wrap has-prefix\">\n          <span class=\"input-prefix\">$<\/span>\n          <input type=\"number\" id=\"propTax\" value=\"5400\" min=\"0\" step=\"100\" oninput=\"calcMortgage()\">\n        <\/div>\n      <\/div>\n      <div class=\"form-group\">\n        <label>Home Insurance (Annual)<\/label>\n        <div class=\"input-wrap has-prefix\">\n          <span class=\"input-prefix\">$<\/span>\n          <input type=\"number\" id=\"homeInsurance\" value=\"1800\" min=\"0\" step=\"100\" oninput=\"calcMortgage()\">\n        <\/div>\n      <\/div>\n      <div class=\"form-group\">\n        <label>HOA Fee (Monthly)<\/label>\n        <div class=\"input-wrap has-prefix\">\n          <span class=\"input-prefix\">$<\/span>\n          <input type=\"number\" id=\"hoaFee\" value=\"0\" min=\"0\" step=\"10\" oninput=\"calcMortgage()\">\n        <\/div>\n      <\/div>\n      <div class=\"form-group\">\n     0  <label>Other Fee (Monthly)<\/label>\n        <div class=\"input-wrap has-prefix\">\n          <span class=\"input-prefix\">$<\/span>\n          <input type=\"number\" id=\"otherFee\" value=\"0\" min=\"0\" step=\"10\" oninput=\"calcMortgage()\">\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"results-grid\" id=\"mortgageResults\">\n      <!-- filled by JS -->\n    <\/div>\n    <div style=\"margin-top:18px\">\n      <button class=\"btn btn-accent btn-sm\" onclick=\"saveMortgageCalc()\">\ud83d\uddc2\ufe0f Save to Dashboard<\/button>\n    <\/div>\n  <\/div>\n\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <div class=\"card-icon gold\">\ud83d\udcca<\/div>\n      <div>\n        <h2>Payment Breakdown &amp; Amortization<\/h2>\n        <p>Visual breakdown of principal vs. interest over the loan term<\/p>\n      <\/div>\n    <\/div>\n    <div class=\"charts-row\">\n      <div>\n        <div class=\"section-title\">Payment Composition<\/div>\n        <div class=\"chart-wrap\" style=\"height:240px\"><canvas id=\"mortgagePieChart\"><\/canvas><\/div>\n      <\/div>\n      <div>\n        <div class=\"section-title\">Principal vs. Interest Over Time<\/div>\n        <div class=\"chart-wrap\" style=\"height:240px\"><canvas id=\"mortgageLineChart\"><\/canvas><\/div>\n      <\/div>\n    <\/div>\n    <div class=\"divider\"><\/div>\n    <div class=\"section-title\">Annual Amortization Schedule<\/div>\n    <div class=\"amort-wrap\">\n      <table class=\"amort-table\" id=\"amortTable\">\n        <thead><tr>\n          <th>Year<\/th><th>Principal Paid<\/th><th>Interest Paid<\/th><th>Total Payment<\/th><th>Balance Remaining<\/th>\n        <\/tr><\/thead>\n        <tbody id=\"amortBody\"><\/tbody>\n      <\/table>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     TAB 2: PROPERTY COMPARISON\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div id=\"tab-compare\" class=\"tab-panel\">\n  <div class=\"page-header\">\n    <h2>Property Comparison<\/h2>\n    <p>Add up to 4 properties and compare side-by-side across key metrics<\/p>\n  <\/div>\n\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <div class=\"card-icon blue\">\u2696\ufe0f<\/div>\n      <div><h2>Add Properties<\/h2><p>Enter details for each property you want to compare<\/p><\/div>\n    <\/div>\n\n    <div class=\"properties-row\" id=\"propertiesRow\">\n      <!-- property cards added by JS -->\n    <\/div>\n\n    <div class=\"actions-bar\">\n      <button class=\"btn btn-primary\" onclick=\"addProperty()\" id=\"addPropBtn\">\n        \u2795 Add Property\n      <\/button>\n      <button class=\"btn btn-accent\" onclick=\"renderComparison()\">\n        \u2696\ufe0f Compare Properties\n      <\/button>\n    <\/div>\n  <\/div>\n\n  <div class=\"card\" id=\"comparisonCard\" style=\"display:none\">\n    <div class=\"card-header\">\n      <div class=\"card-icon green\">\ud83d\udccb<\/div>\n      <div><h2>Comparison Results<\/h2><p>Side-by-side metrics \u2014 best values highlighted in green<\/p><\/div>\n    <\/div>\n    <div style=\"overflow-x:auto\">\n      <table class=\"compare-table\" id=\"compareTable\"><\/table>\n    <\/div>\n    <div class=\"chart-wrap\" style=\"margin-top:28px; height:260px\"><canvas id=\"compareChart\"><\/canvas><\/div>\n  <\/div>\n<\/div>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     TAB 3: ROI \/ INVESTMENT ANALYSIS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div id=\"tab-roi\" class=\"tab-panel\">\n  <div class=\"page-header\">\n    <h2>ROI &amp; Investment Analysis<\/h2>\n    <p>Evaluate rental yield, cap rate, cash flow, and cash-on-cash return<\/p>\n  <\/div>\n\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <div class=\"card-icon purple\">\ud83c\udfe2<\/div>\n      <div><h2>Property &amp; Investment Inputs<\/h2><p>Enter purchase and rental income details<\/p><\/div>\n    <\/div>\n    <div class=\"roi-grid\">\n      <div>\n        <div class=\"section-title\">Purchase Details<\/div>\n        <div class=\"form-grid\" style=\"grid-template-columns:1fr 1fr\">\n          <div class=\"form-group\">\n            <label>Purchase Price<\/label>\n            <div class=\"input-wrap has-prefix\"><span class=\"input-prefix\">$<\/span>\n            <input type=\"number\" id=\"roi_purchase\" value=\"350000\" oninput=\"calcROI()\"><\/div>\n          <\/div>\n          <div class=\"form-group\">\n            <label>Down Payment<\/label>\n            <div class=\"input-wrap has-prefix\"><span class=\"input-prefix\">$<\/span>\n            <input type=\"number\" id=\"roi_down\" value=\"70000\" oninput=\"calcROI()\"><\/div>\n          <\/div>\n          <div class=\"form-group\">\n            <label>Closing Costs<\/label>\n            <div class=\"input-wrap has-prefix\"><span class=\"input-prefix\">$<\/span>\n            <input type=\"number\" id=\"roi_closing\" value=\"8000\" oninput=\"calcROI()\"><\/div>\n          <\/div>\n          <div class=\"form-group\">\n            <label>Renovation \/ Repairs<\/label>\n            <div class=\"input-wrap has-prefix\"><span class=\"input-prefix\">$<\/span>\n            <input type=\"number\" id=\"roi_rehab\" value=\"10000\" oninput=\"calcROI()\"><\/div>\n          <\/div>\n        <\/div>\n        <div class=\"divider\"><\/div>\n        <div class=\"section-title\">Financing<\/div>\n        <div class=\"form-grid\" style=\"grid-template-columns:1fr 1fr\">\n          <div class=\"form-group\">\n            <label>Interest Rate<\/label>\n            <div class=\"input-wrap has-suffix\"><input type=\"number\" id=\"roi_rate\" value=\"6.75\" step=\"0.01\" oninput=\"calcROI()\"><span class=\"input-suffix\">%<\/span><\/div>\n          <\/div>\n          <div class=\"form-group\">\n            <label>Loan Term (yrs)<\/label>\n            <input type=\"number\" id=\"roi_term\" value=\"30\" oninput=\"calcROI()\">\n          <\/div>\n        <\/div>\n      <\/div>\n      <div>\n        <div class=\"section-title\">Monthly Income &amp; Expenses<\/div>\n        <div class=\"form-grid\" style=\"grid-template-columns:1fr 1fr\">\n          <div class=\"form-group\">\n            <label>Monthly Rent<\/label>\n            <div class=\"input-wrap has-prefix\"><span class=\"input-prefix\">$<\/span>\n            <input type=\"number\" id=\"roi_rent\" value=\"2500\" oninput=\"calcROI()\"><\/div>\n          <\/div>\n          <div class=\"form-group\">\n            <label>Vacancy Rate<\/label>\n            <div class=\"input-wrap has-suffix\"><input type=\"number\" id=\"roi_vacancy\" value=\"5\" step=\"0.1\" oninput=\"calcROI()\"><span class=\"input-suffix\">%<\/span><\/div>\n          <\/div>\n          <div class=\"form-group\">\n            <label>Property Mgmt<\/label>\n            <div class=\"input-wrap has-suffix\"><input type=\"number\" id=\"roi_mgmt\" value=\"8\" step=\"0.1\" oninput=\"calcROI()\"><span class=\"input-suffix\">%<\/span><\/div>\n          <\/div>\n          <div class=\"form-group\">\n            <label>Maintenance (Mo.)<\/label>\n            <div class=\"input-wrap has-prefix\"><span class=\"input-prefix\">$<\/span>\n            <input type=\"number\" id=\"roi_maint\" value=\"200\" oninput=\"calcROI()\"><\/div>\n          <\/div>\n          <div class=\"form-group\">\n            <label>Insurance (Mo.)<\/label>\n            <div class=\"input-wrap has-prefix\"><span class=\"input-prefix\">$<\/span>\n            <input type=\"number\" id=\"roi_ins\" value=\"150\" oninput=\"calcROI()\"><\/div>\n          <\/div>\n          <div class=\"form-group\">\n            <label>Property Tax (Mo.)<\/label>\n            <div class=\"input-wrap has-prefix\"><span class=\"input-prefix\">$<\/span>\n            <input type=\"number\" id=\"roi_tax\" value=\"350\" oninput=\"calcROI()\"><\/div>\n          <\/div>\n          <div class=\"form-group\">\n            <label>HOA Fee (Mo.)<\/label>\n            <div class=\"input-wrap has-prefix\"><span class=\"input-prefix\">$<\/span>\n            <input type=\"number\" id=\"roi_hoa\" value=\"0\" oninput=\"calcROI()\"><\/div>\n          <\/div>\n          <div class=\"form-group\">\n            <label>Other Fee (Mo.)<\/label>\n            <div class=\"input-wrap has-prefix\"><span class=\"input-prefix\">$<\/span>\n            <input type=\"number\" id=\"roi_other\" value=\"0\" oninput=\"calcROI()\"><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"card\" id=\"roiResults\">\n    <div class=\"card-header\">\n      <div class=\"card-icon green\">\ud83d\udcc8<\/div>\n      <div><h2>Investment Metrics<\/h2><p>Key performance indicators for this investment property<\/p><\/div>\n    <\/div>\n    <div id=\"roiMetrics\"><\/div>\n    <div style=\"margin-top:14px\">\n      <button class=\"btn btn-accent btn-sm\" onclick=\"saveROICalc()\">\ud83d\uddc2\ufe0f Save to Dashboard<\/button>\n    <\/div>\n    <div class=\"charts-row\" style=\"margin-top:24px\">\n      <div>\n        <div class=\"section-title\">Monthly Cash Flow Breakdown<\/div>\n        <div class=\"chart-wrap\" style=\"height:240px\"><canvas id=\"roiBarChart\"><\/canvas><\/div>\n      <\/div>\n      <div>\n        <div class=\"section-title\">10-Year Equity Growth<\/div>\n        <div class=\"chart-wrap\" style=\"height:240px\"><canvas id=\"roiEquityChart\"><\/canvas><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     TAB 4: MARKET OVERVIEW\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div id=\"tab-market\" class=\"tab-panel active\">\n  <div class=\"page-header\">\n    <h2>Market Overview<\/h2>\n    <p>Current market trends, pricing data, and neighborhood insights<\/p>\n  <\/div>\n\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <div class=\"card-icon blue\">\ud83d\uddfa\ufe0f<\/div>\n      <div style=\"flex:1\">\n        <h2>Market Snapshot \u2014 Florida Markets<\/h2>\n        <p id=\"dataSourceNote\" style=\"margin-top:4px; font-size:0.78rem; color:var(--text-muted)\">\u23f3 Loading live data from FRED\u2026<\/p>\n      <\/div>\n    <\/div>\n\n    <div style=\"display:flex; gap:16px; align-items:center; margin-bottom:20px; flex-wrap:wrap;\">\n      <div class=\"form-group\" style=\"flex:1; min-width:180px\">\n        <label>Market \/ City<\/label>\n        <select id=\"marketSelect\" onchange=\"updateMarket()\">\n          <option value=\"orlando\">Orlando, FL<\/option>\n          <option value=\"tampa\">Tampa, FL (~85 mi)<\/option>\n          <option value=\"sarasota\">Sarasota, FL (~130 mi)<\/option>\n          <option value=\"jacksonville\">Jacksonville, FL (~140 mi)<\/option>\n          <option value=\"fortlauderdale\">Fort Lauderdale, FL (~200 mi)<\/option>\n          <option value=\"miami\">Miami, FL (~235 mi)<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"form-group\" style=\"flex:1; min-width:180px\">\n        <label>Property Type<\/label>\n        <select id=\"propTypeSelect\" onchange=\"updateMarket()\">\n          <option value=\"sfh\">Single Family Home<\/option>\n          <option value=\"condo\">Condo \/ Townhome<\/option>\n          <option value=\"multi\">Multi-Family<\/option>\n        <\/select>\n      <\/div>\n    <\/div>\n\n    <div class=\"market-stats\" id=\"marketStats\"><\/div>\n  <\/div>\n\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <div class=\"card-icon gold\">\ud83d\udcca<\/div>\n      <div><h2>Price &amp; Sales Trends<\/h2><p>12-month live data \u2014 Realtor.com via FRED<\/p><\/div>\n    <\/div>\n    <div class=\"charts-row\">\n      <div>\n        <div class=\"section-title\">Median Sale Price (12 Months)<\/div>\n        <div class=\"chart-wrap\" style=\"height:240px\"><canvas id=\"marketPriceChart\"><\/canvas><\/div>\n      <\/div>\n      <div>\n        <div class=\"section-title\">Days on Market &amp; Inventory<\/div>\n        <div class=\"chart-wrap\" style=\"height:240px\"><canvas id=\"marketDomChart\"><\/canvas><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <div class=\"card-icon green\">\ud83c\udfd8\ufe0f<\/div>\n      <div><h2>Neighborhood Comparison<\/h2><p>Top neighborhoods ranked by value, growth &amp; lifestyle scores<\/p><\/div>\n    <\/div>\n    <table class=\"neighborhood-table\" id=\"neighborhoodTable\">\n      <thead><tr>\n        <th>Neighborhood<\/th>\n        <th>Median Price<\/th>\n        <th>YoY Growth<\/th>\n        <th>Avg DOM<\/th>\n        <th>Walk Score<\/th>\n        <th>School Rating<\/th>\n        <th>Trend<\/th>\n      <\/tr><\/thead>\n      <tbody id=\"neighborhoodBody\"><\/tbody>\n    <\/table>\n  <\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     TAB 5: MY DASHBOARD\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div id=\"tab-dashboard\" class=\"tab-panel\">\n  <div class=\"page-header\">\n    <h2>My Dashboard<\/h2>\n    <p>Your personal real estate database \u2014 saved locally and exportable anytime<\/p>\n  <\/div>\n\n  <!-- Summary Stats -->\n  <div class=\"db-stats-row\" id=\"db_statsRow\"><\/div>\n\n  <!-- Profile + User Type -->\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <div class=\"card-icon blue\">\ud83d\udc64<\/div>\n      <div><h2>Profile<\/h2><p>Your account information<\/p><\/div>\n    <\/div>\n    <div style=\"display:flex; gap:16px; margin-bottom:20px; flex-wrap:wrap; align-items:flex-end;\">\n      <div class=\"form-group\" style=\"min-width:180px\">\n        <label>I am a\u2026<\/label>\n        <select id=\"db_userType\" onchange=\"onUserTypeChange()\">\n          <option value=\"buyer\">\ud83c\udfe0 Buyer<\/option>\n          <option value=\"seller\">\ud83c\udff7\ufe0f Seller<\/option>\n          <option value=\"agent\">\ud83e\udd1d Agent<\/option>\n        <\/select>\n      <\/div>\n    <\/div>\n    <div class=\"form-grid\" id=\"db_profileFields\"><\/div>\n    <div class=\"actions-bar\">\n      <button class=\"btn btn-primary\" onclick=\"saveProfile()\">\ud83d\udcbe Save Profile<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Action Bar -->\n  <div class=\"card\" style=\"padding:20px 28px\">\n    <div class=\"db-action-bar\">\n      <span class=\"db-action-bar-label\">\ud83d\udccb Dashboard Actions<\/span>\n      <div style=\"display:flex; gap:10px; flex-wrap:wrap;\">\n        <button class=\"btn btn-primary btn-sm\" onclick=\"printDashboard()\">\ud83d\udda8\ufe0f Print \/ PDF<\/button>\n        <button class=\"btn btn-outline btn-sm\" onclick=\"copyShareLink()\">\ud83d\udd17 Copy Share Link<\/button>\n        <button class=\"btn btn-outline btn-sm\" onclick=\"emailSummary()\">\ud83d\udce7 Email Summary<\/button>\n        <button class=\"btn btn-danger btn-sm\" onclick=\"clearDashboard()\" style=\"margin-left:8px\">\ud83d\uddd1\ufe0f Clear All<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Saved Properties -->\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <div class=\"card-icon gold\">\ud83c\udfe0<\/div>\n      <div><h2>Saved Properties<\/h2><p>Properties you've tracked or saved from the tools<\/p><\/div>\n    <\/div>\n    <div id=\"db_propertiesList\"><\/div>\n    <div style=\"margin-top:16px\">\n      <button class=\"btn btn-primary btn-sm\" onclick=\"toggleForm('db_addPropForm')\">\u2795 Add Property<\/button>\n    <\/div>\n    <div class=\"add-form\" id=\"db_addPropForm\">\n      <div class=\"form-grid\">\n        <div class=\"form-group\"><label>Address \/ Name<\/label><input type=\"text\" id=\"dp_address\" placeholder=\"123 Oak St, Orlando FL\"><\/div>\n        <div class=\"form-group\"><label>Price ($)<\/label><input type=\"number\" id=\"dp_price\" placeholder=\"450000\"><\/div>\n        <div class=\"form-group\"><label>Beds<\/label><input type=\"number\" id=\"dp_beds\" placeholder=\"3\"><\/div>\n        <div class=\"form-group\"><label>Baths<\/label><input type=\"number\" id=\"dp_baths\" placeholder=\"2\"><\/div>\n        <div class=\"form-group\"><label>Sq Ft<\/label><input type=\"number\" id=\"dp_sqft\" placeholder=\"1800\"><\/div>\n        <div class=\"form-group\"><label>Status<\/label>\n          <select id=\"dp_status\">\n            <option value=\"interested\">Interested<\/option>\n            <option value=\"viewing\">Viewing \/ Toured<\/option>\n            <option value=\"offer\">Offer Made<\/option>\n            <option value=\"under_contract\">Under Contract<\/option>\n            <option value=\"closed\">Closed \u2713<\/option>\n            <option value=\"passed\">Passed<\/option>\n          <\/select>\n        <\/div>\n        <div class=\"form-group\" style=\"grid-column:1\/-1\"><label>Notes<\/label>\n          <input type=\"text\" id=\"dp_notes\" placeholder=\"e.g. Great neighborhood, needs roof work\u2026\">\n        <\/div>\n      <\/div>\n      <div class=\"actions-bar\">\n        <button class=\"btn btn-primary btn-sm\" onclick=\"addProperty()\">Save Property<\/button>\n        <button class=\"btn btn-outline btn-sm\" onclick=\"toggleForm('db_addPropForm')\">Cancel<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Saved Calculations -->\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <div class=\"card-icon green\">\ud83e\uddee<\/div>\n      <div><h2>Saved Calculations<\/h2><p>Mortgage and ROI results saved from the tools<\/p><\/div>\n    <\/div>\n    <div id=\"db_calcList\"><\/div>\n  <\/div>\n\n  <!-- Contacts (Agents & Sellers) -->\n  <div class=\"card\" id=\"db_contactsCard\">\n    <div class=\"card-header\">\n      <div class=\"card-icon purple\">\ud83d\udc65<\/div>\n      <div><h2>Clients &amp; Contacts<\/h2><p>Your client and lead database<\/p><\/div>\n    <\/div>\n    <div id=\"db_contactsList\"><\/div>\n    <div style=\"margin-top:16px\">\n      <button class=\"btn btn-primary btn-sm\" onclick=\"toggleForm('db_addContactForm')\">\u2795 Add Contact<\/button>\n    <\/div>\n    <div class=\"add-form\" id=\"db_addContactForm\">\n      <div class=\"form-grid\">\n        <div class=\"form-group\"><label>Full Name<\/label><input type=\"text\" id=\"dc_name\" placeholder=\"Jane Smith\"><\/div>\n        <div class=\"form-group\"><label>Email<\/label><input type=\"text\" id=\"dc_email\" placeholder=\"jane@email.com\"><\/div>\n        <div class=\"form-group\"><label>Phone<\/label><input type=\"text\" id=\"dc_phone\" placeholder=\"(407) 000-0000\"><\/div>\n        <div class=\"form-group\"><label>Type<\/label>\n          <select id=\"dc_type\">\n            <option value=\"buyer\">Buyer<\/option>\n            <option value=\"seller\">Seller<\/option>\n            <option value=\"lead\">Lead<\/option>\n            <option value=\"referral\">Referral<\/option>\n            <option value=\"investor\">Investor<\/option>\n          <\/select>\n        <\/div>\n      \u0000 <div class=\"form-group\"><label>Budget ($)<\/label><input type=\"number\" id=\"dc_budget\" placeholder=\"400000\"><\/div>\n        <div class=\"form-group\"><label>Status<\/label>\n          <select id=\"dc_status\">\n            <option value=\"active\">\ud83d\udfe2 Active<\/option>\n            <option value=\"nurturing\">\ud83d\udfe1 Nurturing<\/option>\n            <option value=\"closed\">\u2705 Closed<\/option>\n            <option value=\"inactive\">\u26ab Inactive<\/option>\n          <\/select>\n        <\/div>\n        <div class=\"form-group\" style=\"grid-column:1\/-1\"><label>Notes<\/label>\n          <input type=\"text\" id=\"dc_notes\" placeholder=\"Notes about this client\u2026\">\n        <\/div>\n      <\/div>\n      <div class=\"actions-bar\">\n        <button class=\"btn btn-primary btn-sm\" onclick=\"addContact()\">Save Contact<\/button>\n        <button class=\"btn btn-outline btn-sm\" onclick=\"toggleForm('db_addContactForm')\">Cancel<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Notes & Activity Log -->\n  <div class=\"card\">\n    <div class=\"card-header\">\n      <div class=\"card-icon blue\">\ud83d\udcdd<\/div>\n      <div><h2>Notes &amp; Activity Log<\/h2><p>Timestamped notes and reminders<\/p><\/div>\n    <\/div>\n    <div style=\"display:flex; gap:10px; margin-bottom:16px;\">\n      <input type=\"text\" id=\"db_noteInput\" placeholder=\"Add a note or reminder\u2026\" style=\"flex:1\"\n        onkeydown=\"if(event.key==='Enter') addNote()\">\n      <button class=\"btn btn-primary btn-sm\" onclick=\"addNote()\">Add<\/button>\n    <\/div>\n    <div id=\"db_notesList\"><\/div>\n  <\/div>\n<\/div>\n\n<\/main>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     JAVASCRIPT\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n    <\/div>\n    <script>\n\n\/\/ \u2500\u2500\u2500 HELPERS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst fmt = (n) => new Intl.NumberFormat('en-US', {style:'currency', currency:'USD', minimumFractionDigits:0, maximumFractionDigits:0}).format(n);\nconst fmtD = (n) => new Intl.NumberFormat('en-US', {style:'currency', currency:'USD', minimumFractionDigits:2, maximumFractionDigits:2}).format(n);\nconst pct = (n) => n.toFixed(2) + '%';\nconst num = (id) => parseFloat(document.getElementById(id).value) || 0;\nconst months = [\"Apr'25\",\"May'25\",\"Jun'25\",\"Jul'25\",\"Aug'25\",\"Sep'25\",\"Oct'25\",\"Nov'25\",\"Dec'25\",\"Jan'26\",\"Feb'26\",\"Mar'26\"];\nconst colors = ['#1a3c5e','#e8a020','#2e8b57','#7040b0','#c0392b','#0899ad','#d45d00'];\n\nlet chartInstances = {};\n\nfunction destroyChart(id) {\n  if (chartInstances[id]) { chartInstances[id].destroy(); delete chartInstances[id]; }\n}\n\nfunction switchTab(tab) {\n  document.querySelectorAll('.tab-btn').forEach((b, i) => {\n    const tabs = ['market','compare','mortgage','roi','dashboard'];\n    b.classList.toggle('active', tabs[i] === tab);\n  });\n  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));\n  document.getElementById('tab-'+tab).classList.add('active');\n  if (tab === 'dashboard') refreshDashboard();\n}\n\n\/\/ \u2500\u2500\u2500 MORTGAGE CALCULATOR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet mortPie, mortLine;\n\nfunction calcMortgage() {\n  const price = num('propPrice');\n  const down  = num('downPayment');\n  const rate  = num('interestRate') \/ 100 \/ 12;\n  const term  = parseInt(document.getElementById('loanTerm').value);\n  const tax   = num('propTax') \/ 12;\n  const ins   = num('homeInsurance') \/ 12;\n  const hoa   = num('hoaFee');\n  const other = num('otherFee');\n\n  const principal = price - down;\n  const n = term * 12;\n\n  let monthlyPI = 0;\n  if (rate > 0) {\n    monthlyPI = principal * (rate * Math.pow(1+rate,n)) \/ (Math.pow(1+rate,n)-1);\n  } else {\n    monthlyPI = principal \/ n;\n  }\n\n  const totalMonthly = monthlyPI + tax + ins + hoa + other;\n  const totalPaid    = monthlyPI * n;\n  const totalInterest = totalPaid - principal;\n  const downPct      = down \/ price * 100;\n\n  \/\/ Results\n  document.getElementById('mortgageResults').innerHTML = `\n    <div class=\"result-card highlight\">\n      <div class=\"result-label\">Monthly Payment<\/div>\n      <div class=\"result-value\">${fmtD(totalMonthly)}<\/div>\n      <div class=\"result-sub\">PITI + HOA + Other Fees<\/div>\n    <\/div>\n    <div class=\"result-card\">\n      <div class=\"result-label\">P&amp;I Payment<\/div>\n      <div class=\"result-value\">${fmtD(monthlyPI)}<\/div>\n      <div class=\"result-sub\">Principal + Interest only<\/div>\n    <\/div>\n    <div class=\"result-card\">\n      <div class=\"result-label\">Loan Amount<\/div>\n      <div class=\"result-value\">${fmt(principal)}<\/div>\n      <div class=\"result-sub\">After ${pct(downPct)} down<\/div>\n    <\/div>\n    <div class=\"result-card\">\n      <div class=\"result-label\">Total Interest<\/div>\n      <div class=\"result-value\">${fmt(totalInterest)}<\/div>\n      <div class=\"result-sub\">Over ${term} years<\/div>\n    <\/div>\n    <div class=\"result-card\">\n      <div class=\"result-label\">Total Cost<\/div>\n      <div class=\"result-value\">${fmt(totalPaid + down)}<\/div>\n      <div class=\"result-sub\">Including down payment<\/div>\n    <\/div>\n  `;\n\n  \/\/ Pie chart\n  destroyChart('mortgagePieChart');\n  const pieCtx = document.getElementById('mortgagePieChart').getContext('2d');\n  chartInstances['mortgagePieChart'] = new Chart(pieCtx, {\n    type: 'doughnut',\n    data: {\n      labels: ['Principal', 'Interest', 'Property Tax', 'Insurance', 'HOA', 'Other'],\n      datasets: [{\n        data: [Math.round(principal), Math.round(totalInterest), Math.round(num('propTax')*term), Math.round(num('homeInsurance')*term), Math.round(hoa*n), Math.round(other*n)],\n        backgroundColor: ['#1a3c5e','#e8a020','#2e8b57','#7040b0','#d94f3d','#2ab5c8'],\n        borderWidth: 2, borderColor: '#fff'\n      }]\n    },\n    options: {\n      responsive: true, maintainAspectRatio: false,\n      plugins: { legend: { position: 'right', labels: { padding: 12, font: { size: 11 } } } },\n      cutout: '60%'\n    }\n  });\n\n  \/\/ Line chart \u2014 yearly principal vs interest\n  const years = []; const principalArr = []; const interestArr = [];\n  let bal = principal;\n  for (let y = 1; y <= term; y++) {\n    let yPrin = 0, yInt = 0;\n    for (let m = 0; m < 12; m++) {\n      const intPayment = bal * rate;\n      const prinPayment = monthlyPI - intPayment;\n      yYnt += intPayment; yPrin += prinPayment;\n      bal -= prinPayment;\n    }\n    years.push('Yr ' + y);\n    principalArr.push(Math.round(yPrin));\n    interestArr.push(Math.round(yInt));\n  }\n\n  destroyChart('mortgageLineChart');\n  const lineCtx = document.getElementById('mortgageLineChart').getContext('2d');\n  chartInstances['mortgageLineChart'] = new Chart(lineCtx, {\n    type: 'bar',\n    data: {\n      labels: years,\n      datasets: [\n        { label: 'Principal', data: principalArr, backgroundColor: '#1a3c5e', stack: 'a' },\n        { label: 'Interest',  data: interestArr,  backgroundColor: '#e8a02080', stack: 'a' }\n      ]\n    },\n    options: {\n      responsive: true, maintainAspectRatio: false,\n      plugins: { legend: { labels: { font: { size: 11 } } } },\n      scales: {\n        x: { stacked: true, ticks: { font: { size: 9 } } },\n        y: { stacked: true, ticks: { callback: v => '$' + (v\/1000).toFixed(0)+'k', font: { size: 10 } } }\n      }\n    }\n  });\n\n  \/\/ Amortization table (annual)\n  bal = principal;\n  let bodyHtml = '';\n  for (let y = 1; y <= term; y++) {\n    let yPrin = 0, yInt = 0, yTotal = 0;\n    for (let m = 0; m < 12; m++) {\n      const intPayment = bal * rate;\n      const prinPayment = monthlyPI - intPayment;\n      yInt += intPayment; yPrin += prinPayment;\n      yTotal += monthlyPI; bal -= prinPayment;\n    }\n    bodyHtml += `<tr>\n      <td>Year ${y}<\/td>\n      <td>${fmt(yPrin)}<\/td>\n      <td>${fmt(yInt)}<\/td>\n      <td>${fmt(yTotal)}<\/td>\n      <td>${fmt(Math.max(0, bal))}<\/td>\n    <\/tr>`;\n  }\n  document.getElementById('amortBody').innerHTML = bodyHtml;\n}\n\n\n\/\/ \u2500\u2500\u2500 PROPERTY COMPARISON \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet properties = [];\nlet propIdCounter = 0;\n\nfunction addProperty() {\n  if (properties.length >= 4) { alert('Maximum 4 properties for comparison.'); return; }\n  const id = ++propIdCounter;\n  properties.push({ id });\n  renderPropertyCards();\n  if (properties.length >= 4) document.getElementById('addPropBtn').disabled = true;\n}\n\nfunction removeProperty(id) {\n  properties = properties.filter(p => p.id !== id);\n  document.getElementById('comparisonCard').style.display = 'none';\n  document.getElementById('addPropBtn').disabled = false;\n  renderPropertyCards();\n}\n\nfunction renderPropertyCards() {\n  const row = document.getElementById('propertiesRow');\n  if (properties.length === 0) {\n    row.innerHTML = `<div class=\"empty\">\n      <div class=\"empty-icon\">\ud83c\udfe0<\/div>\n      <h3>No properties added<\/h3>\n      <p>Click \"Add Property\" to start comparing<\/p>\n    <\/div>`;\n    return;\n  }\n  row.innerHTML = properties.map(p => `\n    <div class=\"property-card\" id=\"prop-${p.id}\">\n      <button class=\"btn btn-danger remove-btn\" onclick=\"removeProperty(${p.id})\">\u2715<\/button>\n      <h3>\ud83c\udfe0 Property ${p.id}<\/h3>\n      <div class=\"prop-field form-group\">\n        <label>Name \/ Address<\/label>\n        <input type=\"text\" id=\"pname-${p.id}\" placeholder=\"e.g. 123 Oak St\" value=\"${p.name||''}\">\n      <\/div>\n      <div class=\"prop-field form-group\">\n        <label>List Price ($)<\/label>\n        <input type=\"number\" id=\"pprice-${p.id}\" placeholder=\"450000\" value=\"${p.price||''}\">\n      <\/div>\n      <div class=\"prop-field form-group\">\n        <label>Bedrooms<\/label>\n        <input type=\"number\" id=\"pbeds-${p.id}\" placeholder=\"3\" value=\"${p.beds||''}\">\n      <\/div>\n      <div class=\"prop-field form-group\">\n        <label>Bathrooms<\/label>\n        <input type=\"number\" id=\"pbaths-${p.id}\" placeholder=\"2\" value=\"${p.baths||''}\">\n      <\/div>\n      <div class=\"prop-field form-group\">\n        <label>Sq. Footage<\/label>\n        <input type=\"number\" id=\"psqft-${p.id}\" placeholder=\"1800\" value=\"${p.sqft||''}\">\n      <\/div>\n      <div class=\"prop-field form-group\">\n        <label>Year Built<\/label>\n        <input type=\"number\" id=\"pyear-${p.id}\" placeholder=\"2005\" value=\"${p.year||''}\">\n      <\/div>\n      <div class=\"prop-field form-group\">\n        <label>HOA \/ Month ($)<\/label>\n        <input type=\"number\" id=\"phoa-${p.id}\" placeholder=\"0\" value=\"${p.hoa||''}\">\n      <\/div>\n      <div class=\"prop-field form-group\">\n        <label>Est. Rent \/ Mo. ($)<\/label>\n        <input type=\"number\" id=\"prent-${p.id}\" placeholder=\"2200\" value=\"${p.rent||''}\">\n      <\/div>\n    <\/div>\n  `).join('');\n}\n\nfunction renderComparison() {\n  if (properties.length < 2) { alert('Add at least 2 properties to compare.'); return; }\n\n  \/\/ Collect values\n  const data = properties.map(p => ({\n    id: p.id,\n    name:  document.getElementById(`pname-${p.id}`)?.value  || `Property ${p.id}`,\n    price: parseFloat(document.getElementById(`pprice-${p.id}`)?.value) || 0,\n    beds:  parseFloat(document.getElementById(`pbeds-${p.id}`)?.value)  || 0,\n    baths: parseFloat(document.getElementById(`pbaths-${p.id}`)?.value) || 0,\n    sqft:  parseFloat(document.getElementById(`psqft-${p.id}`)?.value)  || 0,\n    year:  parseFloat(document.getElementById(`pyear-${p.id}`)?.value)  || 0,\n    hoa:   parseFloat(document.getElementById(`phoa-${p.id}`)?.value)   || 0,\n    rent:  parseFloat(document.getElementById(`prent-${p.id}`)?.value)  || 0,\n  }));\n\n  data.forEach(d => {\n    d.ppsf   = d.sqft  > 0 ? d.price \/ d.sqft : 0;\n    d.grYield = d.price > 0 && d.rent > 0 ? (d.rent * 12 \/ d.price * 100) : 0;\n    d.age    = d.year > 0 ? (2026 - d.year) : 0;\n  });\n\n  const rows = [\n    { label: 'List Price',         key: 'price',   fmt: v => fmt(v),           best: 'min' },\n    { label: 'Bedrooms',           key: 'beds',    fmt: v => v,                best: 'max' },\n    { label: 'Bathrooms',          key: 'baths',   fmt: v => v,                best: 'max' },\n    { label: 'Square Footage',     key: 'sqft',    fmt: v => v.toLocaleString()+' sqft', best: 'max' },\n    { label: 'Price \/ Sq Ft',      key: 'ppsf',    fmt: v => v > 0 ? '$'+v.toFixed(0) : '\u2014', best: 'min' },\n    { label: 'Year Built',         key: 'year',    fmt: v => v || '\u2014',         best: 'max' },\n    { label: 'HOA \/ Month',        key: 'hoa',     fmt: v => v > 0 ? fmt(v) : 'None', best: 'min' },\n    { label: 'Est. Monthly Rent',  key: 'rent',    fmt: v => v > 0 ? fmt(v) : '\u2014', best: 'max' },\n    { label: 'Gross Rental Yield', key: 'grYield', fmt: v => v > 0 ? pct(v) : '\u2014', best: 'max' },\n  ];\n\n  const headers = `<tr><th class=\"row-label\">Metric<\/th>${data.map(d => `<th>${d.name}<\/th>`).join('')}<\/tr>`;\n  const bodyRows = rows.map(row => {\n    const vals = data.map(d => d[row.key]);\n    const nonZero = vals.filter(v => v > 0);\n    const bestVal = nonZero.length > 0 ? (row.best === 'max' ? Math.max(...nonZero) : Math.min(...nonZero)) : null;\n    const tds = data.map(d => {\n      const v = d[row.key];\n      const isBest = v > 0 && v === bestVal;\n      return `<td class=\"${isBest ? 'best' : ''}\">${row.fmt(v)}${isBest ? ' \u2713' : ''}<\/td>`;\n    }).join('');\n    return `<tr><td class=\"row-label\">${row.label}<\/td>${tds}<\/tr>`;\n  }).join('');\n\n  document.getElementById('compareTable').innerHTML = headers + bodyRows;\n\n  \/\/ Bar chart\n  destroyChart('compareChart');\n  const ctx = document.getElementById('compareChart').getContext('2d');\n  chartInstances['compareChart'] = new Chart(ctx, {\n    type: 'bar',\n    data: {\n      labels: data.map(d => d.name),\n      datasets: [\n        { label: 'Price ($)', data: data.map(d => d.price), backgroundColor: '#1a3c5e', yAxisID: 'y1' },\n        { label: 'Sq Ft', data: data.map(d => d.sqft), backgroundColor: '#e8a020', yAxisID: 'y2' },\n        { label: 'Rent\/Mo ($)', data: data.map(d => d.rent), backgroundColor: '#2e8b57', yAxisID: 'y1' },\n      ]\n    },\n    options: {\n      responsive: true, maintainAspectRatio: false,\n      plugins: { legend: { labels: { font: { size: 11 } } } },\n      scales: {\n        y1: { type: 'linear', position: 'left', ticks: { callback: v => '$'+(v\/1000).toFixed(0)+'k' } },\n        y2: { type: 'linear', position: 'right', grid: { drawOnChartArea: false }, ticks: { callback: v => v+' sqft' } }\n      }\n    }\n  });\n\n  document.getElementById('comparisonCard').style.display = 'block';\n  document.getElementById('comparisonCard').scrollIntoView({ behavior: 'smooth', block: 'start' });\n}\n\n\n\/\/ \u2500\u2500\u2500 ROI CALCULATOR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction calcROI() {\n  const purchase   = num('roi_purchase');\n  const down       = num('roi_down');\n  const closing    = num('roi_closing');\n  const rehab      = num('roi_rehab');\n  const rateAnnual = num('roi_rate') \/ 100;\n  const termYrs    = num('roi_term');\n  const rent       = num('roi_rent');\n  const vacancy    = num('roi_vacancy') \/ 100;\n  const mgmt       = num('roi_mgmt') \/ 100;\n  const maint      = num('roi_maint');\n  const ins        = num('roi_ins');\n  const tax        = num('roi_tax');\n  const hoa        = num('roi_hoa');\n  const other      = num('roi_other');\n\n  const loanAmt  = purchase - down;\n  const rateM    = rateAnnual \/ 12;\n  const n        = termYrs * 12;\n  const mortgage = loanAmt > 0 && rateM > 0\n    ? loanAmt * (rateM * Math.pow(1+rateM,n)) \/ (Math.pow(1+rateM,n)-1) : 0;\n\n  const grossRent     = rent * (1 - vacancy);\n  const mgmtFee       = grossRent * mgmt;\n  const totalExp      = mortgage + mgmtFee + maint + ins + tax + hoa + other;\n  const cashFlow      = grossRent - totalExp;\n  const totalInvested = down + closing + rehab;\n  const noi           = (grossRent - mgmtFee - maint - ins - tax - hoa - other) * 12;\n  const capRate       = purchase > 0 ? (noi \/ purchase * 100) : 0;\n  const cocReturn     = totalInvested > 0 ? (cashFlow * 12 \/ totalInvested * 100) : 0;\n  const grossYield    = purchase > 0 ? (rent * 12 \/ purchase * 100) : 0;\n\n  document.getElementById('roiMetrics').innerHTML = `\n    <div style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:8px\">\n      <div class=\"metric-badge green\">\n        <div><div class=\"metric-name\">Monthly Cash Flow<\/div><div style=\"font-size:0.72rem;color:#60a080\">After all expenses<\/div><\/div>\n        <div class=\"metric-val\" style=\"color:${cashFlow>=0?'#2e8b57':'#c0392b'}\">${fmtD(cashFlow)}<\/div>\n      <\/div>\n      <div class=\"metric-badge blue\">\n        <div><div class=\"metric-name\">Cap Rate<\/div><div style=\"font-size:0.72rem;color:#8090a8\">NOI \/ Purchase Price<\/div><\/div>\n        <div class=\"metric-val\">${pct(capRate)}<\/div>\n      <\/div>\n      <div class=\"metric-badge gold\">\n        <div><div class=\"metric-name\">Cash-on-Cash Return<\/div><div style=\"font-size:0.72rem;color:#907030\">Annual \/ Total Invested<\/div><\/div>\n  2     <div class=\"metric-val\">${pct(cocReturn)}<\/div>\n      <\/div>\n      <div class=\"metric-badge purple\">\n        <div><div class=\"metric-name\">Gross Rental Yield<\/div><div style=\"font-size:0.72rem;color:#9060c0\">Annual Rent \/ Price<\/div><\/div>\n        <div class=\"metric-val\">${pct(grossYield)}<\/div>\n      <\/div>\n      <div class=\"metric-badge blue\">\n        <div><div class=\"metric-name\">Mortgage Payment<\/div><div style=\"font-size:0.72rem;color:#8090a8\">Monthly P&I<\/div><\/div>\n        <div class=\"metric-val\">${fmtD(mortgage)}<\/div>\n      <\/div>\n      <div class=\"metric-badge green\">\n        <div><div class=\"metric-name\">Total Cash Invested<\/div><div style=\"font-size:0.72rem;color:#60a080\">Down + Closing + Rehab<\/div><\/div>\n        <div class=\"metric-val\">${fmt(totalInvested)}<\/div>\n      <\/div>\n    <\/div>\n  `;\n  document.getElementById('roiMetrics').insertAdjacentHTML('afterend',\n    '<div style=\"margin-top:14px\"><button class=\"btn btn-accent btn-sm\" onclick=\"saveROICalc()\">\ud83d\uddc2\ufe0f Save to Dashboard<\/button><\/div>');\n\n  destroyChart('roiBarChart');\n  const bCtx = document.getElementById('roiBarChart').getContext('2d');\n  chartInstances['roiBarChart'] = new Chart(bCtx, {\n    type: 'bar',\n    data: {\n      labels: ['Gross Rent','Vacancy','Mortgage','Mgmt Fee','Maint','Insurance','Tax','HOA','Other'],\n      datasets: [{ label: 'Monthly ($)',\n        data: [rent, -(rent*vacancy), -mortgage, -mgmtFee, -maint, -ins, -tax, -hoa, -other],\n        backgroundColor: ['#2e8b57','#c0392b','#1a3c5e','#e8a020','#7040b0','#0899ad','#d45d00','#d94f3d','#2ab5c8'] }]\n    },\n    options: { responsive:true, maintainAspectRatio:false,\n      plugins:{legend:{sisplay:false}},\n      scales:{y:{ticks:{callback:v=>'$'+v}}} }\n  });\n\n  const equityData=[]; const labels10=[];\n  let bal = loanAmt;\n  for (let y=0; y<=10; y++) {\n    labels10.push('Year '+y);\n    const appreciation = purchase * Math.pow(1.04,y);\n    equityData.push(Math.round(appreciation - (y===0?loanAmt:bal) + (down+closing+rehab) - down));\n    if (y>0) { for (let m=0;m<12;m++) { const ip=bal*rateM; bal-=(mortgage-ip); } }\n  }\n  destroyChart('roiEquityChart');\n  const eCtx = document.getElementById('roiEquityChart').getContext('2d');\n  chartInstances['roiEquityChart'] = new Chart(eCtx, {\n    type: 'line',\n    data: { labels: labels10, datasets: [{\n      label:'Total Equity ($)', data:equityData,\n      borderColor:'#2e8b57', backgroundColor:'rgba(46,139,87,0.1)',\n      fill:true, tension:0.4, pointRadius:4, pointBackgroundColor:'#2e8b57'\n    }]},\n    options: { responsive:true, maintainAspectRatio:false,\n      plugins:{legend:{display:false}},\n      scales:{y:{ticks:{callback:v=>'$'+(v\/1000).toFixed(0)+'k'}}} }\n  });\n}\n\n\n\/\/ \u2500\u2500\u2500 MARKET OVERVIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst FRED_KEY = '40ac671c5aa45962d67b23936962c2ac';\n\nconst cityConfig = {\n  orlando:        { fips:'12095', county:'Orange County'      },\n  tampa:          { fips:'12057', county:'Hillsborough County' },\n  sarasota:       { fips:'12115', county:'Sarasota County'     },\n  jacksonville:   { fips:'12031', county:'Duval County'        },\n  fortlauderdale: { fips:'12011', county:'Broward County'      },\n  miami:          { fips:'12086', county:'Miami-Dade County'   },\n};\n\nconst marketData = {\n  orlando:        { medPrice:410000, yoy: 1.2, dom:54, inventory:3.5, sales:1100, pctList:98.2 },\n  tampa:          { medPrice:400000, yoy:-1.0, dom:47, inventory:4.0, sales: 950, pctList:97.5 },\n  sarasota:       { medPrice:485000, yoy: 3.3, dom:68, inventory:5.0, sales: 580, pctList:96.5 },\n  jacksonville:   { medPrice:315000, yoy: 0.5, dom:69, inventory:4.5, sales:1050, pctList:97.0 },\n  fortlauderdale: { medPrice:538000, yoy:-4.9, dom:98, inventory:8.7, sales: 620, pctList:95.0 },\n  miami:          { medPrice:574000, yoy:-2.3, dom:65, inventory:6.2, sales: 850, pctList:97.0 },\n};\n\nconst priceHistory = {\n  orlando:        [405000,403000,406000,408000,407000,404000,403000,405000,407000,408000,409000,410000],\n  tampa:          [410000,408000,407000,405000,403000,401000,400000,399000,400000,401000,400000,400000],\n  sarasota:       [469000,471000,473000,475000,477000,478000,480000,481000,483000,484000,485000,485000],\n  jacksonville:   [313000,312000,313000,314000,314000,313000,312000,312000,313000,314000,315000,315000],\n  fortlauderdale: [565000,558000,552000,548000,544000,541000,540000,538000,537000,537000,538000,538000],\n  miami:          [591000,587000,580000,577000,574000,572000,569000,566000,570000,572000,573000,574000],\n};\nconst domHistory = {\n  orlando:        [50,51,52,53,54,54,55,54,54,54,54,54],\n  tampa:          [42,43,44,45,46,47,47,47,47,47,47,47],\n  sarasota:       [58,60,62,63,65,66,67,67,68,68,68,68],\n  jacksonville:   [60,62,64,65,66,67,68,68,69,69,69,69],\n  fortlauderdale: [80,84,87,90,93,95,96,97,97,98,98,98],\n  miami:          [55,58,60,62,64,65,66,67,66,65,65,65],\n};\nconst invHistory = {\n  orlando:        [2.8,2.9,3.0,3.1,3.2,3.3,3.4,3.4,3.5,3.5,3.5,3.5],\n  tampa:          [3.1,3.2,3.4,3.5,3.6,3.7,3.8,3.9,3.9,4.0,4.0,4.0],\n  sarasota:       [3.8,4.0,4.2,4.4,4.6,4.7,4.8,4.9,4.9,5.0,5.0,5.0],\n  jacksonville:   [3.5,3.6,3.8,3.9,4.0,4.2,4.3,4.4,4.4,4.5,4.5,4.5],\n  fortlauderdale: [6.5,7.0,7.4,7.8,8.0,8.2,8.4,8.5,8.6,8.7,8.7,8.7],\n  miami:          [4.8,5.1,5.4,5.6,5.8,5.9,6.0,6.1,6.2,6.2,6.2,6.2],\n};\n\nconst neighborhoodData = {\n  orlando: [\n    {name:'Downtown Orlando', medPrice:385000,yoy:2.0,dom:48,walk:80,school:7},\n    {name:'Winter Park',      medPrice:620000,yoy:1.5,dom:52,walk:65,school:10},\n    {name:'Lake Nona',        medPrice:470000,yoy:3.5,dom:45,walk:42,school:9},\n    {name:'Dr. Phillips',     medPrice:540000,yoy:0.8,dom:56,walk:50,school:9},\n    {name:'Kissimmee',        medPrice:310000,yoy:1.0,dom:60,walk:52,school:7},\n  ],\n  tampa: [\n    {name:'South Tampa',      medPrice:560000,yoy:-0.5,dom:42,walk:62,school:8},\n    {name:'Hyde Park',        medPrice:720000,yoy:-1.2,dom:48,walk:78,school:8},\n    {name:'Seminole Heights', medPrice:380000,yoy:1.0, dom:44,walk:70,school:7},\n    {name:'Westchase',        medPrice:460000,yoy:-0.8,dom:50,walk:45,school:9},\n    {name:'Wesley Chapel',    medPrice:390000,yoy:0.2, dom:55,walk:32,school:9},\n  ],\n  sarasota: [\n    {name:'Downtown Sarasota',medPrice:550000,yoy:4.0,dom:60,walk:78,school:7},\n    {name:'Siesta Key',       medPrice:980000,yoy:2.5,dom:75,walk:48,school:7},\n    {name:'Palmer Ranch',     medPrice:460000,yoy:3.8,dom:62,walk:35,school:9},\n    {name:'Lakewood Ranch',   medPrice:520000,yoy:4.5,dom:58,walk:32,school:10},\n    {name:'North Port',       medPrice:340000,yoy:2.0,dom:72,walk:22,school:7},\n  ],\n  jacksonville: [\n    {name:'San Marco',         medPrice:380000,yoy:1.5, dom:58,walk:68,school:8},\n    {name:'Riverside \/ 5Pts',  medPrice:340000,yoy:2.0, dom:55,walk:75,school:7},\n    {name:'Ponte Vedra Beach', medPrice:720000,yoy:-0.5,dom:72,walk:30,school:10},\n    {name:'Mandarin',          medPrice:310000,yoy:0.8, dom:65,walk:28,school:8},\n    {name:'Nocatee',           medPrice:490000,yoy:1.2, dom:60,walk:35,school:10},\n  ],\n  fortlauderdale: [\n    {name:'Las Olas \/ Downtown',  medPrice:620000,yoy:-3.5,dom:88, walk:82,school:7},\n    {name:'Victoria Park',        medPrice:580000,yoy:-4.0,dom:92, walk:75,school:7},\n    {name:'Coral Ridge',          medPrice:670000,yoy:-5.0,dom:96, walk:60,school:8},\n    {name:'Lauderdale-by-Sea',    medPrice:540000,yoy:-6.0,dom:104,walk:58,school:7},\n    {name:'Weston',               medPrice:650000,yoy:-2.0,dom:82, walk:38,school:10},\n  ],\n  miami: [\n    {name:'Brickell',      medPrice:720000,yoy:-1.5,dom:58,walk:92,school:8},\n    {name:'Coral Gables',  medPrice:980000,yoy:0.8, dom:72,walk:74,school:9},\n    {name:'Wynwood',       medPrice:640000,yoy:-3.0,dom:62,walk:88,school:6},\n    {name:'Little Havana', medPrice:480000,yoy:1.2, dom:55,walk:82,school:6},\n    {name:'Doral',         medPrice:540000,yoy:-2.0,dom:68,walk:58,school:8},\n  ],\n};\n\nasync function fetchFRED(seriesId, limit=14) {\n  const url = `https:\/\/api.stlouisfed.org\/fred\/series\/observations?series_id=${seriesId}&api_key=${FRED_KEY}&file_type=json&sort_order=desc&limit=${limit}`;\n  const res = await fetch(url);\n  if (!res.ok) throw new Error(`HTTP ${res.status}`);\n  const json = await res.json();\n  return json.observations.filter(o=>o.value!=='.').reverse();\n}\n\nfunction renderMarketCharts(labels, priceArr, domArr, listingArr) {\n  destroyChart('marketPriceChart');\n  const mCtx = document.getElementById('marketPriceChart').getContext('2d');\n  chartInstances['marketPriceChart'] = new Chart(mCtx, {\n    type:'line',\n    data:{ labels, datasets:[{ label:'Median Listing Price', data:priceArr,\n      borderColor:'#1a3c5e', backgroundColor:'rgba(26,60,94,0.08)',\n      fill:true, tension:0.4, pointRadius:4, pointBackgroundColor:'#1a3c5e' }] },\n    options:{ responsive:true, maintainAspectRatio:false,\n      plugins:{legend:{display:false}},\n      scales:{y:{ticks:{callback:v=>'$'+(v\/1000).toFixed(0)+'k'}}} }\n  });\n\n  const invMax = Math.max(...listingArr)*1.4;\n  destroyChart('marketDomChart');\n  const dCtx = document.getElementById('marketDomChart').getContext('2d');\n  chartInstances['marketDomChart'] = new Chart(dCtx, {\n    type:'bar',\n    data:{ labels, datasets:[\n      {label:'Days on Market', data:domArr, backgroundColor:'#e8a020', yAxisID:'y1'},\n      {label:'Active Listings', data:listingArr, type:'line', borderColor:'#2e8b57',\n       backgroundColor:'rgba(46,139,87,0.1)', fill:false, tension:0.4, yAxisID:'y2', pointRadius:4}\n    ]},\n    options:{ responsive:true, maintainAspectRatio:false,\n      plugins:{legend:{labels:{font:{size:11}}}},\n      scales:{\n        y1:{position:'left', ticks:{callback:v=>v+' d'}},\n        y2:{position:'right', grid:{drawOnChartArea:false}, min:0, max:invMax,\n            ticks:{callback:v=>(v\/1000).toFixed(1)+'k'}} } }\n  });\n}\n\nfunction renderNeighborhoodTable(city) {\n  const hoods = neighborhoodData[city]||[];\n  document.getElementById('neighborhoodBody').innerHTML = hoods.map(h=>{\n    const trend = h.yoy>7?'\ud83d\udd25 Hot':h.yoy>4?'\ud83d\udcc8 Rising':h.yoy>2?'\u27a1\ufe0f Stable':'\u2744\ufe0f Cooling';\n    const scoreBar = (s,max) => `<span class=\"score-bar\" style=\"width:${s\/max*60}px\"><\/span>${s}\/${max}`;\n    return `<tr>\n      <td><strong>${h.name}<\/strong><\/td>\n      <td>${fmt(h.medPrice)}<\/td>\n      <td class=\"${h.yoy>=5?'up':h.yoy>=2?'':'down'}\"><strong>${h.yoy>=0?'+':''}${h.yoy}%<\/strong><\/td>\n      <td>${h.dom} days<\/td>\n      <td>${scoreBar(h.walk,100)}<\/td>\n      <td>${scoreBar(h.school,10)}<\/td>\n      <td>${trend}<\/td>\n    <\/tr>`;\n  }).join('');\n}\n\nasync function updateMarket() {\n  const city = document.getElementById('marketSelect').value;\n  const cfg  = cityConfig[city];\n  const d    = marketData[city];\n\n  document.getElementById('dataSourceNote').innerHTML = '\u23f3 Fetching live data from FRED\u2026';\n  document.getElementById('marketStats').innerHTML =\n    `<div style=\"grid-column:1\/-1;text-align:center;padding:28px 0;color:var(--text-muted);font-size:0.9rem\">\n       <span style=\"font-size:1.4rem\">\u23f3<\/span><br>Loading live FRED data for ${cfg.county}\u2026<\/div>`;\n\n  try {\n    const [priceObs,domObs,listObs] = await Promise.all([\n      fetchFRED(`MELIPRCOUNTY${cfg.fips}`,14),\n      fetchFRED(`MEDDAYONMAR${cfg.fips}`,14),\n      fetchFRED(`ACTLISCOU${cfg.fips}`,14),\n    ]);\n    const len     = Math.min(priceObs.length,domObs.length,listObs.length);\n    const prices  = priceObs.slice(-len).map(o=>parseFloat(o.value));\n    const doms    = domObs.slice(-len).map(o=>parseFloat(o.value));\n    const listings= listObs.slice(-len).map(o=>parseFloat(o.value));\n\n    const latestPrice = prices[prices.length-1];\n    const yoyPrice    = prices.length>=13 ? prices[prices.length-13] : null;\n    const yoyPct      = yoyPrice ? ((latestPrice-yoyPrice)\/yoyPrice*100).toFixed(1) : null;\n    const latestDom   = Math.round(doms[doms.length-1]);\n    const latestList  = Math.round(listings[listings.length-1]);\n    const latestDate  = priceObs[priceObs.length-1].date;\n\n    const chartLen    = Math.min(12,len);\n    const chartLabels = priceObs.slice(-chartLen).map(o=>{\n      const dt=new Date(o.date+'T00:00:00');\n      return dt.toLocaleDateString('en-US',{month:'short',year:'2-digit'});\n    });\n\n    document.getElementById('marketStats').innerHTML = `\n      <div class=\"stat-box\"><div class=\"stat-label\">Median Listing Price<\/div>\n        <div class=\"stat-val\">${fmt(latestPrice)}<\/div>\n        <div class=\"stat-change ${yoyPct&&parseFloat(yoyPct)>=0?'up':'down'}\">\n          ${yoyPct?(parseFloat(yoyPct)>=0?'\u25b2':'\u25bc')+' '+Math.abs(yoyPct)+'% YoY':'Live'}<\/div><\/div>\n      <div class=\"stat-box\"><div class=\"stat-label\">Avg Days on Market<\/div>\n        <div class=\"stat-val\">${latestDom}<\/div><div class=\"stat-change\" style=\"color:var(--text-muted)\">days<\/div><\/div>\n      <div class=\"stat-box\"><div class=\"stat-label\">Active Listings<\/div>\n        <div class=\"stat-val\">${latestList.toLocaleString()}<\/div>\n        <div class=\"stat-change\" style=\"color:var(--text-muted)\">total active<\/div><\/div>\n      <div class=\"stat-box\"><div class=\"stat-label\">Monthly Sales<\/div>\n        <div class=\"stat-val\">${d.sales.toLocaleString()}<\/div>\n        <div class=\"stat-change\" style=\"color:var(--text-muted)\">est. units\/mo<\/div><\/div>\n      <div class=\"stat-box\"><div class=\"stat-label\">Sale-to-List<\/div>\n        <div class=\"stat-val\">${d.pctList}%<\/div>\n        <div class=\"stat-change ${d.pctList>=100?'up':'down'}\">${d.pctList>=100?'Sellers market':'Buyers market'}<\/div><\/div>`;\n\n    document.getElementById('dataSourceNote').innerHTML =\n      `\ud83d\udfe2 Live \u2014 <a href=\"https:\/\/fred.stlouisfed.org\" target=\"_blank\" style=\"color:var(--primary)\">FRED<\/a> \/ Realtor.com &nbsp;\u00b7&nbsp; ${cfg.county} &nbsp;\u00b7&nbsp; Last obs: ${latestDate}`;\n\n    renderMarketCharts(chartLabels, prices.slice(-chartLen), doms.slice(-chartLen), listings.slice(-chartLen));\n\n  } catch(err) {\n    console.warn('FRED fallback:', err);\n    document.getElementById('dataSourceNote').innerHTML =\n      `Q1 2026 data \u2014 <a href=\"https:\/\/www.redfin.com\/state\/Florida\/housing-market\" target=\"_blank\" style=\"color:var(--primary)\">Redfin<\/a>, <a href=\"https:\/\/www.houzeo.com\/housing-market\/florida\" target=\"_blank\" style=\"color:var(--primary)\">Houzeo<\/a> &amp; <a href=\"https:\/\/www.floridarealtors.org\/newsroom\/market-data\" target=\"_blank\" style=\"color:var(--primary)\">Florida Realtors<\/a>`;\n    const months = [\"Apr'25\",\"May'25\",\"Jun'25\",\"Jul'25\",\"Aug'25\",\"Sep'25\",\"Oct'25\",\"Nov'25\",\"Dec'25\",\"Jan'26\",\"Feb'26\",\"Mar'26\"];\n    document.getElementById('marketStats').innerHTML = `\n      <div class=\"stat-box\"><div class=\"stat-label\">Median Listing Price<\/div>\n        <div class=\"stat-val\">${fmt(d.medPrice)}<\/div>\n        <div class=\"stat-change ${d.yoy>=0?'up':'down'}\">${d.yoy>=0?'\u25b2':'\u25bc'} ${Math.abs(d.yoy)}% YoY<\/div><\/div>\n      <div class=\"stat-box\"><div class=\"stat-label\">Avg Days on Market<\/div>\n        <div class=\"stat-val\">${d.dom}<\/div><div class=\"stat-change\" style=\"color:var(--text-muted)\">days<\/div><\/div>\n      <div class=\"stat-box\"><div class=\"stat-label\">Inventory<\/div>\n        <div class=\"stat-val\">${d.inventory}<\/div><div class=\"stat-change\" style=\"color:var(--text-muted)\">months supply<\/div><\/div>\n      <div class=\"stat-box\"><div class=\"stat-label\">Monthly Sales<\/div>\n        <div class=\"stat-val\">${d.sales.toLocaleString()}<\/div>\n        <div class=\"stat-change\" style=\"color:var(--text-muted)\">units sold<\/div><\/div>\n      <div class=\"stat-box\"><div class=\"stat-label\">Sale-to-List<\/div>\n        <div class=\"stat-val\">${d.pctList}%<\/div>\n        <div class=\"stat-change ${d.pctList>=100?'up':'down'}\">${d.pctList>=100?'Sellers market':'Buyers market'}<\/div><\/div>`;\n    renderMarketCharts(months, priceHistory[city], domHistory[city], invHistory[city]);\n  }\n  renderNeighborhoodTable(city);\n}\n\n\n\/\/ \u2500\u2500\u2500 DASHBOARD DATABASE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst DB_KEY = 'reit_db_v1';\nfunction defaultDB() {\n  return { userType:'agent', profile:{name:'',email:'',phone:'',company:'iLotus Realty',license:''},\n    savedProperties:[], savedCalculations:[], contacts:[], notes:[] };\n}\nlet db = (()=>{ try{return JSON.parse(localStorage.getItem(DB_KEY))||defaultDB();}catch(e){return defaultDB();} })();\nfunction persistDB(){ localStorage.setItem(DB_KEY,JSON.stringify(db)); }\nfunction saveDB(){ persistDB(); refreshDashboard(); }\n\nfunction renderProfile() {\n  const ut=db.userType, p=db.profile;\n  document.getElementById('db_userType').value = ut;\n  document.getElementById('db_profileFields').innerHTML = `\n    <div class=\"form-group\"><label>Full Name<\/label><input type=\"text\" id=\"dp_name\" value=\"${p.name||''}\"><\/div>\n    <div class=\"form-group\"><label>Email<\/label><input type=\"text\" id=\"dp_email\" value=\"${p.email||''}\"><\/div>\n    <div class=\"form-group\"><label>Phone<\/label><input type=\"text\" id=\"dp_phone\" value=\"${p.phone||''}\"><\/div>\n    ${ut==='agent'?`<div class=\"form-group\"><label>Company<\/label><input type=\"text\" id=\"dp_company\" value=\"${p.company||'iLotus Realty'}\"><\/div>`:''}\n    ${ut==='agent'?`<div class=\"form-group\"><label>License #<\/label><input type=\"text\" id=\"dp_license\" value=\"${p.license||''}\"><\/div>`:''}`;\n  document.getElementById('db_contactsCard').style.display = (ut==='agent'||ut==='seller')?'block':'none';\n  document.getElementById('headerBadge').textContent = p.name||'iLotusRealty.com';\n}\nfunction saveProfile() {\n  db.profile.name    = document.getElementById('dp_name')?.value.trim()||'';\n  db.profile.email   = document.getElementById('dp_email')?.value.trim()||'';\n  db.profile.phone   = document.getElementById('dp_phone')?.value.trim()||'';\n  db.profile.company = document.getElementById('dp_company')?.value.trim()||'';\n  db.profile.license = document.getElementById('dp_license')?.value.trim()||'';\n  if (db.userType !== 'agent') { db.profile.company = ''; db.profile.license = ''; }\n  db.userType        = document.getElementById('db_userType').value;\n  saveDB(); showToast('Profile saved \u2713');\n}\nfunction onUserTypeChange(){ db.userType=document.getElementById('db_userType').value; renderProfile(); }\n\nfunction renderStats() {\n  document.getElementById('db_statsRow').innerHTML = `\n    <div class=\"db-stat\"><div class=\"db-stat-val\">${db.savedProperties.length}<\/div><div class=\"db-stat-label\">Properties<\/div><\/div>\n    <div class=\"db-stat\"><div class=\"db-stat-val\">${db.savedCalculations.length}<\/div><div class=\"db-stat-label\">Calculations<\/div><\/div>\n    <div class=\"db-stat\"><div class=\"db-stat-val\">${db.contacts.length}<\/div><div class=\"db-stat-label\">Contacts<\/div><\/div>\n    <div class=\"db-stat\"><div class=\"db-stat-val\">${db.notes.length}<\/div><div class=\"db-stat-label\">Notes<\/div><\/div>`;\n}\n\nconst PROP_STATUS={interested:'Interested',viewing:'Viewing',offer:'Offer Made',under_contract:'Under Contract',closed:'Closed \u2713',passed:'Passed'};\nconst PROP_COLORS={interested:'#e8f0fb',viewing:'#fef3dc',offer:'#fff0e0',under_contract:'#e2f4ec',closed:'#d0f0e0',passed:'#f0f0f0'};\n\nfunction renderProperties() {\n  const el=document.getElementById('db_propertiesList');\n  if (!db.savedProperties.length) {\n    el.innerHTML='<div class=\"db-empty\"><div class=\"db-empty-icon\">\ud83c\udfe0<\/div>No saved properties yet.<\/div>'; return;\n  }\n  el.innerHTML=`<div style=\"overflow-x:auto\"><table class=\"compare-table\">\n    <thead><tr><th>Address<\/th><th>Price<\/th><th>Bed\/Bath<\/th><th>Sq Ft<\/th><th>Status<\/th><th>Notes<\/th><th>Date<\/th><th><\/th><\/tr><\/thead>\n    <tbody>${db.savedProperties.map((p,i)=>`<tr>\n      <td><strong>${p.address||'\u2014'}<\/strong><\/td><td>${p.price?fmt(p.price):'\u2014'}<\/td>\n      <td>${p.beds||'\u2014'}\/${p.baths||'\u2014'}<\/td><td>${p.sqft?Number(p.sqft).toLocaleString():'\u2014'}<\/td>\n      <td><span class=\"status-pill\" style=\"background:${PROP_COLORS[p.status]||'#f0f4f8'}\">${PROP_STATUS[p.status]||p.status}<\/span><\/td>\n      <td style=\"font-size:0.78rem;max-width:160px\">${p.notes||'\u2014'}<\/td>\n      <td style=\"font-size:0.72rem;color:var(--text-muted)\">${p.date||''}<\/td>\n      <td><button class=\"btn btn-danger\" onclick=\"deleteProperty(${i})\">\u2715<\/button><\/td>\n    <\/tr>`).join('')}<\/tbody><\/table><\/div>`;\n}\nfunction addProperty() {\n  const prop={address:document.getElementById('dp_address').value.trim(),\n    price:parseFloat(document.getElementById('dp_price').value)||0,\n    beds:parseFloat(document.getElementById('dp_beds').value)||0,\n    baths:parseFloat(document.getElementById('dp_baths').value)||0,\n    sqft:parseFloat(document.getElementById('dp_sqft').value)||0,\n    status:document.getElementById('dp_status').value,\n    notes:document.getElementById('dp_notes').value.trim(),\n    date:new Date().toLocaleDateString()};\n  if (!prop.address){showToast('Please enter an address.');return;}\n  db.savedProperties.push(prop); saveDB();\n  toggleForm('db_addPropForm');\n  ['dp_address','dp_price','dp_beds','dp_baths','dp_sqft','dp_notes'].forEach(id=>{const e=document.getElementById(id);if(e)e.value='';});\n  showToast('Property saved \u2713');\n}\nfunction deleteProperty(i){if(!confirm('Remove?'))return;db.savedProperties.splice(i,1);saveDB();}\n\nfunction renderCalculations() {\n  const el=document.getElementById('db_calcList');\n  if (!db.savedCalculations.length){\n    el.innerHTML='<div class=\"db-empty\"><div class=\"db-empty-icon\">\ud83e\uddee<\/div>No saved calculations yet \u2014 use the Mortgage or ROI tabs and click \"Save to Dashboard\".<\/div>'; return;\n  }\n  el.innerHTML=`<div style=\"overflow-x:auto\"><table class=\"compare-table\">\n    <thead><tr><th>Type<\/th><th>Label<\/th><th>Key Result<\/th><th>Details<\/th><th>Date<\/th><th><\/th><\/tr><\/thead>\n    <tbody>${db.savedCalculations.map((c,i)=>`<tr>\n      <td><span class=\"status-pill\" style=\"background:${c.type==='mortgage'?'#e8f0fb':'#e2f4ec'}\">${c.type==='mortgage'?'\ud83c\udfe6 Mortgage':'\ud83d\udcc8 ROI'}<\/span><\/td>\n      <td><strong>${c.label||'\u2014'}<\/strong><\/td>\n      <td style=\"font-weight:700;color:var(--primary)\">${c.keyResult||'\u2014'}<\/td>\n      <td style=\"font-size:0.78rem;color:var(--text-muted);max-width:220px\">${c.details||''}<\/td>\n      <td style=\"font-size:0.72rem;color:var(--text-muted)\">${c.date||''}<\/td>\n      <td><button class=\"btn btn-danger\" onclick=\"deleteCalc(${i})\">\u2715<\/button><\/td>\n    <\/tr>`).join('')}<\/tbody><\/table><\/div>`;\n}\nfunction deleteCalc(i){if(!confirm('Remove?'))return;db.savedCalculations.splice(i,1);saveDB();}\n\nfunction saveMortgageCalc(){\n  const price=num('propPrice'),down=num('downPayment'),rate=num('interestRate');\n  const term=document.getElementById('loanTerm').value;\n  const valEl=document.querySelector('#mortgageResults .result-card.highlight .result-value');\n  db.savedCalculations.push({type:'mortgage',label:`${fmt(price)} @ ${rate}%`,\n    keyResult:valEl?valEl.textContent+'\/mo':'\u2014',\n    details:`Price:${fmt(price)} | Down:${fmt(down)} | Rate:${rate}% | Term:${term}yr`,\n    date:new Date().toLocaleDateString()});\n  saveDB(); showToast('Mortgage saved to Dashboard \u2713');\n}\nfunction saveROICalc(){\n  const purchase=num('roi_purchase'),rent=num('roi_rent');\n  const cfEl=document.querySelector('#roiMetrics .metric-badge.green .metric-val');\n  db.savedCalculations.push({type:'roi',label:`${fmt(purchase)} investment`,\n    keyResult:`Cash Flow: ${cfEl?cfEl.textContent:'\u2014'}\/mo`,\n    details:`Purchase:${fmt(purchase)} | Rent:${fmt(rent)}\/mo | Rate:${num('roi_rate')}%`,\n    date:new Date().toLocaleDateString()});\n  saveDB(); showToast('ROI saved to Dashboard \u2713');\n}\n\nconst CONTACT_COLORS={buyer:'#e8f0fb',seller:'#fef3dc',lead:'#f3eefb',referral:'#e2f4ec',investor:'#fde8e8'};\nfunction renderContacts(){\n  const el=document.getElementById('db_contactsList');\n  if (!db.contacts.length){\n    el.innerHTML='<div class=\"db-empty\"><div class=\"db-empty-icon\">\ud83d\udc65<\/div>No contacts yet.<\/div>'; return;\n  }\n  el.innerHTML=`<div style=\"overflow-x:auto\"><table class=\"compare-table\">\n    <thead><tr><th>Name<\/th><th>Email<\/th><th>Phone<\/th><th>Type<\/th><th>Budget<\/th><th>Status<\/th><th>Notes<\/th><th>Added<\/th><th><\/th><\/tr><\/thead>\n    <tbody>${db.contacts.map((c,i)=>`<tr>\n      <td><strong>${c.name||'\u2014'}<\/strong><\/td>\n      <td style=\"font-size:0.82rem\">${c.email||'\u2014'}<\/td>\n      <td style=\"font-size:0.82rem\">${c.phone||'\u2014'}<\/td>\n      <td><span class=\"status-pill\" style=\"background:${CONTACT_COLORS[c.type]||'#f0f4f8'}\">${c.type||'\u2014'}<\/span><\/td>\n      <td>${c.budget?fmt(c.budget):'\u2014'}<\/td>\n      <td style=\"font-size:0.82rem\">${c.status||'\u2014'}<\/td>\n      <td style=\"font-size:0.78rem;max-width:160px\">${c.notes||'\u2014'}<\/td>\n      <td style=\"font-size:0.72rem;color:var(--text-muted)\">${c.date||''}<\/td>\n      <td><button class=\"btn btn-danger\" onclick=\"deleteContact(${i})\">\u2715<\/button><\/td>\n    <\/tr>`).join('')}<\/tbody><\/table><\/div>`;\n}\nfunction addContact(){\n  const c={name:document.getElementById('dc_name').value.trim(),\n    email:document.getElementById('dc_email').value.trim(),\n    phone:document.getElementById('dc_phone').value.trim(),\n    type:document.getElementById('dc_type').value,\n    budget:parseFloat(document.getElementById('dc_budget').value)||0,\n    status:document.getElementById('dc_status').value,\n    notes:document.getElementById('dc_notes').value.trim(),\n    date:new Date().toLocaleDateString()};\n  if(!c.name){showToast('Please enter a name.');return;}\n  db.contacts.push(c); saveDB();\n  toggleForm('db_addContactForm');\n  ['dc_name','dc_email','dc_phone','dc_budget','dc_notes'].forEach(id=>{const e=document.getElementById(id);if(e)e.value='';});\n  showToast('Contact saved \u2713');\n}\nfunction deleteContact(i){if(!confirm('Remove?'))return;db.contacts.splice(i,1);saveDB();}\n\nfunction renderNotes(){\n  const el=document.getElementById('db_notesList');\n  if (!db.notes.length){el.innerHTML='<div style=\"color:var(--text-muted);font-size:0.85rem;padding:8px 0\">No notes yet.<\/div>';return;}\n  el.innerHTML=db.notes.slice().reverse().map((n,ri)=>{\n    const i=db.notes.length-1-ri;\n    return `<div class=\"note-row\">\n      <div style=\"flex:1\"><div class=\"note-text\">${n.text}<\/div><div class=\"note-date\">${n.date}<\/div><\/div>\n      <button class=\"btn btn-danger\" style=\"padding:3px 8px;font-size:0.72rem\" onclick=\"deleteNote(${i})\">\u2715<\/button>\n    <\/div>`;\n  }).join('');\n}\nfunction addNote(){\n  const input=document.getElementById('db_noteInput');\n  const text=input.value.trim(); if(!text)return;\n  db.notes.push({text,date:new Date().toLocaleString()});\n  input.value=''; saveDB();\n}\nfunction deleteNote(i){db.notes.splice(i,1);saveDB();}\n\nfunction refreshDashboard(){ renderStats();renderProfile();renderProperties();renderCalculations();renderContacts();renderNotes(); }\n\nfunction toggleForm(id){ const el=document.getElementById(id); el.style.display=(el.style.display==='none'||el.style.display==='')?'block':'none'; }\n\nfunction showToast(msg){\n  let t=document.getElementById('db_toast');\n  if(!t){t=document.createElement('div');t.id='db_toast';\n    t.style.cssText='position:fixed;bottom:28px;right:28px;background:var(--primary);color:white;padding:12px 22px;border-radius:10px;font-size:0.88rem;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,0.2);z-index:9999;transition:opacity 0.4s';\n    document.body.appendChild(t);}\n  t.textContent=msg; t.style.opacity='1';\n  clearTimeout(t._timer); t._timer=setTimeout(()=>{t.style.opacity='0';},2800);\n}\n\nfunction exportJSON(){\n  const blob=new Blob([JSON.stringify(db,null,2)],{type:'application\/json'});\n  const a=document.createElement('a'); a.href=URL.createObjectURL(blob);\n  a.download=`ilotus-dashboard-${new Date().toISOString().slice(0,10)}.json`; a.click();\n  showToast('Dashboard exported \u2713');\n}\nfunction importJSON(event){\n  const file=event.target.files[0]; if(!file)return;\n  const reader=new FileReader();\n  reader.onload=e=>{\n    try{\n      const imported=JSON.parse(e.target.result);\n      if(confirm(`Import dashboard for \"${imported.profile?.name||'this user'}\"?\\nThis will replace your current data.`)){\n        db=imported; saveDB(); showToast('Dashboard imported \u2713');}\n    }catch{showToast('\u274c Invalid JSON file');}\n  };\n  reader.readAsText(file); event.target.value='';\n}\nfunction copyShareLink(){\n  try{\n    const encoded=btoa(unescape(encodeURIComponent(JSON.stringify(db))));\n    const url=`${window.location.href.split('#')[0]}#db=${encoded}`;\n    navigator.clipboard.writeText(url).then(()=>showToast('Share link copied \u2713')).catch(()=>prompt('Copy this link:',url));\n  }catch(e){showToast('Could not generate link');}\n}\nfunction emailSummary(){\n  const p=db.profile;\n  const subject=encodeURIComponent(`Real Estate Dashboard \u2014 ${p.name||'iLotus Realty'}`);\n  let body=`REAL ESTATE INTERACTIVE TOOLS \u2014 Dashboard Summary\\niLotusRealty.com  |  Generated: ${new Date().toLocaleString()}\\n${'='.repeat(52)}\\n\\n`;\n  body+=`PROFILE\\nName: ${p.name||'\u2014'}  |  Email: ${p.email||'\u2014'}  |  Phone: ${p.phone||'\u2014'}  |  Company: ${p.company||'\u2014'}\\n\\n`;\n  if(db.savedProperties.length){body+=`SAVED PROPERTIES (${db.savedProperties.length})\\n`;db.savedProperties.forEach(p=>{body+=`  \u2022 ${p.address||'\u2014'}  ${p.price?fmt(p.price):''}  ${p.beds}bd\/${p.baths}ba  [${PROP_STATUS[p.status]||p.status}]\\n    ${p.notes||''}\\n`;});body+='\\n';}\n  if(db.savedCalculations.length){body+=`SAVED CALCULATIONS (${db.savedCalculations.length})\\n`;db.savedCalculations.forEach(c=>{body+=`  \u2022 [${c.type.toUpperCase()}] ${c.label}  \u2192  ${c.keyResult}\\n    ${c.details||''}\\n`;});body+='\\n';}\n  if(db.contacts.length){body+=`CONTACTS (${db.contacts.length})\\n`;db.contacts.forEach(c=>{body+=`  \u2022 ${c.name||'\u2014'} (${c.type})  |  ${c.email||'\u2014'}  |  ${c.phone||'\u2014'}  [${c.status}]\\n`;});body+='\\n';}\n  if(db.notes.length){body+=`RECENT NOTES\\n`;db.notes.slice(-5).reverse().forEach(n=>{body+=`  \u2022 [${n.date}] ${n.text}\\n`;});}\n  body+=`\\n\u2014 Sent from Real Estate Interactive Tools | www.iLotusRealty.com`;\n  window.location.href=`mailto:?subject=${subject}&body=${encodeURIComponent(body)}`;\n}\nfunction printDashboard(){ switchTab('dashboard'); setTimeout(()=>window.print(),300); }\nfunction clearDashboard(){ if(!confirm('Clear ALL dashboard data? This cannot be undone.'))return; db=defaultDB(); saveDB(); showToast('Dashboard cleared'); }\n\nfunction checkShareHash(){\n  const hash=window.location.hash; if(!hash.startsWith('#db='))return;\n  try{\n    const decoded=JSON.parse(decodeURIComponent(escape(atob(hash.slice(4)))));\n    if(confirm(`Load shared dashboard from \"${decoded.profile?.name||'unknown'}\"?\\nThis will replace your current data.`)){db=decoded;saveDB();}\n    history.replaceState(null,'',window.location.pathname);\n  }catch(e){console.warn('Invalid share hash');}\n}\n\n\/\/ \u2500\u2500\u2500 INIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nwindow.addEventListener('DOMContentLoaded', () => {\n  checkShareHash();\n  addProperty(); addProperty();\n  calcMortgage();\n  calcROI();\n  updateMarket();\n  refreshDashboard();\n});\n\n    <\/script>\n\n","protected":false},"excerpt":{"rendered":"\ud83c\udfe0 Real Estate Interactive Tools iLotusRealty.com \ud83d\uddfa\ufe0f Market Overview \u2696\ufe0f Property Comparison \ud83c\udfe6 Mortgage Calculator \ud83d\udcc8 ROI Analysis \ud83d\uddc2\ufe0f My Dashboard Mortgage Calculator Estimate monthly payments, total costs, and full amortization schedule \ud83c\udfe6 Loan Parameters Enter property and loan details to calculate payments Property Price $ Down Payment $ Annual Interest Rate % Loan Term [...]","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4387","page","type-page","status-publish","hentry","clearfix"],"_links":{"self":[{"href":"https:\/\/ilotusrealty.com\/index.php\/wp-json\/wp\/v2\/pages\/4387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ilotusrealty.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ilotusrealty.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ilotusrealty.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ilotusrealty.com\/index.php\/wp-json\/wp\/v2\/comments?post=4387"}],"version-history":[{"count":2,"href":"https:\/\/ilotusrealty.com\/index.php\/wp-json\/wp\/v2\/pages\/4387\/revisions"}],"predecessor-version":[{"id":4393,"href":"https:\/\/ilotusrealty.com\/index.php\/wp-json\/wp\/v2\/pages\/4387\/revisions\/4393"}],"wp:attachment":[{"href":"https:\/\/ilotusrealty.com\/index.php\/wp-json\/wp\/v2\/media?parent=4387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}