<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{data.summary.brand}} · Live Portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif&display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #07090d;
    --surface: #0f131c;
    --surface-2: #141a26;
    --surface-3: #1b2231;
    --line: #1f2738;
    --line-strong: #2a3447;
    --hairline: rgba(255,255,255,0.04);
    --ink: #e8edf7;
    --ink-soft: #c2cad8;
    --muted: #6b7689;
    --up: #22e58c;
    --up-soft: rgba(34,229,140,0.14);
    --down: #ff4f6d;
    --down-soft: rgba(255,79,109,0.14);
    --accent: #facc15;
    --accent-soft: rgba(250,204,21,0.12);
    --cyan: #22d3ee;
    --cyan-soft: rgba(34,211,238,0.14);
    --violet: #a78bfa;
    --violet-soft: rgba(167,139,250,0.16);
    --display: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --serif: 'Instrument Serif', Georgia, serif;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background:
      radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,0.07), transparent 60%),
      radial-gradient(900px 500px at -10% 30%, rgba(167,139,250,0.05), transparent 60%),
      radial-gradient(1200px 800px at 50% 110%, rgba(34,229,140,0.04), transparent 60%),
      var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 13.5px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }
  a { color: inherit; text-decoration: none; }

  /* Header */
  header.app {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid var(--hairline);
    background: rgba(7,9,13,0.6);
    backdrop-filter: blur(18px) saturate(140%);
    position: sticky; top: 0; z-index: 50;
  }
  .brand { display: flex; align-items: center; gap: 12px; }
  .logo {
    width: 28px; height: 28px; border-radius: 8px;
    background: conic-gradient(from 220deg, #facc15, #22d3ee, #a78bfa, #22e58c, #facc15);
    box-shadow: 0 0 24px rgba(250,204,21,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
  }
  .brand .word { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; font-size: 17px; }
  .brand .pro {
    font-family: var(--mono); font-size: 10px;
    color: var(--accent); border: 1px solid rgba(250,204,21,0.45);
    padding: 2px 6px; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.12em;
    background: var(--accent-soft);
  }
  .market-state {
    display: inline-flex; gap: 8px; align-items: center;
    padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
    font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
    background: var(--surface);
  }
  .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--up); position: relative; }
  .pulse::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(34,229,140,0.6);
    animation: pulse 1.8s ease-out infinite;
  }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,229,140,0.6); }
    70%  { box-shadow: 0 0 0 12px rgba(34,229,140,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,229,140,0); }
  }
  .head-right { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .head-right .label { text-transform: uppercase; letter-spacing: 0.1em; }
  .head-right .val { color: var(--ink-soft); }

  /* Layout */
  main { padding: 24px 28px 60px; max-width: 1480px; margin: 0 auto; display: grid; gap: 18px; }
  .card {
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    overflow: hidden;
  }

  /* Hero */
  .hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; }
  .pf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
  .pf-meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
  .pf-title { font-family: var(--display); font-weight: 600; font-size: 14.5px; margin-top: 6px; color: var(--ink-soft); }
  .pf-value {
    font-family: var(--display); font-weight: 600;
    font-size: 56px; line-height: 1; margin-top: 10px;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, #fff, #b9c1d2);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .pf-deltas { display: flex; gap: 22px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
  .delta {
    display: inline-flex; gap: 8px; align-items: baseline;
    font-family: var(--mono); font-size: 13px;
  }
  .delta .v { font-weight: 600; }
  .delta.up .v, .delta.up .arr { color: var(--up); }
  .delta.down .v, .delta.down .arr { color: var(--down); }
  .delta .lbl { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; }
  .pf-chart { margin-top: 18px; }
  .pf-chart svg { width: 100%; height: 160px; display: block; }
  .pf-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 4px; padding: 0 2px; }

  /* KPI grid */
  .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .kpi {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 12px;
    padding: 14px 14px 16px;
  }
  .kpi .k-label { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
  .kpi .k-val { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; margin-top: 6px; }
  .kpi .k-val.up { color: var(--up); }
  .kpi .k-val.down { color: var(--down); }
  .kpi .k-val.alpha { color: var(--accent); }
  .kpi .k-sub { font-family: var(--mono); font-size: 11px; margin-top: 4px; color: var(--muted); }
  .kpi .k-sub.up { color: var(--up); }
  .kpi .k-sub.down { color: var(--down); }

  /* Featured card */
  .grid-2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 18px; }
  .chart-card { padding: 0; }
  .chart-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--hairline);
  }
  .ticker { display: flex; gap: 16px; align-items: center; }
  .ticker .icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 700; font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  }
  .ticker .meta { display: flex; flex-direction: column; gap: 2px; }
  .ticker .sym-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .ticker .sym { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
  .ticker .ext {
    font-family: var(--mono); font-size: 10.5px; color: var(--muted);
    border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .ticker .ext:hover { color: var(--ink); border-color: var(--line-strong); }
  .ticker .name { color: var(--muted); font-size: 12.5px; }
  .price-block { text-align: right; }
  .px-now { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; }
  .px-now.up { color: var(--up); }
  .px-now.down { color: var(--down); }
  .px-delta { font-family: var(--mono); font-size: 12.5px; margin-top: 2px; }
  .px-delta.up { color: var(--up); }
  .px-delta.down { color: var(--down); }
  .chart-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--hairline); border-bottom: 1px solid var(--hairline); }
  .stat { background: var(--surface); padding: 10px 16px; }
  .stat .lbl { font-family: var(--mono); font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
  .stat .val { font-family: var(--mono); font-size: 12.5px; color: var(--ink); margin-top: 2px; font-weight: 500; }

  .chart-body { padding: 16px 22px 18px; }
  .feat-chart svg { width: 100%; height: 280px; display: block; }

  /* AI Rec */
  .ai-card { padding: 0; overflow: hidden; }
  .ai-head {
    padding: 18px 20px 14px;
    background:
      radial-gradient(360px 140px at 100% 0%, rgba(167,139,250,0.18), transparent 65%),
      radial-gradient(280px 120px at 0% 100%, rgba(34,229,140,0.12), transparent 70%),
      var(--surface-2);
    border-bottom: 1px solid var(--hairline);
  }
  .ai-tag {
    display: inline-flex; gap: 8px; align-items: center;
    font-family: var(--mono); font-size: 10.5px; color: var(--violet);
    text-transform: uppercase; letter-spacing: 0.14em;
  }
  .ai-tag::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--violet);
    box-shadow: 0 0 12px var(--violet);
  }
  .ai-headline {
    font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.015em;
    margin-top: 10px; line-height: 1.25;
  }
  .ai-headline .accent {
    background: linear-gradient(90deg, var(--up), var(--cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .ai-sub { color: var(--ink-soft); font-size: 12.5px; margin-top: 6px; max-width: 46ch; }

  .ai-stat-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-top: 1px solid var(--hairline); }
  .ai-stat { padding: 14px 16px; border-right: 1px solid var(--hairline); }
  .ai-stat:last-child { border-right: 0; }
  .ai-stat .lbl { font-family: var(--mono); font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
  .ai-stat .v { font-family: var(--display); font-weight: 600; font-size: 18px; margin-top: 4px; letter-spacing: -0.01em; }
  .ai-stat .v.up { color: var(--up); }
  .ai-stat .v.cyan { color: var(--cyan); }
  .ai-stat .bar { height: 4px; background: var(--surface-3); border-radius: 999px; margin-top: 8px; overflow: hidden; }
  .ai-stat .fill { height: 100%; background: linear-gradient(90deg, var(--up), var(--cyan)); border-radius: 999px; box-shadow: 0 0 14px rgba(34,211,238,0.5); }

  .ai-thesis { padding: 16px 20px; }
  .ai-thesis h4 { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 10px; font-weight: 500; }
  .thesis-list { display: flex; flex-direction: column; gap: 10px; }
  .thesis-item { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: flex-start; }
  .thesis-num {
    font-family: var(--mono); font-size: 10px; color: var(--accent);
    border: 1px solid rgba(250,204,21,0.4); border-radius: 6px;
    padding: 1px 0; width: 22px; text-align: center;
    background: var(--accent-soft);
  }
  .thesis-text { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
  .thesis-text strong { color: var(--ink); font-weight: 600; }

  /* Panels */
  .panel-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--hairline); }
  .panel-title { font-family: var(--display); font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em; }
  .panel-sub { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }

  /* Holdings */
  table.holdings { width: 100%; border-collapse: collapse; }
  table.holdings th, table.holdings td {
    padding: 12px 16px; text-align: left; font-size: 12.5px;
    border-bottom: 1px solid var(--hairline);
  }
  table.holdings th {
    font-family: var(--mono); font-size: 10px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500;
    background: var(--surface);
  }
  td.num, th.num { text-align: right; font-family: var(--mono); }
  .sym-cell { display: flex; align-items: center; gap: 12px; }
  .sym-mark {
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 700; font-size: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .sym-cell .name-block { display: flex; flex-direction: column; }
  .sym-cell .sym-name { font-weight: 600; letter-spacing: -0.005em; font-size: 13px; }
  .sym-cell .sym-co { font-size: 11px; color: var(--muted); }
  .sym-cell a.ext-mini {
    font-family: var(--mono); font-size: 10px; color: var(--muted);
    margin-left: 6px;
    border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
  }
  .pl-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  .pl-pct { font-size: 11px; opacity: 0.85; }
  .pl-cell.up .pl-val, .pl-cell.up .pl-pct { color: var(--up); }
  .pl-cell.down .pl-val, .pl-cell.down .pl-pct { color: var(--down); }
  .alloc-bar { width: 80px; height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; display: inline-block; vertical-align: middle; }
  .alloc-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); border-radius: 999px; }
  .last-cell { font-weight: 600; }
  .last-cell.up { color: var(--up); }
  .last-cell.down { color: var(--down); }

  /* Watchlist */
  .watch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 14px; }
  .watch-card {
    border: 1px solid var(--line); border-radius: 12px;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    padding: 14px 16px;
  }
  .watch-top { display: flex; justify-content: space-between; align-items: flex-start; }
  .watch-sym { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
  .watch-co { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .watch-pct {
    font-family: var(--mono); font-size: 11.5px;
    padding: 3px 7px; border-radius: 6px; font-weight: 600;
  }
  .watch-pct.up { color: var(--up); background: var(--up-soft); }
  .watch-pct.down { color: var(--down); background: var(--down-soft); }
  .watch-px { font-family: var(--display); font-weight: 600; font-size: 22px; margin-top: 10px; letter-spacing: -0.015em; }
  .watch-spark { margin-top: 8px; }
  .watch-spark svg { width: 100%; height: 40px; display: block; }
  .watch-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

  /* News */
  .news-list { display: flex; flex-direction: column; }
  .news-item {
    padding: 14px 20px; display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: flex-start;
    border-bottom: 1px solid var(--hairline);
  }
  .news-time { font-family: var(--mono); font-size: 10.5px; color: var(--muted); padding-top: 2px; }
  .news-body .src { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
  .news-body .head { font-size: 13px; color: var(--ink); margin-top: 4px; line-height: 1.45; }
  .impact { font-family: var(--mono); font-size: 10.5px; padding: 2px 7px; border-radius: 5px; }
  .impact.high { color: var(--down); border: 1px solid rgba(255,79,109,0.35); background: var(--down-soft); }
  .impact.pos  { color: var(--up); border: 1px solid rgba(34,229,140,0.35); background: var(--up-soft); }
  .impact.med  { color: var(--accent); border: 1px solid rgba(250,204,21,0.35); background: var(--accent-soft); }

  footer.app {
    margin-top: 14px; padding: 18px 28px;
    border-top: 1px solid var(--hairline);
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono); font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.1em;
  }
  footer .live { display: inline-flex; gap: 6px; align-items: center; color: var(--up); }
  footer .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }

  @media (max-width: 1180px) {
    .grid-2 { grid-template-columns: 1fr; }
    .hero { grid-template-columns: 1fr; }
    .watch-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 720px) {
    .chart-stats { grid-template-columns: repeat(3, 1fr); }
    .ai-stat-row { grid-template-columns: 1fr; }
    .pf-value { font-size: 40px; }
    .watch-grid { grid-template-columns: 1fr; }
  }
</style>
</head>
<body>

<header class="app">
  <div class="brand">
    <div class="logo"></div>
    <div class="word">{{data.summary.brand}}</div>
    <div class="pro">{{data.summary.pro}}</div>
  </div>
  <div class="head-right">
    <span class="market-state">
      <span class="pulse"></span>
      <span>{{data.summary.marketState}}</span>
    </span>
    <span class="label">Last sync</span>
    <span class="val">{{data.summary.lastSync}}</span>
  </div>
</header>

<main>

  <!-- ─────── Hero ─────── -->
  <section class="hero">
    <div class="card">
      <div class="pf-head">
        <div>
          <div class="pf-meta">{{data.summary.totalLabel}}</div>
          <div class="pf-title">{{data.summary.accountsLabel}}</div>
        </div>
      </div>

      <div class="pf-value">{{data.summary.totalValue}}</div>

      <div class="pf-deltas">
        <span class="delta {{data.summary.todayDirClass}}">
          <span class="arr">{{data.summary.todayArrow}}</span>
          <span class="v">{{data.summary.todayPnl}}</span>
          <span class="lbl">today · {{data.summary.todayPct}}</span>
        </span>
        <span class="delta {{data.summary.allTimeDirClass}}">
          <span class="arr">{{data.summary.allTimeArrow}}</span>
          <span class="v">{{data.summary.allTimePnl}}</span>
          <span class="lbl">all time · {{data.summary.allTimePct}}</span>
        </span>
        <span class="delta">
          <span class="lbl" style="color:var(--muted)">{{data.summary.alphaLabel}}</span>
          <span class="v" style="color:var(--accent);">{{data.summary.alpha}}</span>
        </span>
      </div>

      <div class="pf-chart">
        <svg viewBox="0 0 880 170" preserveAspectRatio="none">
          <defs>
            <linearGradient id="pfGrad" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stop-color="#22e58c" stop-opacity="0.32"/>
              <stop offset="60%" stop-color="#22e58c" stop-opacity="0.06"/>
              <stop offset="100%" stop-color="#22e58c" stop-opacity="0"/>
            </linearGradient>
            <linearGradient id="pfStroke" x1="0" x2="1" y1="0" y2="0">
              <stop offset="0%" stop-color="#22d3ee"/>
              <stop offset="100%" stop-color="#22e58c"/>
            </linearGradient>
            <pattern id="grid" x="0" y="0" width="60" height="34" patternUnits="userSpaceOnUse">
              <path d="M 60 0 L 0 0 0 34" fill="none" stroke="rgba(255,255,255,0.035)" stroke-width="1"/>
            </pattern>
          </defs>
          <rect width="880" height="170" fill="url(#grid)"/>
          <polygon fill="url(#pfGrad)" points="{{data.summary.areaPoints}}" />
          <polyline fill="none" stroke="url(#pfStroke)" stroke-width="2.4" stroke-linejoin="round" stroke-linecap="round"
            points="{{data.summary.linePoints}}" />
          <circle cx="{{data.summary.markerX}}" cy="{{data.summary.markerY}}" r="4" fill="#22e58c"/>
          <circle cx="{{data.summary.markerX}}" cy="{{data.summary.markerY}}" r="9" fill="none" stroke="#22e58c" stroke-opacity="0.5"/>
          <line x1="{{data.summary.markerX}}" y1="{{data.summary.markerY}}" x2="{{data.summary.markerX}}" y2="160" stroke="rgba(34,229,140,0.35)" stroke-dasharray="2 3"/>
        </svg>
        <div class="pf-axis">
          <span>{{data.summary.axisTicks.0.label}}</span>
          <span>{{data.summary.axisTicks.1.label}}</span>
          <span>{{data.summary.axisTicks.2.label}}</span>
          <span>{{data.summary.axisTicks.3.label}}</span>
          <span>{{data.summary.axisTicks.4.label}}</span>
          <span>{{data.summary.axisTicks.5.label}}</span>
          <span>{{data.summary.axisTicks.6.label}}</span>
        </div>
      </div>
    </div>

    <div class="kpis">
      <div class="kpi">
        <div class="k-label">{{data.kpis.0.label}}</div>
        <div class="k-val {{data.kpis.0.valueClass}}">{{data.kpis.0.value}}</div>
        <div class="k-sub {{data.kpis.0.subClass}}">{{data.kpis.0.sub}}</div>
      </div>
      <div class="kpi">
        <div class="k-label">{{data.kpis.1.label}}</div>
        <div class="k-val {{data.kpis.1.valueClass}}">{{data.kpis.1.value}}</div>
        <div class="k-sub {{data.kpis.1.subClass}}">{{data.kpis.1.sub}}</div>
      </div>
      <div class="kpi">
        <div class="k-label">{{data.kpis.2.label}}</div>
        <div class="k-val {{data.kpis.2.valueClass}}">{{data.kpis.2.value}}</div>
        <div class="k-sub {{data.kpis.2.subClass}}">{{data.kpis.2.sub}}</div>
      </div>
      <div class="kpi">
        <div class="k-label">{{data.kpis.3.label}}</div>
        <div class="k-val {{data.kpis.3.valueClass}}">{{data.kpis.3.value}}</div>
        <div class="k-sub {{data.kpis.3.subClass}}">{{data.kpis.3.sub}}</div>
      </div>
    </div>
  </section>

  <!-- ─────── Featured chart + AI rec ─────── -->
  <section class="grid-2">

    <div class="card chart-card">
      <div class="chart-head">
        <div class="ticker">
          <div class="icon" style="background:{{data.featured.iconBg}};color:{{data.featured.iconFg}};">{{data.featured.iconText}}</div>
          <div class="meta">
            <div class="sym-row">
              <span class="sym">{{data.featured.symbol}}</span>
              <a class="ext" href="{{data.featured.exchangeUrl}}" target="_blank" rel="noopener">{{data.featured.exchangeName}} ↗</a>
              <a class="ext" href="{{data.featured.yahooUrl}}" target="_blank" rel="noopener">Yahoo ↗</a>
              <a class="ext" href="{{data.featured.tradingViewUrl}}" target="_blank" rel="noopener">TradingView ↗</a>
            </div>
            <div class="name">{{data.featured.name}} · {{data.featured.sector}}</div>
          </div>
        </div>
        <div class="price-block">
          <div class="px-now {{data.featured.dirClass}}">{{data.featured.price}}</div>
          <div class="px-delta {{data.featured.dirClass}}">{{data.featured.delta}}</div>
        </div>
      </div>

      <div class="chart-stats">
        <div class="stat">
          <div class="lbl">{{data.featured.stats.0.label}}</div>
          <div class="val">{{data.featured.stats.0.value}}</div>
        </div>
        <div class="stat">
          <div class="lbl">{{data.featured.stats.1.label}}</div>
          <div class="val">{{data.featured.stats.1.value}}</div>
        </div>
        <div class="stat">
          <div class="lbl">{{data.featured.stats.2.label}}</div>
          <div class="val">{{data.featured.stats.2.value}}</div>
        </div>
        <div class="stat">
          <div class="lbl">{{data.featured.stats.3.label}}</div>
          <div class="val">{{data.featured.stats.3.value}}</div>
        </div>
        <div class="stat">
          <div class="lbl">{{data.featured.stats.4.label}}</div>
          <div class="val">{{data.featured.stats.4.value}}</div>
        </div>
        <div class="stat">
          <div class="lbl">{{data.featured.stats.5.label}}</div>
          <div class="val">{{data.featured.stats.5.value}}</div>
        </div>
      </div>

      <div class="chart-body">
        <div class="feat-chart">
          <svg viewBox="0 0 880 280" preserveAspectRatio="none">
            <defs>
              <linearGradient id="featGrad" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stop-color="#22e58c" stop-opacity="0.34"/>
                <stop offset="100%" stop-color="#22e58c" stop-opacity="0"/>
              </linearGradient>
              <pattern id="grid2" x="0" y="0" width="80" height="40" patternUnits="userSpaceOnUse">
                <path d="M 80 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.035)" stroke-width="1"/>
              </pattern>
            </defs>
            <rect width="880" height="280" fill="url(#grid2)"/>
            <polygon fill="url(#featGrad)" points="{{data.featured.areaPoints}}"/>
            <polyline fill="none" stroke="#22e58c" stroke-width="2.2" stroke-linejoin="round" stroke-linecap="round" points="{{data.featured.linePoints}}"/>
            <line x1="40" y1="{{data.featured.priceY}}" x2="844" y2="{{data.featured.priceY}}" stroke="rgba(34,229,140,0.25)" stroke-dasharray="2 3"/>
            <rect x="836" y="{{data.featured.priceLabelY}}" width="50" height="18" fill="#22e58c" rx="3"/>
            <text x="861" y="{{data.featured.priceLabelTextY}}" font-family="Geist Mono,monospace" font-size="10" fill="#00200f" text-anchor="middle" font-weight="700">{{data.featured.priceLabelText}}</text>
          </svg>
        </div>
      </div>
    </div>

    <div class="card ai-card">
      <div class="ai-head">
        <div class="ai-tag">{{data.ai.tag}}</div>
        <div class="ai-headline">
          <span class="accent">{{data.ai.headlineAccent}}</span> {{data.ai.headlineRest}}
        </div>
        <div class="ai-sub">{{data.ai.sub}}</div>
      </div>

      <div class="ai-stat-row">
        <div class="ai-stat">
          <div class="lbl">Conviction</div>
          <div class="v cyan">{{data.ai.conviction}}</div>
          <div class="bar"><div class="fill" style="width:{{data.ai.convictionWidth}}"></div></div>
        </div>
        <div class="ai-stat">
          <div class="lbl">{{data.ai.targetLabel}}</div>
          <div class="v up">{{data.ai.target}}</div>
          <div class="lbl" style="margin-top:2px;color:var(--up)">{{data.ai.upside}} upside</div>
        </div>
        <div class="ai-stat">
          <div class="lbl">Suggested size</div>
          <div class="v">{{data.ai.size}}</div>
          <div class="lbl" style="margin-top:2px;color:var(--muted)">{{data.ai.sizeSub}}</div>
        </div>
      </div>

      <div class="ai-thesis">
        <h4>Why now · catalysts</h4>
        <div class="thesis-list">
          <div class="thesis-item">
            <div class="thesis-num">{{data.ai.catalysts.0.n}}</div>
            <div class="thesis-text"><strong>{{data.ai.catalysts.0.title}}</strong> — {{data.ai.catalysts.0.text}}</div>
          </div>
          <div class="thesis-item">
            <div class="thesis-num">{{data.ai.catalysts.1.n}}</div>
            <div class="thesis-text"><strong>{{data.ai.catalysts.1.title}}</strong> — {{data.ai.catalysts.1.text}}</div>
          </div>
          <div class="thesis-item">
            <div class="thesis-num">{{data.ai.catalysts.2.n}}</div>
            <div class="thesis-text"><strong>{{data.ai.catalysts.2.title}}</strong> — {{data.ai.catalysts.2.text}}</div>
          </div>
        </div>
      </div>
    </div>

  </section>

  <!-- ─────── Holdings ─────── -->
  <div class="card" style="padding:0;">
    <div class="panel-head">
      <div class="panel-title">{{data.holdingsPanel.title}}</div>
      <div class="panel-sub">{{data.holdingsPanel.subtitle}}</div>
    </div>
    <table class="holdings">
      <thead>
        <tr>
          <th>Symbol</th>
          <th class="num">Shares</th>
          <th class="num">Avg cost</th>
          <th class="num">Last</th>
          <th class="num">Market value</th>
          <th class="num">Unrealized P&L</th>
          <th>Allocation</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="sym-cell">
              <span class="sym-mark" style="background:{{data.holdings.0.iconBg}};color:{{data.holdings.0.iconFg}};">{{data.holdings.0.icon}}</span>
              <span class="name-block">
                <span class="sym-name">{{data.holdings.0.symbol}}
                  <a class="ext-mini" href="{{data.holdings.0.exchUrl}}" target="_blank" rel="noopener">{{data.holdings.0.exchName}} ↗</a>
                </span>
                <span class="sym-co">{{data.holdings.0.companyName}}</span>
              </span>
            </div>
          </td>
          <td class="num">{{data.holdings.0.shares}}</td>
          <td class="num">{{data.holdings.0.avgCost}}</td>
          <td class="num last-cell {{data.holdings.0.dirClass}}">{{data.holdings.0.last}}</td>
          <td class="num">{{data.holdings.0.marketValue}}</td>
          <td class="num">
            <span class="pl-cell {{data.holdings.0.dirClass}}">
              <span class="pl-val">{{data.holdings.0.pnl}}</span>
              <span class="pl-pct">{{data.holdings.0.pnlPct}}</span>
            </span>
          </td>
          <td>
            <span class="alloc-bar"><span class="alloc-fill" style="width:{{data.holdings.0.allocWidth}}"></span></span>
            <span style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;">{{data.holdings.0.alloc}}</span>
          </td>
        </tr>
        <tr>
          <td>
            <div class="sym-cell">
              <span class="sym-mark" style="background:{{data.holdings.1.iconBg}};color:{{data.holdings.1.iconFg}};">{{data.holdings.1.icon}}</span>
              <span class="name-block">
                <span class="sym-name">{{data.holdings.1.symbol}}
                  <a class="ext-mini" href="{{data.holdings.1.exchUrl}}" target="_blank" rel="noopener">{{data.holdings.1.exchName}} ↗</a>
                </span>
                <span class="sym-co">{{data.holdings.1.companyName}}</span>
              </span>
            </div>
          </td>
          <td class="num">{{data.holdings.1.shares}}</td>
          <td class="num">{{data.holdings.1.avgCost}}</td>
          <td class="num last-cell {{data.holdings.1.dirClass}}">{{data.holdings.1.last}}</td>
          <td class="num">{{data.holdings.1.marketValue}}</td>
          <td class="num">
            <span class="pl-cell {{data.holdings.1.dirClass}}">
              <span class="pl-val">{{data.holdings.1.pnl}}</span>
              <span class="pl-pct">{{data.holdings.1.pnlPct}}</span>
            </span>
          </td>
          <td>
            <span class="alloc-bar"><span class="alloc-fill" style="width:{{data.holdings.1.allocWidth}}"></span></span>
            <span style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;">{{data.holdings.1.alloc}}</span>
          </td>
        </tr>
        <tr>
          <td>
            <div class="sym-cell">
              <span class="sym-mark" style="background:{{data.holdings.2.iconBg}};color:{{data.holdings.2.iconFg}};">{{data.holdings.2.icon}}</span>
              <span class="name-block">
                <span class="sym-name">{{data.holdings.2.symbol}}
                  <a class="ext-mini" href="{{data.holdings.2.exchUrl}}" target="_blank" rel="noopener">{{data.holdings.2.exchName}} ↗</a>
                </span>
                <span class="sym-co">{{data.holdings.2.companyName}}</span>
              </span>
            </div>
          </td>
          <td class="num">{{data.holdings.2.shares}}</td>
          <td class="num">{{data.holdings.2.avgCost}}</td>
          <td class="num last-cell {{data.holdings.2.dirClass}}">{{data.holdings.2.last}}</td>
          <td class="num">{{data.holdings.2.marketValue}}</td>
          <td class="num">
            <span class="pl-cell {{data.holdings.2.dirClass}}">
              <span class="pl-val">{{data.holdings.2.pnl}}</span>
              <span class="pl-pct">{{data.holdings.2.pnlPct}}</span>
            </span>
          </td>
          <td>
            <span class="alloc-bar"><span class="alloc-fill" style="width:{{data.holdings.2.allocWidth}}"></span></span>
            <span style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;">{{data.holdings.2.alloc}}</span>
          </td>
        </tr>
        <tr>
          <td>
            <div class="sym-cell">
              <span class="sym-mark" style="background:{{data.holdings.3.iconBg}};color:{{data.holdings.3.iconFg}};">{{data.holdings.3.icon}}</span>
              <span class="name-block">
                <span class="sym-name">{{data.holdings.3.symbol}}
                  <a class="ext-mini" href="{{data.holdings.3.exchUrl}}" target="_blank" rel="noopener">{{data.holdings.3.exchName}} ↗</a>
                </span>
                <span class="sym-co">{{data.holdings.3.companyName}}</span>
              </span>
            </div>
          </td>
          <td class="num">{{data.holdings.3.shares}}</td>
          <td class="num">{{data.holdings.3.avgCost}}</td>
          <td class="num last-cell {{data.holdings.3.dirClass}}">{{data.holdings.3.last}}</td>
          <td class="num">{{data.holdings.3.marketValue}}</td>
          <td class="num">
            <span class="pl-cell {{data.holdings.3.dirClass}}">
              <span class="pl-val">{{data.holdings.3.pnl}}</span>
              <span class="pl-pct">{{data.holdings.3.pnlPct}}</span>
            </span>
          </td>
          <td>
            <span class="alloc-bar"><span class="alloc-fill" style="width:{{data.holdings.3.allocWidth}}"></span></span>
            <span style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;">{{data.holdings.3.alloc}}</span>
          </td>
        </tr>
        <tr>
          <td>
            <div class="sym-cell">
              <span class="sym-mark" style="background:{{data.holdings.4.iconBg}};color:{{data.holdings.4.iconFg}};">{{data.holdings.4.icon}}</span>
              <span class="name-block">
                <span class="sym-name">{{data.holdings.4.symbol}}
                  <a class="ext-mini" href="{{data.holdings.4.exchUrl}}" target="_blank" rel="noopener">{{data.holdings.4.exchName}} ↗</a>
                </span>
                <span class="sym-co">{{data.holdings.4.companyName}}</span>
              </span>
            </div>
          </td>
          <td class="num">{{data.holdings.4.shares}}</td>
          <td class="num">{{data.holdings.4.avgCost}}</td>
          <td class="num last-cell {{data.holdings.4.dirClass}}">{{data.holdings.4.last}}</td>
          <td class="num">{{data.holdings.4.marketValue}}</td>
          <td class="num">
            <span class="pl-cell {{data.holdings.4.dirClass}}">
              <span class="pl-val">{{data.holdings.4.pnl}}</span>
              <span class="pl-pct">{{data.holdings.4.pnlPct}}</span>
            </span>
          </td>
          <td>
            <span class="alloc-bar"><span class="alloc-fill" style="width:{{data.holdings.4.allocWidth}}"></span></span>
            <span style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;">{{data.holdings.4.alloc}}</span>
          </td>
        </tr>
        <tr>
          <td>
            <div class="sym-cell">
              <span class="sym-mark" style="background:{{data.holdings.5.iconBg}};color:{{data.holdings.5.iconFg}};">{{data.holdings.5.icon}}</span>
              <span class="name-block">
                <span class="sym-name">{{data.holdings.5.symbol}}
                  <a class="ext-mini" href="{{data.holdings.5.exchUrl}}" target="_blank" rel="noopener">{{data.holdings.5.exchName}} ↗</a>
                </span>
                <span class="sym-co">{{data.holdings.5.companyName}}</span>
              </span>
            </div>
          </td>
          <td class="num">{{data.holdings.5.shares}}</td>
          <td class="num">{{data.holdings.5.avgCost}}</td>
          <td class="num last-cell {{data.holdings.5.dirClass}}">{{data.holdings.5.last}}</td>
          <td class="num">{{data.holdings.5.marketValue}}</td>
          <td class="num">
            <span class="pl-cell {{data.holdings.5.dirClass}}">
              <span class="pl-val">{{data.holdings.5.pnl}}</span>
              <span class="pl-pct">{{data.holdings.5.pnlPct}}</span>
            </span>
          </td>
          <td>
            <span class="alloc-bar"><span class="alloc-fill" style="width:{{data.holdings.5.allocWidth}}"></span></span>
            <span style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;">{{data.holdings.5.alloc}}</span>
          </td>
        </tr>
        <tr>
          <td>
            <div class="sym-cell">
              <span class="sym-mark" style="background:{{data.holdings.6.iconBg}};color:{{data.holdings.6.iconFg}};">{{data.holdings.6.icon}}</span>
              <span class="name-block">
                <span class="sym-name">{{data.holdings.6.symbol}}
                  <a class="ext-mini" href="{{data.holdings.6.exchUrl}}" target="_blank" rel="noopener">{{data.holdings.6.exchName}} ↗</a>
                </span>
                <span class="sym-co">{{data.holdings.6.companyName}}</span>
              </span>
            </div>
          </td>
          <td class="num">{{data.holdings.6.shares}}</td>
          <td class="num">{{data.holdings.6.avgCost}}</td>
          <td class="num last-cell {{data.holdings.6.dirClass}}">{{data.holdings.6.last}}</td>
          <td class="num">{{data.holdings.6.marketValue}}</td>
          <td class="num">
            <span class="pl-cell {{data.holdings.6.dirClass}}">
              <span class="pl-val">{{data.holdings.6.pnl}}</span>
              <span class="pl-pct">{{data.holdings.6.pnlPct}}</span>
            </span>
          </td>
          <td>
            <span class="alloc-bar"><span class="alloc-fill" style="width:{{data.holdings.6.allocWidth}}"></span></span>
            <span style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;">{{data.holdings.6.alloc}}</span>
          </td>
        </tr>
        <tr>
          <td>
            <div class="sym-cell">
              <span class="sym-mark" style="background:{{data.holdings.7.iconBg}};color:{{data.holdings.7.iconFg}};">{{data.holdings.7.icon}}</span>
              <span class="name-block">
                <span class="sym-name">{{data.holdings.7.symbol}}
                  <a class="ext-mini" href="{{data.holdings.7.exchUrl}}" target="_blank" rel="noopener">{{data.holdings.7.exchName}} ↗</a>
                </span>
                <span class="sym-co">{{data.holdings.7.companyName}}</span>
              </span>
            </div>
          </td>
          <td class="num">{{data.holdings.7.shares}}</td>
          <td class="num">{{data.holdings.7.avgCost}}</td>
          <td class="num last-cell {{data.holdings.7.dirClass}}">{{data.holdings.7.last}}</td>
          <td class="num">{{data.holdings.7.marketValue}}</td>
          <td class="num">
            <span class="pl-cell {{data.holdings.7.dirClass}}">
              <span class="pl-val">{{data.holdings.7.pnl}}</span>
              <span class="pl-pct">{{data.holdings.7.pnlPct}}</span>
            </span>
          </td>
          <td>
            <span class="alloc-bar"><span class="alloc-fill" style="width:{{data.holdings.7.allocWidth}}"></span></span>
            <span style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;">{{data.holdings.7.alloc}}</span>
          </td>
        </tr>
        <tr>
          <td>
            <div class="sym-cell">
              <span class="sym-mark" style="background:{{data.holdings.8.iconBg}};color:{{data.holdings.8.iconFg}};">{{data.holdings.8.icon}}</span>
              <span class="name-block">
                <span class="sym-name">{{data.holdings.8.symbol}}
                  <a class="ext-mini" href="{{data.holdings.8.exchUrl}}" target="_blank" rel="noopener">{{data.holdings.8.exchName}} ↗</a>
                </span>
                <span class="sym-co">{{data.holdings.8.companyName}}</span>
              </span>
            </div>
          </td>
          <td class="num">{{data.holdings.8.shares}}</td>
          <td class="num">{{data.holdings.8.avgCost}}</td>
          <td class="num last-cell {{data.holdings.8.dirClass}}">{{data.holdings.8.last}}</td>
          <td class="num">{{data.holdings.8.marketValue}}</td>
          <td class="num">
            <span class="pl-cell {{data.holdings.8.dirClass}}">
              <span class="pl-val">{{data.holdings.8.pnl}}</span>
              <span class="pl-pct">{{data.holdings.8.pnlPct}}</span>
            </span>
          </td>
          <td>
            <span class="alloc-bar"><span class="alloc-fill" style="width:{{data.holdings.8.allocWidth}}"></span></span>
            <span style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:8px;">{{data.holdings.8.alloc}}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- ─────── Watchlist + News ─────── -->
  <section class="grid-2">

    <div class="card" style="padding:0;">
      <div class="panel-head">
        <div class="panel-title">{{data.watchlistPanel.title}}</div>
        <div class="panel-sub">{{data.watchlistPanel.subtitle}}</div>
      </div>
      <div class="watch-grid">
        <div class="watch-card">
          <div class="watch-top">
            <div>
              <div class="watch-sym">{{data.watchlist.0.symbol}}</div>
              <div class="watch-co">{{data.watchlist.0.companyName}}</div>
            </div>
            <span class="watch-pct {{data.watchlist.0.dirClass}}">{{data.watchlist.0.pct}}</span>
          </div>
          <div class="watch-px">{{data.watchlist.0.price}}</div>
          <div class="watch-spark">
            <svg viewBox="0 0 200 40" preserveAspectRatio="none">
              <polyline fill="none" stroke="{{data.watchlist.0.sparkColor}}" stroke-width="1.6" points="{{data.watchlist.0.sparkPoints}}"/>
            </svg>
          </div>
          <div class="watch-foot">
            <span>Vol {{data.watchlist.0.volume}}</span>
            <a href="{{data.watchlist.0.exchUrl}}" target="_blank" rel="noopener">{{data.watchlist.0.exchName}} ↗</a>
          </div>
        </div>
        <div class="watch-card">
          <div class="watch-top">
            <div>
              <div class="watch-sym">{{data.watchlist.1.symbol}}</div>
              <div class="watch-co">{{data.watchlist.1.companyName}}</div>
            </div>
            <span class="watch-pct {{data.watchlist.1.dirClass}}">{{data.watchlist.1.pct}}</span>
          </div>
          <div class="watch-px">{{data.watchlist.1.price}}</div>
          <div class="watch-spark">
            <svg viewBox="0 0 200 40" preserveAspectRatio="none">
              <polyline fill="none" stroke="{{data.watchlist.1.sparkColor}}" stroke-width="1.6" points="{{data.watchlist.1.sparkPoints}}"/>
            </svg>
          </div>
          <div class="watch-foot">
            <span>Vol {{data.watchlist.1.volume}}</span>
            <a href="{{data.watchlist.1.exchUrl}}" target="_blank" rel="noopener">{{data.watchlist.1.exchName}} ↗</a>
          </div>
        </div>
        <div class="watch-card">
          <div class="watch-top">
            <div>
              <div class="watch-sym">{{data.watchlist.2.symbol}}</div>
              <div class="watch-co">{{data.watchlist.2.companyName}}</div>
            </div>
            <span class="watch-pct {{data.watchlist.2.dirClass}}">{{data.watchlist.2.pct}}</span>
          </div>
          <div class="watch-px">{{data.watchlist.2.price}}</div>
          <div class="watch-spark">
            <svg viewBox="0 0 200 40" preserveAspectRatio="none">
              <polyline fill="none" stroke="{{data.watchlist.2.sparkColor}}" stroke-width="1.6" points="{{data.watchlist.2.sparkPoints}}"/>
            </svg>
          </div>
          <div class="watch-foot">
            <span>Vol {{data.watchlist.2.volume}}</span>
            <a href="{{data.watchlist.2.exchUrl}}" target="_blank" rel="noopener">{{data.watchlist.2.exchName}} ↗</a>
          </div>
        </div>
        <div class="watch-card">
          <div class="watch-top">
            <div>
              <div class="watch-sym">{{data.watchlist.3.symbol}}</div>
              <div class="watch-co">{{data.watchlist.3.companyName}}</div>
            </div>
            <span class="watch-pct {{data.watchlist.3.dirClass}}">{{data.watchlist.3.pct}}</span>
          </div>
          <div class="watch-px">{{data.watchlist.3.price}}</div>
          <div class="watch-spark">
            <svg viewBox="0 0 200 40" preserveAspectRatio="none">
              <polyline fill="none" stroke="{{data.watchlist.3.sparkColor}}" stroke-width="1.6" points="{{data.watchlist.3.sparkPoints}}"/>
            </svg>
          </div>
          <div class="watch-foot">
            <span>Vol {{data.watchlist.3.volume}}</span>
            <a href="{{data.watchlist.3.exchUrl}}" target="_blank" rel="noopener">{{data.watchlist.3.exchName}} ↗</a>
          </div>
        </div>
        <div class="watch-card">
          <div class="watch-top">
            <div>
              <div class="watch-sym">{{data.watchlist.4.symbol}}</div>
              <div class="watch-co">{{data.watchlist.4.companyName}}</div>
            </div>
            <span class="watch-pct {{data.watchlist.4.dirClass}}">{{data.watchlist.4.pct}}</span>
          </div>
          <div class="watch-px">{{data.watchlist.4.price}}</div>
          <div class="watch-spark">
            <svg viewBox="0 0 200 40" preserveAspectRatio="none">
              <polyline fill="none" stroke="{{data.watchlist.4.sparkColor}}" stroke-width="1.6" points="{{data.watchlist.4.sparkPoints}}"/>
            </svg>
          </div>
          <div class="watch-foot">
            <span>Vol {{data.watchlist.4.volume}}</span>
            <a href="{{data.watchlist.4.exchUrl}}" target="_blank" rel="noopener">{{data.watchlist.4.exchName}} ↗</a>
          </div>
        </div>
        <div class="watch-card">
          <div class="watch-top">
            <div>
              <div class="watch-sym">{{data.watchlist.5.symbol}}</div>
              <div class="watch-co">{{data.watchlist.5.companyName}}</div>
            </div>
            <span class="watch-pct {{data.watchlist.5.dirClass}}">{{data.watchlist.5.pct}}</span>
          </div>
          <div class="watch-px">{{data.watchlist.5.price}}</div>
          <div class="watch-spark">
            <svg viewBox="0 0 200 40" preserveAspectRatio="none">
              <polyline fill="none" stroke="{{data.watchlist.5.sparkColor}}" stroke-width="1.6" points="{{data.watchlist.5.sparkPoints}}"/>
            </svg>
          </div>
          <div class="watch-foot">
            <span>Vol {{data.watchlist.5.volume}}</span>
            <a href="{{data.watchlist.5.exchUrl}}" target="_blank" rel="noopener">{{data.watchlist.5.exchName}} ↗</a>
          </div>
        </div>
        <div class="watch-card">
          <div class="watch-top">
            <div>
              <div class="watch-sym">{{data.watchlist.6.symbol}}</div>
              <div class="watch-co">{{data.watchlist.6.companyName}}</div>
            </div>
            <span class="watch-pct {{data.watchlist.6.dirClass}}">{{data.watchlist.6.pct}}</span>
          </div>
          <div class="watch-px">{{data.watchlist.6.price}}</div>
          <div class="watch-spark">
            <svg viewBox="0 0 200 40" preserveAspectRatio="none">
              <polyline fill="none" stroke="{{data.watchlist.6.sparkColor}}" stroke-width="1.6" points="{{data.watchlist.6.sparkPoints}}"/>
            </svg>
          </div>
          <div class="watch-foot">
            <span>Vol {{data.watchlist.6.volume}}</span>
            <a href="{{data.watchlist.6.exchUrl}}" target="_blank" rel="noopener">{{data.watchlist.6.exchName}} ↗</a>
          </div>
        </div>
        <div class="watch-card">
          <div class="watch-top">
            <div>
              <div class="watch-sym">{{data.watchlist.7.symbol}}</div>
              <div class="watch-co">{{data.watchlist.7.companyName}}</div>
            </div>
            <span class="watch-pct {{data.watchlist.7.dirClass}}">{{data.watchlist.7.pct}}</span>
          </div>
          <div class="watch-px">{{data.watchlist.7.price}}</div>
          <div class="watch-spark">
            <svg viewBox="0 0 200 40" preserveAspectRatio="none">
              <polyline fill="none" stroke="{{data.watchlist.7.sparkColor}}" stroke-width="1.6" points="{{data.watchlist.7.sparkPoints}}"/>
            </svg>
          </div>
          <div class="watch-foot">
            <span>Vol {{data.watchlist.7.volume}}</span>
            <a href="{{data.watchlist.7.exchUrl}}" target="_blank" rel="noopener">{{data.watchlist.7.exchName}} ↗</a>
          </div>
        </div>
      </div>
    </div>

    <div class="card" style="padding:0;">
      <div class="panel-head">
        <div class="panel-title">{{data.newsPanel.title}}</div>
        <div class="panel-sub">{{data.newsPanel.subtitle}}</div>
      </div>
      <div class="news-list">
        <div class="news-item">
          <div class="news-time">{{data.news.0.time}}</div>
          <div class="news-body">
            <div class="src">{{data.news.0.source}}</div>
            <div class="head">{{data.news.0.headline}}</div>
          </div>
          <span class="impact {{data.news.0.impactClass}}">{{data.news.0.impactLabel}}</span>
        </div>
        <div class="news-item">
          <div class="news-time">{{data.news.1.time}}</div>
          <div class="news-body">
            <div class="src">{{data.news.1.source}}</div>
            <div class="head">{{data.news.1.headline}}</div>
          </div>
          <span class="impact {{data.news.1.impactClass}}">{{data.news.1.impactLabel}}</span>
        </div>
        <div class="news-item">
          <div class="news-time">{{data.news.2.time}}</div>
          <div class="news-body">
            <div class="src">{{data.news.2.source}}</div>
            <div class="head">{{data.news.2.headline}}</div>
          </div>
          <span class="impact {{data.news.2.impactClass}}">{{data.news.2.impactLabel}}</span>
        </div>
        <div class="news-item">
          <div class="news-time">{{data.news.3.time}}</div>
          <div class="news-body">
            <div class="src">{{data.news.3.source}}</div>
            <div class="head">{{data.news.3.headline}}</div>
          </div>
          <span class="impact {{data.news.3.impactClass}}">{{data.news.3.impactLabel}}</span>
        </div>
        <div class="news-item">
          <div class="news-time">{{data.news.4.time}}</div>
          <div class="news-body">
            <div class="src">{{data.news.4.source}}</div>
            <div class="head">{{data.news.4.headline}}</div>
          </div>
          <span class="impact {{data.news.4.impactClass}}">{{data.news.4.impactLabel}}</span>
        </div>
        <div class="news-item">
          <div class="news-time">{{data.news.5.time}}</div>
          <div class="news-body">
            <div class="src">{{data.news.5.source}}</div>
            <div class="head">{{data.news.5.headline}}</div>
          </div>
          <span class="impact {{data.news.5.impactClass}}">{{data.news.5.impactLabel}}</span>
        </div>
      </div>
    </div>

  </section>

</main>

<footer class="app">
  <span class="live">{{data.footer.live}}</span>
  <span>{{data.footer.source}}</span>
  <span>{{data.footer.version}}</span>
  <span>Last sync {{data.summary.lastSync}}</span>
</footer>

</body>
</html>
