@import url('colors-generated.css');

/* ============================================================================
   CFSS WIDGET STYLES
   Composite Funding Sentiment Score Widget Styling

   Note: All CFSS and CRI color variables are imported from colors-generated.css
   To modify colors, edit src/utils/colors.py and run: make generate-colors
   ============================================================================ */

/* CFSS Widget Container */
.cfss-widget {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 24px;
    color: white;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.dark .cfss-widget {
    background: #23262F;  /* Match Funding Interval Distribution widget */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* CFSS Header */
.cfss-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.cfss-title {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cfss-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cfss-refresh-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.cfss-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.cfss-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cfss-refresh-btn .spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* CFSS Top Section - Gauge and Sentiment Badge */
.cfss-top-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .cfss-top-section {
        flex-direction: column;
        gap: 24px;
    }
}

/* CFSS Gauge */
.cfss-gauge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.cfss-gauge {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.cfss-gauge-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 12;
}

.cfss-gauge-fill {
    fill: none;
    stroke: #4ade80;
    stroke-width: 12;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 1s ease, stroke 0.3s ease;
}

/* Sentiment zone colors - BEM naming with underscores for elements */
/* Increased specificity (svg selector) eliminates need for !important */
/* Arc segments positioned via SVG path data, no CSS transform needed */
svg .cfss-gauge_fill.extreme_fear {
    stroke: var(--cfss-extreme-fear);
}
svg .cfss-gauge_fill.fear {
    stroke: var(--cfss-fear);
}
svg .cfss-gauge_fill.bearish {
    stroke: var(--cfss-bearish);
}
svg .cfss-gauge_fill.neutral {
    stroke: var(--cfss-neutral);
}
svg .cfss-gauge_fill.bullish {
    stroke: var(--cfss-bullish);
}
svg .cfss-gauge_fill.overheated {
    stroke: var(--cfss-overheated);
}
svg .cfss-gauge_fill.extreme_greed {
    stroke: var(--cfss-extreme-greed);
}

/* Safari 15.4+ required (March 2022+) - CSS custom properties in SVG fully supported */

/* External gauge value - positioned below gauge */
.cfss-gauge-value-external {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.cfss-value-large {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.cfss-label-small {
    font-size: 11px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Sentiment Badge Container */
.cfss-sentiment-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Sentiment Zone Badge - BEM naming with underscores for elements */
.cfss-sentiment_zone {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    padding: 16px 32px;
    border-radius: 28px;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Sentiment Zone Color Variants - Automatically adapt to light/dark mode */
.cfss-sentiment_zone.extreme_fear {
    background: var(--cfss-extreme-fear);
    color: white;
    backdrop-filter: none;
}

.cfss-sentiment_zone.fear {
    background: var(--cfss-fear);
    color: white;
    backdrop-filter: none;
}

.cfss-sentiment_zone.bearish {
    background: var(--cfss-bearish);
    color: white;
    backdrop-filter: none;
}

.cfss-sentiment_zone.neutral {
    background: var(--cfss-neutral);
    color: white;
    backdrop-filter: none;
}

.cfss-sentiment_zone.bullish {
    background: var(--cfss-bullish);
    color: white;
    backdrop-filter: none;
}

.cfss-sentiment_zone.overheated {
    background: var(--cfss-overheated);
    color: white;
    backdrop-filter: none;
}

.cfss-sentiment_zone.extreme_greed {
    background: var(--cfss-extreme-greed);
    color: white;
    backdrop-filter: none;
}

/* CFSS Label Text */
.cfss-label-text {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .cfss-sentiment-zone {
        font-size: 18px;
        padding: 14px 28px;
        border-radius: 24px;
    }

    .cfss-label-text {
        font-size: 12px;
    }
}

/* CFSS Metrics Grid */
.cfss-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    width: 100%;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .cfss-metrics {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.cfss-metric-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
}

.cfss-metric-card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.cfss-metric-label {
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cfss-metric-value {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
    padding-left: 0;
}

.cfss-metric-detail {
    font-size: 11px;
    opacity: 0.75;
}

/* Slope Indicator */
.cfss-slope-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.cfss-slope-indicator.accelerating {
    background: rgba(34, 197, 94, 0.3);
}

.cfss-slope-indicator.decelerating {
    background: rgba(239, 68, 68, 0.3);
}

.cfss-slope-indicator.stable {
    background: rgba(168, 85, 247, 0.3);
}

/* CRI Risk Level Badge */
/* ========================================
 * CRI Badge Styles (Shared Utility)
 * Used by: Symbol Detail Page, CFSS Widget, Admin Dashboard
 * ======================================== */

/* Base CRI badge styling */
.cri-badge {
    display: inline-block;
    margin-left: 0;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

/* Extreme High Risk - Red (P99+) */
.cri-badge-extreme_high {
    background-color: #FEE2E2;
    color: #991B1B;
}

.dark .cri-badge-extreme_high {
    background-color: #991B1B;
    color: #FCA5A5;
}

/* High Risk - Orange (P95-P99) */
.cri-badge-high {
    background-color: #FED7AA;
    color: #C2410C;
}

.dark .cri-badge-high {
    background-color: #C2410C;
    color: #FDBA74;
}

/* Elevated Risk - Yellow-Orange (P75-P95) */
.cri-badge-moderate_high {
    background-color: #FEF3C7;
    color: #B45309;
}

.dark .cri-badge-moderate_high {
    background-color: #B45309;
    color: #FCD34D;
}

/* Moderate Risk - Cyan (P25-P75) - Balanced positioning */
.cri-badge-moderate {
    background-color: #CFFAFE;
    color: #155E75;
}

.dark .cri-badge-moderate {
    background-color: #155E75;
    color: #67E8F9;
}

/* Low Risk - Blue (P10-P25) */
.cri-badge-low {
    background-color: #DBEAFE;
    color: #1E40AF;
}

.dark .cri-badge-low {
    background-color: #1E40AF;
    color: #93C5FD;
}

/* Extreme Low Risk - Emerald (below P10) */
.cri-badge-extreme_low {
    background-color: #D1FAE5;
    color: #047857;
}

.dark .cri-badge-extreme_low {
    background-color: #047857;
    color: #6EE7B7;
}

/* Unknown Risk - Gray (fallback) */
.cri-badge-unknown {
    background-color: #E5E7EB;
    color: #374151;
}

.dark .cri-badge-unknown {
    background-color: #374151;
    color: #D1D5DB;
}

/* ========================================
 * CRI Card Styles (Large Card Variant)
 * Used by: CFSS Analysis Page, Admin Dashboard
 *
 * SIMPLIFIED COLOR SYSTEM:
 * - 7 base colors in :root (lines 47-53)
 * - All gradients/borders/text derive via color-mix()
 * - Change theme: edit 7 base colors, everything auto-updates
 *
 * THEME CHANGE EXAMPLE:
 * Switch to purple theme: change --cri-extreme-high from #DC2626 to #9333EA
 * All gradients, borders, and text colors recalculate automatically
 *
 * COLOR DERIVATION FORMULA:
 * Light mode:
 *   - Background gradient: 10% → 5% color mixed with white
 *   - Border: 40% color mixed with white
 *   - Text: 90% color mixed with black
 * Dark mode:
 *   - Background gradient: 30% → 20% color with transparency
 *   - Border: 15% color with transparency
 *   - Text: 40% color mixed with white
 *
 * TEXT COLOR INHERITANCE:
 * Parent .cri-card-* sets color property
 * Child elements (<p>, <span>) inherit automatically
 * No explicit color classes needed in HTML
 * ======================================== */

/* Base CRI card styling - Sets text color for all child elements via inheritance */
.cri-card {
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-width: 1px;
    border-style: solid;
}

/* Extreme High Risk Card - All colors derive from --cri-extreme-high */
.cri-card-extreme_high {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cri-extreme-high) 10%, white),
        color-mix(in srgb, var(--cri-extreme-high) 5%, white)
    );
    border-color: color-mix(in srgb, var(--cri-extreme-high) 40%, white);
    color: color-mix(in srgb, var(--cri-extreme-high) 90%, black);
}

.dark .cri-card-extreme_high {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cri-extreme-high) 30%, transparent),
        color-mix(in srgb, var(--cri-extreme-high) 20%, transparent)
    );
    border-color: color-mix(in srgb, var(--cri-extreme-high) 15%, transparent);
    color: color-mix(in srgb, var(--cri-extreme-high) 40%, white);
}

/* High Risk Card - All colors derive from --cri-high */
.cri-card-high {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cri-high) 10%, white),
        color-mix(in srgb, var(--cri-high) 5%, white)
    );
    border-color: color-mix(in srgb, var(--cri-high) 40%, white);
    color: color-mix(in srgb, var(--cri-high) 90%, black);
}

.dark .cri-card-high {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cri-high) 30%, transparent),
        color-mix(in srgb, var(--cri-high) 20%, transparent)
    );
    border-color: color-mix(in srgb, var(--cri-high) 15%, transparent);
    color: color-mix(in srgb, var(--cri-high) 40%, white);
}

/* Elevated Risk Card - All colors derive from --cri-moderate-high */
.cri-card-moderate_high {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cri-moderate-high) 10%, white),
        color-mix(in srgb, var(--cri-moderate-high) 5%, white)
    );
    border-color: color-mix(in srgb, var(--cri-moderate-high) 40%, white);
    color: color-mix(in srgb, var(--cri-moderate-high) 90%, black);
}

.dark .cri-card-moderate_high {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cri-moderate-high) 30%, transparent),
        color-mix(in srgb, var(--cri-moderate-high) 20%, transparent)
    );
    border-color: color-mix(in srgb, var(--cri-moderate-high) 15%, transparent);
    color: color-mix(in srgb, var(--cri-moderate-high) 40%, white);
}

/* Moderate Risk Card - All colors derive from --cri-moderate */
.cri-card-moderate {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cri-moderate) 10%, white),
        color-mix(in srgb, var(--cri-moderate) 5%, white)
    );
    border-color: color-mix(in srgb, var(--cri-moderate) 40%, white);
    color: color-mix(in srgb, var(--cri-moderate) 90%, black);
}

.dark .cri-card-moderate {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cri-moderate) 30%, transparent),
        color-mix(in srgb, var(--cri-moderate) 20%, transparent)
    );
    border-color: color-mix(in srgb, var(--cri-moderate) 15%, transparent);
    color: color-mix(in srgb, var(--cri-moderate) 40%, white);
}

/* Low Risk Card - All colors derive from --cri-low */
.cri-card-low {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cri-low) 10%, white),
        color-mix(in srgb, var(--cri-low) 5%, white)
    );
    border-color: color-mix(in srgb, var(--cri-low) 40%, white);
    color: color-mix(in srgb, var(--cri-low) 90%, black);
}

.dark .cri-card-low {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cri-low) 30%, transparent),
        color-mix(in srgb, var(--cri-low) 20%, transparent)
    );
    border-color: color-mix(in srgb, var(--cri-low) 15%, transparent);
    color: color-mix(in srgb, var(--cri-low) 40%, white);
}

/* Extreme Low Risk Card - All colors derive from --cri-extreme-low */
.cri-card-extreme_low {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cri-extreme-low) 10%, white),
        color-mix(in srgb, var(--cri-extreme-low) 5%, white)
    );
    border-color: color-mix(in srgb, var(--cri-extreme-low) 40%, white);
    color: color-mix(in srgb, var(--cri-extreme-low) 90%, black);
}

.dark .cri-card-extreme_low {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cri-extreme-low) 30%, transparent),
        color-mix(in srgb, var(--cri-extreme-low) 20%, transparent)
    );
    border-color: color-mix(in srgb, var(--cri-extreme-low) 15%, transparent);
    color: color-mix(in srgb, var(--cri-extreme-low) 40%, white);
}

/* Unknown Risk Card - All colors derive from --cri-unknown */
.cri-card-unknown {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cri-unknown) 10%, white),
        color-mix(in srgb, var(--cri-unknown) 5%, white)
    );
    border-color: color-mix(in srgb, var(--cri-unknown) 40%, white);
    color: color-mix(in srgb, var(--cri-unknown) 90%, black);
}

.dark .cri-card-unknown {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cri-unknown) 30%, transparent),
        color-mix(in srgb, var(--cri-unknown) 20%, transparent)
    );
    border-color: color-mix(in srgb, var(--cri-unknown) 15%, transparent);
    color: color-mix(in srgb, var(--cri-unknown) 40%, white);
}

/* Safari < 16.4 fallback (pre-March 2023) - Hardcoded colors for older browsers */
@supports not (background-color: color-mix(in srgb, red 10%, white)) {
    .cri-card-extreme_high {
        background: linear-gradient(to bottom right, #FEE2E2, #FECACA);
        border-color: #FCA5A5;
        color: #991B1B;
    }
    .dark .cri-card-extreme_high {
        background: linear-gradient(to bottom right, rgba(153, 27, 27, 0.3), rgba(153, 27, 27, 0.2));
        border-color: #7F1D1D;
        color: #FCA5A5;
    }

    .cri-card-high {
        background: linear-gradient(to bottom right, #FED7AA, #FDBA74);
        border-color: #FB923C;
        color: #C2410C;
    }
    .dark .cri-card-high {
        background: linear-gradient(to bottom right, rgba(194, 65, 12, 0.3), rgba(194, 65, 12, 0.2));
        border-color: #9A3412;
        color: #FDBA74;
    }

    .cri-card-moderate_high {
        background: linear-gradient(to bottom right, #FEF3C7, #FEF08A);
        border-color: #FDE047;
        color: #B45309;
    }
    .dark .cri-card-moderate_high {
        background: linear-gradient(to bottom right, rgba(180, 83, 9, 0.3), rgba(180, 83, 9, 0.2));
        border-color: #854D0E;
        color: #FCD34D;
    }

    .cri-card-moderate {
        background: linear-gradient(to bottom right, #CFFAFE, #A5F3FC);
        border-color: #67E8F9;
        color: #155E75;
    }
    .dark .cri-card-moderate {
        background: linear-gradient(to bottom right, rgba(21, 94, 117, 0.3), rgba(21, 94, 117, 0.2));
        border-color: #164E63;
        color: #67E8F9;
    }

    .cri-card-low {
        background: linear-gradient(to bottom right, #DBEAFE, #BFDBFE);
        border-color: #93C5FD;
        color: #1E40AF;
    }
    .dark .cri-card-low {
        background: linear-gradient(to bottom right, rgba(30, 64, 175, 0.3), rgba(30, 64, 175, 0.2));
        border-color: #1E3A8A;
        color: #93C5FD;
    }

    .cri-card-extreme_low {
        background: linear-gradient(to bottom right, #D1FAE5, #A7F3D0);
        border-color: #6EE7B7;
        color: #047857;
    }
    .dark .cri-card-extreme_low {
        background: linear-gradient(to bottom right, rgba(4, 120, 87, 0.3), rgba(4, 120, 87, 0.2));
        border-color: #065F46;
        color: #6EE7B7;
    }

    .cri-card-unknown {
        background: linear-gradient(to bottom right, #F3F4F6, #E5E7EB);
        border-color: #D1D5DB;
        color: #374151;
    }
    .dark .cri-card-unknown {
        background: linear-gradient(to bottom right, rgba(55, 65, 81, 0.3), rgba(55, 65, 81, 0.2));
        border-color: #4B5563;
        color: #D1D5DB;
    }
}

/* ========================================
 * CFSS Zone Card Styles (7-Level Sentiment Classification)
 * Used by: Admin Dashboard
 *
 * SIMPLIFIED ORANGE-THEMED COLOR SYSTEM:
 * - 7 base colors in colors-generated.css (--cfss-extreme-fear through --cfss-extreme-greed)
 * - All gradients/borders/text derive via color-mix()
 * - Change theme: edit base colors in src/utils/colors.py, everything auto-updates
 *
 * COLOR DERIVATION FORMULA (mirrors CRI pattern):
 * Light mode:
 *   - Background gradient: 10% → 5% color mixed with white
 *   - Border: 40% color mixed with white
 *   - Text: 90% color mixed with black
 * Dark mode:
 *   - Background gradient: 30% → 20% color with transparency
 *   - Border: 15% color with transparency
 *   - Text: 40% color mixed with white
 *
 * TEXT COLOR INHERITANCE:
 * Parent .cfss-zone-card-* sets color property
 * Child elements (<p>, <span>) inherit automatically
 * No explicit color classes needed in HTML
 * ======================================== */

/* Base CFSS zone card styling - Sets text color for all child elements via inheritance */
.cfss-zone-card {
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-width: 1px;
    border-style: solid;
}

/* Extreme Fear Zone Card - All colors derive from --cfss-extreme-fear */
.cfss-zone-card-extreme-fear {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cfss-extreme-fear) 10%, white),
        color-mix(in srgb, var(--cfss-extreme-fear) 5%, white)
    );
    border-color: color-mix(in srgb, var(--cfss-extreme-fear) 40%, white);
    color: color-mix(in srgb, var(--cfss-extreme-fear) 90%, black);
}

.dark .cfss-zone-card-extreme-fear {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cfss-extreme-fear) 30%, transparent),
        color-mix(in srgb, var(--cfss-extreme-fear) 20%, transparent)
    );
    border-color: color-mix(in srgb, var(--cfss-extreme-fear) 15%, transparent);
    color: color-mix(in srgb, var(--cfss-extreme-fear) 40%, white);
}

/* Fear Zone Card - All colors derive from --cfss-fear */
.cfss-zone-card-fear {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cfss-fear) 10%, white),
        color-mix(in srgb, var(--cfss-fear) 5%, white)
    );
    border-color: color-mix(in srgb, var(--cfss-fear) 40%, white);
    color: color-mix(in srgb, var(--cfss-fear) 90%, black);
}

.dark .cfss-zone-card-fear {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cfss-fear) 30%, transparent),
        color-mix(in srgb, var(--cfss-fear) 20%, transparent)
    );
    border-color: color-mix(in srgb, var(--cfss-fear) 15%, transparent);
    color: color-mix(in srgb, var(--cfss-fear) 40%, white);
}

/* Bearish Zone Card - All colors derive from --cfss-bearish */
.cfss-zone-card-bearish {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cfss-bearish) 10%, white),
        color-mix(in srgb, var(--cfss-bearish) 5%, white)
    );
    border-color: color-mix(in srgb, var(--cfss-bearish) 40%, white);
    color: color-mix(in srgb, var(--cfss-bearish) 90%, black);
}

.dark .cfss-zone-card-bearish {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cfss-bearish) 30%, transparent),
        color-mix(in srgb, var(--cfss-bearish) 20%, transparent)
    );
    border-color: color-mix(in srgb, var(--cfss-bearish) 15%, transparent);
    color: color-mix(in srgb, var(--cfss-bearish) 40%, white);
}

/* Neutral Zone Card - All colors derive from --cfss-neutral */
.cfss-zone-card-neutral {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cfss-neutral) 10%, white),
        color-mix(in srgb, var(--cfss-neutral) 5%, white)
    );
    border-color: color-mix(in srgb, var(--cfss-neutral) 40%, white);
    color: color-mix(in srgb, var(--cfss-neutral) 90%, black);
}

.dark .cfss-zone-card-neutral {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cfss-neutral) 30%, transparent),
        color-mix(in srgb, var(--cfss-neutral) 20%, transparent)
    );
    border-color: color-mix(in srgb, var(--cfss-neutral) 15%, transparent);
    color: color-mix(in srgb, var(--cfss-neutral) 40%, white);
}

/* Bullish Zone Card - All colors derive from --cfss-bullish */
.cfss-zone-card-bullish {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cfss-bullish) 10%, white),
        color-mix(in srgb, var(--cfss-bullish) 5%, white)
    );
    border-color: color-mix(in srgb, var(--cfss-bullish) 40%, white);
    color: color-mix(in srgb, var(--cfss-bullish) 90%, black);
}

.dark .cfss-zone-card-bullish {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cfss-bullish) 30%, transparent),
        color-mix(in srgb, var(--cfss-bullish) 20%, transparent)
    );
    border-color: color-mix(in srgb, var(--cfss-bullish) 15%, transparent);
    color: color-mix(in srgb, var(--cfss-bullish) 40%, white);
}

/* Overheated Zone Card - All colors derive from --cfss-overheated */
.cfss-zone-card-overheated {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cfss-overheated) 10%, white),
        color-mix(in srgb, var(--cfss-overheated) 5%, white)
    );
    border-color: color-mix(in srgb, var(--cfss-overheated) 40%, white);
    color: color-mix(in srgb, var(--cfss-overheated) 90%, black);
}

.dark .cfss-zone-card-overheated {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cfss-overheated) 30%, transparent),
        color-mix(in srgb, var(--cfss-overheated) 20%, transparent)
    );
    border-color: color-mix(in srgb, var(--cfss-overheated) 15%, transparent);
    color: color-mix(in srgb, var(--cfss-overheated) 40%, white);
}

/* Extreme Greed Zone Card - All colors derive from --cfss-extreme-greed */
.cfss-zone-card-extreme-greed {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cfss-extreme-greed) 10%, white),
        color-mix(in srgb, var(--cfss-extreme-greed) 5%, white)
    );
    border-color: color-mix(in srgb, var(--cfss-extreme-greed) 40%, white);
    color: color-mix(in srgb, var(--cfss-extreme-greed) 90%, black);
}

.dark .cfss-zone-card-extreme-greed {
    background: linear-gradient(
        to bottom right,
        color-mix(in srgb, var(--cfss-extreme-greed) 30%, transparent),
        color-mix(in srgb, var(--cfss-extreme-greed) 20%, transparent)
    );
    border-color: color-mix(in srgb, var(--cfss-extreme-greed) 15%, transparent);
    color: color-mix(in srgb, var(--cfss-extreme-greed) 40%, white);
}

/* Safari < 16.4 fallback (pre-March 2023) - Hardcoded colors for older browsers */
@supports not (background-color: color-mix(in srgb, red 10%, white)) {
    .cfss-zone-card-extreme-fear {
        background: linear-gradient(to bottom right, #FEEAEA, #FED5D5);
        border-color: #FCA5A5;
        color: #991B1B;
    }
    .dark .cfss-zone-card-extreme-fear {
        background: linear-gradient(to bottom right, rgba(249, 65, 68, 0.3), rgba(249, 65, 68, 0.2));
        border-color: #7F1D1D;
        color: #FCA5A5;
    }

    .cfss-zone-card-fear {
        background: linear-gradient(to bottom right, #FED7AA, #FDBA74);
        border-color: #FB923C;
        color: #C2410C;
    }
    .dark .cfss-zone-card-fear {
        background: linear-gradient(to bottom right, rgba(243, 114, 44, 0.3), rgba(243, 114, 44, 0.2));
        border-color: #9A3412;
        color: #FDBA74;
    }

    .cfss-zone-card-bearish {
        background: linear-gradient(to bottom right, #FFEDD5, #FED7AA);
        border-color: #FDBA74;
        color: #B45309;
    }
    .dark .cfss-zone-card-bearish {
        background: linear-gradient(to bottom right, rgba(249, 132, 74, 0.3), rgba(249, 132, 74, 0.2));
        border-color: #854D0E;
        color: #FCD34D;
    }

    .cfss-zone-card-neutral {
        background: linear-gradient(to bottom right, #DBEAFE, #BFDBFE);
        border-color: #93C5FD;
        color: #1E40AF;
    }
    .dark .cfss-zone-card-neutral {
        background: linear-gradient(to bottom right, rgba(39, 125, 161, 0.3), rgba(39, 125, 161, 0.2));
        border-color: #1E3A8A;
        color: #93C5FD;
    }

    .cfss-zone-card-bullish {
        background: linear-gradient(to bottom right, #D1FAE5, #A7F3D0);
        border-color: #6EE7B7;
        color: #047857;
    }
    .dark .cfss-zone-card-bullish {
        background: linear-gradient(to bottom right, rgba(67, 170, 139, 0.3), rgba(67, 170, 139, 0.2));
        border-color: #065F46;
        color: #6EE7B7;
    }

    .cfss-zone-card-overheated {
        background: linear-gradient(to bottom right, #ECFCCB, #D9F99D);
        border-color: #BEF264;
        color: #3F6212;
    }
    .dark .cfss-zone-card-overheated {
        background: linear-gradient(to bottom right, rgba(144, 190, 109, 0.3), rgba(144, 190, 109, 0.2));
        border-color: #4D7C0F;
        color: #BEF264;
    }

    .cfss-zone-card-extreme-greed {
        background: linear-gradient(to bottom right, #F0FDF4, #DCFCE7);
        border-color: #86EFAC;
        color: #166534;
    }
    .dark .cfss-zone-card-extreme-greed {
        background: linear-gradient(to bottom right, rgba(124, 252, 0, 0.3), rgba(124, 252, 0, 0.2));
        border-color: #14532D;
        color: #86EFAC;
    }
}

/* CFSS Footer */
.cfss-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 12px;
    opacity: 0.85;
    position: relative;
    z-index: 1;
}

.cfss-timestamp {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cfss-view-more {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.cfss-view-more:hover {
    opacity: 0.8;
}

/* Footer Left Group (timestamp + help link stacked) */
.cfss-footer-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Help Link in Footer */
.cfss-help-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color 0.2s ease;
    /* text-decoration: underline;
    text-underline-offset: 2px; */
}

.cfss-help-link:hover {
    color: rgba(255, 255, 255, 0.9);
}

.cfss-help-link svg {
    flex-shrink: 0;
}

/* Loading State */
.cfss-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 16px;
}

.cfss-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Error State */
.cfss-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 12px;
    text-align: center;
}

.cfss-error-icon {
    font-size: 48px;
    opacity: 0.6;
}

.cfss-error-message {
    font-size: 14px;
    opacity: 0.9;
}

.cfss-error-retry {
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.cfss-error-retry:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cfss-widget.loaded {
    animation: fadeIn 0.5s ease;
}

/* Pulse Animation for Updates */
@keyframes cfss-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.cfss-updating {
    animation: cfss-pulse 1.5s ease-in-out infinite;
}

/* ============================================================================
   HALF-CIRCLE GAUGE STYLES
   CoinMarketCap-style sentiment gauge with 7 zones
   ============================================================================ */

/* Gauge wrapper */
.cfss-gauge-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* SVG gauge styling */
.cfss-gauge-svg {
    width: 100%;
    height: auto;
    max-width: 380px;
}

/* Needle animation */
#gauge-needle-group {
    transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Arc path hover effects */
#gauge-background path {
    transition: opacity 0.3s ease, stroke-width 0.2s ease;
}

#gauge-background path:hover {
    opacity: 1 !important;
    cursor: pointer;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .cfss-gauge-wrapper {
        max-width: 100%;
    }

    .cfss-gauge-svg {
        max-width: 240px;
    }
}

/* ============================================================================
   SENTIMENT ZONE UTILITY CLASSES
   Reusable classes for sentiment zone documentation cards and badges
   ============================================================================ */

/* Base zone card styling */
.cfss-zone-card {
    padding: 0.75rem;  /* 12px */
    border-radius: 0.5rem;  /* 8px */
    border-width: 1px;
    border-style: solid;
}

/* Zone-specific background and border colors using CSS custom properties */
.cfss-zone-extreme-fear {
    background-color: color-mix(in srgb, var(--cfss-extreme-fear) var(--cfss-zone-bg-opacity, 10%), transparent);
    border-color: color-mix(in srgb, var(--cfss-extreme-fear) var(--cfss-zone-border-opacity, 30%), transparent);
}

.cfss-zone-fear {
    background-color: color-mix(in srgb, var(--cfss-fear) var(--cfss-zone-bg-opacity, 10%), transparent);
    border-color: color-mix(in srgb, var(--cfss-fear) var(--cfss-zone-border-opacity, 30%), transparent);
}

.cfss-zone-bearish {
    background-color: color-mix(in srgb, var(--cfss-bearish) var(--cfss-zone-bg-opacity, 10%), transparent);
    border-color: color-mix(in srgb, var(--cfss-bearish) var(--cfss-zone-border-opacity, 30%), transparent);
}

.cfss-zone-neutral {
    background-color: color-mix(in srgb, var(--cfss-neutral) var(--cfss-zone-bg-opacity, 10%), transparent);
    border-color: color-mix(in srgb, var(--cfss-neutral) var(--cfss-zone-border-opacity, 30%), transparent);
}

.cfss-zone-bullish {
    background-color: color-mix(in srgb, var(--cfss-bullish) var(--cfss-zone-bg-opacity, 10%), transparent);
    border-color: color-mix(in srgb, var(--cfss-bullish) var(--cfss-zone-border-opacity, 30%), transparent);
}

.cfss-zone-overheated {
    background-color: color-mix(in srgb, var(--cfss-overheated) var(--cfss-zone-bg-opacity, 10%), transparent);
    border-color: color-mix(in srgb, var(--cfss-overheated) var(--cfss-zone-border-opacity, 30%), transparent);
}

.cfss-zone-extreme-greed {
    background-color: color-mix(in srgb, var(--cfss-extreme-greed) var(--cfss-zone-bg-opacity, 10%), transparent);
    border-color: color-mix(in srgb, var(--cfss-extreme-greed) var(--cfss-zone-border-opacity, 30%), transparent);
}

/* Zone title/label colors */
.cfss-zone-text-extreme-fear { color: var(--cfss-extreme-fear); }
.cfss-zone-text-fear { color: var(--cfss-fear); }
.cfss-zone-text-bearish { color: var(--cfss-bearish); }
.cfss-zone-text-neutral { color: var(--cfss-neutral); }
.cfss-zone-text-bullish { color: var(--cfss-bullish); }
.cfss-zone-text-overheated { color: var(--cfss-overheated); }
.cfss-zone-text-extreme-greed { color: var(--cfss-extreme-greed); }

/* Fallback for older browsers without color-mix() support */
@supports not (background-color: color-mix(in srgb, red 10%, transparent)) {
    .cfss-zone-extreme-fear { background-color: rgba(249, 65, 68, 0.1); border-color: rgba(249, 65, 68, 0.3); }
    .cfss-zone-fear { background-color: rgba(243, 114, 44, 0.1); border-color: rgba(243, 114, 44, 0.3); }
    .cfss-zone-bearish { background-color: rgba(249, 132, 74, 0.1); border-color: rgba(249, 132, 74, 0.3); }
    .cfss-zone-neutral { background-color: rgba(39, 125, 161, 0.1); border-color: rgba(39, 125, 161, 0.3); }
    .cfss-zone-bullish { background-color: rgba(67, 170, 139, 0.1); border-color: rgba(67, 170, 139, 0.3); }
    .cfss-zone-overheated { background-color: rgba(144, 190, 109, 0.1); border-color: rgba(144, 190, 109, 0.3); }
    .cfss-zone-extreme-greed { background-color: rgba(124, 252, 0, 0.1); border-color: rgba(124, 252, 0, 0.3); }
}