<div data-calendar-card="today" 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: 640px;">
  <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom: 12px;">
    <div>
      <h2 style="margin:0; font-size:1.15rem; font-weight:700; color:var(--theme-card-neutral-text);">Today's Calendar</h2>
      <div data-cal-subtitle style="margin-top:4px; font-size:0.84rem; color:var(--theme-card-neutral-muted);">Loading calendars...</div>
    </div>
    <span data-cal-status style="font-size:0.82rem; color:var(--theme-status-muted);">Loading...</span>
  </div>

  <div style="font-size:0.88rem; color:var(--theme-card-neutral-muted); margin-bottom:10px;">
    Date: <strong data-cal-date style="color:var(--theme-card-neutral-subtle);">--</strong>
  </div>

  <div data-cal-empty style="display:none; padding:12px; border-radius:10px; background:color-mix(in srgb, var(--theme-card-neutral-border) 40%, white); color:var(--theme-card-neutral-subtle); font-size:0.94rem;">
    No events for today.
  </div>

  <ul data-cal-list style="list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;"></ul>

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