:root {
    --onboarding-ink: #24324a;
    --onboarding-muted: #667085;
    --onboarding-primary: #6f4ad8;
    --onboarding-soft: #f4f0ff;
    --onboarding-accent: #ffb45b;
}

.onboarding-shell {
    min-height: 72vh;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 180, 91, .17), transparent 24rem),
        radial-gradient(circle at 88% 18%, rgba(111, 74, 216, .14), transparent 24rem),
        linear-gradient(180deg, #fff 0%, #faf8ff 100%);
}

.onboarding-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    color: var(--onboarding-muted);
    font-size: .9rem;
}

.onboarding-trust i { color: var(--onboarding-primary); margin-left: .35rem; }

.evaluation-card,
.questionnaire-card,
.completion-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.4rem, 4vw, 3.25rem);
    border: 1px solid rgba(111, 74, 216, .12);
    border-radius: 28px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 24px 70px rgba(55, 39, 107, .12);
    color: var(--onboarding-ink);
}

.evaluation-progress {
    display: flex;
    align-items: center;
    max-width: 260px;
    margin: 0 auto 2.25rem;
}

.evaluation-progress span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 2px solid #ddd7ef;
    border-radius: 50%;
    color: #948ba9;
    background: #fff;
    font-weight: 700;
    transition: .2s ease;
}

.evaluation-progress span.is-active { color: #fff; border-color: var(--onboarding-primary); background: var(--onboarding-primary); }
.evaluation-progress i { height: 2px; flex: 1; background: #e7e2f2; }

.evaluation-step { text-align: center; animation: onboardingFade .3s ease; }
.evaluation-step h2, .questionnaire-card h1, .completion-card h1 { font-weight: 800; line-height: 1.5; }
.evaluation-step > p { max-width: 630px; margin: .75rem auto 1.5rem; color: var(--onboarding-muted); line-height: 1.9; }

.evaluation-kicker {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .75rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: var(--onboarding-soft);
    color: var(--onboarding-primary);
    font-weight: 700;
    font-size: .88rem;
}

.evaluation-benefits { display: grid; gap: .65rem; max-width: 530px; margin: 0 auto 2rem; padding: 0; list-style: none; text-align: right; }
.evaluation-benefits i { color: #23a26d; margin-left: .5rem; }
.evaluation-back { position: absolute; top: 1.3rem; right: 1.3rem; border: 0; border-radius: 50%; width: 42px; height: 42px; color: var(--onboarding-primary); background: var(--onboarding-soft); }

.age-grid { display: grid; grid-template-columns: repeat(5, minmax(64px, 1fr)); gap: .7rem; max-width: 610px; margin: 0 auto; }
.age-choice, .gender-choice, .answer-choice {
    border: 2px solid #ece8f4;
    border-radius: 16px;
    color: var(--onboarding-ink);
    background: #fff;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.age-choice { padding: .8rem .4rem; }
.age-choice strong { display: block; font-size: 1.25rem; }
.age-choice small { color: var(--onboarding-muted); }
.age-choice:hover, .gender-choice:hover, .answer-choice:hover { transform: translateY(-2px); border-color: var(--onboarding-primary); box-shadow: 0 9px 24px rgba(111, 74, 216, .12); }

.evaluation-form { max-width: 560px; margin: 0 auto; }
.gender-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gender-choice { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem; font-weight: 700; }
.gender-choice img { width: 48px; height: 48px; object-fit: contain; }

.onboarding-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; color: var(--onboarding-muted); font-size: .85rem; }
.onboarding-steps span { padding: .35rem .7rem; border-radius: 999px; background: #f3f4f6; }
.onboarding-steps .active { color: var(--onboarding-primary); background: var(--onboarding-soft); font-weight: 700; }

.question-panel { display: none; animation: onboardingFade .25s ease; }
.question-panel.is-active { display: block; }
.question-count { color: var(--onboarding-primary); font-weight: 700; }
.answer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
.answer-choice { display: flex; min-height: 150px; padding: 1rem; align-items: center; justify-content: center; cursor: pointer; }
.answer-choice img { max-width: 86px; max-height: 76px; margin-bottom: .5rem; }
.answer-choice:has(input:checked) { border-color: var(--onboarding-primary); background: var(--onboarding-soft); box-shadow: 0 8px 24px rgba(111, 74, 216, .13); }
.answer-choice input { position: absolute; opacity: 0; pointer-events: none; }
.answer-choice span { display: block; font-weight: 700; line-height: 1.7; }

.result-hero { text-align: center; }
.result-icon { width: 78px; height: 78px; display: grid; place-items: center; margin: 0 auto 1rem; border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--onboarding-primary), #9c71ef); font-size: 2rem; transform: rotate(-3deg); }
.insight-box { padding: 1.25rem; border-radius: 18px; background: linear-gradient(135deg, #fff8ee, #fff); border: 1px solid #ffe1bd; }
.answer-summary { padding: 0; list-style: none; }
.answer-summary li { padding: .65rem 0; border-bottom: 1px solid #eeeaf5; }
.answer-summary li:last-child { border-bottom: 0; }
.claim-box { margin-top: 1.5rem; padding: 1.4rem; border-radius: 20px; background: var(--onboarding-soft); }

.completion-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 2rem; align-items: start; }
.completion-summary { position: sticky; top: 1rem; padding: 1.25rem; border-radius: 18px; background: var(--onboarding-soft); }
.completion-summary ul { padding: 0; list-style: none; }
.completion-summary li { margin: .65rem 0; }

@keyframes onboardingFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
    .age-grid { grid-template-columns: repeat(3, 1fr); }
    .answer-grid, .completion-layout { grid-template-columns: 1fr; }
    .answer-choice { min-height: 105px; }
    .completion-summary { position: static; order: -1; }
}