:root {
  --brand: #24186D;
  --brand-light: #EEE9FF;
  --surface: #FAF8F5;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--surface);
  color: var(--brand);
}
.survey-screen { min-height: 100vh; display: flex; flex-direction: column; }
.survey-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.survey-narrow { width: 100%; max-width: 576px; }

/* Progress bar + counter */
.survey-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: rgba(36,24,109,0.1); z-index: 50; }
.survey-progress-fill { height: 100%; background: var(--brand); width: 0%; transition: width 0.4s ease-out; }
.survey-counter { position: fixed; top: 16px; right: 24px; font-size: 12px; color: rgba(36,24,109,0.4); font-weight: 500; z-index: 40; }

/* Intro */
.survey-eyebrow { font-size: 12px; font-weight: 600; color: #7B6FBF; margin: 0 0 24px; }
.survey-title { font-size: 32px; font-weight: 600; line-height: 1.3; margin: 0 0 20px; }
.survey-lead { font-size: 16px; line-height: 1.6; color: rgba(36,24,109,0.7); margin: 0 0 40px; }
.survey-question-text { font-size: 28px; font-weight: 600; line-height: 1.3; margin: 0; }
.survey-question-desc { margin: 8px 0 0; font-size: 14px; color: rgba(36,24,109,0.5); }
.survey-block { margin: 32px 0; }

/* Buttons */
.survey-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--brand); color: #fff; border: none;
  padding: 16px 32px; border-radius: 16px; font-family: inherit;
  font-weight: 600; font-size: 14px; cursor: pointer; transition: opacity 0.15s, transform 0.1s;
}
.survey-btn:hover { opacity: 0.9; }
.survey-btn:active { transform: scale(0.96); }
.survey-btn[disabled] { background: rgba(36,24,109,0.1); color: rgba(36,24,109,0.3); cursor: not-allowed; }

/* Inputs */
.survey-input, .survey-textarea {
  width: 100%; background: transparent; border: none;
  border-bottom: 2px solid rgba(36,24,109,0.2);
  padding: 12px 0; font-family: inherit; font-size: 18px; color: var(--brand);
  outline: none; transition: border-color 0.15s;
}
.survey-input:focus, .survey-textarea:focus { border-bottom-color: var(--brand); }
.survey-textarea { resize: none; }
.survey-input::placeholder, .survey-textarea::placeholder { color: rgba(36,24,109,0.25); }

/* Choice options */
.survey-choices { display: flex; flex-direction: column; gap: 8px; }
.survey-choices.grid { display: grid; grid-template-columns: 1fr 1fr; }
.survey-option {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; border: 2px solid rgba(36,24,109,0.15); border-radius: 12px;
  background: transparent; font-family: inherit; font-size: 14px; font-weight: 500;
  color: rgba(36,24,109,0.7); text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.survey-option:hover { border-color: rgba(36,24,109,0.4); background: rgba(36,24,109,0.05); }
.survey-option.selected { border-color: var(--brand); background: rgba(36,24,109,0.05); color: var(--brand); }
.survey-option-marker {
  width: 24px; height: 24px; border: 2px solid rgba(36,24,109,0.3); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: rgba(36,24,109,0.4); flex-shrink: 0;
}
.survey-option.selected .survey-option-marker { border-color: var(--brand); background: var(--brand); color: #fff; }
.survey-other-wrap { margin: 8px 0 0; padding-left: 8px; display: flex; align-items: center; gap: 12px; }
.survey-choices.grid .survey-other-wrap { grid-column: 1 / -1; }
.survey-choices.grid [data-opt-other] { grid-column: 1 / -1; }
.survey-other-wrap span { font-size: 14px; font-weight: 500; flex-shrink: 0; }

/* Rating */
.survey-rating { display: flex; gap: 8px; flex-wrap: wrap; }
.survey-rating-btn {
  width: 52px; height: 52px; border: 2px solid rgba(36,24,109,0.15); border-radius: 12px;
  background: transparent; font-family: inherit; font-size: 16px; font-weight: 600;
  color: rgba(36,24,109,0.7); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.survey-rating-btn:hover { border-color: rgba(36,24,109,0.4); }
.survey-rating-btn.selected { border-color: var(--brand); background: var(--brand); color: #fff; }

/* Footer nav */
.survey-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; }
.survey-back { background: none; border: none; font-family: inherit; font-size: 12px; font-weight: 500;
  color: rgba(36,24,109,0.4); cursor: pointer; }
.survey-back:hover { color: rgba(36,24,109,0.7); }
.survey-hint { font-size: 12px; color: rgba(36,24,109,0.3); }
.survey-error { margin-top: 16px; font-size: 14px; color: #A9114A; text-align: center; }

/* Thank-you */
.survey-thanks { text-align: center; max-width: 384px; }
.survey-thanks-check {
  width: 64px; height: 64px; border-radius: 50%; background: var(--brand-light);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 28px; color: var(--brand);
}

/* Transition */
.survey-fade { animation: surveyFadeIn 0.32s ease; }
@keyframes surveyFadeIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 560px) {
  .survey-title { font-size: 26px; }
  .survey-question-text { font-size: 22px; }
  .survey-choices.grid { grid-template-columns: 1fr; }
}