<!DOCTYPE html>
<html lang="en" data-unit-system="{{ display_unit_system | default('metric') }}">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }} — MeshCore Stats</title>
  <meta name="description" content="{{ meta_description }}">

  <!-- Open Graph -->
  <meta property="og:title" content="{{ title }} — MeshCore Stats">
  <meta property="og:description" content="{{ meta_description }}">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="MeshCore Stats">
  {% if og_image %}<meta property="og:image" content="{{ og_image }}">{% endif %}

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="{{ title }} — MeshCore Stats">
  <meta name="twitter:description" content="{{ meta_description }}">

  <link rel="stylesheet" href="{{ css_path }}styles.css">
  {% if custom_head_html %}{{ custom_head_html | safe }}{% endif %}
</head>
<body>
  {% block body %}{% endblock %}

  <!-- Chart tooltip enhancement (progressive) -->
  <script src="{{ css_path }}chart-tooltip.js" defer></script>
</body>
</html>
