<div data-weather-card="01545" 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: 560px;">
  <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom: 10px;">
    <div>
      <h2 style="margin:0; font-size:1.15rem; font-weight:700; color:var(--theme-card-neutral-text);">Weather 01545</h2>
      <div style="margin-top:4px; font-size:0.84rem; color:var(--theme-card-neutral-muted);">Source: Home Assistant (weather.openweathermap)</div>
    </div>
    <span data-weather-status style="font-size:0.82rem; color:var(--theme-status-muted);">Loading...</span>
  </div>

  <div style="display:flex; align-items:baseline; gap:10px; margin-bottom:10px;">
    <span data-weather-temp style="font-size:2.6rem; font-weight:800; line-height:1; letter-spacing:-0.03em;">--</span>
    <span data-weather-unit style="font-size:1rem; font-weight:600; color:var(--theme-card-neutral-subtle);">°F</span>
  </div>

  <div data-weather-condition style="font-size:1rem; font-weight:600; color:var(--theme-card-neutral-text); margin-bottom:8px; text-transform:capitalize;">--</div>

  <div style="display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; font-size:0.9rem; color:var(--theme-card-neutral-subtle);">
    <div>Humidity: <strong data-weather-humidity>--</strong></div>
    <div>Wind: <strong data-weather-wind>--</strong></div>
    <div>Pressure: <strong data-weather-pressure>--</strong></div>
    <div>Updated: <strong data-weather-updated>--</strong></div>
  </div>
</div>
