/* 🌌 Crypto AI Intelligence Dashboard - CSP Compliant External CSS */
/* Complete Styles - Extracted from inline CSS for Content Security Policy compliance */

:root {
    --primary-color: #6d28d9;
    --secondary-color: #4338ca;
    --success-color: #10b981;
    --warning-color: #ff8c00;
    --danger-color: #ef4444;
    --dark-bg: #0a0a14;
    --card-bg: rgba(15, 15, 26, 0.95);
    --card-bg-secondary: rgba(20, 20, 35, 0.9);
    --border-color: rgba(75, 85, 99, 0.3);
    --border-gold: rgba(255, 215, 0, 0.3);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --gradient: linear-gradient(135deg, #8b5cf6 0%, #10b981 50%, #6366f1 100%);
    
    /* Casino Golden Palette - Used for Highlights Only */
    --gold-bright: #6d28d9;
    --gold-medium: #4338ca;
    --gold-dark: #5b21b6;
    --gold-glow: rgba(109, 40, 217, 0.2);
    --casino-black: #000000;
    --casino-dark: #1a1a2e;
    --luxury-purple: #4a148c;
    
    /* Aurora Color Palette */
    --aurora-purple: #8b5cf6;
    --aurora-green: #10b981;
    --aurora-blue: #3b82f6;
    --aurora-pink: #ec4899;
    --aurora-cyan: #06b6d4;
    --aurora-yellow: #f59e0b;
    
    /* Gradients */
    --aurora-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
    --aurora-gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #8b5cf6 100%);
    --aurora-gradient-green: linear-gradient(135deg, #10b981 0%, #059669 50%, #10b981 100%);
    --aurora-gradient-warm: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%);
    --aurora-gradient-cool: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0284c7 100%);
    
    /* Base Colors */
    --bull-color: var(--aurora-green);
    --bear-color: #ef4444;
    
    /* Effects */
    --glow-purple: 0 0 20px rgba(139, 92, 246, 0.3);
    --glow-green: 0 0 20px rgba(16, 185, 129, 0.3);
    --glow-red: 0 0 20px rgba(239, 68, 68, 0.3);
}

/* ===== MARKET DIRECTION STYLES ===== */

.market-direction-container {
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-radius: 8px;
}

.market-direction-container.direction-up {
    border-left: 4px solid var(--success-color);
}

.market-direction-container.direction-down {
    border-left: 4px solid var(--danger-color);
}

.market-direction-container.direction-sideways {
    border-left: 4px solid var(--warning-color);
}

.market-direction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.market-direction-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.market-direction-emoji {
    font-size: 1.5rem;
}

.market-direction-text {
    font-weight: bold;
    font-size: 1.1rem;
}

.market-direction-text.up {
    color: var(--success-color);
}

.market-direction-text.down {
    color: var(--danger-color);
}

.market-direction-text.sideways {
    color: var(--warning-color);
}

.market-direction-confidence {
    font-weight: 600;
    font-size: 0.8rem;
    background: rgba(255,255,255,0.1);
    padding: 0.25rem 0.65rem;
    border-radius: 12px;
}

.market-direction-confidence.high {
    color: var(--success-color);
}

.market-direction-confidence.medium {
    color: var(--warning-color);
}

.market-direction-confidence.low {
    color: var(--danger-color);
}

.market-direction-reasoning {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.4;
}

/* ===== OUTLOOK CARD STYLES ===== */

.outlook-targets-box {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: rgba(0, 255, 157, 0.08);
    border-radius: 4px;
    border-left: 2px solid var(--success-color);
    display: inline-block;
}

.outlook-targets-label {
    color: var(--text-primary);
    font-weight: 600;
}

.outlook-target-value {
    color: var(--success-color);
    font-weight: 600;
    margin-left: 0.5rem;
}

.outlook-single-target {
    font-size: 0.75rem;
    color: var(--success-color);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.outlook-reasoning {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.outlook-section-divider {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.outlook-section-title {
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.outlook-list {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.68rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.outlook-list-item {
    margin-bottom: 0.15rem;
}

/* ===== SENTIMENT STYLES ===== */

.sentiment-reasoning {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.5;
    text-align: left;
    font-weight: normal;
}

.sentiment-metrics-title {
    color: var(--text-primary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    display: block;
}

.sentiment-metrics-list {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}

.sentiment-metrics-item {
    margin-bottom: 0.25rem;
}

/* ===== BASE STYLES ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== KEYFRAMES & ANIMATIONS ===== */

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 500px;
        transform: translateY(0);
    }
}

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

@keyframes dataStream {
    0% { transform: translateY(100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(-100%); opacity: 0; }
}

@keyframes sonarPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); box-shadow: 0 0 30px rgba(16, 185, 129, 0.5); }
    100% { transform: scale(1); }
}

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

@keyframes typingPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

body {
    font-family: 'League Spartan', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: radial-gradient(circle at 25% 25%, rgba(139, 92, 246, 0.3) 0%, transparent 50%), 
                radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.2) 0%, transparent 50%), 
                linear-gradient(135deg, #000 0%, #0f172a 100%);
    background-attachment: fixed;
    background-size: 100% 100%;
    /* backdrop-filter: blur(20px); - Removed to fix sticky positioning context */
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    padding-bottom: 80px; /* Add space for sticky bottom ticker */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

/* System Overview in Header */
.system-overview-header {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

.metrics-compact {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.metric-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 50px;
}

.metric-value-compact {
    font-size: 1rem;
    font-weight: bold;
    color: var(--primary-color);
    line-height: 1;
}

.metric-label-compact {
    font-size: 0.625rem;
    color: var(--text-secondary);
    margin-top: 0.125rem;
    line-height: 1;
}

/* Full-width news feed */
.news-feed-card {
    grid-column: 1 / -1;
}

/* Header */
.header {
    background: linear-gradient(135deg, var(--casino-black) 0%, var(--casino-dark) 100%);
    border-bottom: 2px solid var(--gold-bright);
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.2);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 20px;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.status-indicators {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Status Indicators - Ultra-Compact Mobile-First Design */
.status-compact {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid var(--gold-glow);
    border-radius: 20px;
    font-size: 0.8rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.1);
    white-space: nowrap;
    font-weight: 500;
    color: var(--text-primary);
}

.status-all {
    color: var(--text-primary);
    font-weight: 500;
}

#time-compact {
    color: var(--success-color);
    font-weight: 600;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold-bright);
    animation: pulse 2s infinite;
    box-shadow: 0 0 10px var(--gold-glow);
}

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

/* Grid Layout */
.dashboard-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
    min-height: calc(100vh - 120px);
}

.left-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}



.right-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Responsive layout */
@media (max-width: 1200px) {
    .dashboard-main {
        grid-template-columns: 1fr;
    }
    
    .right-column {
        order: -1;
    }
}

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

.dashboard-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.dashboard-row-flexible {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: start;
}

.dashboard-row-single {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.card-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.card-large {
    height: fit-content;
    min-height: 400px;
}

.card-compact {
    height: fit-content;
}

.card-compact.events-card {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.events-container {
    flex-grow: 1;
    /* Removed overflow-y: auto and min-height to display events inline without scrolling */
}

.event-item {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s;
}

.event-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

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

/* Reduce event title boldness for better readability */
.event-item strong {
    font-weight: 600; /* Semi-bold instead of bold */
}

.event-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 0.75rem;
}

.event-details.expanded {
    max-height: 200px;
    padding: 0.5rem 0.75rem;
}

/* Events Expand Button */
.events-expand-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #000 0%, #0f172a 100%);
    border: 2px solid rgba(255, 215, 0, 0.4);
    color: #fff;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15), 
                0 4px 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
}

.events-expand-btn:hover {
    background: radial-gradient(circle at 25% 25%, rgba(139, 92, 246, 0.3) 0%, transparent 50%), 
                radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.2) 0%, transparent 50%), 
                linear-gradient(135deg, #000 0%, #0f172a 100%);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.4), 
                0 0 20px rgba(16, 185, 129, 0.2),
                0 4px 20px rgba(0, 0, 0, 0.4);
    border-color: rgba(139, 92, 246, 0.6);
}

.events-expand-btn #expand-btn-text {
    background: linear-gradient(135deg, #E6A843 0%, #F4C862 25%, #E6A843 50%, #D49B38 75%, #F1C15B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(230, 168, 67, 0.3);
    filter: drop-shadow(0 0 8px rgba(244, 200, 98, 0.4));
}

/* Cards */
.card {
    background: var(--card-bg);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15), 
                0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.25), 
                0 4px 20px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.6);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #cbd5e1; /* Default color for emojis */
}

.card-title-text {
    background: linear-gradient(135deg, #E6A843 0%, #F4C862 25%, #E6A843 50%, #D49B38 75%, #F1C15B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(230, 168, 67, 0.3);
    filter: drop-shadow(0 0 8px rgba(244, 200, 98, 0.4));
}

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

/* News Feed Grid Layout */
.news-feed {
    max-height: none;
    overflow-y: visible;
}

.news-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
    padding: 0;
}

.news-item-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.news-item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    border-color: var(--primary-color);
}

.news-item-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    position: relative;
}

.news-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-item-image .placeholder-icon {
    font-size: 3rem;
    opacity: 0.7;
}

.news-item-content {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.news-item-headline {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-item-summary {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

.news-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}

.news-item-meta {
    color: var(--text-secondary);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.news-item-impact {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* News feed styles - full display */
.news-item {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.news-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

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

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.news-headline {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    flex-grow: 1;
}

.impact-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.impact-high { 
    background: var(--danger-color); 
    color: white; 
}

.impact-medium { 
    background: var(--warning-color); 
    color: white; 
}

.impact-low { 
    background: var(--success-color); 
    color: white; 
}

.news-meta {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.news-summary {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Improved text contrast for readability - Dark theme optimized */
.card-subtitle,
.news-meta,
.news-summary,
.news-item-meta,
.news-item-summary,
.metric-label,
.insight-content,
.event-details {
    color: var(--text-secondary) !important;
}

/* Ensure primary content remains highly visible */
.card-title,
.news-headline,
.news-item-headline,
.metric-value,
#market-outlook,
#market-sentiment,
#additional-insights,
#out-of-box,
#contrarian-trade {
    color: var(--text-primary) !important;
    font-weight: 500;
}

/* Ensure all content areas have dark backgrounds and good contrast */
#market-outlook,
#market-sentiment {
    background: transparent !important;
    color: var(--text-primary) !important;
}

#market-outlook > div {
    background: var(--card-bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    padding: 1.5rem !important;
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
}

#market-outlook > div:hover {
    border-color: var(--border-gold) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.1) !important;
}



/* Metrics */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.metric {
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

.metric-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Sentiment Gauge */
.sentiment-gauge {
    position: relative;
    width: 200px;
    height: 100px;
    margin: 0 auto;
}

/* Loading States */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
}

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

/* Header Updates */
.header {
    background: #000 !important; /* Pure black background */
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: max-content;
}

.logo-img {
    height: 32px;
    width: auto;
}

.logo-text {
    background: linear-gradient(135deg, #E6A843 0%, #F4C862 25%, #E6A843 50%, #D49B38 75%, #F1C15B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 5px rgba(244, 200, 98, 0.3));
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Crypto Prices Ticker - Sticky Bottom */
.crypto-ticker-container {
    background: linear-gradient(135deg, var(--casino-black) 0%, var(--casino-dark) 100%);
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    border-bottom: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75px; /* Increased height for better aesthetics */
    display: flex;
    align-items: center;
    z-index: 9999; /* Increased z-index to ensure visibility */
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    transform: translateZ(0); /* Force hardware acceleration */
}

.crypto-ticker-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #E6A843, #F4C862, #E6A843, transparent);
    animation: scanline 3s linear infinite;
}

/* Ensure ticker is immediately visible */
.ticker-content {
    animation-delay: 0s !important;
    visibility: visible !important;
}

@keyframes scanline {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Pinned BTC and ETH Section */
.crypto-pinned-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    min-width: 450px;
    height: 100%;
    position: relative;
    background: linear-gradient(
        90deg, 
        rgba(255, 215, 0, 0.08) 0%, 
        rgba(255, 215, 0, 0.06) 60%, 
        rgba(255, 215, 0, 0.03) 80%, 
        rgba(255, 215, 0, 0.01) 95%, 
        transparent 100%
    );
}

.pinned-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 0, 0, 0.6); /* More transparent background */
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: 8px;
    backdrop-filter: blur(15px);
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    height: 60px; /* Fixed height for items */
}

.pinned-item:hover {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.15);
}

.crypto-ticker {
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

.ticker-content {
    display: flex;
    align-items: center;
    animation: scroll 120s linear infinite;
    gap: 2rem;
    padding: 0 1rem;
    white-space: nowrap;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

@keyframes scroll {
    0% { transform: translateX(0%) translateZ(0); }
    100% { transform: translateX(-50%) translateZ(0); }
}

.crypto-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    padding: 0.25rem 0.75rem;
    background: rgba(0, 0, 0, 0.6); /* More transparent background */
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 8px;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    will-change: background, border-color, box-shadow;
    height: 60px; /* Fixed height for items */
}

.crypto-item:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
    transform: scale(1.03);
}

.crypto-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;            
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.crypto-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.crypto-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.1rem;
    flex-shrink: 0;
    min-width: 40px;
    margin-left: -0.25rem;
}

.crypto-symbol {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: 0.01em;
}

.crypto-rank {
    font-size: 0.55rem;
    color: rgba(255, 215, 0, 0.6);
    font-weight: 500;
    line-height: 1;
}

.crypto-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0; /* Remove gap to save vertical space */
    justify-content: center; /* Center vertically */
    flex: 1;
    min-width: 0;
}

.crypto-price {
    font-weight: 800;
    background: linear-gradient(135deg, #E6A843 0%, #F4C862 25%, #E6A843 50%, #D49B38 75%, #F1C15B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.1rem; /* Reduced from 1.5rem */
    line-height: 1.1;
    white-space: nowrap;
}

/* Superscript styling for decimals on coins over $100 */
.crypto-price .decimal {
    font-size: 0.65em;
    vertical-align: super;
    opacity: 0.6;
}

.crypto-change {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    line-height: 1.1;
}

.crypto-change.positive {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.crypto-change.negative {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.2);
}

/* Ensure pinned items also get proper color styling */
.pinned-item .crypto-change.positive {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.pinned-item .crypto-change.negative {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.2);
}

/* Professional Navigation Tabs - Header Integrated */
.nav-tabs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    background: transparent;
    flex: 1;
    margin-left: 2rem;
}

.nav-tab {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'League Spartan', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 42px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tab-emoji {
    display: block;
    font-size: 1.2rem;
    margin-right: 0;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.3));
    opacity: 1;
    transition: transform 0.3s ease;
}

.tab-text {
    background: linear-gradient(135deg, #E6A843 0%, #F4C862 25%, #E6A843 50%, #D49B38 75%, #F1C15B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    font-weight: 800;
    text-shadow: none;
    filter: drop-shadow(0 0 8px rgba(244, 200, 98, 0.4));
}

.nav-tab:hover .tab-emoji {
    transform: scale(1.2) rotate(5deg);
}

.nav-tab.active {
    background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.4) 0%, transparent 70%), 
                linear-gradient(180deg, rgba(20, 20, 35, 0.8) 0%, rgba(10, 10, 20, 0.95) 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5), 
                0 0 10px rgba(16, 185, 129, 0.3),
                inset 0 0 20px rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.8);
    z-index: 10;
}

.nav-tab.active .tab-text {
    filter: drop-shadow(0 0 15px rgba(244, 200, 98, 0.8));
    background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-tab.active .tab-emoji {
    filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.8));
    transform: scale(1.1);
}

.nav-tab:hover:not(.active) {
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.3), 
                0 5px 15px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 215, 0, 0.8);
    background: rgba(255, 255, 255, 0.08);
}

.nav-tab:hover:not(.active) .tab-text {
    filter: drop-shadow(0 0 12px rgba(244, 200, 98, 0.7));
}

/* Mobile Dashboard Layout */
.mobile-dashboard {
    width: 100%;
}

.tab-content {
    display: none;
}

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

/* Priority Cards (Mobile First) */
.priority-cards {
    display: grid;
    gap: 1.5rem;
}

/* Left column cards container */
.left-column-cards {
    display: grid;
    gap: 1.5rem;
}

/* Desktop Layout for Priority Cards - 2 Column Layout */
@media (min-width: 769px) {
    .priority-cards {
        display: grid;
        grid-template-columns: 1fr 2fr; /* Left column smaller, right column larger */
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .left-column-cards {
        display: grid;
        gap: 1.5rem;
        grid-template-rows: auto auto; /* Stack Market Direction and Sentiment vertically */
    }
    
    .market-outlook-card {
        /* Market Outlook takes full height of right column */
        height: 100%;
    }
}

/* Tablet Layout - Stack cards vertically */
@media (max-width: 768px) and (min-width: 481px) {
    .priority-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Secondary Cards - Desktop: 3 columns, Mobile: stacked */
.secondary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Standalone cards that need bottom margin */
.card:not(.secondary-cards .card):not(.priority-cards .card) {
    margin-bottom: 2rem;
}

/* Mobile breakpoint for secondary cards - Single column stacked */
@media (max-width: 768px) {
    .secondary-cards {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
}

/* Tablet breakpoint for secondary cards - Stack vertically in portrait mode */
@media (max-width: 1024px) and (min-width: 769px) {
    .secondary-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}





/* Enhanced Markets List */
.enhanced-markets-container {    
    overflow: hidden;
}

.markets-header-enhanced {
    display: grid;
    grid-template-columns: 100px 1fr 140px 100px 120px;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    color: var(--aurora-purple);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    align-items: center;
}

.markets-header-enhanced > div {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--aurora-purple);
    font-weight: 600;
}

.markets-header-enhanced > div:first-child {
    text-align: left;
}

.markets-header-enhanced > div:nth-child(3),
.markets-header-enhanced > div:nth-child(4),
.markets-header-enhanced > div:nth-child(5) {
    text-align: right;
}



.legend-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.z-score-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid transparent;
}

/* Z-score styling only for .z-score-indicator elements, not containers */
.z-score-indicator.z-score-extreme-negative {
    background: rgba(220, 38, 38, 0.8);
    color: #ffffff;
    border-color: rgba(220, 38, 38, 1);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.z-score-indicator.z-score-high-negative {
    background: rgba(239, 68, 68, 0.7);
    color: #ffffff;
    border-color: rgba(239, 68, 68, 0.8);
}

.z-score-indicator.z-score-negative {
    background: rgba(248, 113, 113, 0.6);
    color: #ffffff;
    border-color: rgba(248, 113, 113, 0.7);
}

.z-score-indicator.z-score-neutral {
    background: rgba(156, 163, 175, 0.3);
    color: #d1d5db;
    border-color: rgba(156, 163, 175, 0.4);
}

.z-score-indicator.z-score-positive {
    background: rgba(34, 197, 94, 0.6);
    color: #ffffff;
    border-color: rgba(34, 197, 94, 0.7);
}

.z-score-indicator.z-score-high-positive {
    background: rgba(16, 185, 129, 0.7);
    color: #ffffff;
    border-color: rgba(16, 185, 129, 0.8);
}

.z-score-indicator.z-score-extreme-positive {
    background: rgba(5, 150, 105, 0.8);
    color: #ffffff;
    border-color: rgba(5, 150, 105, 1);
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
}

/* Prevent Z-score classes from affecting container backgrounds */
.market-change-compact.z-score-extreme-negative,
.market-change-compact.z-score-high-negative,
.market-change-compact.z-score-negative,
.market-change-compact.z-score-neutral,
.market-change-compact.z-score-positive,
.market-change-compact.z-score-high-positive,
.market-change-compact.z-score-extreme-positive {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.market-row-enhanced {
    display: grid;
    grid-template-columns: 120px 1fr 180px 100px 120px;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    align-items: center;
}

.market-row-enhanced:hover {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.08));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
    cursor: pointer;
}

@media (min-width: 768px) {
    .market-row-enhanced:hover {
        border-radius: 8px;
        margin: 0 -0.25rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Market expansion details */
.market-expand-details {
    grid-column: 1 / -1;
    background: rgba(16, 185, 129, 0.05);
    border-top: 1px solid rgba(16, 185, 129, 0.2);
    padding: 1rem;
    margin-top: 0.5rem;
}

.price-periods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.period-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.period-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.period-value {
    font-weight: 600;
    font-size: 0.9rem;
}

.additional-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.additional-stats .stat-item {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Expand indicator styling */
.expand-indicator {
    color: #9ca3af;
    font-size: 0.8rem;
    margin-left: 0.5rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.market-row-enhanced:hover .expand-indicator {
    color: #3b82f6;
    transform: scale(1.1);
}

/* Fallback styling for missing coin images */
.crypto-icon.no-image::before,
.market-symbol.no-image::before {
    content: attr(data-symbol);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 50%;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Desktop-specific improvements - SINGLE ROW EXCEL-LIKE LAYOUT */
@media (min-width: 768px) {
    .market-row-enhanced {
        margin: 2px 0;
        min-height: 50px;
        transition: all 0.2s ease;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .rank-col {
        text-align: center;
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.8rem;
    }

.symbol-col {
    display: flex;
    align-items: center;
    width: 100%;
}

.coin-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.coin-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0; /* Allow flex item to shrink below content width */
    flex: 1; /* Take available space */
}

.coin-symbol {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.coin-name {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    line-height: 1;
    margin-top: 1px;
}



.symbol-col img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .symbol-col span {
        font-weight: 700;
        font-size: 0.9rem;
        text-transform: uppercase;
    }

    .name-col {
        font-size: 0.82rem;
        color: var(--text-secondary);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
        padding-right: 0.5rem;
    }

    .price-col {
        text-align: center;
        font-weight: 700;
        font-family: 'Courier New', monospace;
        font-size: 0.9rem;
        color: var(--text-primary);
    }

    .mcap-col,
    .volume-col {
        text-align: center;
        font-size: 0.8rem;
        color: var(--text-muted);
    }



    .ath-col {
        text-align: center;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .ath-col.positive {
        color: #22c55e;
    }

    .ath-col.negative {
        color: #ef4444;
    }

    .change-col {
        text-align: right;
        font-weight: 700;
        font-size: 0.85rem;
    }

    .change-col.positive {
        color: #22c55e;
    }

    .change-col.negative {
        color: #ef4444;
    }

    /* Timeframe columns */
    .change-24h-col, .change-7d-col, .change-14d-col, 
    .change-30d-col, .change-90d-col, .change-1y-col {
        text-align: center;
        font-weight: 700;
        font-size: 0.7rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        white-space: nowrap;
        overflow: hidden;
        min-width: 75px;
        width: 75px;
        line-height: 1.1;
    }

    .change-24h-col.positive, .change-7d-col.positive, .change-14d-col.positive, 
    .change-30d-col.positive, .change-90d-col.positive, .change-1y-col.positive {
        color: #22c55e;
    }

    .change-24h-col.negative, .change-7d-col.negative, .change-14d-col.negative, 
    .change-30d-col.negative, .change-90d-col.negative, .change-1y-col.negative {
        color: #ef4444;
    }

    /* Z-score styling for under timeframe percentages */
    .zscore-under-change {
        font-size: 0.6rem;
        font-weight: 600;
        opacity: 0.8;
        line-height: 1;
        margin-top: 1px;
    }

    /* Real-time price update flash effect */
    .price-flash {
        animation: priceFlash 0.3s ease-out;
    }

    @keyframes priceFlash {
        0% { 
            background-color: rgba(16, 185, 129, 0.3);
            transform: scale(1.02);
        }
        100% { 
            background-color: transparent;
            transform: scale(1);
        }
    }

    /* Enhanced Visual Design - "Turbo God Mode" */
    
    /* Market rows with enhanced hover effects */
    .market-row-enhanced {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 6px;
        margin: 2px 0;
        position: relative;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        box-sizing: border-box;
    }
    
    .market-row-enhanced::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
        transition: left 0.5s ease;
        z-index: 1;
    }
    
    .market-row-enhanced:hover::before {
        left: 100%;
    }
    
    .market-row-enhanced:hover {
        background: rgba(0, 0, 0, 0.5);
        transform: translateY(-2px) scale(1.001);
        box-shadow: 
            0 4px 16px rgba(255, 255, 255, 0.1),
            0 0 0 1px rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        z-index: 10;
    }
    

    
    .markets-summary-row {
        background: linear-gradient(135deg, 
            rgba(16, 185, 129, 0.18) 0%, 
            rgba(139, 92, 246, 0.18) 50%,
            rgba(99, 102, 241, 0.15) 100%);
        border: 1px solid rgba(16, 185, 129, 0.4);
        border-radius: 12px;
        box-shadow: 
            0 4px 20px rgba(16, 185, 129, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        position: relative;
        overflow: hidden;
        margin-bottom: 0.5rem !important;
        font-weight: 600;
        font-size: 0.8rem;
        color: var(--text-primary);
        padding: 0.5rem 1rem;
    }
    
    .markets-summary-row::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, 
            transparent,
            rgba(16, 185, 129, 0.6),
            rgba(139, 92, 246, 0.6),
            transparent);
    }
    
    /* Enhanced typography */
    .summary-label {
        font-weight: 800;
        background: linear-gradient(135deg, #10b981, #8b5cf6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
        font-size: 0.95rem;
        letter-spacing: 0.5px;
    }
    
    /* Enhanced percentage displays */
    .change-24h-col.positive, .change-7d-col.positive, .change-14d-col.positive, 
    .change-30d-col.positive, .change-90d-col.positive, .change-1y-col.positive,
    .summary-avg.positive {
        color: #22c55e;
        text-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
        font-weight: 800;
    }

    .change-24h-col.negative, .change-7d-col.negative, .change-14d-col.negative, 
    .change-30d-col.negative, .change-90d-col.negative, .change-1y-col.negative,
    .summary-avg.negative {
        color: #ef4444;
        text-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
        font-weight: 800;
    }
    
    /* Enhanced Z-score indicators */
    .zscore-under-change {
        font-size: 0.5rem;
        font-weight: 500;
        color: #60a5fa !important;
        opacity: 0.85;
        line-height: 1;
        margin-top: 1px;
        padding: 0px 2px;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(96, 165, 250, 0.2);
        white-space: nowrap;
    }
    
    /* Enhanced coin symbols and names */
    .symbol-col {
        position: relative;
    }
    
    .symbol-col img {
        transition: all 0.3s ease;
        border: 2px solid transparent;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
    }
    
    .market-row-enhanced:hover .symbol-col img {
        transform: scale(1.1);
        border-color: rgba(139, 92, 246, 0.5);
        box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
    }
    
    .symbol-col span {
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        background: linear-gradient(135deg, #ffffff, #e2e8f0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    /* Enhanced price displays */
    .price-col {
        font-weight: 800;
        font-family: 'JetBrains Mono', monospace;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: 0.3px;
        transition: all 0.3s ease;
    }
    
    .market-row-enhanced:hover .price-col {
        transform: scale(1.05);
        text-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
    }
    
    /* Enhanced volume and market cap */
    .volume-col, .mcap-col {
        font-weight: 600;
        color: #e2e8f0;
        transition: all 0.3s ease;
    }
    
    .market-row-enhanced:hover .volume-col,
    .market-row-enhanced:hover .mcap-col {
        color: #f1f5f9;
        transform: translateX(2px);
    }
    
    /* Enhanced scrollbar */
    .enhanced-markets-container::-webkit-scrollbar {
        width: 8px;
    }
    
    .enhanced-markets-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
    }
    
    .enhanced-markets-container::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #8b5cf6, #10b981);
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
    }
    
    .enhanced-markets-container::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #7c3aed, #059669);
    }

    /* Enhanced desktop header - uses shared classes */
    .markets-header-desktop {
        border-radius: 8px 8px 0 0;
        margin-bottom: 0;
        margin-top: 0.5rem;
    }

    /* Summary cell styling */
    .summary-cell {
        text-align: center;
        font-weight: 600;
        font-size: 0.8rem;
    }

    .summary-title {
        font-weight: 700;
        color: var(--text-primary);
    }

    .summary-span-3 {
        grid-column: span 3;
        text-align: left;
        padding-left: 0.5rem;
    }
    
    /* Legend toggle button */
    .legend-toggle-btn {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.8), rgba(99, 102, 241, 0.8));
        border: 1px solid rgba(139, 92, 246, 0.5);
        border-radius: 6px;
        padding: 0.5rem 1rem;
        color: white;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-left: 1rem;
    }
    
    .legend-toggle-btn:hover {
        background: linear-gradient(135deg, rgba(139, 92, 246, 1), rgba(99, 102, 241, 1));
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    }
    
    .legend-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.95);
        border: 1px solid rgba(139, 92, 246, 0.3);
        border-radius: 8px;
        padding: 1rem;
        margin-top: 0.5rem;
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
    
    .markets-sorting-controls {
        position: relative;
    }

    /* Add subtle animations to loading states */
    .loading {
        background: linear-gradient(135deg, 
            rgba(139, 92, 246, 0.1) 0%,
            rgba(16, 185, 129, 0.1) 100%);
        border: 1px solid rgba(139, 92, 246, 0.2);
        border-radius: 8px;
        padding: 2rem;
        text-align: center;
        color: var(--aurora-purple);
        font-weight: 600;
        animation: loadingPulse 2s ease-in-out infinite;
    }
    
    @keyframes loadingPulse {
        0%, 100% {
            opacity: 0.8;
            transform: scale(1);
        }
        50% {
            opacity: 1;
            transform: scale(1.01);
        }
    }

/* Mobile Responsive Enhancements for Multiple Timeframes */
@media (max-width: 767px) {
    .market-row-enhanced {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 12px;
        margin: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .market-row-enhanced:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(139, 92, 246, 0.2);
    }
    
    /* Mobile card layout for timeframes */
    .change-24h-col, .change-7d-col, .change-14d-col,
    .change-30d-col, .change-90d-col, .change-1y-col {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        margin: 4px 0;
    }
    
    .change-24h-col::before { content: "24h: "; opacity: 0.7; font-weight: 600; }
    .change-7d-col::before { content: "7d: "; opacity: 0.7; font-weight: 600; }
    .change-14d-col::before { content: "14d: "; opacity: 0.7; font-weight: 600; }
    .change-30d-col::before { content: "30d: "; opacity: 0.7; font-weight: 600; }
    .change-90d-col::before { content: "90d: "; opacity: 0.7; font-weight: 600; }
    .change-1y-col::before { content: "1y: "; opacity: 0.7; font-weight: 600; }
    
    .zscore-under-change {
        margin-left: auto;
        margin-top: 0;
    }
}

/* Ultra-wide screen optimizations */
@media (min-width: 1600px) {
    .market-grid-base {
        grid-template-columns: 50px 110px 140px 120px 120px 80px 80px 80px 80px 80px 80px 120px;
    }
}

/* Professional glow effects for the entire container */
.enhanced-markets-container {
    position: relative;    
    overflow: hidden;    
    width: 100%;
    border-radius: 12px;
    box-sizing: border-box;
}

/* Markets list area with black background */
.markets-list-enhanced {
    background: rgba(0, 0, 0);
    min-height: 200px;
}

.enhanced-markets-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 18px;
    z-index: -1;
    animation: borderGlow 4s ease-in-out infinite;
}

@keyframes borderGlow {
    0%, 100% {
        opacity: 0.5;
        filter: blur(1px);
    }
    50% {
        opacity: 0.8;
        filter: blur(2px);
    }
}

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

    .zscore-col {
        text-align: center;
    }

    .market-change-compact .change-percentage {
        padding: 0.2rem 0.4rem;
        border-radius: 4px;
        font-size: 0.85rem;
        font-weight: 700;
    }

    .market-change-compact .z-score-compact {
        font-size: 0.7rem;
        padding: 0.1rem 0.3rem;
        border-radius: 3px;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--text-muted) !important;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .z-score-compact {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
        border-radius: 6px;
        font-weight: 600;
    }

    .symbol-info {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .market-info {
        margin-left: 1rem;
        flex: 1;
    }

    .price-periods-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .additional-stats {
        grid-template-columns: repeat(4, 1fr);
    }

    /* REMOVED - These rules are now properly placed in the desktop media query below */

    .markets-summary-row .summary-label {
        font-weight: 800;
        color: var(--aurora-green);
        text-align: center;
    }

    .markets-summary-row .summary-value {
        text-align: right;
        font-weight: 700;
    }

    .markets-summary-row .summary-value.positive {
        color: #22c55e;
    }

    .markets-summary-row .summary-value.negative {
        color: #ef4444;
    }

    .markets-summary-row .summary-timeframe {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        text-align: right;
    }

    .markets-summary-row .summary-avg {
        font-size: 0.85rem;
        line-height: 1;
    }

    .markets-summary-row .summary-stddev {
        font-size: 0.65rem;
        opacity: 0.8;
        color: var(--text-muted);
        line-height: 1;
    }

    .header-coin {
        text-align: center !important;
    }

    /* Sortable column styling */
    .sortable-column {
        cursor: pointer;
        user-select: none;
        transition: all 0.2s ease;
        position: relative;
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Hide overflow */
        text-overflow: ellipsis; /* Add ... if text too long */
        display: block; /* Ensure proper display */
    }

    .sortable-column:hover {
        transform: translateY(-1px);
        text-shadow: 0 3px 6px rgba(230, 168, 67, 0.5);
        filter: drop-shadow(0 0 12px rgba(244, 200, 98, 0.6));
    }

    .sortable-column:active {
        transform: translateY(0);
    }

    /* Sort direction indicators using CSS pseudo-elements */
    .sortable-column[data-direction="asc"]::after {
        content: " ↑";
        color: var(--primary-color);
        font-weight: bold;
    }

    .sortable-column[data-direction="desc"]::after {
        content: " ↓";
        color: var(--primary-color);
        font-weight: bold;
    }

    .header-name {
        text-align: left !important;
    }

    .header-price {
        text-align: center !important;
    }

    .header-change {
        text-align: right !important;
    }

    .header-zscore {
        text-align: center !important;
    }

    .header-change-1y {
        text-align: center !important;
    }

    /* Shared market grid layout classes */
    .market-grid-base {
        display: grid !important;
        grid-template-columns: 50px 100px 110px 105px 95px 75px 75px 75px 75px 75px 75px 110px;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .market-grid-header-footer-base {
        background: linear-gradient(135deg, 
            rgba(139, 92, 246, 0.2) 0%,
            rgba(99, 102, 241, 0.15) 50%,
            rgba(16, 185, 129, 0.1) 100%);
        border: 1px solid rgba(139, 92, 246, 0.4);
        box-shadow: 
            0 4px 20px rgba(139, 92, 246, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        font-weight: 700;
        font-size: 0.85rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .market-grid-text-base {
        text-align: center;
        padding: 0;
        background: linear-gradient(135deg, #E6A843 0%, #F4C862 25%, #E6A843 50%, #D49B38 75%, #F1C15B 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: 0 2px 4px rgba(230, 168, 67, 0.3);
        filter: drop-shadow(0 0 8px rgba(244, 200, 98, 0.4));
        font-weight: 600;
    }

    /* Coin name truncation - stretch and ellipsis */
    .coin-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: block;
    }

    /* ATH% blue styling for dark mode */
    .ath-blue {
        color: #60A5FA !important;
        font-weight: 600;
    }

    .ath-col.ath-blue {
        color: #60A5FA !important;
    }

    /* Chart column styling */
    .chart-col {
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
    }

    /* Beautiful mini sparkline styling */
    .mini-sparkline {
        width: 100px;
        height: 25px;
        border-radius: 4px;
        background: transparent;
        padding: 2px;
        overflow: hidden;
        position: relative;
    }

    .sparkline-canvas {
        width: 100%;
        height: 100%;
        border-radius: 2px;
    }

    .sparkline-gradient {
        background: linear-gradient(90deg, 
            rgba(16, 185, 129, 0.1) 0%, 
            rgba(16, 185, 129, 0.3) 100%);
    }

    .sparkline-gradient.negative {
        background: linear-gradient(90deg, 
            rgba(239, 68, 68, 0.1) 0%, 
            rgba(239, 68, 68, 0.3) 100%);
    }

    /* Desktop footer - uses shared classes */
    .markets-footer-desktop {
        border-radius: 0 0 8px 8px;
        margin-bottom: 0;
    }



    /* Desktop individual column styling */
    .market-row-enhanced .market-rank {
        font-size: 0.8rem;
        color: var(--text-muted);
        text-align: center;
        font-weight: 600;
    }

    .market-row-enhanced .market-symbol {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .market-row-enhanced .market-symbol img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }

    .market-row-enhanced .market-symbol-text {
        font-weight: 700;
        color: var(--text-primary);
        text-transform: uppercase;
        font-size: 0.9rem;
    }

    .market-row-enhanced .market-name {
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .market-row-enhanced .market-price {
        font-weight: 700;
        color: var(--text-primary);
        font-family: 'Courier New', monospace;
        text-align: right;
    }

    .market-row-enhanced .market-vol, 
    .market-row-enhanced .market-mcap, 
    .market-row-enhanced .market-ath {
        font-size: 0.8rem;
        color: var(--text-muted);
        text-align: right;
    }

    .market-row-enhanced .change-percentage {
        text-align: right;
        font-weight: 700;
        font-size: 0.9rem;
    }

    .market-row-enhanced .z-score-compact {
        text-align: center;
        font-weight: 600;
        font-size: 0.75rem;
    }

    /* Enhanced price change styling for desktop */
    .market-change .change-percentage {
        transition: all 0.2s ease;
    }
    
    .market-change .change-percentage:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    
    .market-change.positive .change-percentage {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.15));
        border: 1px solid rgba(34, 197, 94, 0.3);
    }
    
    .market-change.negative .change-percentage {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15));
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

.market-symbol {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.market-symbol img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.market-symbol-text {
    font-weight: 600;
    color: var(--text-primary);
}

.market-rank {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
}

.market-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.market-name {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.market-price {
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
}

.market-change {
    font-weight: 500;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.market-change.positive {
    color: #22c55e;
}

.market-change.negative {
    color: #ef4444;
}

.change-percentage {
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.change-percentage.positive {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}

.change-percentage.negative {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Sorting Controls */
.markets-sorting-controls {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(139, 92, 246, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(139, 92, 246, 0.1);
}

.sort-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sort-btn {
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.sort-btn:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.sort-btn.active {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
    color: var(--aurora-purple);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

.sort-btn.active:hover {
    background: rgba(139, 92, 246, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Disclaimer Modal */
.disclaimer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    padding: 1rem;
}

.disclaimer-modal {
    background: var(--card-bg);
    border: 2px solid var(--gold-bright);
    border-radius: 16px;
    padding: 2rem;
    max-width: 90vw;
    max-height: 90vh;
    width: 600px;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8),
                0 0 40px rgba(255, 215, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
    position: relative;
    margin: auto;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.disclaimer-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.disclaimer-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.disclaimer-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.disclaimer-content {
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 2rem;
}

.disclaimer-content h3 {
    color: var(--primary-color);
    margin: 1.5rem 0 0.5rem 0;
    font-size: 1.1rem;
}

.disclaimer-content p {
    margin-bottom: 1rem;
}

.disclaimer-highlight {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid var(--danger-color);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.disclaimer-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.disclaimer-btn {
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 120px;
}

.btn-accept {
    background: var(--success-color);
    color: white;
}

.btn-accept:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.btn-decline {
    background: var(--danger-color);
    color: white;
}

.btn-decline:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

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

/* Tablet Portrait Optimization - Compact Markets Display */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Container padding optimization for tablet */
    .container {
        padding: 8px;
    }
    
    /* Reduce priority cards gap for tablet */
    .priority-cards {
        gap: 0.5rem;
    }
    
    /* Reduce nav-tabs margin for tablet */
    .nav-tabs {
        margin-bottom: 1rem;
    }
    
    /* Reduce card padding to maximize valuable width space */
    .card {
        padding: 0.5rem;
    }
    
    /* Enhanced Markets Container - Tablet Portrait Optimization */
    .enhanced-markets-container {
        font-size: 0.75rem;
        line-height: 1.2;
    }
    
    /* Tablet-optimized grid layout - optimized coin and chart columns */
    .market-grid-base {
        grid-template-columns: 30px 80px 70px 70px 65px 55px 55px 55px 55px 55px 55px 80px;
        gap: 0.15rem;
        padding: 0.25rem;
        font-size: 0.7rem;
    }
    
    /* Markets header and footer adjustments */
    .markets-header-desktop,
    .markets-footer-desktop,
    .markets-summary-row {
        font-size: 0.6rem;
        padding: 0.25rem;
        gap: 0.15rem;
    }
    
    .markets-header-desktop > div,
    .markets-footer-desktop > div {
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.2px;
        line-height: 1;
        padding: 0.1rem;
    }
    
    /* Individual market row adjustments */
    .market-row-enhanced {
        padding: 0.25rem;
        font-size: 0.65rem;
        min-height: 32px;
    }
    
    /* Rank column - ultra compact */
    .market-rank,
    .rank-col {
        font-size: 0.55rem;
        font-weight: 600;
        text-align: center;
        padding: 0.1rem;
    }
    
    /* Symbol column - compact but readable */
    .symbol-col {
        padding: 0.1rem;
    }
    
    .market-symbol img,
    .coin-image {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    
    .coin-main {
        gap: 0.2rem;
        align-items: center;
    }
    
    .coin-symbol {
        font-size: 0.65rem;
        font-weight: 700;
        line-height: 1;
    }
    
    .coin-name {
        font-size: 0.48rem;
        line-height: 1;
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .coin-info {
        min-width: 0;
        flex: 1;
        max-width: 70px;
    }
    
    /* Price column - prominent */
    .price-col {
        font-size: 0.65rem;
        font-weight: 700;
        padding: 0.1rem;
        text-align: right;
    }
    
    /* Market Cap and Volume - compact */
    .mcap-col,
    .volume-col {
        font-size: 0.55rem;
        font-weight: 500;
        text-align: right;
        padding: 0.1rem;
    }
    
    /* ATH column - sized to match timeframe columns */
    .ath-col {
        font-size: 0.58rem;
        font-weight: 600;
        text-align: center;
        padding: 0.1rem;
        min-width: 55px;
        width: 55px;
    }
    
    /* All timeframe change columns - compact to fit chart in 810px */
    .change-24h-col,
    .change-7d-col, 
    .change-14d-col,
    .change-30d-col, 
    .change-1y-col {
        font-size: 0.58rem;
        font-weight: 700;
        min-width: 55px;
        width: 55px;
        line-height: 1;
        gap: 1px;
        padding: 0.1rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    /* Z-score indicators under timeframes - minimal */
    .zscore-under-change {
        font-size: 0.45rem;
        font-weight: 500;
        padding: 0px;
        border-radius: 1px;
        margin-top: 0px;
        line-height: 1;
        opacity: 0.7;
    }
    
    /* Chart column - optimized sparkline for tablet fit */
    .chart-col {
        padding: 0.05rem;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        width: 80px;
    }
    
    .mini-sparkline {
        width: 72px;
        height: 22px;
        border-radius: 3px;
        overflow: hidden;
    }
    
    .sparkline-canvas {
        width: 100%;
        height: 100%;
        border-radius: 1px;
    }
    
    /* Summary row specific styling - ultra compact */
    .markets-summary-row {
        padding: 0.25rem;
        font-size: 0.6rem;
        margin-bottom: 0.2rem;
    }
    
    .summary-label {
        font-size: 0.65rem;
        font-weight: 700;
    }
    
    .summary-cell {
        font-size: 0.55rem;
        padding: 0.1rem 0.05rem;
        line-height: 1;
    }
    
    .summary-timeframe {
        gap: 0px;
    }
    
    .summary-avg {
        font-size: 0.6rem;
        line-height: 1;
    }
    
    .summary-stddev {
        font-size: 0.45rem;
        line-height: 1;
    }
    
    /* Market change percentages - readable but compact */
    .change-percentage {
        font-size: 0.55rem;
        font-weight: 700;
        padding: 0.05rem 0.1rem;
        border-radius: 2px;
        line-height: 1;
    }
    
    /* Z-score compact indicators */
    .z-score-compact {
        font-size: 0.45rem;
        font-weight: 500;
        padding: 0.02rem 0.08rem;
        border-radius: 1px;
    }
    
    /* Sortable column headers */
    .sortable-column {
        font-size: 0.65rem;
        letter-spacing: 0.2px;
    }
    
    .sortable-column::after {
        font-size: 0.7rem;
    }
    
    /* Reduced hover effects for tablet touch interface */
    .market-row-enhanced:hover {
        transform: translateY(-1px);
        border-radius: 4px;
        margin: 0 -0.1rem;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
    
    /* Sorting controls for tablet */
    .markets-sorting-controls {
        margin-bottom: 0.5rem;
        padding: 0.4rem;
    }
    
    .sort-btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.65rem;
    }
    
    /* Legend toggle button */
    .legend-toggle-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.65rem;
        margin-left: 0.5rem;
    }
    
    /* Ensure all text remains readable */
    .enhanced-markets-container * {
        font-size: inherit;
        line-height: 1.1;
    }
    
    /* Specific width constraints to ensure fit */
    .enhanced-markets-container {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Crypto Ticker Tablet Optimizations for 810x1080 Portrait Mode */
    .crypto-ticker-container {
        margin-bottom: 0.5rem;
    }
    
    /* Make pinned BTC/ETH section more compact */
    .crypto-pinned-section {
        min-width: 300px;
        padding: 0 0.5rem;
        gap: 0.5rem;
        height: 50px;
    }
    
    .pinned-item {
        width: 140px;
        min-width: 140px;
        max-width: 140px;
        padding: 0.2rem 0.5rem;
        gap: 0.5rem;
    }
    
    .pinned-item .crypto-icon {
        width: 24px;
        height: 24px;
    }
    
    .pinned-item .crypto-symbol {
        font-size: 0.75rem;
    }
    
    .pinned-item .crypto-rank {
        font-size: 0.55rem;
    }
    
    .pinned-item .crypto-price {
        font-size: 0.75rem;
    }
    
    .pinned-item .crypto-change {
        font-size: 0.65rem;
    }
    
    /* Make scrolling ticker more compact */
    .crypto-ticker {
        height: 50px;
    }
    
    .crypto-item {
        width: 140px;
        min-width: 140px;
        max-width: 140px;
        padding: 0.2rem 0.5rem;
        gap: 0.5rem;
    }
    
    .crypto-item .crypto-icon {
        width: 24px;
        height: 24px;
    }
    
    .crypto-item .crypto-symbol {
        font-size: 0.75rem;
    }
    
    .crypto-item .crypto-rank {
        font-size: 0.55rem;
    }
    
    .crypto-item .crypto-price {
        font-size: 0.75rem;
    }
    
    .crypto-item .crypto-change {
        font-size: 0.65rem;
    }
    
    .ticker-content {
        gap: 1rem;
        padding: 0 0.5rem;
    }
}

/* Responsive - Mobile-First Ultra-Compact */
@media (max-width: 768px) {
    .container {
        padding: 8px;
    }
    
    .dashboard-row {
        grid-template-columns: 1fr;
    }
    
    .header-content {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        justify-content: space-between;
    }
    
    .logo {
        font-size: 0.9rem;
        flex-shrink: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .logo-img {
        height: 20px; /* Half the original desktop size */
        width: auto;
        flex-shrink: 0;
    }
    
    .logo-text {
        display: inline; /* Show text on mobile now */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex-shrink: 1;
    }
    
    .status-indicators {
        flex: 0 0 auto;
    }
    
    .status-compact {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
        border-radius: 16px;
        gap: 0.3rem;
    }
    
    .status-dot {
        width: 6px;
        height: 6px;
    }
    
    #time-compact {
        font-size: 0.65rem;
    }

    .nav-tabs {
        position: sticky;
        top: 0;
        z-index: 100;
        margin-bottom: 1rem;
        padding: 6px;
        gap: 4px;
    }

    .nav-tab {
        padding: 0.75rem 0.5rem; /* Reduced padding */
        font-size: 0.9rem;
        min-height: 60px; /* Reduced from 70px */
    }
    
    .tab-icon {
        font-size: 1.4rem;
    }
    
    .tab-text {
        font-size: 0.7rem; /* Slightly smaller on mobile */
        letter-spacing: 0.3px;
    }

    .priority-cards,
    .secondary-cards {
        gap: 1.5rem;
        display: grid !important; /* Ensure stacked layout on mobile */
    }
    
    .priority-cards {
        margin-bottom: 2rem; /* Add bottom margin for mobile */
    }
    
    .secondary-cards {
        grid-template-columns: 1fr !important; /* Single column on mobile - force override */
    }
    
    .priority-cards .card:first-child,
    .priority-cards .card:nth-child(2) {
        /* Reset flex properties on mobile */
        flex: none;
    }

    .card {
        padding: 1rem;
    }

    .card-title {
        font-size: 1rem;
    }

    .chat-header {
        padding: 1rem;
    }

    .chat-title {
        font-size: 1.25rem;
    }

    .chat-container-fullscreen {
        min-height: 400px;
        padding: 1rem;
    }

    /* Touch-friendly buttons */
    .ask-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
        min-height: 44px;
        min-width: 44px;
    }

    .chat-send {
        padding: 0.875rem 1.25rem;
        font-size: 0.875rem;
        min-height: 44px;
    }

    /* Optimize ticker for mobile */
    .crypto-ticker {
        height: 60px;
    }
    
    .ticker-content {
        padding: 0 1rem; /* Maintain spacing on mobile */
        gap: 1rem; /* Slightly less gap on mobile */
        margin: 0 1rem; /* Add margin to match desktop version */
    }

    .crypto-item {
        min-width: 160px;
        padding: 0.5rem 0.75rem;
    }

    .crypto-icon {
        width: 24px;
        height: 24px;
    }

    /* Mobile market list - Enhanced with proper layout */
    .markets-header-desktop,
    .markets-footer-desktop,
    .markets-summary-row {
        display: none !important;
    }
    
    .market-row-enhanced {
        padding: 0.75rem;
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transition: background 0.2s ease;
    }

    .market-row-enhanced:hover {
        background: rgba(139, 92, 246, 0.05);
    }

    .market-left {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
        max-width: 180px;
    }

    .market-symbol {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .market-symbol img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }

    .symbol-info {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .market-symbol-text {
        font-size: 0.9rem;
        font-weight: 600;
    }

    .market-rank {
        font-size: 0.7rem;
        margin-left: auto;
    }

    .market-info {
        grid-column: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        text-align: right;
        max-width: 120px;
    }

    .market-name {
        font-size: 0.8rem;
        margin-bottom: 0.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100px;
    }

    .market-price {
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .market-change {
        font-size: 0.8rem;
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        justify-content: flex-end;
    }

    .z-score-indicator {
        font-size: 0.6rem;
        padding: 0.1rem 0.25rem;
    }

    .market-right {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .market-stats {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        text-align: right;
        min-width: 50px;
    }

    /* Hide volume and market cap columns on mobile */
    .market-volume,
    .market-cap {
        display: none;
    }

    /* Hide desktop header on mobile */
    .markets-header-enhanced {
        display: none;
    }

    .market-vol {
        font-size: 0.6rem;
        color: var(--text-muted);
        line-height: 1;
    }

    .market-mcap {
        font-size: 0.6rem;
        color: var(--text-muted);
        line-height: 1;
    }

    .market-ath {
        font-size: 0.6rem;
        line-height: 1;
        font-weight: 500;
    }

    .market-ath.positive {
        color: var(--aurora-green);
    }

    .market-ath.negative {
        color: #ef4444;
    }

    /* Compact Z-Score Background Colors */
    .market-change-compact {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.4rem;
        border-radius: 6px;
        text-align: center;
        min-width: 60px;
        min-height: 40px;
    }

    /* Z-Score Background Colors */
    .market-change-compact.z-score-extreme-negative {
        background: rgba(239, 68, 68, 0.25);
        border: 1px solid rgba(239, 68, 68, 0.4);
    }

    .market-change-compact.z-score-high-negative {
        background: rgba(239, 68, 68, 0.18);
        border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .market-change-compact.z-score-negative {
        background: rgba(239, 68, 68, 0.12);
        border: 1px solid rgba(239, 68, 68, 0.2);
    }

    .market-change-compact.z-score-neutral {
        background: rgba(156, 163, 175, 0.08);
        border: 1px solid rgba(156, 163, 175, 0.15);
    }

    .market-change-compact.z-score-positive {
        background: rgba(16, 185, 129, 0.12);
        border: 1px solid rgba(16, 185, 129, 0.2);
    }

    .market-change-compact.z-score-high-positive {
        background: rgba(16, 185, 129, 0.18);
        border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .market-change-compact.z-score-extreme-positive {
        background: rgba(16, 185, 129, 0.25);
        border: 1px solid rgba(16, 185, 129, 0.4);
    }

    .change-percentage {
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 0.15rem;
    }

    .z-score-compact {
        font-size: 0.6rem;
        font-weight: 500;
        opacity: 0.8;
        line-height: 1;
    }

    /* Mobile statistics summary */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .stat-item {
        padding: 0.5rem;
    }
    
    .stat-value {
        font-size: 1rem;
    }
    
    .legend-info {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .z-score-indicator {
        font-size: 0.65rem;
        padding: 0.1rem 0.3rem;
    }
    

    
    .stat-label {
        font-size: 0.6rem;
        margin-bottom: 0.1rem;
    }
    
    .stat-value {
        font-size: 0.75rem;
    }
    
    .legend-info {
        display: none; /* Hide legend on mobile for space */
    }

    /* Mobile sorting controls */
    .markets-sorting-controls {
        margin: 0.5rem;
        padding: 0.5rem;
    }

    .sort-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.25rem;
    }

    .sort-btn {
        padding: 0.4rem 0.5rem;
        font-size: 0.7rem;
        text-align: center;
    }

    /* Mobile disclaimer styling */
    .disclaimer-modal {
        margin: 1rem;
        padding: 1.5rem;
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 2rem);
    }

    .disclaimer-title {
        font-size: 1.25rem;
    }

    .disclaimer-content {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .disclaimer-actions {
        gap: 0.75rem;
    }

    .disclaimer-btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.875rem;
        min-width: 100px;
        flex: 1;
    }
}

/* Ultra-compact for very small screens */
@media (max-width: 480px) {
    .header-content {
        padding: 0 10px;
        gap: 0.4rem;
    }
    
    .logo {
        font-size: 0.8rem;
        gap: 0.4rem;
    }
    
    .logo-img {
        height: 24px !important;
        width: auto;
    }
    
    .logo-text {
        font-size: 1.2rem;
    }
    
    .status-compact {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
        border-radius: 14px;
    }
    
    .status-dot {
        width: 5px;
        height: 5px;
    }
    
    #time-compact {
        font-size: 0.6rem;
    }

    .container {
        padding: 10px;
    }

    .nav-tab {
        padding: 0.5rem 0.25rem;
        font-size: 0.7rem;
    }

    .card {
        padding: 0.75rem;
    }

    .crypto-ticker-container {
        margin-bottom: 1rem;
        flex-direction: column;
    }

    .crypto-pinned-section {
        height: 50px;
        min-width: auto;
        width: 100%;
        border-right: none;
        padding: 0 0.5rem;
        background: transparent;
    }

    .pinned-item {
        width: 160px;
        min-width: 160px;
        max-width: 160px;
        padding: 0.2rem 0.6rem;
    }

    .crypto-ticker {
        height: 50px;
    }

    .crypto-item {
        min-width: 140px;
        width: 140px;
        max-width: 140px;
        padding: 0.2rem 0.6rem;
    }

    .market-left {
        max-width: 160px;
    }
    
    .market-info {
        max-width: 100px;
    }
    
    .market-name {
        max-width: 100px;
        font-size: 0.7rem;
    }
    
    .market-symbol-text {
        font-size: 0.75rem;
    }
    
    .market-price {
        font-size: 0.75rem;
    }
    
    .market-stats {
        font-size: 0.6rem;
    }
    
    .market-vol, .market-mcap {
        font-size: 0.55rem;
    }
    
    /* Consolidated mobile rules from removed duplicate @media block */
    .dashboard-row-flexible {
        grid-template-columns: 1fr !important;
    }
    
    .card-stack {
        gap: 0.5rem;
    }
    
    .insight-content {
        padding: 1rem;
        font-size: 0.875rem;
    }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .nav-tabs {
        margin-bottom: 0.5rem;
    }

    .chat-container-fullscreen {
        min-height: 300px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-title,
    .nav-tab.active,
    .market-price {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .money-symbol {
        display: none !important;
    }
}

/* Direct styling for insight containers - more compact */
#additional-insights,
#out-of-box,
#contrarian-trade {
    padding: 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #cbd5e1;
}

#additional-insights,
#out-of-box {
    background: rgba(139, 92, 246, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(139, 92, 246, 0.1);
}

#contrarian-trade {
    background: rgba(239, 68, 68, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.1);
}

.trade-recommendation {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}


.risk-level {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--bear-color);
    font-weight: 600;
}

.risk-indicator {
    display: flex;
    gap: 2px;
}

.risk-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bear-color);
}

/* Highlight Styles for Key Elements */
.highlight-bull {
    color: var(--bull-color) !important;
    font-weight: bold;
    text-shadow: var(--glow-green);
}

.highlight-bear {
    color: var(--bear-color) !important;
    font-weight: bold;
    text-shadow: var(--glow-red);
}

.highlight-target {
    background: var(--aurora-gradient-green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

.highlight-important {
    background: var(--aurora-gradient-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

/* Market Sentiment & Outlook Enhancements */
.sentiment-score-section {
    transition: background-color 0.3s ease;
}

.sentiment-score-section:hover {
    background: rgba(139, 92, 246, 0.1) !important;
}

/* Enhanced outlook cards */
#market-outlook > div {
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: rgba(139, 92, 246, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

#market-outlook > div:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    border: 1px solid rgba(139, 92, 246, 0.2);
    box-shadow: var(--glow-purple);
    transform: translateY(-2px);
}

/* Bull/Bear styling */
.outlook.bull, .highlight-bull {
    color: var(--bull-color) !important;
    font-weight: bold;
    text-shadow: var(--glow-green);
}

.outlook.bear, .highlight-bear {
    color: var(--bear-color) !important;
    font-weight: bold;
    text-shadow: var(--glow-red);
}

/* Price Target Highlights */
.price-target, .highlight-target {
    background: var(--aurora-gradient-green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

/* Impact Score Stars */
.impact-stars {
    color: var(--aurora-yellow);
    text-shadow: 0 0 5px rgba(245, 158, 11, 0.5);
}

/* Enhanced emoji visibility */
.bull-bear-emoji {
    font-size: 1.1em;
    margin-right: 0.3rem;
}

/* Mobile responsive overrides consolidated above */

/* Improved scrollbars for modern browsers */
.news-feed::-webkit-scrollbar,
.events-container::-webkit-scrollbar {
    width: 6px;
}

.news-feed::-webkit-scrollbar-track,
.events-container::-webkit-scrollbar-track {
    background: rgba(139, 92, 246, 0.1);
}

.news-feed::-webkit-scrollbar-thumb,
.events-container::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 3px;
}

.news-feed::-webkit-scrollbar-thumb:hover,
.events-container::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.5);
}

/* Optimized Casino-Style Animations - Reduced CPU impact */
@keyframes cardPulse {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.01);
    }
}

/* Optimized Interactive Hover Effects */
.card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.5);
    transition: all 0.3s ease;
}

/* Data Stream Animation */
.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
    animation: dataStream 2s ease-in-out infinite;
}

/* Optimized Working Indicators */
.status-dot {
    position: relative;
}

.status-dot::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 50%;
    animation: sonarPulse 3s linear infinite;
}

/* Simplified Glowing Borders - Static for better performance */
.priority-card {
    position: relative;
    border: 2px solid rgba(255, 215, 0, 0.4);
}

/* Simplified Action Buttons */
.ask-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Priority card content width constraints */
.priority-card {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.priority-card * {
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
}

.ask-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(16, 185, 129, 0.4);
}

/* Simplified typing indicator - reduced CPU usage */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 1rem;
}

.typing-dot {
    width: 8px;
    height: 8px;
    background: #6d28d9;
    border-radius: 50%;
    animation: typingPulse 1.5s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.3s; }
.typing-dot:nth-child(3) { animation-delay: 0.6s; }

/* Success Animation */
.success-animation {
    animation: successPulse 0.6s ease-in-out;
}

/* Loading Skeleton */
.skeleton {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.1) 25%, 
        rgba(255, 215, 0, 0.1) 50%, 
        rgba(255, 255, 255, 0.1) 75%);
    background-size: 200% 100%;
    animation: skeleton 2s linear infinite;
}

/* Simplified title styling - removed CPU-intensive glow effect */
.card-title {
    position: relative;
}

/* Optimized hover transitions */
.nav-tab:hover,
.ask-btn:hover,
.market-row-enhanced:hover {
    transition: all 0.3s ease;
}

/* End of @media (max-width: 480px) block */
}

/* CSP-compliant CSS classes for inline styles */
.hidden { display: none !important; }
.summary-explanation {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    padding: 0.5rem 0;
}

/* Market data styling */
.positive { color: #10b981; }
.negative { color: #ef4444; }
.markets-list-enhanced .error-message {
    padding: 2rem;
    text-align: center;
    color: #ef4444;
    font-size: 1rem;
}
.markets-list-enhanced .error-message small {
    color: #9ca3af;
    display: block;
    margin-top: 0.5rem;
}

/* Ticker loading state */
.loading-ticker {
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
}

/* Crypto symbol styling */
.crypto-symbol {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-cell {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    padding: 0.25rem 0.25rem;
    line-height: 1.2;
}

.summary-cell:first-child {
    text-align: left;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    padding-left: 1rem;
    font-size: 0.8rem;
}

.summary-title {
    grid-column: span 3;
    text-align: center;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Color coding for summary row percentages */
.summary-cell.positive {
    color: #10b981 !important;
    font-weight: 700;
}

.summary-cell.negative {
    color: #ef4444 !important;
    font-weight: 700;
}
.outlook-timestamp { font-size: 0.7rem; color: var(--text-muted); text-align: right; }
.insight-card-hidden { display: none; }
.contrarian-trade-content { padding: 1rem; background: rgba(239, 68, 68, 0.05); border-radius: 8px; border: 1px solid rgba(239, 68, 68, 0.1); font-size: 0.95rem; line-height: 1.6; color: #cbd5e1; }
.ai-header { text-align: center; padding: 0.75rem 0 1rem 0; border-bottom: 1px solid rgba(139, 92, 246, 0.2); margin-bottom: 1rem; }
.ai-title { font-size: 1.1rem; font-weight: 600; background: linear-gradient(45deg, #8b5cf6, #10b981); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ai-subtitle { color: rgba(255, 255, 255, 0.6); font-size: 0.8rem; margin-top: 0.25rem; }

.legend-panel-hidden { display: none; }
.chat-input-hidden { display: none; }
.chat-messages-hidden { display: none; }
.no-data-message { padding: 2rem; text-align: center; color: #f59e0b; }
.no-data-small { color: #9ca3af; }
.error-message { padding: 1rem; text-align: center; color: #ef4444; }

/* Duplicate @media block removed - already exists above */

/* ===== PORTFOLIO STYLES ===== */

.portfolio-metric-large {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    background: linear-gradient(135deg, #E6A843 0%, #F4C862 25%, #E6A843 50%, #D49B38 75%, #F1C15B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(230, 168, 67, 0.3);
    margin-top: 0.5rem;
}

.portfolio-tabs {
    display: flex;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.25rem;
    border-radius: 8px;
}

.portfolio-tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s;
}

.portfolio-tab.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(109, 40, 217, 0.3);
}

.portfolio-view {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.portfolio-view.active {
    display: block;
}

.portfolio-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-item .stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.stat-item .stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.portfolio-chart-container {
    height: 300px;
    margin-bottom: 2rem;
    position: relative;
}

.holdings-table-container {
    overflow-x: auto;
    margin-bottom: 2rem;
}

.holdings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.holdings-table th {
    text-align: left;
    padding: 1rem;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.holdings-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.holdings-table tr:last-child td {
    border-bottom: none;
}

.holdings-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.trades-history-container h4 {
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.trades-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.trade-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border-left: 3px solid var(--border-color);
}

.trade-item.buy {
    border-left-color: var(--success-color);
}

.trade-item.sell {
    border-left-color: var(--danger-color);
}

.trade-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.trade-asset {
    font-weight: 600;
    color: var(--text-primary);
}

.trade-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.trade-amount {
    font-weight: 600;
    text-align: right;
}

.trade-amount.buy {
    color: var(--success-color);
}

.trade-amount.sell {
    color: var(--danger-color);
}

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

/* ===== PROPHETS LEADERBOARD STYLES ===== */

.prophets-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.leaderboard-container {
    overflow-x: auto;
}

.leaderboard-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

.leaderboard-table th {
    text-align: left;
    padding: 1rem;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    background: rgba(15, 23, 42, 0.4);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.leaderboard-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    vertical-align: middle;
}

.leaderboard-table tr:last-child td {
    border-bottom: none;
}

.leaderboard-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Rank Column */
.rank-col {
    font-weight: 700;
    color: var(--text-muted);
    width: 60px;
    text-align: center;
}

.leaderboard-table tr:nth-child(1) .rank-col {
    color: #fbbf24; /* Gold */
    font-size: 1.1rem;
}

.leaderboard-table tr:nth-child(2) .rank-col {
    color: #94a3b8; /* Silver */
    font-size: 1.05rem;
}

.leaderboard-table tr:nth-child(3) .rank-col {
    color: #b45309; /* Bronze */
    font-size: 1rem;
}

/* Prophet Name Column */
.prophet-name-col {
    min-width: 200px;
}

.prophet-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.prophet-name {
    font-weight: 600;
    font-size: 1rem;
}

.prophet-desc-tooltip {
    cursor: help;
    opacity: 0.7;
    font-size: 0.8rem;
}

/* Strategy Badge */
.strategy-badge {
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.strategy-conservative, .strategy-low {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.strategy-moderate, .strategy-medium {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.strategy-aggressive, .strategy-high {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.strategy-passive {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

/* Buy & Hold Row Special Styling */
.buy-hold-row {
    background: rgba(255, 255, 255, 0.03);
}

.buy-hold-row td {
    color: var(--text-secondary);
}

.benchmark-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Action Button */
.btn-details {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-details:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Loading Cell */
.loading-cell {
    height: 200px;
    vertical-align: middle;
}

/* ===== PROPHET LIST STYLES (Ported from Admin) ===== */
.prophet-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}
.prophet-item:hover {
    border-color: var(--text-secondary);
}
.prophet-item.selected {
    background: var(--bg-tertiary);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.prophet-header {
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.prophet-name-section {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.prophet-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.prophet-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prophet-model-badge {
    font-size: 0.8rem;
    opacity: 0.7;
}
.prophet-balance-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.75rem;
    white-space: nowrap;
}
.pnl-bubble {
    display: inline-block;
    padding: 1px 3px;
    border-radius: 3px;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    margin-left: 4px;
}
.pnl-positive { background-color: var(--success-color); }
.pnl-negative { background-color: var(--danger-color); }

.balance-display {
    padding: 2px 4px;
    border-radius: 4px;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.balance-display.public {
    background: rgba(16, 185, 129, 0.1); /* Green tint */
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.balance-display.secret {
    background: rgba(59, 130, 246, 0.1); /* Blue tint */
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.prophet-details {
    padding: 0 12px 12px 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 5px;
    padding-top: 10px;
    animation: slideDown 0.2s ease;
    display: none; 
}
.prophet-stats-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    align-items: center;
}
.prophet-portfolios-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.8rem;
}
.pf-compact {
    background: rgba(0,0,0,0.2);
    padding: 4px 8px;
    border-radius: 4px;
}
.pf-compact.public { color: var(--success-color); }
.pf-compact.secret { color: #ef4444; }

.prophet-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}
.prophet-actions-grid .button {
    padding: 4px;
    font-size: 0.75rem;
}

/* Prophet Leader Card */
.prophet-leader-card {
    background: transparent; /* Transparent to show pseudo-elements */
    border-radius: 8px;
    padding: 0.25rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    min-height: 36px;
    width: 260px; /* Fixed width to prevent jumping */
    min-width: 260px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    cursor: pointer; /* Make it clickable */
    z-index: 1;
    --leader-glow: rgba(16, 185, 129, 0.8); /* Default Green */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-right: 0.5rem;
}

.prophet-leader-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}

/* Animated Border Effect */
.prophet-leader-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent, 
        var(--leader-glow), 
        transparent 30%
    );
    animation: rotateBorder 4s linear infinite;
    z-index: -2;
}

.prophet-leader-card::after {
    content: '';
    position: absolute;
    inset: 2px; /* Border width */
    background: var(--card-bg);
    border-radius: 10px;
    z-index: -1;
}

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

.leader-content {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
    width: 100%;
}

.leader-trophy {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
    animation: trophyPulse 2s infinite ease-in-out;
    flex-shrink: 0;
}

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

.leader-info {
    display: flex;
    flex-direction: row; /* Changed to row to put % on right */
    align-items: center; /* Center vertically */
    justify-content: space-between;
    gap: 10px; /* Space between name and % */
    line-height: 1.1;
    flex: 1;
    overflow: hidden; /* Ensure overflow is handled */
}

.leader-label {
    display: none; /* Hide label to save space or keep it? User didn't ask to remove, but layout implies it might be better. Let's keep it but maybe absolute or small. Actually, user said "make the % on the right side of the current name". */
}

/* We can keep the label if we want, but maybe structure it differently. 
   Let's try to keep the name and label together, and PnL on the right.
   But the HTML structure is:
   .leader-info -> .leader-label, .leader-name, .leader-pnl
   If I make .leader-info flex-row, they will all be in a row.
   Label | Name | PnL
   That might be okay.
*/

.leader-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1; /* Take available space */
}

.leader-pnl {
    font-size: 1.2rem; /* Slightly reduced to fit better */
    font-weight: 800;
    color: var(--success-color);
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
    white-space: nowrap;
    flex-shrink: 0; /* Don't shrink PnL */
}

/* Fix Prophets Chart Height */
#prophets-overview-card {
    min-height: 0 !important; /* Override inline min-height */
    height: calc(100vh - 280px) !important; /* Calculate height based on viewport */
    max-height: 800px;
}