<div data-co2-card="bedroom" style="font-family: var(--card-font, 'Iosevka', 'SF Mono', ui-monospace, Menlo, Consolas, monospace); background: var(--theme-card-neutral-bg); color: var(--theme-card-neutral-text); border: 1px solid var(--theme-card-neutral-border); border-radius: 16px; box-shadow: var(--theme-shadow); padding: 24px; max-width: 520px;">
  <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px;">
    <h2 style="margin:0; font-size:1.15rem; font-weight:700; color:var(--theme-card-neutral-text);">Bedroom CO2</h2>
    <span data-co2-status style="font-size:0.82rem; color:var(--theme-status-muted);">Loading...</span>
  </div>

  <div style="display:flex; align-items:baseline; gap:8px;">
    <span data-co2-value style="font-size:2.6rem; font-weight:800; line-height:1; letter-spacing:-0.03em;">--</span>
    <span style="font-size:1rem; font-weight:600; color:var(--theme-card-neutral-subtle);">ppm</span>
  </div>

  <div style="margin-top:12px; font-size:0.84rem; color:var(--theme-card-neutral-muted);">
    Updated: <span data-co2-updated>--</span>
  </div>
</div>
