/* Force hide legacy dropdowns - replaced by quick switch tabs */
#detailViewDatasetSwitcher,
#heatmapTypeSelect {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ===== Z-Score Filter Slider Styling (dual-thumb range sliders) ===== */
/* Each .dual-range wrapper contains a visible coloured track div and two
   overlapping <input type="range"> elements. The inputs themselves are
   transparent and full-width; only their thumbs are visible. */

#zscoreFilterBox .dual-range input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    z-index: 2;
}

#zscoreFilterBox .dual-range input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
    height: 6px;
}
#zscoreFilterBox .dual-range input[type="range"]::-moz-range-track {
    background: transparent;
    border: none;
    height: 6px;
}

/* Thumb: 12px circle centred on the 6px coloured track. For webkit,
   margin-top recenters the thumb on the runnable-track. Firefox auto-centers. */
#zscoreFilterBox .dual-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    border: 2px solid #8b5cf6;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    margin-top: -3px;       /* (6px track - 12px thumb) / 2 */
    transition: transform 0.15s ease;
}
#zscoreFilterBox .dual-range input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 5px rgba(139, 92, 246, 0.4);
}
#zscoreFilterBox .dual-range input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    border: 2px solid #8b5cf6;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
#zscoreFilterBox .dual-range input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
}

/* ===== CSS Variables & Constants ===== */
:root {
    /* Primary colors - refined blue theme */
    --primary-color: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #dbeafe;
    --primary-lighter: #eff6ff;
    --secondary-color: #475569;
    --accent-color: #0ea5e9;

    /* Cell line colors */
    --color-combined: #059669;
    --color-rpe1: #dc2626;
    --color-mcf10a: #7c3aed;

    /* Text colors */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-light: #94a3b8;
    --text-color: #334155;
    --text-muted: #64748b;

    /* Background colors */
    --bg-light: #ffffff;
    --bg-off-white: #f8fafc;
    --background-color: #ffffff;
    --panel-background: #f1f5f9;
    --panel-bg: #f1f5f9;
    --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    --bg-hero: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);

    /* Interactive colors */
    --positive-color: #059669;
    --negative-color: #dc2626;
    --success-color: #059669;
    --danger-color: #dc2626;
    --hover-color: #f1f5f9;
    --hover-accent: #e0f2fe;

    /* Border and shadow */
    --border-light: #e2e8f0;
    --border-color: #cbd5e1;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.15);

    /* Layout */
    --border-radius-sm: 6px;
    --border-radius: 10px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
    --container-width: 1600px;

    /* Typography - refined */
    --font-family: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-display: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.9375rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --line-height-base: 1.6;
    --line-height-tight: 1.25;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --letter-spacing-tight: -0.025em;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
}


/* ===== Base Elements ===== */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-color);
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--primary-light);
    color: var(--primary-dark);
}

/* ===== Unified Button System ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition);
    background: white;
    color: var(--text-color);
    text-decoration: none;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.btn:hover {
    background: var(--hover-color);
    border-color: var(--primary-color);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    box-shadow: var(--card-shadow);
}

.btn:active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #1e40af 100%);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.btn-secondary {
    background: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
}

.btn-secondary:hover {
    background: #334155;
    border-color: #334155;
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-lighter);
    color: var(--primary-dark);
}

.btn-sm {
    padding: 6px 12px;
    font-size: var(--font-size-xs);
    border-radius: var(--border-radius-sm);
}

.btn-lg {
    padding: 12px 24px;
    font-size: var(--font-size-md);
    border-radius: var(--border-radius-lg);
}

/* ===== Layout Components ===== */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ===== Controls Bar (scrolls with page, stays below navbar) ===== */
.fixed-controls-bar {
    position: relative;
    min-width: 1300px;  /* Minimum width to prevent shrinking */
    z-index: 30;  /* Below navbar (z-index 1000) so it scrolls behind it */
    background-color: var(--bg-light);
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fixed-controls-bar .search-update-container {
    width: 800px !important;
    min-width: 800px !important;
    max-width: 800px !important;
    flex-shrink: 0;
}

.fixed-controls-bar .search-container {
    max-width: 500px;
    overflow: visible;
}

.fixed-controls-bar .selected-genes {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 4px;
    /* Allow content to grow beyond wrapper */
    width: auto !important;
    max-width: none !important;
}

.fixed-controls-bar .selected-genes .gene-box {
    flex-shrink: 0 !important;
}

/* Genes scroll wrapper - hide native scrollbar, use custom one */
.genes-scroll-wrapper {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.genes-scroll-wrapper::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Custom scrollbar styling */
.genes-scrollbar-thumb:hover {
    background: #64748b !important;
}

.fixed-controls-spacer {
    display: none;  /* Not needed since controls bar scrolls with page */
}

/* Fixed navbar - prevent wrapping */
.nav-tabs {
    min-width: 1300px;
}

.nav-tabs .container {
    width: 1300px !important;
    max-width: 1300px !important;
    min-width: 1300px !important;
    flex-shrink: 0;
}

.nav-tabs .nav-list {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    flex: 1;
    justify-content: center;
}

/* ===== Navigation ===== */
.navbar {
    /* Navbar specific styles */
}

/* ===== Hero Section ===== */
.hero-section {
    min-height: 100vh;
    background: #1e293b;
    padding: 12rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.custom-navbar-bg {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 50%, #1e3a5f 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

/* Subtle animated gradient overlay */
.custom-navbar-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(37, 99, 235, 0.08) 25%,
        rgba(14, 165, 233, 0.12) 50%,
        rgba(37, 99, 235, 0.08) 75%,
        transparent 100%
    );
    pointer-events: none;
}

/* Top accent line */
.custom-navbar-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--primary-color) 20%,
        var(--accent-color) 50%,
        var(--primary-color) 80%,
        transparent 100%
    );
    opacity: 0.8;
}

/* Navbar-specific nav-link styles */
.custom-navbar-bg .nav-link,
.custom-navbar-bg .download-link {
    color: rgba(255, 255, 255, 0.75);
    padding: 12px 22px;
    border-radius: var(--border-radius);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: var(--transition);
    background: transparent;
    letter-spacing: 0.02em;
    position: relative;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Hover glow effect */
.custom-navbar-bg .nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius);
    background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.custom-navbar-bg .nav-link:hover::before {
    opacity: 1;
}

.custom-navbar-bg .nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    -webkit-transform: translateX(-50%) scaleX(0);
    transform: translateX(-50%) scaleX(0);
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
    border-radius: 2px;
    -webkit-transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-navbar-bg .nav-link:hover:not(.active)::after {
    -webkit-transform: translateX(-50%) scaleX(1);
    transform: translateX(-50%) scaleX(1);
}

.custom-navbar-bg .nav-link:hover:not(.active),
.custom-navbar-bg .download-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: white;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

/* Separator between words in nav links */
.nav-separator {
    display: inline-block;
    margin: 0 6px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

.custom-navbar-bg .nav-link.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: white;
    font-weight: var(--font-weight-semibold);
    box-shadow:
        0 4px 20px rgba(37, 99, 235, 0.5),
        0 0 40px rgba(37, 99, 235, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-navbar-bg .nav-link.active::before,
.custom-navbar-bg .nav-link.active::after {
    display: none;
}

.custom-navbar-bg .nav-link.active:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow:
        0 6px 25px rgba(37, 99, 235, 0.6),
        0 0 50px rgba(37, 99, 235, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Unified icon colors in navbar */
.custom-navbar-bg .nav-link i,
.custom-navbar-bg .download-link i {
    color: var(--accent-color);
    opacity: 0.9;
    font-size: 1em;
    transition: var(--transition);
    -webkit-filter: drop-shadow(0 0 3px rgba(14, 165, 233, 0.3));
    filter: drop-shadow(0 0 3px rgba(14, 165, 233, 0.3));
}

.custom-navbar-bg .nav-link:hover i {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.5));
    filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.5));
}

.custom-navbar-bg .nav-link.active i {
    color: white;
    opacity: 1;
    -webkit-filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}

/* Download link special styling */
.custom-navbar-bg .download-link {
    border: 1px solid rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.08);
}

.custom-navbar-bg .download-link:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.15);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.custom-navbar-bg .download-link i {
    color: #10b981;
}

/* Nav wrapper layout */
.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 2rem;
}

/* Brand/Logo styling */
.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.nav-brand:hover {
    background: rgba(255, 255, 255, 0.05);
}

.brand-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    border-radius: 10px;
    box-shadow:
        0 4px 15px rgba(37, 99, 235, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

.brand-icon i {
    color: white;
    font-size: 1.25rem;
    -webkit-filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-title {
    font-family: var(--font-family-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.brand-subtitle {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Columbia University attribution */
a.nav-attribution {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    text-decoration: none;
    cursor: pointer;
}

a.nav-attribution:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.columbia-logo {
    height: 32px;
    width: auto;
    opacity: 0.9;
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
}

.attribution-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #185adb 0%, #0ea5e9 100%);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(24, 90, 219, 0.3);
}

.attribution-icon i {
    color: white;
    font-size: 1rem;
}

.attribution-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.attribution-lab {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.attribution-uni {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.nav-attribution .attribution-divider {
    color: rgba(255, 255, 255, 0.3);
}

/* Brand icon subtle animation */
@-webkit-keyframes dnaRotate {
    0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    25% { -webkit-transform: rotate(3deg); transform: rotate(3deg); }
    75% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); }
}
@keyframes dnaRotate {
    0%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    25% { -webkit-transform: rotate(3deg); transform: rotate(3deg); }
    75% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); }
}

.nav-brand:hover .brand-icon {
    -webkit-animation: dnaRotate 0.5s ease-in-out;
    animation: dnaRotate 0.5s ease-in-out;
}

.nav-brand:hover .brand-icon i {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.badge-title-container {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
    margin-top: 2rem;
    width: 100%;
    padding: 0;
}

.badge-title {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%);
    border: none;
    border-radius: var(--border-radius-xl);
    padding: 2.5rem 4rem;
    max-width: 100%;
    width: 100%;
    text-align: center;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.badge-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color), var(--color-combined));
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
}

.badge-title::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}

.badge-text {
    font-family: var(--font-family-display);
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--text-primary) !important;
    margin: 0;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #0ea5e9 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: var(--letter-spacing-tight);
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
.badge-title {
    padding: 1rem 1.5rem;
}

.badge-text {
    font-size: 1.1rem;
}
}



.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);
    opacity: 0.1;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hero-title {
    font-family: 'Roboto', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    letter-spacing: -0.02em;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-top: 2rem;
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.hero-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.hero-image {
    margin: 0;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.hero-image-content {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1024px) {
    .hero-title {
        font-size: 2.8rem;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
    }

    .hero-image {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 6rem 0 3rem;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-text {
        font-size: 1.1rem;
    }

    .hero-content {
        padding: 0 1rem;
    }

    .content-grid {
        padding: 1.5rem;
    }
}

/* ===== Content Sections ===== */
.content-section {
    /* Content section specific styles */
}

/* ===== Interactive Components ===== */
.button {
    /* Button base styles */
}

.dropdown {
    /* Dropdown base styles */
}

/* ===== Data Visualization ===== */
.heatmap-container {
    display: flex;
    align-items: center;
    position: relative;
    gap: 20px; /* Add gap between heatmap and legend */
    margin-top: -60px;
}

.control-panel-header {
    position: relative;
    text-align: center;
    width: 100%;
    margin: 2rem 0;
    padding-bottom: 0.5rem;
    }

.panel-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 2.5rem;
color: #2D5192;
letter-spacing: -0.02em;
margin-bottom: 0.75rem;
}

.title-underline {
height: 4px;
width: 120px;
background: linear-gradient(90deg, #2D5192, #A50FA9);
margin: 0 auto;
border-radius: 2px;
}

/* For responsive design */
@media (max-width: 768px) {
.panel-title {
    font-size: 2rem;
}

.title-underline {
    width: 100px;
}
}


/* ===== Utility Classes ===== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
    :root {
        --container-width: 90%;
        --font-size-3xl: 2.5rem;
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-3xl: 2rem;
        --spacing-3xl: 3rem;
    }
}

       
.submenu-group {
    position: relative;
    border-bottom: 1px solid #eee;
}

.submenu-group:last-child {
    border-bottom: none;
}

.submenu-group-title {
    display: block;
    padding: 10px 16px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    position: relative;
}

.submenu-group-title:hover {
    background-color: #f7fafc;
}

.submenu-group-title::after {
    content: '▼';
    position: absolute;
    right: 16px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 0.7em;
    -webkit-transition: transform 0.2s;
    transition: transform 0.2s;
}

.submenu-group-title.expanded::after {
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}

.submenu-items {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

.submenu-items.expanded {
    max-height: 500px;
    transition: max-height 0.5s ease-in;
}

.submenu-link {
    display: block;
    padding: 8px 16px 8px 32px;
    color: #4a5568;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.submenu-link:hover {
    background-color: #f7fafc;
    color: #2b6cb0;
}

.submenu-link.active {
    background-color: #ebf8ff;
    color: #2b6cb0;
    font-weight: 600;
}


/* Update container styles - simplified without boxes */
.plot-container {
    background: transparent;
    border: none;
    padding: var(--spacing-sm);
    margin-top: 80px !important;
    margin-bottom: 0;
}

/* Add subtle section backgrounds */
.section-container {
    background: var(--panel-background);
    padding: 2rem;
    margin: 2rem 0;
    border-radius: 12px;
}

/* Update table styles */
.gene-table {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
}

/* Controls section with different background */
#heatmapControls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-bottom: 10rem;
    padding: 1rem;
    margin: 0 auto;
    max-width: 1200px;
}

/* Search container with professional styling */
.search-update-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    margin: 0 auto;
    max-width: 800px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: var(--border-radius-lg);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(203, 213, 225, 0.5);
    position: relative;
}

.search-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#geneInput {
    border: none;
    outline: none;
    padding: 6px;
    min-width: 150px;
    flex-grow: 1;
    font-size: 0.9375rem;
}

.selected-genes {
    max-width: 100%;  /* Ensure selected genes fit within the container */
    overflow-x: auto;  /* Add horizontal scroll if needed */
}

.update-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

/* Update input container for contrast */
.input-container {
    background: var(--background-color);
    border: 1px solid var(--border-color);
}


/* 
:root {
    --primary-color: #2D3748;
    --secondary-color: #4299E1;
    --background-color: #F7FAFC;
    --text-color: #1A202C;
    --border-color: #E2E8F0;
} */

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--background-color);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
}

.hero-title {
    font-family: 'Roboto', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    letter-spacing: -0.02em;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.hero-text {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #000000;
    max-width: 65ch;
    margin: 0 auto 1.5rem;
}

        
#mainContent {
    padding-top: 140px;  /* Increase padding to create space below navbar */
}

.tooltip {
    position: absolute;
    opacity: 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 1rem;
    z-index: 3;
    pointer-events: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.highlighted-cell {
    stroke: #000;
    stroke-width: 0px;
}

.greyed-out {
    opacity: 0.2;
}

.highlighted-label {
    font-size: 20px;
    font-weight: bold;
}

.heatmap-container {
    display: flex;
    align-items: flex-start;
    position: relative;
    gap: 20px; /* Add gap between heatmap and legend */
    margin-top: -60px;
    min-height: 1500px;  /* Match heatmap canvas height */
    min-width: 1650px;  /* Ensure container doesn't shrink (heatmap 1400 + sidebar 250) */
}

#heatmapContainer {
    min-height: 1500px;
    min-width: 1400px;
    flex-shrink: 0;  /* Don't shrink the heatmap */
    position: relative;  /* Required for SVG overlay positioning */
}

.legend-title-vertical {
    font-size: 12px;
    font-weight: bold;
}

.legend-label-vertical {
    font-size: 11px;
}

/* Legend containers inside the wrapper - no absolute positioning needed */
.legend-container-gi-score, .legend-container-af-score, .legend-container-odds-ratio {
    position: relative;
    top: auto;
    left: auto;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    overflow: visible;
}

.legend-container-gi-score svg, .legend-container-odds-ratio svg {
    overflow: visible;
}

/* Unified nav-link styles */
.nav-link, .download-link {
    padding: 8px 16px;
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius);
    transition: var(--transition);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: transparent;
}

.nav-link:hover:not(.active),
.download-link:hover {
    background-color: var(--background-color);
    color: var(--primary-color);
}

.nav-link:focus,
.download-link:focus {
    outline: none;
}

.nav-link:focus-visible,
.download-link:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.nav-link.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: var(--font-weight-semibold);
}

.nav-link.active:hover {
    background-color: var(--primary-dark);
    color: white;
}



/* For the right-aligned "About" tab */
.nav-tabs .ms-auto {
    margin-left: auto;
}

canvas, svg {
    position: absolute;
}

#layer_heatmap {
    z-index: 1;
}

#layer_mask, #network_view {
    z-index: 2;
}

/* .plot-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 1.5rem;
    margin-top: 0;
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: row;
    margin-bottom: 900px;
} */

/* .gene-table {
    font-family: 'Inter', sans-serif;
    border-collapse: collapse;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
} */

.gene-table th {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-md) var(--spacing-lg);
    position: sticky;
    top: 0;
    z-index: 10;
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
    border: none;
}

.gene-table th:first-child {
    border-radius: var(--border-radius) 0 0 0;
}

.gene-table th:last-child {
    border-radius: 0 var(--border-radius) 0 0;
}

.gene-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
}

.gene-table tr:nth-child(even) {
    background-color: var(--bg-off-white);
}

.gene-table tr:hover {
    background-color: var(--hover-accent);
}

.gene-table tr.selected {
    background-color: var(--primary-light) !important;
}


.input-container {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    z-index: 1;
    border-radius: var(--border-radius-lg);
    border: 2px solid var(--border-light);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.07),
        0 2px 4px -2px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: var(--transition);
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    width: 800px;
    margin-right: 10px;
    min-height: 52px;
}

.input-container:focus-within {
    border-color: var(--primary-color);
    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.12),
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.gene-box {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 6px 14px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    transition: var(--transition);
}

.gene-box:hover {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
}

#geneInput {
width: 50%;
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}

.selected-genes {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    gap: 5px;
    max-width: calc(100% - 150px);
    padding-bottom: 3px;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 transparent;
}

/* Narrow scrollbar for selected genes */
.selected-genes::-webkit-scrollbar {
    height: 3px;
}

.selected-genes::-webkit-scrollbar-track {
    background: transparent;
}

.selected-genes::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 2px;
}

.selected-genes::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.gene-box span {
    margin-left: 5px;
    cursor: pointer;
    font-weight: bold;
}

.form-select {
    border-radius: 8px;
    padding: 0.75rem;
    min-width: 180px;        /* Consistent width for dropdowns */
    border: 1px solid var(--border-color);
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.form-select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

#landingPage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #F7FAFC 0%, #EDF2F7 100%);
}

#landingPage h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.button-group {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}

.site-header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.hero-section {
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 12rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 3rem;
    text-align: center;
    color: #000000;
    background: none;
    -webkit-background-clip: none;
    -webkit-text-fill-color: #000000;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-top: 2rem;
}

.hero-text {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #000000;
    max-width: 65ch;
    margin: 0 auto 1.5rem;
}

/* Animation for dropdown menus */
@-webkit-keyframes fadeInDropdown {
    from { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInDropdown {
    from { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

/* This part fixes the dropdowns themselves */
[id$="Submenu"] {
    background-color: white !important; /* Force white background */
    border: 1px solid #e2e8f0; /* Light border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}


[id$="Submenu"][style*="display: block"] {
    -webkit-animation: fadeInDropdown 0.2s ease-out forwards;
    animation: fadeInDropdown 0.2s ease-out forwards;
}



@media (max-width: 1024px) {
    .hero-title {
        font-size: 2.8rem;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-image {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 6rem 0 3rem;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-text {
        font-size: 1.1rem;
    }

    .hero-content {
        padding: 0 1rem;
    }
}

.cta-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 4rem;
}

.cta-button {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.cta-button:hover {
    opacity: 0.9;
}

.cta-button.primary {
    background: var(--primary-color);
    color: white;
}

.cta-button.secondary {
    background: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

        /* Navbar container */
/* .nav-tabs {
    background: white;
    padding: 1rem 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    width: 100%;

    position: fixed;
    top: 0;
    z-index: 1000;
} */

/* Navigation list */
.nav-list {
    display: flex;
    justify-content: center;
    width: auto;
    margin: 0 auto;
    gap: 2rem; /* Increase spacing between tabs */
}


/* Individual nav items */
.nav-item {
    position: relative;
}

.nav-item div[id$="Submenu"] {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--background-color);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    z-index: 1001;
    width: max-content;
    min-width: 200px;
    border: 1px solid var(--border-color);
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    visibility: hidden;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.nav-item div[id$="Submenu"][style*="display: block"] {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    visibility: visible;
}

.submenu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 0;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.submenu-link::before {
content: none; /* This removes the ::before element completely */
}



.submenu-link:hover,
.submenu-link:focus,
.submenu-link.active {
    background-color: #36566c; /* Light gray background instead of purple */
    color: #2b6cb0; /* Blue text color instead of purple */
    font-weight: 600;
}

.nav-item:hover .submenu-link,
.nav-item:focus-within .submenu-link {
    color: #4a5568; /* Dark gray instead of white */
}

.nav-item:hover .submenu-link::before,
.nav-item:focus-within .submenu-link::before {
    opacity: 1;
}

/* Keep About tab on the right */
.nav-item-about {
    position: absolute;
    right: 2rem;
    }

.nav-item:not(.nav-item-about) {
    display: flex;
    align-items: center;
    }


/* Add padding to the main content container */
#mainContent {
    padding-top: 140px;  /* navbar height + extra space below */
    flex: 1;
}

/* For the landing page */
#landingPage {
    padding-top: 110px;  /* Space below navbar for landing page */
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* For other containers that might need adjustment */
.container {
    padding-top: 5px;
}

/* Any other top-level containers */
.section-container {
    padding-top: 20px;
}

.nav-link i {
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
}


.nav-link:hover i {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
}

/* Navigation links */
.nav-link {
    padding: 0.75rem 1.25rem;
    color: #4a5568;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    text-decoration: none;     /* Remove underline */
    display: block;
}

.scroll-reveal-container {
    overflow: hidden; /* Keeps the text hidden until revealed */
}

.reveal-text {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
    color: #000000;
}

.reveal-text.active {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.submenu-link {
    display: block;
    padding: 8px 16px;
    color: #4a5568;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 0;
    font-weight: 500;
    text-align: left;
}

.submenu-link:hover {
    background-color: #f7fafc;
    color: #797b7e;
}

.intro-section {
    padding: 1.5rem 0;
    font-family: var(--font-family);
}

.intro-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 3rem;
}

.intro-text-column {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.intro-visual-column {
    flex: 1 1 35%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.intro-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(226, 232, 240, 0.8);
    height: 100%;
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.intro-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.intro-card:hover::before {
    opacity: 1;
}

.intro-subtitle {
    font-family: var(--font-family-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-light);
    letter-spacing: var(--letter-spacing-tight);
}

.intro-card p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.highlight {
    color: var(--primary-color);
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-light) 0%, transparent 100%);
    padding: 0.1em 0.3em;
    border-radius: 4px;
}

.score-indicators {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.score-indicator {
    display: flex;
    align-items: center;
    padding: 1.25rem;
    border-radius: var(--border-radius);
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-light);
    transition: var(--transition);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.score-indicator:hover {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
    box-shadow: var(--card-shadow);
}

.score-indicator.negative {
    border-left: 4px solid var(--negative-color);
}

.score-indicator.positive {
    border-left: 4px solid var(--positive-color);
}

.indicator-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 1rem;
    font-size: 1.25rem;
    font-weight: bold;
    flex-shrink: 0;
}

.score-indicator.negative .indicator-icon {
    background: linear-gradient(135deg, var(--negative-color) 0%, #ef4444 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.score-indicator.positive .indicator-icon {
    background: linear-gradient(135deg, var(--positive-color) 0%, #10b981 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.indicator-text {
    display: flex;
    flex-direction: column;
}

.indicator-text strong {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.indicator-text span {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 2px;
}

.feature-card {
    display: flex;
    flex-direction: column;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.feature-list li:hover {
    background: rgba(37, 99, 235, 0.04);
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, var(--primary-lighter) 0%, var(--primary-light) 100%);
    color: var(--primary-color);
    flex-shrink: 0;
    font-size: 1rem;
    transition: var(--transition);
}

.feature-list li:hover .feature-icon {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: white;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.feature-text {
    display: flex;
    flex-direction: column;
    padding-top: 2px;
}

.feature-text strong {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.feature-text span {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 2px;
    line-height: 1.5;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
.intro-content {
    flex-direction: column;
}

.intro-text-column,
.intro-visual-column {
    flex: 1 1 100%;
}
}

@media (max-width: 768px) {
.intro-section {
    padding: 1rem 0;
}

.intro-subtitle {
    font-size: 1.25rem;
}
}


        



/* ===== Knockout Image Styles ===== */
.knockout-row {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.knockout-image {
    margin: 0 auto;
}

/* ===== Info Page Specific Styles ===== */
#infoPage.hero-section {
    background: white;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    color: #1e293b;
    overflow: visible !important;
}

#infoPage .hero-content {
    color: #1e293b;
    max-width: 1600px !important;
}

/* Features Tab - Allow SVGs to be much larger */
#featuresTab {
    max-width: 1600px !important;
}

#featuresTab svg {
    display: block;
    margin: 0 auto;
}

#infoPage .intro-card {
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid var(--border-color);
    color: #1e293b;
}

#infoPage .intro-subtitle {
    color: #1478f1;
}

#infoPage .intro-card p {
    color: #475569;
}

/* ===== Dataset Quick Switch Tabs ===== */
#datasetTabsContainer {
    transition: all 0.3s ease;
}

/* Hide searchOnlyContainer when datasetTabsContainer is visible */
#searchOnlyContainer {
    display: none !important;
}

.dataset-tab {
    padding: 8px 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    color: var(--text-color);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    white-space: nowrap;
    /* Ensure clicks are always captured */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.dataset-tab:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: var(--primary-color);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dataset-tab.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Cell line specific active colors */
.dataset-tab.active[data-dataset*="GI-DDR"] {
    background: linear-gradient(135deg, var(--color-combined) 0%, #10b981 100%);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.dataset-tab.active[data-dataset*="rpe-"] {
    background: linear-gradient(135deg, var(--color-rpe1) 0%, #ef4444 100%);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.dataset-tab.active[data-dataset*="mcf10a-"] {
    background: linear-gradient(135deg, var(--color-mcf10a) 0%, #8b5cf6 100%);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* Heatmap Type Tabs */
.heatmap-type-tab {
    padding: 6px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    color: var(--text-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    /* Ensure clicks are always captured */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.heatmap-type-tab:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: var(--primary-color);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.heatmap-type-tab.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}

.heatmap-type-tab:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.heatmap-type-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto; /* Allow clicks so we can show feedback */
}

/* Search and Download buttons - professional style */
#geneButtonContainer .btn {
    padding: 6px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    color: var(--text-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#geneButtonContainer .btn:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: var(--primary-color);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#geneButtonContainer .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

#geneButtonContainer .btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #1e40af 100%);
    border-color: transparent;
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
}

#geneButtonContainer .btn-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #334155 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(71, 85, 105, 0.3);
}

#geneButtonContainer .btn-secondary:hover {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    border-color: #4b5563;
}

/* Search Dataset Tabs */
.search-dataset-tab {
    padding: 6px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    /* Ensure clicks are always captured */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.search-dataset-tab:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: var(--secondary-color);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-dataset-tab.active {
    color: white !important;
    border-color: transparent;
}

.search-dataset-tab.active[data-cellline="combined"] {
    background: linear-gradient(135deg, var(--color-combined) 0%, #10b981 100%);
    border-color: transparent;
    color: white !important;
    box-shadow: 0 4px 10px rgba(5, 150, 105, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}

.search-dataset-tab.active[data-cellline="rpe1"] {
    background: linear-gradient(135deg, var(--color-rpe1) 0%, #ef4444 100%);
    border-color: transparent;
    color: white !important;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}

.search-dataset-tab.active[data-cellline="mcf10a"] {
    background: linear-gradient(135deg, var(--color-mcf10a) 0%, #8b5cf6 100%);
    border-color: transparent;
    color: white !important;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* ===== Professional Animations & Polish ===== */

/* Smooth page load animation - with webkit prefixes for Chrome */
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@-webkit-keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@-webkit-keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* Apply animations */
.intro-card {
    -webkit-animation: fadeInUp 0.6s ease-out forwards;
    animation: fadeInUp 0.6s ease-out forwards;
}

.intro-card:nth-child(1) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.intro-card:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.intro-card:nth-child(3) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }

.badge-title {
    -webkit-animation: fadeIn 0.8s ease-out;
    animation: fadeIn 0.8s ease-out;
}

/* Loading state for buttons */
.btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    -webkit-animation: spin 0.8s linear infinite;
    animation: spin 0.8s linear infinite;
}

/* Focus states for accessibility */
*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Smooth scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-off-white);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
    border: 2px solid var(--bg-off-white);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Tooltip polish */
.tooltip {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
    color: white;
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Professional form elements */
.form-select {
    border-radius: var(--border-radius);
    padding: 0.625rem 1rem;
    border: 2px solid var(--border-light);
    background-color: white;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: var(--transition);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.form-select:hover {
    border-color: var(--secondary-color);
}

.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    outline: none;
}

/* Search container polish */
.search-update-container {
    background: linear-gradient(135deg, var(--bg-off-white) 0%, var(--panel-background) 100%);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.8);
    border: 1px solid var(--border-light);
}

/* Panel title polish */
.panel-title {
    font-family: var(--font-family-display);
    font-weight: 700;
    font-size: var(--font-size-4xl);
    color: var(--primary-color);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: 0.75rem;
}

.title-underline {
    height: 4px;
    width: 80px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    margin: 0 auto;
    border-radius: 2px;
}

/* Hero section polish */
.hero-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    position: relative;
    padding-top: 12rem;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(14, 165, 233, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Professional card hover states - use GPU acceleration carefully */
.intro-card:hover,
.feature-card:hover {
    will-change: transform, box-shadow;
}

/* Smooth image loading */
img {
    opacity: 1;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

img.loading {
    opacity: 0;
}

/* Link styling */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
}

/* Keep your other existing styles that are specific to your application */

/* ===== Premium Enhancements ===== */

/* Animated gradient border for control panels */
@-webkit-keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Subtle pulse for active dataset tabs */
@-webkit-keyframes subtlePulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255,255,255,0.2); }
    50% { box-shadow: 0 4px 20px rgba(37, 99, 235, 0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
}
@keyframes subtlePulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255,255,255,0.2); }
    50% { box-shadow: 0 4px 20px rgba(37, 99, 235, 0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
}

.dataset-tab.active,
.heatmap-type-tab.active,
.search-dataset-tab.active {
    -webkit-animation: subtlePulse 3s ease-in-out infinite;
    animation: subtlePulse 3s ease-in-out infinite;
}

/* Enhanced search input glow */
#geneInput:focus {
    outline: none;
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
}

.input-container:focus-within {
    border-color: var(--primary-color);
    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.15),
        0 0 20px rgba(37, 99, 235, 0.1),
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Premium button shine effect */
.btn-primary::before,
.dataset-tab.active::before,
.heatmap-type-tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    -webkit-transition: left 0.5s ease;
    transition: left 0.5s ease;
    pointer-events: none; /* Don't block clicks */
}

.btn-primary:hover::before,
.dataset-tab.active:hover::before,
.heatmap-type-tab.active:hover::before {
    left: 100%;
}

/* Glass morphism effect for control panels */
#datasetTabsContainer > div > div {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Enhanced gene box with gradient animation on hover */
.gene-box {
    position: relative;
    overflow: hidden;
}

.gene-box::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.gene-box:hover::after {
    opacity: 1;
}

/* Smooth dataset switching transition */
#heatmapCanvas,
#heatmap svg {
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

/* Enhanced tooltip with arrow */
.tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(15, 23, 42, 0.95);
}

/* Status indicator dot for active dataset */
.dataset-tab.active::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Refined scrollbar for tables */
.gene-table-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.gene-table-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.gene-table-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    border-radius: 4px;
}

.gene-table-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
}

/* Floating label badges animation */
#datasetTabsContainer [style*="position: absolute"][style*="top: -12px"] {
    -webkit-animation: fadeInUp 0.4s ease-out;
    animation: fadeInUp 0.4s ease-out;
}

/* Enhanced network graph node styling */
.network-node {
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.network-node:hover {
    -webkit-filter: brightness(1.1) drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    filter: brightness(1.1) drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* Keyboard focus indicators */
button:focus-visible,
.dataset-tab:focus-visible,
.heatmap-type-tab:focus-visible,
.search-dataset-tab:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    z-index: 1;
}

/* Loading skeleton effect */
@-webkit-keyframes skeletonLoading {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
@keyframes skeletonLoading {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 0px, #e0e0e0 40px, #f0f0f0 80px);
    background-size: 200px 100%;
    -webkit-animation: skeletonLoading 1.5s infinite;
    animation: skeletonLoading 1.5s infinite;
    border-radius: var(--border-radius);
}

/* Improved table row selection */
.gene-table tr.selected td:first-child {
    border-left: 3px solid var(--primary-color);
}

/* Hover state for export button */
#downloadCurrentViewBtn:hover {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%) !important;
    color: white !important;
    border-color: transparent !important;
}

/* Responsive improvements for control panels */
@media (min-width: 1200px) {
    #datasetTabsContainer > div > div {
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    #datasetTabsContainer > div > div:hover {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
}

/* Current View Status Box styling.
   No fade-in animation: it re-fires every time display toggles
   none -> block (e.g. on first dataset switch when the view type
   changes), which reads as a flash. */
#currentViewStatus {
    position: absolute !important;
    top: 120px !important;
    /* Position close to heatmap edge */
    left: 1225px !important;
    right: auto !important;
    z-index: 40;
    font-family: var(--font-family);
}

#currentViewStatus div[id^="status"] {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Animate status values when they change */
@-webkit-keyframes statusPop {
    0% { -webkit-transform: scale(1); transform: scale(1); }
    50% { -webkit-transform: scale(1.03); transform: scale(1.03); }
    100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes statusPop {
    0% { -webkit-transform: scale(1); transform: scale(1); }
    50% { -webkit-transform: scale(1.03); transform: scale(1.03); }
    100% { -webkit-transform: scale(1); transform: scale(1); }
}

#currentViewStatus div[id^="status"].updated {
    -webkit-animation: statusPop 0.3s ease-out;
    animation: statusPop 0.3s ease-out;
}

/* Z-Score Filter Box - positioned below Legends.
   The exact top is set at runtime by repositionFilterBelowLegends() so the
   gap below the legends matches the gap above them, regardless of how
   many legends are stacked. This is just an initial fallback. */
#zscoreFilterBox {
    position: absolute !important;
    top: 660px !important;
    /* Position close to heatmap edge */
    left: 1225px !important;
    right: auto !important;
    z-index: 35;
    /* No fade-in animation: it re-fires whenever display toggles
       none -> block during dataset switches, which reads as a flash. */
    font-family: var(--font-family);
    /* Box styling */
    background: white !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 16px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

/* Legends wrapper - absolute position to scroll with heatmap */
#legendsWrapper {
    position: absolute !important;
    top: 400px !important;
    /* Position close to heatmap edge */
    left: 1225px !important;
    right: auto !important;
    z-index: 30;
}

/* ===== Publication Export Modal ===== */
.publication-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.publication-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.publication-modal-content {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 1100px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.publication-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
    color: white;
}

.publication-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.publication-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.publication-modal-close:hover {
    opacity: 1;
}

.publication-modal-body {
    display: flex;
    gap: 24px;
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.publication-preview-section {
    flex: 1;
    min-width: 400px;
}

.publication-preview-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.publication-preview {
    background: #f3f4f6;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 16px;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.publication-preview canvas {
    max-width: 100%;
    max-height: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.publication-settings-section {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;
}

.publication-setting-group {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
}

.publication-setting-group h4 {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: #1e3a5f;
    display: flex;
    align-items: center;
    gap: 8px;
}

.publication-setting-group h4 i {
    font-size: 12px;
    opacity: 0.7;
}

.publication-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.publication-setting-row:last-child {
    margin-bottom: 0;
}

.publication-setting-row label {
    font-size: 12px;
    color: #4b5563;
    font-weight: 500;
}

.publication-setting-row input[type="text"],
.publication-setting-row input[type="number"],
.publication-setting-row select {
    width: 140px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    background: white;
}

.publication-setting-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #2563eb;
}

.publication-setting-row input:focus,
.publication-setting-row select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.publication-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.publication-modal-footer .btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.publication-modal-footer .btn-secondary {
    background: white;
    border: 1px solid #d1d5db;
    color: #4b5563;
}

.publication-modal-footer .btn-secondary:hover {
    background: #f3f4f6;
}

.publication-modal-footer .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    color: white;
}

.publication-modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

/* ===== Responsive Layout with CSS Zoom ===== */
/* Uses CSS zoom for clean scaling on different screen sizes */
/* All elements stay aligned and move together */

/* Default: Large screens (27" monitors, ~2560px) - no zoom */
html {
    zoom: 1;
    min-width: 1650px;
    overflow-x: auto;
}

body {
    min-width: 1650px;
    overflow-x: auto;
}

/* Medium-large screens (24" monitors, ~1920px) */
@media screen and (max-width: 1920px) {
    html {
        zoom: 0.9;
    }
}

/* Medium screens (15-17" laptops, ~1440-1680px) */
@media screen and (max-width: 1680px) {
    html {
        zoom: 0.8;
    }
}

/* Small screens (13-14" laptops, ~1280-1440px) */
@media screen and (max-width: 1440px) {
    html {
        zoom: 0.8;
    }
}

/* Very small screens (older laptops, ~1280px) */
@media screen and (max-width: 1280px) {
    html {
        zoom: 0.75;
    }
}

/* Ensure main content doesn't center or shift */
#mainContent {
    min-width: 1650px;
}