.assessment-wrap, .result-wrap { max-width: 680px; margin: 2.5rem auto; padding: 0 1.5rem 4rem; }
.assessment-header { text-align: center; margin-bottom: 2rem; }
.assessment-header h1 { font-size: 1.75rem; color: var(--blue); margin-bottom: 0.5rem; }
.assessment-header p { color: var(--text-sec); }

/* Age buttons */
.age-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.age-btn { padding: 0.5rem 1rem; border-radius: 8px; border: 1.5px solid var(--border); background: var(--white); cursor: pointer; font-size: 0.875rem; transition: all 0.15s; }
.age-btn.active { border-color: var(--teal); background: var(--teal-light); color: #0F6E56; font-weight: 500; }

/* Mini result */
.mini-result-card { background: var(--white); border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow); }
.check-icon { width: 56px; height: 56px; background: var(--teal-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 1.25rem; }
.mini-result-card h2 { text-align: center; margin-bottom: 1rem; color: var(--blue); }
.mini-summary { text-align: center; color: var(--text-sec); margin-bottom: 1.5rem; line-height: 1.7; }
.areas-detected h3 { font-size: 0.95rem; margin-bottom: 0.75rem; color: var(--text-sec); }
.areas-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.area-badge { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.875rem; border-radius: 20px; font-size: 0.875rem; background: var(--bg); }
.paywall-box { border-top: 1px solid var(--border); padding-top: 1.75rem; }
.paywall-box h3 { margin-bottom: 1rem; }
.feature-list { list-style: none; margin-bottom: 1.5rem; }
.feature-list li { padding: 0.3rem 0; color: var(--text-sec); font-size: 0.9rem; }
.price-options { display: flex; gap: 1rem; flex-wrap: wrap; }
.price-options .btn { flex: 1; text-align: center; }
.price-note { font-size: 0.8rem; color: var(--text-sec); margin-top: 0.75rem; text-align: center; }

/* Interview */
.interview-wrap { max-width: 640px; margin: 2rem auto; padding: 0 1.5rem 4rem; }
.progress-bar-wrap { height: 4px; background: var(--border); border-radius: 2px; margin-bottom: 0.5rem; overflow: hidden; }
.progress-bar { height: 100%; background: var(--teal); border-radius: 2px; transition: width 0.4s; }
.progress-label { font-size: 0.8rem; color: var(--text-sec); margin-bottom: 1.5rem; }
.area-tag { display: inline-block; padding: 0.3rem 0.875rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; margin-bottom: 1rem; }
.question-card { background: var(--white); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); min-height: 100px; margin-bottom: 1.25rem; display: flex; align-items: center; }
.question-text { font-size: 1.1rem; line-height: 1.6; color: var(--text); }
.options-wrap { display: flex; flex-direction: column; gap: 0.625rem; }
.option-btn { padding: 0.875rem 1.25rem; border-radius: 10px; border: 1.5px solid var(--border); background: var(--white); text-align: left; cursor: pointer; font-size: 0.95rem; transition: all 0.15s; }
.option-btn:hover:not(:disabled) { border-color: var(--teal); background: var(--teal-light); }
.option-btn.selected { border-color: var(--teal); background: var(--teal-light); color: #0F6E56; }
.option-btn:disabled { cursor: default; }

/* Multi-select mode */
.options-wrap.multi-select .option-btn { padding-left: 3rem; position: relative; }
.options-wrap.multi-select .option-btn::before {
    content: '';
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; border-radius: 4px;
    border: 2px solid var(--border); background: white;
    transition: all 0.15s;
}
.options-wrap.multi-select .option-btn.selected::before {
    background: var(--teal); border-color: var(--teal);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 10px;
}
.multi-hint {
    font-size: 0.8rem; color: var(--text-sec);
    text-align: center; margin-top: 0.25rem;
    font-style: italic;
}

/* Resposta free_text inline */
.free-text-inline {
    width: 100%; box-sizing: border-box;
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 0.95rem; color: var(--text);
    background: white; resize: vertical;
    line-height: 1.6; font-family: inherit;
    transition: border-color 0.15s;
}
.free-text-inline:focus {
    outline: none; border-color: var(--teal);
}

/* Nota opcional per pregunta */
.question-note-wrap {
    margin-top: 0.75rem;
}
.question-note-wrap textarea {
    width: 100%; box-sizing: border-box;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 0.85rem; color: var(--text);
    background: #fafafa;
    resize: none; line-height: 1.5;
    transition: border-color 0.15s;
    font-family: inherit;
}
.question-note-wrap textarea:focus {
    outline: none;
    border-color: var(--teal);
    background: white;
}

.finish-wrap { text-align: center; padding: 2rem; }

/* ===== INTERVIEW REDESIGN ===== */

/* AI Loading card */
.ai-loading-card {
    display: flex;
    align-items: center; justify-content: center;
    min-height: 140px; flex-direction: column; gap: 1rem;
}
.ai-loader { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.ai-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(93,202,165,0.2);
    border-top-color: #5DCAA5;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ai-loading-text {
    font-size: 0.9rem; color: var(--text-sec);
    transition: opacity 0.3s;
    text-align: center;
}
.ai-loading-text.fade-text { opacity: 0; }

/* AI Ready state */
.ai-ready {
    display: none;
    flex-direction: column; align-items: center; gap: 0.75rem;
    opacity: 0; transform: scale(0.85);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.ai-ready.visible { opacity: 1; transform: scale(1); }
.ai-ready-check {
    width: 52px; height: 52px;
}
.ai-ready-check svg { width: 100%; height: 100%; }
.rdy-circle {
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: rdyCircle 0.5s ease forwards;
}
.rdy-path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: rdyPath 0.35s ease 0.4s forwards;
}
@keyframes rdyCircle { to { stroke-dashoffset: 0; } }
@keyframes rdyPath   { to { stroke-dashoffset: 0; } }
.ai-ready-text {
    font-size: 0.95rem; font-weight: 600;
    color: #059669;
}

/* Area tag transition */
.area-tag { transition: opacity 0.3s; }

/* Question card */
.question-card { display: flex; align-items: center; }

/* Options: flex column, no auto-advance */
.options-wrap { display: flex; flex-direction: column; gap: 0.625rem; }

/* Next button */
.next-btn-wrap { margin-top: 1.25rem; }
.btn-next-question {
    width: 100%; padding: 0.875rem 1.5rem;
    border-radius: 10px; border: none;
    background: #cbd5e1; color: white;
    font-size: 1rem; font-weight: 600;
    cursor: not-allowed;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-next-question.ready {
    background: linear-gradient(135deg, #5DCAA5, #38b28a);
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(93,202,165,0.4);
}
.btn-next-question.ready:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(93,202,165,0.5); }

/* Free text final */
.free-text-wrap { margin-top: 0.5rem; }
.free-text-card {
    background: var(--white); border-radius: var(--radius);
    padding: 2rem; box-shadow: var(--shadow);
    border-top: 4px solid var(--teal);
}
.free-text-card h3 { font-size: 1.1rem; color: var(--blue); margin-bottom: 0.5rem; }
.free-text-card label { display: block; font-size: 0.875rem; color: var(--text-sec); margin-bottom: 0.75rem; }
.free-text-card textarea {
    width: 100%; padding: 0.75rem; border: 2px solid var(--border);
    border-radius: 8px; font-size: 0.925rem; resize: vertical;
    font-family: inherit; line-height: 1.6; outline: none;
    transition: border-color 0.15s;
}
.free-text-card textarea:focus { border-color: var(--teal); }
.free-text-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }

/* Finish animation */
.finish-wrap { text-align: center; padding: 3rem 1rem; }
.finish-animation { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.finish-spinner {
    width: 56px; height: 56px;
    border: 4px solid rgba(93,202,165,0.2);
    border-top-color: #5DCAA5;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.finish-text-rotating { font-size: 0.9rem; color: var(--text-sec); transition: opacity 0.4s; }

/* Loading dots */
.loading-dots { display: flex; gap: 6px; justify-content: center; }
.loading-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: bounce 1.2s infinite; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%,80%,100% { transform: scale(0.7); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════
   INTERVIEW REDESIGN — pàgina de preguntes WOW
   ═══════════════════════════════════════════════════════════════ */

body.interview-page {
    background: linear-gradient(180deg, #f0f4f8 0%, #e8eef5 100%);
    min-height: 100vh;
}

/* Strip de progrés sticky sota la navbar */
.iq-progress-strip {
    position: sticky;
    top: 57px;
    z-index: 90;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 0.65rem 1.5rem;
}
.iq-progress-strip-inner {
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.875rem;
}
.iq-progress-qlabel {
    font-size: 0.8rem;
    color: var(--text-sec);
    white-space: nowrap;
    min-width: 90px;
}
.iq-progress-qlabel strong {
    color: var(--blue);
    font-weight: 700;
}
.iq-progress-track {
    flex: 1;
    height: 10px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}
.iq-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #5DCAA5, #7F77DD);
    border-radius: 10px;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.iq-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.25) 0%, transparent 100%);
    border-radius: 10px;
}
.iq-progress-pct {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7F77DD;
    white-space: nowrap;
    min-width: 36px;
    text-align: right;
}

/* Legacy alias per si algun JS busca #progressBar */
#progressBar { /* see .iq-progress-fill */ }

/* Contenidor principal */
.iq-wrap {
    max-width: 620px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

/* Capçalera meta */
.iq-meta {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 2rem; min-height: 30px;
}
.iq-qnum {
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: #94a3b8; white-space: nowrap;
}
.iq-area-tag {
    font-size: 0.78rem; font-weight: 600;
    padding: 0.25rem 0.875rem; border-radius: 20px;
    transition: opacity 0.4s, background 0.3s, color 0.3s;
}

/* Loading card */
.iq-loading-card {
    background: white; border-radius: 18px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    min-height: 160px;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 1rem;
    margin-bottom: 1rem;
}

/* Text de la pregunta */
.iq-question {
    margin-bottom: 1.75rem;
    animation: iqFadeUp 0.35s ease forwards;
}
@keyframes iqFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.iq-question-text {
    font-size: 1.25rem; font-weight: 600;
    line-height: 1.65; color: #1e293b;
}

/* Opcions — cards amb lletra */
.iq-options {
    display: flex; flex-direction: column; gap: 0.625rem;
    margin-bottom: 0.625rem;
}
.option-btn {
    display: flex; align-items: center; gap: 0.875rem;
    padding: 0.875rem 1.125rem;
    border-radius: 14px; border: 2px solid #e2e8f0;
    background: white; width: 100%; text-align: left;
    cursor: pointer; font-size: 0.93rem; line-height: 1.45;
    transition: all 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    font-family: inherit;
}
.option-btn:hover:not(:disabled) {
    border-color: #5DCAA5; background: #f0fdf9;
    transform: translateX(4px);
    box-shadow: 0 3px 12px rgba(93,202,165,0.18);
}
.option-btn.selected {
    border-color: #5DCAA5; background: #f0fdf9;
    transform: translateX(4px);
}
.option-btn.selected .opt-badge {
    background: #5DCAA5; color: white;
}
.option-btn.selected .opt-text { color: #0F6E56; font-weight: 500; }
.option-btn:disabled { opacity: 0.55; cursor: default; transform: none; }

.opt-badge {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 50%; background: #f1f5f9; color: #64748b;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700;
    transition: all 0.15s;
}
.opt-text { flex: 1; color: #334155; }

/* Multi-select: badge quadrat amb checkmark */
.iq-options.multi-select .opt-badge { border-radius: 7px; }
.iq-options.multi-select .option-btn.selected .opt-badge::after {
    content: '✓'; font-size: 0.9rem;
}
.multi-hint {
    font-size: 0.78rem; color: #94a3b8;
    text-align: center; font-style: italic; margin-top: 0.25rem;
}

/* Free text inline */
.free-text-inline {
    width: 100%; box-sizing: border-box;
    padding: 0.875rem 1rem; border: 2px solid #e2e8f0;
    border-radius: 14px; font-size: 0.95rem;
    color: var(--text); background: white; resize: vertical;
    line-height: 1.6; font-family: inherit; transition: border-color 0.15s;
}
.free-text-inline:focus { outline: none; border-color: #5DCAA5; }

/* Nota opcional */
.iq-note-wrap { margin-bottom: 0.75rem; }
.iq-note-wrap textarea {
    width: 100%; box-sizing: border-box;
    padding: 0.6rem 0.875rem; border: 1.5px solid #e2e8f0;
    border-radius: 10px; font-size: 0.83rem; color: var(--text);
    background: #fafafa; resize: none; line-height: 1.5;
    font-family: inherit; transition: border-color 0.15s;
}
.iq-note-wrap textarea:focus { outline: none; border-color: #5DCAA5; background: white; }

/* Botó respondre */
.iq-submit-wrap { margin-top: 0.5rem; }
.iq-submit-btn {
    width: 100%; padding: 1rem 1.5rem;
    border-radius: 14px; border: none;
    background: #e2e8f0; color: #94a3b8;
    font-size: 1rem; font-weight: 600;
    cursor: not-allowed; transition: all 0.2s;
    font-family: inherit; letter-spacing: 0.01em;
}
.iq-submit-btn.ready {
    background: linear-gradient(135deg, #5DCAA5 0%, #3db58a 100%);
    color: white; cursor: pointer;
    box-shadow: 0 6px 22px rgba(93,202,165,0.4);
    animation: readyPulse 2.5s ease-in-out infinite;
    position: relative; overflow: hidden;
}
.iq-submit-btn.ready::after {
    content: '';
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-20deg);
    animation: btnShine 2.5s ease-in-out infinite;
}
@keyframes btnShine {
    0%, 60% { left: -100%; }
    80% { left: 140%; }
    100% { left: 140%; }
}
.iq-submit-btn.ready:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(93,202,165,0.5);
    animation: none;
}
.iq-submit-btn.ready:hover::after { animation: none; left: 140%; }
.iq-submit-btn.ready:active { transform: translateY(0); }

/* Pregunta lliure final */
.iq-free-wrap { animation: iqFadeUp 0.35s ease forwards; }
.iq-free-card {
    background: white; border-radius: 20px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 0 0 2px rgba(127,119,221,0.15);
    padding: 2.25rem 1.75rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.iq-free-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #5DCAA5, #7F77DD, #5DCAA5);
    background-size: 200% 100%;
    animation: shimmerBorder 3s linear infinite;
}
@keyframes shimmerBorder {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
.iq-free-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(127,119,221,0.12), rgba(93,202,165,0.12));
    border: 1px solid rgba(127,119,221,0.25);
    color: #7F77DD; font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.25rem 0.875rem; border-radius: 20px;
    margin-bottom: 1rem; display: inline-block;
}
.iq-free-icon { font-size: 2.75rem; margin-bottom: 0.625rem; }
.iq-free-card h3 { font-size: 1.2rem; font-weight: 800; color: #1e293b; margin-bottom: 0.4rem; }
.iq-free-label { font-size: 0.88rem; color: #64748b; margin-bottom: 1.25rem; line-height: 1.6; }
.iq-free-card textarea {
    width: 100%; box-sizing: border-box;
    padding: 0.875rem 1rem; border: 2px solid #e2e8f0;
    border-radius: 12px; font-size: 0.95rem; color: #1e293b;
    background: #f8fafc; resize: vertical; line-height: 1.6;
    font-family: inherit; margin-bottom: 1.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.iq-free-card textarea:focus {
    outline: none; border-color: #7F77DD;
    background: white; box-shadow: 0 0 0 3px rgba(127,119,221,0.12);
}
.iq-free-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; }

/* Botó Finalitzar — WOW */
.iq-free-finish-btn {
    width: 100%;
    padding: 1.1rem 1.5rem;
    border-radius: 14px; border: none;
    background: linear-gradient(135deg, #5DCAA5 0%, #7F77DD 100%);
    color: white; font-size: 1rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 24px rgba(93,202,165,0.35), 0 2px 8px rgba(127,119,221,0.2);
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
}
.iq-free-finish-btn::after {
    content: '';
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s;
}
.iq-free-finish-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(93,202,165,0.45), 0 4px 14px rgba(127,119,221,0.3);
}
.iq-free-finish-btn:hover::after { left: 140%; }
.iq-free-finish-btn:active { transform: translateY(-1px); }

/* Botó Saltar — secundari, dissenyat */
.iq-free-skip-btn {
    width: 100%;
    padding: 0.825rem 1.5rem;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: transparent;
    color: #94a3b8; font-size: 0.875rem; font-weight: 500;
    cursor: pointer; font-family: inherit;
    transition: all 0.18s;
}
.iq-free-skip-btn:hover {
    border-color: #cbd5e1; color: #64748b;
    background: #f8fafc;
}

/* Generant informe */
.iq-finish-wrap { text-align: center; padding: 3rem 1rem; animation: iqFadeUp 0.4s ease forwards; }
.iq-finish-inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.iq-finish-spinner {
    width: 64px; height: 64px;
    border: 4px solid rgba(127,119,221,0.2);
    border-top-color: #7F77DD;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.iq-finish-wrap h3 { font-size: 1.25rem; font-weight: 700; color: #1A3A5C; }
.iq-finish-rotating { font-size: 0.9rem; color: #64748b; transition: opacity 0.4s; }
.iq-finish-warning {
    margin-top: 1.5rem;
    padding: 0.875rem 1.125rem;
    background: #fff8e6;
    border: 1.5px solid #f5c842;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #7a5a00;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 320px;
    text-align: left;
}
.iq-finish-warning-icon { flex-shrink: 0; font-size: 1rem; margin-top: 0.05rem; }

/* nav-saving note */
.nav-saving { font-size: 0.8rem; color: #94a3b8; }

/* Resume notice */
.iq-resume-toast {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    background: #1e293b; color: #e2e8f0; font-size: 0.85rem;
    padding: 0.6rem 1.25rem; border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    opacity: 0; transition: opacity 0.35s;
    z-index: 999; white-space: nowrap; pointer-events: none;
}
.iq-resume-toast.visible { opacity: 1; }

/* Result */
.result-header { text-align: center; margin-bottom: 2rem; }
.result-header h1 { font-size: 1.75rem; color: var(--blue); }
.result-plan-badge {
    display: inline-block; font-size: 0.78rem; font-weight: 700;
    padding: 0.3rem 0.8rem; border-radius: 999px; margin-bottom: 0.75rem;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.badge-pro { background: linear-gradient(90deg,#7F77DD,#9B59B6); color: white; }
.badge-std { background: #D1FAE5; color: #065F46; }

/* Nota de fiabilitat */
.result-accuracy-note {
    display: flex; gap: 0.85rem; align-items: flex-start;
    background: #F0F9FF; border: 1px solid #BAE6FD; border-left: 4px solid #38BDF8;
    border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 2rem;
    font-size: 0.875rem; color: #0C4A6E; line-height: 1.5;
}
.ran-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.05rem; }
.result-accuracy-note strong { display: block; margin-bottom: 0.25rem; color: #0369A1; }

/* Pro sections */
.pro-section {
    background: white; border-radius: 14px; padding: 1.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    border: 1px solid #E5E7EB; margin-bottom: 1.5rem;
    border-top: 3px solid #7F77DD;
}
.pro-section-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.pro-section-header h2 { font-size: 1.15rem; color: #1A3A5C; margin: 0; }
.pro-badge-inline {
    font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem;
    border-radius: 999px; background: linear-gradient(90deg,#7F77DD,#9B59B6);
    color: white; white-space: nowrap; flex-shrink: 0;
}

/* Narrative blocks */
.narrative-block { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #F1F5F9; }
.narrative-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.narrative-block h3 { font-size: 0.9rem; font-weight: 600; color: #7F77DD; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; }
.narrative-block--steps { background: #F0FDF9; border-radius: 10px; padding: 1rem; border-bottom: none; }
.narrative-block--steps h3 { color: #5DCAA5; }
.narrative-text { font-size: 0.9rem; line-height: 1.7; color: #374151; }
.narrative-text strong { color: var(--blue); font-weight: 600; }
.narrative-text strong.chat-heading { display: block; font-size: 0.95rem; color: var(--blue); margin: 0.75rem 0 0.25rem; }
.narrative-text em { font-style: italic; }
.narrative-text li { margin-left: 1.25rem; margin-bottom: 0.2rem; list-style: disc; }

/* Impact grid */
.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 640px) { .impact-grid { grid-template-columns: repeat(2,1fr); } }
.impact-card { text-align: center; }
.impact-icon { font-size: 1.5rem; margin-bottom: 0.35rem; }
.impact-label { font-size: 0.78rem; font-weight: 600; color: #64748B; margin-bottom: 0.5rem; }
.impact-bar-wrap { height: 6px; background: #E2E8F0; border-radius: 3px; overflow: hidden; margin-bottom: 0.3rem; }
.impact-bar-fill { height: 100%; background: linear-gradient(90deg,#7F77DD,#5DCAA5); border-radius: 3px; }
.impact-val { font-size: 0.85rem; font-weight: 700; color: #1A3A5C; }

/* Timeline */
.timeline-wrap { position: relative; padding-left: 1.5rem; }
.timeline-wrap::before { content:''; position:absolute; left:7px; top:0; bottom:0; width:2px; background: linear-gradient(180deg,#7F77DD,#5DCAA5); border-radius:1px; }
.timeline-step { position: relative; margin-bottom: 1.25rem; }
.timeline-dot { position:absolute; left:-1.5rem; top:4px; width:14px; height:14px; border-radius:50%; background:#7F77DD; border:2px solid white; box-shadow:0 0 0 2px #7F77DD; }
.timeline-content { padding-left: 0.25rem; }
.timeline-age { display:inline-block; font-size:0.75rem; font-weight:700; color:#7F77DD; background:#EDE9FE; padding:0.15rem 0.5rem; border-radius:4px; margin-bottom:0.3rem; }
.timeline-content p { font-size:0.875rem; color:#374151; line-height:1.5; }

/* Questions for professional */
.pro-questions-list { padding-left: 1.25rem; }
.pro-questions-list li { font-size:0.9rem; color:#374151; margin-bottom:0.5rem; line-height:1.5; }

/* Pro teaser (Standard) */
.pro-teaser { position:relative; border-radius:14px; overflow:hidden; margin-bottom:1.5rem; border:2px dashed #C4B5FD; }
.pro-teaser-blur { position:absolute; inset:0; padding:2rem; display:flex; flex-direction:column; gap:0.75rem; overflow:hidden; }
.pro-teaser-line { height:14px; background:#E2E8F0; border-radius:4px; filter:blur(3px); }
.pro-teaser-line.short { width:60%; }
.pro-teaser-overlay {
    position:relative; z-index:1; display:flex; flex-direction:column;
    align-items:center; text-align:center;
    background:rgba(255,255,255,0.92); backdrop-filter:blur(4px);
    padding:2rem;
}
.pro-teaser-lock { font-size:2.5rem; margin-bottom:0.75rem; }
.pro-teaser-overlay h3 { font-size:1.1rem; font-weight:700; color:#1A3A5C; margin-bottom:0.75rem; }
.pro-teaser-list { list-style:none; padding:0; margin:0 0 1.25rem; text-align:left; }
.pro-teaser-list li { font-size:0.85rem; color:#374151; margin-bottom:0.35rem; }
.pro-teaser-btn {
    display:inline-block; background:linear-gradient(90deg,#7F77DD,#9B59B6);
    color:white; padding:0.7rem 1.75rem; border-radius:10px; font-weight:700;
    font-size:0.95rem; text-decoration:none; transition:all 0.2s;
}
.pro-teaser-btn:hover { opacity:0.9; transform:translateY(-1px); }
.pro-teaser-note { font-size:0.78rem; color:#9CA3AF; margin-top:0.6rem; }

/* Chat */
.chat-section { border-top-color: #5DCAA5; }
.chat-wrap { margin-top:0; }
.chat-messages {
    min-height:200px; max-height:420px; overflow-y:auto;
    border:1px solid #E5E7EB; border-radius:12px; padding:1rem;
    background:#F8FAFC; margin-bottom:1rem; scroll-behavior:smooth;
}
.chat-empty { text-align:center; padding:2rem; color:#94A3B8; }
.chat-empty-icon { font-size:2rem; margin-bottom:0.5rem; }
.chat-empty p { font-size:0.85rem; }
.chat-msg { display:flex; margin-bottom:0.75rem; }
.chat-msg--q { justify-content:flex-end; }
.chat-msg--a { justify-content:flex-start; }
.chat-bubble {
    max-width:80%; padding:0.625rem 0.875rem; border-radius:12px;
    font-size:0.875rem; line-height:1.55;
}
.chat-bubble--q { background:#7F77DD; color:white; border-bottom-right-radius:3px; }
.chat-bubble--a { background:white; border:1px solid #E5E7EB; color:#1E293B; border-bottom-left-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.chat-bubble--loading { color:#94A3B8; font-style:italic; }

.chat-counters { display:flex; justify-content:space-between; font-size:0.78rem; color:#9CA3AF; margin-bottom:0.5rem; }
.chat-input-row { display:flex; gap:0.5rem; align-items:flex-end; }
.chat-textarea {
    flex:1; padding:0.625rem 0.875rem; border:1.5px solid #E5E7EB;
    border-radius:10px; font-size:0.9rem; resize:none; font-family:inherit;
    transition:border-color 0.15s;
}
.chat-textarea:focus { border-color:#7F77DD; outline:none; }
.chat-send-btn {
    width:42px; height:42px; border-radius:50%; border:none;
    background:linear-gradient(135deg,#7F77DD,#9B59B6); color:white;
    font-size:1.1rem; cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.15s;
}
.chat-send-btn:disabled { background:#E2E8F0; color:#9CA3AF; cursor:not-allowed; }
.chat-send-btn:not(:disabled):hover { transform:scale(1.05); }
.chat-limit-msg { text-align:center; padding:1rem; font-size:0.875rem; color:#9CA3AF; border-top:1px solid #F1F5F9; margin-top:0.5rem; }
.chat-bubble--a strong { font-weight: 600; color: #1E293B; }
.chat-bubble--a .chat-heading { display: block; font-size: 0.9rem; margin-top: 0.5rem; margin-bottom: 0.15rem; }
.chat-bubble--a em { font-style: italic; color: #475569; }
.chat-bubble--a li { margin-left: 1rem; list-style: disc; display: list-item; margin-bottom: 0.2rem; }
.subject-name { font-size: 1.25rem; font-weight: 500; }
.edat { color: var(--text-sec); }
.radar-section { display: flex; justify-content: center; margin-bottom: 2rem; }

.profiles-section, .hypotheses-section, .strengths-section, .professionals-section { margin-bottom: 2rem; }
.profiles-section h2, .hypotheses-section h2, .strengths-section h2, .professionals-section h2 { font-size: 1.25rem; color: var(--blue); margin-bottom: 1rem; }
.section-note { font-size: 0.875rem; color: var(--text-sec); margin-bottom: 1rem; }

.profiles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.profile-bar-card { background: var(--white); border-radius: 10px; padding: 1rem; box-shadow: var(--shadow); }
.pbc-header { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 0.875rem; }
.pbc-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.pbc-fill { height: 100%; border-radius: 3px; transition: width 1s ease; }

.hypothesis-card { background: var(--white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 1rem; border-left: 4px solid var(--teal); }
.hypothesis-card.rank-2 { border-left-color: #7F77DD; }
.hypothesis-card.rank-3 { border-left-color: #EF9F27; }
.hyp-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.hyp-rank { font-size: 0.75rem; background: var(--bg); padding: 0.2rem 0.6rem; border-radius: 4px; color: var(--text-sec); }
.hyp-name { font-weight: 600; font-size: 1.05rem; flex: 1; }
.hyp-compat { font-size: 0.875rem; color: var(--teal); font-weight: 500; }
.hyp-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 0.75rem; }
.hyp-fill { height: 100%; background: var(--teal); border-radius: 2px; }
.hyp-explanation { font-size: 0.9rem; color: var(--text-sec); margin-bottom: 0.75rem; line-height: 1.6; }
.hyp-evidences { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.evidence-tag { font-size: 0.8rem; background: var(--teal-light); color: #0F6E56; padding: 0.2rem 0.6rem; border-radius: 4px; }

.strengths-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.strength-badge { background: #FFF9E6; border: 1px solid #FDE68A; color: #92400E; padding: 0.4rem 0.875rem; border-radius: 20px; font-size: 0.875rem; }

.pro-row { background: var(--white); border-radius: 10px; padding: 1rem 1.25rem; box-shadow: var(--shadow); margin-bottom: 0.75rem; display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.pro-type { font-weight: 500; flex: 1; }
.pro-priority { font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 4px; }
.priority-high .pro-priority { background: #FEE2E2; color: #991B1B; }
.priority-medium .pro-priority { background: #FEF3C7; color: #92400E; }
.priority-low .pro-priority { background: var(--bg); color: var(--text-sec); }
.pro-reason { font-size: 0.875rem; color: var(--text-sec); width: 100%; }

.cta-pdf { text-align: center; margin-top: 2.5rem; padding: 2rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.cta-pdf p { margin-top: 0.75rem; color: var(--text-sec); font-size: 0.9rem; }

.save-report-box { margin-top: 1.5rem; text-align: center; background: linear-gradient(135deg, #EEF2FF, #E0F7F0); border-radius: var(--radius); padding: 2rem; }
.save-report-box h3 { color: var(--blue); margin-bottom: 0.5rem; }
.save-report-box p { color: var(--text-sec); font-size: 0.9rem; margin-bottom: 1.25rem; }
.save-report-box .btn-link { display: block; margin-top: 0.75rem; font-size: 0.875rem; }

/* ===== START FORM ===== */
.field-label { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; margin-bottom: 0.4rem; font-size: 0.9rem; }
.field-status { font-size: 0.8rem; font-weight: 400; }
.field-status.ok { color: #059669; }
.field-status.pending { color: #D97706; }

.start-hint { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 0.6rem 0.875rem; font-size: 0.85rem; color: #78350F; margin-bottom: 0.6rem; }

.char-bar-wrap { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.4rem; }
.char-bar-bg { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.char-bar-fill { height: 100%; width: 0; border-radius: 3px; transition: width 0.3s, background 0.3s; background: #EF4444; }
.char-count-label { font-size: 0.78rem; color: var(--text-sec); white-space: nowrap; }

.concerns-block { background: var(--bg); border-radius: 10px; padding: 1.25rem; margin-bottom: 1.5rem; }
.concerns-title { font-size: 0.875rem; font-weight: 500; color: var(--text-sec); margin-bottom: 0.75rem; }
.concerns-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.concern-chip { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.concern-chip input { display: none; }
.concern-chip span {
    padding: 0.35rem 0.875rem;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--white);
    font-size: 0.8rem;
    transition: all 0.15s;
    user-select: none;
}
.concern-chip input:checked + span { background: #E1F5EE; border-color: var(--teal); color: #0F6E56; font-weight: 500; }
.concern-chip span:hover { border-color: var(--teal); }

.btn-submit-start {
    width: 100%;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    border: none;
    background: #94a3b8;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: not-allowed;
    transition: background 0.3s, transform 0.15s, box-shadow 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-submit-start.ready {
    background: #5DCAA5;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(93,202,165,0.35);
}
.btn-submit-start.ready:hover { background: #3db58a; transform: translateY(-1px); }

.btn-loading-bar { display: inline-block; width: 80px; height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px; overflow: hidden; }
.btn-loading-bar span { display: block; height: 100%; width: 0; background: white; border-radius: 2px; transition: width 0.3s; }

/* ===== MINI RESULT — COMPARE TABLE ===== */
.compare-section { border-top: 1px solid var(--border); padding-top: 1.75rem; margin-bottom: 1.75rem; }
.compare-section h3 { font-size: 1.1rem; color: var(--blue); margin-bottom: 1rem; }
.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.compare-table th { padding: 0.625rem 0.875rem; text-align: center; font-size: 0.85rem; font-weight: 600; }
.compare-table th:first-child { text-align: left; }
.col-std { background: #f0fdf4; color: #0F6E56; border-radius: 8px 8px 0 0; }
.col-pro { background: linear-gradient(135deg, #7F77DD22, #5DCAA522); color: #4B3FC7; border-radius: 8px 8px 0 0; }
.col-price { font-size: 1rem; display: block; font-weight: 700; }
.compare-table td { padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--border); }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table td:first-child { color: var(--text); }
.row-pro-only td:first-child { color: #4B3FC7; font-weight: 500; }
.check-cell { text-align: center; }
.chk { font-size: 1rem; font-weight: 700; }
.chk.yes { color: #059669; }
.chk.no  { color: #9CA3AF; }
.compare-table tr:hover td { background: #fafafa; }