<style>
  [data-git-diff-card] {
    font-family: var(--card-font, 'Iosevka', 'SF Mono', ui-monospace, Menlo, Consolas, monospace);
    background: #f7ecdf;
    color: #65483a;
    padding: 10px 12px;
  }

  [data-git-header] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  [data-git-header-left] {
    min-width: 0;
  }

  [data-git-subtitle] {
    font-size: 1.28rem;
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #c9694b;
    overflow-wrap: anywhere;
  }

  [data-git-branch] {
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #9a7b68;
    font-weight: 600;
  }

  [data-git-status] {
    font-size: 0.76rem;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 999px;
  }

  [data-git-metrics] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 12px 0 12px;
  }

  [data-git-metric] {
    min-width: 0;
    background: rgba(255, 255, 255, 0.34);
    border: 1px solid rgba(186, 143, 113, 0.10);
    border-radius: 12px;
    padding: 10px 12px 9px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
  }

  [data-git-metric-label] {
    font-size: 0.62rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a48a78;
    font-weight: 700;
  }

  [data-git-changed],
  [data-git-untracked] {
    margin-top: 5px;
    font-size: 1.8rem;
    line-height: 0.92;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #7d4f3f;
  }

  [data-git-staging],
  [data-git-upstream],
  [data-git-updated] {
    margin-top: 5px;
    font-size: 0.73rem;
    line-height: 1.35;
    color: #947662;
    font-weight: 600;
  }

  [data-git-diff-values] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 5px;
  }

  [data-git-plus] {
    font-size: 1.12rem;
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #6f8f5f;
  }

  [data-git-minus] {
    font-size: 1.12rem;
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #b46457;
  }

  [data-git-files] {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(177, 140, 112, 0.16);
  }

  [data-git-patch-row][data-selectable='true'] {
    cursor: pointer;
  }

  [data-git-patch-row][data-selected='true'] {
    box-shadow: inset 3px 0 0 rgba(101, 72, 58, 0.72);
  }
</style>
<div data-git-diff-card>
  <div data-git-header>
    <div data-git-header-left>
      <div data-git-subtitle>Loading…</div>
      <div data-git-branch>--</div>
    </div>
    <span data-git-status>Loading…</span>
  </div>

  <div data-git-metrics>
    <section data-git-metric>
      <div data-git-metric-label>Changed</div>
      <div data-git-changed>--</div>
      <div data-git-staging>--</div>
    </section>

    <section data-git-metric>
      <div data-git-metric-label>Untracked</div>
      <div data-git-untracked>--</div>
      <div data-git-upstream>--</div>
    </section>

    <section data-git-metric>
      <div data-git-metric-label>Diff</div>
      <div data-git-diff-values>
        <span data-git-plus>+--</span>
        <span data-git-minus>- --</span>
      </div>
      <div data-git-updated>--</div>
    </section>
  </div>

  <div data-git-files></div>
</div>
