/* —— Reset & Base Styles —— */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: sans-serif;
  line-height: 1.4;
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: #f9f9f9;
}
.view { width: 100%; max-width: 400px; }
.hidden { display: none; }
h1 { margin-bottom: 1rem; text-align: center; }
.error { color: #c00; margin-top: .5rem; }
input, button {
  width: 100%;
  padding: .75rem;
  margin-top: .5rem;
  font-size: 1rem;
}
button { cursor: pointer; }
#dashboard-view button { margin-top: 1rem; }

/* —— Challenge layout —— */
#task-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#task-image {
  width: 100%;
  max-width: 300px;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
#labels-container {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.label-option {
  flex: 1 1 calc(50% - .5rem);
  padding: .5rem;
  text-align: center;
  border: 1px solid #888;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  background: #fff;
}
.label-option.selected {
  background-color: #007bff;
  color: #fff;
  border-color: #0056b3;
}
#task-counter {
  margin-top: .5rem;
  font-weight: bold;
}

/* —— Responsive tweaks —— */
@media (max-width: 360px) {
  #labels-container { gap: .25rem; }
  .label-option { flex: 1 1 100%; }
}