.page-head {
    margin: 0 0 var(--space-8)
}

.page-head h1 {
    font-size: var(--fs-3xl);
    color: var(--primary-blue-dark)
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0 0 var(--space-6)
}

.chip {
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    color: var(--text-body);
    background: var(--surface-0, #FFFFFF);
    font-weight: 600;
    transition: var(--transition-fast)
}

.chip.active, .chip:hover {
    color: var(--background);
    background: var(--primary-blue-dark);
    border-color: var(--primary-blue-dark)
}

.scenario-grid {
    display: grid;
    gap: var(--space-4)
}

.scenario-card {
    padding: var(--space-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-0, #FFFFFF);
    box-shadow: var(--shadow-static)
}

.scenario-card .badge {
    margin-bottom: var(--space-4)
}

.scenario-card h3 {
    font-size: var(--fs-xl);
    margin: 0 0 var(--space-4);
    color: var(--primary-blue-dark)
}

.scenario-card p {
    margin: 0;
    line-height: 1.75;
    color: var(--text-body)
}

.scenario-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6)
}

.option-btn {
    padding: var(--space-4) var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    text-align: right;
    color: var(--text-dark);
    background: var(--gray-50);
    font-weight: 600;
    transition: var(--transition-fast)
}

.option-btn:hover {
    border-color: var(--primary-blue);
    background: var(--surface-0, #FFFFFF)
}

.option-btn.correct {
    color: #1c7a45;
    background: #e7f9ef;
    border-color: #b6ecca
}

.option-btn.wrong {
    color: #8a2c2f;
    background: #fdecec;
    border-color: #f6c6c7
}

.option-btn:disabled {
    cursor: default
}

.scenario-feedback {
    display: none;
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--gray-50)
}

.scenario-feedback.show {
    display: block
}

.scenario-feedback.correct {
    color: #1c7a45;
    background: #e7f9ef
}

.scenario-feedback.wrong {
    color: #855406;
    background: #fdf3e0
}

.table-wrap {
    overflow-x: auto;
    margin-top: var(--space-6)
}