<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 675" width="100%" height="100%" fill="none">
  <!-- Background -->
  <rect width="1200" height="675" rx="16" fill="#090d16" stroke="#1e293b" stroke-width="2"/>
  
  <!-- Window Controls -->
  <circle cx="32" cy="32" r="6" fill="#ef4444"/>
  <circle cx="52" cy="32" r="6" fill="#f59e0b"/>
  <circle cx="72" cy="32" r="6" fill="#10b981"/>
  <text x="110" y="37" fill="#64748b" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="13" font-weight="500">INR Finance Compass — Financial Overview (Dashboard Preview)</text>
  <line x1="0" y1="60" x2="1200" y2="60" stroke="#1e293b" stroke-width="1.5"/>

  <!-- Top Navigation / Header -->
  <rect x="40" y="80" width="180" height="32" rx="8" fill="#1e293b"/>
  <text x="56" y="101" fill="#f8fafc" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="14" font-weight="600">🧭 Finance Compass</text>
  
  <rect x="980" y="80" width="180" height="32" rx="8" fill="#0f172a" stroke="#334155"/>
  <text x="996" y="101" fill="#94a3b8" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="13">FY 2026-27 (Apr-Mar)</text>

  <!-- Metric Cards Row -->
  <!-- Card 1: Total Balance -->
  <g transform="translate(40, 130)">
    <rect width="260" height="110" rx="12" fill="#0f172a" stroke="#1e293b" stroke-width="1.5"/>
    <text x="20" y="34" fill="#94a3b8" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="13" font-weight="500">Total Balance (Liquid)</text>
    <text x="20" y="72" fill="#f8fafc" font-family="monospace" font-size="24" font-weight="700">₹14,82,450.00</text>
    <text x="20" y="96" fill="#10b981" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="11" font-weight="500">↑ Bank + Cash + Investments</text>
  </g>

  <!-- Card 2: Net Worth -->
  <g transform="translate(325, 130)">
    <rect width="260" height="110" rx="12" fill="#0f172a" stroke="#3b82f6" stroke-width="1.5"/>
    <text x="20" y="34" fill="#93c5fd" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="13" font-weight="500">True Net Worth</text>
    <text x="20" y="72" fill="#60a5fa" font-family="monospace" font-size="24" font-weight="700">₹14,18,920.00</text>
    <text x="20" y="96" fill="#94a3b8" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="11">Net of credit card balances</text>
  </g>

  <!-- Card 3: Credit Debt -->
  <g transform="translate(610, 130)">
    <rect width="260" height="110" rx="12" fill="#0f172a" stroke="#1e293b" stroke-width="1.5"/>
    <text x="20" y="34" fill="#94a3b8" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="13" font-weight="500">Credit Card Outstanding</text>
    <text x="20" y="72" fill="#f87171" font-family="monospace" font-size="24" font-weight="700">-₹63,530.00</text>
    <text x="20" y="96" fill="#94a3b8" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="11">Available limit: ₹4,36,470</text>
  </g>

  <!-- Card 4: Ledger Status -->
  <g transform="translate(895, 130)">
    <rect width="265" height="110" rx="12" fill="#0f172a" stroke="#059669" stroke-width="1.5"/>
    <text x="20" y="34" fill="#6ee7b7" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="13" font-weight="500">Ledger Integrity</text>
    <text x="20" y="70" fill="#34d399" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="20" font-weight="700">Anchored &amp; Verified</text>
    <text x="20" y="96" fill="#10b981" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="11">0 balance drift across 4 accounts</text>
  </g>

  <!-- Middle Section: Net Worth Trend Chart & Accounts -->
  <!-- Chart Card -->
  <g transform="translate(40, 265)">
    <rect width="720" height="370" rx="12" fill="#0f172a" stroke="#1e293b" stroke-width="1.5"/>
    <text x="24" y="38" fill="#f8fafc" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="15" font-weight="600">Point-in-Time Net Worth History (Anchor-Aware)</text>
    <text x="24" y="58" fill="#64748b" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="12">Recalculated with exact statement step balances across FY 2026-27</text>
    
    <!-- Grid Lines -->
    <line x1="24" y1="120" x2="696" y2="120" stroke="#1e293b" stroke-dasharray="4 4"/>
    <line x1="24" y1="180" x2="696" y2="180" stroke="#1e293b" stroke-dasharray="4 4"/>
    <line x1="24" y1="240" x2="696" y2="240" stroke="#1e293b" stroke-dasharray="4 4"/>
    <line x1="24" y1="300" x2="696" y2="300" stroke="#1e293b" stroke-dasharray="4 4"/>

    <!-- Sparkline / Trend Area -->
    <path d="M 50 310 Q 150 290 250 250 T 450 210 T 550 170 T 670 125 L 670 340 L 50 340 Z" fill="url(#blueGradient)" opacity="0.25"/>
    <path d="M 50 310 Q 150 290 250 250 T 450 210 T 550 170 T 670 125" fill="none" stroke="#3b82f6" stroke-width="3.5"/>
    
    <!-- Anchor Points -->
    <circle cx="250" cy="250" r="5" fill="#60a5fa" stroke="#0f172a" stroke-width="2"/>
    <circle cx="450" cy="210" r="5" fill="#60a5fa" stroke="#0f172a" stroke-width="2"/>
    <circle cx="550" cy="170" r="5" fill="#60a5fa" stroke="#0f172a" stroke-width="2"/>
    <circle cx="670" cy="125" r="6" fill="#38bdf8" stroke="#0f172a" stroke-width="2"/>

    <!-- Month Labels -->
    <text x="50" y="335" fill="#64748b" font-family="monospace" font-size="11">Apr</text>
    <text x="174" y="335" fill="#64748b" font-family="monospace" font-size="11">May</text>
    <text x="298" y="335" fill="#64748b" font-family="monospace" font-size="11">Jun</text>
    <text x="422" y="335" fill="#64748b" font-family="monospace" font-size="11">Jul</text>
    <text x="546" y="335" fill="#64748b" font-family="monospace" font-size="11">Aug</text>
    <text x="660" y="335" fill="#38bdf8" font-family="monospace" font-size="11" font-weight="700">Sep</text>
  </g>

  <!-- Accounts List Sidebar -->
  <g transform="translate(780, 265)">
    <rect width="380" height="370" rx="12" fill="#0f172a" stroke="#1e293b" stroke-width="1.5"/>
    <text x="20" y="36" fill="#f8fafc" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="15" font-weight="600">Tracked Accounts (4)</text>
    
    <!-- Account 1 -->
    <g transform="translate(20, 60)">
      <rect width="340" height="60" rx="8" fill="#1e293b" opacity="0.6"/>
      <text x="16" y="26" fill="#f8fafc" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="13" font-weight="600">HDFC Salary Savings</text>
      <text x="16" y="46" fill="#94a3b8" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="11">Bank • Statement Anchored</text>
      <text x="324" y="36" text-anchor="end" fill="#34d399" font-family="monospace" font-size="13" font-weight="600">₹8,45,210.00</text>
    </g>

    <!-- Account 2 -->
    <g transform="translate(20, 130)">
      <rect width="340" height="60" rx="8" fill="#1e293b" opacity="0.6"/>
      <text x="16" y="26" fill="#f8fafc" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="13" font-weight="600">IndusInd Primary</text>
      <text x="16" y="46" fill="#94a3b8" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="11">Bank • Reconciled</text>
      <text x="324" y="36" text-anchor="end" fill="#34d399" font-family="monospace" font-size="13" font-weight="600">₹4,22,190.00</text>
    </g>

    <!-- Account 3 -->
    <g transform="translate(20, 200)">
      <rect width="340" height="60" rx="8" fill="#1e293b" opacity="0.6"/>
      <text x="16" y="26" fill="#f8fafc" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="13" font-weight="600">ICICI Amazon Pay</text>
      <text x="16" y="46" fill="#94a3b8" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="11">Credit Card • Limit ₹3,00,000</text>
      <text x="324" y="36" text-anchor="end" fill="#f87171" font-family="monospace" font-size="13" font-weight="600">-₹42,850.00</text>
    </g>

    <!-- Account 4 -->
    <g transform="translate(20, 270)">
      <rect width="340" height="60" rx="8" fill="#1e293b" opacity="0.6"/>
      <text x="16" y="26" fill="#f8fafc" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="13" font-weight="600">Emergency Cash Wallet</text>
      <text x="16" y="46" fill="#94a3b8" font-family="-apple-system, BlinkMacSystemFont, sans-serif" font-size="11">Cash</text>
      <text x="324" y="36" text-anchor="end" fill="#f8fafc" font-family="monospace" font-size="13" font-weight="600">₹25,000.00</text>
    </g>
  </g>

  <!-- Definitions -->
  <defs>
    <linearGradient id="blueGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#3b82f6" stop-opacity="0.0"/>
    </linearGradient>
  </defs>
</svg>
