/* ICE Data Explorer - Editorial Journalism Style CSS */
/* Inspired by ProPublica, The Marshall Project, The Intercept */

/* ============================================
   FONT IMPORTS - Editorial Typography Stack
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================
   ROOT VARIABLES & BASE STYLES
   ============================================ */

:root {
    /* ============================================
       BASE PALETTE
       ============================================ */
    --primary: #1a1a2e;
    --secondary: #16213e;
    --accent: #e94560;
    --accent-light: #ff6b6b;
    --text: #edf2f4;
    --text-muted: #b8c4ce;
    --chart-bg: #0f0f23;
    --grid: #2b2d42;
    --danger: #ef476f;
    --warning: #ffd166;
    --success: #06d6a0;
    --blue: #118ab2;

    /* ============================================
       SEMANTIC COLOR SYSTEM (Visual Guide)
       Three-tier palette for emotional/investigative design
       ============================================ */

    /* TIER 1: THE OFFICIAL FACADE (Muted/Cold)
       Use for: Government claims, unverified data,
       official UI chrome, "redacted" initial states */
    --facade-slate: #4a5568;
    --facade-slate-dark: #2d3748;
    --facade-slate-light: #718096;
    --facade-blue: #3d5a80;
    --facade-blue-muted: #293241;
    --facade-offwhite: #e2e8f0;
    --facade-grey: #a0aec0;
    --facade-paper: #f7fafc;
    --facade-bg: rgba(45, 55, 72, 0.6);
    --facade-border: rgba(74, 85, 104, 0.5);

    /* TIER 2: THE INDEPENDENT TRUTH (Hot/Urgent)
       Use for: Verified NGO data, revealed truths,
       discrepancy alerts, human cost visualizations */
    --truth-red: #e53e3e;
    --truth-red-bright: #fc5c65;
    --truth-red-deep: #c53030;
    --truth-orange: #ed8936;
    --truth-orange-burnt: #c05621;
    --truth-white: #ffffff;
    --truth-cream: #fffaf0;
    --truth-glow: rgba(229, 62, 62, 0.3);
    --truth-bg: rgba(229, 62, 62, 0.15);
    --truth-border: rgba(252, 92, 101, 0.6);

    /* TIER 3: THE INDUSTRIAL COMPLEX (Corporate/Venal)
       Use for: Corporate profit flows, lobbying money,
       stock prices, contractor visualizations */
    --corporate-green: #276749;
    --corporate-green-deep: #1e4d38;
    --corporate-green-money: #2f855a;
    --corporate-gold: #d69e2e;
    --corporate-gold-bright: #ecc94b;
    --corporate-gold-dark: #b7791f;
    --corporate-bg: rgba(39, 103, 73, 0.15);
    --corporate-border: rgba(214, 158, 46, 0.5);
    --corporate-profit: linear-gradient(135deg, var(--corporate-green) 0%, var(--corporate-gold) 100%);

    /* ============================================
       SEMANTIC STATUS COLORS
       ============================================ */
    --status-verified: var(--success);
    --status-contested: var(--warning);
    --status-government: var(--facade-blue);
    --status-independent: var(--truth-red);
    --status-corporate: var(--corporate-gold);

    /* Trust Level Colors */
    --trust-high: #48bb78;
    --trust-medium: #ecc94b;
    --trust-low: #f56565;
    --trust-contested: #ed8936;

    /* ============================================
       TYPOGRAPHY
       ============================================ */
    --font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-headline: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-data: 'IBM Plex Mono', 'SF Mono', 'Consolas', monospace;

    /* Typographic scale */
    --scale-xxl: clamp(3rem, 8vw, 5rem);
    --scale-xl: clamp(2rem, 5vw, 3.5rem);
    --scale-lg: clamp(1.5rem, 3vw, 2.25rem);
    --scale-md: clamp(1.125rem, 2vw, 1.5rem);
    --scale-base: 1.0625rem;
    --scale-sm: 0.9375rem;
    --scale-xs: 0.8125rem;

    /* ============================================
       ANIMATION VARIABLES
       ============================================ */
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-reveal: 800ms;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: var(--scale-base);
    font-weight: 400;
    background-color: var(--primary);
    color: var(--text);
    margin: 0;
    padding: 0;
    line-height: 1.7;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.app-container {
    min-height: 100vh;
    background: linear-gradient(180deg, #0a0a12 0%, #12121f 50%, #1a1a2e 100%);
    background-attachment: fixed;
}

/* ============================================
   HEADER
   ============================================ */

.header {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 20px;
    text-align: center;
    border-bottom: 4px solid var(--accent);
    transition: background 0.5s ease;
}

/* Tab-specific header backgrounds - Stark documentary style */
.header-overview {
    background:
        linear-gradient(135deg, rgba(10, 10, 18, 0.95) 0%, rgba(26, 26, 46, 0.9) 50%, rgba(233, 69, 96, 0.15) 100%);
    position: relative;
}

.header-funding {
    background:
        linear-gradient(135deg, rgba(10, 10, 18, 0.95) 0%, rgba(22, 33, 62, 0.95) 50%, rgba(255, 209, 102, 0.1) 100%);
}

.header-detention {
    background:
        linear-gradient(135deg, rgba(10, 10, 18, 0.95) 0%, rgba(22, 33, 62, 0.95) 50%, rgba(233, 69, 96, 0.2) 100%);
}

.header-deportations {
    background:
        linear-gradient(135deg, rgba(10, 10, 18, 0.95) 0%, rgba(26, 26, 46, 0.95) 50%, rgba(17, 138, 178, 0.15) 100%);
}

.header-deaths {
    background:
        linear-gradient(135deg, rgba(5, 5, 10, 0.98) 0%, rgba(20, 10, 15, 0.95) 50%, rgba(239, 71, 111, 0.25) 100%);
}

.header-costs {
    background:
        linear-gradient(135deg, rgba(10, 10, 18, 0.95) 0%, rgba(22, 33, 62, 0.95) 50%, rgba(255, 209, 102, 0.15) 100%);
}

.header-timeline {
    background:
        linear-gradient(135deg, rgba(10, 10, 18, 0.95) 0%, rgba(26, 26, 46, 0.95) 50%, rgba(114, 9, 183, 0.15) 100%);
}

.header-explorer {
    background:
        linear-gradient(135deg, rgba(10, 10, 18, 0.95) 0%, rgba(22, 33, 62, 0.95) 50%, rgba(6, 214, 160, 0.1) 100%);
}

.header-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* Inline theme toggle in header */
.theme-toggle-inline {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-muted);
    transition: all 0.25s ease;
}

.theme-toggle-inline:hover {
    background: rgba(233, 69, 96, 0.2);
    border-color: var(--accent);
    color: var(--text);
    transform: scale(1.1);
}

.main-title {
    font-family: var(--font-display);
    font-size: var(--scale-xxl);
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 20px 0;
    color: var(--text);
    text-transform: uppercase;
    line-height: 1.1;
}

/* Decorative underline on title */
.main-title::after {
    content: '';
    display: block;
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    margin: 20px auto 0;
}

.subtitle {
    font-family: var(--font-body);
    font-size: var(--scale-md);
    font-weight: 300;
    color: var(--text-muted);
    margin: 25px 0 30px 0;
    letter-spacing: 0.02em;
    font-style: italic;
}

.title-rule {
    width: 60px;
    height: 2px;
    background: var(--accent);
    border: none;
    margin: 25px auto;
    opacity: 0.7;
}

.source-note {
    font-family: var(--font-body);
    font-size: var(--scale-sm);
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.source-note a {
    color: var(--accent-light);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
    font-weight: 500;
}

.source-note a:hover {
    color: var(--text);
    border-bottom-color: var(--accent);
}

/* ============================================
   STATISTICS BANNER
   ============================================ */

.stats-banner {
    background: linear-gradient(180deg, rgba(18, 18, 30, 0.98) 0%, rgba(22, 33, 62, 0.95) 100%);
    padding: 40px 20px;
    border-bottom: 1px solid var(--grid);
}

.section-label {
    font-family: var(--font-body);
    font-size: var(--scale-xs);
    font-weight: 600;
    letter-spacing: 0.25em;
    color: var(--accent);
    text-align: center;
    margin-bottom: 30px;
    text-transform: uppercase;
}

/* Hero Stat Rotation */
.hero-stat-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slot {
    width: 100%;
    animation: heroFadeIn 0.4s ease;
}

.hero-slot .stat-card {
    background: transparent;
    border: none;
    padding: 10px;
    margin: 0;
    max-width: none;
    min-width: auto;
}

.hero-slot .stat-card::before {
    display: none;
}

.hero-slot .stat-card:hover {
    transform: none;
    box-shadow: none;
    background: transparent;
    border-color: transparent;
}

.hero-slot .stat-value {
    font-size: clamp(3rem, 8vw, 5rem);
    line-height: 1;
}

.hero-slot .stat-label {
    font-size: var(--scale-sm);
    letter-spacing: 0.15em;
    margin-top: 12px;
}

.hero-slot .stat-subtext {
    font-size: 0.9rem;
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--grid);
    transition: all 0.3s ease;
    cursor: pointer;
}

.hero-dot.active {
    background: var(--accent);
    transform: scale(1.3);
}

@media (max-width: 768px) {
    .hero-slot .stat-value {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .hero-stat-container {
        min-height: 100px;
        padding: 0 10px;
    }
}

.stat-row {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.stat-row > div {
    flex: 1 1 auto;
    min-width: 150px;
    max-width: 200px;
}

.stat-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--grid);
    border-radius: 6px;
    padding: 15px 12px;
    margin: 10px 5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    min-width: 140px;
}

/* Accent stripe on hover */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--accent);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.stat-card:hover::before {
    transform: scaleY(1);
}

.stat-value {
    font-family: var(--font-data);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--text) 0%, var(--text-muted) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    overflow: visible;
    cursor: default;
    position: relative;
}

/* Counter animation states */
.stat-value.counting {
    animation: pulse-glow 0.5s ease-in-out infinite alternate;
}

.stat-value.counted {
    transition: transform 0.2s ease;
}

/* Show full value tooltip on hover for abbreviated numbers */
.stat-value.counted:hover {
    transform: scale(1.05);
}

.stat-value.counted[data-full-value]:hover::after {
    content: attr(data-full-value);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 15, 35, 0.95);
    color: var(--text);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    white-space: nowrap;
    z-index: 100;
    border: 1px solid var(--grid);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    -webkit-text-fill-color: var(--text);
    background-clip: border-box;
    -webkit-background-clip: border-box;
}

@keyframes pulse-glow {
    from {
        filter: brightness(1);
    }
    to {
        filter: brightness(1.2);
    }
}

/* Accent colored values */
.stat-value.accent {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.stat-label {
    font-family: var(--font-body);
    font-size: var(--scale-xs);
    font-weight: 600;
    color: #ffffff;
    margin: 10px 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.stat-subtext {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #d0d8e0;
    font-style: italic;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ============================================
   NAVIGATION TABS
   ============================================ */

.nav-container {
    background: rgba(18, 18, 30, 0.98);
    backdrop-filter: blur(10px);
    padding: 0 20px;
    border-bottom: 1px solid var(--grid);
    position: sticky;
    top: 0;
    z-index: 200;
}

.nav-tabs-custom {
    max-width: 1400px;
    margin: 0 auto;
    border: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
    z-index: 200;
}

.nav-tabs-custom::-webkit-scrollbar {
    display: none;
}

.nav-tabs-custom .nav-link {
    font-family: var(--font-body);
    font-size: var(--scale-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    background: transparent;
    border: none;
    padding: 18px 20px;
    min-height: 48px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 2px solid transparent;
    position: relative;
}

.nav-tabs-custom .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: all 0.25s ease;
    transform: translateX(-50%);
}

.nav-tabs-custom .nav-link:hover {
    color: var(--text);
    background: rgba(255,255,255,0.02);
}

.nav-tabs-custom .nav-link:hover::after {
    width: 60%;
}

.nav-tabs-custom .nav-link.active {
    color: var(--accent);
    background: transparent;
    font-weight: 700;
}

.nav-tabs-custom .nav-link.active::after {
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Nav dropdown menus */
.nav-dropdown .dropdown-toggle {
    font-family: var(--font-body);
    font-size: var(--scale-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    background: transparent;
    border: none;
    padding: 18px 20px;
    transition: all 0.25s ease;
}

.nav-dropdown .dropdown-toggle:hover,
.nav-dropdown .dropdown-toggle:focus {
    color: var(--text);
    background: rgba(255,255,255,0.02);
}

.nav-dropdown .dropdown-toggle::after {
    margin-left: 6px;
    opacity: 0.5;
}

.nav-dropdown .dropdown-menu {
    background: rgba(18, 18, 30, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid var(--grid);
    border-radius: 4px;
    padding: 4px 0;
    min-width: 180px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    z-index: 1000;
}

.nav-dropdown .dropdown-item {
    font-family: var(--font-body);
    font-size: var(--scale-xs);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 12px 20px;
    transition: all 0.2s ease;
}

.nav-dropdown .dropdown-item:hover,
.nav-dropdown .dropdown-item:focus {
    background: rgba(233, 69, 96, 0.15);
    color: var(--accent);
}

@media (max-width: 768px) {
    .nav-dropdown .dropdown-item {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* ============================================
   MAIN CONTENT
   ============================================ */

.main-content {
    padding: 50px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.section-title {
    font-family: var(--font-headline);
    font-size: var(--scale-xl);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 25px 0;
    border-left: 4px solid var(--accent);
    padding-left: 25px;
    line-height: 1.2;
    position: relative;
}

/* Editorial section number */
.section-title[data-section]::before {
    content: attr(data-section);
    font-family: var(--font-data);
    font-size: var(--scale-xs);
    color: var(--accent);
    position: absolute;
    left: 25px;
    top: -20px;
    letter-spacing: 0.1em;
}

.section-intro {
    font-family: var(--font-body);
    font-size: var(--scale-md);
    line-height: 1.9;
    color: var(--text-muted);
    max-width: 850px;
    margin-bottom: 45px;
    font-weight: 300;
}

.section-intro strong {
    color: var(--accent);
    font-weight: 600;
}

/* Drop cap for first paragraph */
.section-intro.has-dropcap::first-letter {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 700;
    float: left;
    line-height: 0.8;
    padding-right: 12px;
    padding-top: 8px;
    color: var(--accent);
}

.lead-paragraph {
    font-family: var(--font-headline);
    font-size: var(--scale-lg);
    line-height: 1.9;
    color: var(--text);
    max-width: 900px;
    margin: 0 auto 60px auto;
    text-align: center;
    padding: 50px 40px;
    background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(233,69,96,0.03) 100%);
    border-radius: 4px;
    border-left: 3px solid var(--accent);
    border-right: 3px solid var(--accent);
    position: relative;
}

.lead-paragraph strong {
    color: var(--accent);
    font-weight: 700;
    background: linear-gradient(transparent 60%, rgba(233,69,96,0.2) 60%);
}

/* ============================================
   CHARTS
   ============================================ */

.chart-row {
    margin-bottom: 30px;
}

.chart-row .col-md-6,
.chart-row .col-md-12 {
    padding: 15px;
}

.js-plotly-plot {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* ============================================
   PULL QUOTES - Editorial Style
   ============================================ */

.pull-quote {
    font-family: var(--font-display);
    font-size: var(--scale-md);
    font-style: italic;
    font-weight: 400;
    color: var(--text);
    text-align: left;
    max-width: 800px;
    margin: 60px auto;
    padding: 45px 50px 45px 80px;
    background: linear-gradient(135deg, rgba(233,69,96,0.06) 0%, rgba(22, 33, 62, 0.95) 100%);
    border-left: none;
    border-right: none;
    border-radius: 0;
    position: relative;
    line-height: 1.8;
}

/* Large quotation mark */
.pull-quote::before {
    content: '"';
    font-family: var(--font-display);
    font-size: 8rem;
    font-weight: 700;
    position: absolute;
    top: 10px;
    left: 15px;
    color: var(--accent);
    opacity: 0.4;
    line-height: 1;
}

/* Vertical accent line */
.pull-quote::after {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--accent), transparent);
}

.pull-quote p {
    margin: 0;
    position: relative;
    z-index: 1;
}

.quote-source {
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--scale-sm);
    font-weight: 600;
    color: var(--accent);
    margin-top: 25px;
    display: block;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.quote-source::before {
    content: '— ';
}

/* ============================================
   INFO CARDS - Editorial Data Cards
   ============================================ */

.info-card {
    background: linear-gradient(145deg, rgba(22, 33, 62, 0.95) 0%, rgba(26, 26, 46, 0.98) 100%);
    border: 1px solid var(--grid);
    border-radius: 4px;
    padding: 35px;
    margin: 20px 0;
    position: relative;
}

/* Corner accent */
.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-top: 3px solid var(--accent);
    border-left: 3px solid var(--accent);
}

.info-card-title {
    font-family: var(--font-headline);
    font-size: var(--scale-md);
    color: var(--accent);
    margin: 0 0 25px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--grid);
    letter-spacing: 0.02em;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    font-family: var(--font-body);
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: var(--scale-base);
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.info-list li:last-child {
    border-bottom: none;
}

.info-list li strong {
    font-family: var(--font-data);
    color: var(--accent);
    font-weight: 600;
    min-width: fit-content;
}

.info-note {
    font-family: var(--font-body);
    font-size: var(--scale-sm);
    color: var(--text-muted);
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--grid);
    font-style: italic;
}

.info-note strong {
    color: var(--text);
    font-style: normal;
}

/* ============================================
   COST TABLE - Data Journalism Style
   ============================================ */

.cost-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
    font-family: var(--font-body);
}

.cost-table th,
.cost-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--grid);
}

.cost-table th {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    font-size: var(--scale-xs);
    letter-spacing: 0.08em;
    background: rgba(0,0,0,0.2);
    border-bottom: 2px solid var(--accent);
}

.cost-table td {
    font-size: var(--scale-base);
}

/* Numbers in tables use mono font */
.cost-table td:nth-child(2) {
    font-family: var(--font-data);
    font-weight: 500;
    color: var(--accent-light);
}

.cost-table tr {
    transition: background 0.2s ease;
}

.cost-table tr:hover {
    background: rgba(233,69,96,0.05);
}

/* Alternating row colors for readability */
.cost-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.02);
}

.cost-table tbody tr:nth-child(even):hover {
    background: rgba(233,69,96,0.08);
}

/* ============================================
   DATA EXPLORER
   ============================================ */

.explorer-container {
    background: linear-gradient(145deg, rgba(18, 18, 30, 0.95) 0%, rgba(22, 33, 62, 0.98) 100%);
    border: 1px solid var(--grid);
    border-radius: 6px;
    padding: 30px;
    margin-top: 20px;
}

.filter-row {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--grid);
}

.filter-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.dropdown-custom,
.input-custom {
    width: 100%;
}

/* Dash dropdown styling */
.Select-control {
    background-color: var(--chart-bg) !important;
    border-color: var(--grid) !important;
}

.Select-menu-outer {
    background-color: var(--chart-bg) !important;
    border-color: var(--grid) !important;
}

.Select-option {
    background-color: var(--chart-bg) !important;
    color: var(--text) !important;
    padding: 12px 14px !important;
    min-height: 40px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    display: block !important;
}

.Select-option:hover,
.Select-option.is-focused {
    background-color: var(--secondary) !important;
}

.Select-menu {
    max-height: 250px !important;
    overflow-y: auto !important;
}

.Select-menu-outer {
    z-index: 9999 !important;
}

.Select-value-label {
    color: var(--text) !important;
}

.Select-placeholder {
    color: var(--text-muted) !important;
}

/* Input styling */
input[type="number"],
input[type="text"] {
    background-color: var(--chart-bg);
    border: 1px solid var(--grid);
    color: var(--text);
    padding: 10px 15px;
    border-radius: 4px;
    width: 100%;
    font-family: var(--font-body);
}

input[type="number"]:focus,
input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
}

input::placeholder {
    color: var(--text-muted);
}

.btn-export {
    background: var(--accent);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    margin-top: 24px;
}

.btn-export:hover {
    background: var(--accent-light);
    transform: translateY(-2px);
}

.btn-export-small {
    background: var(--accent);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-export-small:hover {
    background: var(--accent-light);
    transform: translateY(-1px);
}

.btn-preset {
    background: var(--grid);
    color: var(--text);
    border: 1px solid var(--grid);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-preset:hover {
    background: var(--secondary);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-preset-clear {
    background: transparent;
    border-color: var(--text-muted);
    color: var(--text-muted);
}

.btn-preset-clear:hover {
    background: rgba(239, 71, 111, 0.1);
    border-color: var(--danger);
    color: var(--danger);
}

.table-container {
    margin-top: 20px;
    overflow: hidden;
    border-radius: 8px;
}

.no-data {
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
    font-style: italic;
}

/* DataTable overrides */
.dash-table-container {
    border-radius: 8px;
    overflow: hidden;
}

.dash-spreadsheet-container {
    border-radius: 8px;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background: linear-gradient(180deg, rgba(18, 18, 30, 0.98) 0%, rgba(10, 10, 18, 1) 100%);
    padding: 40px 20px;
    margin-top: 60px;
    border-top: 1px solid var(--grid);
}

.footer-rule {
    border: none;
    height: 1px;
    background: var(--grid);
    margin-bottom: 30px;
}

.footer-sources {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.8;
}

.footer-sources strong {
    color: var(--text);
}

.footer-disclaimer {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 20px;
    opacity: 0.7;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 992px) {
    .main-title {
        font-size: 2.5rem;
        letter-spacing: 0.1em;
    }

    .subtitle {
        font-size: 1.1rem;
    }

    .stat-value {
        font-size: 2rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .lead-paragraph {
        font-size: 1.2rem;
        padding: 25px;
    }

    .nav-tabs-custom .nav-link {
        padding: 15px 12px;
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .main-title {
        font-size: 2rem;
    }

    .stat-card {
        margin: 10px 0;
    }

    .pull-quote {
        font-size: 1.1rem;
        padding: 25px;
    }

    .info-card {
        padding: 20px;
    }

    .nav-tabs-custom .nav-link {
        padding: 12px 8px;
        font-size: 0.7rem;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

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

.main-content {
    animation: fadeIn 0.5s ease-out;
}

.stat-card {
    animation: fadeIn 0.5s ease-out;
    animation-fill-mode: both;
}

.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }
.stat-card:nth-child(5) { animation-delay: 0.5s; }
.stat-card:nth-child(6) { animation-delay: 0.6s; }

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--primary);
}

::-webkit-scrollbar-thumb {
    background: var(--grid);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-accent {
    color: var(--accent);
}

.text-muted {
    color: var(--text-muted);
}

.bg-dark {
    background: var(--chart-bg);
}

.mt-4 {
    margin-top: 2rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

/* ============================================
   MAP VISUALIZATION
   ============================================ */

.map-container {
    background: var(--chart-bg);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
    padding: 15px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* ============================================
   FACILITY CARDS - Investigation Style
   ============================================ */

.facility-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--grid);
    border-radius: 4px;
    padding: 25px;
    margin-bottom: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.facility-card:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--text-muted);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.facility-card.deficient {
    border-left: 4px solid var(--danger);
}

.facility-card.deficient::after {
    content: 'DEFICIENT';
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: var(--font-data);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--danger);
    letter-spacing: 0.1em;
}

.facility-card.acceptable {
    border-left: 4px solid var(--success);
}

.facility-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.facility-name {
    font-family: var(--font-headline);
    font-size: var(--scale-md);
    color: var(--text);
    margin: 0;
    line-height: 1.3;
}

.facility-location {
    font-family: var(--font-body);
    font-size: var(--scale-sm);
    color: var(--text-muted);
    margin-top: 6px;
    font-style: italic;
}

.facility-badge {
    font-family: var(--font-data);
    padding: 5px 12px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-geo { background: var(--accent); color: white; }
.badge-corecivic { background: var(--blue); color: white; }
.badge-ice { background: var(--purple); color: white; }
.badge-other { background: var(--grid); color: var(--text); }

.facility-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--grid);
}

.facility-stat {
    text-align: center;
}

.facility-stat-value {
    font-family: var(--font-data);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
}

.facility-stat-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 6px;
}

/* ============================================
   LEGISLATION TRACKER - Political Coverage Style
   ============================================ */

.bill-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--grid);
    border-radius: 4px;
    padding: 25px;
    margin-bottom: 20px;
    position: relative;
    transition: all 0.3s ease;
}

.bill-card:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--text-muted);
}

.bill-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.bill-number {
    font-family: var(--font-data);
    font-weight: 600;
    font-size: var(--scale-sm);
    color: var(--accent);
    letter-spacing: 0.02em;
}

.bill-status {
    font-family: var(--font-body);
    padding: 5px 12px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-passed { background: var(--success); color: white; }
.status-committee { background: var(--warning); color: #1a1a2e; }
.status-law {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: white;
}
.status-failed { background: var(--danger); color: white; }

.bill-title {
    font-family: var(--font-headline);
    font-size: var(--scale-base);
    color: var(--text);
    margin: 12px 0;
    line-height: 1.4;
}

.bill-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-family: var(--font-body);
    font-size: var(--scale-xs);
    color: var(--text-muted);
}

.bill-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.bill-funding {
    font-family: var(--font-data);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--warning);
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--grid);
}

/* ============================================
   LANGUAGE SELECTOR
   ============================================ */

.lang-selector {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    gap: 4px;
    background: rgba(22, 33, 62, 0.9);
    backdrop-filter: blur(8px);
    padding: 6px;
    border-radius: 6px;
    border: 1px solid var(--grid);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.lang-btn {
    font-family: var(--font-body);
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    color: var(--text-muted);
    min-width: 36px;
    text-align: center;
}

.lang-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text);
}

.lang-btn.active {
    background: var(--accent);
    color: white;
}

/* ============================================
   DATA FRESHNESS INDICATOR
   ============================================ */

.freshness-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    background: rgba(255,255,255,0.05);
}

.freshness-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.freshness-fresh { background: var(--success); }
.freshness-recent { background: var(--warning); }
.freshness-stale { background: var(--danger); }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   ENHANCED MOBILE STYLES
   ============================================ */

@media (max-width: 768px) {
    /* Touch-friendly tap targets */
    .nav-tabs-custom .nav-link {
        min-height: 48px;
        padding: 12px 8px;
        font-size: 0.65rem;
    }

    .btn-export,
    .btn-preset,
    .btn-export-small {
        min-height: 44px;
        padding: 12px 16px;
    }

    /* Stack facility stats */
    .facility-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Full width cards on mobile */
    .stat-card {
        min-width: 100%;
        margin: 8px 0;
    }

    /* Improve chart readability */
    .js-plotly-plot {
        min-height: 300px;
    }

    /* Language selector mobile position */
    .lang-selector {
        bottom: 10px;
        right: 10px;
        padding: 6px;
    }

    .lang-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* Better header on mobile */
    .main-title {
        font-size: 1.8rem;
        letter-spacing: 0.05em;
    }

    .subtitle {
        font-size: 0.95rem;
    }

    /* Scrollable tables */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack filter rows */
    .filter-row .col-md-2,
    .filter-row .col-md-3,
    .filter-row .col-md-4 {
        margin-bottom: 15px;
    }

    /* Improve map on mobile */
    .map-container {
        padding: 10px;
    }

    .map-legend {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 1.5rem;
    }

    .stat-value {
        font-size: 1.8rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .lead-paragraph {
        font-size: 1rem;
        padding: 15px;
    }

    /* Single column facility stats */
    .facility-stats {
        grid-template-columns: 1fr 1fr;
    }

    /* Compact bill cards */
    .bill-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ============================================
   PWA INSTALL PROMPT
   ============================================ */

.pwa-install-prompt {
    position: fixed;
    bottom: 80px;
    left: 20px;
    right: 20px;
    background: var(--secondary);
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    z-index: 1001;
    border: 1px solid var(--grid);
}

.pwa-install-text {
    font-size: 0.9rem;
    color: var(--text);
}

.pwa-install-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.pwa-dismiss {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 8px;
    cursor: pointer;
    font-size: 1.2rem;
}

/* ============================================
   HIGH CONTRAST MODE (Accessibility)
   ============================================ */

@media (prefers-contrast: high) {
    :root {
        --text: #ffffff;
        --text-muted: #cccccc;
        --accent: #ff4d6d;
    }

    .stat-card,
    .facility-card,
    .bill-card,
    .info-card {
        border-width: 2px;
    }
}

/* ============================================
   REDUCED MOTION (Accessibility)
   ============================================ */

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

/* ============================================
   SEMANTIC COLOR UTILITY CLASSES
   Project Watchtower Visual System
   ============================================ */

/* === FACADE (Government/Official) === */
.facade-bg { background-color: var(--facade-bg); }
.facade-text { color: var(--facade-slate); }
.facade-border { border-color: var(--facade-border); }

.facade-card {
    background: var(--facade-bg);
    border: 1px solid var(--facade-border);
    color: var(--facade-offwhite);
}

/* === UNIFIED BADGE SYSTEM (4 states) === */
.badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--font-data);
    display: inline-block;
}

.badge--verified {
    background: var(--success);
    color: white;
}

.badge--contested {
    background: linear-gradient(135deg, var(--truth-orange) 0%, var(--warning) 100%);
    color: #1a1a2e;
}

.badge--govt {
    background: var(--facade-blue-muted);
    color: var(--facade-offwhite);
}

.badge--neutral {
    background: var(--grid);
    color: var(--text);
}

/* Legacy aliases (mapped to unified badge system) */
.facade-badge { background: var(--facade-blue-muted); color: var(--facade-offwhite); padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-data); }
.truth-badge { background: var(--success); color: white; padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-data); }
.corporate-badge { background: linear-gradient(135deg, var(--corporate-green) 0%, var(--corporate-green-money) 100%); color: var(--corporate-gold-bright); padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-data); }
.contested-badge { background: linear-gradient(135deg, var(--truth-orange) 0%, var(--warning) 100%); color: #1a1a2e; padding: 4px 10px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-data); }

/* Semantic color contexts */
.truth-bg { background-color: var(--truth-bg); }
.truth-text { color: var(--truth-red); }
.truth-border { border-color: var(--truth-border); }
.truth-card { background: var(--truth-bg); border: 1px solid var(--truth-border); color: var(--truth-cream); }
.truth-glow { box-shadow: 0 0 20px var(--truth-glow), 0 0 40px rgba(229, 62, 62, 0.1); }

.corporate-bg { background-color: var(--corporate-bg); }
.corporate-text { color: var(--corporate-gold); }
.corporate-border { border-color: var(--corporate-border); }
.corporate-card { background: var(--corporate-bg); border: 1px solid var(--corporate-border); color: var(--text); }
.corporate-profit-text { background: var(--corporate-profit); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.facade-bg { background-color: var(--facade-bg); }
.facade-text { color: var(--facade-slate); }
.facade-border { border-color: var(--facade-border); }

/* Trust level indicators (kept for methodology tab) */
.trust-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 3px; font-size: 0.65rem; font-weight: 600; font-family: var(--font-data); text-transform: uppercase; letter-spacing: 0.03em; }
.trust-high { background: rgba(72, 187, 120, 0.2); color: var(--trust-high); border: 1px solid rgba(72, 187, 120, 0.4); }
.trust-medium { background: rgba(236, 201, 75, 0.2); color: var(--trust-medium); border: 1px solid rgba(236, 201, 75, 0.4); }
.trust-low { background: rgba(245, 101, 101, 0.2); color: var(--trust-low); border: 1px solid rgba(245, 101, 101, 0.4); }
.trust-contested { background: rgba(237, 137, 54, 0.2); color: var(--trust-contested); border: 1px solid rgba(237, 137, 54, 0.4); }

/* ============================================
   VISUAL METAPHOR: REDACTION SYSTEM
   For revealing hidden/suppressed information
   ============================================ */

/* Redacted text that reveals on hover/click */
.redacted {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.redacted::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1a1a1a;
    transition: opacity var(--duration-reveal) var(--ease-out-expo),
                transform var(--duration-reveal) var(--ease-out-expo);
    z-index: 1;
}

.redacted:hover::before,
.redacted.revealed::before {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
}

/* Heavy redaction bars */
.redaction-bar {
    display: inline-block;
    background: #0a0a0a;
    color: transparent;
    padding: 2px 8px;
    margin: 2px 4px;
    border-radius: 2px;
    transition: all var(--duration-reveal) var(--ease-out-expo);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.redaction-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s ease;
}

.redaction-bar:hover::after {
    left: 100%;
}

.redaction-bar.revealed {
    background: var(--truth-bg);
    color: var(--truth-red);
    border: 1px solid var(--truth-border);
}

/* Full document redaction overlay */
.redaction-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            0deg,
            #0a0a0a 0px,
            #0a0a0a 18px,
            transparent 18px,
            transparent 22px
        );
    opacity: 1;
    transition: opacity var(--duration-reveal) var(--ease-out-expo);
    pointer-events: none;
    z-index: 10;
}

.redaction-overlay.revealing {
    opacity: 0;
}

/* ============================================
   VISUAL METAPHOR: FLASHLIGHT/LENS REVEAL
   Cursor-based transparency effect
   ============================================ */

.flashlight-container {
    position: relative;
    overflow: hidden;
}

.flashlight-content {
    filter: blur(8px) brightness(0.3);
    transition: filter var(--duration-normal) ease;
}

.flashlight-container:hover .flashlight-content {
    filter: blur(0) brightness(1);
}

/* For JS-controlled flashlight effect */
.flashlight-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle 80px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        transparent 0%,
        rgba(0, 0, 0, 0.95) 100%
    );
    pointer-events: none;
    z-index: 5;
    transition: background 0.1s ease;
}

/* Blur wall for archive reveal */
.blur-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.blur-wall-item {
    filter: blur(6px) saturate(0.3);
    opacity: 0.6;
    transition: all var(--duration-normal) var(--ease-out-expo);
    cursor: pointer;
}

.blur-wall-item:hover,
.blur-wall-item.focused {
    filter: blur(0) saturate(1);
    opacity: 1;
    transform: scale(1.02);
    z-index: 10;
}

/* ============================================
   VISUAL METAPHOR: SONAR/PULSE EFFECTS
   For showing activity/surveillance
   ============================================ */

.sonar-ping {
    position: absolute;
    border-radius: 50%;
    border: 2px solid var(--truth-red);
    animation: sonar-expand 2s ease-out infinite;
    pointer-events: none;
}

@keyframes sonar-expand {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
        margin-left: -5px;
        margin-top: -5px;
    }
    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
        margin-left: -50px;
        margin-top: -50px;
    }
}

.pulse-node {
    position: relative;
}

.pulse-node::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--accent);
    transform: translate(-50%, -50%);
    animation: pulse-glow 2s ease-in-out infinite;
    z-index: -1;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.3);
    }
}

/* Active surveillance indicator */
.surveillance-active {
    position: relative;
}

.surveillance-active::after {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background: var(--truth-red);
    border-radius: 50%;
    animation: blink-urgent 1s infinite;
}

@keyframes blink-urgent {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.3; }
}

/* ============================================
   VISUAL METAPHOR: PARTICLE FLOW
   For showing movement/logistics
   ============================================ */

.particle-trail {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.8;
    pointer-events: none;
    animation: particle-move var(--particle-duration, 3s) linear infinite;
}

@keyframes particle-move {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

/* Flow line base */
.flow-line {
    stroke: var(--accent);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 10 5;
    animation: flow-dash 1s linear infinite;
}

@keyframes flow-dash {
    to {
        stroke-dashoffset: -15;
    }
}

/* ============================================
   DATA DISCREPANCY DISPLAY
   Split-screen comparison layout
   ============================================ */

.discrepancy-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 2px solid var(--warning);
    border-radius: 8px;
    overflow: hidden;
    margin: 20px 0;
}

.discrepancy-side {
    padding: 25px;
    position: relative;
}

.discrepancy-official {
    background: var(--facade-bg);
    border-right: 2px solid var(--warning);
}

.discrepancy-independent {
    background: var(--truth-bg);
}

.discrepancy-label {
    font-family: var(--font-data);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: 0.7;
}

.discrepancy-value {
    font-family: var(--font-data);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.discrepancy-official .discrepancy-value {
    color: var(--facade-grey);
}

.discrepancy-independent .discrepancy-value {
    color: var(--truth-red);
}

.discrepancy-divider {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
    background: var(--warning);
    color: #1a1a2e;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    z-index: 5;
}

.discrepancy-explanation {
    grid-column: 1 / -1;
    background: rgba(255, 209, 102, 0.1);
    padding: 15px 20px;
    border-top: 1px solid var(--warning);
    font-size: 0.9rem;
    color: var(--text-muted);
}

.discrepancy-explanation strong {
    color: var(--warning);
}

/* ============================================
   INFINITE SCROLL MEMORIAL STYLES
   For deaths visualization
   ============================================ */

.memorial-container {
    background: linear-gradient(180deg, #050508 0%, #0a0a12 100%);
    min-height: 100vh;
    padding: 40px 20px;
}

.memorial-entry {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.memorial-entry.visible {
    opacity: 1;
    transform: translateY(0);
}

.memorial-entry.known-name {
    background: rgba(239, 71, 111, 0.05);
    border-left: 3px solid var(--danger);
}

.memorial-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.memorial-icon.known {
    background: var(--danger);
    color: white;
}

.memorial-details {
    flex: 1;
}

.memorial-name {
    font-family: var(--font-headline);
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 4px;
}

.memorial-meta {
    font-family: var(--font-data);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.memorial-cause {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--danger);
    font-style: italic;
}

/* Counter that follows scroll */
.memorial-counter {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 18, 0.95);
    padding: 15px 30px;
    border-radius: 8px;
    border: 1px solid var(--danger);
    text-align: center;
    z-index: 100;
}

.memorial-counter-number {
    font-family: var(--font-data);
    font-size: 2rem;
    font-weight: 700;
    color: var(--danger);
}

.memorial-counter-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ============================================
   WAFFLE CHART STYLES
   For demographic reveals
   ============================================ */

.waffle-grid {
    display: grid;
    grid-template-columns: repeat(50, 1fr);
    gap: 2px;
    padding: 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
}

.waffle-cell {
    aspect-ratio: 1;
    background: var(--facade-slate);
    border-radius: 2px;
    transition: all 0.3s ease;
    cursor: default;
}

.waffle-cell.revealed {
    background: var(--truth-red);
}

.waffle-cell.revealed.no-conviction {
    background: var(--success);
}

.waffle-cell.revealed.conviction {
    background: var(--facade-slate-dark);
}

.waffle-legend {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    font-family: var(--font-data);
    font-size: 0.85rem;
}

.waffle-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

/* ============================================
   SANKEY/FLOW DIAGRAM ENHANCEMENTS
   For budget visualization
   ============================================ */

.sankey-container {
    background: linear-gradient(135deg, #0a0a12 0%, #12121f 100%);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--grid);
}

.sankey-title {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    color: var(--text);
    margin-bottom: 20px;
    text-align: center;
}

/* Corporate profit flow highlight */
.sankey-profit-flow {
    fill: url(#corporate-gradient) !important;
    opacity: 0.9;
}

.sankey-leakage-label {
    font-family: var(--font-data);
    font-weight: 700;
    fill: var(--corporate-gold);
}

/* ============================================
   NETWORK GRAPH STYLES
   For revolving door visualization
   ============================================ */

.network-container {
    background: radial-gradient(ellipse at center, #16213e 0%, #0a0a12 100%);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.network-node-agency {
    fill: var(--facade-blue);
    stroke: var(--facade-slate-light);
    stroke-width: 2;
}

.network-node-contractor {
    fill: var(--corporate-green);
    stroke: var(--corporate-gold);
    stroke-width: 2;
}

.network-node-person {
    fill: var(--text-muted);
    stroke: var(--text);
    stroke-width: 1;
}

.network-link {
    stroke: rgba(255,255,255,0.2);
    stroke-width: 1;
}

.network-link.highlighted {
    stroke: var(--truth-orange);
    stroke-width: 3;
    animation: link-pulse 1s infinite;
}

@keyframes link-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.network-tooltip {
    position: absolute;
    background: rgba(10, 10, 18, 0.95);
    border: 1px solid var(--grid);
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 100;
    max-width: 250px;
}

/* ============================================
   SLOT MACHINE ANIMATION
   For lobbying ROI visualization
   ============================================ */

.slot-machine {
    background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 100%);
    border: 4px solid var(--corporate-gold);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5),
                inset 0 2px 0 rgba(255,255,255,0.1);
}

.slot-display {
    background: #0a0a0a;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    font-family: var(--font-data);
}

.slot-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.slot-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--corporate-gold-bright);
    text-shadow: 0 0 20px rgba(236, 201, 75, 0.5);
}

.slot-value.spinning {
    animation: slot-spin 0.1s linear infinite;
}

@keyframes slot-spin {
    0% { transform: translateY(-5px); opacity: 0.5; }
    50% { transform: translateY(5px); opacity: 1; }
    100% { transform: translateY(-5px); opacity: 0.5; }
}

.slot-roi {
    font-size: 3rem;
    font-weight: 900;
    color: var(--corporate-gold-bright);
    text-shadow: 0 0 30px var(--corporate-gold),
                 0 0 60px rgba(236, 201, 75, 0.3);
    animation: neon-flicker 2s infinite;
}

@keyframes neon-flicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.8; }
    94% { opacity: 1; }
    96% { opacity: 0.9; }
    97% { opacity: 1; }
}

.slot-lever {
    width: 60px;
    height: 120px;
    background: linear-gradient(180deg, #c0c0c0 0%, #808080 100%);
    border-radius: 30px;
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.slot-lever:active {
    transform: translateY(-50%) rotate(30deg);
}

/* ============================================
   PHASE 2: NARRATIVES PAGE STYLES
   ============================================ */

/* Narrative Alert Banner */
.narrative-alert {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--truth-bg);
    border: 1px solid var(--truth-border);
    border-radius: 4px;
    margin-top: 15px;
}

.contested-icon {
    font-size: 1.2rem;
}

/* Reveal Section */
.reveal-section {
    padding: 40px 0;
}

.reveal-card {
    background: rgba(22, 33, 62, 0.6);
    border: 1px solid var(--grid);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
}

.reveal-title {
    font-family: var(--font-headline);
    font-size: var(--scale-lg);
    color: var(--text);
    margin-bottom: 15px;
}

.reveal-intro {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 30px;
}

/* Before Reveal - Intimidating */
.before-reveal {
    padding: 20px;
    margin-bottom: 30px;
}

.intimidating-icons {
    font-size: 1.5rem;
    letter-spacing: 2px;
    filter: grayscale(100%) brightness(0.7);
}

.intimidating-text {
    margin-top: 15px;
    color: var(--facade-grey);
    font-style: italic;
}

/* Reveal Button */
.btn-reveal {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 16px 40px;
    background: var(--truth-red);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.btn-reveal:hover {
    background: var(--truth-red-bright);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--truth-glow);
}

.btn-reveal:disabled {
    background: var(--facade-slate);
    cursor: not-allowed;
    transform: none;
}

/* Waffle Grid - Enhanced */
.waffle-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.waffle-grid {
    display: grid;
    grid-template-columns: repeat(50, 1fr);
    gap: 2px;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
}

.waffle-cell {
    aspect-ratio: 1;
    background: var(--facade-slate);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.waffle-cell.revealed[data-category="no-conviction"] {
    background: var(--success);
}

.waffle-cell.revealed[data-category="violent"] {
    background: var(--truth-red);
}

.waffle-cell.revealed[data-category="nonviolent"] {
    background: var(--warning);
}

.waffle-cell.revealed[data-category="pending"] {
    background: var(--facade-blue);
}

/* Waffle Legend */
.waffle-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 25px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.legend-no-conviction { background: var(--success); }
.legend-violent { background: var(--truth-red); }
.legend-nonviolent { background: var(--warning); }
.legend-pending { background: var(--facade-blue); }

.legend-label {
    font-family: var(--font-data);
    font-size: 0.85rem;
    color: var(--text);
}

/* Aftermath */
.aftermath-container {
    margin-top: 30px;
    padding: 25px;
    background: var(--truth-bg);
    border: 1px solid var(--truth-border);
    border-radius: 8px;
}

.aftermath-title {
    font-family: var(--font-headline);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.truth-highlight {
    font-size: 2rem;
    color: var(--truth-red);
}

.aftermath-text {
    font-size: 1.1rem;
    line-height: 1.7;
}

.source-info {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.source-citation, .source-verification {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.source-label {
    color: var(--text-muted);
}

.source-value {
    color: var(--text);
}

/* Context Section */
.context-section {
    padding: 40px 0;
}

.context-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.context-card {
    padding: 25px;
    background: rgba(22, 33, 62, 0.5);
    border: 1px solid var(--grid);
    border-radius: 8px;
    text-align: center;
}

.context-stat {
    font-family: var(--font-data);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.context-label {
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 4px;
}

.context-sublabel {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ============================================
   CARTOGRAM PAGE STYLES
   ============================================ */

.cartogram-page .map-container {
    margin: 30px 0;
}

.cartogram-map {
    border-radius: 12px;
    overflow: hidden;
}

.ranking-section {
    padding: 40px 0;
}

.ranking-title {
    font-family: var(--font-headline);
    text-align: center;
    margin-bottom: 30px;
}

.ranking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(22, 33, 62, 0.5);
    border-radius: 8px;
    border-left: 3px solid var(--accent);
}

.rank-number {
    font-family: var(--font-data);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 40px;
}

.rank-state {
    font-family: var(--font-data);
    font-weight: 600;
    display: block;
}

.rank-value {
    color: var(--text-muted);
    font-size: 0.9rem;
    display: block;
}

.rank-facilities {
    color: var(--facade-grey);
    font-size: 0.8rem;
    display: block;
}

/* ============================================
   ISOTYPE TIMELINE STYLES
   ============================================ */

.isotype-page .growth-section {
    text-align: center;
    padding: 20px 0;
}

.growth-card {
    display: inline-block;
    padding: 20px 40px;
    background: var(--truth-bg);
    border: 1px solid var(--truth-border);
    border-radius: 8px;
}

.growth-stat {
    font-family: var(--font-data);
    font-size: 3rem;
    font-weight: 700;
}

.growth-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.isotype-section {
    padding: 30px 0;
}

.agency-title {
    font-family: var(--font-headline);
    font-size: 1.3rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--grid);
}

.isotype-timeline {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.isotype-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 15px;
    background: rgba(22, 33, 62, 0.3);
    border-radius: 8px;
}

.isotype-label {
    min-width: 120px;
    text-align: right;
}

.isotype-year {
    font-family: var(--font-data);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    display: block;
}

.isotype-count {
    font-family: var(--font-data);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.isotype-icon-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    flex: 1;
}

.isotype-icons {
    font-size: 0.9rem;
    letter-spacing: 1px;
    line-height: 1.4;
}

.isotype-icons.bp-icons {
    filter: hue-rotate(180deg);
}

.isotype-icons.ice-icons {
    filter: hue-rotate(0deg);
}

.context-callout {
    padding: 25px;
    background: rgba(229, 62, 62, 0.1);
    border-left: 4px solid var(--truth-red);
    border-radius: 0 8px 8px 0;
    margin: 30px 0;
}

.context-callout .context-title {
    color: var(--truth-red);
    margin-bottom: 10px;
}

.context-text {
    line-height: 1.7;
}

.legend-section {
    text-align: center;
    padding: 20px 0;
}

.isotype-legend {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 20px;
}

.legend-icon {
    font-size: 1.2rem;
}

.legend-text {
    font-family: var(--font-data);
    color: var(--text-muted);
}

/* ============================================
   TAXPAYER RECEIPT STYLES
   ============================================ */

.taxpayer-receipt-page .form-section {
    padding: 30px 0;
}

.receipt-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: flex-end;
    max-width: 700px;
    margin: 0 auto;
}

.input-group {
    flex: 1;
    min-width: 200px;
}

.input-label {
    display: block;
    font-family: var(--font-data);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.receipt-input {
    width: 100%;
    padding: 12px 15px;
    font-family: var(--font-data);
    font-size: 1.1rem;
    background: var(--secondary);
    border: 1px solid var(--grid);
    border-radius: 6px;
    color: var(--text);
}

.receipt-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Receipt Dropdown - Full Styling */
.receipt-dropdown {
    width: 100%;
}

.receipt-dropdown .Select-control,
.receipt-dropdown .Select--single > .Select-control {
    background: var(--secondary) !important;
    border: 2px solid var(--grid) !important;
    border-radius: 6px !important;
    min-height: 48px !important;
    cursor: pointer;
}

.receipt-dropdown .Select-control:hover {
    border-color: var(--accent) !important;
}

.receipt-dropdown .Select-value-label,
.receipt-dropdown .Select-value {
    color: var(--text) !important;
    line-height: 44px !important;
    padding-left: 12px !important;
}

.receipt-dropdown .Select-placeholder {
    color: var(--text-muted) !important;
    line-height: 44px !important;
    padding-left: 12px !important;
}

.receipt-dropdown .Select-menu-outer {
    background: var(--secondary) !important;
    border: 2px solid var(--grid) !important;
    border-top: none !important;
    border-radius: 0 0 6px 6px !important;
    margin-top: -2px !important;
    z-index: 9999 !important;
}

.receipt-dropdown .Select-menu {
    max-height: 200px !important;
}

.receipt-dropdown .Select-option {
    background: var(--secondary) !important;
    color: var(--text) !important;
    padding: 14px 16px !important;
    cursor: pointer;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--grid) !important;
    display: block !important;
    overflow: visible !important;
}

.receipt-dropdown .Select-option:last-child {
    border-bottom: none !important;
}

.receipt-dropdown .Select-option:hover,
.receipt-dropdown .Select-option.is-focused {
    background: var(--chart-bg) !important;
    color: var(--accent) !important;
}

.receipt-dropdown .Select-option.is-selected {
    background: var(--accent) !important;
    color: white !important;
}

/* Fix for VirtualizedSelect options */
.receipt-dropdown .VirtualizedSelectOption {
    padding: 14px 16px !important;
    line-height: 1.4 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
}

.receipt-dropdown .Select-arrow-zone {
    padding-right: 15px !important;
}

.receipt-dropdown .Select-arrow {
    border-color: var(--text-muted) transparent transparent !important;
}

.receipt-dropdown .Select.is-open .Select-arrow {
    border-color: transparent transparent var(--text-muted) !important;
}

.receipt-dropdown .Select-input > input {
    color: var(--text) !important;
}

/* Modern Dash Dropdown Override (dash-core-components v2+) */
.receipt-dropdown .VirtualizedSelectFocusedOption {
    background: var(--chart-bg) !important;
}

.input-group .receipt-dropdown {
    position: relative;
    z-index: 100;
}

/* Bootstrap Select for Filing Status */
.receipt-select {
    background-color: var(--secondary) !important;
    color: var(--text) !important;
    border: 2px solid var(--grid) !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    min-height: 48px !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b8c4ce' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 12px !important;
}

.receipt-select:hover {
    border-color: var(--accent) !important;
}

.receipt-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.2) !important;
    outline: none !important;
}

.receipt-select option {
    background-color: var(--secondary) !important;
    color: var(--text) !important;
    padding: 12px 16px !important;
}

/* Fix for Dash 3.x dropdown menu - critical overlap fix */
.receipt-dropdown div[class*="menu"] {
    background: var(--secondary) !important;
    border: 2px solid var(--grid) !important;
    border-radius: 0 0 8px 8px !important;
    z-index: 9999 !important;
    position: absolute !important;
    width: 100% !important;
}

.receipt-dropdown div[class*="MenuList"] {
    padding: 0 !important;
    max-height: 200px !important;
}

.receipt-dropdown div[class*="option"] {
    background: var(--secondary) !important;
    color: var(--text) !important;
    padding: 14px 16px !important;
    min-height: 48px !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    border-bottom: 1px solid var(--grid) !important;
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.receipt-dropdown div[class*="option"]:last-child {
    border-bottom: none !important;
}

.receipt-dropdown div[class*="option"]:hover,
.receipt-dropdown div[class*="option"][class*="focused"] {
    background: var(--chart-bg) !important;
    color: var(--accent) !important;
}

.receipt-dropdown div[class*="option"][class*="selected"] {
    background: var(--accent) !important;
    color: white !important;
}

.receipt-dropdown div[class*="control"] {
    background: var(--secondary) !important;
    border: 2px solid var(--grid) !important;
    border-radius: 6px !important;
    min-height: 48px !important;
}

.receipt-dropdown div[class*="control"]:hover {
    border-color: var(--accent) !important;
}

.receipt-dropdown div[class*="singleValue"],
.receipt-dropdown div[class*="placeholder"] {
    color: var(--text) !important;
}

.receipt-dropdown div[class*="indicatorSeparator"] {
    display: none !important;
}

.receipt-dropdown svg {
    fill: var(--text-muted) !important;
}

.btn-receipt {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 14px 30px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.btn-receipt:hover {
    background: var(--accent-light);
    transform: translateY(-2px);
}

/* Receipt Paper */
.receipt-output-container {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

.receipt-paper {
    background: #f5f5dc;
    color: #1a1a1a;
    font-family: 'Courier New', monospace;
    padding: 30px 25px;
    max-width: 400px;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    position: relative;
}

.receipt-paper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 10px,
        #f5f5dc 10px,
        #f5f5dc 20px
    );
}

.receipt-border {
    color: #666;
    text-align: center;
    font-size: 0.7rem;
    letter-spacing: -1px;
}

.receipt-header {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 10px 0 5px;
}

.receipt-subheader {
    text-align: center;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 10px;
}

.receipt-summary {
    margin: 15px 0;
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 0.85rem;
}

.receipt-field {
    color: #444;
}

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

.receipt-divider {
    color: #999;
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: -1px;
    margin: 10px 0;
}

.receipt-section-title {
    text-align: center;
    font-size: 0.75rem;
    font-weight: bold;
    color: #333;
    margin: 5px 0;
}

.receipt-item-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-size: 0.75rem;
}

.receipt-item-name {
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70%;
}

.receipt-item-amount {
    font-weight: bold;
    color: #333;
}

.receipt-total {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 1rem;
    font-weight: bold;
}

.receipt-total-label {
    color: #333;
}

.receipt-total-amount {
    color: #c00;
    font-size: 1.2rem;
}

.receipt-footer {
    text-align: center;
    margin-top: 15px;
    font-size: 0.7rem;
    color: #666;
}

.receipt-footer-line {
    margin: 2px 0;
}

.receipt-footer-stars {
    margin-top: 10px;
    letter-spacing: 5px;
}

/* Opportunity Cost Section */
.opportunity-section {
    padding: 40px 0;
    background: rgba(22, 33, 62, 0.3);
}

.opportunity-title {
    font-family: var(--font-headline);
    text-align: center;
    margin-bottom: 30px;
}

.opportunity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.opportunity-card {
    padding: 20px;
    background: rgba(22, 33, 62, 0.6);
    border: 1px solid var(--grid);
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
}

.opportunity-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}

.opportunity-count {
    font-family: var(--font-data);
    font-size: 2rem;
    font-weight: 700;
    color: var(--success);
    margin-bottom: 8px;
}

.opportunity-label {
    color: var(--text);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.opportunity-source {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Context Stats Row */
.context-stats-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin: 20px 0;
}

.context-item {
    text-align: center;
}

.context-item .context-stat {
    font-family: var(--font-data);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent);
}

.context-item .context-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.context-comparison {
    text-align: center;
    margin-top: 20px;
    padding: 15px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .waffle-grid {
        grid-template-columns: repeat(25, 1fr);
    }

    .receipt-form {
        flex-direction: column;
    }

    .input-group {
        width: 100%;
    }

    .isotype-row {
        flex-direction: column;
        gap: 10px;
    }

    .isotype-label {
        text-align: left;
        min-width: auto;
    }

    .ranking-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SURVEILLANCE TECH STACK STYLES
   ============================================ */

.surveillance-page .surveillance-alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(229, 62, 62, 0.15);
    border: 1px solid rgba(229, 62, 62, 0.4);
    border-radius: 4px;
    margin-top: 15px;
}

.live-dot {
    animation: blink-urgent 1s infinite;
}

.surveillance-page .stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 30px 0;
}

.surveillance-page .stat-card {
    text-align: center;
    padding: 25px;
    background: rgba(22, 33, 62, 0.6);
    border: 1px solid var(--grid);
    border-radius: 8px;
}

/* Layer Section */
.layer-section {
    padding: 40px 0;
}

.subsection-title {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.subsection-intro {
    color: var(--text-muted);
    margin-bottom: 25px;
}

.layer-cake-chart {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
}

/* Vendor Section */
.vendors-section {
    padding: 40px 0;
}

.vendor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.vendor-card {
    background: rgba(22, 33, 62, 0.6);
    border: 1px solid var(--grid);
    border-radius: 10px;
    padding: 20px;
    transition: all 0.3s ease;
}

.vendor-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}

.vendor-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.vendor-icon {
    font-size: 2rem;
}

.vendor-name {
    font-family: var(--font-headline);
    font-size: 1.1rem;
    margin: 0 0 4px 0;
}

.vendor-category {
    font-family: var(--font-data);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vendor-details {
    margin-bottom: 15px;
}

.vendor-field {
    margin-bottom: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.vendor-field-label {
    color: var(--text-muted);
    font-weight: 600;
}

.vendor-field-value {
    color: var(--text);
}

.vendor-concern {
    padding: 12px;
    background: rgba(229, 62, 62, 0.1);
    border-left: 3px solid var(--truth-red);
    border-radius: 0 6px 6px 0;
    font-size: 0.85rem;
}

.concern-label {
    color: var(--truth-red);
    font-weight: 600;
}

.concern-text {
    color: var(--text-muted);
}

/* Impact Section */
.impact-section {
    padding: 40px 0;
    background: rgba(0, 0, 0, 0.2);
    margin-top: 30px;
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.impact-card {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: rgba(22, 33, 62, 0.5);
    border-radius: 8px;
}

.impact-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.impact-title {
    font-family: var(--font-headline);
    font-size: 1rem;
    margin: 0 0 8px 0;
    color: var(--text);
}

.impact-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Sub-tabs styling */
.sub-tabs {
    margin-top: 20px;
}

.sub-tabs .nav-link {
    font-size: 0.85rem !important;
    padding: 10px 15px !important;
}

.narrative-content-area {
    padding-top: 20px;
}

/* ============================================
   Bayesian Analysis Page
   ============================================ */

.bayesian-analysis-page {
    padding-bottom: 60px;
}

.bayesian-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 30px;
}

.bayesian-container {
    background: rgba(22, 33, 62, 0.4);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.bayesian-chart {
    margin-bottom: 15px;
}

.bayesian-info {
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.bayesian-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.bayesian-icon {
    font-size: 1.1rem;
}

.bayesian-discrepancy {
    color: var(--text);
    font-weight: 500;
}

.bayesian-ci {
    color: var(--text-muted);
}

.bayesian-description {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 12px 0 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Logistics Map Page */
.map-container {
    background: #0f0f23;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 20px;
}

/* ============================================
   Memorial Page
   ============================================ */

.memorial-page {
    background: #0a0a12;
    min-height: 100vh;
}

.memorial-header-section {
    padding: 60px 0 40px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.memorial-title {
    font-family: var(--font-headline);
    font-size: 3rem;
    font-weight: 400;
    color: var(--text);
    margin: 0 0 20px;
    letter-spacing: 0.05em;
}

.memorial-subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

.memorial-stats-bar {
    padding: 25px 0;
    background: rgba(20, 20, 35, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.memorial-stats-row {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

.memorial-stat {
    text-align: center;
}

.memorial-stat .stat-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.memorial-stat .stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
}

.memorial-stat .stat-note {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 3px;
}

.memorial-context-section {
    padding: 30px 0;
}

.context-box {
    background: rgba(229, 62, 62, 0.08);
    border: 1px solid rgba(229, 62, 62, 0.2);
    border-radius: 8px;
    padding: 20px 25px;
}

.context-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--truth-red);
    margin-bottom: 10px;
}

.context-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.memorial-cards-section {
    padding: 40px 0;
}

.memorial-grid {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.memorial-card {
    display: flex;
    gap: 25px;
    background: rgba(20, 20, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 25px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: calc(var(--card-index) * 0.1s);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.memorial-card-candle {
    flex-shrink: 0;
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5px;
}

.memorial-candle {
    position: relative;
}

.candle-flame {
    width: 12px;
    height: 20px;
    background: linear-gradient(to top, #ffd166, #ff8c00, transparent);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker 1.5s ease-in-out infinite alternate;
}

@keyframes flicker {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(0.95); }
}

.candle-body {
    width: 8px;
    height: 60px;
    background: linear-gradient(to bottom, #f5e6d3, #e6d5c3);
    border-radius: 0 0 2px 2px;
    margin-top: -2px;
}

.memorial-card-content {
    flex: 1;
}

.memorial-name {
    font-family: var(--font-headline);
    font-size: 1.4rem;
    color: var(--text);
    margin: 0 0 8px;
}

.memorial-vitals {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.memorial-separator {
    color: rgba(255, 255, 255, 0.2);
    margin: 0 5px;
}

.memorial-date {
    color: var(--truth-red);
}

.memorial-details {
    display: grid;
    gap: 8px;
    margin-bottom: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.detail-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.detail-value {
    color: var(--text);
    font-size: 0.85rem;
}

.cause-value {
    color: var(--truth-red);
}

.memorial-story {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 15px;
}

.memorial-source {
    font-size: 0.8rem;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.source-label {
    color: var(--text-muted);
}

.source-value {
    color: var(--facade-blue);
}

.memorial-action-section {
    padding: 50px 0;
    background: rgba(229, 62, 62, 0.05);
    border-top: 1px solid rgba(229, 62, 62, 0.1);
    text-align: center;
}

.action-title {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    color: var(--text);
    margin: 0 0 15px;
}

.action-text {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 25px;
    line-height: 1.6;
}

.action-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.action-link {
    display: inline-block;
    padding: 12px 24px;
    background: rgba(229, 62, 62, 0.15);
    border: 1px solid var(--truth-red);
    border-radius: 6px;
    color: var(--truth-red);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.action-link:hover {
    background: var(--truth-red);
    color: white;
}

.memorial-methodology {
    padding: 30px 0 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.memorial-methodology .methodology-title {
    font-family: var(--font-headline);
    font-size: 1rem;
    color: var(--text);
    margin: 0 0 10px;
}

.memorial-methodology .methodology-text {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

/* ============================================
   Deportation Globe Page
   ============================================ */

.deportation-globe-page {
    background: #0a0a14;
}

.globe-header {
    padding: 40px 0 20px;
}

.globe-stats-bar {
    padding: 20px 0;
    background: rgba(20, 20, 35, 0.5);
    margin-bottom: 20px;
}

.globe-stats-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.globe-stat {
    text-align: center;
}

.globe-stat .stat-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.globe-stat .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
}

.globe-container {
    background: #0a0a14;
    padding: 0 20px;
}

.destinations-section {
    padding: 40px 0;
}

.destinations-list {
    max-width: 600px;
}

.destination-item {
    margin-bottom: 15px;
}

.destination-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.rank-number {
    font-size: 0.9rem;
    color: var(--text-muted);
    width: 25px;
}

.country-name {
    font-size: 1rem;
    color: var(--text);
}

.destination-bar-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 35px;
}

.destination-bar {
    height: 8px;
    background: linear-gradient(90deg, var(--truth-red), #ff6b6b);
    border-radius: 4px;
}

.destination-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.globe-context-section {
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.human-cost-box {
    background: rgba(229, 62, 62, 0.08);
    border: 1px solid rgba(229, 62, 62, 0.2);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
}

.human-cost-box .context-title {
    font-family: var(--font-headline);
    font-size: 1.1rem;
    color: var(--truth-red);
    margin: 0 0 12px;
}

.human-cost-box .context-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.methodology-box {
    padding: 20px 0;
}

.methodology-box .methodology-title {
    font-family: var(--font-headline);
    font-size: 1rem;
    color: var(--text);
    margin: 0 0 10px;
}

.methodology-box .methodology-text {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

/* ============================================
   Economic Sankey Page
   ============================================ */

.economic-sankey-page {
    background: #0f0f23;
}

.sankey-header {
    padding: 40px 0 20px;
}

.sankey-stats-bar {
    padding: 20px 0;
    background: rgba(20, 20, 35, 0.5);
    margin-bottom: 20px;
}

.sankey-stats-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.sankey-stat {
    text-align: center;
}

.sankey-stat .stat-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.sankey-stat .stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
}

.sankey-stat .stat-note {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.sankey-container {
    padding: 0 20px;
}

.sankey-legend {
    padding: 30px 0;
}

.legend-title {
    font-family: var(--font-headline);
    font-size: 1rem;
    color: var(--text);
    margin: 0 0 15px;
}

.legend-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.legend-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.sankey-callout {
    padding: 30px 0;
}

.circular-economy-box {
    background: rgba(155, 44, 44, 0.1);
    border: 1px solid rgba(155, 44, 44, 0.3);
    border-radius: 8px;
    padding: 25px 30px;
}

.callout-title {
    font-family: var(--font-headline);
    font-size: 1.2rem;
    color: #e53e3e;
    margin: 0 0 12px;
}

.callout-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.sankey-methodology {
    padding: 30px 0 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================
   Landing Page with Redaction Reveal
   ============================================ */

.landing-page {
    background: #0a0a12;
    min-height: 100vh;
}

.landing-intro-overlay {
    position: relative;
    min-height: 70vh;
    background: linear-gradient(135deg, #0a0a12 0%, #1a1a2e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease, min-height 0.8s ease;
}

.landing-intro-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    min-height: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
}

.intro-content {
    text-align: center;
    max-width: 600px;
    padding: 40px;
}

.landing-title {
    font-family: var(--font-headline);
    font-size: 3.5rem;
    color: var(--text);
    margin: 0 0 30px;
    letter-spacing: 0.02em;
}

.landing-intro {
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1.8;
    margin: 0 0 20px;
}

.reveal-button {
    display: inline-block;
    padding: 16px 40px;
    background: transparent;
    border: 2px solid var(--truth-red);
    color: var(--truth-red);
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.reveal-button:hover {
    background: var(--truth-red);
    color: white;
}

.reveal-button.pulse {
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4); }
    50% { box-shadow: 0 0 0 15px rgba(229, 62, 62, 0); }
}

.scroll-prompt {
    margin-top: 50px;
    opacity: 0.6;
}

.scroll-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.scroll-indicator {
    width: 24px;
    height: 40px;
    border: 2px solid var(--text-muted);
    border-radius: 12px;
    margin: 0 auto;
    position: relative;
}

.scroll-indicator::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--text-muted);
    border-radius: 2px;
    animation: scroll-bounce 1.5s infinite;
}

@keyframes scroll-bounce {
    0%, 100% { top: 8px; opacity: 1; }
    50% { top: 20px; opacity: 0.3; }
}

.document-section {
    padding: 60px 20px;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s ease;
}

.document-container {
    max-width: 800px;
    margin: 0 auto;
}

.gov-document {
    background: #f5f5dc;
    color: #1a1a1a;
    padding: 50px 60px;
    font-family: 'Courier New', monospace;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    position: relative;
}

.gov-document::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
}

.doc-header-section {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #1a1a1a;
}

.doc-header {
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.15em;
}

.doc-subheader {
    font-size: 0.9rem;
    margin-top: 5px;
}

.doc-classification {
    display: inline-block;
    padding: 5px 15px;
    border: 2px solid #1a1a1a;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 20px 0;
}

.doc-title {
    font-size: 1.3rem;
    text-align: center;
    margin: 30px 0;
    text-decoration: underline;
}

.doc-paragraph {
    line-height: 1.8;
    margin: 20px 0;
    text-align: justify;
}

.redacted-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.redacted-truth {
    opacity: 0;
    color: var(--truth-red, #c53030);
    font-weight: bold;
    transition: opacity 0.4s ease;
    display: inline;
}

.redaction-bar {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #111;
    color: #111;
    padding: 2px 6px;
    opacity: 1;
    transition: opacity 0.4s ease;
    display: inline;
    user-select: none;
    min-width: 100%;
    white-space: nowrap;
}

/* Hover reveal on individual redaction */
.redacted-container:hover .redacted-truth,
.redaction-bar.revealed + .redacted-truth,
.redacted-container.revealed .redacted-truth {
    opacity: 1;
}

.redacted-container:hover .redaction-bar,
.redaction-bar.revealed,
.redacted-container.revealed .redaction-bar {
    opacity: 0;
}

/* Full document reveal via button */
.gov-document.revealed .redacted-truth {
    opacity: 1 !important;
}

.gov-document.revealed .redaction-bar {
    opacity: 0 !important;
    pointer-events: none;
}

.doc-statistic {
    margin: 25px 0;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.03);
    border-left: 3px solid #1a1a1a;
}

.doc-statistic .stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}

.stat-value-row {
    font-size: 1.3rem;
    font-weight: bold;
}

.stat-container {
    display: inline;
}

.stat-truth {
    color: #c53030;
}

.stat-official {
    background: #1a1a1a;
    color: #f5f5dc;
    padding: 2px 8px;
}

.hidden-note {
    font-size: 0.75rem;
    color: #666;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hidden-note.visible {
    opacity: 1;
}

.doc-callout {
    margin: 30px 0;
    padding: 20px;
    background: rgba(197, 48, 48, 0.1);
    border: 1px solid #c53030;
}

.callout-label {
    font-weight: bold;
    color: #c53030;
}

.callout-note {
    display: block;
    margin-top: 10px;
}

.doc-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #1a1a1a;
    font-size: 0.8rem;
}

.doc-footer-official {
    color: #666;
}

.doc-footer-truth {
    color: #c53030;
    font-weight: bold;
    margin-top: 10px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.gov-document.revealed .doc-footer-truth {
    opacity: 1;
}

.reveal-controls {
    margin-top: 30px;
    text-align: center;
}

.lift-button {
    padding: 12px 30px;
    background: var(--truth-red);
    border: none;
    color: white;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.lift-button:hover {
    background: #c53030;
    transform: translateY(-2px);
}

.hover-instructions {
    margin-top: 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.hover-hint-bar {
    background: #1a1a1a;
    color: #f5f5dc;
    padding: 2px 6px;
    font-family: monospace;
}

.explore-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #0a0a12 0%, #1a1a2e 100%);
}

.explore-title {
    font-family: var(--font-headline);
    font-size: 2rem;
    color: var(--text);
    text-align: center;
    margin: 0 0 20px;
}

.explore-intro {
    color: var(--text-muted);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.7;
}

.nav-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.nav-card {
    display: block;
    padding: 30px;
    background: rgba(22, 33, 62, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-card:hover {
    background: rgba(22, 33, 62, 0.8);
    border-color: var(--truth-red);
    transform: translateY(-5px);
}

.nav-card-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.nav-card-title {
    font-family: var(--font-headline);
    font-size: 1.2rem;
    color: var(--text);
    margin: 0 0 10px;
}

.nav-card-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.about-section {
    padding: 50px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.about-title {
    font-family: var(--font-headline);
    font-size: 1.1rem;
    color: var(--text);
    margin: 0 0 15px;
}

.about-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 800px;
}

/* ============================================
   Abuse Archive Page
   ============================================ */

.abuse-archive-page {
    background: #0a0a12;
}

.content-warning {
    background: rgba(229, 62, 62, 0.1);
    border: 1px solid rgba(229, 62, 62, 0.3);
    border-radius: 6px;
    padding: 12px 16px;
    margin-top: 20px;
}

.content-warning-label {
    color: var(--truth-red);
    font-weight: 600;
}

.content-warning-text {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.archive-stats-row, .bidding-stats-row, .heatmap-stats-row, .hydra-stats-row {
    display: flex;
    justify-content: center;
    gap: 35px;
    flex-wrap: wrap;
}

.archive-stat, .bidding-stat, .heatmap-stat, .hydra-stat {
    text-align: center;
}

.reveal-all-btn {
    padding: 12px 30px;
    background: var(--truth-red);
    border: none;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid;
    margin-bottom: 15px;
}

.category-title {
    font-family: var(--font-headline);
    font-size: 1.3rem;
    color: var(--text);
    margin: 0;
}

.incident-card {
    background: rgba(20, 20, 35, 0.6);
    border-left: 3px solid var(--truth-red);
    border-radius: 0 8px 8px 0;
    padding: 20px;
    margin-bottom: 15px;
}

.incident-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.incident-date {
    color: var(--truth-red);
    font-weight: 600;
}

/* Rigged Bidding Page */
.rigged-bidding-page, .arrest-heatmap-page, .corporate-hydra-page {
    background: #0f0f23;
}

.red-flags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.red-flag-card {
    background: rgba(155, 44, 44, 0.1);
    border: 1px solid rgba(229, 62, 62, 0.2);
    border-radius: 8px;
    padding: 20px;
}

.flag-title {
    font-family: var(--font-headline);
    font-size: 1rem;
    color: var(--text);
    margin: 0;
}

/* Heatmap Page */
.analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

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

.metro-ranking {
    background: rgba(22, 33, 62, 0.5);
    border-radius: 8px;
    padding: 20px;
}

.ranking-title {
    font-family: var(--font-headline);
    font-size: 1.1rem;
    color: var(--text);
    margin: 0 0 15px;
}

.intensity-bar {
    height: 6px;
    background: linear-gradient(90deg, var(--warning), var(--truth-red));
    border-radius: 3px;
}

.drivers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.driver-card {
    background: rgba(22, 33, 62, 0.5);
    border-radius: 8px;
    padding: 20px;
}

/* Corporate Hydra Page */
.companies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.company-card {
    background: rgba(22, 33, 62, 0.5);
    border-radius: 8px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.company-name {
    font-family: var(--font-headline);
    font-size: 1.2rem;
    color: var(--text);
    margin: 0 0 8px;
}

.subsidiary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin-bottom: 6px;
}

.sub-name {
    color: var(--text);
}

.sub-type {
    font-size: 0.75rem;
    text-transform: uppercase;
}

.sub-revenue {
    color: var(--text-muted);
}

/* Community Resources Page */
.community-resources-page .resource-link-btn:hover {
    background-color: var(--accent) !important;
    color: white !important;
}

.community-resources-page .row {
    display: flex;
    flex-wrap: wrap;
}

.community-resources-page .col-md-6,
.community-resources-page .col-lg-4 {
    display: flex;
}

/* ============================================
   WOW FACTOR FEATURES (merged from wow-features.css)
   ============================================ */

/* Counter animation states (merged) */
.stat-value.counting {
    opacity: 0;
    animation: countFadeIn 0.5s ease forwards;
}

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

.stat-card.animate-in {
    animation: statCardPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
}

@keyframes statCardPop {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.stat-card:nth-child(1).animate-in { animation-delay: 0.1s; }
.stat-card:nth-child(2).animate-in { animation-delay: 0.2s; }
.stat-card:nth-child(3).animate-in { animation-delay: 0.3s; }
.stat-card:nth-child(4).animate-in { animation-delay: 0.4s; }
.stat-card:nth-child(5).animate-in { animation-delay: 0.5s; }
.stat-card:nth-child(6).animate-in { animation-delay: 0.6s; }

/* Pulse effect for emphasis */
.stat-value.pulse {
    animation: valuePulse 2s ease-in-out infinite;
}

@keyframes valuePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Flight Tracker Styles */
.flight-tracker-container {
    background: var(--chart-bg);
    border-radius: 12px;
    padding: 25px;
    margin: 20px 0;
    border: 1px solid var(--grid);
    position: relative;
    overflow: hidden;
}

.flight-tracker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.flight-tracker-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--text);
    margin: 0;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(239, 71, 111, 0.2);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--danger);
}

.live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--danger);
    animation: livePulse 1.5s infinite;
}

@keyframes livePulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(239, 71, 111, 0.7);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 10px rgba(239, 71, 111, 0);
    }
}

.flight-stats-row {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.flight-stat {
    background: rgba(255,255,255,0.03);
    padding: 12px 20px;
    border-radius: 8px;
    border-left: 3px solid var(--accent);
}

.flight-stat-value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--accent);
}

.flight-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Animated flight path */
.flight-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawPath 3s ease forwards infinite;
}

@keyframes drawPath {
    to { stroke-dashoffset: 0; }
}

/* Personal Cost Calculator */
.calculator-container {
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.95) 0%, rgba(26, 26, 46, 0.98) 100%);
    border: 2px solid var(--accent);
    border-radius: 16px;
    padding: 30px;
    margin: 30px 0;
    position: relative;
    overflow: hidden;
}

.calculator-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--danger), var(--warning));
}

.calculator-header {
    text-align: center;
    margin-bottom: 30px;
}

.calculator-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--text);
    margin: 0 0 10px 0;
}

.calculator-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
}

.calculator-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.calculator-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calculator-field label {
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.calculator-field input,
.calculator-field select {
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
    background: var(--chart-bg);
    border: 1px solid var(--grid);
    border-radius: 5px;
    padding: 14px 16px;
    color: var(--text);
    font-size: 1rem;
    transition: all 0.25s ease;
}

.calculator-field input:focus,
.calculator-field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
}

.calculator-result {
    text-align: center;
    padding: 40px 30px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.08) 0%, rgba(233, 69, 96, 0.02) 100%);
    border-radius: 6px;
    border: 1px solid var(--accent);
    position: relative;
}

/* Corner decorations */
.calculator-result::before,
.calculator-result::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
}

.calculator-result::before {
    top: -1px;
    left: -1px;
    border-top: 3px solid var(--accent);
    border-left: 3px solid var(--accent);
}

.calculator-result::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 3px solid var(--accent);
    border-right: 3px solid var(--accent);
}

.result-amount {
    font-family: var(--font-data, 'IBM Plex Mono', monospace);
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: 600;
    color: var(--accent);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.02em;
}

.result-amount.animate {
    animation: resultPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes resultPop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.result-label {
    font-family: var(--font-body);
    font-size: 1.2rem;
    color: var(--text);
    margin-top: 15px;
    font-weight: 400;
}

.result-context {
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-top: 18px;
    line-height: 1.7;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.result-comparison {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.comparison-item {
    text-align: center;
    padding: 18px 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 5px;
    min-width: 140px;
    border: 1px solid var(--grid);
}

.comparison-value {
    font-family: var(--font-data, 'IBM Plex Mono', monospace);
    font-size: 1.4rem;
    color: var(--warning);
    font-weight: 600;
}

.comparison-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Scrollytelling Mode */
.scrollytelling-container {
    position: relative;
}

.scrollytelling-toggle {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1000;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: linear-gradient(135deg, var(--accent, #e94560) 0%, #c23152 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    box-shadow: 0 4px 20px rgba(233, 69, 96, 0.4);
}

.scrollytelling-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.5);
}

.story-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.story-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.story-section:nth-child(odd) {
    background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
}

.story-section:nth-child(even) {
    background: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 100%);
}

.story-content {
    max-width: 900px;
    text-align: center;
}

.story-number {
    font-family: var(--font-data, 'IBM Plex Mono', monospace);
    font-size: clamp(4rem, 15vw, 9rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 20px;
    opacity: 0.9;
    text-shadow: 0 0 60px rgba(233, 69, 96, 0.5);
}

.story-headline {
    font-family: var(--font-body);
    font-size: clamp(1.5rem, 5vw, 3rem);
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 30px;
    line-height: 1.2;
}

.story-text {
    font-size: 1.4rem;
    color: var(--text-muted);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}

.story-chart {
    margin-top: 40px;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.6s ease 0.3s;
}

.story-section.visible .story-chart {
    opacity: 1;
    transform: scale(1);
}

/* Progress indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: var(--accent);
    z-index: 1001;
    transition: width 0.1s ease;
}

/* Section indicators */
.section-indicators {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--grid);
    cursor: pointer;
    transition: all 0.3s ease;
}

.section-dot.active {
    background: var(--accent);
    transform: scale(1.3);
}

.section-dot:hover {
    background: var(--accent-light);
}

/* Sound Toggle */
.sound-toggle {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 1000;
    background: rgba(22, 33, 62, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--grid);
    border-radius: 6px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
}

.sound-toggle:hover {
    border-color: var(--accent);
    background: rgba(233, 69, 96, 0.15);
    transform: translateY(-2px);
}

.sound-toggle.muted {
    opacity: 0.6;
}

.sound-icon {
    font-size: 1.2rem;
}

/* Shareable Data Cards */
.share-card-container {
    position: relative;
}

.share-card-container:hover .share-button {
    opacity: 1;
}

.share-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 20, 0.92);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.share-modal.active {
    opacity: 1;
    visibility: visible;
}

.share-modal-content {
    background: linear-gradient(145deg, var(--secondary), var(--primary));
    border: 1px solid var(--grid);
    border-radius: 8px;
    padding: 40px;
    max-width: 520px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 80px rgba(0,0,0,0.5);
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.share-modal.active .share-modal-content {
    transform: translateY(0);
}

.share-modal-content::before {
    content: 'SHARE THIS DATA';
    display: block;
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 25px;
    text-transform: uppercase;
}

.share-preview {
    background: var(--primary);
    border-radius: 6px;
    padding: 35px 30px;
    margin-bottom: 25px;
    border: 1px solid var(--grid);
    position: relative;
}

.share-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-top: 2px solid var(--accent);
    border-left: 2px solid var(--accent);
}

.share-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border-bottom: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
}

.share-preview-stat {
    font-family: var(--font-data, 'IBM Plex Mono', monospace);
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    line-height: 1;
}

.share-preview-label {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: var(--text);
    margin-bottom: 8px;
    font-weight: 400;
}

.share-preview-source {
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.share-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.share-btn {
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
    padding: 12px 22px;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}

.share-btn.twitter { background: #1DA1F2; color: white; }
.share-btn.facebook { background: #4267B2; color: white; }
.share-btn.copy { background: transparent; border: 1px solid var(--grid); color: var(--text); }
.share-btn.download { background: linear-gradient(135deg, var(--accent), var(--accent-light)); color: white; }
.share-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.share-btn.copy:hover { border-color: var(--accent); color: var(--accent); }

.share-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
    line-height: 1;
}

.share-modal-close:hover { color: var(--accent); }

/* Theme Modes */
.theme-toggle-container {
    position: fixed;
    bottom: 140px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(22, 33, 62, 0.9);
    backdrop-filter: blur(8px);
    padding: 6px;
    border-radius: 6px;
    border: 1px solid var(--grid);
}

.theme-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
}

.theme-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); transform: translateX(-2px); }
.theme-btn.active { background: var(--accent); color: white; }

/* Light Theme (toggle-activated) */
body.theme-light {
    --primary: #f5f5f5;
    --secondary: #e8e8e8;
    --text: #1a1a2e;
    --text-muted: #666666;
    --chart-bg: #ffffff;
    --grid: #dddddd;
}

body.theme-light .app-container {
    background: var(--primary);
}

body.theme-light .header {
    background: linear-gradient(135deg, rgba(245, 245, 245, 0.95) 0%, rgba(232, 232, 232, 0.98) 100%);
}

body.theme-light .stat-card,
body.theme-light .info-card,
body.theme-light .facility-card,
body.theme-light .bill-card {
    background: rgba(0,0,0,0.03);
    border-color: var(--grid);
}

body.theme-light .nav-container {
    background: var(--secondary);
}

body.theme-light .stats-banner {
    background: linear-gradient(180deg, #e8e8e8 0%, #f5f5f5 100%);
}

body.theme-light .stat-label {
    color: #1a1a2e;
    text-shadow: none;
}

body.theme-light .stat-subtext {
    color: #555555;
    text-shadow: none;
}

body.theme-light .stat-value {
    background: linear-gradient(135deg, #1a1a2e 0%, #2b2d42 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.theme-light .section-label {
    color: var(--accent);
}

/* Light theme extensions */
body.theme-light .nav-link {
    color: #555;
}

body.theme-light .nav-link:hover {
    color: #1a1a2e;
}

body.theme-light .nav-link.active {
    color: var(--accent);
}

body.theme-light .footer {
    background: linear-gradient(180deg, #e8e8e8 0%, #d5d5d5 100%);
}

body.theme-light .pull-quote {
    background: linear-gradient(135deg, rgba(233,69,96,0.04) 0%, rgba(200, 200, 200, 0.3) 100%);
    color: #333;
}

body.theme-light .story-section:nth-child(odd) {
    background: linear-gradient(180deg, #f0f0f0 0%, #e8e8e8 100%);
}

body.theme-light .story-section:nth-child(even) {
    background: linear-gradient(180deg, #e8e8e8 0%, #f0f0f0 100%);
}

body.theme-light .story-text {
    color: #555;
}

body.theme-light .story-headline {
    color: #1a1a2e;
}

body.theme-light .dropdown-menu {
    background: #f5f5f5;
    border-color: #ddd;
}

body.theme-light .dropdown-item {
    color: #333;
}

body.theme-light .dropdown-item:hover {
    background: rgba(233, 69, 96, 0.1);
    color: var(--accent);
}

/* Reality Mode */
body.theme-reality {
    --primary: #0a0a0a;
    --secondary: #111111;
    --text: #cccccc;
    --text-muted: #777777;
    --chart-bg: #050505;
    --grid: #222222;
    --accent: #888888;
}

body.theme-reality .app-container { background: var(--primary); filter: grayscale(0.7); }
body.theme-reality .header { background: var(--primary); border-bottom-color: #333; }
body.theme-reality .main-title { letter-spacing: 0.3em; font-weight: 400; }
body.theme-reality .stat-value { color: var(--text); font-weight: 400; }
body.theme-reality .stat-card:hover { transform: none; border-color: var(--grid); }
body.theme-reality .deaths-content .stat-value,
body.theme-reality .abuse-content .stat-value { color: #ff4444; filter: grayscale(0); }
body.theme-reality .pull-quote { background: var(--primary); border-color: #444; font-style: normal; font-weight: 300; }

/* Transition for theme changes */
body {
    transition: background-color 0.5s ease, color 0.5s ease;
}

body * {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* WOW Features Responsive */
@media (max-width: 768px) {
    .calculator-container { padding: 20px; }
    .calculator-title { font-size: 1.5rem; }
    .result-amount { font-size: 2.5rem; }
    .story-number { font-size: 4rem; }
    .story-headline { font-size: 2rem; }
    .story-text { font-size: 1.1rem; }
    .section-indicators { display: none; }
    .scrollytelling-toggle { top: auto; bottom: 200px; right: 10px; padding: 8px 15px; font-size: 0.85rem; }
    .theme-toggle-container { bottom: 200px; right: 10px; }
    .sound-toggle { bottom: 140px; right: 10px; }
    .flight-tracker-header { flex-direction: column; gap: 15px; text-align: center; }
    .flight-stats-row { justify-content: center; }
}

/* Story sections default visible */
body:not(.scrollytelling-active) .story-section { min-height: auto !important; padding: 40px 20px; opacity: 1 !important; transform: none !important; display: flex !important; }
body:not(.scrollytelling-active) .story-number { font-size: 4rem; }
body:not(.scrollytelling-active) .story-headline { font-size: 2rem; }
body:not(.scrollytelling-active) .story-chart { opacity: 1; transform: none; }
body:not(.scrollytelling-active) .section-indicators { display: none; }
body:not(.scrollytelling-active) .scroll-progress { display: none; }

body.scrollytelling-active .nav-container { display: none; }
body.scrollytelling-active .stats-banner { display: none; }
body.scrollytelling-active .footer { display: none; }
body.scrollytelling-active .lang-selector { display: none; }
body.scrollytelling-active .story-section { min-height: 100vh; }

/* Calculator Dropdown Styling */
.calculator-field .Select-control { background-color: var(--chart-bg) !important; border-color: var(--grid) !important; border-radius: 8px !important; }
.calculator-field .Select-menu-outer { background-color: var(--chart-bg) !important; }
.calculator-field .Select-value-label { color: var(--text) !important; }

/* Share Button in Calculator */
#share-calc-result {
    background: linear-gradient(135deg, var(--accent) 0%, var(--danger) 100%);
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

#share-calc-result:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.4);
}

/* Accessibility - Reduced Motion (wow features) */
@media (prefers-reduced-motion: reduce) {
    .stat-card.animate-in,
    .stat-value.counting,
    .result-amount.animate,
    .story-section,
    .story-chart,
    .flight-path,
    .live-dot,
    .stat-value.pulse {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Methodology & Transparency Tab */
.methodology-container { padding-bottom: 40px; }
.methodology-container h3 { color: var(--text-light, #ffffff); border-bottom: 2px solid var(--accent, #e94560); padding-bottom: 10px; margin-bottom: 20px; }
.methodology-container h4 { color: var(--text-light, #ffffff); }
.methodology-container h5 { color: var(--accent, #e94560); margin-bottom: 10px; }

.source-card { transition: all 0.3s ease; }
.source-card:hover { transform: translateX(5px); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); }

.trust-badge { transition: all 0.3s ease; }
.source-card:hover .trust-badge { transform: scale(1.1); }

.provenance-table { border: 1px solid var(--grid, #16213e); }
.provenance-table th, .provenance-table td { padding: 12px 15px; border-bottom: 1px solid var(--grid, #16213e); text-align: left; }
.provenance-table th { background-color: var(--grid, #16213e); font-weight: 600; color: var(--text-light, #ffffff); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; }
.provenance-table tbody tr { transition: background-color 0.2s ease; }
.provenance-table tbody tr:hover { background-color: rgba(233, 69, 96, 0.1) !important; }

.methodology-container .container > div[style*="border-left: 4px solid"] { transition: all 0.3s ease; }
.methodology-container .container > div[style*="border-left: 4px solid"]:hover { transform: translateX(5px); box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3); }

@keyframes severityPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.methodology-container span[style*="background-color: rgb(220, 53, 69)"] { animation: severityPulse 2s ease-in-out infinite; }

.govt-figure { color: #dc3545; position: relative; }
.independent-figure { color: #28a745; }

@media (max-width: 768px) {
    .provenance-table { font-size: 0.8rem; }
    .provenance-table th, .provenance-table td { padding: 8px 10px; }
    .source-card { padding: 12px; }
    .methodology-container h3 { font-size: 1.3rem; }
}

@media print {
    .methodology-container { color: black !important; }
    .methodology-container * { background-color: white !important; color: black !important; }
    .trust-badge { border: 2px solid currentColor !important; }
    .provenance-table { border: 1px solid #ccc !important; }
    .provenance-table th, .provenance-table td { border: 1px solid #ccc !important; }
}

/* ============================================
   LIGHT MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: light) {
    /* Language selector in light mode */
    .lang-selector {
        background: rgba(255, 255, 255, 0.95);
        border-color: #d1d5db;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }

    .lang-btn {
        color: #374151;
    }

    .lang-btn:hover {
        background: rgba(0, 0, 0, 0.05);
        color: #111827;
    }

    .lang-btn.active {
        background: var(--accent);
        color: white;
    }
}

/* ============================================
   SHARE COMPONENTS - Privacy-Focused Sharing
   ============================================ */

/* Share Button */
.share-container {
    display: inline-block;
    position: relative;
}

.share-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.share-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.2);
}

.share-button::before {
    content: '';
    font-size: 1rem;
}

/* Share Popover */
.share-channels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.share-channel-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
}

.share-channel-btn .channel-name {
    flex: 1;
}

/* Signal - Blue */
.share-channel-btn.signal-btn {
    background: linear-gradient(135deg, #3a76f0 0%, #2c5aa0 100%);
    color: white;
}

.share-channel-btn.signal-btn:hover {
    background: linear-gradient(135deg, #4a86ff 0%, #3c6ab0 100%);
    transform: translateY(-1px);
}

.share-channel-btn.signal-btn::before {
    content: '';
}

/* Telegram - Blue */
.share-channel-btn.telegram-btn {
    background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
    color: white;
}

.share-channel-btn.telegram-btn:hover {
    background: linear-gradient(135deg, #009cdd 0%, #0077aa 100%);
    transform: translateY(-1px);
}

/* WhatsApp - Green */
.share-channel-btn.whatsapp-btn {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: white;
}

.share-channel-btn.whatsapp-btn:hover {
    background: linear-gradient(135deg, #30e070 0%, #1a9c8e 100%);
    transform: translateY(-1px);
}

/* Copy - Gray */
.share-channel-btn.copy-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.share-channel-btn.copy-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Email - Dark */
.share-channel-btn.email-btn {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.share-channel-btn.email-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.share-footer {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 8px;
}

.security-note {
    color: var(--success);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.security-note::before {
    content: '';
}

/* Alert Share Widget */
.alert-share-widget {
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.1) 0%, rgba(22, 33, 62, 0.9) 100%);
    border: 1px solid rgba(233, 69, 96, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.alert-widget-header {
    margin-bottom: 16px;
}

.alert-widget-title {
    color: var(--accent);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-widget-title::before {
    content: '';
    font-size: 1.3rem;
}

.alert-widget-subtitle {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.alert-textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text);
    padding: 12px;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 80px;
    margin-bottom: 12px;
}

.alert-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.alert-textarea::placeholder {
    color: var(--text-muted);
}

.alert-inputs-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.alert-type-select,
.alert-location-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text);
    padding: 8px 12px;
    font-size: 0.85rem;
}

.alert-type-select:focus,
.alert-location-input:focus {
    outline: none;
    border-color: var(--accent);
}

.alert-actions {
    display: flex;
    gap: 12px;
}

.quick-share-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.quick-share-btn.signal-btn {
    background: linear-gradient(135deg, #3a76f0 0%, #2c5aa0 100%);
    color: white;
}

.quick-share-btn.signal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(58, 118, 240, 0.4);
}

.quick-share-btn.copy-btn {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.quick-share-btn.copy-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.alert-feedback {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.alert-feedback.visible {
    opacity: 1;
    background: rgba(6, 214, 160, 0.2);
    color: var(--success);
}

.alert-widget-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.privacy-note {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Fixed Share Bar (optional - for key pages) */
.fixed-share-bar {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fixed-share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.fixed-share-btn:hover {
    transform: scale(1.1);
}

.fixed-share-btn.signal {
    background: #3a76f0;
    color: white;
}

.fixed-share-btn.signal::before {
    content: 'S';
    font-weight: bold;
}

.fixed-share-btn.telegram {
    background: #0088cc;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixed-share-btn.telegram::before {
    content: 'T';
    font-weight: bold;
}

.fixed-share-btn.whatsapp {
    background: #25d366;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixed-share-btn.whatsapp::before {
    content: 'W';
    font-weight: bold;
}

.fixed-share-btn.copy {
    background: rgba(30, 30, 50, 0.9);
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.fixed-share-btn.copy::before {
    content: '';
}

/* Mobile responsive */
@media (max-width: 768px) {
    .alert-inputs-row {
        flex-direction: column;
    }

    .alert-actions {
        flex-direction: column;
    }

    .fixed-share-bar {
        bottom: 70px;
        right: 10px;
    }

    .fixed-share-btn {
        width: 40px;
        height: 40px;
    }
}