/* ═══════════════════════════════════════════════════════════════════════════════
   CHART.JS STYLING & CHART-SPECIFIC COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────────
   CHART CONTAINERS
   ───────────────────────────────────────────────────────────────────────────────── */
.chart-container {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    margin-bottom: var(--space-xl);
}

.chart-container-full {
    width: 100%;
}

.chart-container-half {
    width: calc(50% - var(--space-md));
}

.chart-wrapper {
    position: relative;
    min-height: 300px;
}

.chart-wrapper canvas {
    max-width: 100%;
}

/* Chart Header */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--gray-200);
}

.chart-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.chart-subtitle {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-top: var(--space-xs);
}

.chart-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    background: rgba(77, 163, 255, 0.1);
    color: var(--electric-blue);
}

.chart-badge.success {
    background: rgba(82, 214, 129, 0.1);
    color: var(--leaf-green);
}

.chart-badge.warning {
    background: rgba(255, 213, 94, 0.1);
    color: #c9a227;
}

.chart-badge.danger {
    background: rgba(242, 107, 107, 0.1);
    color: var(--coral-female);
}

/* Chart Footer */
.chart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--gray-200);
    font-size: 0.875rem;
    color: var(--gray-500);
}

.chart-note {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.chart-note i {
    color: var(--gray-400);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   CHART GRID LAYOUTS
   ───────────────────────────────────────────────────────────────────────────────── */
.charts-grid {
    display: grid;
    gap: var(--space-xl);
}

.charts-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.charts-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.charts-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.charts-grid-2-1 {
    grid-template-columns: 2fr 1fr;
}

.charts-grid-1-2 {
    grid-template-columns: 1fr 2fr;
}

@media (max-width: 992px) {
    .charts-grid-2,
    .charts-grid-3,
    .charts-grid-4,
    .charts-grid-2-1,
    .charts-grid-1-2 {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   STAT BOXES FOR CHART SECTIONS
   ───────────────────────────────────────────────────────────────────────────────── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.stat-box {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    text-align: center;
    transition: all var(--transition-base);
}

.stat-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.stat-box-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-lg);
    font-size: 1.25rem;
}

.stat-box-icon.blue {
    background: rgba(77, 163, 255, 0.15);
    color: var(--electric-blue);
}

.stat-box-icon.yellow {
    background: rgba(255, 213, 94, 0.15);
    color: #c9a227;
}

.stat-box-icon.green {
    background: rgba(82, 214, 129, 0.15);
    color: var(--leaf-green);
}

.stat-box-icon.purple {
    background: rgba(180, 144, 255, 0.15);
    color: var(--purple-splash);
}

.stat-box-icon.coral {
    background: rgba(242, 107, 107, 0.15);
    color: var(--coral-female);
}

.stat-box-icon.teal {
    background: rgba(42, 168, 161, 0.15);
    color: var(--teal-male);
}

.stat-box-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.stat-box-label {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.stat-box-change {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
}

.stat-box-change.positive {
    background: rgba(82, 214, 129, 0.1);
    color: var(--leaf-green);
}

.stat-box-change.negative {
    background: rgba(242, 107, 107, 0.1);
    color: var(--coral-female);
}

@media (max-width: 992px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .stats-row {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   LEGEND STYLES
   ───────────────────────────────────────────────────────────────────────────────── */
.custom-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: center;
    margin-top: var(--space-lg);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--gray-700);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-color.electric-blue { background: var(--electric-blue); }
.legend-color.citrus-pop { background: var(--citrus-pop); }
.legend-color.leaf-green { background: var(--leaf-green); }
.legend-color.purple-splash { background: var(--purple-splash); }
.legend-color.peach-pop { background: var(--peach-pop); }
.legend-color.coral { background: var(--coral-female); }
.legend-color.teal { background: var(--teal-male); }

/* ─────────────────────────────────────────────────────────────────────────────────
   DATA TABLES
   ───────────────────────────────────────────────────────────────────────────────── */
.data-table-container {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.data-table thead {
    background: var(--gray-100);
}

.data-table th {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    border-bottom: 2px solid var(--gray-200);
    white-space: nowrap;
}

.data-table td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-700);
}

.data-table tbody tr:hover {
    background: var(--gray-50);
}

.data-table .value-cell {
    font-weight: 600;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.data-table .significant {
    color: var(--leaf-green);
}

.data-table .not-significant {
    color: var(--gray-500);
}

.data-table .highlight-row {
    background: rgba(77, 163, 255, 0.05);
}

/* Table Badges */
.table-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
}

.table-badge.excellent {
    background: rgba(82, 214, 129, 0.15);
    color: var(--leaf-green);
}

.table-badge.good {
    background: rgba(77, 163, 255, 0.15);
    color: var(--electric-blue);
}

.table-badge.acceptable {
    background: rgba(255, 213, 94, 0.15);
    color: #c9a227;
}

.table-badge.poor {
    background: rgba(242, 107, 107, 0.15);
    color: var(--coral-female);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   INSIGHT CARDS
   ───────────────────────────────────────────────────────────────────────────────── */
.insight-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--electric-blue);
    margin-bottom: var(--space-lg);
}

.insight-card.success {
    border-left-color: var(--leaf-green);
    background: rgba(82, 214, 129, 0.03);
}

.insight-card.warning {
    border-left-color: var(--citrus-pop);
    background: rgba(255, 213, 94, 0.03);
}

.insight-card.info {
    border-left-color: var(--purple-splash);
    background: rgba(180, 144, 255, 0.03);
}

.insight-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 163, 255, 0.1);
    color: var(--electric-blue);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.insight-card.success .insight-icon {
    background: rgba(82, 214, 129, 0.1);
    color: var(--leaf-green);
}

.insight-card.warning .insight-icon {
    background: rgba(255, 213, 94, 0.1);
    color: #c9a227;
}

.insight-card.info .insight-icon {
    background: rgba(180, 144, 255, 0.1);
    color: var(--purple-splash);
}

.insight-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-sm);
}

.insight-text {
    font-size: 0.9375rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   KEY FINDINGS BOXES
   ───────────────────────────────────────────────────────────────────────────────── */
.findings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.finding-box {
    display: flex;
    gap: var(--space-md);
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-base);
}

.finding-box:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.finding-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 1.125rem;
}

.finding-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.finding-content p {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
}

@media (max-width: 768px) {
    .findings-grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   STATISTICAL RESULTS DISPLAY
   ───────────────────────────────────────────────────────────────────────────────── */
.stat-result {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--gray-200);
}

.stat-result:last-child {
    border-bottom: none;
}

.stat-result-label {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--gray-700);
}

.stat-result-value {
    font-size: 1rem;
    font-weight: 600;
    font-family: 'SF Mono', 'Consolas', monospace;
    color: var(--gray-900);
}

.stat-result-badge {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   COMPARISON BARS
   ───────────────────────────────────────────────────────────────────────────────── */
.comparison-bar {
    margin-bottom: var(--space-lg);
}

.comparison-bar-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.comparison-bar-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
}

.comparison-bar-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
}

.comparison-bar-track {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.comparison-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 1s ease-out;
}

.comparison-bar-fill.blue { background: var(--electric-blue); }
.comparison-bar-fill.yellow { background: var(--citrus-pop); }
.comparison-bar-fill.green { background: var(--leaf-green); }
.comparison-bar-fill.purple { background: var(--purple-splash); }
.comparison-bar-fill.coral { background: var(--coral-female); }
.comparison-bar-fill.teal { background: var(--teal-male); }

/* ─────────────────────────────────────────────────────────────────────────────────
   TOOLTIPS
   ───────────────────────────────────────────────────────────────────────────────── */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.75rem;
    background: var(--gray-200);
    color: var(--gray-600);
    border-radius: 50%;
    cursor: help;
    transition: all var(--transition-fast);
}

.tooltip-icon:hover {
    background: var(--electric-blue);
    color: var(--white);
}

.tooltip-content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-sm) var(--space-md);
    background: var(--dark);
    color: var(--white);
    font-size: 0.75rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: var(--z-tooltip);
    margin-bottom: var(--space-sm);
}

.tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--dark);
}

.tooltip-wrapper:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   RESPONSIVE CHART ADJUSTMENTS
   ───────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .chart-container {
        padding: var(--space-lg);
    }
    
    .chart-wrapper {
        min-height: 250px;
    }
    
    .chart-header {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .chart-footer {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }
    
    .custom-legend {
        gap: var(--space-md);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   DEMOGRAPHICS SECTION SPECIFIC STYLES
   ───────────────────────────────────────────────────────────────────────────────── */

/* Demographics Stats Grid */
.demo-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.demo-stat-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-lg) var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-base);
}

.demo-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.demo-stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 1.5rem;
    color: var(--white);
    flex-shrink: 0;
}

.demo-stat-content {
    display: flex;
    flex-direction: column;
}

.demo-stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1;
}

.demo-stat-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-top: var(--space-xs);
}

.demo-stat-detail {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 2px;
}

/* Charts 2x2 Grid */
.charts-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

/* Chart Card Styling */
.chart-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    transition: all var(--transition-base);
}

.chart-card:hover {
    box-shadow: var(--shadow-lg);
}

.chart-card .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--gray-200);
}

.chart-card .chart-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.chart-card .chart-title i {
    color: var(--electric-blue);
    font-size: 1rem;
}

.chart-card .chart-container {
    position: relative;
    height: 280px;
    padding: 0;
    box-shadow: none;
    border: none;
    margin-bottom: var(--space-md);
}

.chart-card .chart-container-doughnut {
    height: 320px;
}

/* Larger gender chart specifically */
.chart-card .chart-container-doughnut.gender-chart {
    height: 350px;
}

/* Chart Animation Classes */
.chart-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.chart-animate.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays */
.chart-card:nth-child(1) .chart-animate { transition-delay: 0s; }
.chart-card:nth-child(2) .chart-animate { transition-delay: 0.15s; }
.chart-card:nth-child(3) .chart-animate { transition-delay: 0.3s; }
.chart-card:nth-child(4) .chart-animate { transition-delay: 0.45s; }

/* Charts Row - Flexible row for multiple charts */
.charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-lg);
}

.charts-row .chart-wrapper {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    min-height: 350px;
}

.charts-row .chart-wrapper.medium {
    min-height: 320px;
}

.charts-row .chart-wrapper.large {
    grid-column: 1 / -1;
    min-height: 450px;
}

.charts-row .chart-wrapper canvas {
    max-height: 300px;
}

.charts-row .chart-wrapper.large canvas {
    max-height: 380px;
}

.charts-row .chart-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-md);
    text-align: center;
}

.charts-row .chart-note {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-align: center;
    margin-top: var(--space-sm);
    font-style: italic;
}

.charts-row .chart-insight {
    margin-top: var(--space-md);
}

.charts-row .chart-insight.success {
    border-left-color: var(--leaf-green);
}

.charts-row .chart-insight.success i {
    color: var(--leaf-green);
}

@media (max-width: 768px) {
    .charts-row {
        grid-template-columns: 1fr;
    }
    
    .charts-row .chart-wrapper.large {
        grid-column: auto;
    }
}

/* Chart Insight */
.chart-insight {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--electric-blue);
}

.chart-insight i {
    color: var(--citrus-pop);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.chart-insight p {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

.chart-insight strong {
    color: var(--gray-800);
}

/* Implications Card */
.implications-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
}

.implications-card h3 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--electric-blue);
}

.implications-card h3 i {
    color: var(--electric-blue);
}

.implications-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.implication-item {
    display: flex;
    gap: var(--space-md);
}

.implication-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(82, 214, 129, 0.15);
    color: var(--leaf-green);
    font-size: 0.875rem;
}

.implication-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.implication-content p {
    font-size: 0.8125rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Responsive adjustments for demographics */
@media (max-width: 1200px) {
    .demo-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .implications-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .charts-grid-2x2 {
        grid-template-columns: 1fr;
    }
    
    .chart-card .chart-container {
        height: 300px;
    }
    
    .chart-card .chart-container-doughnut {
        height: 280px;
    }
}

@media (max-width: 768px) {
    .demo-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .demo-stat-card {
        padding: var(--space-md);
    }
    
    .demo-stat-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .demo-stat-number {
        font-size: 1.5rem;
    }
    
    .implications-grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   EDA SECTION SPECIFIC STYLES
   ───────────────────────────────────────────────────────────────────────────────── */

/* EDA Subsection */
.eda-subsection {
    margin-bottom: var(--space-3xl);
}

.subsection-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-sm);
}

.subsection-title i {
    color: var(--electric-blue);
}

.subsection-description {
    font-size: 0.9375rem;
    color: var(--gray-600);
    margin-bottom: var(--space-xl);
}

/* Wide chart card */
.chart-card-wide {
    margin-bottom: var(--space-xl);
}

/* Top Attributes Grid */
.top-attributes-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.top-attribute-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--electric-blue);
    transition: all var(--transition-base);
}

.top-attribute-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.top-rank {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}

.top-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.top-score {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.top-score span {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--gray-500);
}

.top-content p {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin: 0;
    line-height: 1.4;
}

/* VM Insights Grid */
.vm-insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.vm-insight-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    text-align: center;
    transition: all var(--transition-base);
}

.vm-insight-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.vm-insight-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto var(--space-md);
    color: var(--white);
    font-size: 1.5rem;
}

.vm-insight-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.vm-score {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--electric-blue);
    margin-bottom: var(--space-sm);
}

.vm-insight-card p {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* EDA Summary Card */
.eda-summary-card {
    background: linear-gradient(135deg, rgba(77, 163, 255, 0.05) 0%, rgba(82, 214, 129, 0.05) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border: 1px solid var(--gray-200);
}

.eda-summary-card h3 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-lg);
}

.eda-summary-card h3 i {
    color: var(--electric-blue);
}

.eda-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.eda-summary-item {
    display: flex;
    gap: var(--space-md);
}

.summary-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(82, 214, 129, 0.15);
    color: var(--leaf-green);
    font-size: 0.875rem;
}

.summary-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.summary-content p {
    font-size: 0.8125rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* EDA Responsive */
@media (max-width: 1200px) {
    .top-attributes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .vm-insights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .eda-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .top-attributes-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .vm-insights-grid {
        grid-template-columns: 1fr;
    }
    
    .eda-summary-grid {
        grid-template-columns: 1fr;
    }
    
    .subsection-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    .top-attributes-grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   VALIDATION SECTION SPECIFIC STYLES
   ───────────────────────────────────────────────────────────────────────────────── */

.validation-subsection {
    margin-bottom: var(--space-3xl);
}

/* Alpha Cards Grid */
.alpha-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.alpha-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
}

.alpha-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.alpha-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-700);
}

.alpha-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
}

.alpha-badge.alpha-good {
    background: rgba(82, 214, 129, 0.15);
    color: var(--leaf-green);
}

.alpha-badge.alpha-acceptable {
    background: rgba(255, 213, 94, 0.15);
    color: #b8941e;
}

.alpha-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-md);
}

.alpha-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-md);
}

.alpha-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--leaf-green), var(--teal-male));
    border-radius: var(--radius-full);
    transition: width 1s ease;
}

.alpha-fill.alpha-fill-yellow {
    background: linear-gradient(90deg, var(--citrus-pop), var(--peach-pop));
}

.alpha-interpretation {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.alpha-interpretation i {
    color: var(--electric-blue);
    margin-top: 2px;
}

/* Interpretation Guide */
.interpretation-guide {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border: 1px solid var(--gray-200);
}

.interpretation-guide h4 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: var(--space-md);
}

.interpretation-guide h4 i {
    color: var(--electric-blue);
}

.guide-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.guide-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.guide-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.guide-badge.excellent { background: rgba(82, 214, 129, 0.2); color: var(--leaf-green); }
.guide-badge.good { background: rgba(77, 163, 255, 0.2); color: var(--electric-blue); }
.guide-badge.acceptable { background: rgba(42, 168, 161, 0.2); color: var(--teal-male); }
.guide-badge.questionable { background: rgba(255, 213, 94, 0.2); color: #b8941e; }
.guide-badge.poor { background: rgba(242, 107, 107, 0.2); color: var(--coral-female); }

/* Bartlett's Results */
.bartlett-results {
    padding: var(--space-lg);
}

.bartlett-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--gray-200);
}

.bartlett-item:last-child {
    border-bottom: none;
}

.bartlett-scale {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.9375rem;
}

.bartlett-stats {
    display: flex;
    gap: var(--space-lg);
}

.bartlett-chi, .bartlett-df {
    font-size: 0.8125rem;
    color: var(--gray-600);
    font-family: 'SF Mono', 'Consolas', monospace;
}

.bartlett-p {
    font-size: 0.8125rem;
    font-weight: 600;
}

.bartlett-p.significant {
    color: var(--leaf-green);
}

/* Split-Half Table */
.split-half-table {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    overflow-x: auto;
}

/* Validation Summary */
.validation-summary-card {
    background: linear-gradient(135deg, rgba(82, 214, 129, 0.05) 0%, rgba(77, 163, 255, 0.05) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border: 1px solid var(--gray-200);
}

.validation-summary-card h3 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-lg);
}

.validation-summary-card h3 i {
    color: var(--leaf-green);
}

.validation-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.validation-summary-item {
    display: flex;
    gap: var(--space-md);
}

.validation-summary-item.success .vs-icon {
    background: rgba(82, 214, 129, 0.15);
    color: var(--leaf-green);
}

.vs-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
}

.vs-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.vs-content p {
    font-size: 0.8125rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.4;
}

/* Validation Responsive */
@media (max-width: 1200px) {
    .alpha-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .validation-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .alpha-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .validation-summary-grid {
        grid-template-columns: 1fr;
    }
    
    .bartlett-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
    
    .bartlett-stats {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }
    
    .guide-items {
        flex-direction: column;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   FACTOR ANALYSIS SECTION SPECIFIC STYLES
   ───────────────────────────────────────────────────────────────────────────────── */

.fa-subsection {
    margin-bottom: var(--space-3xl);
}

/* FA Overview Grid */
.fa-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
}

.fa-overview-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
}

.fa-overview-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    color: var(--white);
    font-size: 1.75rem;
    flex-shrink: 0;
}

.fa-overview-content h4 {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-500);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fa-overview-stat {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.fa-overview-content p {
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin: 0;
}

/* Factors Grid */
.factors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.factors-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Factor Card */
.factor-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    border-top: 4px solid var(--electric-blue);
}

.factor-card.factor-1 { border-top-color: var(--electric-blue); }
.factor-card.factor-2 { border-top-color: var(--purple-splash); }
.factor-card.factor-3 { border-top-color: var(--citrus-pop); }
.factor-card.factor-vm-1 { border-top-color: var(--leaf-green); }
.factor-card.factor-vm-2 { border-top-color: var(--peach-pop); }

.factor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.factor-number {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.factor-variance {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--electric-blue);
    background: rgba(77, 163, 255, 0.1);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.factor-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.factor-description {
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin-bottom: var(--space-lg);
}

.factor-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.factor-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--gray-700);
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--gray-100);
}

.factor-item:last-child {
    border-bottom: none;
}

.loading {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: 'SF Mono', 'Consolas', monospace;
}

.loading.high {
    background: rgba(82, 214, 129, 0.15);
    color: var(--leaf-green);
}

.loading.medium {
    background: rgba(77, 163, 255, 0.15);
    color: var(--electric-blue);
}

.loading.low {
    background: rgba(255, 213, 94, 0.15);
    color: #b8941e;
}

/* FA Summary Card */
.fa-summary-card {
    background: linear-gradient(135deg, rgba(77, 163, 255, 0.03) 0%, rgba(180, 144, 255, 0.03) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border: 1px solid var(--gray-200);
}

.fa-summary-card h3 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-xl);
}

.fa-summary-card h3 i {
    color: var(--electric-blue);
}

.fa-summary-visual {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.fa-construct {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.construct-header {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--electric-blue);
}

.construct-factors {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.construct-factor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
}

.construct-factor.f1 { background: rgba(77, 163, 255, 0.1); }
.construct-factor.f2 { background: rgba(180, 144, 255, 0.1); }
.construct-factor.f3 { background: rgba(255, 213, 94, 0.1); }
.construct-factor.vm1 { background: rgba(82, 214, 129, 0.1); }
.construct-factor.vm2 { background: rgba(255, 158, 140, 0.1); }

.cf-name {
    font-weight: 500;
    color: var(--gray-800);
}

.cf-items {
    font-weight: 600;
    color: var(--gray-600);
}

.fa-key-insight {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--white);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--citrus-pop);
}

.fa-key-insight i {
    color: var(--citrus-pop);
    font-size: 1.25rem;
    margin-top: 2px;
}

.fa-key-insight p {
    font-size: 0.9375rem;
    color: var(--gray-700);
    margin: 0;
    line-height: 1.6;
}

/* FA Responsive */
@media (max-width: 1200px) {
    .fa-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .factors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .fa-overview-grid {
        grid-template-columns: 1fr;
    }
    
    .factors-grid,
    .factors-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .fa-summary-visual {
        grid-template-columns: 1fr;
    }
    
    .fa-overview-card {
        flex-direction: column;
        text-align: center;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   INFERENTIAL STATISTICS SECTION STYLES
   ───────────────────────────────────────────────────────────────────────────────── */

.inf-subsection {
    margin-bottom: var(--space-3xl);
}

/* Findings Banner */
.inf-findings-banner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
}

.inf-finding {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
}

.inf-finding.significant i {
    color: var(--leaf-green);
    font-size: 1.5rem;
}

.inf-finding.not-significant i {
    color: var(--gray-400);
    font-size: 1.5rem;
}

.inf-finding-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.inf-finding-content p {
    font-size: 0.8125rem;
    color: var(--gray-600);
    margin: 0;
}

/* T-Test Results Card */
.ttest-results-card,
.chisq-results-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    overflow-x: auto;
}

.table-insight {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--electric-blue);
}

.table-insight i {
    color: var(--electric-blue);
    margin-top: 2px;
}

.table-insight p {
    font-size: 0.875rem;
    color: var(--gray-700);
    margin: 0;
}

/* Result Badges */
.result-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.result-badge.sig {
    background: rgba(82, 214, 129, 0.15);
    color: var(--leaf-green);
}

.result-badge.ns {
    background: rgba(108, 117, 125, 0.15);
    color: var(--gray-600);
}

/* ANOVA Results Grid */
.anova-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.anova-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
}

.anova-card.significant {
    border-left: 4px solid var(--leaf-green);
}

.anova-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.anova-factor {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
}

.anova-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-full);
}

.anova-badge.sig {
    background: rgba(82, 214, 129, 0.15);
    color: var(--leaf-green);
}

.anova-badge.ns {
    background: rgba(108, 117, 125, 0.15);
    color: var(--gray-600);
}

.anova-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.anova-stat {
    text-align: center;
    padding: var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-md);
}

.stat-label {
    display: block;
    font-size: 0.6875rem;
    color: var(--gray-500);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
}

.stat-value.highlight {
    color: var(--leaf-green);
}

.anova-insight {
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.anova-insight p {
    margin: 0;
}

.anova-detail {
    font-size: 0.8125rem;
    color: var(--gray-600);
    line-height: 1.5;
}

.anova-detail p {
    margin: 0;
}

/* Inferential Summary Card */
.inf-summary-card {
    background: linear-gradient(135deg, rgba(77, 163, 255, 0.05) 0%, rgba(82, 214, 129, 0.05) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border: 1px solid var(--gray-200);
}

.inf-summary-card h3 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-xl);
}

.inf-summary-card h3 i {
    color: var(--electric-blue);
}

.inf-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.inf-summary-item {
    display: flex;
    gap: var(--space-md);
}

.inf-summary-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    font-size: 1.125rem;
}

.inf-summary-icon.green {
    background: rgba(82, 214, 129, 0.15);
    color: var(--leaf-green);
}

.inf-summary-icon.blue {
    background: rgba(77, 163, 255, 0.15);
    color: var(--electric-blue);
}

.inf-summary-icon.purple {
    background: rgba(180, 144, 255, 0.15);
    color: var(--purple-splash);
}

.inf-summary-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.inf-summary-content p {
    font-size: 0.8125rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Inferential Responsive */
@media (max-width: 1200px) {
    .inf-findings-banner {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .anova-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .inf-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .inf-findings-banner,
    .anova-results-grid,
    .inf-summary-grid {
        grid-template-columns: 1fr;
    }
    
    .anova-stats {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   REGRESSION SECTION STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Path Model Diagram */
.path-model-container {
    margin-bottom: var(--space-2xl);
}

.path-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    padding: var(--space-2xl);
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.path-predictors, .path-outcomes {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.path-box {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    text-align: center;
    min-width: 200px;
}

.predictor-box {
    background: linear-gradient(135deg, rgba(77, 163, 255, 0.1), rgba(77, 163, 255, 0.2));
    border: 2px solid var(--electric-blue);
}

.predictor-box.highlight-box {
    background: linear-gradient(135deg, rgba(82, 214, 129, 0.15), rgba(82, 214, 129, 0.25));
    border: 2px solid var(--leaf-green);
    box-shadow: 0 4px 20px rgba(82, 214, 129, 0.3);
}

.outcome-box {
    background: linear-gradient(135deg, rgba(180, 144, 255, 0.1), rgba(180, 144, 255, 0.2));
    border: 2px solid var(--purple-splash);
}

.path-label {
    display: block;
    font-weight: 600;
    color: var(--gray-900);
    font-size: 0.9375rem;
}

.sig-badge {
    display: inline-block;
    margin-top: var(--space-xs);
    padding: 2px 8px;
    background: var(--leaf-green);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
}

.r2-badge {
    display: inline-block;
    margin-top: var(--space-xs);
    padding: 2px 8px;
    background: var(--purple-splash);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
}

.path-arrows {
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.arrow-line {
    width: 60px;
    height: 3px;
    background: var(--gray-300);
    position: relative;
}

.arrow-line::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--gray-300);
}

.arrow-line.highlight-arrow {
    background: var(--leaf-green);
}

.arrow-line.highlight-arrow::after {
    border-left-color: var(--leaf-green);
}

/* Regression Models Grid */
.regression-models-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.regression-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.regression-header {
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
    border-bottom: 1px solid var(--gray-200);
}

.regression-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-sm);
}

.regression-header h4 i {
    color: var(--electric-blue);
    margin-right: var(--space-xs);
}

.model-fit {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.fit-stat {
    font-size: 0.8125rem;
    color: var(--gray-600);
    padding: 2px 8px;
    background: var(--white);
    border-radius: var(--radius-md);
}

.fit-stat.sig {
    background: rgba(82, 214, 129, 0.15);
    color: var(--leaf-green);
    font-weight: 600;
}

.regression-table-container {
    padding: var(--space-lg);
    overflow-x: auto;
}

.regression-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.regression-table th {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    background: var(--gray-50);
    color: var(--gray-700);
    font-weight: 600;
    border-bottom: 2px solid var(--gray-200);
}

.regression-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
}

.regression-table tr.highlight-row {
    background: rgba(82, 214, 129, 0.08);
}

.regression-table tr.highlight-row td {
    font-weight: 600;
    color: var(--gray-900);
}

.sig-ns {
    color: var(--gray-400);
    font-size: 0.75rem;
}

.sig-yes {
    color: var(--leaf-green);
    font-weight: 700;
}

/* Diagnostics */
.diagnostics-container {
    margin-bottom: var(--space-2xl);
}

.diagnostics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.diagnostic-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.diagnostic-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: rgba(82, 214, 129, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.diagnostic-icon i {
    font-size: 1.25rem;
    color: var(--leaf-green);
}

.diagnostic-info h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.diagnostic-info p {
    font-size: 0.8125rem;
    color: var(--gray-600);
    margin-bottom: var(--space-xs);
}

.diagnostic-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
}

.diagnostic-status.pass {
    background: rgba(82, 214, 129, 0.15);
    color: var(--leaf-green);
}

/* Regression Findings */
.regression-findings {
    margin-bottom: var(--space-2xl);
}

.findings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.finding-card {
    padding: var(--space-xl);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--gray-300);
}

.finding-card.primary {
    border-left-color: var(--leaf-green);
    background: linear-gradient(135deg, rgba(82, 214, 129, 0.05), rgba(82, 214, 129, 0.1));
}

.finding-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.finding-card.primary .finding-icon {
    background: rgba(82, 214, 129, 0.2);
}

.finding-icon i {
    color: var(--gray-600);
}

.finding-card.primary .finding-icon i {
    color: var(--leaf-green);
}

.finding-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-sm);
}

.finding-card p {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CLUSTERING SECTION STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Cluster Overview */
.cluster-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.cluster-stat-card {
    text-align: center;
    padding: var(--space-xl);
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.cluster-stat-card.highlight {
    background: linear-gradient(135deg, var(--leaf-green), #3cc96e);
    color: white;
}

.cluster-stat-card.highlight h3,
.cluster-stat-card.highlight p {
    color: white;
}

.cluster-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-lg);
    background: rgba(77, 163, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cluster-stat-card.highlight .cluster-icon {
    background: rgba(255, 255, 255, 0.2);
}

.cluster-icon i {
    font-size: 1.5rem;
    color: var(--electric-blue);
}

.cluster-stat-card.highlight .cluster-icon i {
    color: white;
}

.cluster-stat-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.cluster-stat-card p {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
}

/* Segments Container */
.segments-container {
    margin-bottom: var(--space-2xl);
}

.segments-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.segment-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.segment-header {
    padding: var(--space-lg);
    color: white;
}

.segment-low .segment-header {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.segment-high .segment-header {
    background: linear-gradient(135deg, var(--leaf-green), #3cc96e);
}

.segment-number {
    display: inline-block;
    padding: 2px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.segment-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.segment-count {
    font-size: 0.875rem;
    opacity: 0.9;
}

.segment-profile {
    padding: var(--space-lg);
}

.segment-description {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.profile-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.profile-bar {
    display: grid;
    grid-template-columns: 140px 1fr 80px;
    align-items: center;
    gap: var(--space-md);
}

.bar-label {
    font-size: 0.8125rem;
    color: var(--gray-700);
    font-weight: 500;
}

.bar-track {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.6s ease;
}

.bar-fill.low {
    background: linear-gradient(90deg, #6b7280, #9ca3af);
}

.bar-fill.high {
    background: linear-gradient(90deg, var(--leaf-green), #6ee7b7);
}

.bar-value {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: right;
}

.segment-low .bar-value {
    color: #6b7280;
}

.segment-high .bar-value {
    color: var(--leaf-green);
}

/* Cluster Strategic Insights */
.cluster-insights-container {
    margin-bottom: var(--space-2xl);
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.insight-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: var(--space-md);
    transition: all 0.3s ease;
    border-left: 4px solid var(--gray-200);
}

.insight-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.insight-card.insight-key {
    grid-column: span 2;
    border-left-color: var(--electric-blue);
    background: linear-gradient(135deg, rgba(77, 163, 255, 0.05) 0%, var(--white) 100%);
}

.insight-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.insight-icon i {
    font-size: 1.25rem;
    color: var(--electric-blue);
}

.insight-card.insight-key .insight-icon {
    background: rgba(77, 163, 255, 0.1);
}

.insight-content h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.insight-content p {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.6;
}

.insight-content strong {
    color: var(--gray-800);
}

.segment-strategies {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.segment-strategies > h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.segment-strategies > h4 i {
    color: var(--electric-blue);
}

.strategies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.strategy-card {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
}

.strategy-card.strategy-low {
    border-top: 3px solid #9ca3af;
}

.strategy-card.strategy-high {
    border-top: 3px solid var(--leaf-green);
}

.strategy-card h5 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.strategy-card.strategy-low h5 i {
    color: #6b7280;
}

.strategy-card.strategy-high h5 i {
    color: var(--leaf-green);
}

.strategy-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.strategy-card li {
    font-size: 0.8125rem;
    color: var(--gray-600);
    padding: var(--space-xs) 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.strategy-card li i {
    color: var(--leaf-green);
    font-size: 0.75rem;
    margin-top: 3px;
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .insights-grid {
        grid-template-columns: 1fr;
    }
    
    .insight-card.insight-key {
        grid-column: span 1;
    }
    
    .strategies-grid {
        grid-template-columns: 1fr;
    }
}

/* Effect Sizes */
.effect-sizes-container {
    margin-bottom: var(--space-2xl);
}

.effect-table-container {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.effect-table {
    width: 100%;
    border-collapse: collapse;
}

.effect-table th {
    text-align: left;
    padding: var(--space-md) var(--space-lg);
    background: var(--gray-50);
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.875rem;
    border-bottom: 2px solid var(--gray-200);
}

.effect-table td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
    color: var(--gray-700);
}

.effect-table tr.effect-large td:first-child {
    font-weight: 600;
    color: var(--gray-900);
}

.effect-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.effect-badge.large {
    background: rgba(82, 214, 129, 0.15);
    color: var(--leaf-green);
}

.effect-badge.medium {
    background: rgba(255, 213, 94, 0.2);
    color: #b8860b;
}

/* CMB Card */
.cmb-container {
    margin-bottom: var(--space-2xl);
}

.cmb-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: linear-gradient(135deg, rgba(82, 214, 129, 0.08), rgba(82, 214, 129, 0.15));
    border-radius: var(--radius-xl);
    border: 1px solid rgba(82, 214, 129, 0.3);
}

.cmb-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    background: var(--leaf-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cmb-icon i {
    font-size: 1.5rem;
    color: white;
}

.cmb-content h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-sm);
}

.cmb-content p {
    font-size: 0.9375rem;
    color: var(--gray-700);
    line-height: 1.6;
    margin: 0 0 var(--space-xs) 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONCLUSIONS SECTION STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Conclusions Summary */
.conclusions-summary {
    margin-bottom: var(--space-2xl);
}

.highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.highlight-card {
    padding: var(--space-xl);
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    position: relative;
    border-top: 4px solid var(--electric-blue);
}

.highlight-card:nth-child(2) {
    border-top-color: var(--leaf-green);
}

.highlight-card:nth-child(3) {
    border-top-color: var(--purple-splash);
}

.highlight-card:nth-child(4) {
    border-top-color: var(--citrus-pop);
}

.highlight-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--electric-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: var(--space-md);
}

.highlight-card:nth-child(2) .highlight-number {
    background: var(--leaf-green);
}

.highlight-card:nth-child(3) .highlight-number {
    background: var(--purple-splash);
}

.highlight-card:nth-child(4) .highlight-number {
    background: var(--citrus-pop);
}

.highlight-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-sm);
}

.highlight-card p {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Factors Summary in Conclusions */
.factors-summary-container {
    margin-bottom: var(--space-2xl);
}

.factors-intro {
    font-size: 1rem;
    color: var(--gray-600);
    margin-bottom: var(--space-xl);
    line-height: 1.7;
}

.factors-explained-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.factor-explained-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--electric-blue);
    transition: all 0.3s ease;
    position: relative;
}

.factor-explained-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.factor-explained-card.store-importance {
    border-left-color: var(--electric-blue);
}

.factor-explained-card.visual-merch {
    border-left-color: var(--purple-splash);
}

.factor-explained-card.highlight-factor {
    border-left-color: var(--leaf-green);
    background: linear-gradient(135deg, rgba(82, 214, 129, 0.05) 0%, var(--white) 100%);
}

.factor-category-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: rgba(77, 163, 255, 0.1);
    color: var(--electric-blue);
    margin-bottom: var(--space-sm);
}

.factor-category-badge.vm {
    background: rgba(167, 119, 227, 0.1);
    color: var(--purple-splash);
}

.factor-explained-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.factor-explained-header .factor-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--electric-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.factor-explained-card.visual-merch .factor-number {
    background: var(--purple-splash);
}

.factor-explained-card.highlight-factor .factor-number {
    background: var(--leaf-green);
}

.factor-explained-header h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.key-predictor-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--leaf-green);
    color: white;
}

.key-predictor-badge i {
    font-size: 0.625rem;
}

.factor-description {
    font-size: 0.8125rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.factor-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--gray-100);
}

.factor-stat {
    font-size: 0.75rem;
    color: var(--gray-500);
    background: var(--gray-50);
    padding: 2px 8px;
    border-radius: var(--radius-md);
}

.factor-stat strong {
    color: var(--gray-700);
}

.factors-key-insight {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: linear-gradient(135deg, rgba(82, 214, 129, 0.1) 0%, rgba(77, 163, 255, 0.05) 100%);
    border-radius: var(--radius-xl);
    border-left: 4px solid var(--leaf-green);
}

.factors-key-insight i {
    font-size: 1.5rem;
    color: var(--leaf-green);
    flex-shrink: 0;
    margin-top: 2px;
}

.factors-key-insight p {
    font-size: 0.9375rem;
    color: var(--gray-700);
    line-height: 1.7;
    margin: 0;
}

.factors-key-insight strong {
    color: var(--gray-900);
}

@media (max-width: 1200px) {
    .factors-explained-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .factors-explained-grid {
        grid-template-columns: 1fr;
    }
}

/* Top Attributes */
.top-attributes {
    margin-bottom: var(--space-2xl);
}

.attributes-ranking {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.rank-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.rank-item:hover {
    transform: translateX(8px);
    background: var(--gray-100);
}

.rank-item.rank-1 {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.05));
}

.rank-item.rank-2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.3), rgba(192, 192, 192, 0.05));
}

.rank-item.rank-3 {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.2), rgba(205, 127, 50, 0.05));
}

.rank-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--electric-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.rank-item.rank-1 .rank-badge {
    background: linear-gradient(135deg, #ffd700, #ffb800);
}

.rank-item.rank-2 .rank-badge {
    background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
}

.rank-item.rank-3 .rank-badge {
    background: linear-gradient(135deg, #cd7f32, #b8722e);
}

.rank-name {
    flex: 1;
    font-weight: 600;
    color: var(--gray-800);
}

.rank-score {
    font-weight: 700;
    color: var(--electric-blue);
    font-size: 1.125rem;
}

/* Implications */
.implications-container {
    margin-bottom: var(--space-2xl);
}

.implications-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.implication-card {
    padding: var(--space-xl);
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.implication-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.implication-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(77, 163, 255, 0.15), rgba(77, 163, 255, 0.25));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.implication-card:nth-child(2) .implication-icon {
    background: linear-gradient(135deg, rgba(82, 214, 129, 0.15), rgba(82, 214, 129, 0.25));
}

.implication-card:nth-child(3) .implication-icon {
    background: linear-gradient(135deg, rgba(180, 144, 255, 0.15), rgba(180, 144, 255, 0.25));
}

.implication-card:nth-child(4) .implication-icon {
    background: linear-gradient(135deg, rgba(255, 213, 94, 0.2), rgba(255, 213, 94, 0.3));
}

.implication-icon i {
    font-size: 1.5rem;
    color: var(--electric-blue);
}

.implication-card:nth-child(2) .implication-icon i {
    color: var(--leaf-green);
}

.implication-card:nth-child(3) .implication-icon i {
    color: var(--purple-splash);
}

.implication-card:nth-child(4) .implication-icon i {
    color: var(--citrus-pop);
}

.implication-card h4 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-sm);
}

.implication-card p {
    font-size: 0.9375rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Limitations */
.limitations-container {
    margin-bottom: var(--space-2xl);
}

.limitations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.limitation-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--citrus-pop);
}

.limitation-item i {
    color: var(--citrus-pop);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.limitation-item h5 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.limitation-item p {
    font-size: 0.8125rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin: 0;
}

/* Final Stats */
.final-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    padding: var(--space-2xl);
    background: linear-gradient(135deg, var(--electric-blue), #3b8de3);
    border-radius: var(--radius-xl);
}

.final-stat-card {
    text-align: center;
    color: white;
}

.final-stat-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.final-stat-label {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS FOR NEW SECTIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .path-diagram {
        flex-direction: column;
        gap: var(--space-lg);
    }
    
    .path-arrows {
        transform: rotate(90deg);
    }
    
    .regression-models-grid {
        grid-template-columns: 1fr;
    }
    
    .diagnostics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .findings-grid {
        grid-template-columns: 1fr;
    }
    
    .highlight-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .cluster-overview {
        grid-template-columns: 1fr;
    }
    
    .segments-grid {
        grid-template-columns: 1fr;
    }
    
    .implications-grid {
        grid-template-columns: 1fr;
    }
    
    .limitations-grid {
        grid-template-columns: 1fr;
    }
    
    .final-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .path-predictors, .path-outcomes {
        width: 100%;
    }
    
    .path-box {
        min-width: 150px;
    }
    
    .diagnostics-grid {
        grid-template-columns: 1fr;
    }
    
    .highlight-grid {
        grid-template-columns: 1fr;
    }
    
    .profile-bar {
        grid-template-columns: 100px 1fr 60px;
    }
    
    .effect-table {
        font-size: 0.8125rem;
    }
    
    .effect-table th,
    .effect-table td {
        padding: var(--space-sm);
    }
    
    .final-stats {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .final-stat-value {
        font-size: 2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NEW CHART ADDITIONS - RADAR & SCREE PLOT
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Cluster Radar Chart Container */
.cluster-radar-container {
    margin-bottom: var(--space-2xl);
}

.radar-chart-wrapper {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-xl);
    max-width: 600px;
    margin: 0 auto var(--space-lg);
}

.radar-chart-wrapper canvas {
    max-height: 400px;
}

.radar-insight {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: linear-gradient(135deg, rgba(82, 214, 129, 0.08), rgba(82, 214, 129, 0.15));
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--leaf-green);
    max-width: 800px;
    margin: 0 auto;
}

.radar-insight i {
    color: var(--leaf-green);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.radar-insight p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--gray-700);
    line-height: 1.6;
}

/* Scree Plot Section */
.scree-plot-section {
    margin-bottom: var(--space-2xl);
}

.scree-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

.scree-chart-container {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-xl);
    min-height: 380px;
}

.scree-chart-container canvas {
    height: 325px !important;
    max-height: 450px;
}

.scree-explanation {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-xl);
}

.scree-criteria {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.criterion-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.criterion-item:hover {
    background: rgba(82, 214, 129, 0.1);
}

.criterion-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(82, 214, 129, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.criterion-icon i {
    color: var(--leaf-green);
    font-size: 1rem;
}

.criterion-content h5 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-xs);
}

.criterion-content p {
    font-size: 0.8125rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

/* Factor Correlation Heatmap (if added) */
.correlation-heatmap-container {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.correlation-heatmap-container canvas {
    max-height: 400px;
}

/* Correlation Section Styling */
.correlation-section {
    margin-bottom: var(--space-2xl);
}

.correlation-interpretation {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-xl);
}

.correlation-interpretation h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.correlation-interpretation h4 i {
    color: var(--electric-blue);
}

.correlation-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.corr-item {
    display: grid;
    grid-template-columns: 70px 100px 1fr;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.corr-item:hover {
    transform: translateX(4px);
}

.corr-item.corr-high {
    background: rgba(82, 214, 129, 0.1);
    border-left: 3px solid var(--leaf-green);
}

.corr-item.corr-medium {
    background: rgba(77, 163, 255, 0.1);
    border-left: 3px solid var(--electric-blue);
}

.corr-item.corr-low {
    background: rgba(255, 213, 94, 0.1);
    border-left: 3px solid var(--citrus-pop);
}

.corr-pair {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--gray-900);
}

.corr-value {
    font-family: 'Fira Code', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
}

.corr-label {
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.correlation-note {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--gray-200);
}

/* Responsive for new charts */
@media (max-width: 992px) {
    .scree-grid {
        grid-template-columns: 1fr;
    }
    
    .radar-chart-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .radar-chart-wrapper canvas {
        max-height: 300px;
    }
    
    .scree-chart-container canvas {
        height: 280px !important;
        max-height: 300px;
    }
}