:root {
    /* Colors */
    --primary: #6abd0d;
    --primary-light: rgba(106, 189, 13, 0.1);
    --primary-lighter: rgba(213, 255, 185, 0.4);
    --secondary: #4a8c0a;
    
    /* Text Colors - Fixed for visibility */
    --dark: #1a1d26;       /* Main headings */
    --text: #1f2937;       /* Body text (Darker for readability) */
    --text-light: #475569; /* Subtitles/Labels (Slate 600 - Readable Grey) */
    
    /* Backgrounds */
    --light: #f8f9fa;      /* Off-white background */
    --card-bg: #ffffff;
    --border: #e2e8f0;     /* Slate 200 */

    /* Status Colors */
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.1);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.1);
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.1);
    --info: #3b82f6;
    --info-light: rgba(59, 130, 246, 0.1);
    
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    
    /* Gradients */
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-warning: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-primary: linear-gradient(135deg, #6abd0d 0%, #4a8c0a 100%);

    /* Fear & Greed Specifics */
    --extreme-fear: #dc2626;
    --fear: #ef4444;
    --slightly-bearish: #f59e0b;
    --neutral-fgi: #eab308;
    --slightly-bullish: #84cc16;
    --greed: #10b981;
    --extreme-greed: #059669;
}

/* Base Overrides */
a:hover {
    color: var(--primary);
    text-decoration: none;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* =========================================
   2. META CONTAINER (Header, Breadcrumbs, Price)
   ========================================= */
.crypto-analytics-meta-container {
    padding: 0 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
}

/* Breadcrumbs */
.crypto-analytics-meta-container .breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #64748b; /* Specific Slate color */
}

.crypto-analytics-meta-container .breadcrumbs .item {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.crypto-analytics-meta-container .breadcrumbs .item:hover {
    color: var(--primary);
}

.crypto-analytics-meta-container .breadcrumbs .separator {
    color: var(--border);
}

.crypto-analytics-meta-container .breadcrumbs .current {
    color: var(--text); /* Use main text color */
    font-weight: 600;
}

/* Header Layout */
.crypto-analytics-meta-container .header-container {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 30px;
}

.crypto-analytics-meta-container .header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

/* Logo */
.crypto-analytics-meta-container .logo {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid white;
}

.price-section .logo {
    display: none;
}

/* Page Title */
.crypto-analytics-meta-container .page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.3;
    margin: 0;
}

.page-subtitle {
  font-size: 14px;
  margin: 0;
  color: var(--text-light);
}

/* Price Section */
.crypto-analytics-meta-container .price-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
}

.crypto-analytics-meta-container .price-section .price {
    font-size: 42px;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -1px;
    line-height: 1;
}

.crypto-analytics-meta-container .price-section .price-change {
    font-size: 18px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

.crypto-analytics-meta-container .price-section .price-up {
    color: #fff;
    background: linear-gradient(135deg, var(--success) 0%, #27ae60 100%);
}

.crypto-analytics-meta-container .price-section .price-down {
    color: #fff;
    background: linear-gradient(135deg, var(--danger) 0%, #c0392b 100%);
}

.crypto-analytics-meta-container .price-section .symbol {
    font-size: 16px;
    color: var(--text-light);
    background: #f1f5f9;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    border: 1px solid var(--border);
}

/* Methodology & Triggers */
.crypto-analytics-meta-container .methodology-text {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.5;
    margin-top: 20px;
    display: inline;
}

.crypto-analytics-meta-container .hidden-content {
    display: none;
}

.crypto-analytics-meta-container .inline-trigger {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.crypto-analytics-meta-container .inline-trigger:hover {
    text-decoration: underline;
}

/* =========================================
   3. TECH OUTLOOK & RECOMMENDATIONS
   ========================================= */
.tech-outlook .recommendation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.tech-outlook .rec-title {
    color: var(--dark);
    font-size: 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tech-outlook .rec-action {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 5px;
    color: #fff;
    padding: 10px;
    width: 100%;
}

.tech-outlook .rec-desc {
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.5;
    text-transform: capitalize;
}

/* Recommendation Colors */
.tech-outlook .rec-action.TAKE_PROFITS,
.tech-outlook .rec-action.HOLD_RANGE,
.tech-outlook .rec-action.HOLD_BEARISH,
.tech-outlook .rec-action.HOLD_NEUTRAL,
.tech-outlook .rec-action.HOLD_CAUTIOUS_BULLISH,
.tech-outlook .rec-action.ACCUMULATE_CAUTIOUS {
    background: var(--warning);
}

.tech-outlook .rec-action.STRONG_SELL,
.tech-outlook .rec-action.REDUCE_POSITION,
.tech-outlook .rec-action.HOLD_HIGH_RISK {
    background: var(--danger);
}

.tech-outlook .rec-action.STRONG_BUY,
.tech-outlook .rec-action.ACCUMULATE,
.tech-outlook .rec-action.HOLD_BULLISH {
    background: var(--success);
}

.tech-outlook .rec-action.BUY,
.tech-outlook .rec-action.WEAK_BUY {
    background: var(--primary);
}

/* =========================================
   4. ANALYTICS CARDS (Stats, FGI, Summary)
   ========================================= */
.crypto-analytics-card {
    padding: 24px;
    position: relative;
}

.crypto-analytics-card h3 {
    font-size: 17px;
    font-weight: bold;
    color: var(--dark);
}

.crypto-analytics-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.crypto-analytics-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
}

.crypto-analytics-card-subtitle {
    font-size: 14px;
    color: var(--text-light);
    margin: 0;
    font-weight: 400;
}

/* Metric Boxes */
.crypto-analytics-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.crypto-analytics-metric {
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 10px;
}

.crypto-analytics-metric-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.crypto-analytics-metric-label {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.crypto-analytics-metric-value {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--dark);
}

.crypto-analytics-metric-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: capitalize;
}

/* Metric Colors (Simple) */
.crypto-analytics-metric-info.positive { color: var(--success); background: var(--success-light); }
.crypto-analytics-metric-info.negative { color: var(--danger); background: var(--danger-light); }
.crypto-analytics-metric-info.neutral { color: var(--warning); background: var(--warning-light); }

.crypto-analytics-metric-change {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.crypto-analytics-metric-change.positive { color: var(--success); }
.crypto-analytics-metric-change.negative { color: var(--danger); }

/* Progress Bars */
.crypto-analytics-progress {
    height: 25px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
    margin: 5px 0 12px 0;
}

.crypto-analytics-progress-bar {
    height: 100%;
    border-radius: 4px;
}

/* Summary Recommendation Box */
.crypto-analytics-sumrec {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 5px 10px;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.crypto-analytics-sumrec .summary p {
    color: var(--text); /* FIXED: Was --text-light, now main text for visibility */
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 15px !important;
}

/* Stats Container */
.crypto-analytics-stats-container {
    display: flex;
    gap: 15px;
    background: #ffffff;
    padding: 20px 10px;
}

.crypto-analytics-stats {
    flex: 0 0 35%;
}

.crypto-analytics-chart {
    flex: 0 0 65%;
}

/* FGI & Sure Container */
.crypto-analytics-fgisure-container {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.crypto-analytics-fgi {
    flex: 0 0 40%;
    min-height: 0;
}

.crypto-analytics-sure {
    flex: 0 0 60%;
    min-height: 0;
}

/* Card Footer */
.crypto-analytics-sec-footer {
    position: relative;
    margin-top: 30px;
    padding-top: 10px;
}

.crypto-analytics-update-time {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 12px;
    color: var(--text-light);
    font-style: italic;
}

/* =========================================
   5. SENTIMENT & SIGNAL COLOR LOGIC
   ========================================= */

/* A. Light Backgrounds + Border (Metric Box) */
.crypto-analytics-metric.extremely_bullish_sentiment,
.crypto-analytics-metric.strongly_bullish_sentiment,
.crypto-analytics-metric.bullish_sentiment,
.crypto-analytics-metric.slightly_bullish_sentiment,
.crypto-analytics-metric.bullish_volume,
.crypto-analytics-metric.moderately_bullish_volume,
.crypto-analytics-metric.slightly_bullish_volume,
.crypto-analytics-metric.bullish_alignment,
.crypto-analytics-metric.strong_momentum,
.crypto-analytics-metric.low_risk,
.crypto-analytics-metric.very_low_risk {
    background-color: var(--success-light);
    border: 1px solid var(--success);
}

.crypto-analytics-metric.extremely_bearish_sentiment,
.crypto-analytics-metric.strongly_bearish_sentiment,
.crypto-analytics-metric.bearish_sentiment,
.crypto-analytics-metric.slightly_bearish_sentiment,
.crypto-analytics-metric.bearish_alignment,
.crypto-analytics-metric.slightly_bearish_volume,
.crypto-analytics-metric.moderately_bearish_volume,
.crypto-analytics-metric.bearish_volume,
.crypto-analytics-metric.very_weak_momentum,
.crypto-analytics-metric.weak_momentum,
.crypto-analytics-metric.moderate_high_risk,
.crypto-analytics-metric.high_risk,
.crypto-analytics-metric.extreme_risk {
    background-color: var(--danger-light);
    border: 1px solid var(--danger);
}

.crypto-analytics-metric.neutral_sentiment,
.crypto-analytics-metric.neutral_alignment,
.crypto-analytics-metric.neutral_volume,
.crypto-analytics-metric.neutral_momentum,
.crypto-analytics-metric.moderate_momentum,
.crypto-analytics-metric.moderate_risk,
.crypto-analytics-metric.moderate_low_risk {
    background-color: var(--warning-light);
    border: 1px solid var(--warning);
}

/* B. Solid Backgrounds + White Text (Info Pills) */
.crypto-analytics-metric-info.extremely_bullish_sentiment,
.crypto-analytics-metric-info.strongly_bullish_sentiment,
.crypto-analytics-metric-info.bullish_sentiment,
.crypto-analytics-metric-info.slightly_bullish_sentiment,
.crypto-analytics-metric-info.bullish_volume,
.crypto-analytics-metric-info.moderately_bullish_volume,
.crypto-analytics-metric-info.slightly_bullish_volume,
.crypto-analytics-metric-info.bullish_alignment,
.crypto-analytics-metric-info.low_risk,
.crypto-analytics-metric-info.very_low_risk,
.crypto-analytics-metric-info.strong_momentum {
    background-color: var(--success);
    color: #ffffff;
}

.crypto-analytics-metric-info.extremely_bearish_sentiment,
.crypto-analytics-metric-info.strongly_bearish_sentiment,
.crypto-analytics-metric-info.bearish_sentiment,
.crypto-analytics-metric-info.slightly_bearish_sentiment,
.crypto-analytics-metric-info.bearish_alignment,
.crypto-analytics-metric-info.slightly_bearish_volume,
.crypto-analytics-metric-info.moderately_bearish_volume,
.crypto-analytics-metric-info.bearish_volume,
.crypto-analytics-metric-info.moderate_high_risk,
.crypto-analytics-metric-info.high_risk,
.crypto-analytics-metric-info.extreme_risk,
.crypto-analytics-metric-info.very_weak_momentum,
.crypto-analytics-metric-info.weak_momentum {
    background-color: var(--danger);
    color: #ffffff;
}

.crypto-analytics-metric-info.neutral_sentiment,
.crypto-analytics-metric-info.neutral_alignment,
.crypto-analytics-metric-info.neutral_volume,
.crypto-analytics-metric-info.moderate_risk,
.crypto-analytics-metric-info.moderate_low_risk,
.crypto-analytics-metric-info.neutral_momentum,
.crypto-analytics-metric-info.moderate_momentum {
    background-color: var(--warning);
    color: #ffffff;
}

/* C. Progress Bar Backgrounds (Light) */
.crypto-analytics-progress.extremely_bullish_sentiment,
.crypto-analytics-progress.strongly_bullish_sentiment,
.crypto-analytics-progress.bullish_sentiment,
.crypto-analytics-progress.slightly_bullish_sentiment,
.crypto-analytics-progress.bullish_volume,
.crypto-analytics-progress.moderately_bullish_volume,
.crypto-analytics-progress.slightly_bullish_volume,
.crypto-analytics-progress.bullish_alignment,
.crypto-analytics-progress.low_risk,
.crypto-analytics-progress.very_low_risk,
.crypto-analytics-progress.strong_momentum {
    background-color: var(--success-light);
}

.crypto-analytics-progress.extremely_bearish_sentiment,
.crypto-analytics-progress.strongly_bearish_sentiment,
.crypto-analytics-progress.bearish_sentiment,
.crypto-analytics-progress.slightly_bearish_sentiment,
.crypto-analytics-progress.bearish_alignment,
.crypto-analytics-progress.slightly_bearish_volume,
.crypto-analytics-progress.moderately_bearish_volume,
.crypto-analytics-progress.bearish_volume,
.crypto-analytics-progress.moderate_high_risk,
.crypto-analytics-progress.high_risk,
.crypto-analytics-progress.extreme_risk,
.crypto-analytics-progress.very_weak_momentum,
.crypto-analytics-progress.weak_momentum {
    background-color: var(--danger-light);
}

.crypto-analytics-progress.neutral_sentiment,
.crypto-analytics-progress.neutral_alignment,
.crypto-analytics-progress.neutral_volume,
.crypto-analytics-progress.moderate_risk,
.crypto-analytics-progress.moderate_low_risk,
.crypto-analytics-progress.neutral_momentum,
.crypto-analytics-progress.moderate_momentum {
    background-color: var(--warning-light);
}

/* D. Progress Bar Fill (Solid) */
.crypto-analytics-progress-bar.extremely_bullish_sentiment,
.crypto-analytics-progress-bar.strongly_bullish_sentiment,
.crypto-analytics-progress-bar.bullish_sentiment,
.crypto-analytics-progress-bar.slightly_bullish_sentiment,
.crypto-analytics-progress-bar.bullish_volume,
.crypto-analytics-progress-bar.moderately_bullish_volume,
.crypto-analytics-progress-bar.slightly_bullish_volume,
.crypto-analytics-progress-bar.bullish_alignment,
.crypto-analytics-progress-bar.low_risk,
.crypto-analytics-progress-bar.very_low_risk,
.crypto-analytics-progress-bar.strong_momentum {
    background-color: var(--success);
}

.crypto-analytics-progress-bar.extremely_bearish_sentiment,
.crypto-analytics-progress-bar.strongly_bearish_sentiment,
.crypto-analytics-progress-bar.bearish_sentiment,
.crypto-analytics-progress-bar.slightly_bearish_sentiment,
.crypto-analytics-progress-bar.bearish_alignment,
.crypto-analytics-progress-bar.slightly_bearish_volume,
.crypto-analytics-progress-bar.moderately_bearish_volume,
.crypto-analytics-progress-bar.bearish_volume,
.crypto-analytics-progress-bar.moderate_high_risk,
.crypto-analytics-progress-bar.high_risk,
.crypto-analytics-progress-bar.extreme_risk,
.crypto-analytics-progress-bar.very_weak_momentum,
.crypto-analytics-progress-bar.weak_momentum {
    background-color: var(--danger);
}

.crypto-analytics-progress-bar.neutral_sentiment,
.crypto-analytics-progress-bar.neutral_alignment,
.crypto-analytics-progress-bar.neutral_volume,
.crypto-analytics-progress-bar.moderate_risk,
.crypto-analytics-progress-bar.moderate_low_risk,
.crypto-analytics-progress-bar.neutral_momentum,
.crypto-analytics-progress-bar.moderate_momentum {
    background-color: var(--warning);
}

/* E. Table Signal Pills */
.crypto-analytics-signal {
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: inline-block;
    min-width: 90px;
    text-align: center;
}

/* Bullish Signals */
.crypto-analytics-signal.bullish,
.crypto-analytics-signal.strong_bullish,
.crypto-analytics-signal.bullish_crossover,
.crypto-analytics-signal.slight_bullish,
.crypto-analytics-signal.weak_bullish_crossover,
.crypto-analytics-signal.very_strong,
.crypto-analytics-signal.strong,
.crypto-analytics-signal.oversold,
.crypto-analytics-signal.extreme_oversold,
.crypto-analytics-signal.greed,
.crypto-analytics-signal.extreme_greed {
    background: linear-gradient(135deg, var(--success) 0%, #27ae60 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(46, 204, 113, 0.3);
}

/* Bearish Signals */
.crypto-analytics-signal.bearish,
.crypto-analytics-signal.strong_bearish,
.crypto-analytics-signal.bearish_crossover,
.crypto-analytics-signal.slight_bearish,
.crypto-analytics-signal.weak_bearish_crossover,
.crypto-analytics-signal.below_normal,
.crypto-analytics-signal.overbought,
.crypto-analytics-signal.extreme_overbought,
.crypto-analytics-signal.very_high,
.crypto-analytics-signal.extreme,
.crypto-analytics-signal.fear,
.crypto-analytics-signal.extreme_fear,
.crypto-analytics-signal.weak,
.crypto-analytics-signal.very_weak {
    background: linear-gradient(135deg, var(--danger) 0%, #c0392b 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}

/* Neutral Signals */
.crypto-analytics-signal.neutral,
.crypto-analytics-signal.no_trend,
.crypto-analytics-signal.none,
.crypto-analytics-signal.medium,
.crypto-analytics-signal.above_normal,
.crypto-analytics-signal.low,
.crypto-analytics-signal.very_low,
.crypto-analytics-signal.neutral_greed,
.crypto-analytics-signal.high {
    background: var(--gradient-warning);
    color: white;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

/* Specific Technical Signals */
.crypto-analytics-signal.volume_spike { background: var(--info-light); color: var(--info); border: 1px solid rgba(59, 130, 246, 0.2); }
.crypto-analytics-signal.volume_drop { background: rgba(107, 114, 128, 0.1); color: #6b7280; border: 1px solid rgba(107, 114, 128, 0.2); }
.crypto-analytics-signal.bullish_divergence { background: var(--success-light); color: var(--success); border: 1px dashed rgba(16, 185, 129, 0.3); }
.crypto-analytics-signal.bearish_divergence { background: var(--danger-light); color: var(--danger); border: 1px dashed rgba(239, 68, 68, 0.3); }
.crypto-analytics-signal.consolidation { background: rgba(107, 114, 128, 0.1); color: #6b7280; border: 1px dashed rgba(107, 114, 128, 0.3); }
.crypto-analytics-signal.breakout { background: var(--info-light); color: var(--info); border: 1px solid rgba(59, 130, 246, 0.2); }
.crypto-analytics-signal.breakdown { background: var(--danger-light); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.2); }
.crypto-analytics-signal.strong_momentum { background: var(--success-light); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.2); }
.crypto-analytics-signal.weak_momentum { background: rgba(107, 114, 128, 0.1); color: #6b7280; border: 1px solid rgba(107, 114, 128, 0.2); }
.crypto-analytics-signal.above_resistance { background: var(--danger-light); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.2); }
.crypto-analytics-signal.below_support { background: var(--success-light); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.2); }
.crypto-analytics-signal.in_range { background: var(--warning-light); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.2); }
.crypto-analytics-signal.accelerating { background: linear-gradient(135deg, var(--success-light) 0%, rgba(16, 185, 129, 0.2) 100%); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.3); }
.crypto-analytics-signal.decelerating { background: linear-gradient(135deg, var(--danger-light) 0%, rgba(239, 68, 68, 0.2) 100%); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.3); }

/* FGI Color Helpers */
.fgi-clr-egreed { color: var(--extreme-greed); }
.fgi-clr-greed { color: var(--greed); }
.fgi-clr-neutral { color: var(--neutral-fgi); }
.fgi-clr-fear { color: var(--fear); }
.fgi-clr-efear { color: var(--extreme-fear); }

/* =========================================
   6. FEAR & GREED / SENTIMENT VISUALS
   ========================================= */
.crypto-analytics-sentiment-chart {
    margin-top: 24px;
    text-align: center;
}

.crypto-analytics-sentiment-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.crypto-analytics-sentiment-score {
    font-size: 48px;
    font-weight: 800;
    color: var(--dark);
}

.crypto-analytics-sentiment-label-large {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
}

.insight-containter {
    margin-top: 20px;
    width: 100%;
}

.insight-inner {
    padding: 10px 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-left: 6px solid var(--text);
    text-align: left;
}

.insight-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #9ca3af;
    font-weight: 700;
    margin-bottom: 6px;
}

.insight-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text); /* Fixed dark text color */
    line-height: 1.5;
}

/* Insight Border/Text Colors */
.insight-containter .extreme_greed_fgi { border-left: 6px solid var(--extreme-greed); }
.fgi.extreme_greed_fgi { color: var(--extreme-greed); }
.insight-containter .greed_fgi { border-left: 6px solid var(--greed); }
.fgi.greed_fgi { color: var(--greed); }
.insight-containter .slightly_bullish_fgi { border-left: 6px solid var(--slightly-bullish); }
.fgi.slightly_bullish_fgi { color: var(--slightly-bullish); }
.insight-containter .neutral_fgi { border-left: 6px solid var(--neutral-fgi); }
.fgi.neutral_fgi { color: var(--neutral-fgi); }
.insight-containter .slightly_bearish_fgi { border-left: 6px solid var(--slightly-bearish); }
.fgi.slightly_bearish_fgi { color: var(--slightly-bearish); }
.insight-containter .fear_fgi { border-left: 6px solid var(--fear); }
.fgi.fear_fgi { color: var(--fear); }
.insight-containter .extreme_fear_fgi { border-left: 6px solid var(--extreme-fear); }
.fgi.extreme_fear_fgi { color: var(--extreme-fear); }

/* Sentiment Meter */
.crypto-analytics-sentiment-scale-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin-bottom: 8px;
    position: relative;
    margin-top: 20px;
}

.crypto-analytics-sentiment-scale-grid .scale-number {
    font-size: 14px;
    text-align: center;
    color: var(--text);
}

.crypto-analytics-sentiment-scale-grid .scale-label {
    font-size: 13px;
    color: var(--text-light);
    text-align: center;
    margin-top: 5px;
}

.crypto-analytics-sentiment-meter {
    height: 24px;
    background: linear-gradient(to right, var(--danger) 0%, var(--warning) 50%, var(--success) 100%);
    border-radius: 12px;
    position: relative;
    margin-bottom: 16px;
}

.crypto-analytics-sentiment-indicator {
    position: absolute;
    top: -4px;
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--dark);
    transform: translateX(-50%);
}

.crypto-analytics-sentiment-value {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--dark);
}

.crypto-analytics-sentiment-label {
    text-align: center;
    font-size: 14px;
    color: var(--text-light);
}

/* =========================================
   7. ANALYSIS LEVELS & TAGS
   ========================================= */
.crypto-analytics-levels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 45px;
    margin-bottom: 50px;
}

.crypto-analytics-level {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
}

.crypto-analytics-level:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgb(0 0 0 / 0.08);
}

.crypto-analytics-level-label {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 8px;
    font-weight: 500;
}

.crypto-analytics-level-value {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--dark);
}

.crypto-analytics-level-support { color: var(--success); }
.crypto-analytics-level-resistance { color: var(--danger); }

.crypto-analytics-level-distance {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 8px;
    padding: 4px 8px;
    background: rgb(255 255 255 / 0.7);
    border-radius: 10px;
}

.crypto-analytics-level-insight {
    margin-top: 24px;
    padding: 16px 0;
}

.crypto-analytics-level-insight-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--dark);
}

.crypto-analytics-level-insight-list {
    font-size: 14px;
    color: var(--text-light);
    padding-left: 20px;
}

.crypto-analytics-level-insight-list li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Tags */
.crypto-analytics-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.crypto-analytics-tag.bearish { background: rgb(255 107 107 / 0.1); color: var(--danger); }
.crypto-analytics-tag.bullish { background: rgb(0 201 167 / 0.1); color: var(--success); }
.crypto-analytics-tag.neutral { background: rgb(255 193 7 / 0.1); color: var(--warning); }

/* Bottom Recommendation */
.crypto-analytics-recommendation {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 16px;
    background: var(--primary-light);
    border-radius: 12px;
}

.crypto-analytics-recommendation-icon {
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}

.crypto-analytics-recommendation-content { flex: 1; }

.crypto-analytics-recommendation-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--dark);
}

.crypto-analytics-recommendation-description {
    font-size: 14px;
    color: var(--text-light);
}

/* =========================================
   8. RAW INDICATORS & TABLES
   ========================================= */
.crypto-analytics-title-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crypto-analytics-timeframe-controls,
.price-chart-timeframe-selector {
    display: flex;
    gap: 8px;
}

.crypto-analytics-timeframe-btn,
.price-chart-timeframe-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: white;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-light);
}

.crypto-analytics-timeframe-btn:hover,
.price-chart-timeframe-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.crypto-analytics-timeframe-btn.active,
.price-chart-timeframe-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Levels Table */
.crypto-analytics-levels-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 250px;
    border: 1px solid var(--border);
}

.crypto-analytics-levels-table th {
    background: var(--light);
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}

.crypto-analytics-levels-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text);
}

.crypto-analytics-levels-table tr:last-child td {
    border-bottom: none;
}

.crypto-analytics-price-support { color: var(--success); font-weight: 700; }
.crypto-analytics-price-resistance { color: var(--danger); font-weight: 700; }
.crypto-analytics-distance { color: var(--text-light); font-size: 12px; }

.crypto-analytics-strength {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.crypto-analytics-strength.high { background: var(--danger-light); color: var(--danger); }
.crypto-analytics-strength.medium { background: var(--warning-light); color: var(--warning); }
.crypto-analytics-strength.low { background: var(--success-light); color: var(--success); }

/* Indicators Minimal Table */
.crypto-analytics-tables-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.crypto-analytics-table-section {
    margin-bottom: 20px;
}

.crypto-analytics-table-header {
    margin-bottom: 12px;
    padding: 0 4px;
}

.crypto-analytics-table-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin: 0 0 4px 0;
}

.crypto-analytics-table-subtitle {
    font-size: 11px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.crypto-analytics-table-wrapper {
    overflow: hidden;
}

.crypto-analytics-indicators-table-minimal {
    width: 100%;
    border-collapse: collapse;
    min-width: 200px;
    border: 1px solid var(--border);
}

.crypto-analytics-indicators-table-minimal th {
    background: var(--light);
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
}

.crypto-analytics-indicators-table-minimal td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text);
}

.crypto-analytics-indicators-table-minimal tr:last-child td {
    border-bottom: none;
}

.crypto-analytics-indicators-table-minimal tr:hover {
    background: rgba(106, 189, 13, 0.02);
}

/* Loading States */
.crypto-analytics-indicators-loading,
.chart-loading-overlay {
    position: sticky;
    top: 20px;
    margin: 20px auto;
    width: 200px;
    height: 120px;
    background: rgb(255 255 255 / 0.95);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.crypto-analytics-loading-spinner,
.loading-spinner-content {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 50%;
    animation: crypto-analytics-spin 1s linear infinite;
    margin-bottom: 16px;
}

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

/* =========================================
   9. ARTICLES & PREDICTION INFO
   ========================================= */
.prediction-article-con p { font-size: 17px !important; margin-bottom: 15px; color: var(--text); }
.prediction-article-con h2 { font-size: 20px; font-weight: 600; color: var(--dark); }
.prediction-article-con h3 { font-weight: 700; color: var(--dark); }
.prediction-article-con li { font-size: 17px !important; margin-top: 10px; color: var(--text); }
.extra-m { font-weight: 400 !important; }

.author-thumb {
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
}

.author-thumb img {
    border: 2px solid #ddd;
    border-radius: 50%;
    overflow: hidden;
}

.author-name-date { display: inline-block; margin-top: 5px; }
.author-name { font-size: 13px !important; font-weight: 700; color: var(--dark); }
.prediction-info-date p, .post-date { font-size: 13px !important; display: inline-block; color: var(--text-light); }
.panel-group { margin-bottom: 10px !important; }

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.flex-item {
    flex: 1 1 auto;
    margin: 5px;
    text-align: center;
}

.reverse-button {
    border-color: none !important;
    border: 0 !important;
    padding: 0 !important;
}

.rotate-90 { height: 30px; }

.result-data .compare-heading {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 0.008em;
    color: var(--dark);
}

.result-data .compare-heading .coin-heading-name {
    color: #fff;
    background: #6abd0d;
    padding-left: 5px;
    padding-right: 5px;
}

.result-data p { font-size: 17px !important; text-align: center; color: var(--text); }
.text-success { color: #198754 !important; }
.text-muted { color: var(--text-light) !important; }
.text-danger { color: #ff4747 !important; }

.price-change-amount {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
    margin-top: 20px;
    color: var(--dark);
}

.coin-amount, .coin-value { color: #61c01b; display: inline-block; }

.prediction-summary { background: #ceff96; padding: 20px; }
.prediction-summary h2 { font-size: 20px; color: var(--dark); }
.prediction-summary-bullets { padding-left: 12px; font-size: 16px; color: var(--text); }
.prediction-summary-bullets li { margin-bottom: 5px; }

.ui.fluid.dropdown { height: 40.43px !important; }
.profit { background-color: rgb(36 190 152 / 0.06); }
.profit-text { color: #24be98; }
.loss { background-color: rgb(220 68 68 / 0.08); }
.loss-text { color: #dc4444; }
.profitcaloptions { margin-top: 10px; }
.prediction-label { display: block; color: var(--text); }
.year-text { margin-top: 3px; }
.prediction-year-dropdown { width: 25%; height: 40px; background-color: rgb(213 255 185 / 0.4) !important; }

.coin-overview-table tbody tr {
    height: 55px !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: 14px;
}

.coin-overview-table tbody tr:last-child { border-bottom: none; }

table thead {
    background: #000 !important;
    color: #fff !important;
    font-weight: 400 !important;
    font-size: 1.2rem !important;
}

#loader-predictionCoins .spinner {
    border: 4px solid rgb(0 0 0 / 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #6abd0d;
    animation: spin 1s ease infinite;
    margin: 0 auto;
}

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

.price-chart-container {
    height: 350px;
    margin-top: 20px;
    position: relative;
}

/* Coin Overview Table Helpers */
.coin-overview-table td i {
    width: 20px;
    text-align: center;
    color: var(--text-light);
    font-size: 16px;
}

.me-2 { margin-right: 8px; }
.me-1 { margin-right: 4px; }
.coin-overview-table td { vertical-align: middle !important; color: var(--text); }

.coin-overview-table td .down {
    background: linear-gradient(135deg, var(--danger) 0%, #c0392b 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    text-align: center;
    min-width: 70px;
}

.coin-overview-table td .up {
    background: linear-gradient(135deg, var(--success) 0%, #27ae60 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    text-align: center;
    min-width: 70px;
}

.coin-overview-table td .down .fa-arrow-down,
.coin-overview-table td .up .fa-arrow-up {
    color: #fff !important;
    width: 12px;
}

.faqs-section p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-light);
}

/* =========================================
   10. ADVANCED PREDICTION LAYOUT (Tabs)
   ========================================= */
.crypto-predictions-advanced { overflow: hidden; }

.predictions-tabs-nav {
    position: relative;
    background: var(--light);
    border-bottom: 1px solid var(--border);
    padding: 0;
    margin-top: 15px;
}

.tabs-scroll-container {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--border);
    padding: 0 5px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.tabs-scroll-container::-webkit-scrollbar { height: 6px; }
.tabs-scroll-container::-webkit-scrollbar-track { background: var(--border); border-radius: 3px; margin: 0 16px; }
.tabs-scroll-container::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }
.tabs-scroll-container::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

.tabs-wrapper {
    display: inline-flex;
    min-width: min-content;
}

.prediction-tab-btn {
    position: relative;
    background: #fff0;
    border: none;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.prediction-tab-btn:hover { color: var(--primary); background: rgb(106 189 13 / 0.05); }
.prediction-tab-btn.active { color: var(--primary); background: rgb(106 189 13 / 0.08); }

.tab-indicator {
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--primary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.prediction-tab-btn.active .tab-indicator { width: 100%; }

.scroll-indicators {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
}

.scroll-left-indicator, .scroll-right-indicator {
    width: 40px;
    background: linear-gradient(90deg, var(--light) 0%, transparent 100%);
}

.scroll-right-indicator { background: linear-gradient(270deg, var(--light) 0%, transparent 100%); }

.predictions-tabs-content { position: relative; }

.prediction-tab-panel {
    display: none;
    animation: fadeInUp 0.4s ease-out;
}

.prediction-tab-panel.active { display: block; }

.prediction-tab-panel h2 {
    color: var(--dark);
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 10px;
    margin-top: 25px !important;
    border-bottom: 2px solid var(--primary-light);
}

.prediction-tab-panel p {
    font-size: 15px !important;
    margin-bottom: 15px;
    color: var(--text); /* FIXED: Main text visibility */
    line-height: 1.5;
}

.prediction-table-container {
    margin-top: 24px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--card-bg);
}

.prediction-table-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 15px;
    background: white;
}

.prediction-table-container tbody tr:nth-child(odd) { background-color: var(--primary-light); }

.prediction-table-container tbody tr:hover {
    background-color: #eef2ff;
    transform: translateY(-1px);
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.prediction-dislaimer {
    color: var(--text-light);
    margin-top: 20px;
    margin-bottom: 0;
    font-style: italic;
}

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

/* =========================================
   11. NAVIGATION & SCROLL
   ========================================= */
.toc-placeholder {
    height: 56px;
    display: none;
}

.crypto-analytic-horizontal-scroll-container {
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    height: 56px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border);
}

.crypto-analytic-horizontal-scroll-container.is-sticky {
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.crypto-analytic-horizontal-scroll-content {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    flex-grow: 1;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    max-width: 1300px;
    margin: 0 auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.crypto-analytic-horizontal-scroll-content::-webkit-scrollbar { display: none; }

.crypto-analytic-nav-item {
    display: inline-block;
    color: var(--text); /* Main Text Color */
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
    height: 56px;
    line-height: 20px;
    text-decoration: none;
    box-sizing: border-box;
}

.crypto-analytic-nav-item:hover {
    color: var(--primary);
    text-decoration: none;
}

.crypto-analytic-nav-item.active {
    color: var(--primary);
    border-bottom: 3px solid var(--primary);
    padding-bottom: calc(1rem - 3px);
}

.crypto-analytic-scroll-button {
    width: 32px;
    height: 32px;
    background-color: var(--primary);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s, background-color 0.2s;
    flex-shrink: 0;
    margin: 0 0.5rem;
}

.crypto-analytic-scroll-button:hover { background-color: #4a5568; }
.crypto-analytic-scroll-button.hidden { opacity: 0; pointer-events: none; }

/* =========================================
   12. TOOLTIPS
   ========================================= */
.pos-relative { position: relative; }

.ca-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: #4a5568;
    color: white;
    border-radius: 50%;
    font-size: 9px;
    margin: 0 5px;
    cursor: pointer;
    vertical-align: middle;
    border: 0;
}

.ca-tooltip-content {
    position: absolute;
    background: #2d3748;
    color: white;
    border-radius: 8px;
    width: 280px;
    max-width: 90vw;
    z-index: 10001;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    padding: 16px;
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ca-tooltip-content.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.ca-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ca-tooltip-header strong { color: white; font-size: 15px; }

.ca-tooltip-close {
    background: none;
    border: none;
    color: #a0aec0;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ca-tooltip-content p {
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 12px 0;
    color: #e2e8f0;
}

.ca-tooltip-content a {
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
}

.ca-tooltip-content a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.ca-tooltip-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
}

.ca-tooltip-overlay.active { display: block; }

/* =========================================
   13. MARKET GRID (Similar/Trending)
   ========================================= */
.similar-trending-container {
    display: flex;
    gap: 20px;
    padding: 20px 24px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--border);
}

.similar-section, .trending-section { flex: 0 0 48%; }

.market-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
}

.market-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.market-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e0;
    text-decoration: none;
}

.market-card:active { text-decoration: none; }

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

.mc-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.mc-identity {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.mc-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text); /* Fixed visibility */
}

.mc-ticker {
    font-size: 0.8rem;
    font-weight: 600;
    color: #a0aec0;
    text-transform: uppercase;
}

.mc-body { margin-bottom: 10px; }

.mc-price {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.mc-change { font-size: 0.9rem; font-weight: 600; }

.mc-change.positive, .col-change.positive { color: #276749; }
.mc-change.negative, .col-change.negative { color: #c53030; }
.mc-change.neutral, .col-change.neutral { color: #718096; }

.mc-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #edf2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mc-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: capitalize;
    padding: 5px 10px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

/* Badge Colors */
.mc-badge.neutral_fgi,
.mc-badge.neutral_sentiment,
.mkt-badge.neutral_fgi,
.mkt-badge.neutral_sentiment {
    background: var(--warning-light);
    color: var(--warning);
}

.mc-badge.extreme_greed_fgi,
.mc-badge.greed_fgi,
.mc-badge.slightly_bullish_fgi,
.mc-badge.extremely_bullish_sentiment,
.mc-badge.strongly_bullish_sentiment,
.mc-badge.bullish_sentiment,
.mc-badge.slightly_bullish_sentiment,
.mkt-badge.extreme_greed_fgi,
.mkt-badge.greed_fgi,
.mkt-badge.slightly_bullish_fgi,
.mkt-badge.extremely_bullish_sentiment,
.mkt-badge.strongly_bullish_sentiment,
.mkt-badge.bullish_sentiment,
.mkt-badge.slightly_bullish_sentiment {
    background: var(--success-light);
    color: var(--success);
}

.mc-badge.fear_fgi,
.mc-badge.slightly_bearish_fgi,
.mc-badge.extreme_fear_fgi,
.mc-badge.slightly_bearish_sentiment,
.mc-badge.bearish_sentiment,
.mc-badge.strongly_bearish_sentiment,
.mc-badge.extremely_bearish_sentiment,
.mkt-badge.fear_fgi,
.mkt-badge.slightly_bearish_fgi,
.mkt-badge.extreme_fear_fgi,
.mkt-badge.slightly_bearish_sentiment,
.mkt-badge.bearish_sentiment,
.mkt-badge.strongly_bearish_sentiment,
.mkt-badge.extremely_bearish_sentiment {
    background: var(--danger-light);
    color: var(--danger);
}

/* Market Data Grid Table Styles */
.market-data-grid { color: var(--text); } /* Fixed visibility */
.market-data-grid .mkt-scroll-wrapper { overflow-x: auto; width: 100%; }
.market-data-grid .mkt-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); }

.market-data-grid .mkt-table thead th {
    background-color: #111827;
    color: #f3f4f6;
    padding: 10px 12px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.market-data-grid .mkt-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text); /* Main text color */
}

.market-data-grid .mkt-table tbody tr:last-child td { border-bottom: none; }
.market-data-grid .mkt-table tbody tr:hover td { background-color: var(--primary-light); }

.market-data-grid .mkt-identity { display: flex; align-items: center; gap: 12px; }
.market-data-grid .mkt-icon { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid #e5e7eb; }
.market-data-grid .mkt-name { display: block; font-weight: 700; color: var(--text); line-height: 1.1; }
.market-data-grid .mkt-ticker { display: block; font-size: 0.75rem; color: #6b7280; font-weight: 500; }

.market-data-grid .mkt-link { text-decoration: none; color: inherit; display: block; }
.market-data-grid .mkt-link:hover .mkt-name { color: var(--primary); text-decoration: none; }

.market-data-grid .mkt-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: capitalize;
    white-space: nowrap;
}

.border-bottom { border-bottom: 1px solid var(--border); }

/* =========================================
   14. RESPONSIVE QUERIES
   ========================================= */

/* Desktop & Large Tablet */
@media (max-width: 1050px) {
    .crypto-analytics-metrics { grid-template-columns: repeat(2, 1fr); }
    .crypto-analytics-meta-container .header-container { grid-template-columns: 1fr 200px; gap: 10px; }
}

@media (max-width: 1024px) {
    .tech-outlook .recommendation { padding: 10px; }
    .tech-outlook .rec-title { font-size: 12px; }
    .crypto-analytics-stats-container { flex-direction: column; gap: 15px; }
    .crypto-analytics-stats, .crypto-analytics-chart { flex: 0 0 auto; width: 100%; min-height: auto; }
    .crypto-analytics-fgisure-container { flex-direction: column; gap: 15px; }
    .crypto-analytics-fgi, .crypto-analytics-sure { flex: 0 0 auto; width: 100%; min-height: auto; }
}

@media (min-width: 1440px) {
    .crypto-analytics-stats-container { gap: 10px; }
    .crypto-analytics-fgisure-container { gap: 15px; }
}

/* Tablet (768px) */
@media (min-width: 769px) {
    .tabs-scroll-container { overflow-x: auto; }
}

@media (max-width: 768px) {
    .flex-container { flex-direction: column; }
    .flex-item { width: 100%; }
    .rotate-90 { -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
    .result-data .compare-heading { font-weight: 400; font-size: 17px; line-height: 22px; }
    
    .crypto-analytics-meta-container .breadcrumbs { margin-bottom: 5px; }
    .crypto-analytics-meta-container .header-container { grid-template-columns: 1fr; gap: 20px; }
    .crypto-analytics-meta-container .header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .crypto-analytics-meta-container .logo { width: 30px; height: 30px; min-width: 30px; }
    .crypto-analytics-meta-container .header .logo { display: none; }
    .page-subtitle {
  margin-top: 5px;
  line-height: 1.4;
}
    .price-section .logo { display: inline-block; }
    .crypto-analytics-meta-container .price-section .price { font-size: 30px; }
    .crypto-analytics-meta-container .price-section { align-items: center; gap: 8px; }
    .crypto-analytics-meta-container .price-section .price-change { font-size: 10px; padding: 3px 10px; }
    .crypto-analytics-meta-container .price-section .symbol { font-size: 10px; padding: 3px 10px; }
    .crypto-analytics-meta-container .methodology-text { display: block; }
    .crypto-analytics-meta-container .inline-trigger { margin-top: 8px; margin-left: 0; }

    .crypto-analytics-card-header { flex-direction: column; gap: 16px; align-items: stretch; }
    .table-responsive { border: 0 !important; }
    .crypto-analytics-metrics { grid-template-columns: 1fr; }
    .crypto-analytics-levels { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .crypto-analytics-recommendation { flex-direction: column; text-align: center; }
    .crypto-analytics-sentiment-scale-grid .scale-number { font-size: 13px; }
    .crypto-analytics-sentiment-scale-grid .scale-label { font-size: 12px; }
    .crypto-analytics-sentiment-main { flex-direction: column; gap: 10px; }
    .crypto-analytics-sentiment-score { font-size: 36px; }
    .crypto-analytics-sentiment-label-large { font-size: 20px; }
    .crypto-analytics-tables-container { grid-template-columns: 1fr; gap: 16px; }
    .crypto-analytics-signal-summary { flex-direction: column; gap: 16px; text-align: center; }
    .crypto-analytics-signal-count { gap: 16px; }
    
    .predictions-tabs-nav { padding: 0; }
    .tabs-scroll-container { padding: 0 12px; }
    .prediction-tab-btn { padding: 14px 16px; font-size: 13px; min-width: 70px; }
    .prediction-tab-panel { padding: 24px 20px; }
    .prediction-tab-panel h2 { font-size: 20px; }
    
    .similar-trending-container { flex-direction: column; }
    .similar-section, .trending-section { flex: 0 0 100%; }
    .crypto-analytics-fgi { border-bottom: 1px solid var(--border); padding-bottom: 15px; }
}

/* Mobile (600px) - Market Card Optimization */
@media (max-width: 600px) {
    .market-card-grid { grid-template-columns: 1fr; gap: 8px; }
    .market-card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 10px 14px; align-items: center; gap: 4px 12px; }
    .mc-header { grid-column: 1 / 2; grid-row: 1 / 2; margin-bottom: 0; width: 100%; overflow: hidden; }
    .mc-icon { width: 32px; height: 32px; }
    .mc-name { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mc-ticker { font-size: 0.75rem; }
    .mc-body { grid-column: 2 / 3; grid-row: 1 / 3; margin-bottom: 0; text-align: right; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
    .mc-price { font-size: 1.1rem; margin-bottom: 0; }
    .mc-change { font-size: 0.8rem; }
    .mc-footer { grid-column: 1 / 2; grid-row: 2 / 3; padding-top: 0; border-top: none; margin-top: 0; justify-content: flex-start; }
    .mc-badge { font-size: 0.65rem; padding: 2px 8px; height: fit-content; max-width: fit-content; white-space: nowrap; margin-right: 5px; }
}

/* Small Mobile (576px / 550px / 480px) */
@media (max-width: 576px) {
    .crypto-analytics-tag { display: none; }
    .crypto-analytics-metric-content { margin-bottom: 2px; }
    .crypto-analytics-metric-info { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
    .crypto-analytics-metric-value { font-size: 18px; margin-bottom: 4px; }
    .crypto-analytics-progress { height: 12px; margin: 5px 0 5px 0; }
    .crypto-analytics-sentiment-scale-grid .scale-number { font-size: 12px; }
    .crypto-analytics-sentiment-scale-grid .scale-label { font-size: 11px; }
    .crypto-analytics-metric-change { font-size: 12px; }
    .crypto-analytics-card { padding: 10px; }
    .crypto-analytics-levels { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; margin-bottom: 20px; }
    .crypto-analytics-level { padding: 12px 6px; }
    .crypto-analytics-level-value { font-size: 16px; }
}
@media (max-width: 550px) {
    .prediction-info-date p, .post-date { font-size: 11px !important; }
    .author-thumb { display: none; }
    .author-name-date { margin-top: 8px; }
    .author-name-info { font-size: 12px; }
    .result-data .compare-heading { font-weight: 400; font-size: 15px; line-height: 22px; }
}

@media (max-width: 480px) {
    .crypto-analytics-signal-count { gap: 12px; }
    .crypto-analytics-signal-count-number { font-size: 18px; }
    .tech-outlook .rec-title { font-size: 12px; margin-bottom: 10px; }
    .tech-outlook .recommendation { border: 0; padding: 0; box-shadow: none; width: 100%; margin-top: 10px; }
    .tech-outlook .rec-action { font-size: 16px; margin-bottom: 7px; padding: 8px; width: 100%; }
    .tech-outlook .rec-desc { font-size: 12px; margin-bottom: 0; }
    .crypto-analytics-stats-container { gap: 12px; }
    .crypto-analytics-stats { padding-bottom: 12px; }
    .crypto-analytics-fgisure-container { gap: 12px; }
    .crypto-analytics-fgi { padding-bottom: 12px; }
    .tabs-scroll-container { padding: 0 8px; }
    .prediction-tab-btn { padding: 12px 14px; font-size: 12px; min-width: 60px; }
    .prediction-tab-panel { padding: 20px 16px; }
    .prediction-tab-panel h2 { font-size: 18px; }
    .prediction-dislaimer { padding: 0 10px; }
}

@media (max-width: 400px) {
    .crypto-analytics-sentiment-scale-grid .scale-number { font-size: 11px; }
    .crypto-analytics-sentiment-scale-grid .scale-label { font-size: 10px; }
}