{{define "styleguide"}}

<div class="sg-container">

  <h1 style="font-size: 2.5rem; font-weight: 700;">Style Guide</h1>
  <p class="intro" style="font-size: 1.15rem; font-weight: 300; line-height: 1.8;">Design system components for inou</p>

  <!-- Text Blocks -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator imaging"></div>
      <div class="data-card-title">
        <h3 class="section-heading">Text Blocks</h3>
      </div>
    </div>
    <div class="sg-card-content">
      <h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 16px;">Your data. Your rules.</h1>
      <p style="font-size: 1.15rem; font-weight: 300; line-height: 1.8; color: var(--text-muted); margin-bottom: 32px;">
        We built <strong style="font-weight: 700; color: var(--accent);">inou</strong> because health data is personal. Not personal like "preferences" — personal like your body, your history, your family. So we made privacy the foundation, not an afterthought.
      </p>
      <h2 style="font-size: 1.4rem; font-weight: 600; margin-bottom: 16px;">What we collect</h2>
      <h3 style="font-size: 1.1rem; font-weight: 600; margin-bottom: 8px;">Account information.</h3>
      <p style="font-size: 1rem; font-weight: 300; line-height: 1.8; color: var(--text-muted);">
        Name, email address, date of birth, and sex. Date of birth and sex help provide accurate medical context — an MRI interpretation differs significantly between a 6-year-old and a 16-year-old.
      </p>
    </div>
  </div>

  <!-- Typography Scale -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator labs"></div>
      <div class="data-card-title">
        <h3 class="section-heading">Typography Scale</h3>
      </div>
    </div>
    <div class="data-table">
      <div class="data-row"><div class="data-row-main" style="padding-left: 16px;"><span style="font-size: 2.5rem; font-weight: 700;">Page Title</span></div><div class="data-values"><span class="data-value mono">2.5rem / 700</span></div></div>
      <div class="data-row"><div class="data-row-main" style="padding-left: 16px;"><span style="font-size: 1.4rem; font-weight: 600;">Section Title</span></div><div class="data-values"><span class="data-value mono">1.4rem / 600</span></div></div>
      <div class="data-row"><div class="data-row-main" style="padding-left: 16px;"><span style="font-size: 1.1rem; font-weight: 600;">Subsection Title</span></div><div class="data-values"><span class="data-value mono">1.1rem / 600</span></div></div>
      <div class="data-row"><div class="data-row-main" style="padding-left: 16px;"><span class="section-heading">LABEL / CATEGORY</span></div><div class="data-values"><span class="data-value mono">0.75rem / 600 / caps</span></div></div>
      <div class="data-row"><div class="data-row-main" style="padding-left: 16px;"><span style="font-size: 1.15rem; font-weight: 300; color: var(--text-muted);">Intro text — larger, lighter</span></div><div class="data-values"><span class="data-value mono">1.15rem / 300</span></div></div>
      <div class="data-row"><div class="data-row-main" style="padding-left: 16px;"><span style="font-size: 1rem; font-weight: 300; color: var(--text-muted);">Body light — long-form</span></div><div class="data-values"><span class="data-value mono">1rem / 300</span></div></div>
      <div class="data-row"><div class="data-row-main" style="padding-left: 16px;"><span style="font-size: 1rem; font-weight: 400;">Body regular — UI labels</span></div><div class="data-values"><span class="data-value mono">1rem / 400</span></div></div>
      <div class="data-row"><div class="data-row-main" style="padding-left: 16px;"><span class="data-value mono">Mono: 1,234,567.89</span></div><div class="data-values"><span class="data-value mono">SF Mono</span></div></div>
    </div>
  </div>

  <!-- Colors -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator uploads"></div>
      <div class="data-card-title">
        <h3 class="section-heading">Colors</h3>
      </div>
    </div>
    <div class="data-table">
      <div class="data-row"><div class="data-row-main" style="padding-left: 16px; gap: 16px;"><div style="width: 32px; height: 32px; border-radius: 6px; background: var(--accent);"></div><span class="data-label">Accent</span></div><div class="data-values"><span class="data-value mono">#B45309</span></div></div>
      <div class="data-row"><div class="data-row-main" style="padding-left: 16px; gap: 16px;"><div style="width: 32px; height: 32px; border-radius: 6px; background: var(--text);"></div><span class="data-label">Text</span></div><div class="data-values"><span class="data-value mono">#1C1917</span></div></div>
      <div class="data-row"><div class="data-row-main" style="padding-left: 16px; gap: 16px;"><div style="width: 32px; height: 32px; border-radius: 6px; background: var(--text-muted);"></div><span class="data-label">Text Muted</span></div><div class="data-values"><span class="data-value mono">#78716C</span></div></div>
      <div class="data-row"><div class="data-row-main" style="padding-left: 16px; gap: 16px;"><div style="width: 32px; height: 32px; border-radius: 6px; background: var(--bg); border: 1px solid var(--border);"></div><span class="data-label">Background</span></div><div class="data-values"><span class="data-value mono">#F8F7F6</span></div></div>
      <div class="data-row"><div class="data-row-main" style="padding-left: 16px; gap: 16px;"><div style="width: 32px; height: 32px; border-radius: 6px; background: var(--success);"></div><span class="data-label">Success</span></div><div class="data-values"><span class="data-value mono">#059669</span></div></div>
      <div class="data-row"><div class="data-row-main" style="padding-left: 16px; gap: 16px;"><div style="width: 32px; height: 32px; border-radius: 6px; background: var(--danger);"></div><span class="data-label">Danger</span></div><div class="data-values"><span class="data-value mono">#DC2626</span></div></div>
    </div>
  </div>

  <!-- Buttons -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator vitals"></div>
      <div class="data-card-title">
        <h3 class="section-heading">Buttons</h3>
      </div>
    </div>
    <div style="padding: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;">
      <button class="btn btn-primary">Primary</button>
      <button class="btn btn-secondary">Secondary</button>
      <button class="btn btn-danger">Danger</button>
      <button class="btn btn-primary btn-small">Small</button>
      <button class="btn btn-icon">✕</button>
    </div>
  </div>

  <!-- Badges -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator medications"></div>
      <div class="data-card-title">
        <h3 class="section-heading">Badges</h3>
      </div>
    </div>
    <div style="padding: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;">
      <span class="badge">default</span>
      <span class="badge badge-care">care</span>
      <span class="badge-soon">COMING SOON</span>
      <span class="status-badge">processing</span>
    </div>
  </div>

  <!-- Messages -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator records"></div>
      <div class="data-card-title">
        <h3 class="section-heading">Messages</h3>
      </div>
    </div>
    <div style="padding: 24px; display: flex; flex-direction: column; gap: 12px;">
      <div class="error" style="margin: 0;">Error message — something went wrong.</div>
      <div class="info" style="margin: 0;">Info message — here's some useful information.</div>
      <div class="success" style="margin: 0;">Success message — operation completed.</div>
    </div>
  </div>

  <!-- Form Elements -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator journal"></div>
      <div class="data-card-title">
        <h3 class="section-heading">Form Elements</h3>
      </div>
    </div>
    <div class="sg-card-content-sm">
      <div class="form-group"><label>Text Input</label><input type="text" placeholder="Enter text..."></div>
      <div class="form-group"><label>Select</label><select class="sg-select"><option>Option 1</option><option>Option 2</option><option>Option 3</option></select></div>
      <div class="form-group"><label>Code Input</label><input type="text" class="code-input" placeholder="123456" maxlength="6"></div>
      <div class="form-group"><div class="radio-group"><label><input type="radio" name="demo-radio" checked> Male</label><label><input type="radio" name="demo-radio"> Female</label></div></div>
      <div class="form-group"><div class="checkbox-group"><label><input type="checkbox" checked> Can add data (supplements, notes, etc.)</label></div></div>
    </div>
  </div>

  <!-- Settings -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator privacy"></div>
      <div class="data-card-title">
        <h3 class="section-heading">SETTINGS</h3>
        <span class="data-card-summary">Preferences</span>
      </div>
    </div>
    <div>
      <div class="sg-settings-row">
        <div>
          <div class="sg-settings-label">Primary AI Assistant</div>
          <div class="sg-settings-desc">Used for "Ask AI" trackers and analysis</div>
        </div>
        <div class="sg-settings-control">
          <label class="sg-llm-option selected"><input type="radio" name="llm" checked><span class="sg-llm-icon">🤖</span><span>Claude (Anthropic)</span></label>
          <label class="sg-llm-option"><input type="radio" name="llm"><span class="sg-llm-icon">💬</span><span>ChatGPT (OpenAI)</span></label>
          <label class="sg-llm-option"><input type="radio" name="llm"><span class="sg-llm-icon">✖</span><span>Grok (xAI)</span></label>
        </div>
      </div>
      <div class="sg-settings-row">
        <div>
          <div class="sg-settings-label">Units</div>
          <div class="sg-settings-desc">Measurement system for vitals</div>
        </div>
        <div class="sg-settings-control">
          <select class="sg-select" style="max-width: 200px;"><option>Metric (kg, °C)</option><option>Imperial (lb, °F)</option></select>
        </div>
      </div>
    </div>
  </div>

  <!-- Profile Cards -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator imaging"></div>
      <div class="data-card-title">
        <h3 class="section-heading">Profile Cards</h3>
      </div>
    </div>
    <div style="padding: 24px;">
      <div class="profiles-grid" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));">
        <div class="card sg-profile-card">
          <h3>Johan Jongsma</h3>
          <p class="card-meta">you</p>
          <p class="sg-profile-dob">Born: 1985-03-15 · Male</p>
          <div class="sg-profile-stats"><span class="sg-profile-stat">📷 3 studies</span><span class="sg-profile-stat">🧪 12 labs</span><span class="sg-profile-stat">🧬 genome</span></div>
          <button class="btn btn-primary btn-small" style="margin-top: auto; align-self: flex-start;">View</button>
        </div>
        <div class="card sg-profile-card">
          <h3>Sophia</h3>
          <p class="card-meta">my role: Parent · <span class="badge badge-care">care</span></p>
          <p class="sg-profile-dob">Born: 2017-01-01 · Female</p>
          <div class="sg-profile-stats"><span class="sg-profile-stat">📷 16 studies</span><span class="sg-profile-stat">🧪 0 labs</span></div>
          <button class="btn btn-primary btn-small" style="margin-top: auto; align-self: flex-start;">View</button>
        </div>
        <a href="#" class="card card-add" style="min-height: 140px;"><span class="plus">+</span><span>Add dossier</span></a>
      </div>
    </div>
  </div>

  <!-- Imaging -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator imaging"></div>
      <div class="data-card-title">
        <h3 class="section-heading">IMAGING</h3>
        <span class="data-card-summary">16 studies · 4113 slices</span>
      </div>
      <a href="#" class="btn btn-secondary btn-small">Open viewer</a>
    </div>
    <div class="data-table">
      <div class="data-row expandable" onclick="this.classList.toggle('expanded'); this.nextElementSibling.classList.toggle('show');">
        <div class="data-row-main"><span class="expand-icon">+</span><span class="data-label">MRI BRAIN W/WO CONTRAST</span></div>
        <div class="data-values"><span class="data-meta">13 series</span><span class="data-date">5/5/2022</span></div>
      </div>
      <div class="data-row-children">
        <div class="data-row child"><span class="data-label">AX T1</span><div class="data-values"><span class="data-date">24 slices</span><a href="#" class="sg-row-link">→</a></div></div>
        <div class="data-row child"><span class="data-label">AX T2 FLAIR</span><div class="data-values"><span class="data-date">24 slices</span><a href="#" class="sg-row-link">→</a></div></div>
        <div class="data-row child"><span class="data-label">SAG T1</span><div class="data-values"><span class="data-date">20 slices</span><a href="#" class="sg-row-link">→</a></div></div>
      </div>
      <div class="data-row single"><div class="data-row-main"><span class="data-label">XR CHEST AP ONLY</span></div><div class="data-values"><span class="data-date">5/6/2022</span><a href="#" class="sg-row-link">→</a></div></div>
    </div>
  </div>

  <!-- Labs -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator labs"></div>
      <div class="data-card-title">
        <h3 class="section-heading">LABS</h3>
        <span class="data-card-summary">4 panels · 23 results</span>
      </div>
    </div>
    <div class="data-table">
      <div class="data-row expandable" onclick="this.classList.toggle('expanded'); this.nextElementSibling.classList.toggle('show');">
        <div class="data-row-main"><span class="expand-icon">+</span><span class="data-label">Complete Blood Count (CBC)</span></div>
        <div class="data-values"><span class="data-meta">8 tests</span><span class="data-date">12/15/2024</span></div>
      </div>
      <div class="data-row-children">
        <div class="data-row child"><span class="data-label">Hemoglobin</span><div class="data-values"><span class="data-value mono">14.2 g/dL</span><span class="data-meta" style="min-width: 70px; text-align: right;">12.0–16.0</span></div></div>
        <div class="data-row child"><span class="data-label">White Blood Cells</span><div class="data-values"><span class="data-value mono">7.8 K/µL</span><span class="data-meta" style="min-width: 70px; text-align: right;">4.5–11.0</span></div></div>
        <div class="data-row child"><span class="data-label">Platelets</span><div class="data-values"><span class="data-value mono" style="color: var(--danger);">142 K/µL</span><span class="data-meta" style="min-width: 70px; text-align: right;">150–400</span></div></div>
      </div>
    </div>
  </div>

  <!-- Genetics -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator" style="background: #8B5CF6;"></div>
      <div class="data-card-title">
        <h3 class="section-heading">GENETICS</h3>
        <span class="data-card-summary">23andMe · 847 variants analyzed</span>
      </div>
    </div>
    <div class="data-table">
      <div class="data-row expandable" onclick="this.classList.toggle('expanded'); this.nextElementSibling.classList.toggle('show');">
        <div class="data-row-main"><span class="expand-icon">+</span><span class="data-label">Medication Response</span></div>
        <div class="data-values"><span class="data-meta">47 variants</span></div>
      </div>
      <div class="data-row-children">
        <div class="data-row child" style="flex-direction: column; align-items: flex-start; gap: 8px;">
          <div class="sg-gene-row" style="width: 100%;">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; width: 100%;">
              <div class="sg-gene-main"><span class="sg-gene-name">CYP2C19</span><span class="sg-gene-rsid">rs4244285</span></div>
              <div style="display: flex; align-items: center; gap: 8px;"><span class="sg-gene-allele">G;A</span><span class="badge" style="font-size: 0.7rem;">intermediate</span></div>
            </div>
            <div class="sg-gene-summary">Intermediate metabolizer for clopidogrel (Plavix). May need dose adjustment or alternative medication.</div>
            <div class="sg-gene-actions"><button class="sg-ask-ai" onclick="document.getElementById('gene-modal-1').classList.add('show')">Ask AI</button></div>
          </div>
        </div>
        <div class="sg-show-more">Show all 47 variants in Medication Response →</div>
      </div>
      <div class="data-row expandable"><div class="data-row-main"><span class="expand-icon">+</span><span class="data-label">Metabolism</span></div><div class="data-values"><span class="data-meta">23 variants</span></div></div>
      <div class="data-row expandable"><div class="data-row-main"><span class="expand-icon">+</span><span class="data-label">Cardiovascular</span></div><div class="data-values"><span class="data-meta">18 variants</span></div></div>
    </div>
  </div>

  <!-- Vitals -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator vitals"></div>
      <div class="data-card-title">
        <h3 class="section-heading">VITALS</h3>
        <span class="data-card-summary">Self-reported measurements</span>
      </div>
      <a href="#" class="btn btn-secondary btn-small">+ Add</a>
    </div>
    <div class="data-table">
      <div class="data-row expandable" onclick="this.classList.toggle('expanded'); this.nextElementSibling.classList.toggle('show');">
        <div class="data-row-main"><span class="expand-icon">+</span><div class="sg-note-icon temp">🌡</div><span class="data-label">Temperature</span></div>
        <div class="data-values"><span class="data-value mono">37.2 °C</span><span class="data-meta">today</span></div>
      </div>
      <div class="data-row-children">
        <div class="sg-vital-history">
          <div class="sg-vital-graph">
            <div class="sg-vital-bar" style="height: 35px; background: #DC2626;"></div>
            <div class="sg-vital-bar" style="height: 30px; background: #DC2626;"></div>
            <div class="sg-vital-bar" style="height: 38px; background: #DC2626;"></div>
            <div class="sg-vital-bar" style="height: 32px; background: #DC2626;"></div>
            <div class="sg-vital-bar" style="height: 40px; background: #DC2626;"></div>
          </div>
          <div class="sg-vital-entry"><span class="sg-vital-date">Today, 8:30 AM</span><span class="sg-vital-val">37.2 °C</span></div>
          <div class="sg-vital-entry"><span class="sg-vital-date">Yesterday, 8:15 AM</span><span class="sg-vital-val">36.8 °C</span></div>
          <div class="sg-vital-entry"><span class="sg-vital-date">Dec 24, 7:45 AM</span><span class="sg-vital-val">37.0 °C</span></div>
        </div>
      </div>
      <div class="data-row expandable"><div class="data-row-main"><span class="expand-icon">+</span><div class="sg-note-icon weight">⚖</div><span class="data-label">Weight</span></div><div class="data-values"><span class="data-value mono">72.4 kg</span><span class="data-meta">today</span></div></div>
      <div class="data-row expandable"><div class="data-row-main"><span class="expand-icon">+</span><div class="sg-note-icon bp">❤</div><span class="data-label">Blood Pressure</span></div><div class="data-values"><span class="data-value mono">118/76</span><span class="data-meta">yesterday</span></div></div>
    </div>
  </div>

  <!-- Notes -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator" style="background: #F59E0B;"></div>
      <div class="data-card-title">
        <h3 class="section-heading">NOTES</h3>
        <span class="data-card-summary">Photos, observations, symptoms</span>
      </div>
      <a href="#" class="btn btn-secondary btn-small">+ Add</a>
    </div>
    <div class="data-table">
      <div class="data-row expandable expanded" onclick="this.classList.toggle('expanded'); this.nextElementSibling.classList.toggle('show');">
        <div class="data-row-main"><span class="expand-icon">+</span><div class="sg-note-icon photo">📷</div><span class="data-label">Knee injury<span class="sg-note-category">injury</span></span></div>
        <div class="data-values"><span class="data-meta">3 photos</span><span class="data-date">Dec 20</span></div>
      </div>
      <div class="data-row-children show">
        <div class="sg-note-detail">
          <div class="sg-note-photos">
            <div class="sg-note-photo-item">
              <div class="sg-note-photo-img">🦵</div>
              <div class="sg-note-photo-label">Dec 20, 3:45 PM</div>
            </div>
            <div class="sg-note-photo-item">
              <div class="sg-note-photo-img">🦵</div>
              <div class="sg-note-photo-label">Dec 22, 10:20 AM</div>
            </div>
            <div class="sg-note-photo-item">
              <div class="sg-note-photo-img">🦵</div>
              <div class="sg-note-photo-label">Dec 26, 9:15 AM</div>
            </div>
            <div class="sg-note-photo-item">
              <div class="sg-note-photo-img" style="border: 2px dashed var(--border); background: transparent; color: var(--accent);">+</div>
              <div class="sg-note-photo-label">Add photo</div>
            </div>
          </div>
          <div class="sg-note-timeline">
            <div class="sg-note-timeline-entry">
              <span class="sg-note-timeline-date">Dec 20, 3:45 PM</span>
              <span class="sg-note-timeline-text">Jim fell on his knee at soccer practice. Swelling visible, applied ice.</span>
            </div>
            <div class="sg-note-timeline-entry">
              <span class="sg-note-timeline-date">Dec 22, 10:20 AM</span>
              <span class="sg-note-timeline-text">Swelling reduced. Still some bruising. Can walk without pain.</span>
            </div>
            <div class="sg-note-timeline-entry">
              <span class="sg-note-timeline-date">Dec 26, 9:15 AM</span>
              <span class="sg-note-timeline-text">Almost fully healed. Light bruise remaining.</span>
            </div>
          </div>
          <div style="margin-top: 16px;">
            <button class="btn btn-secondary btn-small">+ Add follow-up</button>
            <button class="sg-ask-ai" style="margin-left: 8px;">Ask AI</button>
          </div>
        </div>
      </div>
      <div class="data-row expandable"><div class="data-row-main"><span class="expand-icon">+</span><div class="sg-note-icon note">📝</div><span class="data-label">Mild headache after workout</span></div><div class="data-values"><span class="data-date">Dec 25</span></div></div>
    </div>
  </div>

  <!-- Supplements (updated with amount + active) -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator" style="background: #14B8A6;"></div>
      <div class="data-card-title">
        <h3 class="section-heading">SUPPLEMENTS</h3>
        <span class="data-card-summary">Daily stack</span>
      </div>
      <a href="#" class="btn btn-secondary btn-small">+ Add</a>
    </div>
    <div class="data-table">
      <div class="data-row">
        <div class="data-row-main" style="padding-left: 16px;">
          <span class="data-label">Vitamin D3</span>
          <span class="sg-supp-amount">1 capsule</span>
          <span class="sg-supp-dose">· 5000 IU</span>
        </div>
        <div class="data-values"><span class="sg-supp-timing">morning, with food</span></div>
      </div>
      <div class="data-row">
        <div class="data-row-main" style="padding-left: 16px;">
          <span class="data-label">Omega-3 Fish Oil</span>
          <span class="sg-supp-amount">2 capsules</span>
          <span class="sg-supp-dose">· 2000 mg EPA/DHA</span>
        </div>
        <div class="data-values"><span class="sg-supp-timing">morning, with food</span></div>
      </div>
      <div class="data-row">
        <div class="data-row-main" style="padding-left: 16px;">
          <span class="data-label">Magnesium Glycinate</span>
          <span class="sg-supp-amount">2 capsules</span>
          <span class="sg-supp-dose">· 400 mg</span>
        </div>
        <div class="data-values"><span class="sg-supp-timing">evening</span></div>
      </div>
      <div class="data-row">
        <div class="data-row-main" style="padding-left: 16px;">
          <span class="data-label">Liquid B12</span>
          <span class="sg-supp-amount">5 ml</span>
          <span class="sg-supp-dose">· 1000 mcg</span>
        </div>
        <div class="data-values"><span class="sg-supp-timing">morning</span></div>
      </div>
    </div>
  </div>

  <!-- Peptides (updated with dates) -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator" style="background: #F59E0B;"></div>
      <div class="data-card-title">
        <h3 class="section-heading">PEPTIDES</h3>
        <span class="data-card-summary">Current & past protocols</span>
      </div>
      <a href="#" class="btn btn-secondary btn-small">+ Add</a>
    </div>
    <div class="data-table">
      <div class="data-row">
        <div class="data-row-main" style="padding-left: 16px; flex-direction: column; align-items: flex-start; gap: 2px;">
          <div><span class="data-label">BPC-157</span><span class="sg-supp-dose" style="margin-left: 8px;">250 mcg subQ · 2x daily</span></div>
          <span class="sg-peptide-dates">until Jan 23, 2025</span>
        </div>
        <div class="data-values"><span class="badge badge-care" style="font-size: 0.7rem;">active</span></div>
      </div>
      <div class="data-row">
        <div class="data-row-main" style="padding-left: 16px; flex-direction: column; align-items: flex-start; gap: 2px;">
          <div><span class="data-label">TB-500</span><span class="sg-supp-dose" style="margin-left: 8px;">2.5 mg subQ · 2x weekly</span></div>
          <span class="sg-peptide-dates">until Feb 5, 2025</span>
        </div>
        <div class="data-values"><span class="badge badge-care" style="font-size: 0.7rem;">active</span></div>
      </div>
      <div class="data-row" style="opacity: 0.7;">
        <div class="data-row-main" style="padding-left: 16px; flex-direction: column; align-items: flex-start; gap: 2px;">
          <div><span class="data-label">BPC-157</span><span class="sg-supp-dose" style="margin-left: 8px;">250 mcg subQ · 2x daily</span></div>
          <span class="sg-peptide-dates">Aug 15 – Sep 7, 2025</span>
        </div>
        <div class="data-values"><span class="badge" style="font-size: 0.7rem;">completed</span></div>
      </div>
    </div>
  </div>

  <!-- Upload Area -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator uploads"></div>
      <div class="data-card-title">
        <h3 class="section-heading">Upload Area</h3>
      </div>
    </div>
    <div style="padding: 24px;">
      <div class="upload-area">
        <div class="upload-icon"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg></div>
        <p class="upload-text">Click or drag files here</p>
        <p class="upload-hint">DICOM, PDF, CSV, VCF, and more</p>
      </div>
    </div>
  </div>

  <!-- Empty State -->
  <div class="data-card">
    <div class="data-card-header sg-section-header">
      <div class="data-card-indicator privacy"></div>
      <div class="data-card-title">
        <h3 class="section-heading">Empty State</h3>
      </div>
    </div>
    <div style="padding: 24px;">
      <div class="empty-state">No lab data</div>
    </div>
  </div>

  {{template "footer"}}

</div>

<!-- Gene Modal -->
<div class="sg-modal-overlay" id="gene-modal-1" onclick="if(event.target===this)this.classList.remove('show')">
  <div class="sg-modal">
    <h3>Ask AI about CYP2C19</h3>
    <div class="sg-modal-tracker">I have a genetic variant in CYP2C19 (rs4244285) with genotype G;A.

This makes me an intermediate metabolizer.

What medications are affected by this? What should I discuss with my doctor?</div>
    <div class="sg-modal-actions">
      <button class="btn btn-secondary btn-small" onclick="this.closest('.sg-modal-overlay').classList.remove('show')">Close</button>
      <button class="btn btn-primary btn-small" onclick="navigator.clipboard.writeText(this.closest('.sg-modal').querySelector('.sg-modal-tracker').innerText); this.innerText='Copied!'; setTimeout(()=>this.innerText='Copy tracker', 1500)">Copy tracker</button>
    </div>
  </div>
</div>

{{end}}