:root {
  --green-light: #e3f7e8;
  --green: #6fcf8e;
  --green-dark: #2f9e57;
  --red-light: #fbe6e6;
  --red: #ef8b8b;
  --red-dark: #c94f4f;
  --neutral-light: #fdf3e3;
  --neutral: #e9c46a;
  --blue-light: #dbe9fb;
  --blue: #6fa8e8;
  --blue-dark: #2b5fa8;
  --page-bg: #f7f7f8;
  --header-h: 76px;
  --footer-h: 80px;
}

#page1-section,
#page2-section,
#done-section {
  display: none;
}

html[data-page="page1"] #page1-section,
html[data-page="page2"] #page2-section {
  display: block;
}

html[data-page="done"] #done-section {
  display: flex;
}

#done-section {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--green-dark);
  text-align: center;
  padding: 0 20px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--page-bg);
  color: #2b2b2b;
  padding-bottom: 110px;
}

html[data-nav="single"] body {
  padding-bottom: 0;
}

/* In single-image mode the row isn't a reading list anymore, so don't cap
   it at the scroll-mode reading width — let it use the full window so the
   image gets as much room as possible (it was getting cropped on wider
   option sets even when the window was resized, because of this cap). */
html[data-nav="single"] .row {
  max-width: none;
}

/* The header pill doesn't need the extra width, and a full-bleed pill
   collides with the progress counter / help button in the corners. */
html[data-nav="single"] .header-row {
  max-width: calc(100% - 220px);
}

.header-row,
.row {
  display: grid;
  grid-template-columns: 1fr 140px 140px 140px;
  gap: 14px;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 16px;
}

.header-row {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--page-bg);
  padding-top: 14px;
  padding-bottom: 14px;
}

.header-pill {
  border-radius: 999px;
  padding: 12px 16px;
  text-align: center;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-image {
  background: var(--blue-light);
  color: var(--blue-dark);
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--blue), 0 2px 6px rgba(43, 95, 168, 0.3);
}

.group-divider {
  max-width: 900px;
  margin: 24px auto 12px;
  padding: 14px 20px;
  border-radius: 16px;
  background: var(--blue-light);
  color: var(--blue-dark);
  font-weight: 700;
  text-align: center;
  box-shadow: 0 0 0 2px var(--blue), 0 2px 6px rgba(43, 95, 168, 0.25);
}

.header-sim {
  background: var(--green-light);
  color: var(--green-dark);
}

.header-nao {
  background: var(--red-light);
  color: var(--red-dark);
}

.header-incerto {
  background: var(--neutral-light);
  color: #8a6d1d;
}

.row {
  border-bottom: 1px solid #e6e6e6;
}

.cell-image {
  display: flex;
  justify-content: center;
}

.cell-image img {
  height: var(--image-height, 250px);
  width: auto;
  max-width: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.cell-image img:hover {
  transform: scale(1.02);
}

.missing-image {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.85rem;
  color: #888;
  border: 1px dashed #ccc;
  border-radius: 8px;
  padding: 8px;
}

.cell-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.choice-label {
  display: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: #555;
}

html[data-nav="single"] .choice-label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.choice-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}

.choice-sim {
  border-color: var(--green);
}

.choice-nao {
  border-color: var(--red);
}

.choice-incerto {
  border-color: var(--neutral);
}

.choice-btn:hover {
  transform: scale(1.05);
}

.choice-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.choice-btn[aria-pressed="true"]::after {
  content: "✓";
  font-size: 28px;
  color: #fff;
  font-weight: bold;
}

.choice-sim[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green-dark);
}

.choice-nao[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red-dark);
}

.choice-incerto[aria-pressed="true"] {
  background: var(--neutral);
  border-color: #c79a2c;
}

.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--page-bg);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  z-index: 30;
}

.status-message {
  font-size: 0.9rem;
  color: #2f9e57;
  margin-right: 8px;
}

.action-btn {
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.1s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
}

.action-enviar {
  background: var(--green-light);
  color: var(--green-dark);
}

.action-reiniciar {
  background: var(--red-light);
  color: var(--red-dark);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 40;
}

.modal-overlay.visible {
  display: flex;
}

.modal {
  background: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.modal p {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.05rem;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.image-modal-img {
  max-width: var(--modal-max-w, 75vw);
  max-height: var(--modal-max-h, 75vh);
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

.header-row-page2,
.row-page2 {
  grid-template-columns: 1fr repeat(var(--page2-cols, 4), 120px);
}

.header-class {
  background: var(--blue-light);
  color: var(--blue-dark);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 0.85rem;
  line-height: 1.15;
  border-radius: 18px;
  min-height: 56px;
}

/* Static (scroll-mode) page2 header pills: center their (possibly
   2-line) text so every pill looks the same height regardless of how
   many words its class name has. Per-row single-image-mode labels get
   their own centering via the html[data-nav="single"] .choice-label rule. */
.header-row .header-class {
  display: flex;
  align-items: center;
  justify-content: center;
}

.choice-class {
  border-color: var(--blue);
}

/* In scroll mode the choice cells stay direct grid children of .row (so
   they line up with the existing column tracks) — this wrapper "disappears"
   from the box tree. In single-image mode it becomes a real flex container
   that centers the whole group of checkboxes as a unit (see below). */
.choices-wrap {
  display: contents;
}

.choice-class[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue-dark);
}

.action-voltar {
  background: var(--blue-light);
  color: var(--blue-dark);
}

.action-nav-toggle {
  background: var(--blue-light);
  color: var(--blue-dark);
  font-size: 0.85rem;
  padding: 10px 18px;
}

.action-nav-prev,
.action-nav-next {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--neutral-light);
  color: #8a6d1d;
}

.action-nav-prev:hover,
.action-nav-next:hover {
  transform: translate(0, calc(-50% - 1px));
}

.action-nav-prev {
  left: 20px;
}

.action-nav-next {
  right: 20px;
}

html[data-nav="single"] .action-nav-prev,
html[data-nav="single"] .action-nav-next {
  display: inline-flex;
}

.zoom-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.zoom-label {
  font-size: 0.65rem;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.zoom-buttons {
  display: flex;
  gap: 6px;
}

.zoom-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.zoom-btn[data-zoom="in"] {
  background: var(--green-light);
  color: var(--green-dark);
}

.zoom-btn[data-zoom="out"] {
  background: var(--red-light);
  color: var(--red-dark);
}

html[data-nav="single"] .zoom-widget {
  display: none;
}

html[data-nav="single"] .group-divider {
  display: none;
}

html[data-nav="single"] .row {
  display: none;
}

html[data-nav="single"] .row.current {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  border-bottom: none;
}

/* The checkbox group lives in the right half and is centered within it,
   rather than being packed against the right edge of the screen. */
html[data-nav="single"] .row.current .choices-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
}

html[data-nav="single"] .row.current .cell-image img {
  height: calc(100vh - var(--header-h) - var(--footer-h) - 24px);
  max-height: calc(100vh - var(--header-h) - var(--footer-h) - 24px);
}

/* In single-image mode, the option pills move from the sticky header down
   to sit right above each checkbox (.choice-label), so the header keeps
   only the photo question. */
html[data-nav="single"] .header-row {
  grid-template-columns: 1fr;
}

html[data-nav="single"] .header-row > .header-sim,
html[data-nav="single"] .header-row > .header-nao,
html[data-nav="single"] .header-row > .header-incerto,
html[data-nav="single"] .header-row > .header-class {
  display: none;
}

html[data-nav="single"] .cell-choice {
  gap: 36px;
}

/* Page2 can have more options than page1 (one per class, plus "Não sei").
   Use a smaller checkbox/label size there so the centered group stays
   compact within the right half. */
html[data-nav="single"] .row-page2 .choice-btn {
  width: 44px;
  height: 44px;
}

html[data-nav="single"] .row-page2 .choice-btn[aria-pressed="true"]::after {
  font-size: 18px;
}

html[data-nav="single"] .row-page2 .choice-label {
  font-size: 0.65rem;
}

html[data-nav="single"] .row.current {
  transition: opacity 0.25s ease;
  opacity: 1;
}

html[data-nav="single"] .row.current.fade-out {
  opacity: 0;
}

@keyframes row-flash-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 139, 139, 0); }
  50% { box-shadow: 0 0 0 6px rgba(239, 139, 139, 0.6); }
}

.row-flash {
  animation: row-flash-pulse 0.6s ease-in-out 2;
  border-radius: 12px;
}

.help-button {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--blue);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 25;
  box-shadow: 0 2px 8px rgba(43, 95, 168, 0.4);
  transition: transform 0.1s ease;
}

.help-button:hover {
  transform: scale(1.08);
}

.progress-counter {
  position: fixed;
  top: 16px;
  left: 16px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue-dark);
  font-weight: 700;
  display: flex;
  align-items: center;
  z-index: 25;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

html[data-page="done"] .progress-counter {
  display: none;
}

.help-modal {
  max-width: 648px;
  text-align: left;
  transform: scale(1);
  opacity: 1;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.help-modal h2 {
  margin-top: 0;
  text-align: center;
  color: var(--blue-dark);
}

.help-modal-body-wrap {
  position: relative;
  margin-bottom: 16px;
}

.help-modal-body {
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 14px;
  scrollbar-width: none;
  background:
    linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) center top,
    linear-gradient(rgba(255, 255, 255, 0), #fff 70%) center bottom,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)) center top,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)) center bottom;
  background-repeat: no-repeat;
  background-size: 100% 24px, 100% 24px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
}

.help-modal-body::-webkit-scrollbar {
  display: none;
}

.help-scrollbar-track {
  position: absolute;
  top: 0;
  right: 2px;
  bottom: 0;
  width: 6px;
  border-radius: 3px;
  background: var(--blue-light);
  pointer-events: none;
}

.help-scrollbar-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  border-radius: 3px;
  background: var(--blue);
}

.help-modal-body p {
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: left;
  margin: 0 0 12px;
}

.help-essential {
  background: var(--blue-light);
  border-radius: 12px;
  padding: 14px 16px 2px;
  margin-bottom: 18px;
}

.help-details-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
  margin: 0 0 8px;
}

.help-modal.closing {
  transform: scale(0);
  opacity: 0;
}

.gate-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gate-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.gate-label {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--blue-dark);
}

.gate-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 999px;
  border: 2px solid var(--blue-light);
  font-size: 1rem;
  text-align: center;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.gate-input:focus {
  outline: none;
  border-color: var(--blue);
}

.gate-error {
  margin: -4px 0 16px;
  color: var(--red-dark);
  font-size: 0.9rem;
}

.gate-submit {
  width: 100%;
}

@media (max-width: 600px) {
  .header-row,
  .row {
    grid-template-columns: 1fr 70px 70px 70px;
    gap: 6px;
    padding: 8px 10px;
  }

  .header-row-page2,
  .row-page2 {
    grid-template-columns: 1fr repeat(var(--page2-cols, 4), 60px);
  }

  .header-pill {
    padding: 10px 4px;
    font-size: 0.75rem;
  }

  .choice-btn {
    width: 44px;
    height: 44px;
  }

  .choice-btn[aria-pressed="true"]::after {
    font-size: 20px;
  }

  .action-nav-prev,
  .action-nav-next {
    padding: 10px 14px;
    font-size: 0.8rem;
  }

  .action-btn {
    padding: 9px 16px;
    font-size: 0.8rem;
  }

  .action-bar {
    gap: 8px;
    padding: 10px 12px;
  }

  .help-button {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    top: 10px;
    right: 10px;
  }

  .progress-counter {
    height: 36px;
    padding: 0 12px;
    font-size: 0.8rem;
    top: 10px;
    left: 10px;
  }
}