/* ===============================
   Base layout
   =============================== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  max-width: 1000px;
  margin: 50px auto;
  padding: 0 20px;
  color: #333;
  line-height: 1.6;
}

/* ===============================
   Titles
   =============================== */
h1, h2 {
  text-align: center;
  color: #222;
  margin-bottom: 20px;
}

h1 { font-size: 2.4em; }
h2 { font-size: 1.8em; font-weight: 600; }

/* ===============================
   Sections
   =============================== */
.section {
  margin-bottom: 60px;
}

/* ===============================
   Video rows / columns
   =============================== */
.video-row {
  display: flex;
  justify-content: center;
  gap: 30px;        /* space between videos */
  flex-wrap: wrap;  /* wrap on smaller screens */
}

.video-col {
  display: flex;
  flex-direction: column;
  align-items: center; /* center video + annotation */
  text-align: center;
  max-width: 400px;
  flex: 1;
}

/* ===============================
   Video element
   =============================== */
video {
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
}

/* ===============================
   Annotation below each video
   =============================== */
.annotation {
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #f9f9f9;
  border-radius: 6px;
  font-size: 1.2em;   /* larger, clearer */
  font-weight: 500;
  color: #333;
  max-width: 90%;
}

.annotation span {
  white-space: nowrap; /* keep on one line; remove if you want wrapping */
}

.row-caption{
  text-align:center;
  font-weight:700;
  margin:12px 0 8px;
}

/* ===============================
   Image styling
   =============================== */
.image-container {
  text-align: center;
  margin: 20px 0;
}

.image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* ===============================
   Caption styling
   =============================== */
.caption {
  text-align: center;
  font-size: 1em;
  color: #555;
  max-width: 800px;
  margin: 10px auto 0;
  line-height: 1.4;
}

.framework-caption {
  text-align: left;       /* left align similar to abstract */
  font-size: 1em;
  color: #333;
  margin-top: 10px;
  line-height: 1.6;
}

/* ===== Group headers + badges for model result labels ===== */
.group-header {
  display: flex;
  justify-content: center;
  margin: 16px 0 10px;
}

.label-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.95rem;
  border: 1px solid transparent;
}

.label-badge.success {
  background: #e6f6ec;
  color: #166534;          /* deep green text */
  border-color: #86efac;   /* light green border */
}

.label-badge.failure {
  background: #fde8e8;
  color: #991b1b;          /* deep red text */
  border-color: #fecaca;   /* light red border */
}

/* (Optional) tighten spacing under a badge before videos */
.group-header + .video-row {
  margin-top: 8px;
}