/* ========================================
           Design System Variables
           ======================================== */
        :root {
            /* Color Palette */
           --color-primary: #5B7E96;
           --color-primary-dark: #073B4F;
           --color-primary-light: #2C7DA0;
           --color-primary-soft: #E6F3F9;
            
           --color-secondary: #118AB2;
           --color-accent: #06D6A0;
           --color-accent-warm: #FFB703;
            
            /* Activity Levels */
           --color-high-activity: #97B64D;
           --color-medium-activity: #DE811B;
           --color-low-activity: #9F2241;
            
            /* Neutral Colors */
           --color-white: #FFFFFF;
           --color-offwhite: #F8F9FA;
           --color-light: #E9ECEF;
           --color-medium: #ADB5BD;
           --color-dark: #495057;
           --color-darker: #212529;
            
            /* Typography */
           --font-primary: 'Inter',-apple-system, BlinkMacSystemFont, sans-serif;
            
            /* Spacing */
           --space-xs: 0.25rem;
           --space-sm: 0.5rem;
           --space-md: 1rem;
           --space-lg: 1.5rem;
           --space-xl: 2rem;
           --space-2xl: 3rem;
            
            /* Borders & Shadows */
           --border-radius-sm: 4px;
           --border-radius-md: 8px;
           --border-radius-lg: 12px;
           --border-radius-xl: 16px;
           --border-radius-full: 9999px;
            
           --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
           --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
           --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
           --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
            
            /* Transitions */
           --transition-fast: 150ms ease;
           --transition-base: 250ms ease;
           --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
            
            /* Container */
           --container-max-width: 1400px;
        }

        /* ========================================
           Reset & Base Styles
           ======================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-primary);
            background: linear-gradient(135deg, var(--color-offwhite) 0%, var(--color-white) 100%);
            color: var(--color-darker);
            line-height: 1.5;
            min-height: 100vh;
        }

        /* ========================================
           Main Container
           ======================================== */
        .genome-map-container {
            max-width: var(--container-max-width);
            margin: 0 auto;
            padding: var(--space-xl);
        }

        /* ========================================
           Header Section
           ======================================== */
        .map-header {
            text-align: center;
            margin-bottom: var(--space-2xl);
            animation: fadeInDown 0.8s var(--transition-base);
        }

        .map-title {
            font-size: 2.5rem;
            font-weight: 700;
            letter-spacing:-0.02em;
            margin-bottom: var(--space-md);
            line-height: 1.2;
        }

        .title-highlight {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
        }

        .title-highlight::after {
            content: '';
            position: absolute;
            bottom:-5px;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
            border-radius: var(--border-radius-full);
            transform: scaleX(0);
            animation: slideIn 0.6s var(--transition-base) forwards 0.3s;
        }

        .map-subtitle {
            font-size: 1.125rem;
            color: var(--color-dark);
            max-width: 600px;
            margin: 0 auto;
        }

        /* ========================================
           Main Grid Layout
           ======================================== */
        .map-grid-layout {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: var(--space-xl);
            margin-bottom: var(--space-2xl);
        }

        /* ========================================
           Map Container
           ======================================== */
        .map-column {
            position: sticky;
            top: var(--space-xl);
            height: fit-content;
        }

        .map-container {
            background: var(--color-white);
            border-radius: var(--border-radius-xl);
            padding: var(--space-lg);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--color-light);
            transition: transform var(--transition-base), box-shadow var(--transition-base);
        }

        .map-container:hover {
            box-shadow: var(--shadow-xl);
        }

        /* SVG Map Styles */
        .africa-map {
            width: 100%;
            height: auto;
            display: block;
            margin-bottom: var(--space-lg);
        }

        /* Country Region Styles */
        .country-region {
            fill: var(--color-primary-soft);
            stroke: var(--color-white);
            stroke-width: 1.5;
            transition: all var(--transition-base);
            cursor: pointer;
        }

        /* Activity level colors */
        .country-region[data-activity="high"] {
            fill: var(--color-high-activity);
            opacity: 0.8;
        }

        .country-region[data-activity="medium"] {
            fill: var(--color-medium-activity);
            opacity: 0.8;
        }

        .country-region[data-activity="low"] {
            fill: var(--color-low-activity);
            opacity: 0.8;
        }

        /* Hover state */
        .country-region:hover {
            filter: brightness(1.1);
            stroke: var(--color-primary);
            stroke-width: 1.5;
            transform: translateY(-2px);
        }

        /* Active/Selected state */
        .country-region.active {
            stroke: var(--color-primary);
            stroke-width: 3;
            filter: drop-shadow(0 4px 8px rgba(11, 79, 108, 0.3));
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { filter: drop-shadow(0 4px 8px rgba(11, 79, 108, 0.3)); }
            50% { filter: drop-shadow(0 6px 12px rgba(11, 79, 108, 0.5)); }
            100% { filter: drop-shadow(0 4px 8px rgba(11, 79, 108, 0.3)); }
        }

        /* Map Legend */
        .map-legend {
            background: var(--color-offwhite);
            border-radius: var(--border-radius-lg);
            padding: var(--space-md);
            border: 1px solid var(--color-light);
        }

        .legend-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--color-dark);
            margin-bottom: var(--space-sm);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

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

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

        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: var(--border-radius-sm);
        }

        .legend-color.high-activity {
            background: var(--color-high-activity);
        }

        .legend-color.medium-activity {
            background: var(--color-medium-activity);
        }

        .legend-color.low-activity {
            background: var(--color-low-activity);
        }

        /* ========================================
           Content Column
           ======================================== */
        .content-column {
            min-height: 600px;
            position: relative;
        }

        /* Initial Message */
        .initial-message {
            background: var(--color-white);
            border-radius: var(--border-radius-xl);
            padding: var(--space-2xl) var(--space-xl);
            text-align: center;
            box-shadow: var(--shadow-md);
            border: 2px dashed var(--color-light);
            transition: all var(--transition-base);
            animation: fadeIn 0.5s ease;
        }

        .initial-message.hidden {
            display: none;
        }

        .message-icon {
            font-size: 4rem;
            color: var(--color-primary);
            margin-bottom: var(--space-lg);
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .initial-message h3 {
            font-size: 1.5rem;
            color: var(--color-darker);
            margin-bottom: var(--space-sm);
        }

        .initial-message p {
            color: var(--color-dark);
            max-width: 300px;
            margin: 0 auto;
        }

        /* Country Details */
        .country-details {
            position: relative;
        }

        .country-content {
            display: none;
            background: var(--color-white);
            border-radius: var(--border-radius-xl);
            padding: var(--space-xl);
            box-shadow: var(--shadow-lg);
            animation: slideInRight 0.4s var(--transition-base);
        }

        .country-content.active {
            display: block;
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-xl);
            padding-bottom: var(--space-md);
            border-bottom: 2px solid var(--color-light);
        }

        .country-name {
            font-size: 2rem;
            font-weight: 700;
            color: var(--color-darker);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .flag-icon {
            font-size: 2rem;
            line-height: 1;
        }

        .activity-badge {
            padding: var(--space-xs) var(--space-md);
            border-radius: var(--border-radius-full);
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .activity-badge.high {
            background: rgba(6, 214, 160, 0.15);
            color: #069e75;
            border: 1px solid rgba(6, 214, 160, 0.3);
        }

        .activity-badge.medium {
            background: rgba(255, 183, 3, 0.15);
            color: #b38202;
            border: 1px solid rgba(255, 183, 3, 0.3);
        }

        .activity-badge.low {
            background: rgba(239, 71, 111, 0.15);
            color: #b32b4b;
            border: 1px solid rgba(239, 71, 111, 0.3);
        }

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

        .stat-card {
            background: linear-gradient(135deg, var(--color-offwhite), var(--color-white));
            padding: var(--space-lg);
            border-radius: var(--border-radius-lg);
            text-align: center;
            border: 1px solid var(--color-light);
            transition: transform var(--transition-base), box-shadow var(--transition-base);
        }

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

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

        .stat-label {
            font-size: 0.75rem;
            color: var(--color-dark);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Info Sections */
        .info-sections {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-lg);
            margin-bottom: var(--space-xl);
        }

        .info-section {
            background: var(--color-offwhite);
            border-radius: var(--border-radius-lg);
            padding: var(--space-lg);
        }

        .info-section h3 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--color-darker);
            margin-bottom: var(--space-md);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .info-section h3 i {
            color: var(--color-primary);
        }

        .research-list,
        .institution-list {
            list-style: none;
        }

        .research-list li,
        .institution-list li {
            padding: var(--space-sm) 0;
            border-bottom: 1px solid var(--color-light);
            font-size: 0.875rem;
            color: var(--color-dark);
        }

        .research-list li:last-child,
        .institution-list li:last-child {
            border-bottom: none;
        }

        .research-list li::before {
            content: '🧬';
            margin-right: var(--space-sm);
            font-size: 0.75rem;
        }

        .institution-list li::before {
            content: '🏛️';
            margin-right: var(--space-sm);
            font-size: 0.75rem;
        }

        /* Publications */
        .publications-preview {
            background: linear-gradient(135deg, var(--color-primary-soft), var(--color-offwhite));
            border-radius: var(--border-radius-lg);
            padding: var(--space-lg);
            margin-top: var(--space-lg);
        }

        .publications-preview h3 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--color-darker);
            margin-bottom: var(--space-md);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }

        .publication-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-sm) 0;
            border-bottom: 1px solid rgba(255,255,255,0.3);
        }

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

        .pub-title {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--color-darker);
        }

        .pub-year {
            font-size: 0.75rem;
            background: var(--color-white);
            padding: var(--space-xs) var(--space-sm);
            border-radius: var(--border-radius-full);
            color: var(--color-primary);
            font-weight: 600;
        }

        /* Quick Stats Cards */
        .quick-stats-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-md);
            margin-top: var(--space-xl);
        }

        .stat-card-small {
            background: var(--color-white);
            border-radius: var(--border-radius-lg);
            padding: var(--space-md);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            border: 1px solid var(--color-light);
            transition: all var(--transition-base);
        }

        .stat-card-small:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
            border-color: var(--color-primary);
        }

        .stat-icon {
            font-size: 1.25rem;
            color: var(--color-primary);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-primary-soft);
            border-radius: var(--border-radius-md);
        }

        .stat-info {
            display: flex;
            flex-direction: column;
        }

        .stat-number {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--color-darker);
            line-height: 1.2;
        }

        .stat-card-small .stat-label {
            font-size: 0.75rem;
            color: var(--color-dark);
            text-transform: none;
        }

        /* Timeline Section */
        .timeline-section {
            margin-top: var(--space-2xl);
            padding-top: var(--space-xl);
            border-top: 1px solid var(--color-light);
        }

        .section-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--color-darker);
            text-align: center;
            margin-bottom: var(--space-xl);
        }

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

        .timeline::before {
            content: '';
            position: absolute;
            top: 30px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
            z-index: 0;
        }

        .timeline-item {
            background: var(--color-white);
            border-radius: var(--border-radius-lg);
            padding: var(--space-lg);
            box-shadow: var(--shadow-md);
            position: relative;
            z-index: 1;
            transition: transform var(--transition-base);
        }

        .timeline-item:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }

        .timeline-year {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--color-primary);
            margin-bottom: var(--space-sm);
            position: relative;
            display: inline-block;
        }

        .timeline-year::after {
            content: '';
            position: absolute;
            bottom:-5px;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--color-accent);
            border-radius: var(--border-radius-full);
        }

        .timeline-content h3 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--color-darker);
            margin-bottom: var(--space-xs);
        }

        .timeline-content p {
            font-size: 0.875rem;
            color: var(--color-dark);
            line-height: 1.4;
        }

        /* Tooltip */
        .map-tooltip {
            position: absolute;
            background: var(--color-darker);
            color: white;
            padding: 8px 12px;
            border-radius: var(--border-radius-md);
            font-size: 0.875rem;
            font-weight: 500;
            pointer-events: none;
            z-index: 1000;
            opacity: 0;
            transition: opacity var(--transition-fast);
            box-shadow: var(--shadow-md);
            white-space: nowrap;
        }

        .map-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 20px;
            border-width: 6px;
            border-style: solid;
            border-color: var(--color-darker) transparent transparent transparent;
        }

        .map-tooltip.visible {
            opacity: 1;
        }

        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

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

        @keyframes slideIn {
            from { transform: scaleX(0); }
            to { transform: scaleX(1); }
        }

        /* ========================================
           Responsive Design
           ======================================== */
        @media (max-width: 1200px) {
            .map-title {
                font-size: 2.25rem;
            }
        }

        @media (max-width: 992px) {
            .map-grid-layout {
                grid-template-columns: 1fr;
            }
            
            .map-column {
                position: static;
            }
            
            .map-container {
                max-width: 700px;
                margin: 0 auto;
            }
            
            .info-sections {
                grid-template-columns: 1fr;
            }
            
            .timeline {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .timeline::before {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .map-header {
                margin-bottom: var(--space-xl);
            }
            
            .map-title {
                font-size: 2rem;
            }
            
            .map-subtitle {
                font-size: 1rem;
            }
            
            .content-header {
                flex-direction: column;
                align-items: flex-start;
                gap: var(--space-sm);
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .quick-stats-cards {
                grid-template-columns: 1fr;
            }
            
            .timeline {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .genome-map-container {
                padding: var(--space-md);
            }
            
            .map-title {
                font-size: 1.75rem;
            }
            
            .map-container {
                padding: var(--space-md);
            }
            
            .country-content {
                padding: var(--space-lg);
            }
            
            .country-name {
                font-size: 1.5rem;
            }
            
            .legend-items {
                flex-direction: column;
                gap: var(--space-xs);
            }
            
            .initial-message {
                padding: var(--space-xl) var(--space-lg);
            }
            
            .message-icon {
                font-size: 3rem;
            }
        }

        /* Reduced Motion */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }