{% for r in records %}
<tr class="hover:bg-gray-50/50 transition-colors">
  <td class="pl-5 py-3.5">
    <div class="flex flex-col items-center">
      <div class="w-2.5 h-2.5 rounded-full {{ 'bg-emerald-400 ring-4 ring-emerald-50' if r.correct else 'bg-red-400 ring-4 ring-red-50' }}"></div>
    </div>
  </td>
  <td class="px-5 py-3.5">
    <div class="text-[12px] text-gray-900 font-mono">{{ r.timestamp[5:10] if r.timestamp|length > 10 else '' }}</div>
    <div class="text-[11px] text-gray-400 font-mono">{{ r.timestamp[11:19] if r.timestamp|length > 19 else r.timestamp }}</div>
  </td>
  <td class="px-5 py-3.5">
    <div class="flex items-center gap-2.5">
      <div class="w-7 h-7 rounded-md bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center flex-shrink-0">
        <span class="text-[10px] font-bold text-gray-500">{{ (r.team_name or '—')[:2] | upper }}</span>
      </div>
      <span class="text-[12px] text-gray-700 font-medium">{{ r.team_name or '—' }}</span>
    </div>
  </td>
  <td class="px-5 py-3.5">
    <div class="text-[12px] text-gray-900 font-medium">{{ r.challenge_name }}</div>
    <div class="text-[10px] text-gray-400 font-mono">{{ r.benchmark_id }}</div>
  </td>
  <td class="px-5 py-3.5">
    <span class="text-[11px] text-gray-500 font-mono">{{ r.flag_id or '—' }}</span>
  </td>
  <td class="px-5 py-3.5">
    <code class="px-2 py-0.5 {{ 'bg-gray-900 text-gray-300' if r.correct else 'bg-gray-100 text-gray-500' }} text-[11px] rounded font-mono">{{ r.flag_value }}</code>
  </td>
  <td class="px-5 py-3.5">
    {% if r.correct %}
    <span class="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium rounded-full bg-emerald-50 text-emerald-600 border border-emerald-100">
      <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
      正确
    </span>
    {% else %}
    <span class="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium rounded-full bg-red-50 text-red-600 border border-red-100">
      <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
      错误
    </span>
    {% endif %}
  </td>
  <td class="px-5 py-3.5 text-right">
    {% if r.correct %}
    <span class="text-[13px] font-semibold text-emerald-600">+{{ r.points }}</span>
    {% else %}
    <span class="text-[13px] text-gray-300">—</span>
    {% endif %}
  </td>
</tr>
{% endfor %}