.survey-container { max-width: 640px; margin: 0 auto; }
    .survey-step { display: none; }
    .survey-step.active { display: block; }
    .survey-progress { height: 4px; background: var(--color-surface-2); border-radius: 2px; margin-bottom: 2rem; }
    .survey-progress-fill { height: 100%; background: var(--gradient-brand); border-radius: 2px; transition: width 0.3s ease; }
    .survey-options { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0; }
    .survey-option { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: border-color 0.2s; }
    .survey-option:hover, .survey-option.selected { border-color: var(--color-primary); }
    .survey-option input { accent-color: var(--color-primary); flex-shrink: 0; width: 18px; height: 18px; }
    .survey-option label { cursor: pointer; flex: 1; color: var(--color-text); font-size: 0.95rem; }
    .star-rating { display: flex; gap: 0.5rem; font-size: 2rem; margin: 1.5rem 0; }
    .star-rating .star { cursor: pointer; color: var(--color-border); transition: color 0.15s; user-select: none; }
    .star-rating .star.active, .star-rating .star:hover ~ .star { }
    .star-rating .star.active { color: #ED4524; }
    .survey-nav { display: flex; justify-content: space-between; margin-top: 2rem; }
    .survey-step h2 { font-size: 1.5rem; color: var(--color-text); margin-bottom: 0.5rem; }
    .survey-step .step-sub { color: var(--color-muted); font-size: 0.9rem; margin-bottom: 0.25rem; }
    .survey-step-indicator { font-size: 0.8rem; color: var(--color-muted); margin-bottom: 1rem; }
    .survey-textarea {
      width: 100%;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: 1rem;
      font-size: 1rem;
      color: var(--color-text);
      font-family: inherit;
      resize: vertical;
      min-height: 120px;
      outline: none;
      transition: border-color 0.25s;
      box-sizing: border-box;
    }
    .survey-textarea:focus { border-color: var(--color-primary); }
    .survey-field { margin-bottom: 1.25rem; }
    .survey-field label { display: block; font-size: 0.875rem; color: var(--color-muted); margin-bottom: 0.5rem; font-weight: 500; }
    .survey-field input {
      width: 100%;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: 0.875rem 1rem;
      font-size: 1rem;
      color: var(--color-text);
      font-family: inherit;
      outline: none;
      transition: border-color 0.25s;
      box-sizing: border-box;
    }
    .survey-field input:focus { border-color: var(--color-primary); }
    .survey-thankyou {
      display: none;
      text-align: center;
      padding: 3rem 1.5rem;
    }
    .survey-thankyou h2 { font-size: 2.5rem; margin-bottom: 0.75rem; }
    .survey-thankyou p { color: var(--color-muted); font-size: 1rem; margin-bottom: 2rem; }
    .star-hint { font-size: 0.85rem; color: var(--color-muted); margin-top: -1rem; margin-bottom: 1rem; }