/* Import font only once at the top */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Consolidated root variables with consistent naming */
:root {
    /* Core colors */
    --primary: #032541;
    --secondary: #01b4e4;
    --background: #f5f5f7;
    --card-bg: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    
    /* Section colors */
    --watch-section: #06b6d4;
    --rating-section: #8b5cf6;
    --rec-section: #ec4899;
    --blindspot-section: #f97316;
    
    /* Chart color themes */
    --watch-pattern-primary: rgba(3, 37, 65, 0.7);
    --watch-pattern-secondary: rgba(1, 180, 228, 0.7);
    --rating-analysis-primary: rgba(255, 99, 132, 0.7);
    --rating-analysis-secondary: rgba(54, 162, 235, 0.7);
    --recommendations-primary: rgba(1, 180, 228, 0.7);
    --recommendations-secondary: rgba(1, 180, 228, 0.5);
    --blindspots-primary: rgba(102, 16, 242, 0.7);
    --blindspots-secondary: rgba(153, 102, 255, 0.7);
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* Transitions */
    --transition: all 0.2s ease;
}

/* Base styles */
body {
    font-family: var(--font-primary);
    margin: 0;
    padding: 0;
    background-color: var(--background);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.011em;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-top: 0;
}

/* Header */
header {
    background: linear-gradient(135deg, #06b6d4, #8b5cf6, #ec4899, #f97316);
    color: white;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.1);
    z-index: 1;
}

header h1 {
    margin: 0;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: -0.03em;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header h1 a {
    color: white;
    text-decoration: none;
    transition: opacity 0.2s;
}

header h1 a:hover {
    opacity: 0.9;
}

header h1 i.fas {
    display: none;
}

/* Container */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* File upload */
.file-upload {
    background-color: var(--card-bg);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    margin-bottom: 2rem;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.file-upload:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.file-upload h2 {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.file-upload p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Introduction section */
.intro-section {
    background-color: var(--card-bg);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.intro-section h2 {
    color: var(--primary);
    margin-bottom: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.intro-tagline {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.intro-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.intro-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.9));
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

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

.intro-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--secondary);
    text-align: center;
}

.intro-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--primary);
    font-weight: 600;
    text-align: center;
}

.intro-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
}

.how-to-use {
    background-color: rgba(241, 245, 249, 0.6);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.how-to-use h3 {
    margin-bottom: 1rem;
    color: var(--primary);
    font-weight: 600;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.how-to-use ol {
    padding-left: 1.5rem;
    margin-bottom: 0;
}

.how-to-use li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.how-to-use li strong {
    color: var(--primary);
}

.how-to-use ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.how-to-use ul li {
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.intro-note {
    background-color: rgba(236, 253, 245, 0.8);
    border-left: 3px solid #10B981;
    padding: 1rem 1.25rem;
    border-radius: 0 0.5rem 0.5rem 0;
    font-size: 0.95rem;
    color: #065F46;
}

/* Buttons and inputs */
button, .file-upload label {
    background: linear-gradient(135deg, var(--secondary), #0891b2);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

button:hover, .file-upload label:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, #0891b2, var(--secondary));
}

button:focus, .file-upload label:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.4);
}

input[type="file"] {
    display: none;
}

#file-name {
    margin-top: 1rem;
    font-style: normal;
    color: var(--text-secondary);
    font-weight: 500;
    display: block;
    padding: 0.5rem;
    background-color: rgba(241, 245, 249, 0.6);
    border-radius: 0.375rem;
}

/* Loading indicator */
#loading {
    display: none;
    text-align: center;
    margin: 2rem 0;
}

.spinner {
    border: 3px solid rgba(6, 182, 212, 0.1);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border-left-color: var(--secondary);
    animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    margin: 0 auto 1rem;
}

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

/* Dashboard layout */
.dashboard {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

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

.card h2 {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(241, 245, 249, 0.8);
}

.card h2 i, .section-title i {
    margin-right: 0.625rem;
}

/* Section titles and descriptions */
.section-title {
    background-color: var(--primary);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    margin: 2rem 0 0.5rem; /* Reduced bottom margin from 1.5rem to 0.5rem */
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
    z-index: 10;
}

.section-title::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));
}

.section-title:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.section-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.7;
    font-size: 1rem;
    max-width: 90%;
    padding: 0 0.5rem;
}

/* Collapsible section functionality */
.section-arrow {
    font-size: 1rem;
    margin-left: auto;
    padding: 0.25rem;
    height: 1.5rem;
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: var(--transition);
}

.section-title:hover .section-arrow {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.section-content.collapsed,
.section-description.collapsed {
    display: none;
}

/* Section-specific styling */
.dashboard > .section-title:nth-of-type(1),
.dashboard > .section-title.watch-patterns-section-title {
    background: linear-gradient(135deg, var(--watch-section), #0891b2);
}

.dashboard > .section-title:nth-of-type(2),
.dashboard > .section-title.ratings-section-title {
    background: linear-gradient(135deg, var(--rating-section), #7c3aed);
}

.dashboard > .section-title:nth-of-type(3),
.dashboard > .section-title.blindspots-section-title {
    background: linear-gradient(135deg, var(--blindspot-section), #ea580c);
}

.dashboard > .section-title:nth-of-type(4),
.dashboard > .section-title.recommendations-section-title {
    background: linear-gradient(135deg, var(--rec-section), #db2777);
}

/* Summary stats */
.summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.9));
    color: var(--text-primary);
    padding: 1.25rem;
    border-radius: 0.75rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

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

.stat-box h3 {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.9;
    font-weight: 600;
    color: var(--text-secondary);
}

.stat-box p {
    margin: 0.5rem 0 0;
    font-size: 1.5rem;
    font-weight: 700;
}

/* Chart containers */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
    padding: 0.5rem;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0.5rem;
    transition: var(--transition);
}

.chart-container:hover {
    background-color: rgba(255, 255, 255, 0.7);
}

.chart-recommendation {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background-color: rgba(241, 245, 249, 0.5);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
}

/* Watch Patterns Section */
.watch-patterns-section .card {
    border-left: 4px solid var(--watch-section);
}

.watch-patterns-section .stat-box {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(6, 182, 212, 0.05));
    border-left: 3px solid var(--watch-section);
}

.watch-patterns-section .card h2 {
    color: var(--watch-section);
    border-bottom-color: rgba(6, 182, 212, 0.2);
}

.watch-patterns-section .confidence-indicator,
.watch-patterns-section .confidence-tooltip {
    display: none;
}

.watch-patterns-section .chart-recommendation {
    border-left: 3px solid var(--watch-section);
}

/* Ratings Section */
.ratings-section .card {
    border-left: 4px solid var(--rating-section);
}

.ratings-section .stat-box {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
    border-left: 3px solid var(--rating-section);
}

.ratings-section .card h2 {
    color: var(--rating-section);
    border-bottom-color: rgba(139, 92, 246, 0.2);
}

.ratings-section .chart-recommendation {
    border-left: 3px solid var(--rating-section);
}

.ratings-section .chart-confidence-info {
    display: none;
}

/* Blindspots Section */
.blindspots-section .card {
    border-left: 4px solid var(--blindspot-section);
}

.blindspots-section .stat-box {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(249, 115, 22, 0.05));
    border-left: 3px solid var(--blindspot-section);
}

.blindspots-section .card h2 {
    color: var(--blindspot-section);
    border-bottom-color: rgba(249, 115, 22, 0.2);
}

.blindspots-section .chart-recommendation {
    border-left: 3px solid var(--blindspot-section);
}

.blindspot-explainer {
    line-height: 1.6;
    font-size: 0.9375rem;
}

.blindspot-explainer ol {
    margin: 0.9375rem 0;
    padding-left: 1.5625rem;
}

.blindspot-explainer li {
    margin-bottom: 0.625rem;
}

.blindspot-explainer strong {
    color: var(--blindspot-section);
}

.directors-list,
.oscar-winners-list {
    list-style: none;
    margin: 0;
}

/* Recommendations Section */
.recommendations-section .card {
    border-left: 4px solid var(--rec-section);
}

.recommendations-section .stat-box {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(236, 72, 153, 0.05));
    border-left: 3px solid var(--rec-section);
}

.recommendations-section .card h2 {
    color: var(--rec-section);
    border-bottom-color: rgba(236, 72, 153, 0.2);
}

.recommendations-section .chart-recommendation {
    border-left: 3px solid var(--rec-section);
}

.recommendation-explainer {
    line-height: 1.6;
    font-size: 0.9375rem;
}

.recommendation-explainer ol {
    margin: 0.9375rem 0;
    padding-left: 1.5625rem;
}

.recommendation-explainer li {
    margin-bottom: 0.625rem;
}

.recommendation-explainer strong {
    color: var(--rec-section);
}

.recommended-movies-list {
    list-style: none;
}

/* Shared list item styles */
.directors-list li, 
.oscar-winners-list li,
.recommended-movies-list li {
    margin: 0.75rem 0;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: rgba(241, 245, 249, 0.5);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.directors-list li, 
.oscar-winners-list li {
    border-left: 3px solid var(--blindspot-section);
}

.recommended-movies-list li {
    border-left: 3px solid var(--rec-section);
}

.directors-list li:hover, 
.oscar-winners-list li:hover,
.recommended-movies-list li:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background-color: rgba(241, 245, 249, 0.7);
}

.recommendation-badge {
    display: inline-block;
    background-color: var(--blindspot-section);
    color: white;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.75rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

#similarity-summary {
    padding: 0.9375rem;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    margin-top: 0.9375rem;
    line-height: 1.5;
}

#similarity-summary p {
    margin: 0.5rem 0;
}

.no-data-message {
    color: var(--text-secondary);
    line-height: 1.5;
}

.film-festival-rec {
    transition: transform 0.2s;
}

.film-festival-rec:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* Confidence indicators */
.confidence-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    vertical-align: middle;
    box-shadow: var(--shadow-sm);
}

.low-confidence {
    background-color: rgba(255, 99, 132, 0.15);
    color: rgb(217, 48, 80);
    border: 1px solid rgba(255, 99, 132, 0.3);
}

.moderate-confidence {
    background-color: rgba(255, 159, 64, 0.15);
    color: rgb(210, 127, 42);
    border: 1px solid rgba(255, 159, 64, 0.3);
}

.good-confidence {
    background-color: rgba(255, 205, 86, 0.15);
    color: rgb(182, 142, 12);
    border: 1px solid rgba(255, 205, 86, 0.3);
}

.high-confidence {
    background-color: rgba(75, 192, 192, 0.15);
    color: rgb(46, 142, 142);
    border: 1px solid rgba(75, 192, 192, 0.3);
}

.confidence-tooltip {
    position: absolute;
    top: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(34, 34, 34, 0.9);
    color: white;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    z-index: 100;
    width: max-content;
    max-width: 12.5rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.stat-box:hover .confidence-tooltip {
    opacity: 1;
}

.chart-confidence-info {
    position: absolute;
    right: 0.625rem;
    top: 0.625rem;
    font-size: 0.75rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 10;
    cursor: help;
}

.significance-explainer {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.8), rgba(255, 255, 255, 0.8));
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0.75rem;
    padding: 1rem; /* Reduced padding from 1.5rem to 1rem */
    margin: 0.5rem 0; /* Reduced margin from 1.5rem to 0.5rem */
    font-size: 0.9375rem;
    line-height: 1.6;
    box-shadow: var(--shadow-md);
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    clear: both;
    overflow: hidden;
}

.significance-explainer h3 {
    margin-bottom: 0.5rem; /* Reduced from 1rem to 0.5rem */
    color: var(--rating-section);
    font-weight: 700;
}

.significance-explainer p {
    margin-bottom: 0.5rem; /* Reduced from 0.9375rem to 0.5rem */
}

.significance-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9375rem;
    margin: 0.9375rem 0;
    width: 100%;
}

.significance-level {
    display: flex;
    align-items: center;
    margin-right: 1.25rem;
    margin-bottom: 0.625rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.significance-level span:first-child {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin-right: 0.375rem;
}

.correlation-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    margin-top: 0.3125rem;
    font-size: 0.75rem;
}

.correlation-value {
    font-weight: bold;
}

.correlation-significance {
    padding: 0.125rem 0.375rem;
    border-radius: 0.625rem;
}

.low-confidence-indicator {
    color: rgb(217, 48, 80);
    font-size: 0.6875rem;
    margin-left: 0.3125rem;
}

/* No ratings message */
.no-ratings-message {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.6), rgba(255, 255, 255, 0.6));
    border: 2px dashed rgba(148, 163, 184, 0.5);
    border-radius: 1rem;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
    color: var(--text-secondary);
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--shadow-sm);
}

.no-ratings-message h3 {
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.no-ratings-message p {
    margin: 0.625rem 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

.no-ratings-message ol {
    text-align: left;
    max-width: 31.25rem;
    margin: 0.9375rem auto;
    padding-left: 1.875rem;
}

.no-ratings-message ol li {
    margin-bottom: 0.625rem;
    line-height: 1.4;
    font-size: 1.05rem;
}

/* Footer */
.site-footer {
    margin-top: 4rem;
    padding: 2.5rem 0 1rem;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6, #ec4899, #f97316);
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    z-index: 1;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.footer-brand {
    flex: 1;
    min-width: 18.75rem;
    margin-bottom: 2rem;
}

.footer-brand h2 {
    margin: 0 0 0.5rem;
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.footer-brand p {
    margin: 0;
    opacity: 0.9;
    font-size: 1rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
}

.footer-section h3 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section li {
    margin-bottom: 0.75rem;
}

.footer-section a {
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s;
}

.footer-section a:hover {
    opacity: 0.8;
}

.footer-section a i {
    margin-right: 0.5rem;
}

.footer-bottom {
    max-width: 1280px;
    margin: 2rem auto 0;
    padding: 1.5rem 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    position: relative;
    z-index: 2;
}

.footer-bottom p {
    margin: 0.5rem 0;
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Media queries - consolidated */
@media (max-width: 1024px) {
    .dashboard {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard {
        grid-template-columns: 1fr;
    }
    
    .card {
        padding: 1.25rem;
    }
    
    header h1 {
        font-size: 1.75rem;
    }
    
    .section-title {
        font-size: 1.25rem;
    }
    
    .footer-container {
        flex-direction: column;
    }
    
    .footer-links {
        gap: 2rem;
    }
    
    .footer-section {
        flex: 1 1 100%;
    }
    
    .intro-section {
        padding: 1.5rem;
    }
    
    .intro-cards {
        grid-template-columns: 1fr;
    }
    
    .how-to-use {
        padding: 1.25rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 1rem;
    }
    
    .card {
        padding: 1rem;
    }
    
    .summary-stats {
        grid-template-columns: 1fr;
    }
    
    header {
        padding: 1.5rem;
    }
    
    header h1 {
        font-size: 1.5rem;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .site-footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-brand h2 {
        font-size: 1.5rem;
    }
}

.viewing-patterns-explainer {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.8), rgba(255, 255, 255, 0.8));
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0.75rem;
    padding: 1rem; /* Reduced padding from 1.5rem to 1rem */
    margin: 0.5rem 0; /* Reduced margin from 1.5rem to 0.5rem */
    font-size: 0.9375rem;
    line-height: 1.6;
    box-shadow: var(--shadow-md);
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    clear: both;
    overflow: hidden;
}

.viewing-patterns-explainer h3 {
    margin-bottom: 0.5rem; /* Reduced from 1rem to 0.5rem */
    color: var(--watch-section);
    font-weight: 700;
}

.viewing-patterns-explainer p {
    margin-bottom: 0.5rem; /* Reduced from 0.9375rem to 0.5rem */
}

/* Important: properly handle collapsible behavior */
.section-title.collapsed + #about-viewing-patterns.section-content {
    display: none;
}

.significance-explainer h3[style*="color: var(--watch-section)"] {
    color: var(--watch-section) !important;
}

/* Make sure the section collapses properly */
.section-title.collapsed + #about-viewing-patterns.section-content {
    display: none;
}

/* CSS to fix the missing section boxes for Blindspots and Recommendations */

/* Base styles for both explainers */
.blindspot-explainer, 
.recommendation-explainer,
#blindspot-explainer,
#recommendation-explainer,
#about-blindspot .blindspot-explainer,
#about-recommendation .recommendation-explainer {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.8), rgba(255, 255, 255, 0.8));
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0.75rem;
    padding: 1rem;
    margin: 0.5rem 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    clear: both;
    overflow: hidden;
}

/* Heading styles for blindspots */
.blindspot-explainer h3,
#blindspot-explainer h3,
#about-blindspot .blindspot-explainer h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--blindspot-section);
    font-weight: 700;
}

/* Heading styles for recommendations */
.recommendation-explainer h3,
#recommendation-explainer h3,
#about-recommendation .recommendation-explainer h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--rec-section);
    font-weight: 700;
}

/* Paragraph styles for both */
.blindspot-explainer p,
.recommendation-explainer p,
#blindspot-explainer p,
#recommendation-explainer p,
#about-blindspot .blindspot-explainer p,
#about-recommendation .recommendation-explainer p {
    margin-bottom: 0.5rem;
}

/* Fix display for the containers */
#about-blindspot,
#about-recommendation {
    display: block !important;
    margin: 0.5rem 0 !important;
    padding: 0 !important;
}

/* Ensure containers are visible when needed and hidden when collapsed */
.section-title.collapsed + #about-blindspot,
.section-title.collapsed + #about-recommendation {
    display: none !important;
}

/* Make sure the section content class is respected */
#about-blindspot.section-content,
#about-recommendation.section-content {
    display: block;
}

#about-blindspot.section-content.collapsed,
#about-recommendation.section-content.collapsed {
    display: none !important;
}

/* Fix specific issues with positioning */
.blindspots-section-title + #about-blindspot,
.recommendations-section-title + #about-recommendation {
    margin-top: 0.5rem !important;
}

/* Fix for high specificity cases */
.dashboard > #about-blindspot,
.dashboard > #about-recommendation {
    display: block !important;
    margin: 0.5rem 0 !important;
}

.dashboard > .section-title.collapsed + #about-blindspot.section-content,
.dashboard > .section-title.collapsed + #about-recommendation.section-content {
    display: none !important;
}

/* Analysis Success Message */
.analysis-success {
    display: none; /* Initially hidden */
    background-color: var(--card-bg);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    margin-bottom: 2rem;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    /* Match container width constraints */
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

.success-icon {
    font-size: 3rem;
    color: #10B981; /* Green color for success */
    margin-bottom: 1rem;
}

.analysis-success h2 {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.analysis-success p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.success-sections {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.success-section {
    background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.9));
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px; /* Increased from 120px */
}

.success-section i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.success-section span {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    word-wrap: break-word;
    width: 100%;
}

.success-section:nth-child(1) i {
    color: var(--watch-section); /* Cyan */
}

.success-section:nth-child(2) i {
    color: var(--rating-section); /* Purple */
}

.success-section:nth-child(3) i {
    color: var(--blindspot-section); /* Orange */
}

.success-section:nth-child(4) i {
    color: var(--rec-section); /* Pink */
}

.creator-note {
    background-color: rgba(241, 245, 249, 0.6);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-top: 1rem;
}

.creator-note p {
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.ko-fi-button {
    display: inline-block;
    background: linear-gradient(135deg, #FF5E5B, #FE9000);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
}

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

.ko-fi-button i {
    margin-right: 0.5rem;
}

/* Media queries for success message */
@media (max-width: 768px) {
    .success-sections {
        gap: 0.75rem;
    }
    
    .success-section {
        width: 130px; /* Increased from 100px */
        padding: 0.75rem;
    }
    
    .success-section span {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .analysis-success {
        padding: 1.5rem;
    }
    
    .success-sections {
        gap: 0.5rem;
    }
    
    .success-section {
        width: calc(50% - 0.5rem); /* Keep as is for very small screens */
        padding: 0.5rem;
    }
    
    .success-section:nth-child(4) span {
        font-size: 0.75rem; /* Smaller font specifically for Recommendations */
    }
    
    /* Alternative: display shorter text on very small screens */
    @media (max-width: 360px) {
        .success-section:nth-child(4) span {
            content: "Recs";
        }
    }
}