/* Base HTML and Body Styles */
html, body {
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrollbar on body due to 100vw sections */
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Default to Inter */
    background-color: #E4D7FF; /* Lightest purple for default page background */
}

body {
    color: #2C154D; /* Darkest purple for default text on light background */
    font-size: 20px; /* Base body font size */
    line-height: 1.4; /* Base body line height (140%) */
    letter-spacing: -0.01em; /* Base body letter spacing (-1%) */
    font-weight: 400; /* Inter Regular */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Sections below topIdeasRevealSection will override this body background if they need to be light */
}

/* Top Dark Band */
.top-dark-band {
    position: fixed; /* Or absolute, depending on scroll behavior needed */
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Adjust height to cover navbar + its top margin + a bit more if needed */
    background-color: #301934; /* Dark Purple */
    z-index: 1000; /* Below navbar (z-index: 2000) but above body scroll content */
}

/* Dashboard Header */
.dashboard-header {
    width: 100%;
    background-color: #301934; /* Dark purple background for this specific section */
    color: #ffffff; /* White text for this dark section */
    padding: 120px 20px 50px 20px; /* Increased top padding significantly */
    text-align: center;
    box-sizing: border-box;
    /* margin-bottom: 40px; */ /* REMOVED to close gap with section below */
    position: relative; 
    overflow: visible; /* Ensure no accidental overflow is hiding sticky children */
}

.header-content {
    max-width: 800px;
    margin: 0 auto;
}

.header-subtitle {
    font-size: 1.1em; /* This will be relative to body's 20px, or we can set explicitly */
    /* Assuming subtitle might be like a smaller body text or a specific style */
    /* If it should follow the "Subheading" spec, we'll adjust it directly */
    color: #E0E0E0; /* Light grey for subtitle on dark header */
    margin-bottom: 5px;
    font-weight: 300; /* Previous value, Inter Light. Change to 600 if it's a "Subheading" */
    letter-spacing: 0.5px;
}

.dashboard-title { /* This is an H1 equivalent */
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 100px;
    line-height: 100%;
    letter-spacing: -0.02em;
    /* color: #F6F4EE; */ /* Previous title color */
    color: #E98537; /* New title color - Orange/Tan */
    margin-top: 0;
    margin-bottom: 20px;
}

/* Main Container */
main {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

h1 {
    color: #2c3e50;
    margin-bottom: 30px;
}

/* Analysis Sections */
.analysis-section {
    width: 100%;
    margin-bottom: 150px; /* Increased default bottom margin */
    padding-top: 30px; /* Added general top padding */
    padding-bottom: 30px; /* Added general bottom padding */
    /* Default to transparent to inherit body background, or set specific if needed */
    /* background-color: transparent; */ 
}

.analysis-section.light-bg {
    background-color: #E4D7FF; /* Light purple for specific sections */
}

.analysis-section.light-bg h2 {
    color: #2C154D; /* Dark text for titles on light background */
}

.analysis-section.light-bg .stat-description, 
.analysis-section.light-bg .top-idea-card-placeholder, 
.analysis-section.light-bg .chart-hint,
.analysis-section.light-bg #modalText, /* Ensure modal text is dark if modal shown over light bg */
.analysis-section.light-bg .modal-header h2 {
    color: #2C154D; /* Ensure text within light sections is dark */
}

.analysis-section h2 { /* These are the subheadings */
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 600; /* Semi Bold */
    font-size: 48px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #2C154D; /* Darkest purple for subheadings */
    margin-bottom: 40px; /* Increased margin after titles */
}

/* Stats Scroller */
.stats-scroller-container {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.stats-scroller {
    display: flex;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px; /* Simplified padding, rely on card width and margins for spacing */
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #8A2BE2 #f0eaff;
}

.stats-scroller::-webkit-scrollbar {
    height: 8px;
}

.stats-scroller::-webkit-scrollbar-track {
    background: #f0eaff;
    border-radius: 4px;
}

.stats-scroller::-webkit-scrollbar-thumb {
    background-color: #8A2BE2;
    border-radius: 4px;
}

/* Stat Cards */
.stat-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 300px; /* Fixed width for predictability */
    min-height: 280px; /* Increased min-height */
    flex-grow: 0; /* Prevent growing */
    flex-shrink: 0; /* Prevent shrinking */
    background-color: #f3e9ff;
    border-radius: 20px;
    padding: 25px;
    margin-right: 20px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.15);
    transition: transform 0.3s ease-out;
    box-sizing: border-box;
}

.stat-card:first-child {
    margin-left: calc((100vw - 300px) / 2); /* Center the first card */
}

.stat-card:last-child {
    margin-right: calc((100vw - 300px) / 2); /* Center the last card */
}

.stat-card:hover {
    transform: translateY(-10px); /* Made hover effect more pronounced */
}

.stat-icon {
    font-size: 48px;
    margin-bottom: 15px;
    line-height: 1;
}

.stat-number {
    font-size: 48px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.1;
}

.stat-description {
    font-size: 16px; /* Will be relative to body's 20px or override if needed. For now, smaller than body. */
    color: #4A0072; /* Previous color */
    line-height: 1.4;
    max-width: 90%;
    /* letter-spacing: -0.01em; // Inherit from body or set specific */
}

/* Idea Rank Toggle Styles */
.idea-rank-toggle-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.idea-rank-toggle-btn {
    background: linear-gradient(135deg, #8E59FF 0%, #6B46C1 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(142, 89, 255, 0.3);
}

.idea-rank-toggle-btn:hover {
    background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    box-shadow: 0 6px 16px rgba(142, 89, 255, 0.4);
    transform: translateY(-2px);
}

.idea-rank-toggle-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(142, 89, 255, 0.3);
}

.toggle-icon {
    transition: transform 0.3s ease;
    font-size: 14px;
}

.idea-rank-toggle-btn.expanded .toggle-icon {
    transform: rotate(180deg);
}

.idea-rank-toggle-btn.expanded .toggle-text::after {
    content: "Show less";
}

.idea-rank-toggle-btn:not(.expanded) .toggle-text::after {
    content: "Show more";
}

.toggle-text {
    position: relative;
}

.toggle-text::after {
    content: "Show more";
}

/* Smooth transitions for chart container */
.idea-rank-chart-area {
    transition: all 0.4s ease;
    overflow: hidden;
}

.idea-rank-chart-area canvas {
    transition: height 0.4s ease;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    padding-top: 60px;
}

.modal-content {
    background-color: #ffffff;
    margin: 5% auto;
    padding: 30px;
    border: 1px solid #888;
    border-radius: 8px;
    width: 80%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    animation: fadeInModal 0.3s ease-out;
}

.modal-header {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.modal-header h2 {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
}

.modal-body p {
    /* font-size: 1rem; */ /* Will inherit from body or use explicit 20px */
    line-height: 1.4; /* 140% */
    letter-spacing: -0.01em; /* -1% */
    margin-bottom: 10px;
}

#modalText {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 20px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

@keyframes fadeInModal {
    from {opacity: 0; transform: translateY(-20px);}
    to {opacity: 1; transform: translateY(0);}
}

/* Full Bleed Sections */
.full-bleed-section {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 30px;
    padding-bottom: 30px;
    box-sizing: border-box;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Styles for Top 3 Ideas Section */
.top-ideas-scroller-container {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Similar to stats-scroller-container */
}

#topIdeasScroller {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap; /* For inline-block cards */
    padding: 20px calc((100vw - 85vw) / 2); /* 20px top/bottom, calculated left/right for centering */
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cccccc #f0f0f0; /* Neutral scrollbar colors */
}

#topIdeasScroller::-webkit-scrollbar {
    height: 8px;
}

#topIdeasScroller::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    border-radius: 4px;
}

.top-idea-card-placeholder {
    display: inline-flex;
    vertical-align: top;
    background-color: #e9e9e9; /* Light grey placeholder */
    border-radius: 16px; /* Slightly larger radius for a bigger card */
    padding: 30px; /* Increased padding */
    width: 85vw; /* Significantly wider */
    height: 400px; /* Significantly taller */
    margin-right: 25px; /* Adjusted margin to match scroller padding */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Enhanced shadow for better depth */
    text-align: left; /* Align text to the left for content */
    color: #555; /* Darker text for better readability */
    font-size: 1.5em; /* Larger font for placeholder text */
    display: inline-flex; /* For centering content, if needed, while flowing inline */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.top-idea-card-placeholder:last-child {
    margin-right: 0;
}

/* CSS for New Card Stack Reveal Section */
.top-ideas-reveal-section {
    width: 100%;
    min-height: 300vh; /* Give enough scroll space for the animation */
    position: relative; 
    background-color: #301934; /* Dark purple background for this specific section */
    color: #FFFFFF; /* Default white text for this dark section */
    margin-bottom: 50px; /* Add some space after this section */
}

.pinned-card-stack-container {
    width: 100%;
    height: 100vh;
    /* position: sticky; */ /* REMOVED - GSAP will handle pinning */
    /* top: 0; */           /* REMOVED */
    overflow: hidden; /* Prevent card overflow during animation if they fly far */
    display: flex;
    justify-content: center; 
    align-items: center;   
    flex-direction: column; 
    background-color: #301934; /* Ensure this also has dark bg */
}

.reveal-card {
    width: 70vw;
    max-width: 600px;
    min-height: 300px;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    position: absolute; /* Stack them */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    transform-origin: center center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #333;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* For non-GSAP interactions if any */
}

.reveal-card h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 600; /* Semi Bold */
    font-size: 36px; /* Slightly smaller than section subheadings, adjust as needed */
    line-height: 100%;
    letter-spacing: -0.02em;
    margin-bottom: 15px;
    color: #fff;  /* Explicitly white for card titles on colored cards */
}

.reveal-card p { 
    line-height: 1.4; 
    letter-spacing: -0.01em; 
    color: #f0f0f0; /* Light text for card paragraphs */
}

.reveal-card.card-1 {
    background-color: #6A0DAD; /* Purple */
    z-index: 3;
    transform: translate(-50%, -50%) rotate(-3deg) translateX(-10px) translateY(-5px); /* Adjusted for stacked look */
}

.reveal-card.card-2 {
    background-color: #FF69B4; /* Pink */
    z-index: 2;
    transform: translate(-50%, -50%) rotate(2deg) translateX(5px) translateY(0px); /* Adjusted for stacked look */
}

.reveal-card.card-3 {
    background-color: #40E0D0; /* Turquoise */
    z-index: 1;
    transform: translate(-50%, -50%) rotate(-1deg) translateX(10px) translateY(5px); /* Adjusted for stacked look */
}

.winning-idea-reveal h2 { 
    font-family: 'Inter', sans-serif;
    font-weight: 600; 
    font-size: 48px;
    line-height: 100%;
    letter-spacing: -0.02em;
    /* color: #FFD700; */ /* Gold text on dark background */
    color: #F6F4EE; /* New color for winning idea title - Off-white */
    margin-bottom: 20px;
}

.winning-idea-reveal p { 
    line-height: 1.4; 
    letter-spacing: -0.01em;
    /* color will be inherited from .top-ideas-reveal-section (white) */
}

/* --- Navigation Bar Styles --- */
.top-nav-bar {
    background-color: #FFFFFF; /* White background for pill */
    padding: 10px 30px; /* Adjusted padding for full width */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    /* position: sticky; */ /* Temporarily changed to fixed for testing */
    position: fixed;   /* TEST: Using fixed positioning */
    top: 20px;
    left: 20px; /* For fixed, we need to explicitly set left/right or use width and margin auto */
    right: 20px; /* This + left 20px will make it respect the 20px side gaps */
    z-index: 9999; /* Extremely high z-index */
    /* width: calc(100% - 40px); */ /* Not needed if using left/right */
    /* margin: 20px auto 0 auto; */ /* Not needed for fixed positioning this way */
    border-radius: 30px; /* Rounded ends for the full-width bar */
    box-sizing: border-box;
}

.nav-logo-img {
    height: 30px; /* Adjusted for a more compact pill */
    /* Assuming SVG logo has its own colors that will contrast with white */
}

.nav-button {
    font-family: 'Inter', sans-serif;
    font-weight: 600; /* Semi Bold */
    font-size: 16px; /* Slightly smaller for pill */
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    background-color: #8E59FF; /* Medium Purple */
    padding: 10px 20px; /* Adjusted padding */
    border-radius: 30px; /* Rounded button */
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.nav-button:hover {
    background-color: #E4D7FF; /* Lightest purple on hover */
    color: #2C154D; /* Dark text on light hover */
}

/* Chart Container Cards */
.chart-container-card {
    background-color: #FFFFFF; /* White background for chart plot areas */
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    margin-top: 20px; /* Space from section title */
}

/* Winning Idea Reveal Styles */
#winningIdeaReveal {
    text-align: center;
    color: #FFFFFF; /* Updated to #FFFFFF from index.html rule, was #F6F4EE */
    width: 80vw;
    max-width: 800px; /* Kept 800px, index.html had 700px */
    /* margin: auto; */ /* REMOVED - GSAP now handles positioning */
    position: absolute; /* ADDED - for GSAP top/left to work relative to parent */
    /* GSAP handles initial opacity and transform, so not needed here */
}

#winningIdeaReveal .winner-label {
    font-size: 1.8em; /* Smaller, like a sub-label */
    font-weight: var(--font-weight-normal);
    display: block;
    margin-bottom: 0.25em;
    color: #E4D7FF; /* Lighter purple */
}

#winningIdeaReveal #winningIdeaTitle {
    font-size: 2.8em; /* Main title size */
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: #FFFFFF; 
    margin-bottom: 1em; /* Space before potential stats */
}

#winningIdeaSupportStats {
    text-align: center;
    color: #E4D7FF; 
    width: 80vw;
    max-width: 700px; 
    margin: auto; /* Center it horizontally AND vertically in flex parent */
    /* opacity and transform are set inline in HTML for GSAP initial state */
}

#winningIdeaSupportStats p {
    font-size: 2.8em; /* Matching winningIdeaTitle's em value */
    font-weight: var(--font-weight-normal);
    line-height: 1.4;
}

/* New test with a direct class - REMOVING */
/* .force-stats-font-size {
    font-size: 60px !important; 
    color: lime !important; 
} */

#winningIdeaSupportStats strong {
    font-weight: var(--font-weight-bold);
    color: #FFFFFF; 
}

#winningIdeaSupportStats #supportPercentage { /* Increased specificity */
    color: #8E59FF; /* Medium Purple for percentage */
}

#winningIdeaSupportStats #totalVotesWinner { /* Increased specificity */
    color: #F488CD; /* Pink for total votes */
}


/* Idea Map Styles */
/* Rule for #ideaMapHint will be removed as element is deleted */

/* New Participant Alignment Map Section Styles */
#participantAlignmentMapSection {
    display: none; /* Initially hidden, shown by JS */
    /* .analysis-section and .light-bg classes will provide base styling */
}

#participantAlignmentMapSection h2 {
    /* Using general .analysis-section h2 styles */
}

#participantAlignmentMapChartContainer {
    /* Styles from index.html are specific enough for now, but can be moved here */
    /* Example: */
    /* background-color: #ffffff; */
    /* border-radius: 8px; */
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.05); */
    /* padding: 15px; */
}

#participantAlignmentMapChart {
    max-width: 100%;
    max-height: 100%; /* Ensure canvas scales within its container */
}

.guidance-button {
    font-family: 'Inter', sans-serif;
    font-weight: 600; /* Semi Bold */
    font-size: 20px; /* Similar to controls button */
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #FFFFFF; /* White text */
    background-color: #8E59FF; /* Medium Purple */
    padding: 15px 30px; /* Generous padding */
    border: none;
    border-radius: 30px; /* Very round edges */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.guidance-button:hover {
    background-color: #6A0DAD; /* Darker Purple on hover */
    transform: translateY(-2px);
}

.guidance-button:active {
    transform: translateY(0px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}


/* Styles for Idea Rank Chart Section */
#ideaRankContainer {
    /* Base styles from .analysis-section.light-bg are inherited */
}

/* Specific container for the chart canvas inside the section */
.idea-rank-chart-area {
    background-color: #FFFFFF;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    margin-top: 20px;
    /* Height will be dynamically adjusted by script.js */
}

/* Styles for Idea Network Section */
#ideaNetworkContainer {
    /* Base styles from .analysis-section.light-bg are inherited */
}

/* Network controls container */
.network-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

/* Round filter buttons */
.round-filter-btn {
    font-family: 'Inter', sans-serif;
    font-weight: 600; /* Semi Bold */
    font-size: 16px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #2C154D; /* Dark purple text */
    background-color: #FFFFFF; /* White background */
    border: 2px solid #E4D7FF; /* Light purple border */
    border-radius: 50px; /* Fully rounded */
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.round-filter-btn:hover {
    background-color: #F6F4EE; /* Light hover background */
    border-color: #8E59FF; /* Medium purple border on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.round-filter-btn.active {
    background-color: #8E59FF; /* Medium purple background when active */
    border-color: #8E59FF; /* Matching border */
    color: #FFFFFF; /* White text when active */
    box-shadow: 0 4px 12px rgba(142, 89, 255, 0.3);
}

.round-filter-btn.active:hover {
    background-color: #6A0DAD; /* Darker purple on hover when active */
    border-color: #6A0DAD;
}

/* Network chart container */
#ideaNetworkChartContainer {
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    margin-top: 20px;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* SVG container for D3 network */
#ideaNetworkSvg {
    width: 100%;
    height: 600px;
    background-color: transparent;
}

/* D3 Network Node Styles */
.network-node {
    cursor: pointer;
    transition: r 0.2s ease-in-out;
}

.network-node:hover {
    stroke: #2C154D;
    stroke-width: 3px;
}

.network-node.highlighted {
    stroke: #E98537; /* Orange accent color */
    stroke-width: 4px;
}

/* D3 Network Link Styles */
.network-link {
    stroke: #999;
    /* stroke-opacity and stroke-width are dynamically set by JavaScript */
}

.network-link.highlighted {
    stroke: #8E59FF;
    stroke-opacity: 0.9;
    stroke-width: 3px;
}

/* D3 Network Text Styles */
.network-text {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    fill: #FFFFFF;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    user-select: none;
}

.network-text.small {
    font-size: 12px;
}

.network-text.large {
    font-size: 16px;
}

/* Network loading state */
.network-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
    font-size: 18px;
    color: #8E59FF;
}

.network-loading::after {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid #E4D7FF;
    border-top: 2px solid #8E59FF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Network error state */
.network-error {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
    font-size: 18px;
    color: #dc3545;
    text-align: center;
} 

/* ANOVA Chart Section Styles */
#anovaChartSection {
  /* Already uses .analysis-section and .light-bg for background and padding */
}

#anovaChartSection .chart-container-card {
  min-height: 500px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#anovaChartHint.chart-hint {
  text-align: center;
  margin-top: 15px;
  color: #4A0072;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

#anovaChartSection h2 {
  color: #2C154D;
}