/**
 * Enhanced Crypto Analysis Report Styles
 * Modern dashboard layout with custom color scheme
 */

/* Color Variables */
:root {
    /* Primary Colors */
    --primary: #FFD700;
    --secondary: #003366;
    --success: #22C55E;
    --info: #3B82F6;
    --warning: #F59E0B;
    --error: #EF4444;
    --gray: #6B7280;
    
    /* Yellow Scale */
    --yellow-50: #FEFCE8;
    --yellow-100: #FEF3C7;
    --yellow-200: #FDE68A;
    --yellow-300: #FCD34D;
    --yellow-400: #FBBF24;
    --yellow-500: #F59E0B;
    --yellow-600: #D97706;
    --yellow-700: #B45309;
    --yellow-800: #92400E;
    --yellow-900: #78350F;
    --yellow-950: #451A03;
    
    /* Blue Scale */
    --blue-50: #EFF6FF;
    --blue-100: #DBEAFE;
    --blue-200: #BFDBFE;
    --blue-300: #93C5FD;
    --blue-400: #60A5FA;
    --blue-500: #3B82F6;
    --blue-600: #2563EB;
    --blue-700: #1D4ED8;
    --blue-800: #1E40AF;
    --blue-900: #1E3A8A;
    --blue-950: #172554;
    
    /* Gray Scale */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --gray-950: #030712;
}

/* Main Container */
.analysis-report-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
}

/* Header Section */
.analysis-report-header {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--blue-800) 100%);
    color: white;
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.analysis-report-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.3;
}

.report-title-section {
    position: relative;
    z-index: 2;
}

.report-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.report-title::before {
    content: "📊";
    font-size: 24px;
}

.report-subtitle {
    font-size: 16px;
    opacity: 0.9;
    margin: 0;
}

.crypto-symbol-display {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    margin-top: 4px;
}

.download-section {
    position: relative;
    z-index: 2;
}

.download-report-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.download-report-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Price Display Section */
.price-display-section {
    background: var(--gray-50);
    padding: 24px 32px;
    border-bottom: 1px solid var(--gray-200);
}

.current-price-card {
    display: flex;
    align-items: center;
    gap: 20px;
}

.price-info {
    flex: 1;
}

.price-label {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0 0 4px 0;
    font-weight: 500;
}

.price-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
}

.price-change {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.change-indicator {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.change-indicator.positive {
    background: var(--yellow-100);
    color: var(--success);
}

.change-indicator.negative {
    background: var(--yellow-50);
    color: var(--error);
}

.change-indicator.neutral {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* Main Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    padding: 32px;
    background: #ffffff;
}

/* Metric Cards */
.metric-card {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

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

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

.metric-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.metric-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.metric-icon.sentiment { background: var(--blue-100); color: var(--blue-700); }
.metric-icon.mindset { background: var(--yellow-100); color: var(--yellow-600); }
.metric-icon.trend { background: var(--yellow-100); color: var(--success); }
.metric-icon.confidence { background: var(--yellow-50); color: var(--warning); }

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 8px 0;
}

.metric-description {
    font-size: 14px;
    color: var(--gray-500);
    line-height: 1.5;
    margin: 0;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.optimistic {
    background: var(--yellow-100);
    color: var(--success);
}

.status-badge.pessimistic {
    background: var(--yellow-50);
    color: var(--error);
}

.status-badge.neutral {
    background: var(--gray-100);
    color: var(--gray-600);
}

.status-badge.bullish {
    background: var(--yellow-100);
    color: var(--success);
}

.status-badge.bearish {
    background: var(--yellow-50);
    color: var(--error);
}

.status-badge.sideways {
    background: var(--yellow-100);
    color: var(--yellow-600);
}

.status-badge.opportunity {
    background: var(--blue-100);
    color: var(--blue-700);
}

.status-badge.caution {
    background: var(--yellow-100);
    color: var(--yellow-600);
}

/* Confidence Score Gauge */
.confidence-gauge {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 16px auto;
}

.gauge-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        var(--error) 0deg 72deg,
        var(--warning) 72deg 144deg,
        var(--primary) 144deg 216deg,
        var(--success) 216deg 288deg,
        var(--info) 288deg 360deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gauge-circle::before {
    content: '';
    width: 80%;
    height: 80%;
    background: white;
    border-radius: 50%;
    position: absolute;
}

.gauge-value {
    position: relative;
    z-index: 2;
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-800);
}

.gauge-label {
    text-align: center;
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 8px;
}

/* Enhanced Chart Section Styles */
.chart-container {
    position: relative;
    height: 400px;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px dashed var(--gray-300);
}

.chart-container canvas {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.chart-info {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--gray-500);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 12px;
    padding: 12px;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray-500);
}

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

.legend-label {
    font-weight: 500;
}

/* Chart Status Styling */
#chart-status {
    margin: 0;
    font-weight: 500;
    color: #64748b;
}

#chart-status strong {
    color: #1e293b;
}

/* Trading Strategy Section */
.trading-strategy-section {
    background: linear-gradient(145deg, #ffffff 0%, var(--gray-50) 100%);
    margin: 24px 32px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
}

.trading-strategy-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--warning), var(--info));
}

.strategy-header {
    background: linear-gradient(135deg, var(--blue-600) 0%, var(--secondary) 100%);
    padding: 24px 32px;
    border-bottom: none;
    position: relative;
}

.strategy-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3C/g%3E%3C/svg%3E") repeat;
}

.strategy-title {
    font-size: 22px;
    font-weight: 700;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.strategy-title::before {
    content: "⚡";
    font-size: 20px;
    background: var(--primary);
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    padding: 32px;
    background: transparent;
}

.strategy-item {
    background: white;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px;
    border: 2px solid transparent;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.strategy-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gray-200);
    transition: all 0.3s ease;
}

.strategy-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
    border-color: var(--blue-200);
}

.strategy-item:hover::before {
    background: linear-gradient(90deg, var(--primary), var(--info));
}

.strategy-label {
    font-weight: 600;
    color: var(--gray-700);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.strategy-label::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue-400);
}

.strategy-value {
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 15px;
    min-width: 80px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

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

.strategy-value:hover::before {
    left: 100%;
}

.strategy-value.buy {
    background: linear-gradient(135deg, var(--yellow-100), var(--yellow-50));
    color: var(--success);
    border-color: var(--success);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}

.strategy-value.buy:hover {
    background: linear-gradient(135deg, var(--yellow-200), var(--yellow-100));
    transform: scale(1.05);
}

.strategy-value.sell {
    background: linear-gradient(135deg, var(--yellow-50), var(--yellow-100));
    color: var(--error);
    border-color: var(--error);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.strategy-value.sell:hover {
    background: linear-gradient(135deg, var(--yellow-100), var(--yellow-200));
    transform: scale(1.05);
}

.strategy-value.neutral {
    background: linear-gradient(135deg, var(--gray-100), var(--gray-50));
    color: var(--gray-700);
    border-color: var(--gray-300);
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.15);
}

.strategy-value.neutral:hover {
    background: linear-gradient(135deg, var(--gray-200), var(--gray-100));
    transform: scale(1.05);
}

/* Insights Section */
.insights-section {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 24px;
    margin: 24px 32px;
}

.insights-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.insights-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}

.insights-title::before {
    content: "💡";
    font-size: 16px;
}

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

.insight-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-100);
    transition: all 0.3s ease;
}

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

.insight-item:hover {
    background: var(--gray-50);
    margin: 0 -16px;
    padding: 16px;
    border-radius: 8px;
}

.insight-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--warning));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    border: 2px solid white;
}

.insight-text {
    color: #000000;
    line-height: 1.6;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    margin-top: 4px;
}

/* Disclaimer */
.disclaimer-section {
    background: var(--yellow-50);
    border: 1px solid var(--yellow-200);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 24px 32px 32px;
}

.disclaimer-title {
    color: var(--error);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.disclaimer-title::before {
    content: "⚠️";
    font-size: 14px;
}

.disclaimer-text {
    color: var(--error);
    line-height: 1.6;
    margin: 0 0 8px 0;
    font-size: 14px;
}

.disclaimer-text:last-child {
    margin-bottom: 0;
}

/* Fear & Greed Index Gauge */
.fear-greed-gauge {
    text-align: center;
    margin: 20px 0;
}

.gauge-container {
    position: relative;
    width: 200px;
    height: 100px;
    margin: 0 auto 15px;
}

.gauge-background {
    width: 200px;
    height: 100px;
    background: linear-gradient(90deg, 
        var(--error) 0%,     /* Extreme Fear - Red */
        var(--warning) 25%,    /* Fear - Orange */
        var(--primary) 50%,    /* Neutral - Yellow */
        var(--success) 75%,    /* Greed - Light Green */
        var(--info) 100%    /* Extreme Greed - Blue */
    );
    border-radius: 100px 100px 0 0;
    position: relative;
    overflow: hidden;
}

.gauge-background::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 80px;
    background: white;
    border-radius: 80px 80px 0 0;
}

.gauge-pointer {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 4px;
    height: 85px;
    background: var(--gray-800);
    border-radius: 4px 4px 0 0;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(-45deg);
    z-index: 15;
    transition: transform 1.5s ease-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.gauge-pointer::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: var(--gray-800);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.gauge-pointer::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid #1e293b;
}

.gauge-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 500;
    margin-top: 10px;
}

.label-extreme-fear {
    color: #dc2626;
}

.label-neutral {
    color: #eab308;
}

.label-extreme-greed {
    color: #059669;
}

/* Chart Section Improvements */
.chart-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #64748b;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 40px 20px;
    margin: 20px 0;
    transition: all 0.3s ease;
}

.chart-placeholder:hover {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-color: #94a3b8;
}

.chart-placeholder p {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
}

.chart-placeholder small {
    font-size: 14px;
    opacity: 0.8;
    color: #64748b;
    text-align: center;
    max-width: 300px;
    line-height: 1.4;
}

/* Enhanced Analysis Summary Section */
.analysis-summary-section {
    background: linear-gradient(145deg, #ffffff 0%, var(--gray-50) 100%);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 32px;
    margin: 24px 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
}

.analysis-summary-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--info), var(--success));
    border-radius: 16px 16px 0 0;
}

.summary-header {
    margin-bottom: 32px;
    text-align: center;
}

.summary-title {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.summary-card {
    background: white;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gray-200);
    transition: all 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border-color: var(--blue-200);
}

.summary-card:hover::before {
    background: linear-gradient(90deg, var(--primary), var(--info));
}

.summary-card .card-icon {
    font-size: 28px;
    margin-bottom: 16px;
    display: block;
}

.summary-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 20px 0;
}

/* Market Snapshot Card */
.price-highlight {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.price-label {
    font-size: 14px;
    color: #000000;
    font-weight: 500;
}

.price-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--success);
}

.trend-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trend-label {
    font-size: 14px;
    color: #000000;
    font-weight: 500;
}

.trend-value.bullish {
    color: var(--success);
    font-weight: 600;
    padding: 6px 12px;
    background: var(--yellow-100);
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid var(--success);
}

/* Technical Signals Card */
.signal-list {
    space-y: 8px;
}

.signal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #000000;
    font-weight: 500;
}

.signal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.signal-dot.green {
    background: #22c55e;
}

.signal-dot.orange {
    background: #f97316;
}

.signal-dot.red {
    background: #dc2626;
}

/* Support & Resistance Card */
.levels-content {
    space-y: 12px;
}

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

.level-label {
    font-size: 14px;
    color: #000000;
    font-weight: 500;
}

.level-value {
    font-weight: 700;
    font-size: 15px;
}

.level-item.support .level-value {
    color: #059669;
}

.level-item.resistance .level-value {
    color: #dc2626;
}

/* Risk Assessment Card */
.risk-meter {
    margin-bottom: 12px;
}

.risk-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.risk-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.risk-fill.low {
    background: #22c55e;
}

.risk-fill.moderate {
    background: #f59e0b;
}

.risk-fill.high {
    background: #dc2626;
}

.risk-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--warning);
    margin-bottom: 8px;
}

.risk-description {
    font-size: 14px;
    color: #000000;
    margin: 0;
    font-weight: 500;
    line-height: 1.5;
}

/* AI Analysis Section */
.ai-analysis-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 24px;
    margin: 24px 32px;
}

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

.ai-title {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.ai-badge {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.ai-content-wrapper {
    background: white;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e2e8f0;
}

.ai-content {
    line-height: 1.7;
    color: #374151;
}

.ai-section-header {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 24px 0 12px 0;
    padding: 12px 16px;
    background: #f1f5f9;
    border-left: 4px solid #667eea;
    border-radius: 4px;
}

.ai-section-header:first-child {
    margin-top: 0;
}

.ai-bullet-point {
    margin: 8px 0;
    padding-left: 20px;
    position: relative;
    color: #4b5563;
}

.ai-bullet-point::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #667eea;
    font-weight: bold;
}

.price-target {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    margin: 2px;
}

.price-target.buy {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.price-target.sell {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Analysis Cards Grid */
.analysis-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.analysis-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.analysis-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.analysis-card .card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f1f5f9;
}

.analysis-card .card-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.analysis-card h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.analysis-card .card-content {
    line-height: 1.6;
}

/* Market Overview Card Styles */
.trend-status, .volatility-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 6px;
}

.status-label, .info-label {
    font-weight: 500;
    color: #64748b;
    font-size: 14px;
}

.status-value, .info-value {
    font-weight: 600;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
}

.status-value.sideways {
    background: #fef3c7;
    color: #d97706;
}

.info-value.moderate {
    background: #dbeafe;
    color: #1d4ed8;
}

.description {
    color: #4b5563;
    font-size: 14px;
    margin: 12px 0 0 0;
    line-height: 1.5;
}

/* Technical Analysis Card Styles */
.indicator-item {
    margin-bottom: 16px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 4px solid #e2e8f0;
}

.indicator-item:last-child {
    margin-bottom: 0;
}

.indicator-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.indicator-name {
    font-weight: 500;
    color: #374151;
    font-size: 14px;
}

.indicator-status {
    font-weight: 600;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.indicator-status.bearish {
    background: #fef2f2;
    color: #dc2626;
    border-left-color: #dc2626;
}

.indicator-status.oversold {
    background: #dcfce7;
    color: #166534;
    border-left-color: #166534;
}

.indicator-status.neutral {
    background: #fef3c7;
    color: #d97706;
    border-left-color: #d97706;
}

.indicator-detail {
    font-size: 13px;
    color: #64748b;
    font-style: italic;
}

/* Price Analysis Card Styles */
.price-range {
    margin-bottom: 16px;
}

.range-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 6px 0;
}

.range-label {
    font-weight: 500;
    color: #64748b;
    font-size: 14px;
}

.range-value {
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

.range-value.moderate {
    color: #f59e0b;
}

.outlier-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    margin-top: 12px;
}

.alert-icon {
    font-size: 16px;
}

.alert-text {
    font-size: 13px;
    color: #dc2626;
    font-weight: 500;
}

/* Trading Opportunities Card Styles */
.opportunity-item {
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.opportunity-item:last-child {
    margin-bottom: 0;
}

.opportunity-item.bullish {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.opportunity-item.neutral {
    background: #fffbeb;
    border-color: #fed7aa;
}

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

.opportunity-type {
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

.confidence-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.confidence-badge.medium {
    background: #fef3c7;
    color: #d97706;
}

.confidence-badge.high {
    background: #dcfce7;
    color: #166534;
}

.opportunity-details {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.4;
}

/* Key Takeaways Section */
.key-takeaways {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
}

.takeaways-title {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 20px 0;
}

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

.takeaway-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: transform 0.2s ease;
}

.takeaway-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.takeaway-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

.takeaway-icon.positive {
    background: #dcfce7;
    color: #166534;
}

.takeaway-icon.neutral {
    background: #dbeafe;
    color: #1d4ed8;
}

.takeaway-icon.caution {
    background: #fef2f2;
    color: #dc2626;
}

.takeaway-content {
    flex: 1;
}

.takeaway-content strong {
    display: block;
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
    margin-bottom: 4px;
}

.takeaway-content p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* Responsive adjustments for analysis cards */
@media (max-width: 768px) {
    .analysis-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .takeaways-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .takeaway-item {
        padding: 12px;
    }
    
    .analysis-card {
        padding: 16px;
    }
}

/* Responsive improvements */
@media (max-width: 768px) {
    .summary-grid {
        grid-template-columns: 1fr;
    }
    
    .gauge-container {
        width: 160px;
        height: 80px;
    }
    
    .gauge-background {
        width: 160px;
        height: 80px;
    }
    
    .gauge-background::after {
        width: 120px;
        height: 60px;
    }
    
    .gauge-pointer {
        height: 60px;
    }
    
    .ai-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .analysis-summary-section,
    .ai-analysis-section {
        margin: 16px 20px;
        padding: 20px;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .analysis-report-container {
        margin: 10px;
        border-radius: 8px;
    }
    
    .analysis-report-header {
        padding: 20px;
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 16px;
    }
    
    .chart-section,
    .trading-strategy-section,
    .insights-section,
    .disclaimer-section {
        margin: 16px 20px;
    }
    
    .strategy-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px;
    }
    
    .strategy-item {
        padding: 20px;
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .strategy-label {
        font-size: 14px;
        justify-content: center;
    }
    
    .strategy-value {
        min-width: 120px;
        padding: 12px 20px;
    }
    
    .trading-strategy-section {
        margin: 16px 20px;
        border-radius: 12px;
    }
    
    .strategy-header {
        padding: 20px 24px;
    }
    
    .strategy-title {
        font-size: 20px;
        gap: 8px;
    }
    
    .price-display-section {
        padding: 20px;
    }
    
    .current-price-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .dashboard-grid {
        padding: 16px;
    }
    
    .metric-card {
        padding: 16px;
    }
    
    .chart-section,
    .trading-strategy-section,
    .insights-section,
    .disclaimer-section {
        margin: 12px 16px;
        padding: 16px;
    }
    
    .strategy-grid {
        padding: 16px;
        gap: 12px;
    }
    
    .strategy-item {
        padding: 16px;
    }
    
    .strategy-header {
        padding: 16px 20px;
    }
    
    .strategy-title {
        font-size: 18px;
    }
    
    .strategy-title::before {
        padding: 6px;
        font-size: 16px;
    }
    
    .strategy-value {
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* Enhanced Fear & Greed Index Gauge with Real-time Data */
.gauge-value-display {
    text-align: center;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}

.gauge-number {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.gauge-status {
    display: block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.gauge-status.extreme-fear {
    background: #fef2f2;
    color: #dc2626;
}

.gauge-status.fear {
    background: #fef3c7;
    color: #d97706;
}

.gauge-status.neutral {
    background: #f1f5f9;
    color: #475569;
}

.gauge-status.greed {
    background: #dcfce7;
    color: #059669;
}

.gauge-status.extreme-greed {
    background: #dcfce7;
    color: #166534;
}

.gauge-status.loading {
    background: #dbeafe;
    color: #1d4ed8;
    animation: pulse 1.5s ease-in-out infinite;
}

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

/* Real-time data loading state */
.fear-greed-card.loading .gauge-pointer {
    animation: gaugeLoading 2s ease-in-out infinite;
}

@keyframes gaugeLoading {
    0%, 100% { transform: translateX(-50%) rotate(-45deg); }
    50% { transform: translateX(-50%) rotate(45deg); }
}

/* Enhanced gauge background with better gradients */
.gauge-background {
    background: linear-gradient(90deg, 
        #dc2626 0%,     /* Extreme Fear - Red */
        #f97316 20%,    /* Fear - Orange */
        #eab308 40%,    /* Neutral - Yellow */
        #22c55e 60%,    /* Greed - Light Green */
        #059669 80%,    /* More Greed */
        #166534 100%   /* Extreme Greed - Dark Green */
    );
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.gauge-background::after {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Real-time Fear & Greed Refresh Button */
.refresh-fear-greed-btn {
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.refresh-fear-greed-btn:hover {
    opacity: 1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.refresh-fear-greed-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Enhanced loading animation for the gauge */
.fear-greed-card.loading {
    position: relative;
    overflow: hidden;
}

.fear-greed-card.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Real-time data indicator */
.real-time-indicator {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: realTimePulse 2s infinite;
}

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

/* Improved gauge transitions */
.gauge-pointer {
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.gauge-number {
    transition: all 0.5s ease;
}

.gauge-status {
    transition: all 0.5s ease;
}

/* Error state styling */
.fear-greed-card.error .gauge-pointer {
    opacity: 0.3;
}

.fear-greed-card.error .gauge-background {
    opacity: 0.5;
}

/* Enhanced responsiveness for real-time features */
@media (max-width: 768px) {
    .refresh-fear-greed-btn {
        top: 5px;
        right: 5px;
        padding: 6px 10px;
        font-size: 10px;
    }
    
    .gauge-number {
        font-size: 28px;
    }
    
    .real-time-indicator {
        width: 6px;
        height: 6px;
        top: 6px;
        left: 6px;
    }
}

/* Responsive Chart */
@media (max-width: 768px) {
    .chart-container {
        height: 300px;
        padding: 12px;
    }
    
    .chart-legend {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    .legend-item {
        justify-content: center;
    }
}

/* Chart Loading Animation */
.chart-container.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top: 3px solid #667eea;
    border-radius: 50%;
    animation: chartSpin 1s linear infinite;
    z-index: 10;
}

@keyframes chartSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Detailed Analysis Container */
.detailed-analysis-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.analysis-section-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.analysis-section-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f1f5f9;
}

.section-number {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.section-content {
    line-height: 1.6;
    color: #374151;
}

.section-content h5 {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 12px 0;
    padding: 8px 12px;
    background: #f8fafc;
    border-left: 4px solid #667eea;
    border-radius: 4px;
}

.section-content ul {
    margin: 12px 0;
    padding-left: 0;
    list-style: none;
}

.section-content li {
    position: relative;
    padding: 8px 0 8px 24px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.section-content li:last-child {
    border-bottom: none;
}

.section-content li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 8px;
    color: #667eea;
    font-weight: bold;
    font-size: 16px;
}

.section-content p {
    margin: 12px 0;
    line-height: 1.6;
}

.price-data-display {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
}

.price-data-display strong {
    color: #1e293b;
    font-weight: 600;
}

/* Responsive design for analysis sections */
@media (max-width: 768px) {
    .analysis-section-card {
        padding: 16px;
    }
    
    .section-header {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    
    .section-number {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .section-title {
        font-size: 16px;
    }
    
    .price-data-display {
        font-size: 12px;
        padding: 12px;
    }
}

/* Enhanced Analysis Content Formatting */
.analysis-section-card .section-content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #374151;
}

.analysis-section-card .section-content p {
    margin: 12px 0;
    font-size: 15px;
    color: #374151;
}

.analysis-section-card .section-content ul {
    margin: 16px 0;
    padding-left: 24px;
    list-style: none;
}

.analysis-section-card .section-content li {
    margin: 8px 0;
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
    font-size: 14px;
}

.analysis-section-card .section-content li:before {
    content: "•";
    color: #667eea;
    font-weight: 600;
    position: absolute;
    left: 0;
    font-size: 16px;
}

/* Price Value Highlighting */
.price-value {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: white !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Percentage Value Highlighting */
.percentage-value {
    background: #10b981 !important;
    color: white !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    font-weight: 500 !important;
    font-size: 0.85em !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Technical Terms Highlighting */
.technical-term {
    color: #6366f1 !important;
    font-weight: 600 !important;
    background: rgba(99, 102, 241, 0.1);
    padding: 1px 3px;
    border-radius: 2px;
}

/* Level Number Highlighting */
.level-number {
    background: #8b5cf6 !important;
    color: white !important;
    padding: 1px 6px !important;
    border-radius: 12px !important;
    font-size: 0.8em !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Price Highlight Boxes */
.price-highlight {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe) !important;
    padding: 12px !important;
    border-left: 4px solid #0ea5e9 !important;
    margin: 12px 0 !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Technical Highlight Boxes */
.technical-highlight {
    background: linear-gradient(135deg, #fef7ff, #fdf4ff) !important;
    padding: 10px !important;
    border-left: 3px solid #a855f7 !important;
    margin: 8px 0 !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Section Headers */
.analysis-section-card h6 {
    color: #ffffff !important;
    font-weight: 600 !important;
    margin: 16px 0 8px 0 !important;
    font-size: 15px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 4px;
}

/* Data Display Improvements */
.price-data-display {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
}

.price-data-display strong {
    color: #1e293b;
    font-weight: 600;
}

/* Clean up any remaining raw data formatting */
.analysis-section-card .section-content code,
.analysis-section-card .section-content pre {
    display: none;
}

/* Improve readability */
.analysis-section-card .section-content h5 {
    color: #1e293b;
    font-weight: 600;
    margin: 20px 0 12px 0;
    font-size: 16px;
    border-left: 3px solid #667eea;
    padding-left: 12px;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .analysis-section-card .section-content {
        font-size: 14px;
    }
    
    .price-highlight, .technical-highlight {
        padding: 8px !important;
        margin: 8px 0 !important;
    }
    
    .analysis-section-card .section-content li {
        padding-left: 12px;
    }
}

/* Enhanced Time Frame Box */
.enhanced-timeframe-box {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 0;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.timeframe-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 20px;
    border-bottom: 1px solid #cbd5e1;
}

.timeframe-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timeframe-content {
    padding: 20px;
    background: white;
}

.price-data-row, .current-price-row {
    display: none; /* Hide old complex display */
}

.price-sequence {
    display: none; /* Hide scrolling price sequence */
}

/* New Price Summary Grid (replaces scrolling data) */
.price-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.price-summary-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
    transition: transform 0.2s ease;
}

.price-summary-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.summary-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.summary-value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.current-price-value {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #059669 !important;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: 1px solid #86efac !important;
    display: inline-block !important;
}

/* Customer-Friendly Messaging */
.customer-note {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.customer-note p {
    margin: 0;
    font-size: 14px;
    color: #1e40af;
    line-height: 1.5;
}

.customer-explanation {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.intro-text {
    margin: 0 !important;
    font-size: 15px !important;
    color: #374151 !important;
    line-height: 1.6 !important;
}

/* Customer-Friendly Messages */
.no-data-message, .processing-message {
    background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
    color: #92400e !important;
    padding: 16px !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-weight: 500 !important;
    border: 1px solid #f59e0b !important;
    margin: 16px 0 !important;
}

/* Technical Summary Cards */
.technical-summary {
    margin-top: 24px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.indicator-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.indicator-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.indicator-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.indicator-card h7 {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 8px 0;
}

.indicator-card p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* Simplified Analysis Container */
.simplified-analysis {
    margin: 20px 0;
}

/* Responsive Design for Customer-Friendly Elements */
@media (max-width: 768px) {
    .price-summary-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .price-summary-item {
        padding: 10px 12px;
    }
    
    .summary-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .indicator-card {
        padding: 12px;
    }
    
    .customer-note, .customer-explanation {
        padding: 12px;
    }
    
    .intro-text {
        font-size: 14px !important;
    }
    
    .current-price-value {
        font-size: 14px !important;
        padding: 4px 8px !important;
    }
}

@media (max-width: 480px) {
    .price-summary-grid {
        gap: 8px;
    }
    
    .price-summary-item {
        padding: 8px 10px;
    }
    
    .summary-label {
        font-size: 11px;
    }
    
    .summary-value {
        font-size: 13px;
    }
    
    .indicator-icon {
        font-size: 20px;
    }
    
    .indicator-card h7 {
        font-size: 13px;
    }
    
    .indicator-card p {
        font-size: 12px;
    }
}

/* Enhanced messaging for better UX */
.analysis-section-card .section-content h6.analysis-subheading {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border-left: 4px solid #667eea !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    margin: 20px 0 16px 0 !important;
    border-radius: 6px !important;
    font-size: 15px !important;
}

/* Re-add Essential Styling */
/* Uniform Subheadings */
.analysis-subheading-main {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 20px 0 !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border-left: 4px solid #667eea !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.analysis-subheading {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin: 16px 0 8px 0 !important;
    padding: 8px 12px !important;
    background: #f8fafc !important;
    border-left: 3px solid #94a3b8 !important;
    border-radius: 4px !important;
    text-transform: capitalize !important;
    letter-spacing: 0.3px !important;
}

/* Enhanced List Styling */
.analysis-list {
    margin: 16px 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
}

.analysis-list-item {
    margin: 0 0 12px 0 !important;
    padding: 8px 0 8px 24px !important;
    position: relative !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
    color: #374151 !important;
    border-bottom: 1px solid #f1f5f9;
}

.analysis-list-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.analysis-list-item::before {
    content: '▸' !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    color: #667eea !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

/* Enhanced Paragraph Styling */
.analysis-paragraph {
    margin: 12px 0 !important;
    line-height: 1.6 !important;
    color: #374151 !important;
    font-size: 15px !important;
}

/* Enhanced Price Value Highlighting */
.price-value-highlight {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: white !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.9em !important;
    box-shadow: 0 2px 4px rgba(251, 191, 36, 0.3) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Enhanced Percentage Value Highlighting */
.percentage-value-highlight {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    font-size: 0.85em !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3) !important;
    border: 1px solid rgba(5, 150, 105, 0.3) !important;
}

/* Enhanced Technical Terms Highlighting */
.technical-term-highlight {
    color: #6366f1 !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05)) !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

/* Enhanced Level Number Highlighting */
.level-number-highlight {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    color: white !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-size: 0.8em !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(139, 92, 246, 0.3) !important;
    border: 1px solid rgba(124, 58, 237, 0.3) !important;
}

/* Enhanced Price Highlight Boxes */
.price-highlight-box {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    padding: 16px !important;
    border-left: 4px solid #0ea5e9 !important;
    margin: 16px 0 !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.1) !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
}

/* Enhanced Technical Highlight Boxes */
.technical-highlight-box {
    background: linear-gradient(135deg, #fef7ff 0%, #fdf4ff 100%) !important;
    padding: 14px !important;
    border-left: 3px solid #a855f7 !important;
    margin: 12px 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(168, 85, 247, 0.1) !important;
    border: 1px solid rgba(168, 85, 247, 0.2) !important;
}

/* Additional Mobile Responsive Styles */
@media (max-width: 768px) {
    .enhanced-timeframe-box {
        margin: 16px 0;
    }
    
    .timeframe-content {
        padding: 16px;
    }
    
    .analysis-subheading-main {
        font-size: 16px !important;
        padding: 10px 12px !important;
    }
    
    .analysis-subheading {
        font-size: 14px !important;
        padding: 6px 10px !important;
    }
    
    .analysis-list {
        padding: 12px;
    }
    
    .analysis-list-item {
        padding: 6px 0 6px 20px !important;
        font-size: 13px !important;
    }
    
    .price-highlight-box, .technical-highlight-box {
        padding: 12px !important;
        margin: 12px 0 !important;
    }
}

/* ==========================================================================
   COMPREHENSIVE RESPONSIVE DESIGN FOR ALL DEVICES WORLDWIDE
   ========================================================================== */

/* Enhanced Mobile Responsiveness for Insights and Analysis Summary */
@media (max-width: 1200px) {
    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .insight-item {
        padding: 14px 0;
    }
    
    .insight-icon {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
}

@media (max-width: 992px) {
    .summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
    
    .summary-card {
        padding: 20px;
    }
    
    .analysis-summary-section {
        padding: 28px;
        margin: 20px 24px;
    }
    
    .insights-section {
        margin: 20px 24px;
    }
}

/* Tablet Portrait and Mobile Landscape */
@media (max-width: 768px) {
    /* Enhanced Insights Section Mobile */
}

/* Responsive improvements */
@media (max-width: 768px) {
    .summary-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .analysis-summary-section {
        margin: 8px !important;
        padding: 16px !important;
        border-radius: 12px;
    }
    
    .summary-header {
        margin-bottom: 20px;
        text-align: center;
    }
    
    .summary-title {
        font-size: 18px !important;
        gap: 8px;
    }
    
    .summary-card {
        padding: 16px !important;
        margin-bottom: 12px;
        border-radius: 10px;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    .summary-card h4 {
        font-size: 16px !important;
        margin-bottom: 16px;
    }
    
    .summary-card .card-icon {
        font-size: 24px !important;
        margin-bottom: 12px;
    }
    
    .price-amount {
        font-size: 16px !important;
    }
    
    .price-highlight {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .trend-indicator {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .signal-item {
        font-size: 13px;
        margin-bottom: 8px;
    }
    
    .level-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 10px;
    }
    
    .level-label, .level-value {
        font-size: 13px;
    }
    
    .risk-meter {
        margin-bottom: 10px;
    }
    
    .risk-label {
        font-size: 13px;
        margin-bottom: 6px;
    }
    
    .risk-description {
        font-size: 12px;
        line-height: 1.4;
    }
    
    .gauge-container {
        width: 160px;
        height: 80px;
    }
    
    .gauge-background {
        width: 160px;
        height: 80px;
    }
    
    .gauge-background::after {
        width: 120px;
        height: 60px;
    }
    
    .gauge-pointer {
        height: 60px;
    }
    
    .ai-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .ai-analysis-section {
        margin: 16px 8px;
        padding: 16px;
    }
}

/* Enhanced Mobile CSS for Analysis Summary - Small Screens */
@media (max-width: 480px) {
    .analysis-summary-section {
        margin: 4px !important;
        padding: 12px !important;
        border-radius: 8px;
    }
    
    .summary-header {
        margin-bottom: 16px;
    }
    
    .summary-title {
        font-size: 16px !important;
        flex-direction: column;
        gap: 4px;
    }
    
    .summary-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        display: grid !important;
    }
    
    .summary-card {
        padding: 12px !important;
        margin-bottom: 8px;
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        display: block !important;
        overflow: hidden;
    }
    
    .summary-card h4 {
        font-size: 14px !important;
        margin-bottom: 12px;
    }
    
    .summary-card .card-icon {
        font-size: 20px !important;
        margin-bottom: 8px;
    }
    
    .price-amount {
        font-size: 14px !important;
    }
    
    .price-label, .trend-label {
        font-size: 12px !important;
    }
    
    .signal-item {
        font-size: 12px !important;
        gap: 8px;
        margin-bottom: 6px;
    }
    
    .signal-dot {
        width: 6px !important;
        height: 6px !important;
    }
    
    .level-label, .level-value {
        font-size: 12px !important;
    }
    
    .risk-label {
        font-size: 12px !important;
        margin-bottom: 4px;
    }
    
    .risk-description {
        font-size: 11px !important;
        line-height: 1.3;
    }
    
    .trend-value.bullish {
        padding: 4px 6px !important;
        font-size: 10px !important;
    }
}

/* Ultra-small Mobile Screens */
@media (max-width: 360px) {
    .analysis-summary-section {
        margin: 2px !important;
        padding: 8px !important;
    }
    
    .summary-title {
        font-size: 14px !important;
    }
    
    .summary-grid {
        gap: 8px !important;
    }
    
    .summary-card {
        padding: 8px !important;
        margin-bottom: 6px;
    }
    
    .summary-card h4 {
        font-size: 13px !important;
        margin-bottom: 8px;
    }
    
    .summary-card .card-icon {
        font-size: 18px !important;
        margin-bottom: 6px;
    }
    
    .price-amount {
        font-size: 13px !important;
    }
    
    .price-label, .trend-label {
        font-size: 11px !important;
    }
    
    .signal-item {
        font-size: 11px !important;
        gap: 6px;
        margin-bottom: 4px;
    }
    
    .level-label, .level-value {
        font-size: 11px !important;
    }
    
    .risk-label {
        font-size: 11px !important;
    }
    
    .risk-description {
        font-size: 10px !important;
    }
}

/* Force display on mobile */
@media (max-width: 768px) {
    .analysis-summary-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .summary-grid {
        display: grid !important;
        visibility: visible !important;
    }
    
    .summary-card {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    .summary-card .card-content,
    .price-highlight,
    .trend-indicator,
    .signal-list,
    .levels-content,
    .risk-meter {
        display: block !important;
        visibility: visible !important;
    }
}

/* Mobile-first responsive grid */
@media (max-width: 768px) {
    .summary-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    .summary-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

@media (max-width: 360px) {
    .summary-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* Final Mobile Optimizations for Analysis Summary */
@media screen and (max-width: 768px) {
    .analysis-summary-section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    .summary-grid {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .summary-card {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Ensure content doesn't overflow */
    .price-highlight,
    .trend-indicator,
    .signal-list,
    .levels-content,
    .risk-meter {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Fix text truncation issues */
    .signal-item,
    .level-item {
        flex-wrap: wrap !important;
        word-break: break-word !important;
    }
    
    /* Ensure icons and text scale properly */
    .summary-card .card-icon {
        flex-shrink: 0 !important;
    }
    
    .summary-card h4 {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* Landscape mobile optimization */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .analysis-summary-section {
        padding: 12px 16px !important;
        margin: 8px !important;
    }
    
    .summary-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .summary-card {
        padding: 12px !important;
    }
    
    .summary-card h4 {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }
}