.quiz {
  border-radius: 14px;
  background: #fffdf9;
  box-shadow: 0 0 12px 6px rgba(250,244,234,.95),
              0 0 32px 18px rgba(250,244,234,.6),
              0 0 56px 28px rgba(250,244,234,.15);
}
.quiz-panel {
  background: linear-gradient(90deg, rgba(250,244,234,.65), transparent 28px, transparent calc(100% - 28px), rgba(250,244,234,.65)),
              linear-gradient(180deg, rgba(250,244,234,.65), transparent 28px);
}

.quiz-wrap {
  background: linear-gradient(rgba(250, 244, 234, .78), rgba(250, 244, 234, .78)),
    url('assets/home-kitchen.jpeg') center 52% / cover no-repeat;
}

/* Hidden steps must stay hidden even when a panel has a grid layout. */
.quiz-panel[hidden],
.quiz-nav[hidden],
.quiz-nav .back[hidden] {
  display: none !important;
}

.quiz-nav {
  display: flex;
  justify-content: space-between;
  height: auto;
  min-height: 50px;
  padding: 0;
  background: #f6d6c5;
  border-top: none;
}

.quiz-nav .next {
  min-height: 50px;
  margin-left: auto;
  padding: 12px 28px;
  border-radius: 0;
  background: #efc2a9;
  color: #432d25;
  font-size: .875rem;
  font-weight: 700;
}

.quiz-nav .next:hover { background: #e8b497; }
.quiz-nav .back {
  min-height: 50px;
  padding: 12px 26px;
  color: #432d25;
  font-size: .875rem;
  font-weight: 700;
}
.quiz-panel { min-height: 420px; padding: 54px 40px 30px; }
.quiz-panel legend { font-size: 1rem; margin-bottom: 12px; }
.quiz-panel label:not(.input-label) { padding: 4px 0; }
.quiz-panel .input-label { font-weight: 400; margin-top: 8px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .quiz-panel { min-height: 360px; padding: 44px 28px 28px; }
}
.quiz-nav .next:focus-visible {
  outline: 3px solid #432d25;
  outline-offset: 3px;
}

.submission-note { font-size: .875rem; line-height: 1.5; margin-top: 24px; }