.fpv-qf { max-width: 740px; margin: 0 auto; }
.fpv-qf h2 { margin: 0 0 12px; }
.fpv-qf-muted { margin: 0 0 12px; opacity: 0.8; }

.fpv-qf-progress { height: 6px; background: rgba(0,0,0,0.08); border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.fpv-qf-progress-bar { height: 100%; width: 33%; background: rgba(0,0,0,0.65); transition: width 180ms ease; }

.fpv-qf-step { display: none; padding: 18px; border: 1px solid rgba(0,0,0,0.10); border-radius: 12px; }
.fpv-qf-step.is-active { display: block; }

.fpv-qf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 640px) { .fpv-qf-grid { grid-template-columns: 1fr; } }

.fpv-qf label { display: block; font-weight: 600; }
.fpv-qf input, .fpv-qf select {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px;
  font-weight: 500;
}
.fpv-qf small { display: block; margin-top: 6px; font-weight: 500; opacity: 0.75; }

.fpv-qf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 16px; }
@media (max-width: 640px) { .fpv-qf-tiles { grid-template-columns: 1fr 1fr; } }

.fpv-qf-tile {
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 12px;
  background: white;
  cursor: pointer;
  font-weight: 700;
}
.fpv-qf-tile.is-selected { outline: 2px solid rgba(0,0,0,0.55); }

.fpv-qf-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 16px; }
@media (max-width: 640px) { .fpv-qf-checks { grid-template-columns: 1fr; } }

.fpv-qf-check { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.fpv-qf-check input { width: auto; }

.fpv-qf-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.fpv-qf-btn {
  border: 1px solid rgba(0,0,0,0.18);
  background: white;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
}
.fpv-qf-btn.primary { background: rgba(0,0,0,0.85); color: white; border-color: rgba(0,0,0,0.85); }
.fpv-qf-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.fpv-qf-status { margin-top: 12px; font-weight: 700; }
.fpv-qf-status.ok { color: #0a7a2f; }
.fpv-qf-status.err { color: #b00020; }

/* Typeahead dropdown */
.fpv-qf-typeahead {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 9999;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

.fpv-qf-suggest {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: #fff;
  border: 0;
  cursor: pointer;
  font-weight: 650;
}
.fpv-qf-suggest:hover { background: rgba(0,0,0,0.04); }

.fpv-qf-suggest-empty {
  padding: 10px 12px;
  opacity: 0.75;
  font-weight: 600;
}

/* Field validation states */
.fpv-qf-invalid {
    border-color: #b00020 !important;
    box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.12);
  }
  .fpv-qf-valid {
    border-color: #0a7a2f !important;
    box-shadow: 0 0 0 3px rgba(10, 122, 47, 0.10);
  }
  
  /* Success panel */
  .fpv-qf-success {
    padding: 22px;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 12px;
  }
  .fpv-qf-success h2 { margin: 0 0 10px; }
  .fpv-qf-success p { margin: 0; opacity: 0.85; }

  .fpv-qf-suggest.other {
    border-top: 1px solid rgba(0,0,0,0.10);
    font-weight: 800;
  }

  /* Step error banner */
.fpv-qf-step-error { margin: 10px 0 14px; }
.fpv-qf-step-error.is-visible { display: block; }

.fpv-qf-error-banner {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(176, 0, 32, 0.25);
  background: rgba(176, 0, 32, 0.07);
  color: #b00020;
  font-weight: 750;
}

input.is-prefilled {
  background: #f3f8ff;
  border-color: #3b82f6;
}