Spaces:

AndyKandy26
/

WM01

Running

App Files Files Community

AndyKandy26 commited on 13 days ago

Commit

00e4c29

verified ·

1 Parent(s): d90af1b

Upload 9 files

Browse files

Files changed (9) hide show

README.md +74 -0
calculators.html +905 -0
index.html +409 -0
insights.html +860 -0
portfolio.html +673 -0
risk.html +618 -0
shared.css +772 -0
shared.js +172 -0
tracker.html +551 -0

README.md ADDED Viewed

	@@ -0,0 +1,74 @@

+---
+title: FinWise — AI Personal Finance Platform
+emoji: 📈
+colorFrom: indigo
+colorTo: green
+sdk: static
+pinned: false
+license: mit
+short_description: Beginner-friendly stock & portfolio management web app
+---
+# 📈 FinWise — AI-Powered Personal Finance Platform
+A **comprehensive, beginner-friendly** stock and mutual fund portfolio management platform built for clarity, interactivity, and smart financial guidance.
+## 🚀 Features
+| Module | Description |
+|--------|-------------|
+| 🏠 **Dashboard** | Portfolio overview, performance chart, market snapshot |
+| 🏗️ **Portfolio Builder** | 3-step guided portfolio creation with live preview |
+| 🎯 **Risk Analyzer** | Risk quiz, gauge, scenario simulation, rebalancing suggestions |
+| 📈 **Investment Tracker** | Holdings table, editable cost basis, P&L, allocation chart |
+| 🧮 **Calculators** | Growth, Retirement, SIP/Recurring, Inflation Impact |
+| 💡 **AI Insights** | Claude-powered chat advisor, tips, concepts, glossary |
+## 🛠 Tech Stack
+- **Pure HTML/CSS/JavaScript** — no build step required
+- **Chart.js** — all charts and visualizations
+- **Claude API** — AI advisor in the Insights tab
+- **localStorage** — portfolio persistence across sessions
+- **Google Fonts** — Syne + DM Sans typography
+## 📁 File Structure
+```
+finwise/
+├── index.html          # Dashboard
+├── portfolio.html      # Portfolio Builder
+├── risk.html           # Risk Analyzer
+├── tracker.html        # Investment Tracker
+├── calculators.html    # Financial Calculators
+├── insights.html       # AI Insights
+├── shared.css          # Design system & styles
+├── shared.js           # Utilities, data, helpers
+└── README.md
+```
+## 🎨 Design
+- **Dark luxury fintech** aesthetic
+- **Syne** (headings) + **DM Sans** (body) typography
+- Cyan & Emerald accent palette on deep navy
+- Mobile-first responsive design with bottom navigation
+- Animated stats, hover effects, smooth transitions
+## 🤖 AI Features
+The **AI Advisor** in the Insights tab uses Claude claude-sonnet-4-20250514 to provide:
+- Personalized portfolio analysis based on your actual holdings
+- Plain-language explanations of investing concepts
+- Context-aware rebalancing suggestions
+- Smart financial Q&A
+## 📱 Responsive
+- Full sidebar navigation on desktop
+- Bottom tab bar on mobile
+- All charts resize gracefully
+---
+*FinWise is an educational tool. It does not constitute licensed financial advice.*

calculators.html ADDED Viewed

	@@ -0,0 +1,905 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>FinWise — Calculators</title>
+<link rel="stylesheet" href="shared.css">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<style>
+.calc-tabs {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 28px;
+}
+.calc-tab {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  border-radius: var(--r);
+  border: 1px solid var(--border);
+  background: var(--card);
+  color: var(--text2);
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition);
+  white-space: nowrap;
+}
+.calc-tab:hover { border-color: var(--border2); color: var(--text); transform: translateY(-1px); }
+.calc-tab.active {
+  border-color: var(--cyan);
+  background: rgba(34,211,238,0.08);
+  color: var(--cyan);
+  box-shadow: var(--glow-c);
+}
+.calc-tab-icon { font-size: 20px; }
+.calc-panel { display: none; }
+.calc-panel.active { display: block; }
+.result-hero {
+  text-align: center;
+  padding: 32px 20px;
+  background: linear-gradient(135deg, rgba(34,211,238,0.06), rgba(16,185,129,0.04));
+  border: 1px solid var(--border2);
+  border-radius: var(--r-lg);
+  margin-bottom: 24px;
+  position: relative;
+  overflow: hidden;
+}
+.result-hero::before {
+  content: '';
+  position: absolute;
+  width: 300px; height: 300px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(34,211,238,0.06) 0%, transparent 70%);
+  top: -100px; left: 50%;
+  transform: translateX(-50%);
+}
+.result-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text2); font-weight: 700; }
+.result-value { font-family: var(--font-head); font-size: 52px; font-weight: 800; line-height: 1; margin: 12px 0; }
+.result-value.positive { color: var(--emerald); }
+.result-sub { font-size: 14px; color: var(--text2); }
+.result-breakdown {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  gap: 12px;
+  margin-bottom: 24px;
+}
+.rb-box {
+  background: var(--bg3);
+  border-radius: var(--r-sm);
+  padding: 14px;
+  text-align: center;
+}
+.rb-box-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text2); margin-bottom: 6px; font-weight: 700; }
+.rb-box-val   { font-family: var(--font-head); font-size: 20px; font-weight: 800; }
+.chart-panel { height: 260px; position: relative; }
+.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+@media (max-width: 600px) { .input-row { grid-template-columns: 1fr; } .result-breakdown { grid-template-columns: 1fr 1fr; } }
+.preset-pills {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+.preset-pill {
+  padding: 4px 10px;
+  border-radius: 100px;
+  border: 1px solid var(--border2);
+  background: transparent;
+  color: var(--text2);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: var(--font-body);
+  transition: all var(--transition);
+}
+.preset-pill:hover { border-color: var(--cyan); color: var(--cyan); }
+.preset-pill.active { background: rgba(34,211,238,0.1); border-color: var(--cyan); color: var(--cyan); }
+.milestone-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 10px;
+  margin-top: 16px;
+}
+.milestone-card {
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  padding: 14px;
+  text-align: center;
+  transition: all var(--transition);
+}
+.milestone-card.reached {
+  border-color: var(--emerald);
+  background: rgba(16,185,129,0.07);
+}
+.milestone-card.reached .ms-icon { filter: none; }
+.milestone-icon { font-size: 28px; margin-bottom: 6px; filter: grayscale(0.7); }
+.milestone-val  { font-family: var(--font-head); font-size: 18px; font-weight: 800; margin-bottom: 4px; }
+.milestone-lbl  { font-size: 11px; color: var(--text2); }
+.milestone-yr   { font-size: 10px; color: var(--emerald); margin-top: 4px; font-weight: 700; }
+.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top:16px; }
+.compare-box {
+  background: var(--bg3);
+  border-radius: var(--r-sm);
+  padding: 16px;
+  text-align: center;
+  border: 1px solid var(--border);
+}
+.cb-label { font-size: 12px; color: var(--text2); margin-bottom: 8px; font-weight: 600; }
+.cb-val   { font-family: var(--font-head); font-size: 24px; font-weight: 800; }
+.sip-frequency {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+.freq-btn {
+  flex: 1;
+  padding: 10px;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text2);
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.freq-btn.active { border-color: var(--cyan); background: rgba(34,211,238,0.1); color: var(--cyan); }
+.inflation-impact {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  background: var(--bg3);
+  border-radius: var(--r-sm);
+  border-left: 3px solid var(--rose);
+  margin-bottom: 16px;
+}
+.inf-icon { font-size: 32px; }
+.inf-text { flex: 1; }
+.inf-title { font-weight: 700; margin-bottom: 4px; }
+.inf-desc  { font-size: 13px; color: var(--text2); }
+</style>
+</head>
+<body>
+<div class="app-shell">
+  <nav class="sidebar">
+    <div class="sidebar-logo">
+      <div class="logo-mark">
+        <div class="logo-icon">📈</div>
+        <div><div class="logo-text">FinWise</div><div class="logo-sub">Smart Investing</div></div>
+      </div>
+    </div>
+    <div class="nav-section">
+      <div class="nav-label">Main</div>
+      <a href="index.html"       class="nav-item"><span class="nav-icon">🏠</span> Dashboard</a>
+      <a href="portfolio.html"   class="nav-item"><span class="nav-icon">📊</span> Portfolio Builder</a>
+      <a href="risk.html"        class="nav-item"><span class="nav-icon">🎯</span> Risk Analyzer</a>
+      <a href="tracker.html"     class="nav-item"><span class="nav-icon">📈</span> Tracker</a>
+      <div class="nav-label">Tools</div>
+      <a href="calculators.html" class="nav-item"><span class="nav-icon">🧮</span> Calculators</a>
+      <a href="insights.html"    class="nav-item"><span class="nav-icon">💡</span> Insights</a>
+    </div>
+    <div class="sidebar-footer">
+      <div class="market-ticker">Live Market</div>
+      <div id="sidebar-tickers"></div>
+    </div>
+  </nav>
+  <main class="main-content">
+    <div class="page-header fade-in">
+      <div class="page-title">Financial <span>Calculators</span></div>
+      <div class="page-subtitle">Interactive tools to plan, project, and optimize your wealth</div>
+    </div>
+    <!-- Calculator Tabs -->
+    <div class="calc-tabs fade-in">
+      <button class="calc-tab active" data-calc="growth">
+        <span class="calc-tab-icon">📈</span> Investment Growth
+      </button>
+      <button class="calc-tab" data-calc="retirement">
+        <span class="calc-tab-icon">🏖️</span> Retirement
+      </button>
+      <button class="calc-tab" data-calc="sip">
+        <span class="calc-tab-icon">🔄</span> SIP / Recurring
+      </button>
+      <button class="calc-tab" data-calc="inflation">
+        <span class="calc-tab-icon">🔥</span> Inflation Impact
+      </button>
+    </div>
+    <!-- ════════════════════════════════════════════════════════════
+         CALCULATOR 1: Investment Growth
+    ════════════════════════════════════════════════════════════ -->
+    <div class="calc-panel active fade-in" id="calc-growth">
+      <div class="grid-60-40">
+        <div>
+          <div class="card">
+            <div class="section-title">📈 Investment Growth Calculator</div>
+            <div class="text-muted text-sm" style="margin-bottom:20px">See how your one-time investment grows over time with compound returns</div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">💵 Initial Investment</span><span class="slider-val" id="g-init-val">$10,000</span></div>
+              <div class="preset-pills">
+                <button class="preset-pill" onclick="setGrowthPreset('g-init',1000)">$1K</button>
+                <button class="preset-pill active" onclick="setGrowthPreset('g-init',10000)">$10K</button>
+                <button class="preset-pill" onclick="setGrowthPreset('g-init',25000)">$25K</button>
+                <button class="preset-pill" onclick="setGrowthPreset('g-init',50000)">$50K</button>
+                <button class="preset-pill" onclick="setGrowthPreset('g-init',100000)">$100K</button>
+              </div>
+              <input type="range" id="g-init" min="500" max="200000" value="10000" step="500" oninput="calcGrowth()">
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">📅 Time Horizon</span><span class="slider-val" id="g-years-val">20 years</span></div>
+              <div class="preset-pills">
+                <button class="preset-pill" onclick="setGrowthPreset('g-years',5)">5yr</button>
+                <button class="preset-pill" onclick="setGrowthPreset('g-years',10)">10yr</button>
+                <button class="preset-pill active" onclick="setGrowthPreset('g-years',20)">20yr</button>
+                <button class="preset-pill" onclick="setGrowthPreset('g-years',30)">30yr</button>
+              </div>
+              <input type="range" id="g-years" min="1" max="50" value="20" step="1" oninput="calcGrowth()">
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">📊 Annual Return Rate</span><span class="slider-val" id="g-rate-val">8%</span></div>
+              <div class="preset-pills">
+                <button class="preset-pill" onclick="setGrowthPreset('g-rate',4,'%')">Bonds 4%</button>
+                <button class="preset-pill" onclick="setGrowthPreset('g-rate',7,'%')">S&P Avg 7%</button>
+                <button class="preset-pill active" onclick="setGrowthPreset('g-rate',8,'%')">Moderate 8%</button>
+                <button class="preset-pill" onclick="setGrowthPreset('g-rate',12,'%')">Aggressive 12%</button>
+              </div>
+              <input type="range" id="g-rate" min="1" max="25" value="8" step="0.5" oninput="calcGrowth()">
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">📆 Compound Frequency</span><span class="slider-val" id="g-compound-val">Annually</span></div>
+              <input type="range" id="g-compound" min="1" max="12" value="1" step="1" oninput="calcGrowth()">
+              <div style="display:flex;justify-content:space-between;font-size:11px;color:var(--text3);margin-top:4px">
+                <span>Annually</span><span>Quarterly</span><span>Monthly</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="result-hero">
+            <div class="result-label">Future Value</div>
+            <div class="result-value positive" id="g-future">$0</div>
+            <div class="result-sub" id="g-sub">You'd earn <strong id="g-profit">$0</strong> in profit</div>
+          </div>
+          <div class="result-breakdown">
+            <div class="rb-box">
+              <div class="rb-box-label">Invested</div>
+              <div class="rb-box-val" id="g-rb-invested">$0</div>
+            </div>
+            <div class="rb-box">
+              <div class="rb-box-label">Earnings</div>
+              <div class="rb-box-val" style="color:var(--emerald)" id="g-rb-earn">$0</div>
+            </div>
+            <div class="rb-box">
+              <div class="rb-box-label">Total Return</div>
+              <div class="rb-box-val" style="color:var(--cyan)" id="g-rb-pct">0%</div>
+            </div>
+          </div>
+          <div class="card" style="padding:16px">
+            <div class="card-title">📊 Growth Over Time</div>
+            <div class="chart-panel">
+              <canvas id="growthChart"></canvas>
+            </div>
+          </div>
+          <!-- Milestones -->
+          <div class="card" style="margin-top:16px;padding:16px">
+            <div class="card-title">🏆 Milestones</div>
+            <div class="milestone-grid" id="milestones-grid"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ════════════════════════════════════════════════════════════
+         CALCULATOR 2: Retirement
+    ════════════════════════════════════════════════════════════ -->
+    <div class="calc-panel" id="calc-retirement">
+      <div class="grid-60-40">
+        <div>
+          <div class="card">
+            <div class="section-title">🏖️ Retirement Calculator</div>
+            <div class="text-muted text-sm" style="margin-bottom:20px">Plan your retirement savings and see if you're on track</div>
+            <div class="input-row" style="margin-bottom:16px">
+              <div class="field-group">
+                <label class="field-label">Current Age</label>
+                <input type="number" id="ret-age" value="30" min="18" max="80" oninput="calcRetirement()">
+              </div>
+              <div class="field-group">
+                <label class="field-label">Retirement Age</label>
+                <input type="number" id="ret-age2" value="65" min="40" max="85" oninput="calcRetirement()">
+              </div>
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">💰 Current Savings</span><span class="slider-val" id="ret-saved-val">$15,000</span></div>
+              <input type="range" id="ret-saved" min="0" max="500000" value="15000" step="1000" oninput="calcRetirement()">
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">📅 Monthly Contribution</span><span class="slider-val" id="ret-monthly-val">$500/mo</span></div>
+              <input type="range" id="ret-monthly" min="50" max="5000" value="500" step="50" oninput="calcRetirement()">
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">📈 Annual Return</span><span class="slider-val" id="ret-rate-val">7%</span></div>
+              <input type="range" id="ret-rate" min="2" max="15" value="7" step="0.5" oninput="calcRetirement()">
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">🏦 Desired Monthly Income in Retirement</span><span class="slider-val" id="ret-need-val">$4,000/mo</span></div>
+              <input type="range" id="ret-need" min="1000" max="20000" value="4000" step="500" oninput="calcRetirement()">
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="result-hero">
+            <div class="result-label">Retirement Nest Egg</div>
+            <div class="result-value positive" id="ret-future">$0</div>
+            <div class="result-sub" id="ret-status">—</div>
+          </div>
+          <div class="result-breakdown">
+            <div class="rb-box">
+              <div class="rb-box-label">Years to Retire</div>
+              <div class="rb-box-val" style="color:var(--amber)" id="ret-rb-years">0</div>
+            </div>
+            <div class="rb-box">
+              <div class="rb-box-label">Monthly Draw</div>
+              <div class="rb-box-val" style="color:var(--cyan)" id="ret-rb-draw">$0/mo</div>
+            </div>
+            <div class="rb-box">
+              <div class="rb-box-label">Fund Duration</div>
+              <div class="rb-box-val" style="color:var(--emerald)" id="ret-rb-dur">0 yrs</div>
+            </div>
+          </div>
+          <div class="card" style="padding:16px">
+            <div class="card-title">📊 Savings Trajectory</div>
+            <div class="chart-panel">
+              <canvas id="retChart"></canvas>
+            </div>
+          </div>
+          <div id="ret-on-track-box" style="margin-top:16px;padding:16px;border-radius:var(--r-sm);border:1px solid"></div>
+        </div>
+      </div>
+    </div>
+    <!-- ════════════════════════════════════════════════════════════
+         CALCULATOR 3: SIP / Recurring
+    ════════════════════════════════════════════════════════════ -->
+    <div class="calc-panel" id="calc-sip">
+      <div class="grid-60-40">
+        <div>
+          <div class="card">
+            <div class="section-title">🔄 SIP / Recurring Investment</div>
+            <div class="text-muted text-sm" style="margin-bottom:16px">How regular investments compound over time</div>
+            <div style="margin-bottom:16px">
+              <div class="field-label" style="margin-bottom:8px">Contribution Frequency</div>
+              <div class="sip-frequency">
+                <button class="freq-btn" onclick="setSipFreq('weekly',this)">Weekly</button>
+                <button class="freq-btn active" onclick="setSipFreq('monthly',this)">Monthly</button>
+                <button class="freq-btn" onclick="setSipFreq('quarterly',this)">Quarterly</button>
+                <button class="freq-btn" onclick="setSipFreq('annually',this)">Annually</button>
+              </div>
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">💵 Contribution Amount</span><span class="slider-val" id="sip-amount-val">$300/mo</span></div>
+              <div class="preset-pills">
+                <button class="preset-pill" onclick="setSipPreset('sip-amount',100)">$100</button>
+                <button class="preset-pill active" onclick="setSipPreset('sip-amount',300)">$300</button>
+                <button class="preset-pill" onclick="setSipPreset('sip-amount',500)">$500</button>
+                <button class="preset-pill" onclick="setSipPreset('sip-amount',1000)">$1K</button>
+              </div>
+              <input type="range" id="sip-amount" min="10" max="5000" value="300" step="10" oninput="calcSIP()">
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">📅 Duration</span><span class="slider-val" id="sip-years-val">15 years</span></div>
+              <input type="range" id="sip-years" min="1" max="40" value="15" step="1" oninput="calcSIP()">
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">📊 Expected Return</span><span class="slider-val" id="sip-rate-val">9%</span></div>
+              <input type="range" id="sip-rate" min="2" max="20" value="9" step="0.5" oninput="calcSIP()">
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">📈 Annual Step-Up %</span><span class="slider-val" id="sip-stepup-val">0%</span></div>
+              <input type="range" id="sip-stepup" min="0" max="20" value="0" step="1" oninput="calcSIP()">
+              <div class="text-muted text-sm" style="margin-top:4px">Increase contribution amount each year by this %</div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="result-hero">
+            <div class="result-label">Total Wealth Created</div>
+            <div class="result-value positive" id="sip-future">$0</div>
+            <div class="result-sub">Total invested: <strong id="sip-invested">$0</strong></div>
+          </div>
+          <div class="result-breakdown">
+            <div class="rb-box">
+              <div class="rb-box-label">Invested</div>
+              <div class="rb-box-val" id="sip-rb-inv">$0</div>
+            </div>
+            <div class="rb-box">
+              <div class="rb-box-label">Gains</div>
+              <div class="rb-box-val" style="color:var(--emerald)" id="sip-rb-gain">$0</div>
+            </div>
+            <div class="rb-box">
+              <div class="rb-box-label">Gain %</div>
+              <div class="rb-box-val" style="color:var(--cyan)" id="sip-rb-pct">0%</div>
+            </div>
+          </div>
+          <div class="card" style="padding:16px">
+            <div class="card-title">📊 Contribution vs Growth</div>
+            <div class="chart-panel">
+              <canvas id="sipChart"></canvas>
+            </div>
+          </div>
+          <div class="compare-grid">
+            <div class="compare-box">
+              <div class="cb-label">💤 Without Investing<br>(under mattress)</div>
+              <div class="cb-val" id="sip-no-invest" style="color:var(--rose)">$0</div>
+            </div>
+            <div class="compare-box">
+              <div class="cb-label">📈 With Investing<br>(your strategy)</div>
+              <div class="cb-val" id="sip-with-invest" style="color:var(--emerald)">$0</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ════════════════════════════════════════════════════════════
+         CALCULATOR 4: Inflation Impact
+    ════════════════════════════════════════════════════════════ -->
+    <div class="calc-panel" id="calc-inflation">
+      <div class="grid-60-40">
+        <div>
+          <div class="card">
+            <div class="section-title">🔥 Inflation Impact Calculator</div>
+            <div class="text-muted text-sm" style="margin-bottom:20px">Understand how inflation erodes your money's purchasing power</div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">💵 Amount Today</span><span class="slider-val" id="inf-amount-val">$10,000</span></div>
+              <div class="preset-pills">
+                <button class="preset-pill" onclick="setInfPreset('inf-amount',5000)">$5K</button>
+                <button class="preset-pill active" onclick="setInfPreset('inf-amount',10000)">$10K</button>
+                <button class="preset-pill" onclick="setInfPreset('inf-amount',50000)">$50K</button>
+                <button class="preset-pill" onclick="setInfPreset('inf-amount',100000)">$100K</button>
+              </div>
+              <input type="range" id="inf-amount" min="1000" max="500000" value="10000" step="1000" oninput="calcInflation()">
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">📅 Years Ahead</span><span class="slider-val" id="inf-years-val">20 years</span></div>
+              <input type="range" id="inf-years" min="1" max="50" value="20" step="1" oninput="calcInflation()">
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">🔥 Annual Inflation Rate</span><span class="slider-val" id="inf-rate-val">3.5%</span></div>
+              <div class="preset-pills">
+                <button class="preset-pill" onclick="setInfPreset('inf-rate',2)">Low 2%</button>
+                <button class="preset-pill active" onclick="setInfPreset('inf-rate',3.5)">Average 3.5%</button>
+                <button class="preset-pill" onclick="setInfPreset('inf-rate',6)">High 6%</button>
+                <button class="preset-pill" onclick="setInfPreset('inf-rate',10)">Crisis 10%</button>
+              </div>
+              <input type="range" id="inf-rate" min="0.5" max="15" value="3.5" step="0.5" oninput="calcInflation()">
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header"><span class="slider-label">📈 Investment Return Rate</span><span class="slider-val" id="inf-invest-val">7%</span></div>
+              <input type="range" id="inf-invest" min="0" max="20" value="7" step="0.5" oninput="calcInflation()">
+              <div class="text-muted text-sm" style="margin-top:4px">If you invest vs keep as cash</div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="inflation-impact">
+            <div class="inf-icon">💸</div>
+            <div class="inf-text">
+              <div class="inf-title">Purchasing Power Loss</div>
+              <div class="inf-desc">Your money <strong id="inf-today">$10,000</strong> today will only be worth <strong id="inf-future-worth" style="color:var(--rose)">—</strong> in real terms after <span id="inf-years-txt">20</span> years.</div>
+            </div>
+          </div>
+          <div class="result-hero">
+            <div class="result-label">Inflation-Adjusted Value</div>
+            <div class="result-value" id="inf-result" style="color:var(--rose)">$0</div>
+            <div class="result-sub">Real purchasing power loss: <strong id="inf-loss" style="color:var(--rose)">$0</strong></div>
+          </div>
+          <div class="result-breakdown">
+            <div class="rb-box">
+              <div class="rb-box-label">Nominal Value</div>
+              <div class="rb-box-val" id="inf-rb-nom">$0</div>
+            </div>
+            <div class="rb-box">
+              <div class="rb-box-label">Real Value</div>
+              <div class="rb-box-val" style="color:var(--rose)" id="inf-rb-real">$0</div>
+            </div>
+            <div class="rb-box">
+              <div class="rb-box-label">If Invested</div>
+              <div class="rb-box-val" style="color:var(--emerald)" id="inf-rb-inv">$0</div>
+            </div>
+          </div>
+          <div class="card" style="padding:16px">
+            <div class="card-title">📊 Cash vs Invested vs Inflation</div>
+            <div class="chart-panel">
+              <canvas id="infChart"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+<nav class="bottom-nav">
+  <div class="bottom-nav-inner">
+    <a href="index.html"       class="bottom-nav-item"><span class="bnav-icon">🏠</span>Home</a>
+    <a href="portfolio.html"   class="bottom-nav-item"><span class="bnav-icon">📊</span>Portfolio</a>
+    <a href="risk.html"        class="bottom-nav-item"><span class="bnav-icon">🎯</span>Risk</a>
+    <a href="tracker.html"     class="bottom-nav-item"><span class="bnav-icon">📈</span>Track</a>
+    <a href="calculators.html" class="bottom-nav-item"><span class="bnav-icon">🧮</span>Calc</a>
+    <a href="insights.html"    class="bottom-nav-item"><span class="bnav-icon">💡</span>Insights</a>
+  </div>
+</nav>
+<script src="shared.js"></script>
+<script>
+// ══ Tab Switching ═════════════════════════════════════════════════
+document.querySelectorAll('.calc-tab').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.calc-tab,.calc-panel').forEach(el => el.classList.remove('active'));
+    btn.classList.add('active');
+    document.getElementById('calc-' + btn.dataset.calc).classList.add('active');
+    setTimeout(() => { calcGrowth(); calcRetirement(); calcSIP(); calcInflation(); }, 50);
+  });
+});
+// ══ Shared helpers ════════════════════════════════════════════════
+let growthChart=null, retChart=null, sipChart=null, infChart=null;
+let sipFreq = 'monthly'; // periods per year
+const FREQ_MAP = { weekly:52, monthly:12, quarterly:4, annually:1 };
+const FREQ_LABEL = { weekly:'wk', monthly:'mo', quarterly:'qtr', annually:'yr' };
+function sliderSync(id, labelId, prefix='$', suffix='', scale=1, decimals=0) {
+  const el = document.getElementById(id);
+  const lbl = document.getElementById(labelId);
+  const update = () => {
+    const v = parseFloat(el.value) * scale;
+    lbl.textContent = prefix + (decimals ? v.toFixed(decimals) : Math.round(v).toLocaleString()) + suffix;
+  };
+  el.addEventListener('input', update);
+}
+// ══ CALCULATOR 1: Investment Growth ═══════════════════════════════
+function setGrowthPreset(id, val, unit) {
+  document.getElementById(id).value = val;
+  calcGrowth();
+}
+function setSipPreset(id, val) { document.getElementById(id).value = val; calcSIP(); }
+function setInfPreset(id, val) { document.getElementById(id).value = val; calcInflation(); }
+function calcGrowth() {
+  const P = parseFloat(document.getElementById('g-init').value);
+  const n = parseInt(document.getElementById('g-years').value);
+  const r = parseFloat(document.getElementById('g-rate').value) / 100;
+  const c = parseInt(document.getElementById('g-compound').value);
+  document.getElementById('g-init-val').textContent = '$' + P.toLocaleString();
+  document.getElementById('g-years-val').textContent = n + ' year' + (n===1?'':'s');
+  const compoundLabels = {1:'Annually',2:'Semi-annually',3:'Tri-annually',4:'Quarterly',6:'Bi-monthly',12:'Monthly'};
+  document.getElementById('g-compound-val').textContent = compoundLabels[c] || c + 'x/yr';
+  document.getElementById('g-rate-val').textContent = r*100 + '%';
+  const FV = P * Math.pow(1 + r/c, c*n);
+  const profit = FV - P;
+  const pct = (profit/P)*100;
+  document.getElementById('g-future').textContent = fmt$(FV);
+  document.getElementById('g-profit').textContent = fmt$(profit);
+  document.getElementById('g-rb-invested').textContent = fmt$(P);
+  document.getElementById('g-rb-earn').textContent    = fmt$(profit);
+  document.getElementById('g-rb-pct').textContent     = '+' + pct.toFixed(1) + '%';
+  // Chart data
+  const years = Array.from({length:n+1},(_,i)=>i);
+  const vals  = years.map(y => P * Math.pow(1+r/c, c*y));
+  const invested = years.map(() => P);
+  if (growthChart) growthChart.destroy();
+  const ctx = document.getElementById('growthChart').getContext('2d');
+  const grad = ctx.createLinearGradient(0,0,0,260);
+  grad.addColorStop(0,'rgba(16,185,129,0.35)'); grad.addColorStop(1,'rgba(16,185,129,0)');
+  growthChart = new Chart(ctx, {
+    type:'line',
+    data:{
+      labels: years.map(y => 'Yr '+y),
+      datasets:[
+        { label:'Portfolio Value', data:vals, borderColor:'#10b981', backgroundColor:grad, borderWidth:2.5, fill:true, tension:0.4, pointRadius:0 },
+        { label:'Amount Invested', data:invested, borderColor:'rgba(34,211,238,0.5)', borderDash:[5,5], borderWidth:1.5, fill:false, pointRadius:0, tension:0 }
+      ]
+    },
+    options:{ responsive:true, maintainAspectRatio:false,
+      plugins:{ legend:{ labels:{font:{size:11}} },
+        tooltip:{ callbacks:{ label: ctx => ' '+fmt$(ctx.raw) } } },
+      scales:{
+        x:{ grid:{display:false}, ticks:{maxTicksLimit:8,font:{size:11}} },
+        y:{ grid:{color:'rgba(34,211,238,0.06)'}, ticks:{ callback:v=>'$'+(v/1000).toFixed(0)+'K', font:{size:11} } }
+      }
+    }
+  });
+  // Milestones
+  const milestones = [
+    { icon:'💯', label:'2× Money',   target:P*2  },
+    { icon:'🚀', label:'5× Money',   target:P*5  },
+    { icon:'💎', label:'10× Money',  target:P*10 },
+    { icon:'🌟', label:'$100K',       target:100000 },
+    { icon:'🏆', label:'$250K',       target:250000 },
+    { icon:'👑', label:'$1M',         target:1000000 },
+  ];
+  document.getElementById('milestones-grid').innerHTML = milestones.map(m => {
+    const reached = FV >= m.target;
+    const yearsTo = reached ? Math.log(m.target/P) / (c * Math.log(1+r/c)) : null;
+    return `
+      <div class="milestone-card ${reached?'reached':''}">
+        <div class="milestone-icon">${m.icon}</div>
+        <div class="milestone-val">${m.label}</div>
+        <div class="milestone-lbl">${fmt$(m.target)}</div>
+        ${reached ? `<div class="milestone-yr">✅ ~Yr ${Math.round(yearsTo)}</div>` : `<div class="milestone-yr" style="color:var(--text3)">Not reached</div>`}
+      </div>`;
+  }).join('');
+}
+// ══ CALCULATOR 2: Retirement ══════════════════════════════════════
+function calcRetirement() {
+  const age    = parseInt(document.getElementById('ret-age').value) || 30;
+  const retAge = parseInt(document.getElementById('ret-age2').value) || 65;
+  const saved  = parseFloat(document.getElementById('ret-saved').value);
+  const mo     = parseFloat(document.getElementById('ret-monthly').value);
+  const r      = parseFloat(document.getElementById('ret-rate').value)/100;
+  const need   = parseFloat(document.getElementById('ret-need').value);
+  document.getElementById('ret-saved-val').textContent   = '$'+saved.toLocaleString();
+  document.getElementById('ret-monthly-val').textContent = '$'+mo.toLocaleString()+'/mo';
+  document.getElementById('ret-rate-val').textContent    = r*100 + '%';
+  document.getElementById('ret-need-val').textContent    = '$'+need.toLocaleString()+'/mo';
+  const years  = Math.max(retAge - age, 1);
+  const rMo    = r/12;
+  const FV_existing = saved * Math.pow(1+r, years);
+  const FV_contrib  = mo * ((Math.pow(1+rMo, years*12)-1)/rMo);
+  const total  = FV_existing + FV_contrib;
+  const annualy = need * 12;
+  const fundDur = total > 0 ? Math.log(1 - (annualy * (1-(1+r/4))) / (total * (r/4))) / Math.log(1+r/4) * (-1) : 0;
+  const safeDrawdown = total * 0.04 / 12;
+  const onTrack = total >= annualy * 25;
+  document.getElementById('ret-future').textContent = fmt$(total);
+  document.getElementById('ret-rb-years').textContent = years + ' yrs';
+  document.getElementById('ret-rb-draw').textContent  = '$' + Math.round(safeDrawdown).toLocaleString() + '/mo';
+  document.getElementById('ret-rb-dur').textContent   = Math.round(Math.max(fundDur,0)) + ' yrs';
+  const box = document.getElementById('ret-on-track-box');
+  if (onTrack) {
+    box.style.cssText = 'padding:16px;border-radius:var(--r-sm);border:1px solid rgba(16,185,129,0.4);background:rgba(16,185,129,0.08)';
+    box.innerHTML = `<div style="font-weight:700;color:var(--emerald);margin-bottom:6px">✅ You're on track!</div>
+      <div style="font-size:13px;color:var(--text2)">Your projected nest egg supports $${Math.round(safeDrawdown).toLocaleString()}/mo using the 4% rule. That's more than your $${need.toLocaleString()}/mo target.</div>`;
+  } else {
+    const gap = annualy*25 - total;
+    box.style.cssText = 'padding:16px;border-radius:var(--r-sm);border:1px solid rgba(245,158,11,0.4);background:rgba(245,158,11,0.08)';
+    box.innerHTML = `<div style="font-weight:700;color:var(--amber);margin-bottom:6px">⚠️ Savings Gap Detected</div>
+      <div style="font-size:13px;color:var(--text2)">You're projected to be <strong style="color:var(--amber)">${fmt$(gap)}</strong> short of your retirement goal. Consider increasing contributions by $${Math.round(gap/(years*12)).toLocaleString()}/mo.</div>`;
+  }
+  document.getElementById('ret-status').textContent = onTrack ? '🎉 On track for retirement!' : `Need ${fmt$(annualy*25)} total`;
+  // Chart
+  const yrs = Array.from({length:years+1},(_,i)=>i);
+  const trajectory = yrs.map(y => {
+    const fe = saved * Math.pow(1+r,y);
+    const fc = mo * ((Math.pow(1+r/12, y*12)-1)/(r/12));
+    return fe+fc;
+  });
+  if (retChart) retChart.destroy();
+  const ctx = document.getElementById('retChart').getContext('2d');
+  const grad = ctx.createLinearGradient(0,0,0,260);
+  grad.addColorStop(0,'rgba(34,211,238,0.3)'); grad.addColorStop(1,'rgba(34,211,238,0)');
+  retChart = new Chart(ctx, {
+    type:'line',
+    data:{
+      labels: yrs.map(y => age+y),
+      datasets:[
+        { label:'Projected Savings', data:trajectory, borderColor:'#22d3ee', backgroundColor:grad, borderWidth:2.5, fill:true, tension:0.4, pointRadius:0 },
+        { label:'Target', data:yrs.map(()=>annualy*25), borderColor:'rgba(245,158,11,0.6)', borderDash:[6,4], borderWidth:1.5, fill:false, pointRadius:0 }
+      ]
+    },
+    options:{ responsive:true, maintainAspectRatio:false,
+      plugins:{ legend:{labels:{font:{size:11}}}, tooltip:{ callbacks:{ label:ctx=>' '+fmt$(ctx.raw) } } },
+      scales:{
+        x:{ grid:{display:false}, ticks:{maxTicksLimit:8,font:{size:11}} },
+        y:{ grid:{color:'rgba(34,211,238,0.06)'}, ticks:{ callback:v=>'$'+(v/1000).toFixed(0)+'K', font:{size:11} } }
+      }
+    }
+  });
+}
+// ══ CALCULATOR 3: SIP ═════════════════════════════════════════════
+function setSipFreq(freq, btn) {
+  sipFreq = freq;
+  document.querySelectorAll('.freq-btn').forEach(b=>b.classList.remove('active'));
+  btn.classList.add('active');
+  calcSIP();
+}
+function calcSIP() {
+  const amount  = parseFloat(document.getElementById('sip-amount').value);
+  const years   = parseInt(document.getElementById('sip-years').value);
+  const rate    = parseFloat(document.getElementById('sip-rate').value)/100;
+  const stepup  = parseFloat(document.getElementById('sip-stepup').value)/100;
+  const n       = FREQ_MAP[sipFreq];
+  const lbl     = FREQ_LABEL[sipFreq];
+  document.getElementById('sip-amount-val').textContent = '$'+amount.toLocaleString()+'/'+lbl;
+  document.getElementById('sip-years-val').textContent  = years + ' year' + (years===1?'':'s');
+  document.getElementById('sip-rate-val').textContent   = rate*100 + '%';
+  document.getElementById('sip-stepup-val').textContent = (stepup*100).toFixed(0) + '%';
+  // Step-up SIP calculation
+  let FV = 0, totalInvested = 0;
+  let currentAmount = amount;
+  const yearlyVals = [], yearlyInv = [];
+  for (let y=1; y<=years; y++) {
+    if (y>1 && stepup>0) currentAmount *= (1+stepup);
+    for (let p=0; p<n; p++) {
+      FV = (FV + currentAmount) * (1 + rate/n);
+      totalInvested += currentAmount;
+    }
+    yearlyVals.push(FV);
+    yearlyInv.push(totalInvested);
+  }
+  const gain    = FV - totalInvested;
+  const gainPct = (gain/totalInvested)*100;
+  document.getElementById('sip-future').textContent   = fmt$(FV);
+  document.getElementById('sip-invested').textContent = fmt$(totalInvested);
+  document.getElementById('sip-rb-inv').textContent   = fmt$(totalInvested);
+  document.getElementById('sip-rb-gain').textContent  = fmt$(gain);
+  document.getElementById('sip-rb-pct').textContent   = '+'+gainPct.toFixed(1)+'%';
+  document.getElementById('sip-no-invest').textContent  = fmt$(totalInvested);
+  document.getElementById('sip-with-invest').textContent = fmt$(FV);
+  if (sipChart) sipChart.destroy();
+  const ctx = document.getElementById('sipChart').getContext('2d');
+  const labels = Array.from({length:years},(_,i)=>'Yr '+(i+1));
+  sipChart = new Chart(ctx, {
+    type:'bar',
+    data:{
+      labels,
+      datasets:[
+        { label:'Total Invested', data:yearlyInv, backgroundColor:'rgba(34,211,238,0.4)', borderRadius:4, order:2 },
+        { label:'Portfolio Value', data:yearlyVals, type:'line', borderColor:'#10b981', backgroundColor:'rgba(16,185,129,0.15)', borderWidth:2.5, fill:true, tension:0.4, pointRadius:0, order:1 }
+      ]
+    },
+    options:{ responsive:true, maintainAspectRatio:false,
+      plugins:{ legend:{labels:{font:{size:11}}}, tooltip:{ callbacks:{ label:ctx=>' '+fmt$(ctx.raw) } } },
+      scales:{
+        x:{ grid:{display:false}, stacked:false, ticks:{maxTicksLimit:8,font:{size:11}} },
+        y:{ grid:{color:'rgba(34,211,238,0.06)'}, ticks:{ callback:v=>'$'+(v/1000).toFixed(0)+'K', font:{size:11} } }
+      }
+    }
+  });
+}
+// ══ CALCULATOR 4: Inflation ════���══════════════════════════════════
+function calcInflation() {
+  const amount  = parseFloat(document.getElementById('inf-amount').value);
+  const years   = parseInt(document.getElementById('inf-years').value);
+  const infRate = parseFloat(document.getElementById('inf-rate').value)/100;
+  const invRate = parseFloat(document.getElementById('inf-invest').value)/100;
+  document.getElementById('inf-amount-val').textContent  = '$'+amount.toLocaleString();
+  document.getElementById('inf-years-val').textContent   = years+' year'+(years===1?'':'s');
+  document.getElementById('inf-rate-val').textContent    = (infRate*100).toFixed(1)+'%';
+  document.getElementById('inf-invest-val').textContent  = (invRate*100).toFixed(1)+'%';
+  const realValue = amount / Math.pow(1+infRate, years);
+  const nomValue  = amount; // cash under mattress, nominal stays same
+  const invValue  = amount * Math.pow(1+invRate, years);
+  const loss = amount - realValue;
+  document.getElementById('inf-today').textContent        = fmt$(amount);
+  document.getElementById('inf-future-worth').textContent = fmt$(realValue);
+  document.getElementById('inf-years-txt').textContent    = years;
+  document.getElementById('inf-result').textContent       = fmt$(realValue);
+  document.getElementById('inf-loss').textContent         = fmt$(loss);
+  document.getElementById('inf-rb-nom').textContent       = fmt$(nomValue);
+  document.getElementById('inf-rb-real').textContent      = fmt$(realValue);
+  document.getElementById('inf-rb-inv').textContent       = fmt$(invValue);
+  // Chart
+  const yrs  = Array.from({length:years+1},(_,i)=>i);
+  const cash  = yrs.map(()=>amount);
+  const real  = yrs.map(y => amount/Math.pow(1+infRate,y));
+  const inv   = yrs.map(y => amount*Math.pow(1+invRate,y));
+  if (infChart) infChart.destroy();
+  const ctx = document.getElementById('infChart').getContext('2d');
+  infChart = new Chart(ctx, {
+    type:'line',
+    data:{
+      labels: yrs.map(y=>'Yr '+y),
+      datasets:[
+        { label:'Invested', data:inv, borderColor:'#10b981', backgroundColor:'rgba(16,185,129,0.1)', borderWidth:2.5, fill:true, tension:0.4, pointRadius:0 },
+        { label:'Cash (nominal)', data:cash, borderColor:'rgba(34,211,238,0.5)', borderDash:[5,5], borderWidth:1.5, fill:false, pointRadius:0 },
+        { label:'Real Value (after inflation)', data:real, borderColor:'#f43f5e', backgroundColor:'rgba(244,63,94,0.1)', borderWidth:2, fill:true, tension:0.4, pointRadius:0 }
+      ]
+    },
+    options:{ responsive:true, maintainAspectRatio:false,
+      plugins:{ legend:{labels:{font:{size:11}}}, tooltip:{ callbacks:{ label:ctx=>' '+fmt$(ctx.raw) } } },
+      scales:{
+        x:{ grid:{display:false}, ticks:{maxTicksLimit:8,font:{size:11}} },
+        y:{ grid:{color:'rgba(34,211,238,0.06)'}, ticks:{ callback:v=>'$'+(v/1000).toFixed(0)+'K', font:{size:11} } }
+      }
+    }
+  });
+}
+document.addEventListener('DOMContentLoaded', () => {
+  applyChartDefaults();
+  calcGrowth();
+  calcRetirement();
+  calcSIP();
+  calcInflation();
+});
+</script>
+</body>
+</html>

index.html ADDED Viewed

	@@ -0,0 +1,409 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>FinWise — Dashboard</title>
+<link rel="stylesheet" href="shared.css">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<style>
+.hero-banner {
+  background: linear-gradient(135deg, rgba(34,211,238,0.08) 0%, rgba(16,185,129,0.05) 100%);
+  border: 1px solid var(--border2);
+  border-radius: var(--r-lg);
+  padding: 28px 32px;
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  position: relative;
+  overflow: hidden;
+}
+.hero-banner::before {
+  content: '';
+  position: absolute;
+  top: -40px; right: -40px;
+  width: 200px; height: 200px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(34,211,238,0.12) 0%, transparent 70%);
+  pointer-events: none;
+}
+.hero-greeting { font-family: var(--font-head); font-size: 13px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.1em; }
+.hero-amount   { font-family: var(--font-head); font-size: 42px; font-weight: 800; line-height: 1; margin: 8px 0; }
+.hero-sub      { font-size: 14px; color: var(--text2); }
+.hero-actions  { display: flex; gap: 12px; flex-wrap: wrap; }
+.portfolio-value-change { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
+.quick-actions {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 24px;
+}
+.quick-action-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 18px;
+  text-align: center;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all var(--transition);
+  display: block;
+}
+.quick-action-card:hover {
+  border-color: var(--border2);
+  transform: translateY(-3px);
+  box-shadow: var(--glow-c);
+}
+.qa-icon  { font-size: 28px; margin-bottom: 8px; }
+.qa-label { font-size: 12px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.06em; }
+.chart-card { height: 100%; }
+.chart-container { position: relative; height: 240px; }
+.goal-item {
+  margin-bottom: 16px;
+}
+.goal-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 6px;
+  font-size: 13px;
+}
+.goal-name { font-weight: 600; }
+.goal-pct  { color: var(--cyan); font-family: var(--font-mono); }
+.activity-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(34,211,238,0.05);
+}
+.activity-item:last-child { border-bottom: none; }
+.activity-icon {
+  width: 38px; height: 38px;
+  border-radius: 10px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+.activity-info { flex: 1; }
+.activity-name { font-weight: 600; font-size: 14px; }
+.activity-date { font-size: 12px; color: var(--text2); margin-top: 2px; }
+.activity-amount { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
+.market-overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: 10px;
+}
+.market-item {
+  background: var(--bg3);
+  border-radius: var(--r-sm);
+  padding: 12px;
+  text-align: center;
+}
+.market-sym { font-size: 11px; font-weight: 700; color: var(--text2); margin-bottom: 4px; }
+.market-val { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
+.market-chg { font-size: 11px; margin-top: 2px; font-weight: 600; }
+.allocation-legend { margin-top: 12px; }
+.legend-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 6px 0;
+  font-size: 13px;
+}
+.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+.legend-name { flex: 1; color: var(--text2); }
+.legend-pct  { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 600; }
+</style>
+</head>
+<body>
+<div class="app-shell">
+  <!-- Sidebar -->
+  <nav class="sidebar">
+    <div class="sidebar-logo">
+      <div class="logo-mark">
+        <div class="logo-icon">📈</div>
+        <div>
+          <div class="logo-text">FinWise</div>
+          <div class="logo-sub">Smart Investing</div>
+        </div>
+      </div>
+    </div>
+    <div class="nav-section">
+      <div class="nav-label">Main</div>
+      <a href="index.html"       class="nav-item"><span class="nav-icon">🏠</span> Dashboard</a>
+      <a href="portfolio.html"   class="nav-item"><span class="nav-icon">📊</span> Portfolio Builder</a>
+      <a href="risk.html"        class="nav-item"><span class="nav-icon">🎯</span> Risk Analyzer</a>
+      <a href="tracker.html"     class="nav-item"><span class="nav-icon">📈</span> Tracker</a>
+      <div class="nav-label">Tools</div>
+      <a href="calculators.html" class="nav-item"><span class="nav-icon">🧮</span> Calculators</a>
+      <a href="insights.html"    class="nav-item"><span class="nav-icon">💡</span> Insights <span class="nav-badge">New</span></a>
+    </div>
+    <div class="sidebar-footer">
+      <div class="market-ticker">Live Market</div>
+      <div id="sidebar-tickers"></div>
+    </div>
+  </nav>
+  <!-- Main -->
+  <main class="main-content">
+    <!-- Hero Banner -->
+    <div class="hero-banner fade-in">
+      <div>
+        <div class="hero-greeting">👋 Good morning, Investor</div>
+        <div class="hero-amount" id="hero-amount">$0.00</div>
+        <div class="portfolio-value-change">
+          <span class="badge badge-emerald" id="hero-badge">▲ +$0.00 today</span>
+          <span class="text-muted text-sm">Total portfolio value</span>
+        </div>
+        <div class="hero-sub" style="margin-top:10px;">Your portfolio is performing <strong style="color:var(--cyan)">above average</strong> this month 🚀</div>
+      </div>
+      <div class="hero-actions">
+        <a href="portfolio.html" class="btn btn-primary">🔧 Build Portfolio</a>
+        <a href="tracker.html"   class="btn btn-secondary">📊 View Tracker</a>
+      </div>
+    </div>
+    <!-- Stat Grid -->
+    <div class="stat-grid fade-in fade-in-1">
+      <div class="stat-card" style="--accent-color: var(--cyan)">
+        <div class="stat-label">Total Invested</div>
+        <div class="stat-value" id="stat-invested">$0</div>
+        <div class="stat-change up">📅 Since inception</div>
+      </div>
+      <div class="stat-card" style="--accent-color: var(--emerald)">
+        <div class="stat-label">Total Gain/Loss</div>
+        <div class="stat-value up" id="stat-gain">+$0</div>
+        <div class="stat-change up" id="stat-gain-pct">▲ 0.00%</div>
+      </div>
+      <div class="stat-card" style="--accent-color: var(--violet)">
+        <div class="stat-label">Risk Score</div>
+        <div class="stat-value" id="stat-risk">—</div>
+        <div class="stat-change" id="stat-risk-label">Moderate</div>
+      </div>
+      <div class="stat-card" style="--accent-color: var(--amber)">
+        <div class="stat-label">Diversification</div>
+        <div class="stat-value" id="stat-div">—</div>
+        <div class="stat-change up">▲ Well balanced</div>
+      </div>
+    </div>
+    <!-- Quick Actions -->
+    <div class="quick-actions fade-in fade-in-2">
+      <a href="portfolio.html"   class="quick-action-card"><div class="qa-icon">🏗️</div><div class="qa-label">Build Portfolio</div></a>
+      <a href="risk.html"        class="quick-action-card"><div class="qa-icon">🎯</div><div class="qa-label">Risk Check</div></a>
+      <a href="calculators.html" class="quick-action-card"><div class="qa-icon">🧮</div><div class="qa-label">Calculators</div></a>
+      <a href="insights.html"    class="quick-action-card"><div class="qa-icon">💡</div><div class="qa-label">AI Insights</div></a>
+    </div>
+    <!-- Charts Row -->
+    <div class="grid-60-40 fade-in fade-in-3" style="margin-bottom:20px">
+      <div class="card chart-card">
+        <div class="card-title">📈 Portfolio Performance <span class="badge badge-emerald" style="margin-left:auto">+12.4% YTD</span></div>
+        <div class="chart-container">
+          <canvas id="performanceChart"></canvas>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-title">🥧 Allocation</div>
+        <div style="position:relative;height:180px">
+          <canvas id="allocChart"></canvas>
+        </div>
+        <div class="allocation-legend" id="alloc-legend"></div>
+      </div>
+    </div>
+    <!-- Bottom Row -->
+    <div class="grid-2 fade-in fade-in-4">
+      <!-- Goals -->
+      <div class="card">
+        <div class="card-title">🎯 Goal Progress</div>
+        <div id="goals-list">
+          <div class="goal-item">
+            <div class="goal-header"><span class="goal-name">🏖️ Retirement Fund</span><span class="goal-pct">34%</span></div>
+            <div class="progress-bar"><div class="progress-fill" style="width:34%;background:linear-gradient(90deg,var(--cyan),var(--emerald))"></div></div>
+            <div class="text-sm text-muted" style="margin-top:4px">$34,000 / $100,000 target by 2045</div>
+          </div>
+          <div class="goal-item">
+            <div class="goal-header"><span class="goal-name">🏠 Down Payment</span><span class="goal-pct">61%</span></div>
+            <div class="progress-bar"><div class="progress-fill" style="width:61%;background:linear-gradient(90deg,var(--violet),var(--cyan))"></div></div>
+            <div class="text-sm text-muted" style="margin-top:4px">$30,500 / $50,000 target by 2027</div>
+          </div>
+          <div class="goal-item">
+            <div class="goal-header"><span class="goal-name">📚 Education Fund</span><span class="goal-pct">18%</span></div>
+            <div class="progress-bar"><div class="progress-fill" style="width:18%;background:linear-gradient(90deg,var(--amber),var(--rose))"></div></div>
+            <div class="text-sm text-muted" style="margin-top:4px">$3,600 / $20,000 target by 2030</div>
+          </div>
+        </div>
+        <a href="calculators.html" class="btn btn-secondary btn-sm btn-full" style="margin-top:16px">Plan a new goal →</a>
+      </div>
+      <!-- Recent Activity -->
+      <div class="card">
+        <div class="card-title">⚡ Recent Activity</div>
+        <div id="activity-list">
+          <div class="activity-item">
+            <div class="activity-icon" style="background:rgba(16,185,129,0.15)">💰</div>
+            <div class="activity-info"><div class="activity-name">Bought VOO</div><div class="activity-date">May 1, 2026</div></div>
+            <div class="activity-amount up">+3 shares</div>
+          </div>
+          <div class="activity-item">
+            <div class="activity-icon" style="background:rgba(34,211,238,0.15)">📥</div>
+            <div class="activity-info"><div class="activity-name">Dividend — AAPL</div><div class="activity-date">Apr 28, 2026</div></div>
+            <div class="activity-amount up">+$12.40</div>
+          </div>
+          <div class="activity-item">
+            <div class="activity-icon" style="background:rgba(139,92,246,0.15)">🔄</div>
+            <div class="activity-info"><div class="activity-name">Rebalanced Portfolio</div><div class="activity-date">Apr 20, 2026</div></div>
+            <div class="activity-amount" style="color:var(--text2)">Optimized</div>
+          </div>
+          <div class="activity-item">
+            <div class="activity-icon" style="background:rgba(245,158,11,0.15)">💹</div>
+            <div class="activity-info"><div class="activity-name">Added NVDA</div><div class="activity-date">Apr 15, 2026</div></div>
+            <div class="activity-amount up">+1 share</div>
+          </div>
+        </div>
+        <a href="tracker.html" class="btn btn-secondary btn-sm btn-full" style="margin-top:16px">Full history →</a>
+      </div>
+    </div>
+    <!-- Market Overview -->
+    <div class="card fade-in" style="margin-top:20px">
+      <div class="card-title">🌐 Market Overview</div>
+      <div class="market-overview">
+        <div class="market-item"><div class="market-sym">S&P 500</div><div class="market-val">5,308</div><div class="market-chg up">▲ +0.26%</div></div>
+        <div class="market-item"><div class="market-sym">NASDAQ</div><div class="market-val">16,742</div><div class="market-chg down">▼ -0.46%</div></div>
+        <div class="market-item"><div class="market-sym">DOW</div><div class="market-val">39,512</div><div class="market-chg up">▲ +0.18%</div></div>
+        <div class="market-item"><div class="market-sym">BTC</div><div class="market-val">$68,420</div><div class="market-chg up">▲ +2.14%</div></div>
+        <div class="market-item"><div class="market-sym">GOLD</div><div class="market-val">$2,318</div><div class="market-chg up">▲ +1.49%</div></div>
+        <div class="market-item"><div class="market-sym">10Y BOND</div><div class="market-val">4.48%</div><div class="market-chg down">▼ -0.03%</div></div>
+        <div class="market-item"><div class="market-sym">USD/EUR</div><div class="market-val">0.924</div><div class="market-chg down">▼ -0.12%</div></div>
+        <div class="market-item"><div class="market-sym">VIX</div><div class="market-val">14.82</div><div class="market-chg up">▲ +3.2%</div></div>
+      </div>
+    </div>
+  </main>
+</div>
+<!-- Mobile Bottom Nav -->
+<nav class="bottom-nav">
+  <div class="bottom-nav-inner">
+    <a href="index.html"       class="bottom-nav-item"><span class="bnav-icon">🏠</span>Home</a>
+    <a href="portfolio.html"   class="bottom-nav-item"><span class="bnav-icon">📊</span>Portfolio</a>
+    <a href="risk.html"        class="bottom-nav-item"><span class="bnav-icon">🎯</span>Risk</a>
+    <a href="tracker.html"     class="bottom-nav-item"><span class="bnav-icon">📈</span>Track</a>
+    <a href="calculators.html" class="bottom-nav-item"><span class="bnav-icon">🧮</span>Calc</a>
+    <a href="insights.html"    class="bottom-nav-item"><span class="bnav-icon">💡</span>Insights</a>
+  </div>
+</nav>
+<script src="shared.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const portfolio = getPortfolio();
+  const currentValue = portfolio.assets.reduce((s,a) => s + a.shares * a.price, 0);
+  const invested    = portfolio.totalInvested;
+  const gain        = currentValue - invested;
+  const gainPct     = (gain / invested) * 100;
+  const todayChange = currentValue * 0.0026;
+  // Hero
+  animateCounter(document.getElementById('hero-amount'), currentValue, '$');
+  document.getElementById('hero-badge').textContent = `▲ +$${todayChange.toFixed(2)} today`;
+  // Stats
+  document.getElementById('stat-invested').textContent = fmtK(invested);
+  const gainEl = document.getElementById('stat-gain');
+  gainEl.textContent = (gain >= 0 ? '+' : '') + fmt$(gain);
+  gainEl.className = 'stat-value ' + (gain >= 0 ? 'up' : 'down');
+  document.getElementById('stat-gain-pct').textContent = (gainPct >= 0 ? '▲ +' : '▼ ') + gainPct.toFixed(2) + '%';
+  document.getElementById('stat-gain-pct').className = 'stat-change ' + (gain >= 0 ? 'up' : 'down');
+  const riskScore = calcRiskScore(portfolio);
+  const divScore  = calcDiversification(portfolio);
+  document.getElementById('stat-risk').textContent = riskScore + '/100';
+  const riskLabels = ['Very Low','Low','Moderate','Moderate-High','High'];
+  const riskLabel  = riskLabels[Math.floor(riskScore / 25)];
+  document.getElementById('stat-risk-label').textContent = '→ ' + riskLabel;
+  document.getElementById('stat-div').textContent = divScore + '/100';
+  // Performance Chart
+  const history = generateHistory(90, invested * 0.88);
+  const perfCtx = document.getElementById('performanceChart').getContext('2d');
+  const grad = perfCtx.createLinearGradient(0, 0, 0, 240);
+  grad.addColorStop(0, 'rgba(34,211,238,0.25)');
+  grad.addColorStop(1, 'rgba(34,211,238,0)');
+  new Chart(perfCtx, {
+    type: 'line',
+    data: {
+      labels: history.filter((_,i) => i % 6 === 0).map(d => d.date),
+      datasets: [{
+        label: 'Portfolio Value',
+        data: history.filter((_,i) => i % 6 === 0).map(d => d.value),
+        borderColor: '#22d3ee',
+        backgroundColor: grad,
+        borderWidth: 2.5,
+        fill: true,
+        tension: 0.45,
+        pointRadius: 0,
+        pointHoverRadius: 5,
+        pointHoverBackgroundColor: '#22d3ee',
+      }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { display: false }, tooltip: {
+        callbacks: { label: ctx => ' $' + ctx.raw.toLocaleString('en-US', {maximumFractionDigits:0}) }
+      }},
+      scales: {
+        x: { grid: { display: false }, ticks: { maxTicksLimit: 6, font: { size: 11 } } },
+        y: { grid: { color: 'rgba(34,211,238,0.06)' }, ticks: {
+          callback: v => '$' + (v/1000).toFixed(0) + 'K', font: { size: 11 }
+        }}
+      },
+      interaction: { intersect: false, mode: 'index' }
+    }
+  });
+  // Allocation Donut
+  const allocCtx = document.getElementById('allocChart').getContext('2d');
+  new Chart(allocCtx, {
+    type: 'doughnut',
+    data: {
+      labels: portfolio.assets.map(a => a.ticker),
+      datasets: [{
+        data: portfolio.assets.map(a => a.pct),
+        backgroundColor: portfolio.assets.map(a => a.color),
+        borderColor: 'rgba(5,13,26,0.8)',
+        borderWidth: 3,
+        hoverOffset: 8
+      }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      cutout: '70%',
+      plugins: { legend: { display: false } }
+    }
+  });
+  // Legend
+  const legendEl = document.getElementById('alloc-legend');
+  legendEl.innerHTML = portfolio.assets.slice(0,5).map(a => `
+    <div class="legend-item">
+      <div class="legend-dot" style="background:${a.color}"></div>
+      <span class="legend-name">${a.ticker}</span>
+      <span class="legend-pct">${a.pct}%</span>
+    </div>
+  `).join('') + (portfolio.assets.length > 5 ? `<div class="legend-item"><span class="legend-name text-muted">+ ${portfolio.assets.length-5} more</span></div>` : '');
+});
+</script>
+</body>
+</html>

insights.html ADDED Viewed

	@@ -0,0 +1,860 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>FinWise — AI Insights</title>
+<link rel="stylesheet" href="shared.css">
+<style>
+/* ── AI Chat Interface ──────────────────────────────────────────── */
+.ai-chat-wrap {
+  display: flex;
+  flex-direction: column;
+  height: 420px;
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  overflow: hidden;
+}
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.chat-message {
+  display: flex;
+  gap: 10px;
+  max-width: 90%;
+  animation: fadeInUp 0.3s ease;
+}
+.chat-message.user {
+  margin-left: auto;
+  flex-direction: row-reverse;
+}
+.chat-avatar {
+  width: 32px; height: 32px;
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
+  align-self: flex-end;
+}
+.chat-avatar.ai-av   { background: linear-gradient(135deg, var(--cyan), var(--emerald)); }
+.chat-avatar.user-av { background: linear-gradient(135deg, var(--violet), var(--indigo)); }
+.chat-bubble {
+  padding: 12px 16px;
+  border-radius: 14px;
+  font-size: 14px;
+  line-height: 1.6;
+  max-width: 100%;
+}
+.chat-bubble.ai   { background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
+.chat-bubble.user { background: linear-gradient(135deg,var(--cyan-d),var(--cyan)); color: var(--bg); border-bottom-right-radius: 4px; }
+.chat-bubble.ai strong { color: var(--cyan); }
+.chat-bubble.ai em { color: var(--emerald); font-style: normal; font-weight: 600; }
+.chat-bubble ul { padding-left: 18px; margin-top: 6px; }
+.chat-bubble li { margin-bottom: 4px; }
+.chat-typing {
+  display: flex;
+  gap: 4px;
+  padding: 14px 16px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  border-bottom-left-radius: 4px;
+  width: fit-content;
+}
+.chat-typing span {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  background: var(--cyan);
+  animation: typing 1.2s infinite;
+}
+.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
+.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes typing { 0%,100%{opacity:0.3;transform:scale(0.8)} 50%{opacity:1;transform:scale(1)} }
+.chat-input-bar {
+  border-top: 1px solid var(--border);
+  padding: 12px 16px;
+  display: flex;
+  gap: 10px;
+  background: var(--bg2);
+}
+.chat-input {
+  flex: 1;
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  border-radius: 100px;
+  padding: 10px 18px;
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: 14px;
+  outline: none;
+  transition: border-color var(--transition);
+  width: auto;
+}
+.chat-input:focus { border-color: var(--cyan); }
+.chat-send-btn {
+  width: 42px; height: 42px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--cyan-d), var(--cyan));
+  border: none;
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 18px;
+  transition: all var(--transition);
+  flex-shrink: 0;
+}
+.chat-send-btn:hover { box-shadow: 0 0 16px rgba(34,211,238,0.5); transform: scale(1.05); }
+.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+.quick-prompts {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 10px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--bg2);
+}
+.quick-prompt {
+  padding: 6px 12px;
+  border-radius: 100px;
+  border: 1px solid var(--border2);
+  background: transparent;
+  color: var(--text2);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: var(--font-body);
+  transition: all var(--transition);
+  white-space: nowrap;
+}
+.quick-prompt:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(34,211,238,0.06); }
+/* ── Concept Cards ──────────────────────────────────────────────── */
+.concept-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+.concept-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 20px;
+  transition: all var(--transition);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.concept-card::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 2px;
+  background: var(--concept-color, var(--cyan));
+}
+.concept-card:hover {
+  border-color: var(--border2);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
+}
+.concept-icon  { font-size: 32px; margin-bottom: 10px; }
+.concept-title { font-family: var(--font-head); font-size: 16px; font-weight: 700; margin-bottom: 6px; }
+.concept-desc  { font-size: 13px; color: var(--text2); line-height: 1.5; }
+.concept-tag   { margin-top: 12px; }
+/* ── Do's & Don'ts ──────────────────────────────────────────────── */
+.dos-donts {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+.do-card {
+  background: rgba(16,185,129,0.05);
+  border: 1px solid rgba(16,185,129,0.2);
+  border-radius: var(--r);
+  padding: 20px;
+}
+.dont-card {
+  background: rgba(244,63,94,0.05);
+  border: 1px solid rgba(244,63,94,0.2);
+  border-radius: var(--r);
+  padding: 20px;
+}
+.do-header   { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--emerald); margin-bottom: 14px; }
+.dont-header { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--rose);    margin-bottom: 14px; }
+.tip-item {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.tip-icon { flex-shrink: 0; font-size: 16px; margin-top: 1px; }
+/* ── Insight Cards ──────────────────────────────────────────────── */
+.insight-feed { display: flex; flex-direction: column; gap: 14px; }
+.insight-item {
+  display: flex;
+  gap: 14px;
+  padding: 16px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  transition: all var(--transition);
+}
+.insight-item:hover { border-color: var(--border2); }
+.insight-category {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 6px;
+}
+.insight-title { font-weight: 700; font-size: 14px; margin-bottom: 5px; }
+.insight-body  { font-size: 13px; color: var(--text2); line-height: 1.5; }
+/* ── Glossary ───────────────────────────────────────────────────── */
+.glossary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
+  gap: 12px;
+}
+.glossary-item {
+  background: var(--bg3);
+  border-radius: var(--r-sm);
+  padding: 14px;
+  border: 1px solid var(--border);
+}
+.glos-term { font-weight: 700; color: var(--cyan); margin-bottom: 4px; font-size: 14px; }
+.glos-def  { font-size: 12px; color: var(--text2); line-height: 1.5; }
+/* ── Tabs ───────────────────────────────────────────────────────── */
+.insight-tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+.ins-tab {
+  padding: 9px 18px;
+  border-radius: 100px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text2);
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.ins-tab:hover { border-color: var(--border2); color: var(--text); }
+.ins-tab.active { border-color: var(--cyan); background: rgba(34,211,238,0.1); color: var(--cyan); }
+.ins-panel { display: none; }
+.ins-panel.active { display: block; }
+.gamification-bar {
+  background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(34,211,238,0.05));
+  border: 1px solid rgba(139,92,246,0.2);
+  border-radius: var(--r);
+  padding: 20px 24px;
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+.xp-badge {
+  background: linear-gradient(135deg, var(--violet), var(--indigo));
+  border-radius: var(--r-sm);
+  padding: 14px;
+  text-align: center;
+  min-width: 80px;
+}
+.xp-val { font-family: var(--font-head); font-size: 22px; font-weight: 800; }
+.xp-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; }
+.level-info { flex: 1; }
+.level-name { font-family: var(--font-head); font-size: 18px; font-weight: 700; margin-bottom: 4px; }
+.achievements {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 12px;
+}
+.achievement {
+  background: var(--bg3);
+  border-radius: var(--r-sm);
+  padding: 8px 12px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--border);
+}
+.achievement.earned { border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); }
+</style>
+</head>
+<body>
+<div class="app-shell">
+  <nav class="sidebar">
+    <div class="sidebar-logo">
+      <div class="logo-mark">
+        <div class="logo-icon">📈</div>
+        <div><div class="logo-text">FinWise</div><div class="logo-sub">Smart Investing</div></div>
+      </div>
+    </div>
+    <div class="nav-section">
+      <div class="nav-label">Main</div>
+      <a href="index.html"       class="nav-item"><span class="nav-icon">🏠</span> Dashboard</a>
+      <a href="portfolio.html"   class="nav-item"><span class="nav-icon">📊</span> Portfolio Builder</a>
+      <a href="risk.html"        class="nav-item"><span class="nav-icon">🎯</span> Risk Analyzer</a>
+      <a href="tracker.html"     class="nav-item"><span class="nav-icon">📈</span> Tracker</a>
+      <div class="nav-label">Tools</div>
+      <a href="calculators.html" class="nav-item"><span class="nav-icon">🧮</span> Calculators</a>
+      <a href="insights.html"    class="nav-item"><span class="nav-icon">💡</span> Insights <span class="nav-badge">New</span></a>
+    </div>
+    <div class="sidebar-footer">
+      <div class="market-ticker">Live Market</div>
+      <div id="sidebar-tickers"></div>
+    </div>
+  </nav>
+  <main class="main-content">
+    <div class="page-header fade-in">
+      <div class="page-title">AI <span>Insights</span></div>
+      <div class="page-subtitle">Personalized guidance, education, and smart financial tips powered by AI</div>
+    </div>
+    <!-- Gamification Bar -->
+    <div class="gamification-bar fade-in">
+      <div class="xp-badge">
+        <div class="xp-val">340</div>
+        <div class="xp-lbl">XP Points</div>
+      </div>
+      <div class="level-info">
+        <div class="level-name">🌱 Growing Investor — Level 4</div>
+        <div class="text-muted text-sm">160 XP until Level 5: Savvy Saver</div>
+        <div class="progress-bar" style="margin-top:8px">
+          <div class="progress-fill" style="width:68%;background:linear-gradient(90deg,var(--violet),var(--cyan))"></div>
+        </div>
+        <div class="achievements">
+          <div class="achievement earned">🏆 First Portfolio</div>
+          <div class="achievement earned">📊 Risk Assessed</div>
+          <div class="achievement earned">🧮 Calc Explorer</div>
+          <div class="achievement" style="opacity:0.5">🎯 Goal Setter</div>
+          <div class="achievement" style="opacity:0.5">💰 $10K Milestone</div>
+        </div>
+      </div>
+    </div>
+    <!-- Tab Nav -->
+    <div class="insight-tabs fade-in">
+      <button class="ins-tab active" data-ins="ai-chat">🤖 AI Advisor</button>
+      <button class="ins-tab" data-ins="daily">💡 Daily Insights</button>
+      <button class="ins-tab" data-ins="concepts">📚 Concepts</button>
+      <button class="ins-tab" data-ins="dos-donts">✅ Do's & Don'ts</button>
+      <button class="ins-tab" data-ins="glossary">📖 Glossary</button>
+    </div>
+    <!-- ════════════════════════════════════════════════════════════
+         AI ADVISOR TAB
+    ════════════════════════════════════════════════════════════ -->
+    <div class="ins-panel active fade-in" id="ins-ai-chat">
+      <div class="grid-60-40">
+        <div>
+          <div class="card" style="padding:0;overflow:hidden">
+            <div style="padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px">
+              <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--emerald));display:flex;align-items:center;justify-content:center;font-size:18px">🤖</div>
+              <div>
+                <div style="font-weight:700;font-size:15px">FinWise AI</div>
+                <div style="font-size:12px;color:var(--emerald)">● Online · Powered by Claude</div>
+              </div>
+              <div style="margin-left:auto">
+                <span class="badge badge-cyan">Beta</span>
+              </div>
+            </div>
+            <div class="ai-chat-wrap" style="border:none;border-radius:0;height:380px">
+              <div class="chat-messages" id="chat-messages">
+                <!-- Initial message -->
+                <div class="chat-message">
+                  <div class="chat-avatar ai-av">🤖</div>
+                  <div class="chat-bubble ai">
+                    <strong>Hey there, investor! 👋</strong><br><br>
+                    I'm your AI financial advisor. I can help you understand your portfolio, explain investing concepts, and give personalized guidance based on your goals.<br><br>
+                    <em>What would you like to explore today?</em>
+                  </div>
+                </div>
+              </div>
+              <div class="quick-prompts">
+                <button class="quick-prompt" onclick="sendQuickPrompt(this)">📊 Analyze my portfolio</button>
+                <button class="quick-prompt" onclick="sendQuickPrompt(this)">🎯 Am I taking too much risk?</button>
+                <button class="quick-prompt" onclick="sendQuickPrompt(this)">💡 How do ETFs work?</button>
+                <button class="quick-prompt" onclick="sendQuickPrompt(this)">🏖️ Retirement planning tips</button>
+                <button class="quick-prompt" onclick="sendQuickPrompt(this)">📈 What is dollar-cost averaging?</button>
+                <button class="quick-prompt" onclick="sendQuickPrompt(this)">⚡ Should I rebalance now?</button>
+              </div>
+              <div class="chat-input-bar">
+                <input type="text" class="chat-input" id="chat-input" placeholder="Ask me anything about investing…" onkeydown="if(event.key==='Enter')sendMessage()">
+                <button class="chat-send-btn" id="send-btn" onclick="sendMessage()">➤</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Sidebar topics -->
+        <div>
+          <div class="card">
+            <div class="card-title">📌 Suggested Topics</div>
+            <div class="insight-feed">
+              <div class="insight-item" style="cursor:pointer" onclick="sendText('What is compound interest and why is it important?')">
+                <div>
+                  <div class="insight-category" style="color:var(--cyan)">🎓 Education</div>
+                  <div class="insight-title">The Magic of Compound Interest</div>
+                  <div class="insight-body">Why time in market beats timing the market</div>
+                </div>
+              </div>
+              <div class="insight-item" style="cursor:pointer" onclick="sendText('Explain the 4% rule for retirement withdrawals')">
+                <div>
+                  <div class="insight-category" style="color:var(--emerald)">🏖️ Retirement</div>
+                  <div class="insight-title">The 4% Withdrawal Rule</div>
+                  <div class="insight-body">How much you can safely spend in retirement</div>
+                </div>
+              </div>
+              <div class="insight-item" style="cursor:pointer" onclick="sendText('What is portfolio rebalancing and when should I do it?')">
+                <div>
+                  <div class="insight-category" style="color:var(--violet)">⚖️ Strategy</div>
+                  <div class="insight-title">When to Rebalance</div>
+                  <div class="insight-body">Keep your risk in check automatically</div>
+                </div>
+              </div>
+              <div class="insight-item" style="cursor:pointer" onclick="sendText('What is the difference between ETFs and mutual funds?')">
+                <div>
+                  <div class="insight-category" style="color:var(--amber)">📊 Basics</div>
+                  <div class="insight-title">ETFs vs Mutual Funds</div>
+                  <div class="insight-body">Which is better for beginner investors?</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- AI context card -->
+          <div class="card" style="margin-top:16px;background:linear-gradient(135deg,rgba(34,211,238,0.06),rgba(16,185,129,0.03))">
+            <div class="card-title">📊 Your Portfolio Context</div>
+            <div id="context-summary" style="font-size:13px;color:var(--text2);line-height:1.6"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ════════════════════════════════════════════════════════════
+         DAILY INSIGHTS TAB
+    ════════════════════════════════════════════════════════════ -->
+    <div class="ins-panel" id="ins-daily">
+      <div class="insight-feed">
+        <div class="insight-item">
+          <div style="font-size:36px">🌅</div>
+          <div>
+            <div class="insight-category badge-cyan">Daily Tip</div>
+            <div class="insight-title">Automate Your Investments</div>
+            <div class="insight-body">Set up automatic monthly contributions — even $100/month invested consistently can grow to over $200,000 in 30 years at a 10% return. Automation removes emotion from the equation and builds the habit effortlessly.</div>
+          </div>
+        </div>
+        <div class="insight-item">
+          <div style="font-size:36px">📰</div>
+          <div>
+            <div class="insight-category badge-amber">Market Insight</div>
+            <div class="insight-title">Fed Policy & Your Bonds</div>
+            <div class="insight-body">When interest rates rise, bond prices fall. If you're holding BND or similar ETFs in your portfolio, rising rates reduce their short-term value — but also mean higher yields going forward. Long-term investors should stay the course.</div>
+          </div>
+        </div>
+        <div class="insight-item">
+          <div style="font-size:36px">⚡</div>
+          <div>
+            <div class="insight-category badge-emerald">Action Item</div>
+            <div class="insight-title">Review Your Emergency Fund First</div>
+            <div class="insight-body">Before investing more, ensure you have 3-6 months of expenses in a high-yield savings account (HYSA). With rates above 4.5% APY at some banks, your emergency fund can earn real money while staying liquid.</div>
+          </div>
+        </div>
+        <div class="insight-item">
+          <div style="font-size:36px">🧠</div>
+          <div>
+            <div class="insight-category badge-violet">Behavioral Finance</div>
+            <div class="insight-title">Don't Check Your Portfolio Daily</div>
+            <div class="insight-body">Studies show that investors who check their portfolios more often make more emotional trades and achieve worse returns. Set a calendar reminder to review quarterly — not daily. Your future self will thank you.</div>
+          </div>
+        </div>
+        <div class="insight-item">
+          <div style="font-size:36px">💡</div>
+          <div>
+            <div class="insight-category badge-rose">Watch Out For</div>
+            <div class="insight-title">Expense Ratios Add Up</div>
+            <div class="insight-body">A fund with 1% expense ratio vs 0.03% (like VOO) costs you over $250,000 on a $100K investment over 30 years. Always compare expense ratios before buying mutual funds or ETFs.</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- ════════════════════════════════════════════════════════════
+         CONCEPTS TAB
+    ════════════════════════════════════════════════════════════ -->
+    <div class="ins-panel" id="ins-concepts">
+      <div class="concept-grid">
+        <div class="concept-card" style="--concept-color:var(--cyan)" onclick="sendText('Explain compound interest with a real example')">
+          <div class="concept-icon">⚡</div>
+          <div class="concept-title">Compound Interest</div>
+          <div class="concept-desc">The 8th wonder of the world — earning interest on your interest. Time is your greatest asset.</div>
+          <div class="concept-tag"><span class="badge badge-cyan">Beginner</span></div>
+        </div>
+        <div class="concept-card" style="--concept-color:var(--emerald)" onclick="sendText('What is dollar-cost averaging and how do I use it?')">
+          <div class="concept-icon">📅</div>
+          <div class="concept-title">Dollar-Cost Averaging</div>
+          <div class="concept-desc">Invest a fixed amount regularly regardless of price. Reduces the impact of volatility automatically.</div>
+          <div class="concept-tag"><span class="badge badge-emerald">Strategy</span></div>
+        </div>
+        <div class="concept-card" style="--concept-color:var(--violet)" onclick="sendText('Explain diversification and why it matters')">
+          <div class="concept-icon">🌍</div>
+          <div class="concept-title">Diversification</div>
+          <div class="concept-desc">Don't put all your eggs in one basket. Spreading across assets reduces risk without sacrificing returns.</div>
+          <div class="concept-tag"><span class="badge badge-violet">Risk Management</span></div>
+        </div>
+        <div class="concept-card" style="--concept-color:var(--amber)" onclick="sendText('What is asset allocation and how should I allocate my portfolio?')">
+          <div class="concept-icon">🥧</div>
+          <div class="concept-title">Asset Allocation</div>
+          <div class="concept-desc">How you divide money between stocks, bonds, and other assets. The most important investment decision you'll make.</div>
+          <div class="concept-tag"><span class="badge badge-amber">Portfolio</span></div>
+        </div>
+        <div class="concept-card" style="--concept-color:var(--rose)" onclick="sendText('What is beta in investing and what does it tell me?')">
+          <div class="concept-icon">β</div>
+          <div class="concept-title">Beta & Volatility</div>
+          <div class="concept-desc">Beta measures how much an asset moves relative to the market. A beta of 1.5 means 50% more volatile than S&P 500.</div>
+          <div class="concept-tag"><span class="badge badge-rose">Metrics</span></div>
+        </div>
+        <div class="concept-card" style="--concept-color:var(--indigo)" onclick="sendText('What is an index fund and why do most pros recommend it?')">
+          <div class="concept-icon">📊</div>
+          <div class="concept-title">Index Funds</div>
+          <div class="concept-desc">Passively track a market index like the S&P 500. Low cost, diversified, and statistically outperform most active funds.</div>
+          <div class="concept-tag"><span class="badge badge-cyan">Beginner</span></div>
+        </div>
+        <div class="concept-card" style="--concept-color:var(--emerald)" onclick="sendText('Explain the 4% rule for retirement')">
+          <div class="concept-icon">🏖️</div>
+          <div class="concept-title">The 4% Rule</div>
+          <div class="concept-desc">Withdraw 4% of your nest egg annually in retirement. Based on 95% survival rate across 30-year historical periods.</div>
+          <div class="concept-tag"><span class="badge badge-emerald">Retirement</span></div>
+        </div>
+        <div class="concept-card" style="--concept-color:var(--cyan)" onclick="sendText('What is rebalancing and when should I rebalance my portfolio?')">
+          <div class="concept-icon">⚖️</div>
+          <div class="concept-title">Rebalancing</div>
+          <div class="concept-desc">Selling overweight assets and buying underweight ones to restore your target allocation. Do it annually or at 5% drift.</div>
+          <div class="concept-tag"><span class="badge badge-cyan">Strategy</span></div>
+        </div>
+        <div class="concept-card" style="--concept-color:var(--amber)" onclick="sendText('What is expense ratio and how does it affect my returns?')">
+          <div class="concept-icon">💸</div>
+          <div class="concept-title">Expense Ratios</div>
+          <div class="concept-desc">The annual fee funds charge as % of your investment. Even 0.5% more can cost $100K+ over 30 years.</div>
+          <div class="concept-tag"><span class="badge badge-amber">Cost</span></div>
+        </div>
+      </div>
+    </div>
+    <!-- ════════════════════════════════════════════════════════════
+         DO'S & DON'TS TAB
+    ════════════════════════════════════════════════════════════ -->
+    <div class="ins-panel" id="ins-dos-donts">
+      <div class="dos-donts">
+        <div class="do-card">
+          <div class="do-header">✅ Do This</div>
+          <div class="tip-item"><div class="tip-icon">🕰️</div><div><strong>Start early</strong> — Even $50/month at 22 beats $500/month starting at 40. Time is your biggest multiplier.</div></div>
+          <div class="tip-item"><div class="tip-icon">📅</div><div><strong>Automate contributions</strong> — Set it and forget it. Remove emotion and ensure consistency every month.</div></div>
+          <div class="tip-item"><div class="tip-icon">📊</div><div><strong>Keep expense ratios low</strong> — Choose ETFs like VOO (0.03%) over actively managed funds (1%+).</div></div>
+          <div class="tip-item"><div class="tip-icon">🌍</div><div><strong>Diversify broadly</strong> — No single stock should exceed 10% of your portfolio when starting out.</div></div>
+          <div class="tip-item"><div class="tip-icon">💰</div><div><strong>Max out tax-advantaged accounts</strong> — 401k, Roth IRA, or HSA first before taxable accounts.</div></div>
+          <div class="tip-item"><div class="tip-icon">🛡️</div><div><strong>Maintain an emergency fund</strong> — 3–6 months of expenses in cash before investing aggressively.</div></div>
+          <div class="tip-item"><div class="tip-icon">📚</div><div><strong>Keep learning</strong> — Read one finance book a year. Try "The Little Book of Common Sense Investing" by Bogle.</div></div>
+          <div class="tip-item"><div class="tip-icon">📆</div><div><strong>Review quarterly</strong> — Check your portfolio every 3 months, not every day. Avoid reaction trading.</div></div>
+        </div>
+        <div class="dont-card">
+          <div class="dont-header">❌ Don't Do This</div>
+          <div class="tip-item"><div class="tip-icon">📰</div><div><strong>Don't invest based on news</strong> — By the time it's news, the market has already priced it in. Stay the course.</div></div>
+          <div class="tip-item"><div class="tip-icon">🎲</div><div><strong>Don't YOLO into meme stocks</strong> — Treat speculative picks as entertainment money — never more than 5% of portfolio.</div></div>
+          <div class="tip-item"><div class="tip-icon">😱</div><div><strong>Don't panic sell in crashes</strong> — Market drops of 20–40% are normal and temporary. Selling locks in your loss permanently.</div></div>
+          <div class="tip-item"><div class="tip-icon">⏰</div><div><strong>Don't try to time the market</strong> — Missing the 10 best days in the market over 20 years can cut your returns in half.</div></div>
+          <div class="tip-item"><div class="tip-icon">💳</div><div><strong>Don't invest money you need soon</strong> — Any money needed within 3 years should be in a HYSA, not the market.</div></div>
+          <div class="tip-item"><div class="tip-icon">🤙</div><div><strong>Don't take tips from social media</strong> — Most "finfluencers" are not licensed advisors. Verify everything independently.</div></div>
+          <div class="tip-item"><div class="tip-icon">🏦</div><div><strong>Don't ignore fees</strong> — Trading commissions, fund fees, and advisory fees compound over time just like returns do — negatively.</div></div>
+          <div class="tip-item"><div class="tip-icon">🔮</div><div><strong>Don't predict the market</strong> — Even professional fund managers fail to consistently beat the index. Humility pays.</div></div>
+        </div>
+      </div>
+    </div>
+    <!-- ════════════════════════════════════════════════════════════
+         GLOSSARY TAB
+    ════════════════════════════════════════════════════════════ -->
+    <div class="ins-panel" id="ins-glossary">
+      <div style="margin-bottom:16px">
+        <input type="text" id="glossary-search" placeholder="🔍 Search terms…" oninput="filterGlossary()" style="max-width:320px">
+      </div>
+      <div class="glossary-grid" id="glossary-grid"></div>
+    </div>
+  </main>
+</div>
+<nav class="bottom-nav">
+  <div class="bottom-nav-inner">
+    <a href="index.html"       class="bottom-nav-item"><span class="bnav-icon">🏠</span>Home</a>
+    <a href="portfolio.html"   class="bottom-nav-item"><span class="bnav-icon">📊</span>Portfolio</a>
+    <a href="risk.html"        class="bottom-nav-item"><span class="bnav-icon">🎯</span>Risk</a>
+    <a href="tracker.html"     class="bottom-nav-item"><span class="bnav-icon">📈</span>Track</a>
+    <a href="calculators.html" class="bottom-nav-item"><span class="bnav-icon">🧮</span>Calc</a>
+    <a href="insights.html"    class="bottom-nav-item"><span class="bnav-icon">💡</span>Insights</a>
+  </div>
+</nav>
+<script src="shared.js"></script>
+<script>
+// ── Tab Switching ─────────────────────────────────────────────────
+document.querySelectorAll('.ins-tab').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.ins-tab,.ins-panel').forEach(el => el.classList.remove('active'));
+    btn.classList.add('active');
+    document.getElementById('ins-' + btn.dataset.ins).classList.add('active');
+  });
+});
+// ── Portfolio Context Summary ─────────────────────────────────────
+function buildContextSummary() {
+  const p = getPortfolio();
+  const totalVal = p.assets.reduce((s,a)=>s+a.shares*a.price,0);
+  const riskScore = calcRiskScore(p);
+  const divScore  = calcDiversification(p);
+  const equityPct = p.assets.filter(a=>a.type==='Stock'||a.type==='ETF').reduce((s,a)=>s+a.pct,0);
+  document.getElementById('context-summary').innerHTML = `
+    <div style="display:flex;flex-direction:column;gap:6px">
+      <div>💼 <strong>${p.assets.length} holdings</strong> · Total: <strong>${fmt$(totalVal)}</strong></div>
+      <div>🎯 Risk Score: <strong style="color:var(--amber)">${riskScore}/100</strong> · Profile: <strong>${p.riskProfile||'Moderate'}</strong></div>
+      <div>🌍 Diversification: <strong style="color:var(--emerald)">${divScore}/100</strong></div>
+      <div>📊 Equity: <strong>${equityPct}%</strong> · Goals: <strong>${(p.goals||['Wealth Building']).join(', ')}</strong></div>
+    </div>
+  `;
+}
+// ── AI Chat ───────────────────────────────────────────────────────
+let chatHistory = [];
+let isLoading   = false;
+function buildSystemPrompt() {
+  const p = getPortfolio();
+  const totalVal = p.assets.reduce((s,a)=>s+a.shares*(MARKET_PRICES[a.ticker]?.price||a.price),0);
+  const riskScore = calcRiskScore(p);
+  const divScore  = calcDiversification(p);
+  const equityPct = p.assets.filter(a=>a.type==='Stock'||a.type==='ETF').reduce((s,a)=>s+a.pct,0);
+  const bondPct   = p.assets.filter(a=>a.type==='Bond').reduce((s,a)=>s+a.pct,0);
+  return `You are FinWise AI, a friendly, expert financial advisor built into the FinWise personal finance app.
+USER'S PORTFOLIO CONTEXT:
+- Holdings: ${p.assets.map(a=>`${a.ticker} (${a.pct}%)`).join(', ')}
+- Total Value: $${totalVal.toFixed(2)}
+- Total Invested: $${p.totalInvested}
+- Risk Score: ${riskScore}/100 (${p.riskProfile || 'Moderate'})
+- Diversification Score: ${divScore}/100
+- Equity Allocation: ${equityPct}%
+- Bond Allocation: ${bondPct}%
+- Investment Goals: ${(p.goals||['Wealth Building']).join(', ')}
+PERSONA:
+- Friendly, warm, encouraging — never condescending
+- Use simple language; avoid jargon (or explain it when necessary)
+- Be direct and actionable — give concrete advice, not just generic platitudes
+- Use bullet points and bold text for clarity
+- Add relevant emojis to make responses engaging
+- Be concise but complete — aim for 100-200 words per response
+- Always note: you're an AI, not a licensed financial advisor
+FOCUS: Help beginners understand investing. Provide personalized insights based on their actual portfolio above.`;
+}
+async function sendMessage() {
+  const input = document.getElementById('chat-input');
+  const msg = input.value.trim();
+  if (!msg || isLoading) return;
+  input.value = '';
+  sendText(msg);
+}
+function sendQuickPrompt(btn) {
+  sendText(btn.textContent.replace(/^[^ ]+ /,'').trim());
+}
+async function sendText(text) {
+  if (isLoading) return;
+  appendMessage('user', text);
+  chatHistory.push({ role:'user', content: text });
+  isLoading = true;
+  document.getElementById('send-btn').disabled = true;
+  const typingEl = appendTyping();
+  try {
+    const response = await fetch('https://api.anthropic.com/v1/messages', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        model: 'claude-sonnet-4-20250514',
+        max_tokens: 1000,
+        system: buildSystemPrompt(),
+        messages: chatHistory
+      })
+    });
+    typingEl.remove();
+    const data = await response.json();
+    if (data.error) throw new Error(data.error.message);
+    const reply = data.content?.[0]?.text || 'Sorry, I had trouble generating a response. Please try again.';
+    appendMessage('ai', formatAIReply(reply));
+    chatHistory.push({ role:'assistant', content: reply });
+  } catch (err) {
+    typingEl.remove();
+    // Fallback: use built-in responses
+    const fallback = getFallbackResponse(text);
+    appendMessage('ai', formatAIReply(fallback));
+    chatHistory.push({ role:'assistant', content: fallback });
+  }
+  isLoading = false;
+  document.getElementById('send-btn').disabled = false;
+}
+function formatAIReply(text) {
+  return text
+    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.*?)\*/g, '<em>$1</em>')
+    .replace(/\n\n/g, '<br><br>')
+    .replace(/\n- /g, '<br>• ')
+    .replace(/\n• /g, '<br>• ')
+    .replace(/\n(\d+)\. /g, '<br>$1. ');
+}
+function getFallbackResponse(query) {
+  const q = query.toLowerCase();
+  const p = getPortfolio();
+  const equityPct = p.assets.filter(a=>a.type==='Stock'||a.type==='ETF').reduce((s,a)=>s+a.pct,0);
+  const riskScore = calcRiskScore(p);
+  if (q.includes('portfolio') || q.includes('analyze')) {
+    return `**Here's a quick analysis of your portfolio:** 📊\n\n` +
+      `You're holding **${p.assets.length} assets** with **${equityPct}% in equities**. ` +
+      `Your risk score is **${riskScore}/100**, which puts you in the **${p.riskProfile||'Moderate'}** category.\n\n` +
+      `**Strengths:**\n- Good asset count for diversification\n- Mix of ETFs and individual stocks\n\n` +
+      `**Suggestions:**\n- Consider if bond allocation matches your timeline\n- Review any single position over 30%\n\n` +
+      `*Disclaimer: This is AI-generated analysis, not licensed financial advice.*`;
+  }
+  if (q.includes('etf') || q.includes('index')) {
+    return `**ETFs (Exchange-Traded Funds) 101:** 📊\n\nAn ETF is a basket of stocks or bonds that trades on an exchange like a single stock.\n\n**Why they're great for beginners:**\n- **Instant diversification** — VOO holds ~500 companies\n- **Low cost** — VOO charges just 0.03% annually\n- **No stock picking required** — just buy the market\n\n**Your portfolio already has ETFs:** ${p.assets.filter(a=>a.type==='ETF').map(a=>a.ticker).join(', ')||'None yet'} — great choice! 🎉`;
+  }
+  if (q.includes('compound')) {
+    return `**Compound Interest — The 8th Wonder of the World** ⚡\n\nCompound interest means earning returns on your returns.\n\n**Simple example:**\n- Invest $10,000 at 8%/year\n- Year 1: $10,800\n- Year 10: $21,589\n- Year 30: $100,627 — **10× your money!**\n\nThe key insight: **time accelerates everything**. Starting at 25 vs 35 can mean the difference of $300,000+ at retirement — even with the same contributions.`;
+  }
+  if (q.includes('risk') || q.includes('rebalance')) {
+    return `**Your Risk Profile:** 🎯\n\nYour current risk score is **${riskScore}/100**.\n\n**Quick rebalancing check:**\n- If any single asset has drifted >5% from target → trim it\n- If equity % has grown significantly → add bonds\n- Do this **annually** or when allocation drifts >5%\n\n**For your portfolio:** ${equityPct > 80 ? '⚠️ High equity concentration. Consider adding some bonds for stability.' : '✅ Equity balance looks reasonable for a growth-oriented investor.'}\n\n*Review every quarter, rebalance annually.*`;
+  }
+  if (q.includes('retirement') || q.includes('4%')) {
+    return `**The 4% Rule Explained** 🏖️\n\nThe 4% rule says: in retirement, you can safely withdraw 4% of your portfolio annually and it should last 30+ years.\n\n**Example:**\n- $1,000,000 nest egg → $40,000/year ($3,333/mo)\n- $500,000 → $20,000/year ($1,667/mo)\n\n**Your goal:** Save **25× your annual expenses**\n\n**Use our Retirement Calculator** to see exactly when you'll hit your number! 🧮`;
+  }
+  if (q.includes('dollar') || q.includes('dca') || q.includes('averaging')) {
+    return `**Dollar-Cost Averaging (DCA)** 📅\n\nInstead of investing a lump sum, you invest a fixed amount at regular intervals — regardless of the market price.\n\n**Why it works:**\n- Removes emotion from investing\n- You buy more shares when prices are low\n- You buy fewer shares when prices are high\n- Averages out your cost over time\n\n**Example:** $300/month in VOO no matter what the market does. You don't need to predict anything — just stay consistent. That's it! 🎯`;
+  }
+  return `**Great question!** 💡\n\nThat's an important topic in personal finance. Based on your portfolio (${p.assets.map(a=>a.ticker).join(', ')}), here's what I'd suggest:\n\n- Keep learning and asking questions like this — financial literacy compounds just like money does!\n- Use the Calculators to model different scenarios\n- Review the Concepts section for deeper dives\n\n*Connect to the internet to get fully personalized AI responses powered by Claude.* 🤖`;
+}
+function appendMessage(role, html) {
+  const msgs = document.getElementById('chat-messages');
+  const div = document.createElement('div');
+  div.className = 'chat-message ' + (role==='user'?'user':'');
+  div.innerHTML = `
+    <div class="chat-avatar ${role==='user'?'user-av':'ai-av'}">${role==='user'?'👤':'🤖'}</div>
+    <div class="chat-bubble ${role}">${html}</div>
+  `;
+  msgs.appendChild(div);
+  msgs.scrollTop = msgs.scrollHeight;
+  return div;
+}
+function appendTyping() {
+  const msgs = document.getElementById('chat-messages');
+  const div = document.createElement('div');
+  div.className = 'chat-message';
+  div.innerHTML = `
+    <div class="chat-avatar ai-av">🤖</div>
+    <div class="chat-typing"><span></span><span></span><span></span></div>
+  `;
+  msgs.appendChild(div);
+  msgs.scrollTop = msgs.scrollHeight;
+  return div;
+}
+// ── Glossary ──────────────────────────────────────────────────────
+const GLOSSARY = [
+  { term:'APY', def:'Annual Percentage Yield — the real return earned in a year, including compound interest.' },
+  { term:'Asset Allocation', def:'How you divide your portfolio among different asset classes like stocks, bonds, and cash.' },
+  { term:'Bear Market', def:'A market decline of 20% or more from recent highs, lasting at least 2 months.' },
+  { term:'Beta', def:'Measures an asset\'s volatility vs the market. Beta>1 = more volatile than the S&P 500.' },
+  { term:'Blue-Chip Stock', def:'Shares of large, reputable companies with long track records of stable performance.' },
+  { term:'Bond', def:'A loan you give to a company or government. They pay you interest and return your principal at maturity.' },
+  { term:'Bull Market', def:'A period of rising prices, generally defined as a 20%+ gain from recent lows.' },
+  { term:'Compound Interest', def:'Earning returns on your returns. The longer you invest, the more powerful this becomes.' },
+  { term:'Diversification', def:'Spreading investments across many assets to reduce risk without necessarily reducing returns.' },
+  { term:'Dividend', def:'A portion of a company\'s profits paid to shareholders, usually quarterly.' },
+  { term:'DCA', def:'Dollar-Cost Averaging — investing a fixed amount regularly, regardless of market price.' },
+  { term:'ETF', def:'Exchange-Traded Fund — a basket of securities that trades on an exchange like a single stock.' },
+  { term:'Expense Ratio', def:'Annual fee charged by mutual funds/ETFs, expressed as % of your investment.' },
+  { term:'FIRE', def:'Financial Independence, Retire Early — movement focused on saving aggressively to retire young.' },
+  { term:'Index Fund', def:'A fund that tracks a market index (like S&P 500) passively. Usually low-cost and diversified.' },
+  { term:'Liquidity', def:'How easily an asset can be converted to cash. Stocks are liquid; real estate is not.' },
+  { term:'Market Cap', def:'Total market value of a company\'s outstanding shares (Price × Shares Outstanding).' },
+  { term:'P/E Ratio', def:'Price-to-Earnings ratio — how much investors pay per dollar of earnings. Measures valuation.' },
+  { term:'Rebalancing', def:'Adjusting your portfolio back to target allocation by selling overweighted and buying underweighted assets.' },
+  { term:'Risk Tolerance', def:'Your ability (financial) and willingness (emotional) to endure market fluctuations.' },
+  { term:'Roth IRA', def:'A retirement account funded with after-tax money. Qualified withdrawals are tax-free.' },
+  { term:'S&P 500', def:'An index tracking 500 of the largest US publicly traded companies by market cap.' },
+  { term:'SIP', def:'Systematic Investment Plan — regular, automated investments at fixed intervals.' },
+  { term:'Volatility', def:'The degree of price variation over time. Higher volatility = higher risk and potential reward.' },
+  { term:'Yield', def:'Income generated by an investment, usually expressed as a percentage of the investment\'s value.' },
+];
+function renderGlossary(filter='') {
+  const items = filter ? GLOSSARY.filter(g=>g.term.toLowerCase().includes(filter)||g.def.toLowerCase().includes(filter)) : GLOSSARY;
+  document.getElementById('glossary-grid').innerHTML = items.map(g => `
+    <div class="glossary-item">
+      <div class="glos-term">${g.term}</div>
+      <div class="glos-def">${g.def}</div>
+    </div>
+  `).join('');
+}
+function filterGlossary() {
+  renderGlossary(document.getElementById('glossary-search').value.toLowerCase());
+}
+document.addEventListener('DOMContentLoaded', () => {
+  buildContextSummary();
+  renderGlossary();
+});
+</script>
+</body>
+</html>

portfolio.html ADDED Viewed

	@@ -0,0 +1,673 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>FinWise — Portfolio Builder</title>
+<link rel="stylesheet" href="shared.css">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<style>
+.builder-steps {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 28px;
+  background: var(--bg3);
+  border-radius: var(--r-sm);
+  padding: 4px;
+}
+.step-btn {
+  flex: 1;
+  padding: 10px 8px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--text2);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition);
+  text-align: center;
+  white-space: nowrap;
+}
+.step-btn.active {
+  background: var(--card);
+  color: var(--cyan);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+.step-num {
+  display: inline-flex;
+  width: 20px; height: 20px;
+  background: var(--bg3);
+  border-radius: 50%;
+  align-items: center; justify-content: center;
+  font-size: 11px;
+  margin-right: 6px;
+}
+.step-btn.active .step-num { background: var(--cyan); color: var(--bg); }
+.step-panel { display: none; }
+.step-panel.active { display: block; }
+.goal-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 12px;
+  margin-bottom: 24px;
+}
+.goal-card {
+  background: var(--bg3);
+  border: 2px solid var(--border);
+  border-radius: var(--r);
+  padding: 20px 16px;
+  text-align: center;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.goal-card:hover { border-color: var(--border2); transform: translateY(-2px); }
+.goal-card.selected { border-color: var(--cyan); background: rgba(34,211,238,0.08); box-shadow: var(--glow-c); }
+.goal-icon { font-size: 32px; margin-bottom: 8px; }
+.goal-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
+.goal-desc  { font-size: 11px; color: var(--text2); }
+.risk-slider-wrap {
+  padding: 20px;
+  background: var(--bg3);
+  border-radius: var(--r);
+  margin-bottom: 20px;
+}
+.risk-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--text2);
+  margin-top: 10px;
+}
+.risk-profile-display {
+  text-align: center;
+  padding: 16px;
+  background: rgba(34,211,238,0.06);
+  border-radius: var(--r-sm);
+  border: 1px solid var(--border2);
+  margin-top: 16px;
+}
+.rp-icon  { font-size: 36px; margin-bottom: 6px; }
+.rp-label { font-family: var(--font-head); font-size: 20px; font-weight: 700; }
+.rp-desc  { font-size: 13px; color: var(--text2); margin-top: 4px; }
+.asset-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 16px;
+  background: var(--bg3);
+  border-radius: var(--r-sm);
+  margin-bottom: 10px;
+  border: 1px solid var(--border);
+  transition: all var(--transition);
+}
+.asset-card:hover { border-color: var(--border2); }
+.asset-logo {
+  width: 42px; height: 42px;
+  border-radius: 10px;
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 800;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  flex-shrink: 0;
+  color: var(--bg);
+}
+.asset-info { flex: 1; min-width: 0; }
+.asset-ticker { font-weight: 700; font-size: 15px; }
+.asset-name   { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.asset-type   { margin-top: 3px; }
+.asset-sliders { flex: 2; }
+.asset-pct-val {
+  font-family: var(--font-mono);
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--cyan);
+  min-width: 46px;
+  text-align: right;
+}
+.asset-dollar { font-size: 11px; color: var(--text2); text-align: right; margin-top: 2px; }
+.asset-remove {
+  background: rgba(244,63,94,0.1);
+  border: none;
+  color: var(--rose);
+  border-radius: 6px;
+  width: 28px; height: 28px;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background var(--transition);
+  flex-shrink: 0;
+}
+.asset-remove:hover { background: rgba(244,63,94,0.25); }
+.add-asset-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 8px;
+  margin-top: 16px;
+}
+.add-asset-btn {
+  padding: 10px 8px;
+  background: var(--bg3);
+  border: 1px dashed var(--border2);
+  border-radius: var(--r-sm);
+  color: var(--text2);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
+  transition: all var(--transition);
+  font-family: var(--font-body);
+}
+.add-asset-btn:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(34,211,238,0.05); }
+.add-asset-btn.in-portfolio { border-style: solid; border-color: var(--emerald); color: var(--emerald); background: rgba(16,185,129,0.06); }
+.portfolio-summary-side {
+  position: sticky;
+  top: 20px;
+}
+.pie-wrap { height: 220px; position: relative; }
+.portfolio-total {
+  text-align: center;
+  padding: 16px;
+  background: var(--bg3);
+  border-radius: var(--r-sm);
+  margin: 16px 0;
+}
+.pt-label { font-size: 12px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.06em; }
+.pt-value { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: var(--cyan); }
+.balance-warning {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: var(--r-sm);
+  font-size: 13px;
+  margin-bottom: 16px;
+}
+.balance-warning.ok   { background: rgba(16,185,129,0.1);  border: 1px solid rgba(16,185,129,0.3);  color: var(--emerald); }
+.balance-warning.warn { background: rgba(245,158,11,0.1);  border: 1px solid rgba(245,158,11,0.3);  color: var(--amber); }
+.balance-warning.err  { background: rgba(244,63,94,0.1);   border: 1px solid rgba(244,63,94,0.3);   color: var(--rose); }
+.rebal-btn {
+  width: 100%;
+  padding: 10px;
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  color: var(--text2);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition);
+  font-family: var(--font-body);
+  margin-bottom: 8px;
+}
+.rebal-btn:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(34,211,238,0.05); }
+</style>
+</head>
+<body>
+<div class="app-shell">
+  <!-- Sidebar -->
+  <nav class="sidebar">
+    <div class="sidebar-logo">
+      <div class="logo-mark">
+        <div class="logo-icon">📈</div>
+        <div><div class="logo-text">FinWise</div><div class="logo-sub">Smart Investing</div></div>
+      </div>
+    </div>
+    <div class="nav-section">
+      <div class="nav-label">Main</div>
+      <a href="index.html"       class="nav-item"><span class="nav-icon">🏠</span> Dashboard</a>
+      <a href="portfolio.html"   class="nav-item"><span class="nav-icon">📊</span> Portfolio Builder</a>
+      <a href="risk.html"        class="nav-item"><span class="nav-icon">🎯</span> Risk Analyzer</a>
+      <a href="tracker.html"     class="nav-item"><span class="nav-icon">📈</span> Tracker</a>
+      <div class="nav-label">Tools</div>
+      <a href="calculators.html" class="nav-item"><span class="nav-icon">🧮</span> Calculators</a>
+      <a href="insights.html"    class="nav-item"><span class="nav-icon">💡</span> Insights</a>
+    </div>
+    <div class="sidebar-footer">
+      <div class="market-ticker">Live Market</div>
+      <div id="sidebar-tickers"></div>
+    </div>
+  </nav>
+  <main class="main-content">
+    <div class="page-header fade-in">
+      <div class="page-title">Portfolio <span>Builder</span></div>
+      <div class="page-subtitle">Build a smart, diversified portfolio in 3 easy steps</div>
+    </div>
+    <!-- Step Nav -->
+    <div class="builder-steps fade-in">
+      <button class="step-btn active" data-step="1"><span class="step-num">1</span>Your Goals</button>
+      <button class="step-btn"        data-step="2"><span class="step-num">2</span>Risk Profile</button>
+      <button class="step-btn"        data-step="3"><span class="step-num">3</span>Build & Tune</button>
+    </div>
+    <div class="grid-60-40">
+      <!-- Left: Steps -->
+      <div>
+        <!-- Step 1: Goals -->
+        <div class="step-panel active" id="step-1">
+          <div class="card fade-in">
+            <div class="section-title">🎯 What are you investing for?</div>
+            <div class="text-muted text-sm" style="margin-bottom:20px">Select one or more goals (you can always change later)</div>
+            <div class="goal-cards" id="goal-cards">
+              <div class="goal-card" data-goal="Retirement"><div class="goal-icon">🏖️</div><div class="goal-title">Retirement</div><div class="goal-desc">Long-term wealth for a comfortable retirement</div></div>
+              <div class="goal-card" data-goal="Wealth Building"><div class="goal-icon">💰</div><div class="goal-title">Wealth Building</div><div class="goal-desc">Grow your money over time</div></div>
+              <div class="goal-card" data-goal="Down Payment"><div class="goal-icon">🏠</div><div class="goal-title">Home Purchase</div><div class="goal-desc">Save for a down payment</div></div>
+              <div class="goal-card" data-goal="Education"><div class="goal-icon">📚</div><div class="goal-title">Education</div><div class="goal-desc">Fund for college or courses</div></div>
+              <div class="goal-card" data-goal="Emergency Fund"><div class="goal-icon">🛡️</div><div class="goal-title">Emergency Fund</div><div class="goal-desc">Safety net for unexpected expenses</div></div>
+              <div class="goal-card" data-goal="Passive Income"><div class="goal-icon">💸</div><div class="goal-title">Passive Income</div><div class="goal-desc">Earn dividends & interest</div></div>
+            </div>
+            <div class="slider-wrap">
+              <div class="slider-header">
+                <span class="slider-label">💵 How much to invest?</span>
+                <span class="slider-val" id="invest-display">$5,000</span>
+              </div>
+              <input type="range" id="invest-slider" min="500" max="100000" value="5000" step="500">
+              <div style="display:flex;justify-content:space-between;font-size:11px;color:var(--text3);margin-top:4px">
+                <span>$500</span><span>$100K</span>
+              </div>
+            </div>
+            <button class="btn btn-primary" onclick="goStep(2)">Next: Set Risk Profile →</button>
+          </div>
+        </div>
+        <!-- Step 2: Risk -->
+        <div class="step-panel" id="step-2">
+          <div class="card fade-in">
+            <div class="section-title">🎯 Your Risk Tolerance</div>
+            <div class="text-muted text-sm" style="margin-bottom:16px">Drag the slider to find your comfort level</div>
+            <div class="risk-slider-wrap">
+              <div class="slider-header">
+                <span class="slider-label">Risk Level</span>
+                <span class="slider-val" id="risk-val-display">Moderate</span>
+              </div>
+              <input type="range" id="risk-slider" min="1" max="5" value="3" step="1">
+              <div class="risk-labels">
+                <span>🐢 Very Conservative</span>
+                <span>🦁 Very Aggressive</span>
+              </div>
+            </div>
+            <div class="risk-profile-display" id="risk-profile-box">
+              <div class="rp-icon">⚖️</div>
+              <div class="rp-label">Moderate Investor</div>
+              <div class="rp-desc">Balanced mix of growth and stability. You're OK with some market swings for better long-term returns.</div>
+            </div>
+            <div class="flex gap-12" style="margin-top:20px">
+              <button class="btn btn-ghost" onclick="goStep(1)">← Back</button>
+              <button class="btn btn-primary" onclick="goStep(3);buildPortfolio()">Generate Portfolio →</button>
+            </div>
+          </div>
+        </div>
+        <!-- Step 3: Build -->
+        <div class="step-panel" id="step-3">
+          <div class="card fade-in">
+            <div class="flex justify-between items-center" style="margin-bottom:16px">
+              <div class="section-title" style="margin-bottom:0">🏗️ Your Portfolio</div>
+              <div class="flex gap-8">
+                <button class="rebal-btn" style="width:auto;padding:8px 14px" onclick="autoRebalance()">⚖️ Auto-rebalance</button>
+              </div>
+            </div>
+            <div id="asset-balance-warning" class="balance-warning ok" style="margin-bottom:14px">
+              ✅ Portfolio is balanced at 100%
+            </div>
+            <div id="asset-list"></div>
+            <div class="divider"></div>
+            <div class="section-title" style="font-size:14px">➕ Add Assets</div>
+            <div class="add-asset-grid" id="add-asset-grid"></div>
+            <div class="flex gap-12" style="margin-top:20px">
+              <button class="btn btn-ghost" onclick="goStep(2)">← Back</button>
+              <button class="btn btn-emerald btn-full" onclick="savePortfolio_()">💾 Save Portfolio</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Right: Live Preview -->
+      <div class="portfolio-summary-side">
+        <div class="card fade-in-1">
+          <div class="card-title">🔴 Live Preview</div>
+          <div class="pie-wrap">
+            <canvas id="previewPieChart"></canvas>
+          </div>
+          <div class="portfolio-total">
+            <div class="pt-label">Total Value</div>
+            <div class="pt-value" id="preview-total">$5,000</div>
+          </div>
+          <div id="preview-legend" style="margin-top:8px"></div>
+          <div class="divider"></div>
+          <div class="card-title">📊 Portfolio Metrics</div>
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px">
+            <div style="background:var(--bg3);border-radius:var(--r-sm);padding:12px;text-align:center">
+              <div style="font-size:11px;color:var(--text2);margin-bottom:4px">Risk Score</div>
+              <div style="font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--amber)" id="preview-risk">—</div>
+            </div>
+            <div style="background:var(--bg3);border-radius:var(--r-sm);padding:12px;text-align:center">
+              <div style="font-size:11px;color:var(--text2);margin-bottom:4px">Diversification</div>
+              <div style="font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--emerald)" id="preview-div">—</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+<!-- Mobile Bottom Nav -->
+<nav class="bottom-nav">
+  <div class="bottom-nav-inner">
+    <a href="index.html"       class="bottom-nav-item"><span class="bnav-icon">🏠</span>Home</a>
+    <a href="portfolio.html"   class="bottom-nav-item"><span class="bnav-icon">📊</span>Portfolio</a>
+    <a href="risk.html"        class="bottom-nav-item"><span class="bnav-icon">🎯</span>Risk</a>
+    <a href="tracker.html"     class="bottom-nav-item"><span class="bnav-icon">📈</span>Track</a>
+    <a href="calculators.html" class="bottom-nav-item"><span class="bnav-icon">🧮</span>Calc</a>
+    <a href="insights.html"    class="bottom-nav-item"><span class="bnav-icon">💡</span>Insights</a>
+  </div>
+</nav>
+<script src="shared.js"></script>
+<script>
+// ── State ─────────────────────────────────────────────────────────
+let portfolio    = getPortfolio();
+let investAmount = portfolio.totalInvested || 5000;
+let riskLevel    = 3; // 1-5
+let selectedGoals = portfolio.goals || ['Wealth Building'];
+let previewChart = null;
+const RISK_PROFILES = {
+  1: { icon:'🐢', label:'Very Conservative', desc:'Capital preservation is your #1 priority. Heavy bonds & cash equivalents.', template:[30,0,5,0,50,10,5] },
+  2: { icon:'🛡️', label:'Conservative',      desc:'Modest growth with low risk. Bonds-heavy with some equity exposure.',     template:[20,10,10,5,40,10,5] },
+  3: { icon:'⚖️', label:'Moderate',          desc:'Balanced growth & stability. OK with some swings for better returns.',    template:[30,20,15,12,13,7,3] },
+  4: { icon:'🚀', label:'Aggressive',        desc:'Growth-focused. Higher potential returns, higher volatility accepted.',   template:[35,30,20,12,0,3,0] },
+  5: { icon:'🦁', label:'Very Aggressive',   desc:'Maximum growth. Concentrated tech & equities. High-risk, high-reward.',  template:[20,35,30,15,0,0,0] },
+};
+const ALL_ASSETS = [
+  { ticker:'VOO',  name:'Vanguard S&P 500 ETF',   price:478.22, color:'#22d3ee', type:'ETF' },
+  { ticker:'VTI',  name:'Vanguard Total Market',   price:240.30, color:'#0ea5e9', type:'ETF' },
+  { ticker:'QQQ',  name:'Invesco Nasdaq 100',       price:456.80, color:'#8b5cf6', type:'ETF' },
+  { ticker:'NVDA', name:'NVIDIA Corp',              price:875.40, color:'#10b981', type:'Stock' },
+  { ticker:'AAPL', name:'Apple Inc.',               price:188.60, color:'#f59e0b', type:'Stock' },
+  { ticker:'AMZN', name:'Amazon.com Inc.',          price:188.90, color:'#0891b2', type:'Stock' },
+  { ticker:'TSLA', name:'Tesla Inc.',               price:182.30, color:'#f43f5e', type:'Stock' },
+  { ticker:'WMT',  name:'Walmart Inc.',             price: 67.80, color:'#34d399', type:'Stock' },
+  { ticker:'MCD',  name:"McDonald's Corp",          price:281.50, color:'#fb923c', type:'Stock' },
+  { ticker:'BND',  name:'Vanguard Bond ETF',        price: 73.40, color:'#6366f1', type:'Bond' },
+  { ticker:'GLD',  name:'SPDR Gold Trust',          price:218.10, color:'#fbbf24', type:'Commodity' },
+  { ticker:'SLV',  name:'iShares Silver Trust',     price: 28.60, color:'#94a3b8', type:'Commodity' },
+];
+// ── Step Navigation ───────────────────────────────────────────────
+function goStep(n) {
+  document.querySelectorAll('.step-panel').forEach(p => p.classList.remove('active'));
+  document.querySelectorAll('.step-btn').forEach(b => b.classList.remove('active'));
+  document.getElementById('step-' + n).classList.add('active');
+  document.querySelector(`.step-btn[data-step="${n}"]`).classList.add('active');
+}
+document.querySelectorAll('.step-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const s = parseInt(btn.dataset.step);
+    if (s === 3) buildPortfolio();
+    goStep(s);
+  });
+});
+// ── Goal Cards ────────────────────────────────────────────────────
+document.querySelectorAll('.goal-card').forEach(card => {
+  card.addEventListener('click', () => {
+    const goal = card.dataset.goal;
+    const idx = selectedGoals.indexOf(goal);
+    if (idx >= 0) selectedGoals.splice(idx, 1);
+    else selectedGoals.push(goal);
+    card.classList.toggle('selected');
+  });
+});
+// Pre-select saved goals
+selectedGoals.forEach(g => {
+  const c = document.querySelector(`.goal-card[data-goal="${g}"]`);
+  if (c) c.classList.add('selected');
+});
+// ── Investment Slider ─────────────────────────────────────────────
+const investSlider = document.getElementById('invest-slider');
+investSlider.value = investAmount;
+document.getElementById('invest-display').textContent = '$' + investAmount.toLocaleString();
+investSlider.addEventListener('input', () => {
+  investAmount = parseInt(investSlider.value);
+  document.getElementById('invest-display').textContent = '$' + investAmount.toLocaleString();
+  document.getElementById('preview-total').textContent = '$' + investAmount.toLocaleString();
+  updatePortfolioAmounts();
+});
+// ── Risk Slider ───────────────────────────────────────────────────
+const riskSlider = document.getElementById('risk-slider');
+riskSlider.addEventListener('input', () => {
+  riskLevel = parseInt(riskSlider.value);
+  updateRiskDisplay();
+});
+function updateRiskDisplay() {
+  const profile = RISK_PROFILES[riskLevel];
+  const box = document.getElementById('risk-profile-box');
+  box.querySelector('.rp-icon').textContent  = profile.icon;
+  box.querySelector('.rp-label').textContent = profile.label;
+  box.querySelector('.rp-desc').textContent  = profile.desc;
+  document.getElementById('risk-val-display').textContent = profile.label;
+}
+// ── Build Portfolio from template ─────────────────────────────────
+function buildPortfolio() {
+  const template = RISK_PROFILES[riskLevel].template;
+  const baseAssets = [
+    ALL_ASSETS.find(a=>a.ticker==='VOO'),
+    ALL_ASSETS.find(a=>a.ticker==='QQQ'),
+    ALL_ASSETS.find(a=>a.ticker==='NVDA'),
+    ALL_ASSETS.find(a=>a.ticker==='AAPL'),
+    ALL_ASSETS.find(a=>a.ticker==='BND'),
+    ALL_ASSETS.find(a=>a.ticker==='GLD'),
+    ALL_ASSETS.find(a=>a.ticker==='AMZN'),
+  ];
+  portfolio.assets = baseAssets.map((a, i) => ({
+    ...a,
+    pct: template[i],
+    shares: parseFloat(((investAmount * template[i] / 100) / a.price).toFixed(3))
+  })).filter(a => a.pct > 0);
+  portfolio.totalInvested = investAmount;
+  portfolio.goals = selectedGoals;
+  portfolio.riskProfile = RISK_PROFILES[riskLevel].label;
+  renderAssetList();
+  renderAddGrid();
+  renderPreviewChart();
+}
+// ── Render Asset List ─────────────────────────────────────────────
+function renderAssetList() {
+  const container = document.getElementById('asset-list');
+  container.innerHTML = '';
+  portfolio.assets.forEach((asset, idx) => {
+    const dollarVal = (investAmount * asset.pct / 100).toFixed(0);
+    const div = document.createElement('div');
+    div.className = 'asset-card';
+    div.innerHTML = `
+      <div class="asset-logo" style="background:${asset.color}">${asset.ticker}</div>
+      <div class="asset-info">
+        <div class="asset-ticker">${asset.ticker}</div>
+        <div class="asset-name">${asset.name}</div>
+        <span class="badge badge-${asset.type==='ETF'?'cyan':asset.type==='Bond'?'violet':asset.type==='Commodity'?'amber':'emerald'}">${asset.type}</span>
+      </div>
+      <div class="asset-sliders">
+        <input type="range" min="0" max="80" value="${asset.pct}" step="1"
+          oninput="updateAssetPct(${idx}, this.value)"
+          style="width:100%;margin-bottom:4px">
+      </div>
+      <div>
+        <div class="asset-pct-val" id="pct-${idx}">${asset.pct}%</div>
+        <div class="asset-dollar" id="dollar-${idx}">$${parseInt(dollarVal).toLocaleString()}</div>
+      </div>
+      <button class="asset-remove" onclick="removeAsset(${idx})">✕</button>
+    `;
+    container.appendChild(div);
+  });
+  updateBalanceWarning();
+  updateMetrics();
+}
+function updateAssetPct(idx, val) {
+  portfolio.assets[idx].pct = parseInt(val);
+  const dollarVal = (investAmount * parseInt(val) / 100).toFixed(0);
+  document.getElementById('pct-' + idx).textContent = val + '%';
+  document.getElementById('dollar-' + idx).textContent = '$' + parseInt(dollarVal).toLocaleString();
+  updateBalanceWarning();
+  renderPreviewChart();
+  updateMetrics();
+}
+function updatePortfolioAmounts() {
+  portfolio.assets.forEach((a, i) => {
+    const dEl = document.getElementById('dollar-' + i);
+    if (dEl) dEl.textContent = '$' + parseInt(investAmount * a.pct / 100).toLocaleString();
+  });
+  renderPreviewChart();
+}
+function updateBalanceWarning() {
+  const total = portfolio.assets.reduce((s, a) => s + a.pct, 0);
+  const warn = document.getElementById('asset-balance-warning');
+  if (total === 100) {
+    warn.className = 'balance-warning ok';
+    warn.innerHTML = '✅ Portfolio is balanced at 100%';
+  } else if (total < 100) {
+    warn.className = 'balance-warning warn';
+    warn.innerHTML = `⚠️ Under-allocated: ${total}% used, ${100-total}% remaining`;
+  } else {
+    warn.className = 'balance-warning err';
+    warn.innerHTML = `❌ Over-allocated: ${total}% total (exceeds 100% by ${total-100}%)`;
+  }
+}
+function updateMetrics() {
+  document.getElementById('preview-risk').textContent = calcRiskScore(portfolio) + '/100';
+  document.getElementById('preview-div').textContent  = calcDiversification(portfolio) + '/100';
+}
+function removeAsset(idx) {
+  portfolio.assets.splice(idx, 1);
+  renderAssetList();
+  renderAddGrid();
+  renderPreviewChart();
+}
+function autoRebalance() {
+  const total = portfolio.assets.reduce((s, a) => s + a.pct, 0);
+  const perAsset = Math.floor(100 / portfolio.assets.length);
+  let rem = 100 - perAsset * portfolio.assets.length;
+  portfolio.assets.forEach((a, i) => { a.pct = perAsset + (i === 0 ? rem : 0); });
+  renderAssetList();
+  renderPreviewChart();
+  showToast('Portfolio auto-rebalanced to equal weights!');
+}
+// ── Add Asset Grid ────────────────────────────────────────────────
+function renderAddGrid() {
+  const grid = document.getElementById('add-asset-grid');
+  grid.innerHTML = ALL_ASSETS.map(a => {
+    const inPortfolio = portfolio.assets.some(pa => pa.ticker === a.ticker);
+    return `<button class="add-asset-btn ${inPortfolio?'in-portfolio':''}"
+      onclick="toggleAsset('${a.ticker}')" title="${a.name}">
+      ${inPortfolio ? '✓ ' : '+'} ${a.ticker}
+    </button>`;
+  }).join('');
+}
+function toggleAsset(ticker) {
+  const exists = portfolio.assets.findIndex(a => a.ticker === ticker);
+  if (exists >= 0) {
+    removeAsset(exists);
+  } else {
+    if (portfolio.assets.length >= 10) { showToast('Max 10 assets per portfolio', 'error'); return; }
+    const asset = ALL_ASSETS.find(a => a.ticker === ticker);
+    portfolio.assets.push({ ...asset, pct: 5, shares: 0 });
+    renderAssetList();
+    renderPreviewChart();
+    renderAddGrid();
+  }
+}
+// ── Preview Pie Chart ─────────────────────────────────────────────
+function renderPreviewChart() {
+  const ctx = document.getElementById('previewPieChart').getContext('2d');
+  if (previewChart) previewChart.destroy();
+  const validAssets = portfolio.assets.filter(a => a.pct > 0);
+  previewChart = new Chart(ctx, {
+    type: 'doughnut',
+    data: {
+      labels: validAssets.map(a => a.ticker),
+      datasets: [{
+        data: validAssets.map(a => a.pct),
+        backgroundColor: validAssets.map(a => a.color),
+        borderColor: 'rgba(5,13,26,0.8)',
+        borderWidth: 3,
+        hoverOffset: 8
+      }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      cutout: '68%',
+      plugins: { legend: { display: false } }
+    }
+  });
+  const leg = document.getElementById('preview-legend');
+  leg.innerHTML = validAssets.map(a => `
+    <div class="legend-item">
+      <div class="legend-dot" style="background:${a.color}"></div>
+      <span class="legend-name">${a.ticker}</span>
+      <span class="legend-pct">${a.pct}%</span>
+    </div>
+  `).join('');
+  document.getElementById('preview-total').textContent = '$' + investAmount.toLocaleString();
+}
+// ── Save Portfolio ────────────────────────────────────────────────
+function savePortfolio_() {
+  const total = portfolio.assets.reduce((s,a) => s + a.pct, 0);
+  if (total !== 100) { showToast(`Total must be 100% (currently ${total}%)`, 'error'); return; }
+  portfolio.assets.forEach(a => {
+    a.shares = parseFloat(((investAmount * a.pct / 100) / a.price).toFixed(3));
+  });
+  savePortfolio(portfolio);
+  showToast('✅ Portfolio saved successfully!');
+  setTimeout(() => window.location.href = 'index.html', 1500);
+}
+// ── Init ──────────────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  applyChartDefaults();
+  renderAddGrid();
+  renderAssetList();
+  renderPreviewChart();
+  updateMetrics();
+});
+</script>
+</body>
+</html>

risk.html ADDED Viewed

	@@ -0,0 +1,618 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>FinWise — Risk Analyzer</title>
+<link rel="stylesheet" href="shared.css">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<style>
+.quiz-card { margin-bottom: 16px; transition: opacity 0.3s; }
+.quiz-card.inactive { opacity: 0.4; pointer-events: none; }
+.question-num {
+  font-size: 11px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.1em; color: var(--cyan); margin-bottom: 6px;
+}
+.question-text { font-size: 16px; font-weight: 600; margin-bottom: 14px; line-height: 1.4; }
+.answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.answer-btn {
+  padding: 12px 14px;
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  color: var(--text2);
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: left;
+  transition: all var(--transition);
+  line-height: 1.3;
+}
+.answer-btn:hover { border-color: var(--border2); color: var(--text); background: var(--card2); }
+.answer-btn.selected { border-color: var(--cyan); background: rgba(34,211,238,0.10); color: var(--cyan); }
+/* Risk Gauge */
+.gauge-container { position: relative; width: 220px; height: 120px; margin: 0 auto; }
+.gauge-svg { width: 220px; height: 120px; }
+.gauge-needle {
+  transform-origin: 110px 110px;
+  transition: transform 1.2s cubic-bezier(.34,1.56,.64,1);
+}
+.gauge-center-text {
+  position: absolute;
+  bottom: 0; left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+}
+.gauge-score { font-family: var(--font-head); font-size: 32px; font-weight: 800; }
+.gauge-label { font-size: 12px; color: var(--text2); }
+/* Heatmap */
+.heatmap-grid {
+  display: grid;
+  gap: 3px;
+}
+.heatmap-cell {
+  height: 40px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  color: white;
+  transition: transform var(--transition);
+  cursor: default;
+}
+.heatmap-cell:hover { transform: scale(1.05); }
+.rebal-item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px;
+  background: var(--bg3);
+  border-radius: var(--r-sm);
+  border: 1px solid var(--border);
+  margin-bottom: 10px;
+  transition: all var(--transition);
+}
+.rebal-item:hover { border-color: var(--border2); }
+.rebal-action {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 3px;
+}
+.rebal-desc { font-size: 13px; color: var(--text2); }
+.rebal-arrow { font-size: 20px; margin-left: auto; }
+.risk-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.rb-item {
+  background: var(--bg3);
+  border-radius: var(--r-sm);
+  padding: 14px;
+  text-align: center;
+}
+.rb-val   { font-family: var(--font-head); font-size: 22px; font-weight: 800; }
+.rb-label { font-size: 11px; color: var(--text2); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
+.volatility-bar-wrap { margin-bottom: 12px; }
+.vol-header { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
+.vol-name { color: var(--text2); font-weight: 600; }
+.score-ring {
+  width: 80px; height: 80px;
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-family: var(--font-head);
+  font-size: 24px;
+  font-weight: 800;
+  margin: 0 auto 12px;
+  position: relative;
+}
+.score-ring::before {
+  content: '';
+  position: absolute;
+  inset: 4px;
+  border-radius: 50%;
+  background: var(--bg2);
+}
+.score-ring span { position: relative; z-index: 1; }
+.scenario-card {
+  background: var(--bg3);
+  border-radius: var(--r-sm);
+  padding: 16px;
+  border: 1px solid var(--border);
+  transition: all var(--transition);
+}
+.scenario-card:hover { border-color: var(--border2); }
+.scenario-icon  { font-size: 28px; margin-bottom: 8px; }
+.scenario-title { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
+.scenario-impact { font-size: 13px; }
+</style>
+</head>
+<body>
+<div class="app-shell">
+  <nav class="sidebar">
+    <div class="sidebar-logo">
+      <div class="logo-mark">
+        <div class="logo-icon">📈</div>
+        <div><div class="logo-text">FinWise</div><div class="logo-sub">Smart Investing</div></div>
+      </div>
+    </div>
+    <div class="nav-section">
+      <div class="nav-label">Main</div>
+      <a href="index.html"       class="nav-item"><span class="nav-icon">🏠</span> Dashboard</a>
+      <a href="portfolio.html"   class="nav-item"><span class="nav-icon">📊</span> Portfolio Builder</a>
+      <a href="risk.html"        class="nav-item"><span class="nav-icon">🎯</span> Risk Analyzer</a>
+      <a href="tracker.html"     class="nav-item"><span class="nav-icon">📈</span> Tracker</a>
+      <div class="nav-label">Tools</div>
+      <a href="calculators.html" class="nav-item"><span class="nav-icon">🧮</span> Calculators</a>
+      <a href="insights.html"    class="nav-item"><span class="nav-icon">💡</span> Insights</a>
+    </div>
+    <div class="sidebar-footer">
+      <div class="market-ticker">Live Market</div>
+      <div id="sidebar-tickers"></div>
+    </div>
+  </nav>
+  <main class="main-content">
+    <div class="page-header fade-in">
+      <div class="page-title">Risk <span>Analyzer</span></div>
+      <div class="page-subtitle">Understand and optimize your portfolio's risk profile</div>
+    </div>
+    <div class="grid-60-40">
+      <!-- Left Column -->
+      <div>
+        <!-- Quiz -->
+        <div class="card fade-in" id="quiz-section">
+          <div class="section-title">🧠 Risk Tolerance Assessment</div>
+          <div class="text-muted text-sm" style="margin-bottom:20px">Answer 5 quick questions — no typing needed</div>
+          <div id="quiz-container"></div>
+          <div id="quiz-result" class="hidden" style="margin-top:16px">
+            <div style="text-align:center;padding:20px">
+              <div style="font-size:48px;margin-bottom:8px" id="result-icon">⚖️</div>
+              <div style="font-family:var(--font-head);font-size:24px;font-weight:800;margin-bottom:8px" id="result-title">Moderate Investor</div>
+              <div style="color:var(--text2);font-size:14px;max-width:360px;margin:0 auto" id="result-desc"></div>
+            </div>
+          </div>
+          <div class="flex gap-12" style="margin-top:16px">
+            <button class="btn btn-ghost btn-sm" onclick="resetQuiz()">↺ Retake</button>
+            <button class="btn btn-primary" id="analyze-btn" onclick="runAnalysis()">Analyze My Risk →</button>
+          </div>
+        </div>
+        <!-- Volatility Breakdown -->
+        <div class="card fade-in fade-in-2" style="margin-top:20px">
+          <div class="section-title">📊 Asset Volatility</div>
+          <div id="volatility-bars"></div>
+        </div>
+        <!-- Scenarios -->
+        <div class="card fade-in fade-in-3" style="margin-top:20px">
+          <div class="section-title">🌪️ Scenario Simulation</div>
+          <div class="text-muted text-sm" style="margin-bottom:16px">How would your portfolio perform in these scenarios?</div>
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px" id="scenarios-grid"></div>
+        </div>
+      </div>
+      <!-- Right Column -->
+      <div>
+        <!-- Risk Gauge -->
+        <div class="card fade-in-1">
+          <div class="card-title">🎯 Risk Score</div>
+          <div class="gauge-container">
+            <svg class="gauge-svg" viewBox="0 0 220 120">
+              <!-- Background arcs -->
+              <path d="M 20 110 A 90 90 0 0 1 200 110" fill="none" stroke="var(--bg3)" stroke-width="18" stroke-linecap="round"/>
+              <!-- Colored sections -->
+              <path d="M 20 110 A 90 90 0 0 1 65 29" fill="none" stroke="#10b981" stroke-width="18" stroke-linecap="round" opacity="0.8"/>
+              <path d="M 65 29 A 90 90 0 0 1 110 20" fill="none" stroke="#22d3ee" stroke-width="18" opacity="0.8"/>
+              <path d="M 110 20 A 90 90 0 0 1 155 29" fill="none" stroke="#f59e0b" stroke-width="18" opacity="0.8"/>
+              <path d="M 155 29 A 90 90 0 0 1 200 110" fill="none" stroke="#f43f5e" stroke-width="18" stroke-linecap="round" opacity="0.8"/>
+              <!-- Needle -->
+              <g class="gauge-needle" id="gauge-needle" style="transform:rotate(-90deg)">
+                <line x1="110" y1="110" x2="110" y2="30" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+                <circle cx="110" cy="110" r="6" fill="white"/>
+              </g>
+            </svg>
+            <div class="gauge-center-text">
+              <div class="gauge-score" id="gauge-score">—</div>
+              <div class="gauge-label">Risk Score</div>
+            </div>
+          </div>
+          <div style="text-align:center;margin-top:16px">
+            <span class="badge" id="gauge-badge" style="font-size:13px;padding:6px 16px">Calculating...</span>
+          </div>
+          <div class="divider"></div>
+          <div class="risk-breakdown">
+            <div class="rb-item">
+              <div class="rb-val" id="rb-div" style="color:var(--emerald)">—</div>
+              <div class="rb-label">Diversification</div>
+            </div>
+            <div class="rb-item">
+              <div class="rb-val" id="rb-concentrate" style="color:var(--amber)">—</div>
+              <div class="rb-label">Concentration</div>
+            </div>
+            <div class="rb-item">
+              <div class="rb-val" id="rb-equity" style="color:var(--violet)">—</div>
+              <div class="rb-label">Equity %</div>
+            </div>
+            <div class="rb-item">
+              <div class="rb-val" id="rb-safe" style="color:var(--cyan)">—</div>
+              <div class="rb-label">Safe Assets</div>
+            </div>
+          </div>
+        </div>
+        <!-- Rebalancing Suggestions -->
+        <div class="card fade-in-2" style="margin-top:20px">
+          <div class="card-title">⚖️ Rebalancing Suggestions</div>
+          <div id="rebal-list">
+            <div style="color:var(--text2);font-size:13px;text-align:center;padding:20px">
+              Complete the risk assessment to see suggestions
+            </div>
+          </div>
+        </div>
+        <!-- Allocation Type Chart -->
+        <div class="card fade-in-3" style="margin-top:20px">
+          <div class="card-title">🏦 Asset Type Breakdown</div>
+          <div style="height:180px;position:relative">
+            <canvas id="typeChart"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+<nav class="bottom-nav">
+  <div class="bottom-nav-inner">
+    <a href="index.html"       class="bottom-nav-item"><span class="bnav-icon">🏠</span>Home</a>
+    <a href="portfolio.html"   class="bottom-nav-item"><span class="bnav-icon">📊</span>Portfolio</a>
+    <a href="risk.html"        class="bottom-nav-item"><span class="bnav-icon">🎯</span>Risk</a>
+    <a href="tracker.html"     class="bottom-nav-item"><span class="bnav-icon">📈</span>Track</a>
+    <a href="calculators.html" class="bottom-nav-item"><span class="bnav-icon">🧮</span>Calc</a>
+    <a href="insights.html"    class="bottom-nav-item"><span class="bnav-icon">💡</span>Insights</a>
+  </div>
+</nav>
+<script src="shared.js"></script>
+<script>
+const QUESTIONS = [
+  {
+    q: "How long do you plan to keep your investments?",
+    answers: [
+      { text: "⏱️ Less than 1 year", score: 1 },
+      { text: "📅 1–3 years",        score: 2 },
+      { text: "📆 3–10 years",        score: 4 },
+      { text: "🗓️ 10+ years",          score: 5 },
+    ]
+  },
+  {
+    q: "If your portfolio dropped 20% suddenly, you would:",
+    answers: [
+      { text: "😱 Sell everything immediately",   score: 1 },
+      { text: "😟 Sell some to reduce exposure",  score: 2 },
+      { text: "😐 Hold and wait for recovery",    score: 4 },
+      { text: "😏 Buy more at lower prices",      score: 5 },
+    ]
+  },
+  {
+    q: "What's your primary investment objective?",
+    answers: [
+      { text: "🛡️ Preserve what I have",           score: 1 },
+      { text: "🌱 Steady, modest growth",           score: 2 },
+      { text: "⚖️ Balance growth and safety",       score: 3 },
+      { text: "🚀 Maximum long-term growth",        score: 5 },
+    ]
+  },
+  {
+    q: "What % of your monthly income do you invest?",
+    answers: [
+      { text: "💸 Less than 5%",   score: 1 },
+      { text: "💰 5–10%",           score: 2 },
+      { text: "📈 10–25%",          score: 4 },
+      { text: "🏦 More than 25%",   score: 5 },
+    ]
+  },
+  {
+    q: "Which describes your investing experience?",
+    answers: [
+      { text: "🐣 Complete beginner",           score: 1 },
+      { text: "📖 Read a bit about it",         score: 2 },
+      { text: "🤓 Have some investments",       score: 3 },
+      { text: "💹 Active investor / trader",    score: 5 },
+    ]
+  },
+];
+let answers = new Array(QUESTIONS.length).fill(null);
+let quizComplete = false;
+function renderQuiz() {
+  const container = document.getElementById('quiz-container');
+  container.innerHTML = QUESTIONS.map((q, qi) => `
+    <div class="card quiz-card ${answers[qi] === null && qi > 0 && answers[qi-1] === null ? 'inactive' : ''}"
+         id="quiz-card-${qi}" style="padding:16px;margin-bottom:12px;background:var(--bg3);border:1px solid var(--border)">
+      <div class="question-num">Question ${qi+1} of ${QUESTIONS.length}</div>
+      <div class="question-text">${q.q}</div>
+      <div class="answer-grid">
+        ${q.answers.map((a, ai) => `
+          <button class="answer-btn ${answers[qi] === ai ? 'selected' : ''}"
+            onclick="selectAnswer(${qi}, ${ai})">${a.text}</button>
+        `).join('')}
+      </div>
+    </div>
+  `).join('');
+}
+function selectAnswer(qi, ai) {
+  answers[qi] = ai;
+  document.querySelectorAll(`#quiz-card-${qi} .answer-btn`).forEach((btn, i) => {
+    btn.classList.toggle('selected', i === ai);
+  });
+  const next = document.getElementById('quiz-card-' + (qi+1));
+  if (next) next.classList.remove('inactive');
+  quizComplete = answers.every(a => a !== null);
+  if (quizComplete) {
+    document.getElementById('analyze-btn').style.background = 'linear-gradient(135deg,var(--emerald-d),var(--emerald))';
+  }
+}
+function resetQuiz() {
+  answers.fill(null);
+  quizComplete = false;
+  renderQuiz();
+  document.getElementById('quiz-result').classList.add('hidden');
+}
+function getTotalScore() {
+  return answers.reduce((s, ai, qi) => s + (ai !== null ? QUESTIONS[qi].answers[ai].score : 0), 0);
+}
+const RISK_RESULTS = [
+  null,
+  { icon:'🐢', title:'Very Conservative', desc:'You prefer capital safety above all. Bonds and stable assets suit you best. Low risk, low return.', color:'var(--emerald)' },
+  { icon:'🛡️', title:'Conservative',      desc:'Modest growth with downside protection. A mix of bonds and blue-chip stocks works for you.',      color:'var(--cyan)' },
+  { icon:'⚖️', title:'Moderate',          desc:'Balanced approach. You accept some volatility for reasonable long-term gains.',                    color:'var(--amber)' },
+  { icon:'🚀', title:'Aggressive',        desc:'Growth-focused investor. You can stomach volatility and aim for superior long-term returns.',       color:'var(--rose)' },
+  { icon:'🦁', title:'Very Aggressive',   desc:'Maximum growth seeker. High risk, high reward. Concentrated in equities and high-growth assets.',  color:'var(--rose)' },
+];
+function getProfileFromScore(score) {
+  if (score <= 8)  return RISK_RESULTS[1];
+  if (score <= 12) return RISK_RESULTS[2];
+  if (score <= 16) return RISK_RESULTS[3];
+  if (score <= 20) return RISK_RESULTS[4];
+  return RISK_RESULTS[5];
+}
+function runAnalysis() {
+  if (!quizComplete) { showToast('Please answer all 5 questions first', 'error'); return; }
+  const score  = getTotalScore();
+  const profile = getProfileFromScore(score);
+  document.getElementById('quiz-result').classList.remove('hidden');
+  document.getElementById('result-icon').textContent  = profile.icon;
+  document.getElementById('result-title').textContent = profile.title;
+  document.getElementById('result-desc').textContent  = profile.desc;
+  const portfolio = getPortfolio();
+  const riskScore = calcRiskScore(portfolio);
+  const divScore  = calcDiversification(portfolio);
+  // Gauge
+  const deg = -90 + (riskScore / 100) * 180;
+  document.getElementById('gauge-needle').style.transform = `rotate(${deg}deg)`;
+  document.getElementById('gauge-score').textContent = riskScore;
+  const riskColors = ['badge-emerald','badge-cyan','badge-amber','badge-amber','badge-rose'];
+  const riskNames  = ['Low Risk','Moderate-Low','Moderate','Moderate-High','High Risk'];
+  const rIdx = Math.floor(riskScore / 25);
+  const badge = document.getElementById('gauge-badge');
+  badge.className = 'badge ' + riskColors[rIdx];
+  badge.textContent = riskNames[rIdx];
+  // Breakdown
+  const equityPct = portfolio.assets.filter(a=>a.type==='Stock'||a.type==='ETF').reduce((s,a)=>s+a.pct,0);
+  const safePct   = portfolio.assets.filter(a=>a.type==='Bond').reduce((s,a)=>s+a.pct,0);
+  const maxPct    = Math.max(...portfolio.assets.map(a=>a.pct));
+  document.getElementById('rb-div').textContent        = divScore + '%';
+  document.getElementById('rb-concentrate').textContent = maxPct + '%';
+  document.getElementById('rb-equity').textContent      = equityPct + '%';
+  document.getElementById('rb-safe').textContent        = safePct + '%';
+  renderRebalSuggestions(portfolio, riskScore, equityPct);
+  renderVolatility(portfolio);
+  renderScenarios(portfolio);
+  renderTypeChart(portfolio);
+}
+function renderRebalSuggestions(portfolio, riskScore, equityPct) {
+  const list = document.getElementById('rebal-list');
+  const suggestions = [];
+  const maxAsset = portfolio.assets.reduce((m, a) => a.pct > m.pct ? a : m, portfolio.assets[0]);
+  if (maxAsset.pct > 35) suggestions.push({
+    type:'REDUCE', color:'var(--rose)',
+    action: `Reduce ${maxAsset.ticker}`,
+    desc: `${maxAsset.ticker} is ${maxAsset.pct}% of your portfolio — consider trimming to under 30% for better balance.`,
+    arrow: '↓'
+  });
+  const bondPct = portfolio.assets.filter(a=>a.type==='Bond').reduce((s,a)=>s+a.pct,0);
+  if (bondPct < 10 && riskScore < 60) suggestions.push({
+    type:'ADD', color:'var(--emerald)',
+    action: 'Add Bonds (BND)',
+    desc: 'Your portfolio has little fixed income. Adding 10-15% bonds reduces volatility significantly.',
+    arrow: '+'
+  });
+  if (equityPct > 85) suggestions.push({
+    type:'DIVERSIFY', color:'var(--amber)',
+    action: 'Add Alternative Assets',
+    desc: 'Over 85% in equities. Consider Gold (GLD) or REITs for non-correlated returns.',
+    arrow: '↗'
+  });
+  const hasIntl = portfolio.assets.some(a=>a.ticker==='VEA'||a.ticker==='VXUS');
+  if (!hasIntl) suggestions.push({
+    type:'CONSIDER', color:'var(--cyan)',
+    action: 'Consider International Exposure',
+    desc: 'Adding 10-15% international ETFs (VEA, VXUS) can reduce US-market concentration risk.',
+    arrow: '🌍'
+  });
+  if (suggestions.length === 0) suggestions.push({
+    type:'OK', color:'var(--emerald)',
+    action: '✅ Portfolio looks healthy!',
+    desc: 'Your diversification and risk levels are well-balanced. Keep up with regular contributions.',
+    arrow: '👍'
+  });
+  list.innerHTML = suggestions.map(s => `
+    <div class="rebal-item">
+      <div>
+        <div class="rebal-action" style="color:${s.color}">${s.type}</div>
+        <div style="font-weight:700;font-size:14px;margin-bottom:4px">${s.action}</div>
+        <div class="rebal-desc">${s.desc}</div>
+      </div>
+      <div class="rebal-arrow">${s.arrow}</div>
+    </div>
+  `).join('');
+}
+const VOLATILITY_DATA = {
+  'VOO':  { vol: 15, beta: 1.00, color: '#22d3ee' },
+  'QQQ':  { vol: 22, beta: 1.18, color: '#8b5cf6' },
+  'NVDA': { vol: 48, beta: 1.85, color: '#10b981' },
+  'AAPL': { vol: 25, beta: 1.22, color: '#f59e0b' },
+  'BND':  { vol:  4, beta: 0.10, color: '#6366f1' },
+  'GLD':  { vol: 12, beta: 0.05, color: '#fbbf24' },
+  'AMZN': { vol: 30, beta: 1.35, color: '#0ea5e9' },
+  'VTI':  { vol: 15, beta: 1.00, color: '#34d399' },
+  'TSLA': { vol: 62, beta: 2.10, color: '#f43f5e' },
+  'WMT':  { vol:  8, beta: 0.55, color: '#34d399' },
+  'MCD':  { vol:  9, beta: 0.70, color: '#fb923c' },
+};
+function renderVolatility(portfolio) {
+  const container = document.getElementById('volatility-bars');
+  container.innerHTML = portfolio.assets.map(a => {
+    const vdata = VOLATILITY_DATA[a.ticker] || { vol: 20, beta: 1.0, color: '#22d3ee' };
+    const volColor = vdata.vol < 10 ? '#10b981' : vdata.vol < 25 ? '#f59e0b' : '#f43f5e';
+    return `
+      <div class="volatility-bar-wrap">
+        <div class="vol-header">
+          <span class="vol-name">${a.ticker} <span style="color:var(--text3);font-weight:400;font-size:11px">— ${a.name || ''}</span></span>
+          <span style="color:${volColor};font-family:var(--font-mono);font-size:12px">±${vdata.vol}% vol · β ${vdata.beta}</span>
+        </div>
+        <div class="progress-bar">
+          <div class="progress-fill" style="width:${Math.min(vdata.vol*1.2,100)}%;background:${volColor}"></div>
+        </div>
+      </div>
+    `;
+  }).join('');
+}
+function renderScenarios(portfolio) {
+  const equity = portfolio.assets.filter(a=>a.type==='Stock'||a.type==='ETF').reduce((s,a)=>s+a.pct,0)/100;
+  const bond   = portfolio.assets.filter(a=>a.type==='Bond').reduce((s,a)=>s+a.pct,0)/100;
+  const gold   = portfolio.assets.filter(a=>a.type==='Commodity').reduce((s,a)=>s+a.pct,0)/100;
+  const scenarios = [
+    { icon:'📉', title:'2008 Financial Crisis', impact: ((-38*equity) + (5*bond) + (8*gold)).toFixed(1), desc:'Worst-case equity selloff' },
+    { icon:'🦠', title:'2020 COVID Crash',       impact: ((-30*equity) + (8*bond) + (5*gold)).toFixed(1), desc:'Fast drop, rapid recovery' },
+    { icon:'🔥', title:'Inflation Spike (10%)',  impact: ((-15*equity) + (-8*bond) + (20*gold)).toFixed(1), desc:'Rising rates environment' },
+    { icon:'🚀', title:'Bull Market (+30%)',     impact: ((30*equity) + (3*bond) + (8*gold)).toFixed(1), desc:'Strong economic growth' },
+  ];
+  document.getElementById('scenarios-grid').innerHTML = scenarios.map(s => {
+    const isPos = parseFloat(s.impact) >= 0;
+    return `
+      <div class="scenario-card">
+        <div class="scenario-icon">${s.icon}</div>
+        <div class="scenario-title">${s.title}</div>
+        <div class="scenario-impact" style="color:${isPos?'var(--emerald)':'var(--rose)'};font-family:var(--font-mono);font-size:18px;font-weight:700">
+          ${isPos?'+':''}${s.impact}%
+        </div>
+        <div style="font-size:11px;color:var(--text2);margin-top:4px">${s.desc}</div>
+      </div>
+    `;
+  }).join('');
+}
+function renderTypeChart(portfolio) {
+  const types = { ETF:0, Stock:0, Bond:0, Commodity:0 };
+  portfolio.assets.forEach(a => { types[a.type] = (types[a.type]||0) + a.pct; });
+  const ctx = document.getElementById('typeChart').getContext('2d');
+  new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: Object.keys(types),
+      datasets: [{
+        data: Object.values(types),
+        backgroundColor: ['rgba(34,211,238,0.7)','rgba(16,185,129,0.7)','rgba(99,102,241,0.7)','rgba(245,158,11,0.7)'],
+        borderRadius: 6,
+        borderSkipped: false,
+      }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      plugins: { legend: { display: false } },
+      scales: {
+        x: { grid: { display: false } },
+        y: { grid: { color: 'rgba(34,211,238,0.06)' }, ticks: { callback: v => v + '%' } }
+      }
+    }
+  });
+}
+document.addEventListener('DOMContentLoaded', () => {
+  applyChartDefaults();
+  renderQuiz();
+  // Auto-run analysis from saved portfolio
+  const portfolio = getPortfolio();
+  const riskScore = calcRiskScore(portfolio);
+  const deg = -90 + (riskScore/100)*180;
+  setTimeout(() => {
+    document.getElementById('gauge-needle').style.transform = `rotate(${deg}deg)`;
+    document.getElementById('gauge-score').textContent = riskScore;
+    const rIdx = Math.floor(riskScore/25);
+    const badge = document.getElementById('gauge-badge');
+    badge.className = 'badge ' + ['badge-emerald','badge-cyan','badge-amber','badge-amber','badge-rose'][rIdx];
+    badge.textContent = ['Low Risk','Moderate-Low','Moderate','Moderate-High','High Risk'][rIdx];
+    const equityPct = portfolio.assets.filter(a=>a.type==='Stock'||a.type==='ETF').reduce((s,a)=>s+a.pct,0);
+    const safePct   = portfolio.assets.filter(a=>a.type==='Bond').reduce((s,a)=>s+a.pct,0);
+    const maxPct    = Math.max(...portfolio.assets.map(a=>a.pct));
+    document.getElementById('rb-div').textContent         = calcDiversification(portfolio) + '%';
+    document.getElementById('rb-concentrate').textContent  = maxPct + '%';
+    document.getElementById('rb-equity').textContent       = equityPct + '%';
+    document.getElementById('rb-safe').textContent         = safePct + '%';
+    renderRebalSuggestions(portfolio, riskScore, equityPct);
+    renderVolatility(portfolio);
+    renderScenarios(portfolio);
+    renderTypeChart(portfolio);
+  }, 400);
+});
+</script>
+</body>
+</html>

shared.css ADDED Viewed

	@@ -0,0 +1,772 @@

+/* ================================================================
+   FinWise — Shared Design System
+   Aesthetic: Dark fintech luxury · Syne + DM Sans typography
+   ================================================================ */
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap');
+/* ── Variables ─────────────────────────────────────────────────── */
+:root {
+  --bg:        #050d1a;
+  --bg2:       #091525;
+  --bg3:       #0d1f38;
+  --card:      rgba(12,24,48,0.85);
+  --card2:     rgba(18,34,66,0.70);
+  --border:    rgba(34,211,238,0.12);
+  --border2:   rgba(34,211,238,0.30);
+  --cyan:      #22d3ee;
+  --cyan-d:    #0891b2;
+  --emerald:   #10b981;
+  --emerald-d: #059669;
+  --rose:      #f43f5e;
+  --amber:     #f59e0b;
+  --violet:    #8b5cf6;
+  --indigo:    #6366f1;
+  --text:      #f0f6ff;
+  --text2:     #8faac8;
+  --text3:     #3d5a7a;
+  --nav-w:     240px;
+  --r:         14px;
+  --r-sm:      8px;
+  --r-lg:      20px;
+  --shadow:    0 8px 40px rgba(0,0,0,0.5);
+  --glow-c:    0 0 30px rgba(34,211,238,0.25);
+  --glow-e:    0 0 30px rgba(16,185,129,0.25);
+  --font-head: 'Syne', sans-serif;
+  --font-body: 'DM Sans', sans-serif;
+  --font-mono: 'DM Mono', monospace;
+  --transition: 0.22s cubic-bezier(.4,0,.2,1);
+}
+/* ── Reset & Base ──────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
+body {
+  font-family: var(--font-body);
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  line-height: 1.6;
+  font-size: 15px;
+  overflow-x: hidden;
+}
+/* Subtle grid background */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(34,211,238,0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(34,211,238,0.03) 1px, transparent 1px);
+  background-size: 40px 40px;
+  pointer-events: none;
+  z-index: 0;
+}
+/* ── Layout ────────────────────────────────────────────────────── */
+.app-shell {
+  display: flex;
+  min-height: 100vh;
+}
+.main-content {
+  margin-left: var(--nav-w);
+  flex: 1;
+  padding: 32px;
+  position: relative;
+  z-index: 1;
+  max-width: calc(100vw - var(--nav-w));
+}
+/* ── Sidebar Navigation ────────────────────────────────────────── */
+.sidebar {
+  position: fixed;
+  left: 0; top: 0; bottom: 0;
+  width: var(--nav-w);
+  background: linear-gradient(180deg, #071224 0%, #050d1a 100%);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  padding: 0 0 20px;
+  overflow-y: auto;
+}
+.sidebar-logo {
+  padding: 28px 24px 24px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 12px;
+}
+.sidebar-logo .logo-mark {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.logo-icon {
+  width: 36px; height: 36px;
+  background: linear-gradient(135deg, var(--cyan), var(--emerald));
+  border-radius: 10px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 18px;
+  box-shadow: var(--glow-c);
+}
+.logo-text {
+  font-family: var(--font-head);
+  font-size: 22px;
+  font-weight: 800;
+  background: linear-gradient(90deg, var(--cyan), var(--emerald));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.logo-sub {
+  font-size: 11px;
+  color: var(--text3);
+  margin-top: 2px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+.nav-section {
+  padding: 8px 12px;
+  flex: 1;
+}
+.nav-label {
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text3);
+  padding: 8px 12px 4px;
+  font-weight: 600;
+}
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 11px 14px;
+  border-radius: var(--r-sm);
+  color: var(--text2);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all var(--transition);
+  margin-bottom: 2px;
+  position: relative;
+  overflow: hidden;
+}
+.nav-item::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, var(--cyan), transparent);
+  opacity: 0;
+  transition: opacity var(--transition);
+}
+.nav-item:hover {
+  color: var(--text);
+  background: rgba(34,211,238,0.07);
+}
+.nav-item.active {
+  color: var(--cyan);
+  background: rgba(34,211,238,0.10);
+  border: 1px solid rgba(34,211,238,0.2);
+}
+.nav-item.active .nav-icon { filter: drop-shadow(0 0 6px var(--cyan)); }
+.nav-icon {
+  font-size: 18px;
+  width: 24px;
+  text-align: center;
+  flex-shrink: 0;
+}
+.nav-badge {
+  margin-left: auto;
+  background: var(--cyan);
+  color: var(--bg);
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 20px;
+}
+.sidebar-footer {
+  padding: 16px 20px 0;
+  border-top: 1px solid var(--border);
+}
+.market-ticker {
+  font-size: 11px;
+  color: var(--text3);
+  margin-bottom: 8px;
+  letter-spacing: 0.05em;
+}
+.ticker-item {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  padding: 3px 0;
+}
+.ticker-item .up   { color: var(--emerald); font-family: var(--font-mono); }
+.ticker-item .down { color: var(--rose);    font-family: var(--font-mono); }
+.ticker-name { color: var(--text2); font-weight: 500; }
+/* ── Bottom Mobile Nav ─────────────────────────────────────────── */
+.bottom-nav {
+  display: none;
+  position: fixed;
+  bottom: 0; left: 0; right: 0;
+  background: rgba(5,13,26,0.96);
+  backdrop-filter: blur(20px);
+  border-top: 1px solid var(--border);
+  padding: 8px 0 env(safe-area-inset-bottom);
+  z-index: 200;
+}
+.bottom-nav-inner {
+  display: flex;
+  justify-content: space-around;
+}
+.bottom-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  padding: 6px 12px;
+  color: var(--text3);
+  text-decoration: none;
+  font-size: 10px;
+  font-weight: 600;
+  transition: color var(--transition);
+  border-radius: var(--r-sm);
+}
+.bottom-nav-item .bnav-icon { font-size: 20px; }
+.bottom-nav-item.active { color: var(--cyan); }
+.bottom-nav-item:hover  { color: var(--text2); }
+/* ── Page Header ───────────────────────────────────────────────── */
+.page-header {
+  margin-bottom: 32px;
+}
+.page-title {
+  font-family: var(--font-head);
+  font-size: 32px;
+  font-weight: 800;
+  line-height: 1.1;
+  margin-bottom: 6px;
+}
+.page-title span {
+  background: linear-gradient(90deg, var(--cyan), var(--emerald));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.page-subtitle { color: var(--text2); font-size: 15px; }
+/* ── Cards ─────────────────────────────────────────────────────── */
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 24px;
+  backdrop-filter: blur(12px);
+  transition: border-color var(--transition), box-shadow var(--transition);
+}
+.card:hover {
+  border-color: var(--border2);
+  box-shadow: var(--glow-c);
+}
+.card-title {
+  font-family: var(--font-head);
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text2);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+/* ── Stat Cards ────────────────────────────────────────────────── */
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+  margin-bottom: 28px;
+}
+.stat-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 22px;
+  backdrop-filter: blur(12px);
+  transition: all var(--transition);
+  position: relative;
+  overflow: hidden;
+}
+.stat-card::after {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 2px;
+  background: var(--accent-color, var(--cyan));
+  opacity: 0.7;
+}
+.stat-card:hover {
+  border-color: var(--border2);
+  transform: translateY(-2px);
+  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
+}
+.stat-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text3);
+  margin-bottom: 10px;
+}
+.stat-value {
+  font-family: var(--font-head);
+  font-size: 26px;
+  font-weight: 800;
+  color: var(--text);
+  line-height: 1;
+  margin-bottom: 8px;
+}
+.stat-change {
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.stat-change.up   { color: var(--emerald); }
+.stat-change.down { color: var(--rose); }
+/* ── Grids ─────────────────────────────────────────────────────── */
+.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
+.grid-60-40 { display: grid; grid-template-columns: 60fr 40fr; gap: 20px; }
+.grid-40-60 { display: grid; grid-template-columns: 40fr 60fr; gap: 20px; }
+/* ── Buttons ───────────────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 11px 22px;
+  border-radius: var(--r-sm);
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: all var(--transition);
+  text-decoration: none;
+}
+.btn-primary {
+  background: linear-gradient(135deg, var(--cyan-d), var(--cyan));
+  color: var(--bg);
+  box-shadow: 0 4px 16px rgba(34,211,238,0.3);
+}
+.btn-primary:hover {
+  box-shadow: 0 6px 24px rgba(34,211,238,0.5);
+  transform: translateY(-1px);
+}
+.btn-secondary {
+  background: transparent;
+  color: var(--cyan);
+  border: 1px solid rgba(34,211,238,0.3);
+}
+.btn-secondary:hover {
+  background: rgba(34,211,238,0.08);
+  border-color: var(--cyan);
+}
+.btn-ghost {
+  background: rgba(255,255,255,0.04);
+  color: var(--text2);
+  border: 1px solid var(--border);
+}
+.btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--text); }
+.btn-emerald {
+  background: linear-gradient(135deg, var(--emerald-d), var(--emerald));
+  color: #fff;
+  box-shadow: var(--glow-e);
+}
+.btn-sm { padding: 7px 14px; font-size: 13px; }
+.btn-lg { padding: 14px 28px; font-size: 16px; }
+.btn-full { width: 100%; justify-content: center; }
+/* ── Choice Buttons ────────────────────────────────────────────── */
+.choice-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+.choice-btn {
+  padding: 10px 18px;
+  border-radius: 100px;
+  border: 1px solid var(--border2);
+  background: transparent;
+  color: var(--text2);
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.choice-btn:hover { border-color: var(--cyan); color: var(--text); }
+.choice-btn.selected {
+  background: rgba(34,211,238,0.12);
+  border-color: var(--cyan);
+  color: var(--cyan);
+  box-shadow: 0 0 16px rgba(34,211,238,0.2);
+}
+/* ── Sliders ───────────────────────────────────────────────────── */
+.slider-wrap { margin-bottom: 20px; }
+.slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+.slider-label { font-size: 13px; color: var(--text2); font-weight: 500; }
+.slider-val { font-family: var(--font-mono); font-size: 14px; color: var(--cyan); font-weight: 500; }
+input[type=range] {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--bg3);
+  outline: none;
+  cursor: pointer;
+}
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px; height: 18px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--cyan-d), var(--cyan));
+  box-shadow: 0 0 10px rgba(34,211,238,0.5);
+  cursor: pointer;
+  transition: box-shadow var(--transition);
+}
+input[type=range]::-webkit-slider-thumb:hover {
+  box-shadow: 0 0 18px rgba(34,211,238,0.8);
+}
+/* ── Progress Bar ──────────────────────────────────────────────── */
+.progress-bar {
+  height: 8px;
+  background: var(--bg3);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 4px;
+}
+.progress-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.6s cubic-bezier(.4,0,.2,1);
+}
+/* ── Tags / Badges ─────────────────────────────────────────────── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 100px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.badge-cyan    { background: rgba(34,211,238,0.15); color: var(--cyan); }
+.badge-emerald { background: rgba(16,185,129,0.15); color: var(--emerald); }
+.badge-rose    { background: rgba(244,63,94,0.15);  color: var(--rose); }
+.badge-amber   { background: rgba(245,158,11,0.15); color: var(--amber); }
+.badge-violet  { background: rgba(139,92,246,0.15); color: var(--violet); }
+/* ── Table ─────────────────────────────────────────────────────── */
+.table-wrap { overflow-x: auto; }
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+thead th {
+  padding: 12px 16px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text3);
+  border-bottom: 1px solid var(--border);
+}
+tbody tr {
+  border-bottom: 1px solid rgba(34,211,238,0.05);
+  transition: background var(--transition);
+}
+tbody tr:hover { background: rgba(34,211,238,0.04); }
+tbody td {
+  padding: 14px 16px;
+  color: var(--text2);
+  vertical-align: middle;
+}
+tbody td:first-child { color: var(--text); font-weight: 600; }
+/* ── Tooltips (simple) ─────────────────────────────────────────── */
+.tooltip-wrap { position: relative; display: inline-flex; }
+.tooltip-icon {
+  width: 16px; height: 16px;
+  border-radius: 50%;
+  background: var(--bg3);
+  border: 1px solid var(--border2);
+  color: var(--text3);
+  font-size: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: help;
+  font-weight: 700;
+  font-style: italic;
+}
+/* ── Section headings ──────────────────────────────────────────── */
+.section-title {
+  font-family: var(--font-head);
+  font-size: 18px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+/* ── Divider ───────────────────────────────────────────────────── */
+.divider { height: 1px; background: var(--border); margin: 24px 0; }
+/* ── Input Fields ──────────────────────────────────────────────── */
+.field-group { margin-bottom: 16px; }
+.field-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text2);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 6px;
+}
+input[type=text], input[type=number], select, textarea {
+  width: 100%;
+  padding: 11px 14px;
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: 14px;
+  outline: none;
+  transition: border-color var(--transition);
+}
+input[type=text]:focus,
+input[type=number]:focus,
+select:focus,
+textarea:focus {
+  border-color: var(--cyan);
+  box-shadow: 0 0 0 3px rgba(34,211,238,0.1);
+}
+select option { background: var(--bg2); }
+/* ── Tabs ──────────────────────────────────────────────────────── */
+.tab-bar {
+  display: flex;
+  gap: 4px;
+  background: var(--bg3);
+  border-radius: var(--r-sm);
+  padding: 4px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+.tab-btn {
+  flex: 1;
+  min-width: 120px;
+  padding: 9px 16px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--text2);
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition);
+  white-space: nowrap;
+  text-align: center;
+}
+.tab-btn.active {
+  background: var(--card);
+  color: var(--cyan);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+.tab-pane { display: none; }
+.tab-pane.active { display: block; }
+/* ── Risk Meter ────────────────────────────────────────────────── */
+.risk-meter-wrap {
+  text-align: center;
+  padding: 20px 0;
+}
+.risk-meter-label {
+  font-size: 13px;
+  color: var(--text2);
+  margin-top: 12px;
+  font-weight: 600;
+}
+/* ── Allocation Bar ────────────────────────────────────────────── */
+.alloc-bar {
+  height: 10px;
+  border-radius: 5px;
+  display: flex;
+  overflow: hidden;
+  gap: 2px;
+  margin: 10px 0;
+}
+.alloc-segment {
+  height: 100%;
+  border-radius: 5px;
+  transition: width 0.5s cubic-bezier(.4,0,.2,1);
+}
+/* ── Animations ────────────────────────────────────────────────── */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(16px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 10px rgba(34,211,238,0.2); }
+  50%       { box-shadow: 0 0 25px rgba(34,211,238,0.5); }
+}
+@keyframes counter { from { opacity: 0; } to { opacity: 1; } }
+.fade-in { animation: fadeInUp 0.5s ease both; }
+.fade-in-1 { animation-delay: 0.1s; }
+.fade-in-2 { animation-delay: 0.2s; }
+.fade-in-3 { animation-delay: 0.3s; }
+.fade-in-4 { animation-delay: 0.4s; }
+/* ── Utility ───────────────────────────────────────────────────── */
+.up   { color: var(--emerald); }
+.down { color: var(--rose); }
+.text-muted { color: var(--text2); }
+.text-sm { font-size: 13px; }
+.mono { font-family: var(--font-mono); }
+.mt-0 { margin-top: 0; }
+.mt-16 { margin-top: 16px; }
+.mt-24 { margin-top: 24px; }
+.mb-16 { margin-bottom: 16px; }
+.mb-24 { margin-bottom: 24px; }
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.gap-8  { gap: 8px; }
+.gap-12 { gap: 12px; }
+.gap-16 { gap: 16px; }
+.full-width { width: 100%; }
+.text-right { text-align: right; }
+.text-center { text-align: center; }
+.bold { font-weight: 700; }
+.hidden { display: none !important; }
+/* ── Scroll ────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text3); }
+/* ── Responsive ────────────────────────────────────────────────── */
+@media (max-width: 900px) {
+  .sidebar { display: none; }
+  .bottom-nav { display: block; }
+  .main-content {
+    margin-left: 0;
+    padding: 20px 16px 80px;
+    max-width: 100vw;
+  }
+  .grid-2, .grid-3, .grid-60-40, .grid-40-60 {
+    grid-template-columns: 1fr;
+  }
+  .stat-grid { grid-template-columns: 1fr 1fr; }
+  .page-title { font-size: 24px; }
+}
+@media (max-width: 480px) {
+  .stat-grid { grid-template-columns: 1fr; }
+  .choice-group { flex-direction: column; }
+}

shared.js ADDED Viewed

	@@ -0,0 +1,172 @@

+/* ================================================================
+   FinWise — Shared JavaScript
+   Utilities, navigation, localStorage helpers
+   ================================================================ */
+// ── Page detection ────────────────────────────────────────────────
+(function setActiveNav() {
+  const page = location.pathname.split('/').pop() || 'index.html';
+  document.querySelectorAll('.nav-item, .bottom-nav-item').forEach(el => {
+    const href = el.getAttribute('href') || '';
+    if (href === page || (page === '' && href === 'index.html')) {
+      el.classList.add('active');
+    }
+  });
+})();
+// ── LocalStorage Helpers ──────────────────────────────────────────
+const LS = {
+  get(key, fallback = null) {
+    try { const v = localStorage.getItem(key); return v ? JSON.parse(v) : fallback; }
+    catch { return fallback; }
+  },
+  set(key, val) {
+    try { localStorage.setItem(key, JSON.stringify(val)); return true; }
+    catch { return false; }
+  }
+};
+// ── Default Portfolio Data ────────────────────────────────────────
+const DEFAULT_PORTFOLIO = {
+  assets: [
+    { ticker: 'VOO',  name: 'Vanguard S&P 500 ETF',   pct: 30, price: 478.22, shares: 3.1,  color: '#22d3ee',  type: 'ETF' },
+    { ticker: 'QQQ',  name: 'Invesco Nasdaq 100 ETF',  pct: 20, price: 456.80, shares: 2.2,  color: '#8b5cf6',  type: 'ETF' },
+    { ticker: 'NVDA', name: 'NVIDIA Corporation',       pct: 15, price: 875.40, shares: 0.85, color: '#10b981',  type: 'Stock' },
+    { ticker: 'AAPL', name: 'Apple Inc.',               pct: 12, price: 188.60, shares: 3.2,  color: '#f59e0b',  type: 'Stock' },
+    { ticker: 'BND',  name: 'Vanguard Bond ETF',        pct: 13, price: 73.40,  shares: 8.8,  color: '#6366f1',  type: 'Bond' },
+    { ticker: 'GLD',  name: 'SPDR Gold Trust',          pct:  7, price: 218.10, shares: 1.6,  color: '#f43f5e',  type: 'Commodity' },
+    { ticker: 'AMZN', name: 'Amazon.com Inc.',          pct:  3, price: 188.90, shares: 0.8,  color: '#0ea5e9',  type: 'Stock' },
+  ],
+  totalInvested: 12500,
+  riskProfile: 'Moderate',
+  goals: ['Wealth Building'],
+  lastUpdated: new Date().toISOString()
+};
+function getPortfolio() {
+  return LS.get('fw_portfolio', DEFAULT_PORTFOLIO);
+}
+function savePortfolio(p) {
+  p.lastUpdated = new Date().toISOString();
+  LS.set('fw_portfolio', p);
+}
+// ── Simulated Market Data ─────────────────────────────────────────
+const MARKET_PRICES = {
+  'VOO':  { price: 478.22, change: +1.24, changePct: +0.26 },
+  'QQQ':  { price: 456.80, change: -2.10, changePct: -0.46 },
+  'NVDA': { price: 875.40, change: +18.5, changePct: +2.16 },
+  'AAPL': { price: 188.60, change: +0.80, changePct: +0.43 },
+  'BND':  { price:  73.40, change: -0.05, changePct: -0.07 },
+  'GLD':  { price: 218.10, change: +3.20, changePct: +1.49 },
+  'AMZN': { price: 188.90, change: +1.60, changePct: +0.86 },
+  'VTI':  { price: 240.30, change: +0.94, changePct: +0.39 },
+  'TSLA': { price: 182.30, change: -4.20, changePct: -2.25 },
+  'WMT':  { price:  67.80, change: +0.30, changePct: +0.44 },
+  'MCD':  { price: 281.50, change: +1.10, changePct: +0.39 },
+};
+// ── Historical Performance Generator ─────────────────────────────
+function generateHistory(days = 180, startVal = 10000, volatility = 0.012) {
+  const data = [];
+  let val = startVal;
+  const now = Date.now();
+  for (let i = days; i >= 0; i--) {
+    const date = new Date(now - i * 86400000);
+    const change = (Math.random() - 0.46) * volatility;
+    val = val * (1 + change);
+    data.push({ date: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }), value: Math.round(val * 100) / 100 });
+  }
+  return data;
+}
+// ── Number Formatting ─────────────────────────────────────────────
+function fmt$(n)   { return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }
+function fmtPct(n) { return (n > 0 ? '+' : '') + n.toFixed(2) + '%'; }
+function fmtK(n)   { return n >= 1000000 ? '$' + (n/1000000).toFixed(2) + 'M' : n >= 1000 ? '$' + (n/1000).toFixed(1) + 'K' : '$' + n.toFixed(0); }
+// ── Animated Counter ──────────────────────────────────────────────
+function animateCounter(el, target, prefix = '', suffix = '', duration = 1200) {
+  const start = parseFloat(el.textContent.replace(/[^0-9.-]/g, '')) || 0;
+  const startTime = performance.now();
+  function step(now) {
+    const p = Math.min((now - startTime) / duration, 1);
+    const ease = 1 - Math.pow(1 - p, 3);
+    const val = start + (target - start) * ease;
+    el.textContent = prefix + val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + suffix;
+    if (p < 1) requestAnimationFrame(step);
+  }
+  requestAnimationFrame(step);
+}
+// ── Chart.js Defaults ─────────────────────────────────────────────
+function applyChartDefaults() {
+  if (typeof Chart === 'undefined') return;
+  Chart.defaults.color = '#8faac8';
+  Chart.defaults.borderColor = 'rgba(34,211,238,0.10)';
+  Chart.defaults.font.family = "'DM Sans', sans-serif";
+}
+// ── Ticker Data for Sidebar ───────────────────────────────────────
+const TICKERS = [
+  { sym: 'S&P 500', val: '5,308', chg: '+0.26%', up: true },
+  { sym: 'NASDAQ',  val: '16,742', chg: '-0.46%', up: false },
+  { sym: 'BTC',     val: '68,420', chg: '+2.14%', up: true },
+  { sym: 'GOLD',    val: '2,318',  chg: '+1.49%', up: true },
+];
+function renderSidebarTickers() {
+  const container = document.getElementById('sidebar-tickers');
+  if (!container) return;
+  container.innerHTML = TICKERS.map(t => `
+    <div class="ticker-item">
+      <span class="ticker-name">${t.sym}</span>
+      <span class="${t.up ? 'up' : 'down'}">${t.chg}</span>
+    </div>
+  `).join('');
+}
+// ── Risk Score Calculator ─────────────────────────────────────────
+function calcRiskScore(portfolio) {
+  const weights = { ETF: 3, Stock: 5, Bond: 1, Commodity: 4 };
+  let score = 0;
+  portfolio.assets.forEach(a => {
+    score += (weights[a.type] || 3) * (a.pct / 100);
+  });
+  return Math.round((score / 5) * 100); // 0-100
+}
+// ── Diversification Score ─────────────────────────────────────────
+function calcDiversification(portfolio) {
+  const types = [...new Set(portfolio.assets.map(a => a.type))].length;
+  const count = portfolio.assets.length;
+  const maxPct = Math.max(...portfolio.assets.map(a => a.pct));
+  const concentration = maxPct > 40 ? 0.6 : maxPct > 25 ? 0.8 : 1.0;
+  return Math.round(((types / 4) * 0.4 + (Math.min(count, 7) / 7) * 0.4 + concentration * 0.2) * 100);
+}
+// ── Color Palette ─────────────────────────────────────────────────
+const ASSET_COLORS = ['#22d3ee','#10b981','#8b5cf6','#f59e0b','#f43f5e','#6366f1','#0ea5e9','#34d399','#a78bfa','#fb923c'];
+// ── Toast Notification ────────────────────────────────────────────
+function showToast(msg, type = 'success') {
+  const t = document.createElement('div');
+  t.style.cssText = `
+    position:fixed; bottom:90px; right:20px; z-index:9999;
+    padding:12px 20px; border-radius:10px; font-size:13px; font-weight:600;
+    background:${type === 'success' ? 'rgba(16,185,129,0.95)' : 'rgba(244,63,94,0.95)'};
+    color:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.4);
+    animation: fadeInUp 0.3s ease;
+    max-width: 300px;
+  `;
+  t.textContent = msg;
+  document.body.appendChild(t);
+  setTimeout(() => t.remove(), 3000);
+}
+// ── On DOM Ready ──────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  applyChartDefaults();
+  renderSidebarTickers();
+});

tracker.html ADDED Viewed

	@@ -0,0 +1,551 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>FinWise — Investment Tracker</title>
+<link rel="stylesheet" href="shared.css">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<style>
+.tracker-header-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.holding-row td:first-child { font-weight: 700; }
+.gain-cell { font-family: var(--font-mono); font-weight: 700; }
+.ticker-cell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.ticker-logo {
+  width: 34px; height: 34px;
+  border-radius: 8px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 9px;
+  font-weight: 800;
+  font-family: var(--font-mono);
+  color: var(--bg);
+  flex-shrink: 0;
+}
+.ticker-name-sub { font-size: 11px; color: var(--text2); font-weight: 400; }
+.mini-chart { width: 80px; height: 34px; }
+.pnl-bar-mini { height: 3px; border-radius: 2px; margin-top: 4px; }
+.edit-input {
+  background: transparent;
+  border: none;
+  border-bottom: 1px dashed var(--border2);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  width: 80px;
+  padding: 2px 4px;
+  text-align: right;
+  outline: none;
+}
+.edit-input:focus { border-bottom-color: var(--cyan); }
+.add-holding-form {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+  padding: 16px;
+  background: var(--bg3);
+  border-radius: var(--r-sm);
+  border: 1px dashed var(--border2);
+  margin-top: 16px;
+}
+.summary-strip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.ss-item {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ss-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3); font-weight: 700; }
+.ss-val   { font-family: var(--font-head); font-size: 20px; font-weight: 800; }
+.period-tabs {
+  display: flex;
+  gap: 4px;
+  background: var(--bg3);
+  border-radius: 8px;
+  padding: 3px;
+}
+.period-tab {
+  padding: 6px 14px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--text2);
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  font-family: var(--font-body);
+  transition: all var(--transition);
+}
+.period-tab.active { background: var(--card); color: var(--cyan); }
+.sort-header { cursor: pointer; user-select: none; white-space: nowrap; }
+.sort-header:hover { color: var(--cyan); }
+.sort-arrow { margin-left: 4px; opacity: 0.5; font-size: 10px; }
+.delete-btn {
+  background: none;
+  border: none;
+  color: var(--text3);
+  cursor: pointer;
+  font-size: 16px;
+  padding: 4px;
+  border-radius: 4px;
+  transition: all var(--transition);
+}
+.delete-btn:hover { color: var(--rose); background: rgba(244,63,94,0.1); }
+.watch-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 100px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+</style>
+</head>
+<body>
+<div class="app-shell">
+  <nav class="sidebar">
+    <div class="sidebar-logo">
+      <div class="logo-mark">
+        <div class="logo-icon">📈</div>
+        <div><div class="logo-text">FinWise</div><div class="logo-sub">Smart Investing</div></div>
+      </div>
+    </div>
+    <div class="nav-section">
+      <div class="nav-label">Main</div>
+      <a href="index.html"       class="nav-item"><span class="nav-icon">🏠</span> Dashboard</a>
+      <a href="portfolio.html"   class="nav-item"><span class="nav-icon">📊</span> Portfolio Builder</a>
+      <a href="risk.html"        class="nav-item"><span class="nav-icon">🎯</span> Risk Analyzer</a>
+      <a href="tracker.html"     class="nav-item"><span class="nav-icon">📈</span> Tracker</a>
+      <div class="nav-label">Tools</div>
+      <a href="calculators.html" class="nav-item"><span class="nav-icon">🧮</span> Calculators</a>
+      <a href="insights.html"    class="nav-item"><span class="nav-icon">💡</span> Insights</a>
+    </div>
+    <div class="sidebar-footer">
+      <div class="market-ticker">Live Market</div>
+      <div id="sidebar-tickers"></div>
+    </div>
+  </nav>
+  <main class="main-content">
+    <div class="page-header fade-in">
+      <div class="page-title">Investment <span>Tracker</span></div>
+      <div class="page-subtitle">Track your holdings, gains, and portfolio performance</div>
+    </div>
+    <!-- Summary Strip -->
+    <div class="summary-strip fade-in">
+      <div class="ss-item">
+        <div class="ss-label">Total Value</div>
+        <div class="ss-val" id="total-val" style="color:var(--cyan)">—</div>
+      </div>
+      <div class="ss-item">
+        <div class="ss-label">Total Cost</div>
+        <div class="ss-val" id="total-cost">—</div>
+      </div>
+      <div class="ss-item">
+        <div class="ss-label">Total Gain</div>
+        <div class="ss-val" id="total-gain">—</div>
+      </div>
+      <div class="ss-item">
+        <div class="ss-label">Gain %</div>
+        <div class="ss-val" id="total-gain-pct">—</div>
+      </div>
+      <div class="ss-item">
+        <div class="ss-label">Best Performer</div>
+        <div class="ss-val" id="best-performer" style="color:var(--emerald)">—</div>
+      </div>
+      <div class="ss-item">
+        <div class="ss-label">Holdings</div>
+        <div class="ss-val" id="holdings-count" style="color:var(--violet)">—</div>
+      </div>
+    </div>
+    <!-- Performance Chart -->
+    <div class="card fade-in fade-in-1" style="margin-bottom:20px">
+      <div class="flex justify-between items-center" style="margin-bottom:16px">
+        <div class="card-title" style="margin-bottom:0">📈 Performance History</div>
+        <div class="period-tabs">
+          <button class="period-tab" onclick="setPeriod(7)">1W</button>
+          <button class="period-tab" onclick="setPeriod(30)">1M</button>
+          <button class="period-tab active" onclick="setPeriod(90)">3M</button>
+          <button class="period-tab" onclick="setPeriod(180)">6M</button>
+          <button class="period-tab" onclick="setPeriod(365)">1Y</button>
+        </div>
+      </div>
+      <div style="height:220px;position:relative">
+        <canvas id="perfChart"></canvas>
+      </div>
+    </div>
+    <!-- Holdings Table -->
+    <div class="card fade-in fade-in-2">
+      <div class="tracker-header-bar">
+        <div class="section-title" style="margin-bottom:0">📋 Holdings</div>
+        <div class="flex gap-8">
+          <input type="text" id="search-input" placeholder="🔍 Search ticker..." style="width:160px;padding:8px 12px;font-size:13px">
+          <button class="btn btn-primary btn-sm" onclick="toggleAddForm()">+ Add Holding</button>
+        </div>
+      </div>
+      <div class="table-wrap">
+        <table id="holdings-table">
+          <thead>
+            <tr>
+              <th>Asset</th>
+              <th class="sort-header" onclick="sortBy('currentPrice')">Price <span class="sort-arrow">↕</span></th>
+              <th class="sort-header" onclick="sortBy('shares')">Shares <span class="sort-arrow">↕</span></th>
+              <th class="sort-header" onclick="sortBy('totalValue')">Value <span class="sort-arrow">↕</span></th>
+              <th>Avg Cost</th>
+              <th class="sort-header" onclick="sortBy('gain')">Gain/Loss <span class="sort-arrow">↕</span></th>
+              <th class="sort-header" onclick="sortBy('gainPct')">Return <span class="sort-arrow">↕</span></th>
+              <th>Alloc</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody id="holdings-body"></tbody>
+        </table>
+      </div>
+      <!-- Add Holding Form -->
+      <div class="add-holding-form hidden" id="add-form">
+        <div class="field-group" style="margin-bottom:0">
+          <label class="field-label">Ticker</label>
+          <select id="new-ticker" style="padding:9px 12px">
+            <option value="">Select…</option>
+            <option value="VOO">VOO — Vanguard S&P 500</option>
+            <option value="QQQ">QQQ — Nasdaq 100</option>
+            <option value="NVDA">NVDA — NVIDIA</option>
+            <option value="AAPL">AAPL — Apple</option>
+            <option value="AMZN">AMZN — Amazon</option>
+            <option value="TSLA">TSLA — Tesla</option>
+            <option value="BND">BND — Bond ETF</option>
+            <option value="GLD">GLD — Gold Trust</option>
+            <option value="WMT">WMT — Walmart</option>
+            <option value="MCD">MCD — McDonald's</option>
+            <option value="VTI">VTI — Total Market</option>
+          </select>
+        </div>
+        <div class="field-group" style="margin-bottom:0">
+          <label class="field-label">Shares</label>
+          <input type="number" id="new-shares" placeholder="e.g. 5" min="0.001" step="0.001" style="padding:9px 12px">
+        </div>
+        <div class="field-group" style="margin-bottom:0">
+          <label class="field-label">Avg Buy Price</label>
+          <input type="number" id="new-cost" placeholder="e.g. 450.00" min="0" step="0.01" style="padding:9px 12px">
+        </div>
+        <div style="display:flex;gap:8px;align-items:flex-end">
+          <button class="btn btn-emerald btn-full" onclick="addHolding()">Add</button>
+          <button class="btn btn-ghost" onclick="toggleAddForm()">✕</button>
+        </div>
+      </div>
+    </div>
+    <!-- Allocation Chart + Distribution -->
+    <div class="grid-2 fade-in fade-in-3" style="margin-top:20px">
+      <div class="card">
+        <div class="card-title">🥧 Portfolio Allocation</div>
+        <div style="height:200px;position:relative">
+          <canvas id="allocChart"></canvas>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-title">🏆 Top Performers</div>
+        <div id="top-performers"></div>
+      </div>
+    </div>
+  </main>
+</div>
+<nav class="bottom-nav">
+  <div class="bottom-nav-inner">
+    <a href="index.html"       class="bottom-nav-item"><span class="bnav-icon">🏠</span>Home</a>
+    <a href="portfolio.html"   class="bottom-nav-item"><span class="bnav-icon">📊</span>Portfolio</a>
+    <a href="risk.html"        class="bottom-nav-item"><span class="bnav-icon">🎯</span>Risk</a>
+    <a href="tracker.html"     class="bottom-nav-item"><span class="bnav-icon">📈</span>Track</a>
+    <a href="calculators.html" class="bottom-nav-item"><span class="bnav-icon">🧮</span>Calc</a>
+    <a href="insights.html"    class="bottom-nav-item"><span class="bnav-icon">💡</span>Insights</a>
+  </div>
+</nav>
+<script src="shared.js"></script>
+<script>
+let holdings = [];
+let sortField = 'totalValue';
+let sortAsc = false;
+let perfChart = null, allocChart = null;
+let currentPeriod = 90;
+const AVG_COSTS = { VOO:420, QQQ:390, NVDA:640, AAPL:170, BND:74, GLD:190, AMZN:165, VTI:210, TSLA:210, WMT:63, MCD:270 };
+function initHoldings() {
+  const portfolio = getPortfolio();
+  holdings = portfolio.assets.map(a => ({
+    ticker:       a.ticker,
+    name:         a.name,
+    color:        a.color,
+    type:         a.type,
+    shares:       a.shares,
+    currentPrice: MARKET_PRICES[a.ticker]?.price || a.price,
+    avgCost:      AVG_COSTS[a.ticker] || a.price * 0.9,
+  }));
+  computeAndRender();
+}
+function computeAndRender() {
+  const totalVal = holdings.reduce((s,h) => s + h.shares * h.currentPrice, 0);
+  holdings.forEach(h => {
+    h.totalValue  = h.shares * h.currentPrice;
+    h.totalCost   = h.shares * h.avgCost;
+    h.gain        = h.totalValue - h.totalCost;
+    h.gainPct     = h.totalCost > 0 ? (h.gain / h.totalCost) * 100 : 0;
+    h.alloc       = totalVal > 0 ? (h.totalValue / totalVal) * 100 : 0;
+  });
+  updateSummary(totalVal);
+  renderTable();
+  renderPerfChart(currentPeriod);
+  renderAllocChart();
+  renderTopPerformers();
+}
+function updateSummary(totalVal) {
+  const totalCost = holdings.reduce((s,h) => s + h.totalCost, 0);
+  const totalGain = totalVal - totalCost;
+  const gainPct   = totalCost > 0 ? (totalGain/totalCost)*100 : 0;
+  const best      = holdings.length > 0 ? holdings.reduce((m,h) => h.gainPct > m.gainPct ? h : m, holdings[0]) : null;
+  document.getElementById('total-val').textContent      = fmt$(totalVal);
+  document.getElementById('total-cost').textContent     = fmt$(totalCost);
+  const gainEl  = document.getElementById('total-gain');
+  gainEl.textContent = (totalGain>=0?'+':'') + fmt$(totalGain);
+  gainEl.style.color = totalGain >= 0 ? 'var(--emerald)' : 'var(--rose)';
+  const gainPctEl = document.getElementById('total-gain-pct');
+  gainPctEl.textContent = fmtPct(gainPct);
+  gainPctEl.style.color = gainPct >= 0 ? 'var(--emerald)' : 'var(--rose)';
+  document.getElementById('best-performer').textContent = best ? best.ticker : '—';
+  document.getElementById('holdings-count').textContent = holdings.length;
+}
+function renderTable() {
+  const query  = document.getElementById('search-input').value.toLowerCase();
+  let rows = [...holdings].filter(h => h.ticker.toLowerCase().includes(query) || h.name.toLowerCase().includes(query));
+  rows.sort((a,b) => sortAsc ? a[sortField]-b[sortField] : b[sortField]-a[sortField]);
+  const body = document.getElementById('holdings-body');
+  body.innerHTML = rows.map((h,i) => {
+    const mktData = MARKET_PRICES[h.ticker] || {};
+    const dayChg  = mktData.changePct || 0;
+    const badgeClass = h.type==='ETF'?'badge-cyan':h.type==='Bond'?'badge-violet':h.type==='Commodity'?'badge-amber':'badge-emerald';
+    return `
+      <tr class="holding-row" id="row-${h.ticker}">
+        <td>
+          <div class="ticker-cell">
+            <div class="ticker-logo" style="background:${h.color}">${h.ticker}</div>
+            <div>
+              <div style="font-weight:700">${h.ticker} <span class="badge ${badgeClass}" style="font-size:9px">${h.type}</span></div>
+              <div class="ticker-name-sub">${h.name}</div>
+              <div style="font-size:11px;margin-top:2px;color:${dayChg>=0?'var(--emerald)':'var(--rose)'}">${dayChg>=0?'▲':'▼'} ${Math.abs(dayChg).toFixed(2)}% today</div>
+            </div>
+          </div>
+        </td>
+        <td class="mono">${fmt$(h.currentPrice)}</td>
+        <td class="mono">
+          <input class="edit-input" type="number" value="${h.shares.toFixed(3)}" step="0.001" min="0"
+            onchange="updateShares('${h.ticker}', this.value)">
+        </td>
+        <td class="mono bold">${fmt$(h.totalValue)}</td>
+        <td class="mono">
+          <input class="edit-input" type="number" value="${h.avgCost.toFixed(2)}" step="0.01" min="0"
+            onchange="updateAvgCost('${h.ticker}', this.value)">
+        </td>
+        <td class="gain-cell ${h.gain>=0?'up':'down'}">${h.gain>=0?'+':''}${fmt$(h.gain)}</td>
+        <td class="gain-cell ${h.gainPct>=0?'up':'down'}">${fmtPct(h.gainPct)}</td>
+        <td style="min-width:90px">
+          <div style="font-size:12px;font-family:var(--font-mono)">${h.alloc.toFixed(1)}%</div>
+          <div class="pnl-bar-mini" style="width:${Math.min(h.alloc,100)}%;background:${h.color}"></div>
+        </td>
+        <td><button class="delete-btn" onclick="removeHolding('${h.ticker}')">🗑</button></td>
+      </tr>
+    `;
+  }).join('');
+}
+function updateShares(ticker, val) {
+  const h = holdings.find(h=>h.ticker===ticker);
+  if (h) { h.shares = parseFloat(val)||0; computeAndRender(); }
+}
+function updateAvgCost(ticker, val) {
+  const h = holdings.find(h=>h.ticker===ticker);
+  if (h) { h.avgCost = parseFloat(val)||0; computeAndRender(); }
+}
+function removeHolding(ticker) {
+  holdings = holdings.filter(h=>h.ticker!==ticker);
+  computeAndRender();
+  showToast(`${ticker} removed from tracker`);
+}
+function sortBy(field) {
+  if (sortField === field) sortAsc = !sortAsc;
+  else { sortField = field; sortAsc = false; }
+  renderTable();
+}
+function setPeriod(days) {
+  currentPeriod = days;
+  document.querySelectorAll('.period-tab').forEach(b => b.classList.remove('active'));
+  event.target.classList.add('active');
+  renderPerfChart(days);
+}
+function renderPerfChart(days) {
+  const totalCost = holdings.reduce((s,h)=>s+h.totalCost,0) || 10000;
+  const history   = generateHistory(days, totalCost);
+  const ctx = document.getElementById('perfChart').getContext('2d');
+  if (perfChart) perfChart.destroy();
+  const labels  = history.filter((_,i)=> days<=30 ? i%2===0 : days<=90 ? i%6===0 : i%14===0).map(d=>d.date);
+  const values  = history.filter((_,i)=> days<=30 ? i%2===0 : days<=90 ? i%6===0 : i%14===0).map(d=>d.value);
+  const isUp    = values[values.length-1] >= values[0];
+  const grad = ctx.createLinearGradient(0,0,0,220);
+  grad.addColorStop(0, isUp ? 'rgba(16,185,129,0.25)' : 'rgba(244,63,94,0.25)');
+  grad.addColorStop(1, 'rgba(0,0,0,0)');
+  perfChart = new Chart(ctx, {
+    type:'line',
+    data: { labels, datasets:[{
+      data: values,
+      borderColor: isUp ? '#10b981' : '#f43f5e',
+      backgroundColor: grad,
+      borderWidth: 2.5,
+      fill: true,
+      tension: 0.4,
+      pointRadius: 0,
+      pointHoverRadius: 5,
+    }]},
+    options: {
+      responsive:true, maintainAspectRatio:false,
+      plugins:{ legend:{display:false}, tooltip:{ callbacks:{ label: ctx => ' '+fmt$(ctx.raw) } } },
+      scales:{
+        x:{ grid:{display:false}, ticks:{font:{size:11}} },
+        y:{ grid:{color:'rgba(34,211,238,0.06)'}, ticks:{ callback: v => '$'+(v/1000).toFixed(0)+'K', font:{size:11} } }
+      },
+      interaction:{ intersect:false, mode:'index' }
+    }
+  });
+}
+function renderAllocChart() {
+  const ctx = document.getElementById('allocChart').getContext('2d');
+  if (allocChart) allocChart.destroy();
+  allocChart = new Chart(ctx, {
+    type:'doughnut',
+    data:{
+      labels: holdings.map(h=>h.ticker),
+      datasets:[{
+        data: holdings.map(h=>h.alloc),
+        backgroundColor: holdings.map(h=>h.color),
+        borderColor:'rgba(5,13,26,0.8)',
+        borderWidth:3,
+        hoverOffset:6
+      }]
+    },
+    options:{
+      responsive:true, maintainAspectRatio:false,
+      cutout:'68%',
+      plugins:{ legend:{ position:'right', labels:{ color:'#8faac8', font:{size:11}, boxWidth:12 } } }
+    }
+  });
+}
+function renderTopPerformers() {
+  const sorted = [...holdings].sort((a,b)=>b.gainPct-a.gainPct);
+  document.getElementById('top-performers').innerHTML = sorted.slice(0,5).map((h,i) => `
+    <div style="display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(34,211,238,0.06)">
+      <div style="font-size:16px">${i===0?'🥇':i===1?'🥈':i===2?'🥉':'📊'}</div>
+      <div class="ticker-logo" style="background:${h.color};width:30px;height:30px;font-size:8px">${h.ticker}</div>
+      <div style="flex:1">
+        <div style="font-weight:700;font-size:14px">${h.ticker}</div>
+        <div style="font-size:11px;color:var(--text2)">${fmt$(h.totalValue)}</div>
+      </div>
+      <div style="font-family:var(--font-mono);font-weight:700;color:${h.gainPct>=0?'var(--emerald)':'var(--rose)'}">
+        ${fmtPct(h.gainPct)}
+      </div>
+    </div>
+  `).join('');
+}
+function toggleAddForm() {
+  document.getElementById('add-form').classList.toggle('hidden');
+}
+function addHolding() {
+  const ticker = document.getElementById('new-ticker').value;
+  const shares = parseFloat(document.getElementById('new-shares').value);
+  const cost   = parseFloat(document.getElementById('new-cost').value);
+  if (!ticker || !shares || !cost) { showToast('Please fill all fields', 'error'); return; }
+  if (holdings.find(h=>h.ticker===ticker)) { showToast('Already in portfolio', 'error'); return; }
+  const mkt = MARKET_PRICES[ticker] || { price: cost };
+  const assetDef = { VOO:'Vanguard S&P 500 ETF', QQQ:'Invesco Nasdaq 100', NVDA:'NVIDIA Corp', AAPL:'Apple Inc.',
+    AMZN:'Amazon.com Inc.', TSLA:'Tesla Inc.', BND:'Vanguard Bond ETF', GLD:'SPDR Gold Trust',
+    WMT:'Walmart Inc.', MCD:"McDonald's Corp", VTI:'Vanguard Total Market' };
+  const typeMap = { VOO:'ETF', VTI:'ETF', QQQ:'ETF', BND:'Bond', GLD:'Commodity', SLV:'Commodity' };
+  holdings.push({
+    ticker,
+    name: assetDef[ticker] || ticker,
+    color: ASSET_COLORS[holdings.length % ASSET_COLORS.length],
+    type: typeMap[ticker] || 'Stock',
+    shares,
+    currentPrice: mkt.price,
+    avgCost: cost,
+  });
+  document.getElementById('new-ticker').value = '';
+  document.getElementById('new-shares').value = '';
+  document.getElementById('new-cost').value   = '';
+  toggleAddForm();
+  computeAndRender();
+  showToast(`✅ ${ticker} added to tracker`);
+}
+document.getElementById('search-input').addEventListener('input', renderTable);
+document.addEventListener('DOMContentLoaded', () => {
+  applyChartDefaults();
+  initHoldings();
+});
+</script>
+</body>
+</html>