<!--
  info-card.html  —  generic two-column key/value glance card.
  Placeholders:
    {{title}}        bold header, e.g. "Connection"
    {{subtitle}}     small muted line under header, OPTIONAL ("" if none)
    {{left_label}}   e.g. "Latency"
    {{left_value}}   e.g. "42 ms"
    {{right_label}}  e.g. "Loss"
    {{right_value}}  e.g. "0%"
-->
<div style="padding:12px 16px;display:flex;flex-direction:column;gap:8px;height:100%;box-sizing:border-box">
  <div>
    <div style="font-size:13px;font-weight:700">{{title}}</div>
    <div style="font-size:10px;opacity:0.5;margin-top:1px">{{subtitle}}</div>
  </div>
  <div style="height:1px;background:rgba(255,255,255,0.08)"></div>
  <div style="display:flex;gap:10px">
    <div style="flex:1;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.05)">
      <div style="font-size:9px;opacity:0.5;text-transform:uppercase;letter-spacing:.5px">{{left_label}}</div>
      <div style="font-size:14px;font-weight:700;margin-top:2px">{{left_value}}</div>
    </div>
    <div style="flex:1;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.05)">
      <div style="font-size:9px;opacity:0.5;text-transform:uppercase;letter-spacing:.5px">{{right_label}}</div>
      <div style="font-size:14px;font-weight:700;margin-top:2px">{{right_value}}</div>
    </div>
  </div>
</div>
