/* Experience EduProd — diagnostic funnel styles */

.experience-hero {
    padding: var(--space-2xl) 0 var(--space-3xl);
}

.experience-subject-grid,
.experience-level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.experience-subject-card,
.experience-level-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.experience-subject-card:hover,
.experience-level-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-medium);
    transform: translateY(-4px);
}

.experience-subject-title,
.experience-level-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.experience-subject-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.experience-subject-card-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-decoration: none;
}

.experience-subject-subcta {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: -0.3rem;
}

.experience-subject-subcta a {
    color: var(--text-tertiary);
    text-decoration: underline;
}

.experience-subject-subcta a:hover {
    color: var(--text-secondary);
}

.accent-physics { border-left: 3px solid var(--physics-primary); }
.accent-chemistry { border-left: 3px solid var(--chemistry-primary); }
.accent-math { border-left: 3px solid var(--math-primary); }
.accent-biology { border-left: 3px solid var(--biology-primary); }
.accent-clat { border-left: 3px solid var(--brand-orange); }

.experience-intro-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
}

.experience-intro-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: var(--space-md);
}

.experience-intro-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: 0.4rem;
}

.experience-intro-strategy {
    color: var(--text-secondary);
    line-height: 1.6;
}

.experience-test-form {
    margin-top: var(--space-lg);
}

.experience-question {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
}

.experience-question-stem {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: var(--space-sm);
    line-height: 1.5;
}

.experience-question-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.experience-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.experience-option:hover {
    background: rgba(255, 255, 255, 0.04);
}

.experience-option input {
    margin-top: 0.25rem;
}

.experience-passage {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
}

.experience-passage-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
}

.experience-passage-body {
    color: var(--text-secondary);
    line-height: 1.7;
}

.experience-results {
    margin-top: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: var(--space-lg);
}

.experience-results-score {
    font-size: var(--text-2xl);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.experience-results-clean {
    color: var(--text-secondary);
}

.experience-results-label {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.experience-weak-concepts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: var(--space-md);
}

.experience-weak-concept-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(244, 123, 32, 0.08);
    border: 1px solid rgba(244, 123, 32, 0.3);
    border-radius: 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.experience-weak-concept-link:hover {
    background: rgba(244, 123, 32, 0.15);
}

.experience-concept-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: var(--space-lg);
    margin-top: var(--space-lg);
}

.experience-concept-summary {
    color: var(--text-secondary);
    line-height: 1.7;
    padding-left: 1.2rem;
    margin-bottom: var(--space-sm);
}

.experience-concept-formulas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--space-sm);
}

.experience-concept-formulas code {
    background: rgba(92, 225, 230, 0.08);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
    color: var(--physics-primary);
    font-size: var(--text-sm);
}

.experience-concept-mistakes-label {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.experience-concept-mistakes ul {
    color: var(--text-secondary);
    padding-left: 1.2rem;
    line-height: 1.6;
}

.experience-subsection-title {
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin: var(--space-lg) 0 var(--space-sm);
}

.experience-concept-explanation {
    padding: 0.75rem 0;
    line-height: 1.6;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.experience-concept-explanation.is-correct strong { color: var(--biology-primary); }
.experience-concept-explanation.is-incorrect strong { color: #f47b20; }

.experience-back-link {
    margin-top: var(--space-lg);
}

.experience-back-link a {
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: var(--text-sm);
}

.experience-back-link a:hover {
    color: var(--text-secondary);
}

.experience-hub-nudge {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
    padding: 0.75rem 1rem;
    margin-bottom: var(--space-md);
    background: rgba(244, 123, 32, 0.06);
    border: 1px solid rgba(244, 123, 32, 0.25);
    border-radius: 10px;
}

.experience-hub-nudge i {
    color: var(--brand-orange);
    margin-right: 0.4rem;
}

.experience-hub-nudge a {
    color: var(--brand-orange);
    font-weight: 600;
    text-decoration: none;
}

.experience-hub-nudge a:hover {
    text-decoration: underline;
}

.experience-question-type{display:inline-flex;margin-bottom:.55rem;padding:.28rem .6rem;border-radius:999px;background:rgba(20,184,166,.10);border:1px solid rgba(20,184,166,.25);font-size:.72rem;font-weight:800;color:#0f766e}.experience-question-image{display:block;max-width:620px;width:100%;height:auto;margin:.8rem 0 1rem;border-radius:14px;border:1px solid rgba(148,163,184,.35);background:#fff}.experience-concept-mistakes ol{margin:.55rem 0 0 1.2rem}.experience-concept-mistakes ol li{margin:.35rem 0}


/* NEET free diagnostic: 3-column exam-style layout */
.experience-diagnostic-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 260px;
    gap: 1.15rem;
    align-items: start;
    margin-top: var(--space-lg);
}
.experience-question-nav,
.experience-actions-panel {
    position: sticky;
    top: 96px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 1rem;
}
.experience-panel-kicker {
    color: var(--text-tertiary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .7rem;
}
.experience-question-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem;
}
.experience-question-nav-btn {
    min-height: 38px;
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
    background: rgba(255,255,255,.035);
    color: var(--text-secondary);
    font-weight: 800;
    cursor: pointer;
}
.experience-question-nav-btn:hover,
.experience-question-nav-btn:focus-visible {
    border-color: var(--primary);
    color: var(--text-primary);
}
.experience-question-nav-btn.is-active {
    border-color: var(--primary);
    outline: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
    color: var(--text-primary);
}
.experience-question-nav-btn.is-answered {
    background: rgba(20,184,166,.13);
    border-color: rgba(20,184,166,.42);
    color: #5eead4;
}
.experience-question-nav-btn.is-active.is-answered {
    outline: 2px solid rgba(94,234,212,.28);
}
.experience-question-stage {
    min-width: 0;
}
.experience-test-form-three-col .experience-question {
    display: none;
    margin: 0;
    padding: clamp(1rem, 2vw, 1.45rem);
    border-radius: 16px;
}
.experience-test-form-three-col .experience-question.is-active {
    display: block;
}
.experience-test-form-three-col .experience-question-stem {
    font-size: 1.02rem;
    line-height: 1.65;
}
.experience-test-form-three-col .experience-option {
    border: 1px solid var(--border-subtle);
    background: rgba(255,255,255,.025);
    padding: .78rem .85rem;
}
.experience-test-form-three-col .experience-option:hover {
    border-color: rgba(94,234,212,.35);
    background: rgba(94,234,212,.055);
}
.experience-stage-nav {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    margin-top: .9rem;
}
.experience-stage-nav .btn-secondary {
    min-width: 122px;
    justify-content: center;
}
.experience-actions-panel h3 {
    margin: 0 0 .5rem;
    font-size: 1rem;
    line-height: 1.35;
}
.experience-actions-copy {
    color: var(--text-secondary);
    font-size: .84rem;
    line-height: 1.55;
    margin: 0 0 .9rem;
}
.experience-progress-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem 0;
    border-top: 1px solid var(--border-subtle);
}
.experience-progress-box span {
    color: var(--text-tertiary);
    font-size: .76rem;
}
.experience-progress-box strong {
    color: var(--text-primary);
    font-size: .84rem;
}
.experience-submit-btn {
    width: 100%;
    justify-content: center;
    margin-top: .8rem;
}
.experience-actions-panel small {
    display: block;
    color: var(--text-tertiary);
    line-height: 1.45;
    margin-top: .75rem;
}
@media (max-width: 980px) {
    .experience-diagnostic-layout { grid-template-columns: 1fr; }
    .experience-question-nav,
    .experience-actions-panel { position: static; }
    .experience-question-nav-grid { grid-template-columns: repeat(8, minmax(38px, 1fr)); }
    .experience-actions-panel { order: 3; }
}
@media (max-width: 560px) {
    .experience-question-nav-grid { grid-template-columns: repeat(4, minmax(38px, 1fr)); }
    .experience-stage-nav .btn-secondary { min-width: 0; flex: 1; }
}