/* --- Core Styles --- */
        :root {
            --bg-1: #0b1220;
            --card: #0f1a2f;
            --muted: #97a7c2;
            --text: #e6eefc;
            --line: #1e2a42;
            --accent: #7c5cff;
            --accent-2: #22d3ee;
            --accent-green: #34d399;
            --good: #34d399;
            --warn: #fbbf24;
            --bad: #f43f5e;
            --chip-bg: #14203a;
            --shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.45);
            --radius: 16px;
            --ring: conic-gradient(var(--accent), var(--accent-2) 35%, #23c55e 65%, #22d3ee 100%);
        }

        /* ===== START: ENHANCED NEWS CARD STYLES ===== */
        /* Enhanced News Analysis Card - News-focused intelligence layer */

        .enhanced-news-title {
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        .enhanced-news-subtitle {
            font-size: 0.75rem;
            color: #999;
            margin-bottom: 1rem;
        }

        .card-section-header {
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 0.4rem;
            color: var(--accent-2); /* Default to blue accent */
        }

        .card-section-header.green {
            color: var(--accent-green);
        }

        .card-section-content {
            background: rgba(30, 30, 40, 0.6);
            padding: 0.5rem;
            border-radius: 4px;
            border-left: 3px solid var(--accent-2); /* Default to blue accent */
            margin-bottom: 0.75rem;
        }

        .card-section-content.green-border {
            background: rgba(0, 230, 118, 0.1);
            border: 1px solid rgba(0, 230, 118, 0.3);
            border-left: 3px solid var(--accent-green);
        }

        .flip-hint {
            text-align: center;
            padding: 0.4rem;
            background: rgba(34, 211, 238, 0.1);
            border-radius: 4px;
            border: 1px dashed #22d3ee;
            font-size: 0.7rem;
            color: #22d3ee;
        }

        /* Scrollable content for Enhanced News Card */
        .enhanced-news-scrollable-content {
            max-height: 400px; /* Reasonable height for content */
            overflow-y: auto;
            overflow-x: hidden; /* Prevent horizontal scroll */
            padding-right: 8px;
            padding-bottom: 4px; /* Minimal padding for tight spacing like Options Readiness */
            box-sizing: border-box; /* Ensure padding is included in height calculation */
        }

        /* Custom Scrollbar for Enhanced News Card (Matching Options Readiness subtle tone) */
        .enhanced-news-scrollable-content::-webkit-scrollbar {
            width: 8px; /* Width of the scrollbar */
        }

        .enhanced-news-scrollable-content::-webkit-scrollbar-track {
            background: transparent; /* Transparent track */
        }

        .enhanced-news-scrollable-content::-webkit-scrollbar-thumb {
            background-color: rgba(97, 167, 194, 0.4); /* Subtle desaturated grey/blue matching Options Readiness */
            border-radius: 4px; /* Rounded corners */
            border: 2px solid transparent; /* Transparent border for spacing */
        }

        .enhanced-news-scrollable-content::-webkit-scrollbar-thumb:hover {
            background-color: rgba(97, 167, 194, 0.6); /* Slightly more visible on hover */
        }

        /* ===== START: ENHANCED NEWS SIDE B - HEADLINES STYLES ===== */
        /* Latest Headlines styling for Enhanced News Card back side */

        .headlines-header {
            text-align: center;
            padding: 1rem;
            background: linear-gradient(135deg, #3b82f6, #6b7280);
            border-bottom: 1px solid #1e2a42;
            margin-bottom: 0;
        }

        .headlines-header h3 {
            font-size: 0.9rem;
            font-weight: 700;
            margin: 0;
            color: #e6eefc;
        }

        .headlines-subtitle {
            font-size: 0.75rem;
            color: #97a7c2;
            margin: 0.25rem 0 0 0;
        }

        .headlines-content {
            padding: 1rem;
            max-height: 400px;
            overflow-y: auto;
            padding-right: 8px;
            padding-bottom: 4px;
            box-sizing: border-box;
        }

        /* Custom scrollbar for headlines content */
        .headlines-content::-webkit-scrollbar {
            width: 8px;
        }

        .headlines-content::-webkit-scrollbar-track {
            background: transparent;
        }

        .headlines-content::-webkit-scrollbar-thumb {
            background-color: rgba(97, 167, 194, 0.4);
            border-radius: 4px;
            border: 2px solid transparent;
        }

        .headlines-content::-webkit-scrollbar-thumb:hover {
            background-color: rgba(97, 167, 194, 0.6);
        }

        .news-story {
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: rgba(30, 30, 40, 0.6);
            border-radius: 8px;
            border-left: 3px solid #22d3ee;
            transition: all 0.3s ease;
        }

        .news-story:hover {
            background: rgba(30, 30, 40, 0.8);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(34, 211, 238, 0.1);
        }

        .story-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.75rem;
        }

        .story-source {
            font-size: 0.65rem;
            color: #97a7c2;
            background: rgba(97, 167, 194, 0.1);
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .story-time {
            font-size: 0.65rem;
            color: #97a7c2;
        }

        .story-headline {
            font-size: 0.85rem;
            font-weight: 600;
            line-height: 1.4;
            color: #e6eefc;
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .story-headline:hover {
            color: #22d3ee;
        }

        .story-summary {
            font-size: 0.7rem;
            line-height: 1.5;
            color: #97a7c2;
            margin-bottom: 0.75rem;
        }

        .story-impact {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.65rem;
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-weight: 600;
        }

        .impact-positive {
            background: rgba(52, 211, 153, 0.1);
            color: #34d399;
            border: 1px solid rgba(52, 211, 153, 0.3);
        }

        .impact-negative {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .impact-neutral {
            background: rgba(251, 191, 36, 0.1);
            color: #fbbf24;
            border: 1px solid rgba(251, 191, 36, 0.3);
        }

        .impact-icon {
            font-size: 0.7rem;
        }

        /* ===== START: REAL DATA QUALITY INDICATORS ===== */
        /* These styles show users the source and reliability of their data */
        
        .data-quality-indicator {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            font-weight: 600;
            color: var(--accent-2);
            background: rgba(34, 211, 238, 0.1);
            border: 1px solid rgba(34, 211, 238, 0.3);
            border-radius: 12px;
            padding: 2px 8px;
            margin-top: 4px;
            white-space: nowrap;
        }
        
        .data-quality-warning {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            font-weight: 600;
            color: var(--warn);
            background: rgba(251, 191, 36, 0.1);
            border: 1px solid rgba(251, 191, 36, 0.3);
            border-radius: 12px;
            padding: 2px 8px;
            margin-top: 4px;
            white-space: nowrap;
        }
        
        .data-quality-error {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            font-weight: 600;
            color: var(--bad);
            background: rgba(244, 67, 94, 0.1);
            border: 1px solid rgba(244, 67, 94, 0.3);
            border-radius: 12px;
            padding: 2px 8px;
            margin-top: 4px;
            white-space: nowrap;
        }
        
        .data-source-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--muted);
            background: rgba(151, 167, 194, 0.1);
            border: 1px solid rgba(151, 167, 194, 0.2);
            border-radius: 8px;
            padding: 2px 6px;
        }
        
        .real-data-indicator {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 600;
            color: var(--good);
            background: rgba(52, 211, 153, 0.1);
            border: 1px solid rgba(52, 211, 153, 0.3);
            border-radius: 10px;
            padding: 3px 8px;
            margin-left: 8px;
        }
        
        .real-data-indicator::before {
            content: "✓";
            font-weight: bold;
            color: var(--good);
        }
        
        .demo-data-warning {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 600;
            color: var(--warn);
            background: rgba(251, 191, 36, 0.1);
            border: 1px solid rgba(251, 191, 36, 0.3);
            border-radius: 10px;
            padding: 3px 8px;
            margin-left: 8px;
        }
        
        .demo-data-warning::before {
            content: "⚠";
            font-weight: bold;
            color: var(--warn);
        }
        
        /* Data quality tooltips */
        .data-quality-tooltip {
            position: relative;
            cursor: help;
        }
        
        .data-quality-tooltip:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: var(--card);
            color: var(--text);
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
            white-space: nowrap;
            z-index: 1000;
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }
        
        /* ===== END: REAL DATA QUALITY INDICATORS ===== */

        html, body {
            height: 100%;
        }

        body {
            margin: 0;
            background: radial-gradient(1200px 800px at -20% -10%, rgba(124,92,255,.12), transparent 60%), radial-gradient(1000px 700px at 120% 10%, rgba(34,211,238,.10), transparent 60%), linear-gradient(0deg, var(--bg-1), var(--bg-1));
            color: var(--text);
            font: 500 14px/1.4 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
            letter-spacing: .2px;
        }

        .container {
            max-width: 1220px;
            margin: 0 auto;
            padding: 24px;
        }

        /* Mobile container padding */
        @media (max-width: 768px) {
            .container {
                padding: 12px;
            }
        }

        header {
            position: sticky;
            top: 0;
            z-index: 60;
            backdrop-filter: saturate(140%) blur(10px);
            background: linear-gradient(180deg, rgba(15,23,42,.8), rgba(15,23,42,.55));
            border-bottom: 1px solid var(--line);
        }

        .topbar {
            display: flex;
            align-items: center;
            gap: 16px;
            justify-content: space-between;
            padding: 14px 24px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 800;
            letter-spacing: .4px;
        }

        .flare-icon {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #fff, #ffedd5 24%, #fb92c0 60%, transparent 65%), conic-gradient(from 200deg, #ef4444, #f97316 40%, #f59e0b 70%, #fda4af);
            box-shadow: 0 0 14px rgba(251,146,60,.55);
        }

        .brand span {
            font-size: 18px;
        }

        .brand em {
            font-style: normal;
            color: var(--accent-2);
        }

        .main-nav ul {
            display: flex;
            gap: 24px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .main-nav a {
            color: var(--muted);
            font-weight: 600;
            text-decoration: none;
            transition: color 0.2s ease;
        }

            .main-nav a:hover {
                color: var(--text);
            }


        .user-meta {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logout-btn {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.3);
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .logout-btn:hover {
            background: rgba(239, 68, 68, 0.2);
            border-color: rgba(239, 68, 68, 0.5);
        }

        .pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(20,32,58,.6);
        }

        .search {
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 10px 12px;
            box-shadow: var(--shadow);
            position: relative;
        }

        .search-inner {
            display: flex;
            width: 100%;
            gap: 12px;
            align-items: center;
        }

        /* Mobile search layout */
        @media (max-width: 768px) {
            .search {
                padding: 8px;
            }
            
            .search-inner {
                gap: 8px;
                flex-wrap: nowrap;
                overflow: visible;
            }
        }

        /* Extra tight on small screens */
        @media (max-width: 480px) {
            .search {
                padding: 6px;
            }
            
            .search-inner {
                gap: 6px;
            }
        }

        .search input {
            all: unset;
            flex: 1;
            background: linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
            padding: 12px 14px;
            border: 1px solid var(--line);
            border-radius: 12px;
            color: var(--text);
            min-width: 0;
        }

        /* Mobile input shrinking */
        @media (max-width: 480px) {
            .search input {
                flex: 1 1 auto;
                min-width: 60px;
            }
        }

        .btn {
            all: unset;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            padding: 12px 16px;
            border-radius: 12px;
            background: linear-gradient(90deg, var(--accent), #23c55e);
            box-shadow: 0 8px 24px rgba(124,92,255,.32);
            font-weight: 700;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            min-width: 260px;
        }

        /* Mobile responsive button */
        @media (max-width: 768px) {
            .btn {
                min-width: auto !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
        }

        /* Extra specific for iOS portrait */
        @media (max-width: 480px) {
            .btn {
                min-width: auto !important;
                width: calc(100% - 0px) !important;
                max-width: 100% !important;
                flex-shrink: 1 !important;
            }
        }

        /* Subtle glow pulse for analyzing state */
        @keyframes pulse-glow {
            0%, 100% { 
                box-shadow: 0 8px 24px rgba(124,92,255,.32);
            }
            50% { 
                box-shadow: 0 8px 32px rgba(124,92,255,.55), 0 0 20px rgba(124,92,255,.25);
            }
        }

        .btn:disabled {
            animation: pulse-glow 2.4s ease-in-out infinite;
        }

        #analyzeBtnText {
            transition: opacity 0.15s ease-in-out;
            display: inline-block;
            min-width: 220px;
            text-align: center;
        }

        /* Mobile text adjustment */
        @media (max-width: 768px) {
            #analyzeBtnText {
                min-width: auto;
                flex: 1;
                font-size: 14px;
            }
        }

        /* Dual Rings Loader Animation */
        #dual-rings-loader .ring-outer {
            animation: spin-clockwise 1.5s linear infinite;
            transform-origin: center;
        }

        #dual-rings-loader .ring-inner {
            animation: spin-counter 1.2s linear infinite;
            transform-origin: center;
        }

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

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

            .btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 28px rgba(124,92,255,.4);
            }

        .card {
            background: linear-gradient(180deg, rgba(15,26,47,.92), rgba(12,21,39,.92));
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 20px 20px 18px;
            box-shadow: var(--shadow);
            transition: opacity 0.5s ease, transform 0.5s ease;
            display: flex;
            flex-direction: column;
            min-height: 250px;
        }

        /* Enhanced cards: Whale Meter card removes padding (wrapper handles it) */
        #readiness-card-free.card.enhanced {
            padding: 0;
        }

        /* FREE level cards - shorter height */
        .card:not(.enhanced) {
            min-height: 250px;
        }

        /* ENHANCED cards - keep current height */
        .card.enhanced {
            min-height: 400px;
        }

        /* Whale Meter card: explicit height to match other cards exactly */
        #readiness-card-free.card.enhanced {
            height: 503.6px;
        }

            .card > div, .card > ul, .card > p {
                flex-grow: 1;
            }

            .card h3 {
                margin: 0 0 8px;
                font-size: 14px;
                color: #b9cae6;
                font-weight: 700;
                letter-spacing: .5px;
                text-transform: uppercase;
            }

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

        .ticker-card {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
            align-items: flex-start;
            background: none;
            border: none;
            box-shadow: none;
            padding: 0;
            margin-bottom: 6px;
        }

        /* --- START: NEW METER STYLES --- */
        .k-header {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--muted);
            font-weight: 600;
        }

        .color-bar {
            width: 4px;
            height: 16px;
            border-radius: 4px;
            flex-shrink: 0;
        }

            .color-bar.options {
                background-color: var(--accent-2); /* The aqua/cyan color */
            }

            .color-bar.ds {
                background-color: var(--good); /* The green color */
            }

        .meter-stack {
            display: flex;
            align-items: center;
            gap: 16px
        }

        .gauge-wrap {
            display: flex;
            flex-direction: column;
            align-items: center
        }

        #edgeGauge svg {
            width: 220px;
            height: 220px;
            display: block
        }

        .ds-foot {
            font-size: 12px;
            color: var(--muted);
            margin-top: 6px;
            text-align: center
        }

        .meter-stack .context {
            width: 260px;
            max-width: 32ch;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 12px 14px;
            box-shadow: var(--shadow)
        }

            .meter-stack .context .k {
                color: var(--muted);
                font-weight: 600
            }

            .meter-stack .context .v {
                font-weight: 800;
                color: var(--text)
            }
        /* --- END: NEW METER STYLES --- */

        .chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border-radius: 999px;
            background: var(--chip-bg);
            border: 1px solid var(--line);
            font-weight: 600;
        }

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

            ul.clean li {
                padding: 8px 0;
                border-bottom: 1px dashed #1b2742;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

                ul.clean li:last-child {
                    border-bottom: 0;
                }

        .footer {
            opacity: .7;
            margin: 28px 0 12px;
            text-align: center;
            font-size: 12px;
            color: var(--muted);
        }

        .tiny {
            font-size: 12px;
            color: #9fb3c8;
        }

        .hidden {
            display: none !important;
        }
        
        .hidden-until-flare {
            opacity: 0.3;
            pointer-events: none;
            position: relative;
        }
        
        .hidden-until-flare::after {
            content: "Pull the Flare to Reveal";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 600;
            color: var(--muted);
            white-space: nowrap;
            z-index: 1;
        }
        
        .strategy-content {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .strategy-recommendations {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .strategy-item {
            padding: 8px 12px;
            background: rgba(34, 211, 238, 0.1);
            border: 1px solid rgba(34, 211, 238, 0.3);
            border-radius: 8px;
            font-size: 13px;
        }
        
        .strategy-item strong {
            color: var(--accent-2);
            font-weight: 600;
        }

        #error-message {
            background-color: var(--bad);
            color: white;
            padding: 12px 16px;
            border-radius: var(--radius);
            margin-bottom: 14px;
            text-align: center;
            font-weight: 600;
        }

        .preview-card {
            background: linear-gradient(180deg, rgba(15,26,47,.92), rgba(12,21,39,.92));
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 16px;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }

        .btn-flare {
            all: unset;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            padding: 12px 16px;
            border-radius: 12px;
            font-weight: 700;
            transition: transform 0.2s ease, background-color 0.3s ease;
            width: 100%;
            box-sizing: border-box;
            background-color: #c81e1e;
            color: white;
            box-shadow: 0 4px 14px rgba(200, 30, 30, 0.35);
            animation: pulse-flare 2.4s ease-in-out infinite;
        }

        /* Red glow pulse for flare button */
        @keyframes pulse-flare {
            0%, 100% { 
                box-shadow: 0 4px 14px rgba(200, 30, 30, 0.35);
            }
            50% { 
                box-shadow: 0 4px 20px rgba(200, 30, 30, 0.65), 0 0 25px rgba(200, 30, 30, 0.3);
            }
        }

            .btn-flare:hover {
                transform: translateY(-2px);
                background-color: #e02424;
                box-shadow: 0 6px 20px rgba(200, 30, 30, 0.4);
                animation: none;
            }

        .flare-effect {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            background: radial-gradient(circle, rgba(255, 220, 185, 0.8) 0%, rgba(251, 146, 60, 0) 70%);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            pointer-events: none;
        }


        /* --- START: GRID & FLAREAWARE STYLES --- */
        .grid-layout {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 12px;
            align-items: stretch;
        }

        #flareaware-section {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 12px;
        }

        .flareaware-view {
            display: grid;
            grid-template-columns: 1fr 1.1fr;
            gap: 1.5rem;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 24px;
            box-shadow: var(--shadow);
            grid-column: 1 / -1;
        }

        .quadrant-section {
            position: relative;
        }

        .blocked-ribbon {
            position: absolute;
            top: 1rem;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--bad);
            color: white;
            padding: 8px 16px;
            border-radius: 999px;
            font-size: 0.9rem;
            font-weight: 600;
            z-index: 3;
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .indicators-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }

        .indicator-stat {
            background-color: var(--card);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 1rem 1.25rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

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

            .indicator-header .title-group {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                font-size: 0.9rem;
                color: var(--muted);
                font-weight: 600;
            }

            .indicator-header .dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-top: 5px;
            }

        .indicator-body {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            gap: 1rem;
        }

        .data-and-visual {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1.5rem;
        }

        .value-group {
            display: flex;
            flex-direction: column;
            white-space: nowrap;
        }

        .value {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--text);
            line-height: 1.1;
        }

        .context {
            font-size: 0.8rem;
            color: var(--muted);
        }

        .visual-context {
            width: 80px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .flare-insight {
            font-size: 0.8rem;
            color: var(--muted);
            line-height: 1.5;
            padding-top: 0.75rem;
            border-top: 1px solid var(--line);
            margin-top: auto;
            min-height: 3em;
        }

            .flare-insight strong {
                color: var(--accent-2);
            }

        .axis-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
        }

        .axis-labels {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            font-size: 0.7rem;
            color: var(--muted);
            font-weight: 600;
        }

        .axis-track {
            position: relative;
            width: 4px;
            height: 100%;
            background-color: var(--line);
            border-radius: 2px;
            margin: 0 8px;
        }

        .plot-dot {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid var(--bg-1);
            transition: bottom 0.5s ease-out;
        }

            .plot-dot.ivr {
                background-color: var(--accent-2);
                box-shadow: 0 0 10px var(--accent-2);
            }

            .plot-dot.bullish {
                background-color: var(--good);
                box-shadow: 0 0 10px var(--good);
            }

            .plot-dot.bearish {
                background-color: var(--bad);
                box-shadow: 0 0 10px var(--bad);
            }

        .liquidity-bars {
            display: flex;
            gap: 4px;
            align-items: flex-end;
            height: 100%;
        }

        .liquidity-bar {
            width: 12px;
            background-color: var(--line);
            border-radius: 3px;
            transition: all 0.3s ease;
        }

            .liquidity-bar.active {
                background-color: var(--good);
            }

            .liquidity-bar[data-level="1"] {
                height: 33%;
            }

            .liquidity-bar[data-level="2"] {
                height: 66%;
            }

            .liquidity-bar[data-level="3"] {
                height: 100%;
            }

        .earnings-countdown {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 70px;
            height: 60px;
            border: 2px solid var(--good);
            border-radius: 8px;
            position: relative;
        }

            .earnings-countdown.warn {
                border-color: var(--warn);
            }

                .earnings-countdown.warn::before {
                    background-color: var(--warn);
                    box-shadow: 30px 0 0 var(--warn);
                }

            .earnings-countdown::before {
                content: '';
                position: absolute;
                top: -6px;
                left: 12px;
                width: 5px;
                height: 10px;
                border-radius: 2px;
                background-color: var(--good);
                box-shadow: 30px 0 0 var(--good);
            }

        .earnings-month {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
        }

        .earnings-day {
            font-size: 1.8rem;
            font-weight: 700;
            line-height: 1.1;
        }

        .dot.green {
            background-color: var(--good);
        }

        .dot.yellow {
            background-color: var(--warn);
        }

        .dot.red {
            background-color: var(--bad);
        }

        .strategy-hints {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--line);
        }

            .strategy-hints p {
                font-size: 1.1rem;
                font-weight: 700;
                margin: 0 0 0.5rem;
            }

        .intel-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding-top: 4px;
        }

        .intel-chip {
            background: var(--chip-bg);
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 13px;
            color: var(--text);
            font-weight: 600;
            border: 1px solid var(--line);
        }

        .intel-chip .label {
            color: var(--muted);
            font-weight: 500;
            margin-right: 6px;
        }
        
        /* --- ENHANCED IV INTELLIGENCE STYLES --- */
        .iv-intelligence-enhanced {
            background: linear-gradient(135deg, rgba(15,26,47,0.95), rgba(12,21,39,0.95));
            border: 1px solid rgba(34, 211, 238, 0.3);
            box-shadow: 0 4px 20px rgba(34, 211, 238, 0.1);
        }
        
        .enhanced-iv-intelligence {
            padding: 4px 0;
        }
        
        .strategy-primary {
            margin-bottom: 12px;
        }
        
        .strategy-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .strategy-name {
            font-weight: 700;
            color: #C7D6F1;
            font-size: 14px;
        }
        
        .confidence-badge {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .confidence-high {
            background: rgba(34, 211, 153, 0.2);
            color: #22d399;
            border: 1px solid rgba(34, 211, 153, 0.3);
        }
        
        .confidence-medium {
            background: rgba(251, 191, 36, 0.2);
            color: #fbbf24;
            border: 1px solid rgba(251, 191, 36, 0.3);
        }
        
        .confidence-low {
            background: rgba(244, 67, 94, 0.2);
            color: #f4435e;
            border: 1px solid rgba(244, 67, 94, 0.3);
        }
        
        .strategy-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
            margin-bottom: 8px;
        }
        
        .strategy-param {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 8px;
            background: rgba(34, 211, 238, 0.05);
            border-radius: 6px;
            border: 1px solid rgba(34, 211, 238, 0.1);
        }
        
        .param-label {
            font-size: 11px;
            color: var(--muted);
            font-weight: 500;
        }
        
        .param-value {
            font-size: 12px;
            color: #C7D6F1;
            font-weight: 600;
        }
        
        .risk-indicator {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .risk-low {
            background: rgba(34, 211, 153, 0.1);
            color: #22d399;
            border: 1px solid rgba(34, 211, 153, 0.2);
        }
        
        .risk-medium {
            background: rgba(251, 191, 36, 0.1);
            color: #fbbf24;
            border: 1px solid rgba(251, 191, 36, 0.2);
        }
        
        .risk-high {
            background: rgba(244, 67, 94, 0.1);
            color: #f4435e;
            border: 1px solid rgba(244, 67, 94, 0.2);
        }
        
        .strategy-alternatives {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid rgba(34, 211, 238, 0.2);
        }
        
        .alternatives-header {
            font-size: 11px;
            color: var(--muted);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
        }
        
        .alternatives-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .alternative-strategy {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 3px 6px;
            background: rgba(34, 211, 238, 0.03);
            border-radius: 4px;
            border: 1px solid rgba(34, 211, 238, 0.08);
        }
        
        .alt-name {
            font-size: 11px;
            color: #C7D6F1;
            font-weight: 500;
        }
        
        .alt-confidence {
            font-size: 10px;
            color: var(--muted);
            font-weight: 600;
        }
        
        /* --- END: ENHANCED IV INTELLIGENCE STYLES --- */
        /* --- END: INTEGRATED FLAREAWARE STYLES --- */

        /* --- START: NEW UI UPGRADE STYLES --- */
        .fundamental-subheader {
            font-size: 13px;
            color: var(--muted);
            margin-top: 4px;
            display: flex;
            flex-wrap: wrap; /* Added for responsiveness */
            gap: 12px;
            align-items: center;
        }

            .fundamental-subheader span {
                font-weight: 600;
                color: var(--text);
            }

        .dividend-chip {
            background-color: var(--accent);
            color: white;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
            line-height: 1;
        }

        .decision-chip {
            padding: 8px 14px;
            border-radius: 999px;
            font-weight: 700;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: .5px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

            .decision-chip.go {
                background: var(--good);
                color: var(--bg-1);
            }

            .decision-chip.no-go {
                background: var(--bad);
                color: var(--text);
            }

            .decision-chip.wait {
                background: var(--warn);
                color: var(--bg-1);
            }

        .ticker-card-right {
            display: flex;
            align-items: center;
            gap: 16px;
            justify-content: flex-end;
        }
        
        .strategy-guidance-section {
            margin: 16px 0;
        }
        
        .strategy-content {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .strategy-recommendations {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .strategy-item {
            padding: 8px 12px;
            background: rgba(34, 211, 238, 0.1);
            border: 1px solid rgba(34, 211, 238, 0.3);
            border-radius: 8px;
            font-size: 13px;
        }
        
        .strategy-item strong {
            color: var(--accent-2);
            font-weight: 600;
        }
        
        .enhanced-news-content {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .enhanced-news-content ul.clean li {
            padding: 10px 0;
            border-bottom: 1px dashed rgba(34, 211, 238, 0.2);
        }
        
        .enhanced-news-content ul.clean li:last-child {
            border-bottom: none;
        }
        
        .enhanced-news-content strong {
            color: var(--accent-2);
            font-weight: 600;
        }
        
        .card.enhanced {
            border-color: rgba(34, 211, 238, 0.4);
            background: linear-gradient(180deg, rgba(15,26,47,.95), rgba(12,21,39,.95));
        }

        /* Enhanced News Styling */
        .enhanced-news-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .enhanced-news-item {
            padding: 12px 0;
            border-bottom: 1px solid rgba(34, 211, 238, 0.15);
            transition: all 0.2s ease;
        }
        .enhanced-news-item:last-child {
            border-bottom: none;
        }
        .enhanced-news-item:hover {
            background: rgba(34, 211, 238, 0.05);
            border-radius: 6px;
            padding: 12px 8px;
            margin: 0 -8px;
        }
        .news-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            font-size: 12px;
        }
        .sentiment-icon {
            font-size: 14px;
            opacity: 0.8;
        }
        .impact-badge {
            font-size: 12px;
            opacity: 0.7;
        }
        .news-timestamp {
            color: var(--muted);
            font-size: 11px;
            margin-left: auto;
        }
        .news-content {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .news-headline {
            color: var(--text);
            text-decoration: none;
            font-weight: 500;
            line-height: 1.4;
            transition: color 0.2s ease;
        }
        .news-headline:hover {
            color: var(--accent-2);
            text-decoration: underline;
        }
        .news-source {
            color: var(--muted);
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

/* News Flip Card System */
.news-flip-container {
    position: relative;
    perspective: 1000px;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.news-card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
    cursor: pointer;
}

.news-card.flipped {
    transform: rotateY(180deg);
}

.news-card-front,
.news-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(15,26,47,.98), rgba(12,21,39,.98));
    border: 1px solid rgba(34, 211, 238, 0.3);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    overflow: hidden;
    max-height: none; /* Remove height constraint for iOS */
}

.news-card-back {
    transform: rotateY(180deg);
    background: linear-gradient(180deg, rgba(15,26,47,.98), rgba(12,21,39,.98));
    border-color: rgba(34, 211, 238, 0.6);
    box-shadow: 0 8px 25px rgba(34, 211, 238, 0.2);
}

/* Glowing Ring Button */
.flip-ring {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255, 165, 0, 0.8);
    border-radius: 50%;
    background: rgba(255, 165, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
}

.flip-ring:hover {
    border-color: rgba(255, 165, 0, 1);
    background: rgba(255, 165, 0, 0.2);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.5);
}

.flip-ring::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(255, 165, 0, 0.4);
    border-radius: 50%;
    animation: ringPulse 2s infinite;
}

.flip-ring::after {
    content: '🔥';
    color: rgba(255, 165, 0, 0.9);
    font-size: 14px;
    font-weight: bold;
    animation: flareFlicker 1.5s infinite ease-in-out;
    text-shadow: 0 0 8px rgba(255, 165, 0, 0.6);
}

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

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

@keyframes flareFlicker {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 10px rgba(255, 165, 0, 0.6);
    }
    25% {
        opacity: 0.8;
        transform: scale(1.1);
        text-shadow: 0 0 15px rgba(255, 165, 0, 0.8);
    }
    50% {
        opacity: 0.9;
        transform: scale(0.95);
        text-shadow: 0 0 8px rgba(255, 165, 0, 0.4);
    }
    75% {
        opacity: 1;
        transform: scale(1.05);
        text-shadow: 0 0 12px rgba(255, 165, 0, 0.7);
    }
}

/* News Content Styling */
.news-content-front,
.news-content-back {
    padding: 20px;
    height: calc(100% - 40px);
    overflow: hidden;
    max-height: none; /* Remove height constraint for iOS */
}

/* Allow scrolling on the back side for AI analysis */
.news-content-back {
    overflow-y: auto; /* Enable scrolling for AI analysis content */
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 185, 129, 0.6) rgba(0, 0, 0, 0.2);
}

/* Custom scrollbar for Options Readiness card front side only */
#readiness-card-free .news-content-front {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 185, 129, 0.6) rgba(0, 0, 0, 0.2);
}

#readiness-card-free .news-content-front::-webkit-scrollbar {
    width: 8px;
}

#readiness-card-free .news-content-front::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

#readiness-card-free .news-content-front::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 4px;
    transition: background 0.3s ease;
}

#readiness-card-free .news-content-front::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* Custom scrollbar for the back side container */
.news-content-back::-webkit-scrollbar {
    width: 8px;
}

.news-content-back::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.news-content-back::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.news-content-back::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.news-content-front .enhanced-news-list,
.news-content-back .enhanced-news-list {
    max-height: 300px; /* Set height constraint to trigger scrolling */
    overflow-y: auto;
    padding-right: 8px;
}

.news-content-front .enhanced-news-list::-webkit-scrollbar,
.news-content-back .enhanced-news-list::-webkit-scrollbar {
    width: 6px;
}

.news-content-front .enhanced-news-list::-webkit-scrollbar-track,
.news-content-back .enhanced-news-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.news-content-front .enhanced-news-list::-webkit-scrollbar-thumb,
.news-content-back .enhanced-news-list::-webkit-scrollbar-thumb {
    background: rgba(34, 211, 238, 0.5);
    border-radius: 3px;
}

.news-content-front .enhanced-news-list::-webkit-scrollbar-thumb:hover,
.news-content-back .enhanced-news-list::-webkit-scrollbar-thumb:hover {
    background: rgba(34, 211, 238, 0.7);
}

.news-content-back {
    background: linear-gradient(180deg, rgba(15,26,47,.98), rgba(12,21,39,.98));
}

/* Remove outer scrollbar from Options Readiness card - keep only inner content scrolling */
#readinessCard,
#readinessCard .news-card,
#readinessCard .news-flip-container {
    overflow: visible !important;
    max-height: none !important;
}

#readinessCard .news-content-back {
    overflow-y: auto;
    max-height: 400px; /* Ensure content scrolling works */
}

/* Specifically target the Options Readiness enhanced-news-list to remove outer scrollbar */
#readinessAiList {
    max-height: none !important;
    overflow: visible !important;
}

/* Apply same scroll fix to news AI card - allow interior scrolling but remove outer scrollbar */
#news-card-free,
#news-card-free .news-card,
#news-card-free .news-flip-container,
#newsCard,
#newsCard .news-card,
#newsCard .news-flip-container {
    overflow: visible !important;
    max-height: none !important;
}

/* No scrolling needed - limit to 2 articles */
#news-card-free .news-content-back,
#newsCard .news-content-back {
    overflow: visible !important;
    max-height: none !important;
}

/* Allow the enhanced news list to scroll properly within the constrained container */
#aiNewsList,
#news-card-free #aiNewsList,
#newsCard #aiNewsList {
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
}

/* Override any mobile media query rules for news AI card */
@media (max-width: 768px) {
    #news-card-free,
    #news-card-free .news-card,
    #news-card-free .news-flip-container,
    #newsCard,
    #newsCard .news-card,
    #newsCard .news-flip-container {
        overflow: visible !important;
        max-height: none !important;
    }
    
    #aiNewsList,
    #news-card-free #aiNewsList,
    #newsCard #aiNewsList {
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }
}

/* AI News Specific Styling */
.ai-news-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(34, 211, 238, 0.3);
}

.ai-news-header h3 {
    color: rgba(34, 211, 238, 0.9);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .flip-ring {
        width: 36px;
        height: 36px;
        top: 12px;
        right: 12px;
    }
    
    .flip-ring::after {
        font-size: 16px;
    }
    
    .news-content-front,
    .news-content-back {
        padding: 16px;
    }
    
    /* Mobile Flip Card Fixes */
    .news-flip-container {
        min-height: 300px; /* Prevent collapse */
        height: auto;
    }
    
    .news-card-front,
    .news-card-back {
        min-height: 300px; /* Ensure consistent height */
        max-height: none; /* Allow natural height on mobile */
        overflow-y: auto; /* Enable scrolling if needed */
    }
    
    .news-content-front,
    .news-content-back {
        min-height: 250px; /* Ensure content area has space */
        max-height: none; /* Remove height restrictions on mobile */
    }
}

/* Enhanced AI Analysis Styles */
.ai-analysis-item.enhanced {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    scroll-behavior: smooth;
}

.ai-analysis-item.enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
}

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

.ai-analysis-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-analysis-badge.strategy {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.ai-analysis-badge.risk {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.ai-analysis-badge.timing {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.ai-analysis-content.enhanced {
    font-size: 13px;
    line-height: 1.5;
    color: #e5e7eb;
    background: rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: 8px;
    border-left: 3px solid #10b981;
    max-height: 60px; /* Further reduced height to force scroll on shorter content */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 185, 129, 0.8) rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Add a subtle fade indicator at the bottom when content is scrollable */
.ai-analysis-content.enhanced::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
    pointer-events: none;
    border-radius: 0 0 8px 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show fade indicator when content overflows */
.ai-analysis-content.enhanced:not(:hover)::after {
    opacity: 1;
}

/* Custom scrollbar styling for webkit browsers */
.ai-analysis-content.enhanced::-webkit-scrollbar {
    width: 8px; /* Increased width for better visibility */
}

.ai-analysis-content.enhanced::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.ai-analysis-content.enhanced::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 4px;
    transition: background 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-analysis-content.enhanced::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.ai-analysis-footer.enhanced {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(16, 185, 129, 0.2);
}

/* Special styling for confidence level at the top */
.ai-analysis-footer.enhanced:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    padding-bottom: 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
    border-radius: 8px;
    padding: 16px;
}

.confidence-meter {
    display: flex;
    align-items: center;
    gap: 12px;
}

.confidence-label {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}

.confidence-value {
    font-size: 14px;
    font-weight: 700;
    min-width: 60px;
}

.confidence-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s ease;
    position: relative;
}

.confidence-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

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

.enhanced-news-list {
    max-height: 200px; /* Reduced height to force main container scroll */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 185, 129, 0.8) rgba(0, 0, 0, 0.3);
    padding-right: 12px; /* More space for scrollbar */
    position: relative;
}

/* Custom scrollbar for the main AI analysis list */
.enhanced-news-list::-webkit-scrollbar {
    width: 10px; /* Increased width for better visibility */
}

.enhanced-news-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.enhanced-news-list::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 5px;
    transition: background 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.enhanced-news-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

/* AI News Loading and Error States */
.ai-news-loading,
.ai-news-error {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.7);
}

.ai-news-loading p {
    margin: 0;
    font-size: 14px;
}

.ai-news-error p {
    margin: 5px 0;
    font-size: 14px;
}

.ai-news-error p:first-child {
    color: rgba(255, 100, 100, 0.8);
    font-weight: 500;
}

.ai-news-placeholder {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* AI News Enhancement Styling */
.ai-news-enhancement {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(34, 211, 238, 0.2);
}
        
        .btn-ai-news {
            all: unset;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            padding: 10px 16px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 13px;
            transition: all 0.2s ease;
            background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(124, 92, 255, 0.1));
            border: 1px solid rgba(34, 211, 238, 0.3);
            color: var(--accent-2);
            width: 100%;
            box-sizing: border-box;
        }
        
        .btn-ai-news:hover {
            background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(124, 92, 255, 0.2));
            border-color: rgba(34, 211, 238, 0.5);
            transform: translateY(-1px);
        }
        
        .btn-ai-news:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .btn-ai-news.success {
            background: linear-gradient(135deg, rgba(52, 211, 153, 0.2), rgba(52, 211, 153, 0.1));
            border-color: rgba(52, 211, 153, 0.4);
            color: var(--good);
        }
        
        .btn-ai-news.error {
            background: linear-gradient(135deg, rgba(244, 67, 94, 0.2), rgba(244, 67, 94, 0.1));
            border-color: rgba(244, 67, 94, 0.4);
            color: var(--bad);
        }
        
        .ai-success-message {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px;
            background: rgba(52, 211, 153, 0.1);
            border: 1px solid rgba(52, 211, 153, 0.3);
            border-radius: 8px;
            color: var(--good);
            font-weight: 600;
            font-size: 13px;
        }
        
        .success-icon {
            font-size: 16px;
        }
        
        .enhanced-news-item.ai-enhanced {
            border-left: 3px solid rgba(34, 211, 238, 0.6);
            background: rgba(34, 211, 238, 0.03);
        }
        
        .card.ai-enhanced {
            border-color: rgba(34, 211, 238, 0.6);
            background: linear-gradient(180deg, rgba(15,26,47,.98), rgba(12,21,39,.98));
            box-shadow: 0 10px 30px rgba(34, 211, 238, 0.1), 0 2px 6px rgba(34, 211, 238, 0.05);
        }

        #last-updated {
            font-size: 11px;
            color: var(--muted);
            text-align: center;
            margin-top: 16px;
            width: 100%;
        }
        /* --- END: NEW UI UPGRADE STYLES --- */

        /* --- START: WHAT CHANGED (24H) MODULE STYLES --- */
        .change-content {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

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

        .change-headline {
            font-size: 17px;
            font-weight: 700;
        }

        .delta {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-weight: 600;
        }

            .delta.up {
                color: var(--good);
            }

            .delta.down {
                color: var(--bad);
            }

            .delta.neutral {
                color: var(--muted);
            }

        .sparkline-container {
            text-align: right;
        }

            .sparkline-container svg {
                display: block;
                overflow: visible;
            }

        .sparkline-label {
            font-size: 11px;
            color: var(--muted);
            margin-top: 4px;
        }

        .change-summary {
            font-size: 14px;
            color: var(--muted);
            margin-bottom: 16px;
        }

        .risk-gates {
            margin-bottom: 16px;
            display: flex;
            gap: 8px;
        }

        .gate-chip {
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            background: var(--chip-bg);
            border: 1px solid var(--line);
            color: var(--muted);
        }

            .gate-chip.changed {
                border-color: var(--warn);
                color: var(--text);
            }

            .gate-chip.alert {
                border-color: var(--bad);
                color: var(--text);
            }

        .change-drivers {
            border-top: 1px solid var(--line);
            padding-top: 12px;
            margin-bottom: 16px;
        }

            .change-drivers p {
                font-size: 13px;
                font-weight: 600;
                margin: 0 0 8px;
                color: var(--text);
            }

            .change-drivers ul {
                list-style-type: disc;
                padding-left: 16px;
                margin: 0;
                font-size: 13px;
                color: var(--muted);
            }

            .change-drivers li {
                margin-bottom: 4px;
            }

        .action-hint {
            background-color: var(--chip-bg);
            padding: 10px 12px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            margin-top: auto;
        }

            .action-hint.wait {
                color: var(--warn);
            }

            .action-hint.favored {
                color: var(--accent-2);
            }

            .action-hint.caution {
                color: var(--bad);
            }

        .change-stable, .change-info {
            padding: 10px 0;
            font-size: 14px;
            color: var(--muted);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            flex-grow: 1;
        }

        .change-info {
            color: var(--warn);
        }
        /* --- END: WHAT CHANGED (24H) MODULE STYLES --- */

        /* --- START: ACT / ALERT RENDERER --- */
        .alert-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border-radius: 8px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            margin-bottom: 8px;
            transition: all 0.3s ease;
        }

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

        .alert-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        .alert-content {
            flex-grow: 1;
        }

        .alert-title {
            font-weight: 700;
            font-size: 15px;
            line-height: 1.2;
            color: var(--text);
        }

        .alert-summary {
            font-size: 13px;
            color: var(--muted);
            margin-top: 4px;
        }

        .alert-title.high {
            color: var(--warn);
        }

        .alert-title.block {
            color: var(--bad);
        }

        .alerts-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        /* --- END: ACT / ALERT RENDERER --- */

        @media (max-width: 960px) {
            .grid-layout {
                grid-template-columns: 1fr 1fr;
            }
            #flareaware-section, .flareaware-view {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 640px) {
            .grid-layout {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 640px) {
            .ticker-card {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .ticker-card-right {
                justify-content: center;
            }
            
            /* Ultra-Mobile Flip Card Fixes */
            .news-flip-container {
                min-height: 280px; /* Slightly smaller for tiny screens */
            }
            
            .news-card-front,
            .news-card-back {
                min-height: 280px;
            }
            
            .news-content-front,
            .news-content-back {
                min-height: 230px;
                padding: 12px; /* Tighter padding on small screens */
            }
            
            .flip-ring {
                width: 32px; /* Smaller ring for tiny screens */
                height: 32px;
                top: 8px;
                right: 8px;
            }
            
            .flip-ring::after {
                font-size: 14px; /* Smaller flare icon */
            }
            
            .enhanced-news-list {
                max-height: 180px; /* Shorter list on tiny screens */
            }
            
            /* Ensure cards don't collapse in single column */
            .card:not(.enhanced) {
                min-height: 280px;
            }
            .card.enhanced {
                min-height: 350px;
            }
        }
        /* --- OptionFlare UI polish (non-breaking) --- */
        :root {
            /* tighter, higher-contrast palette */
            --text: #F2F6FF; /* main body text */
            --muted: #C0CDE6; /* secondary text */
            --line: #17243C; /* subtle borders */
            --aqua: #22D3EE; /* meter outer */
            --good: #22C55E; /* meter inner */
            --warn: #F59E0B;
            --bad: #EF4444;
        }

        /* modern readable type */
        html, body {
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased
        }

        body {
            font: 500 clamp(14px,0.38vw + 13px,16px)/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial
        }


        /* numbers line up cleanly across cards */
        .value, .chip, .earnings-day, .fundamental-subheader span,
        #edgeGauge .center-text {
            font-variant-numeric: tabular-nums slashed-zero
        }


        /* meter legibility */
        .split-ring-svg {
            shape-rendering: geometricPrecision
        }

        .ring-track {
            stroke: #14233D
        }

        #edgeGauge .center-text {
            letter-spacing: .4px
        }

            #edgeGauge .center-text + .center-text {
                opacity: .95;
                font-weight: 800
            }


        /* buttons/focus (a11y, no visual change until focus) */
        .btn:focus-visible, .btn-flare:focus-visible {
            outline: 2px solid var(--aqua);
            outline-offset: 2px;
            border-radius: 12px
        }


        /* small-card text contrast bump */
        .card h3 {
            color: #C7D6F1
        }
        .subtle {
            color: var(--muted)
        }

/* ===== iOS-ONLY CARD SYSTEM ===== */
.ios-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.ios-row {
    display: flex;
    gap: 16px;
    width: 100%;
}

.ios-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
    min-height: 200px;
    box-shadow: var(--shadow);
}

.ios-basic {
    flex: 1;
    min-height: 200px;
}

/* ===== RING ELEMENT HIDING (PRE-FLARE SETUP) ===== */
.ds-foot { 
    display: none !important; 
}

#decisionChip { 
    display: none !important; 
}

/* Hide central text in rings - targeting the split-ring-container */
.split-ring-container {
    color: transparent !important;
}

.split-ring-container * {
    color: transparent !important;
}

/* ===== MARKET READINESS DASHBOARD ===== */
.market-regime-meter {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

.regime-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
    animation: regimePulse 2s ease-in-out infinite;
}

.regime-icon {
    font-size: 28px;
    line-height: 1;
}

.regime-label {
    font-size: 10px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.market-environment {
    margin: 16px 0;
}

.env-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

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

.env-icon {
    font-size: 16px;
    margin-right: 12px;
    width: 20px;
    text-align: center;
}

.env-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.env-name {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.env-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.env-trend {
    font-size: 16px;
    margin-left: 8px;
    animation: trendBounce 1.5s ease-in-out infinite;
}

.trading-readiness {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
}

.readiness-icon {
    font-size: 20px;
    animation: lightningBounce 1.5s ease-in-out infinite;
}

.readiness-text {
    font-size: 12px;
    font-weight: 700;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

@keyframes trendBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes lightningBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(5deg); }
}

/* ===== VOLATILITY DROPDOWN SYSTEM ===== */
.volatility-dropdown-container {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.volatility-flare-button {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 2px solid #f59e0b;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

.volatility-flare-button:hover {
    background: rgba(245, 158, 11, 0.2);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
    transform: scale(1.1);
}

.volatility-flare-button::before {
    content: "🔥";
    font-size: 18px;
    animation: flareFlicker 2s ease-in-out infinite;
}

.volatility-card-main {
    transition: transform 0.3s ease;
}

.volatility-dropdown-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card);
    border-radius: 12px;
    padding: 20px;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
    z-index: 5;
    box-shadow: var(--shadow);
    overflow-y: auto;
}

.volatility-dropdown-container.dropdown-open .volatility-dropdown-content {
    transform: translateY(0);
}

.volatility-dropdown-container.dropdown-open .volatility-card-main {
    transform: translateY(20px);
}

.volatility-ai-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.volatility-ai-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.volatility-ai-content {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ===== FLAREEDGE TEASER CARD STYLES ===== */
.flareedge-teaser {
    background: linear-gradient(135deg, rgba(20, 30, 50, 0.98), rgba(15, 25, 45, 0.98));
    border: 2px solid rgba(124, 92, 255, 0.3);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 12px 40px rgba(124, 92, 255, 0.15), 0 4px 16px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.flareedge-teaser::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7c5cff, #00d4ff, #ff6b6b, #7c5cff);
    background-size: 300% 100%;
    animation: flareShimmer 4s ease-in-out infinite;
}

.flareedge-teaser::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.05) 0%, transparent 70%);
    animation: pulse 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes flareShimmer {
    0%, 100% { background-position: 300% 0; }
    50% { background-position: -300% 0; }
}

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

.flareedge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.flareedge-header h3 {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.flareedge-badge {
    background: linear-gradient(135deg, #7c5cff, #00d4ff);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(124, 92, 255, 0.4);
    animation: badgeGlow 2s ease-in-out infinite alternate;
}

@keyframes badgeGlow {
    0% { box-shadow: 0 4px 12px rgba(124, 92, 255, 0.4); }
    100% { box-shadow: 0 4px 20px rgba(124, 92, 255, 0.6); }
}

.flareedge-content {
    position: relative;
    z-index: 2;
}

.flareedge-subtitle {
    color: #a0aec0;
    font-size: 0.9rem;
    margin-bottom: 16px;
    text-align: center;
}

.strategy-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.highlight-item {
    background: rgba(30, 42, 66, 0.6);
    border: 1px solid rgba(124, 92, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.highlight-item:hover {
    background: rgba(30, 42, 66, 0.8);
    border-color: rgba(124, 92, 255, 0.4);
    transform: translateY(-2px);
}

.highlight-label {
    color: #a0aec0;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.highlight-value {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.confidence-indicator {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 12px;
    margin-top: 8px;
}

.confidence-indicator.high {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.confidence-indicator.medium {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.confidence-indicator.low {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.risk-low {
    color: #22c55e;
}

.risk-medium {
    color: #fbbf24;
}

.risk-high {
    color: #ef4444;
}

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

.preview-section {
    background: rgba(20, 30, 50, 0.6);
    border: 1px solid rgba(124, 92, 255, 0.15);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
}

.preview-section:hover {
    background: rgba(20, 30, 50, 0.8);
    border-color: rgba(124, 92, 255, 0.3);
}

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

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

.preview-title {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
}

.preview-content {
    color: #a0aec0;
    font-size: 0.8rem;
}

/* Scenario Preview Styles */
.scenario-preview {
    text-align: center;
}

.scenario-slider {
    margin-bottom: 12px;
}

.slider-label {
    color: #ffffff;
    font-size: 0.8rem;
    margin-bottom: 8px;
}

.slider-value {
    color: #7c5cff;
    font-weight: 600;
}

.slider-track {
    height: 4px;
    background: rgba(30, 42, 66, 0.8);
    border-radius: 2px;
    position: relative;
    margin: 8px 0;
}

.slider-thumb {
    width: 12px;
    height: 12px;
    background: #7c5cff;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(124, 92, 255, 0.4);
}

.scenario-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.result-before, .result-after {
    flex: 1;
    text-align: center;
}

.result-label {
    color: #a0aec0;
    font-size: 0.7rem;
    margin-bottom: 4px;
}

.result-value {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
}

.result-arrow {
    color: #7c5cff;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Playbook Preview Styles */
.playbook-preview {
    text-align: center;
}

.strategy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.strategy-cell {
    background: rgba(30, 42, 66, 0.6);
    border: 1px solid rgba(124, 92, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    transition: all 0.3s ease;
}

.strategy-cell.qualified {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
}

.strategy-cell.neutral {
    background: rgba(75, 85, 99, 0.2);
    border-color: rgba(75, 85, 99, 0.4);
    color: #9ca3af;
}

.strategy-name {
    font-size: 0.7rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.strategy-status {
    font-size: 0.8rem;
    font-weight: bold;
}

.checklist-preview {
    text-align: left;
}

.checklist-item {
    color: #a0aec0;
    font-size: 0.7rem;
    margin-bottom: 4px;
}

/* Evidence Preview Styles */
.evidence-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.evidence-item {
    text-align: center;
    padding: 8px;
    background: rgba(30, 42, 66, 0.4);
    border-radius: 6px;
}

.evidence-label {
    color: #a0aec0;
    font-size: 0.7rem;
    margin-bottom: 4px;
}

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

.evidence-value.positive {
    color: #22c55e;
}

.evidence-value.negative {
    color: #ef4444;
}

.evidence-value.neutral {
    color: #fbbf24;
}

/* FlareEdge CTA Styles */
.flareedge-cta {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.1), rgba(0, 212, 255, 0.1));
    border: 1px solid rgba(124, 92, 255, 0.3);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.flareedge-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(124, 92, 255, 0.1), transparent);
    animation: ctaShimmer 3s ease-in-out infinite;
}

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

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-text h4 {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.cta-text p {
    color: #a0aec0;
    font-size: 0.9rem;
    margin: 0 0 16px 0;
}

.btn-flareedge {
    background: linear-gradient(135deg, #7c5cff, #00d4ff);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(124, 92, 255, 0.4);
    position: relative;
    overflow: hidden;
}

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

.btn-flareedge:hover::before {
    left: 100%;
}

.btn-flareedge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 92, 255, 0.6);
}

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

.btn-text {
    font-weight: 600;
}

.btn-arrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.btn-flareedge:hover .btn-arrow {
    transform: translateX(4px);
}

/* ===== EVIDENCE-FIRST LAYOUT STYLES ===== */
.evidence-board-hero {
    background: linear-gradient(135deg, rgba(30, 42, 66, 0.8), rgba(20, 30, 50, 0.8));
    border: 1px solid rgba(124, 92, 255, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.evidence-board-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #7c5cff, #00d4ff, #7c5cff);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

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

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

.evidence-header h4 {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.evidence-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.evidence-metric {
    background: rgba(15, 25, 45, 0.6);
    border: 1px solid rgba(124, 92, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.evidence-metric:hover {
    background: rgba(15, 25, 45, 0.8);
    border-color: rgba(124, 92, 255, 0.4);
    transform: translateY(-2px);
}

.metric-label {
    color: #a0aec0;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.metric-value.positive {
    color: #22c55e;
}

.metric-value.negative {
    color: #ef4444;
}

.metric-value.neutral {
    color: #fbbf24;
}

.ai-analysis {
    background: rgba(20, 30, 50, 0.6);
    border: 1px solid rgba(124, 92, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.ai-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a0aec0;
    font-size: 0.9rem;
}

.ai-icon {
    font-size: 1.1rem;
    animation: pulse 2s ease-in-out infinite;
}

.ai-analysis-content {
    display: grid;
    gap: 12px;
}

.ai-insight {
    background: rgba(15, 25, 45, 0.4);
    border-radius: 8px;
    padding: 12px;
    border-left: 3px solid rgba(124, 92, 255, 0.5);
}

.ai-insight.upgrade-insight {
    border-left-color: rgba(0, 212, 255, 0.5);
    background: rgba(0, 212, 255, 0.05);
}

.insight-label {
    color: #7c5cff;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.upgrade-insight .insight-label {
    color: #00d4ff;
}

.insight-text {
    color: #e6eefc;
    font-size: 0.9rem;
    line-height: 1.5;
}

.ai-analysis-error {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fbbf24;
    font-size: 0.9rem;
}

/* Strategy Recommendation Styles */
.strategy-recommendation {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.strategy-recommendation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #8b5cf6, #a855f7, #c084fc);
    border-radius: 16px 16px 0 0;
}

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

.strategy-icon {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
}

.strategy-header h4 {
    color: #8b5cf6;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}

.strategy-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.strategy-primary {
    text-align: center;
    padding: 24px 20px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    font-weight: 700;
    font-size: 1.4rem;
    color: white;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
    position: relative;
    overflow: hidden;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

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

.strategy-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.5);
}

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

.strategy-params {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.param {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.param:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-1px);
}

.param-label {
    color: #a0a0a0;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.param-value {
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
}

.param-value.confidence-high { 
    color: #6bcf7f; 
    text-shadow: 0 0 8px rgba(107, 207, 127, 0.4);
}
.param-value.confidence-medium { 
    color: #ffd93d; 
    text-shadow: 0 0 8px rgba(255, 217, 61, 0.4);
}
.param-value.confidence-low { 
    color: #ff6b6b; 
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.4);
}

.param-value.risk-high { 
    color: #ff6b6b; 
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.4);
}
.param-value.risk-medium { 
    color: #ffd93d; 
    text-shadow: 0 0 8px rgba(255, 217, 61, 0.4);
}
.param-value.risk-low { 
    color: #6bcf7f; 
    text-shadow: 0 0 8px rgba(107, 207, 127, 0.4);
}

/* ===== ACTION CENTER CARD (STYLED LIKE EVIDENCE BOARD) ===== */
.action-center-card {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1) 0%, rgba(75, 0, 130, 0.05) 100%);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.action-center-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #8a2be2, #4b0082, #8a2be2);
    border-radius: 12px 12px 0 0;
}

.action-center-card .column-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.2);
}

.action-center-card .column-icon {
    font-size: 18px;
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.6));
}

.action-center-card .column-title {
    font-size: 16px;
    font-weight: 600;
    color: #e0e0e0;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
}

.action-center-card .section-title {
    font-size: 12px;
    font-weight: 600;
    color: #b0b0b0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.2);
}

.action-center-card .strategy-section {
    margin-bottom: 20px;
}

.action-center-card .strategy-primary {
    background: linear-gradient(135deg, #8a2be2, #4b0082);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
    border: 1px solid rgba(138, 43, 226, 0.5);
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.action-center-card .strategy-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(138, 43, 226, 0.4);
}

.action-center-card .strategy-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.action-center-card .param {
    background: rgba(138, 43, 226, 0.1);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.action-center-card .param:hover {
    background: rgba(138, 43, 226, 0.15);
    border-color: rgba(138, 43, 226, 0.3);
}

.action-center-card .param-label {
    font-size: 11px;
    color: #b0b0b0;
    font-weight: 500;
}

.action-center-card .param-value {
    font-size: 12px;
    font-weight: 600;
    color: #e0e0e0;
}

.action-center-card .param-value.confidence-high {
    color: #6bcf7f;
    text-shadow: 0 0 4px rgba(107, 207, 127, 0.4);
}

.action-center-card .param-value.confidence-medium {
    color: #ffd93d;
    text-shadow: 0 0 4px rgba(255, 217, 61, 0.4);
}

.action-center-card .param-value.confidence-low {
    color: #ff6b6b;
    text-shadow: 0 0 4px rgba(255, 107, 107, 0.4);
}

.action-center-card .param-value.risk-high {
    color: #ff6b6b;
    text-shadow: 0 0 4px rgba(255, 107, 107, 0.4);
}

.action-center-card .param-value.risk-medium {
    color: #ffd93d;
    text-shadow: 0 0 4px rgba(255, 217, 61, 0.4);
}

.action-center-card .param-value.risk-low {
    color: #6bcf7f;
    text-shadow: 0 0 4px rgba(107, 207, 127, 0.4);
}

.action-center-card .tools-section {
    margin-bottom: 20px;
}

.action-center-card .tools-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.action-center-card .tool-item {
    background: rgba(138, 43, 226, 0.08);
    border: 1px solid rgba(138, 43, 226, 0.15);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.action-center-card .tool-item:hover {
    background: rgba(138, 43, 226, 0.12);
    border-color: rgba(138, 43, 226, 0.25);
    transform: translateY(-1px);
}

.action-center-card .tool-icon {
    font-size: 14px;
    filter: drop-shadow(0 0 2px rgba(138, 43, 226, 0.4));
}

.action-center-card .tool-name {
    font-size: 11px;
    color: #d0d0d0;
    font-weight: 500;
}

.action-center-card .upgrade-section {
    text-align: center;
}

.action-center-card .btn-flareedge {
    background: linear-gradient(135deg, #8a2be2, #4b0082);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.3);
}

.action-center-card .btn-flareedge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(138, 43, 226, 0.4);
}

.action-center-card .btn-text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.action-center-card .btn-arrow {
    transition: transform 0.2s ease;
}

.action-center-card .btn-flareedge:hover .btn-arrow {
    transform: translateX(2px);
}

.action-center-card .cta-subtitle {
    font-size: 11px;
    color: #a0a0a0;
    font-style: italic;
}

/* ===== UNIFIED FLAREDGE SECTION ===== */
.unified-flareedge-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid #2d4a6b;
    border-radius: 16px;
    padding: 32px;
    margin: 24px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 100% !important;
    display: block !important;
}

.unified-flareedge-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #8a2be2, #4b0082, #8a2be2);
    border-radius: 16px 16px 0 0;
}

.unified-flareedge-section .flareedge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(138, 43, 226, 0.3);
}

.unified-flareedge-section .flareedge-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: #e0e0e0;
    text-shadow: 0 0 12px rgba(138, 43, 226, 0.6);
    margin: 0;
}

.unified-flareedge-section .flareedge-header h3::before {
    content: '⚡';
    margin-right: 8px;
    filter: drop-shadow(0 0 8px rgba(138, 43, 226, 0.8));
}

.unified-flareedge-section .flareedge-badge {
    background: linear-gradient(135deg, #8a2be2, #4b0082);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.4);
    border: 1px solid rgba(138, 43, 226, 0.5);
}

.unified-flareedge-section .flareedge-content-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    min-height: 400px !important;
    width: 100% !important;
}

/* EVIDENCE BOARD SECTION */
.unified-flareedge-section .evidence-board-section {
    background: rgba(138, 43, 226, 0.08);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 12px;
    padding: 24px;
    position: relative;
    width: 100% !important;
    display: block !important;
}

.unified-flareedge-section .section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
}

.unified-flareedge-section .section-icon {
    font-size: 20px;
    filter: drop-shadow(0 0 6px rgba(138, 43, 226, 0.6));
}

.unified-flareedge-section .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #e0e0e0;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
}

.unified-flareedge-section .evidence-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.unified-flareedge-section .evidence-metric {
    background: rgba(138, 43, 226, 0.12);
    border: 1px solid rgba(138, 43, 226, 0.25);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.unified-flareedge-section .evidence-metric:hover {
    background: rgba(138, 43, 226, 0.18);
    border-color: rgba(138, 43, 226, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.2);
}

.unified-flareedge-section .metric-label {
    font-size: 12px;
    color: #b0b0b0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.unified-flareedge-section .metric-value {
    font-size: 20px;
    font-weight: 700;
    color: #e0e0e0;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
}

.unified-flareedge-section .metric-value.direction-high,
.unified-flareedge-section .metric-value.iv-high,
.unified-flareedge-section .metric-value.liquidity-high,
.unified-flareedge-section .metric-value.earnings-clear {
    color: #6bcf7f;
    text-shadow: 0 0 8px rgba(107, 207, 127, 0.6);
}

.unified-flareedge-section .metric-value.direction-medium,
.unified-flareedge-section .metric-value.iv-medium,
.unified-flareedge-section .metric-value.liquidity-medium,
.unified-flareedge-section .metric-value.earnings-medium {
    color: #ffd93d;
    text-shadow: 0 0 8px rgba(255, 217, 61, 0.6);
}

.unified-flareedge-section .metric-value.direction-low,
.unified-flareedge-section .metric-value.iv-low,
.unified-flareedge-section .metric-value.liquidity-low,
.unified-flareedge-section .metric-value.earnings-close {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.6);
}

.unified-flareedge-section .ai-analysis-section {
    background: rgba(138, 43, 226, 0.06);
    border: 1px solid rgba(138, 43, 226, 0.15);
    border-radius: 8px;
    padding: 20px;
}

.unified-flareedge-section .ai-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.unified-flareedge-section .ai-icon {
    font-size: 16px;
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.6));
}

.unified-flareedge-section .ai-title {
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
    text-shadow: 0 0 6px rgba(138, 43, 226, 0.4);
}

.unified-flareedge-section .ai-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.unified-flareedge-section .ai-insight {
    font-size: 13px;
    line-height: 1.5;
    color: #d0d0d0;
}

.unified-flareedge-section .ai-insight strong {
    color: #e0e0e0;
    font-weight: 600;
}

.unified-flareedge-section .ai-insight span {
    color: #c0c0c0;
}

/* ACTION CENTER SECTION */
.unified-flareedge-section .action-center-section {
    background: rgba(138, 43, 226, 0.08);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 12px;
    padding: 24px;
    position: relative;
    width: 100% !important;
    display: block !important;
}

.unified-flareedge-section .strategy-recommendation {
    background: rgba(138, 43, 226, 0.12);
    border: 1px solid rgba(138, 43, 226, 0.25);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
}

.unified-flareedge-section .strategy-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.unified-flareedge-section .strategy-icon {
    font-size: 18px;
    filter: drop-shadow(0 0 6px rgba(138, 43, 226, 0.6));
}

.unified-flareedge-section .strategy-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: #e0e0e0;
    margin: 0;
    text-shadow: 0 0 6px rgba(138, 43, 226, 0.4);
}

.unified-flareedge-section .strategy-primary {
    background: linear-gradient(135deg, #8a2be2, #4b0082);
    color: white;
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
    border: 1px solid rgba(138, 43, 226, 0.5);
    box-shadow: 0 6px 16px rgba(138, 43, 226, 0.3);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.unified-flareedge-section .strategy-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(138, 43, 226, 0.4);
}

.unified-flareedge-section .strategy-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.unified-flareedge-section .param {
    background: rgba(138, 43, 226, 0.15);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.unified-flareedge-section .param:hover {
    background: rgba(138, 43, 226, 0.2);
    border-color: rgba(138, 43, 226, 0.4);
}

.unified-flareedge-section .param-label {
    font-size: 12px;
    color: #b0b0b0;
    font-weight: 500;
}

.unified-flareedge-section .param-value {
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
}

.unified-flareedge-section .param-value.confidence-high {
    color: #6bcf7f;
    text-shadow: 0 0 6px rgba(107, 207, 127, 0.6);
}

.unified-flareedge-section .param-value.confidence-medium {
    color: #ffd93d;
    text-shadow: 0 0 6px rgba(255, 217, 61, 0.6);
}

.unified-flareedge-section .param-value.confidence-low {
    color: #ff6b6b;
    text-shadow: 0 0 6px rgba(255, 107, 107, 0.6);
}

.unified-flareedge-section .param-value.risk-high {
    color: #ff6b6b;
    text-shadow: 0 0 6px rgba(255, 107, 107, 0.6);
}

.unified-flareedge-section .param-value.risk-medium {
    color: #ffd93d;
    text-shadow: 0 0 6px rgba(255, 217, 61, 0.6);
}

.unified-flareedge-section .param-value.risk-low {
    color: #6bcf7f;
    text-shadow: 0 0 6px rgba(107, 207, 127, 0.6);
}

.unified-flareedge-section .tools-section {
    background: rgba(138, 43, 226, 0.08);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
}

.unified-flareedge-section .tools-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.unified-flareedge-section .tools-icon {
    font-size: 16px;
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.6));
}

.unified-flareedge-section .tools-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
    margin: 0;
    text-shadow: 0 0 6px rgba(138, 43, 226, 0.4);
}

.unified-flareedge-section .tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.unified-flareedge-section .tool-item {
    background: rgba(138, 43, 226, 0.12);
    border: 1px solid rgba(138, 43, 226, 0.25);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.unified-flareedge-section .tool-item:hover {
    background: rgba(138, 43, 226, 0.18);
    border-color: rgba(138, 43, 226, 0.4);
    transform: translateY(-2px);
}

.unified-flareedge-section .tool-icon {
    font-size: 16px;
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.6));
}

.unified-flareedge-section .tool-name {
    font-size: 12px;
    color: #d0d0d0;
    font-weight: 500;
}

.unified-flareedge-section .upgrade-cta {
    text-align: center;
    background: rgba(138, 43, 226, 0.08);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 10px;
    padding: 20px;
}

.unified-flareedge-section .btn-flareedge {
    background: linear-gradient(135deg, #8a2be2, #4b0082);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto 12px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 16px rgba(138, 43, 226, 0.3);
}

.unified-flareedge-section .btn-flareedge:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(138, 43, 226, 0.4);
}

.unified-flareedge-section .btn-text {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.unified-flareedge-section .btn-arrow {
    transition: transform 0.2s ease;
}

.unified-flareedge-section .btn-flareedge:hover .btn-arrow {
    transform: translateX(3px);
}

.unified-flareedge-section .cta-subtitle {
    font-size: 12px;
    color: #a0a0a0;
    font-style: italic;
}

/* ===== NEW FLAREDGE SECTION (FRESH START) ===== */
.new-flareedge-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid #2d4a6b;
    border-radius: 16px;
    padding: 32px;
    margin: 24px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    width: 100% !important;
    display: block !important;
    clear: both !important;
    float: none !important;
    box-sizing: border-box !important;
}

.new-flareedge-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #8a2be2, #4b0082, #8a2be2);
    border-radius: 16px 16px 0 0;
}

.new-flareedge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(138, 43, 226, 0.3);
}

.new-flareedge-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: #e0e0e0;
    text-shadow: 0 0 12px rgba(138, 43, 226, 0.6);
    margin: 0;
}

.new-flareedge-header h3::before {
    content: '⚡';
    margin-right: 8px;
    filter: drop-shadow(0 0 8px rgba(138, 43, 226, 0.8));
}

.new-flareedge-badge {
    background: linear-gradient(135deg, #8a2be2, #4b0082);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.4);
    border: 1px solid rgba(138, 43, 226, 0.5);
}

/* THE CRITICAL GRID LAYOUT - FORCING 2 COLUMNS */
.new-flareedge-container {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}

.new-flareedge-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    min-height: 400px !important;
    width: 100% !important;
    align-items: start !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Scenario Builder Styles */
.scenario-builder {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.scenario-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #4ecdc4;
    margin-bottom: 1.5rem;
    text-align: center;
}

.strategy-selector {
    margin-bottom: 1.5rem;
}

.selector-label {
    display: block;
    font-size: 0.9rem;
    color: #a0a0a0;
    margin-bottom: 0.5rem;
}

.strategy-dropdown {
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.9rem;
}

.strategy-dropdown:focus {
    outline: none;
    border-color: #4ecdc4;
    box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
}

.greeks-controls {
    margin-bottom: 1.5rem;
}

.greeks-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 1rem;
}

.slider-group {
    margin-bottom: 1rem;
}

.slider-label {
    display: block;
    font-size: 0.9rem;
    color: #a0a0a0;
    margin-bottom: 0.5rem;
}

.slider {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #4ecdc4;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #4ecdc4;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.scenario-testing {
    margin-bottom: 1.5rem;
}

.testing-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 1rem;
}

.scenario-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.scenario-item {
    display: flex;
    flex-direction: column;
}

.scenario-label {
    font-size: 0.8rem;
    color: #a0a0a0;
    margin-bottom: 0.5rem;
}

.scenario-select {
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.8rem;
}

.scenario-select:focus {
    outline: none;
    border-color: #4ecdc4;
}

.results-display {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 1rem;
}

.results-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 1rem;
    text-align: center;
}

.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.result-item {
    text-align: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.result-label {
    font-size: 0.8rem;
    color: #a0a0a0;
    margin-bottom: 0.5rem;
}

.result-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
}

.result-value.profit {
    color: #4ecdc4;
}

.result-value.loss {
    color: #ff6b6b;
}

/* Enhanced What Changed Section Styling */
.chart-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    height: 200px;
    width: 100%;
}

.chart-container canvas {
    width: 100% !important;
    height: 200px !important;
    max-width: 100%;
}

/* Real-Time Scenario Analysis Styling */
.realtime-scenario-analysis {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(78, 205, 196, 0.3);
    border-left: 4px solid #4ecdc4;
}

.realtime-title {
    color: #4ecdc4;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.input-group {
    display: flex;
    flex-direction: column;
}

.input-group label {
    color: #a0a0a0;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.input-group input,
.input-group select {
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.input-group input:focus,
.input-group select:focus {
    outline: none;
    border-color: #4ecdc4;
    box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
}

.realtime-test-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.realtime-test-btn:hover {
    background: linear-gradient(135deg, #45b7aa, #3d8b7a);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
}

.realtime-results {
    margin-top: 1rem;
}

.realtime-result-card {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid #4ecdc4;
}

.realtime-result-card h5 {
    color: #4ecdc4;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.result-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: rgba(78, 205, 196, 0.1);
    border-radius: 4px;
}

.metric-label {
    color: #a0a0a0;
    font-size: 0.9rem;
    font-weight: 500;
}

.metric-value {
    color: #4ecdc4;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Strategy-specific colors */
.strategy-monitor { color: #f39c12; }
.strategy-momentum-debit { color: #2ecc71; }
.strategy-bullish { color: #2ecc71; }
.strategy-bearish { color: #e74c3c; }
.strategy-neutral { color: #f39c12; }

/* Confidence colors */
.confidence-high { color: #2ecc71; }
.confidence-medium { color: #f39c12; }
.confidence-low { color: #e74c3c; }

/* Risk colors */
.risk-low { color: #2ecc71; }
.risk-medium { color: #f39c12; }
.risk-high { color: #e74c3c; }

/* Source indicator */
.source-real { color: #4ecdc4; }
.source-generated { color: #f39c12; }

.new-sparkline-area {
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.new-sparkline-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

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

.new-sparkline-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}

.new-sparkline-period {
    font-size: 0.8rem;
    color: #a0a0a0;
}

.new-sparkline-chart {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sparkline-fallback {
    color: #a0a0a0;
    font-size: 0.8rem;
    font-style: italic;
}

/* Trend Indicator Cards - Cool and Meaningful */
.trend-indicators {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.trend-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1rem 0.75rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.trend-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4ecdc4, #45b7d1, #667eea);
    opacity: 0.7;
}

.trend-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border-color: rgba(78, 205, 196, 0.3);
}

.trend-card.trend-positive::before {
    background: linear-gradient(90deg, #4ecdc4, #45b7d1);
}

.trend-card.trend-neutral::before {
    background: linear-gradient(90deg, #a0a0a0, #667eea);
}

.trend-card.trend-negative::before {
    background: linear-gradient(90deg, #ff6b6b, #f39c12);
}

.trend-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.trend-label {
    font-size: 0.8rem;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.trend-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
}

.trend-card.trend-positive .trend-value {
    color: #4ecdc4;
}

.trend-card.trend-neutral .trend-value {
    color: #a0a0a0;
}

.trend-card.trend-negative .trend-value {
    color: #ff6b6b;
}

/* EVIDENCE BOARD - COPYING FLAREAWARE STYLING */
.new-evidence-board {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    position: relative;
    width: 100%;
    display: block;
    grid-column: 1 !important;
    min-height: 500px;
    min-width: 0 !important;
}

.new-action-center {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    position: relative;
    width: 100%;
    display: block;
    grid-column: 2 !important;
    min-width: 0 !important;
    min-height: 500px;
}

.new-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
}

.new-section-icon {
    font-size: 20px;
    filter: drop-shadow(0 0 6px rgba(138, 43, 226, 0.6));
}

.new-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #e0e0e0;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
}

.new-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.new-metric {
    background: rgba(138, 43, 226, 0.12);
    border: 1px solid rgba(138, 43, 226, 0.25);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* DYNAMIC COLOR-CODED METRIC BOXES */
.new-metric {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* PULSE ANIMATION FOR HIGH-PRIORITY METRICS */
.pulse-glow {
    animation: metricPulse 2s infinite;
}

@keyframes metricPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 20px currentColor;
    }
    50% { 
        transform: scale(1.02);
        box-shadow: 0 0 30px currentColor;
    }
}

/* COLOR VARIATIONS */
.color-10b981 { /* Green */
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.color-f59e0b { /* Yellow/Orange */
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.color-ef4444 { /* Red */
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
    border: 1px solid rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

/* HOVER EFFECTS FOR METRIC BOXES */
.iv-rank-metric:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 99, 132, 0.4);
}

.direction-score-metric:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.4);
}

.liquidity-metric:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
}

.earnings-metric:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
}

.new-metric:hover {
    background: rgba(138, 43, 226, 0.18);
    border-color: rgba(138, 43, 226, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.2);
}

.new-metric-label {
    font-size: 12px;
    color: #b0b0b0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.new-metric-value {
    font-size: 20px;
    font-weight: 700;
    color: #e0e0e0;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
}

.new-metric-value.direction-high,
.new-metric-value.iv-high,
.new-metric-value.liquidity-high,
.new-metric-value.earnings-clear {
    color: #6bcf7f;
    text-shadow: 0 0 8px rgba(107, 207, 127, 0.6);
}

.new-metric-value.direction-medium,
.new-metric-value.iv-medium,
.new-metric-value.liquidity-medium,
.new-metric-value.earnings-medium {
    color: #ffd93d;
    text-shadow: 0 0 8px rgba(255, 217, 61, 0.6);
}

.new-metric-value.direction-low,
.new-metric-value.iv-low,
.new-metric-value.liquidity-low,
.new-metric-value.earnings-close {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.6);
}

.new-metric-status {
    font-size: 10px;
    font-weight: 600;
    color: #a0a0a0;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.new-ai-section {
    background: rgba(138, 43, 226, 0.06);
    border: 1px solid rgba(138, 43, 226, 0.15);
    border-radius: 8px;
    padding: 20px;
}

.new-ai-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    position: relative;
}

.new-ai-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.new-ai-loading-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: aiPulse 1.5s infinite;
}

.new-ai-status-text {
    font-size: 11px;
    color: #10b981;
    font-weight: 600;
    text-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
}

@keyframes aiPulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.1);
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
    }
}

.new-ai-icon {
    font-size: 16px;
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.6));
}

.new-ai-title {
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
    text-shadow: 0 0 6px rgba(138, 43, 226, 0.4);
}

.new-ai-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.new-ai-insight {
    font-size: 13px;
    line-height: 1.5;
    color: #d0d0d0;
}

.new-ai-insight strong {
    color: #e0e0e0;
    font-weight: 600;
}

.new-ai-insight span {
    color: #c0c0c0;
}

/* WHAT CHANGED SECTION */
.new-what-changed-section {
    background: rgba(138, 43, 226, 0.06);
    border: 1px solid rgba(138, 43, 226, 0.15);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    min-height: 200px;
}

.new-what-changed-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    position: relative;
}

.new-trend-indicator {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.new-trend-line {
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
    border-radius: 1px;
    position: relative;
}

.new-trend-dot {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.new-what-changed-icon {
    font-size: 16px;
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.6));
}

.new-what-changed-title {
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
    text-shadow: 0 0 6px rgba(138, 43, 226, 0.4);
}

.new-what-changed-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* SPARKLINE AREA */
.new-sparkline-area {
    background: rgba(138, 43, 226, 0.08);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.new-sparkline-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.new-sparkline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.new-sparkline-title {
    font-size: 12px;
    font-weight: 600;
    color: #e0e0e0;
    text-shadow: 0 0 4px rgba(138, 43, 226, 0.4);
}

.new-sparkline-period {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 500;
}

.new-sparkline-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70px;
    padding: 8px 0;
}

.sparkline-svg {
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.3));
}

.sparkline-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    color: #9ca3af;
    font-size: 12px;
    font-style: italic;
}

/* SPARKLINE ANIMATIONS */
@keyframes sparklineDraw {
    to { stroke-dashoffset: 0; }
}

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

.new-change-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.new-change-metric {
    background: rgba(138, 43, 226, 0.1);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.new-change-label {
    font-size: 11px;
    color: #b0b0b0;
    font-weight: 500;
}

.new-change-value {
    font-size: 12px;
    font-weight: 600;
    color: #e0e0e0;
}

.new-change-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.new-momentum {
    font-size: 12px;
    color: #d0d0d0;
    font-weight: 500;
}

.new-liquidity-earnings {
    font-size: 11px;
    color: #a0a0a0;
}

.new-change-insights {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.new-driver {
    font-size: 11px;
    color: #c0c0c0;
    line-height: 1.4;
}

.new-action {
    font-size: 11px;
    color: #6bcf7f;
    font-weight: 500;
}

.new-change-info {
    font-size: 12px;
    color: #a0a0a0;
    text-align: center;
    padding: 16px;
    background: rgba(138, 43, 226, 0.05);
    border-radius: 6px;
}

/* RESPONSIVE LAYOUT - COPYING EXISTING PATTERN */
@media (max-width: 960px) {
    .new-flareedge-grid {
        grid-template-columns: 1fr !important;
    }
    
    .new-evidence-board,
    .new-action-center {
        grid-column: 1 !important;
    }
}

@media (max-width: 640px) {
    .new-flareedge-grid {
        grid-template-columns: 1fr !important;
    }
    
    .new-evidence-board,
    .new-action-center {
        grid-column: 1 !important;
    }
}

/* NUCLEAR OPTION - FORCE 2 COLUMNS */
.new-flareedge-grid * {
    box-sizing: border-box !important;
}

.new-flareedge-grid > * {
    display: block !important;
    width: 100% !important;
}

/* DEBUGGING REMOVED - LAYOUT WORKING! */

/* ACTION CENTER STYLING */

.new-strategy-section {
    background: rgba(138, 43, 226, 0.12);
    border: 1px solid rgba(138, 43, 226, 0.25);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
}

.new-strategy-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.new-strategy-icon {
    font-size: 18px;
    filter: drop-shadow(0 0 6px rgba(138, 43, 226, 0.6));
}

.new-strategy-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: #e0e0e0;
    margin: 0;
    text-shadow: 0 0 6px rgba(138, 43, 226, 0.4);
}

.new-strategy-primary {
    background: linear-gradient(135deg, #8a2be2, #4b0082);
    color: white;
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
    border: 1px solid rgba(138, 43, 226, 0.5);
    box-shadow: 0 6px 16px rgba(138, 43, 226, 0.3);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.new-strategy-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(138, 43, 226, 0.4);
}

.new-strategy-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.new-param {
    background: rgba(138, 43, 226, 0.15);
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.new-param:hover {
    background: rgba(138, 43, 226, 0.2);
    border-color: rgba(138, 43, 226, 0.4);
}

.new-param-label {
    font-size: 12px;
    color: #b0b0b0;
    font-weight: 500;
}

.new-param-value {
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
}

.new-param-value.confidence-high {
    color: #6bcf7f;
    text-shadow: 0 0 6px rgba(107, 207, 127, 0.6);
}

.new-param-value.confidence-medium {
    color: #ffd93d;
    text-shadow: 0 0 6px rgba(255, 217, 61, 0.6);
}

.new-param-value.confidence-low {
    color: #ff6b6b;
    text-shadow: 0 0 6px rgba(255, 107, 107, 0.6);
}

.new-param-value.risk-high {
    color: #ff6b6b;
    text-shadow: 0 0 6px rgba(255, 107, 107, 0.6);
}

.new-param-value.risk-medium {
    color: #ffd93d;
    text-shadow: 0 0 6px rgba(255, 217, 61, 0.6);
}

.new-param-value.risk-low {
    color: #6bcf7f;
    text-shadow: 0 0 6px rgba(107, 207, 127, 0.6);
}

.new-tools-section {
    background: rgba(138, 43, 226, 0.08);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
}

.new-tools-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.new-tools-icon {
    font-size: 16px;
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.6));
}

.new-tools-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;
    margin: 0;
    text-shadow: 0 0 6px rgba(138, 43, 226, 0.4);
}

.new-tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.new-tool-item {
    background: rgba(138, 43, 226, 0.12);
    border: 1px solid rgba(138, 43, 226, 0.25);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.new-tool-item:hover {
    background: rgba(138, 43, 226, 0.18);
    border-color: rgba(138, 43, 226, 0.4);
    transform: translateY(-2px);
}

.new-tool-icon {
    font-size: 16px;
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.6));
}

.new-tool-name {
    font-size: 12px;
    color: #d0d0d0;
    font-weight: 500;
}

.new-upgrade-section {
    text-align: center;
    background: rgba(138, 43, 226, 0.08);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 10px;
    padding: 20px;
}

.new-btn-flareedge {
    background: linear-gradient(135deg, #8a2be2, #4b0082);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto 12px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 16px rgba(138, 43, 226, 0.3);
}

.new-btn-flareedge:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(138, 43, 226, 0.4);
}

.new-btn-text {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.new-btn-arrow {
    transition: transform 0.2s ease;
}

.new-btn-flareedge:hover .new-btn-arrow {
    transform: translateX(3px);
}

.new-cta-subtitle {
    font-size: 12px;
    color: #a0a0a0;
    font-style: italic;
}

/* ===== FLAREDGE TWO-COLUMN LAYOUT ===== */
.flareedge-two-column {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid #2d4a6b;
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

.flareedge-two-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #8b5cf6, #a855f7, #c084fc);
    border-radius: 16px 16px 0 0;
}

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

.flareedge-header h3 {
    color: #8b5cf6;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.flareedge-header h3::before {
    content: '⚡';
    font-size: 1.2rem;
}

.flareedge-badge {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.flareedge-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}

/* Column Headers */
.column-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.column-icon {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
}

.column-title {
    color: #8b5cf6;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}

/* Section Titles */
.section-title {
    color: #8b5cf6;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Evidence Column */
.evidence-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.evidence-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
}

.evidence-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.evidence-metric {
    text-align: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.evidence-metric:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-2px);
}

.metric-label {
    font-size: 0.8rem;
    color: #a0a0a0;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
}

.metric-value.direction-high { color: #6bcf7f; }
.metric-value.direction-medium { color: #ffd93d; }
.metric-value.direction-low { color: #ff6b6b; }

.metric-value.iv-high { color: #ff6b6b; }
.metric-value.iv-medium { color: #ffd93d; }
.metric-value.iv-low { color: #6bcf7f; }

.metric-value.liquidity-high { color: #6bcf7f; }
.metric-value.liquidity-medium { color: #ffd93d; }
.metric-value.liquidity-low { color: #ff6b6b; }

.metric-value.earnings-close { color: #ff6b6b; }
.metric-value.earnings-medium { color: #ffd93d; }
.metric-value.earnings-clear { color: #6bcf7f; }

/* AI Section */
.ai-section {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    padding: 16px;
}

.ai-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-insight {
    font-size: 0.9rem;
    line-height: 1.4;
}

.ai-insight strong {
    color: #8b5cf6;
}

.ai-insight span {
    color: #ffffff;
}

/* Action Column */
.action-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.strategy-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
}

.strategy-primary {
    text-align: center;
    padding: 20px 16px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    font-weight: 700;
    font-size: 1.3rem;
    color: white;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
    position: relative;
    overflow: hidden;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    margin-bottom: 16px;
}

.strategy-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.5);
}

.strategy-params {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.param {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    font-size: 0.9rem;
}

.param-label {
    color: #a0a0a0;
    font-weight: 600;
}

.param-value {
    color: #ffffff;
    font-weight: 700;
}

.param-value.confidence-high { color: #6bcf7f; }
.param-value.confidence-medium { color: #ffd93d; }
.param-value.confidence-low { color: #ff6b6b; }

.param-value.risk-high { color: #ff6b6b; }
.param-value.risk-medium { color: #ffd93d; }
.param-value.risk-low { color: #6bcf7f; }

/* Tools Section */
.tools-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
}

.tools-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.tool-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.tool-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(139, 92, 246, 0.2);
}

.tool-icon {
    font-size: 1rem;
}

.tool-name {
    color: #ffffff;
}

/* Upgrade Section */
.upgrade-section {
    text-align: center;
    padding: 16px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
}

.btn-flareedge {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.btn-flareedge:hover {
    background: linear-gradient(135deg, #a855f7, #c084fc);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
}

.btn-text {
    color: white;
}

.btn-arrow {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.btn-flareedge:hover .btn-arrow {
    transform: translateX(4px);
}

.cta-subtitle {
    color: #a0a0a0;
    font-size: 0.9rem;
    margin-top: 8px;
}

.strategy-name {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.strategy-confidence {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-block;
}

.strategy-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.strategy-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(15, 25, 45, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(124, 92, 255, 0.2);
}

.detail-label {
    color: #a0aec0;
    font-size: 0.8rem;
    font-weight: 500;
}

.detail-value {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Interactive Tools Preview Styles */
.interactive-tools-preview {
    background: linear-gradient(135deg, rgba(30, 42, 66, 0.6), rgba(20, 30, 50, 0.6));
    border: 1px solid rgba(124, 92, 255, 0.2);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

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

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

.tools-header h4 {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

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

.tool-preview {
    background: rgba(15, 25, 45, 0.6);
    border: 1px solid rgba(124, 92, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.tool-preview:hover {
    background: rgba(15, 25, 45, 0.8);
    border-color: rgba(124, 92, 255, 0.4);
    transform: translateY(-2px);
}

.tool-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.tool-name {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.tool-description {
    color: #a0aec0;
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Enhanced Earnings & Guidance Card Styles - Pattern Match */
.volatility-card-enhanced .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.volatility-card-enhanced .card-title {
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, #10b981, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.volatility-card-enhanced .flame-icon {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.volatility-card-enhanced .summary-line {
    font-size: 0.85rem;
    color: #22d3ee;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.volatility-card-enhanced .scrollable-content {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
    padding-bottom: 4px;
    box-sizing: border-box;
}

.volatility-card-enhanced .scrollable-content::-webkit-scrollbar {
    width: 4px;
}

.volatility-card-enhanced .scrollable-content::-webkit-scrollbar-track {
    background: rgba(30, 30, 40, 0.3);
    border-radius: 2px;
}

.volatility-card-enhanced .scrollable-content::-webkit-scrollbar-thumb {
    background: #10b981;
    border-radius: 2px;
}

.volatility-card-enhanced .scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #059669;
}

.volatility-card-enhanced .section {
    margin-bottom: 1.25rem;
}

.volatility-card-enhanced .section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.volatility-card-enhanced .section-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.volatility-card-enhanced .section-content {
    margin-left: 1.5rem;
    border-left: 2px solid;
    padding-left: 0.75rem;
}

.volatility-card-enhanced .bullet-list {
    list-style: none;
}

.volatility-card-enhanced .bullet-item {
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    line-height: 1.4;
}

.volatility-card-enhanced .bullet-item::before {
    content: '•';
    margin-right: 0.5rem;
    font-weight: bold;
}

.volatility-card-enhanced .risk-factors {
    color: #f87171;
}

.volatility-card-enhanced .risk-factors .section-header {
    color: #f87171;
}

.volatility-card-enhanced .risk-factors .section-content {
    border-left-color: #f87171;
}

.volatility-card-enhanced .risk-factors .bullet-item::before {
    color: #f87171;
}

.volatility-card-enhanced .qualified {
    color: #34d399;
}

.volatility-card-enhanced .qualified .section-header {
    color: #34d399;
}

.volatility-card-enhanced .qualified .section-content {
    border-left-color: #34d399;
}

.volatility-card-enhanced .qualified .bullet-item::before {
    color: #34d399;
}

.volatility-card-enhanced .guidance-metrics {
    color: #22d3ee;
}

.volatility-card-enhanced .guidance-metrics .section-header {
    color: #22d3ee;
}

.volatility-card-enhanced .guidance-metrics .section-content {
    border-left-color: #22d3ee;
}

.volatility-card-enhanced .guidance-metrics .bullet-item::before {
    color: #22d3ee;
}

.volatility-card-enhanced .analyst-consensus {
    color: #fbbf24;
}

.volatility-card-enhanced .analyst-consensus .section-header {
    color: #fbbf24;
}

.volatility-card-enhanced .analyst-consensus .section-content {
    border-left-color: #fbbf24;
}

.volatility-card-enhanced .analyst-consensus .bullet-item::before {
    color: #fbbf24;
}

.volatility-card-enhanced .star-highlight {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.volatility-card-enhanced .star {
    color: #fbbf24;
    font-size: 0.9rem;
}

.volatility-card-enhanced .highlight-details {
    font-size: 0.7rem;
    color: #34d399;
    margin-top: 0.2rem;
    font-weight: 500;
}

.volatility-card-enhanced .flip-hint {
    text-align: center;
    margin-top: 1rem;
    padding: 0.4rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 4px;
    border: 1px dashed #10b981;
    margin-bottom: 0.5rem;
}

.volatility-card-enhanced .flip-hint-text {
    color: #10b981;
    font-size: 0.7rem;
}

/* Earnings Timeline Styles - Ring-based design */
.earnings-timeline-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    position: relative;
    flex-shrink: 0;
}

.earnings-timeline-card .card-title-section {
    flex: 1;
}

.earnings-timeline-card .card-icon {
    font-size: 1.2rem;
    margin-right: 0.4rem;
    display: inline-block;
}

.earnings-timeline-card .card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 0.2rem;
    text-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}

.earnings-timeline-card .card-subtitle {
    font-size: 0.7rem;
    color: #94a3b8;
}

.earnings-timeline-card .status-badge {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #22c55e;
    color: #0f172a;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { 
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 25px rgba(34, 197, 94, 0.6);
        transform: scale(1.02);
    }
}

/* Timeline Container - Hybrid Sparkline Style */
.timeline-container {
    position: relative;
    height: 120px;
    margin: 1rem 0;
    padding: 20px 24px 10px 24px;
    flex-shrink: 0;
}

/* Sparkline Axis - Enhanced */
.timeline-axis {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(34, 211, 238, 0.25) 0%,
        rgba(34, 211, 238, 0.5) 50%,
        rgba(34, 211, 238, 0.25) 100%
    );
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(34, 211, 238, 0.2);
}

/* Sparkline - Enhanced Trend Line */
.trend-line {
    position: absolute;
    height: 3px;
    background: linear-gradient(
        90deg,
        #22c55e 0%,
        #22d3ee 50%,
        #f97316 100%
    );
    border-radius: 2px;
    bottom: 50px;
    left: 0;
    width: 0;
    box-shadow: 
        0 0 6px rgba(34, 197, 94, 0.5),
        0 0 12px rgba(34, 211, 238, 0.3);
    filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.5));
    animation: draw-line 1.5s ease-out forwards;
    transform: translateY(50%);
}

@keyframes draw-line {
    to {
        width: 85.7%;
    }
}

/* Dot wrapper for positioning */
.dot-wrapper {
    position: absolute;
    pointer-events: none;
}

/* Earnings Ring Container - Subtle unified style, text speaks */
.earnings-ring-container {
    position: absolute;
    width: 48px;
    height: 48px;
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
    z-index: 2;
}

.earnings-ring-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 6px rgba(58, 92, 125, 0.4));
}

.earnings-ring-track {
    stroke: rgba(58, 92, 125, 0.6);
    fill: rgba(26, 43, 60, 0.9);
    stroke-width: 2;
}

.earnings-ring-progress {
    display: none;
}

.earnings-ring-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: transparent;
    border-radius: 50%;
}

/* Color-coded values - let the text speak */
.ring-value {
    font-size: 0.68rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1;
    text-align: center;
}

.ring-value.beat {
    color: #22c55e;
}

.ring-value.miss {
    color: #ef4444;
}

.ring-value.meet {
    color: #94a3b8;
}

.ring-value.estimated {
    color: #94a3b8;
}

.ring-quarter {
    font-size: 0.52rem;
    color: #22d3ee;
    font-weight: 600;
    line-height: 1.1;
    margin-top: 3px;
    text-align: center;
    opacity: 0.9;
    white-space: nowrap;
}

/* Latest Quarters Highlight Section */
.latest-quarters {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.quarter-highlight {
    flex: 1;
    min-width: 120px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border: 1px solid rgba(34, 211, 238, 0.15);
    transition: all 0.3s ease;
}

.quarter-highlight:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(34, 211, 238, 0.3);
    transform: translateY(-2px);
}

.quarter-highlight.beat {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.quarter-highlight.beat:hover {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.1);
}

.quarter-highlight.miss {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.quarter-highlight.miss:hover {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.1);
}

.quarter-highlight.estimated {
    border-style: dashed;
    opacity: 0.7;
}

.quarter-label {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-bottom: 4px;
    font-weight: 500;
}

.quarter-eps {
    font-size: 0.9rem;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 2px;
}

.quarter-eps.beat {
    color: #22c55e;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.quarter-eps.miss {
    color: #ef4444;
}

.quarter-beat {
    font-size: 0.65rem;
    color: #94a3b8;
}

.quarter-beat.positive {
    color: #22c55e;
}

.quarter-beat.negative {
    color: #ef4444;
}

/* News Sentiment Card Styles - Matching Whale Meter style with green ring */
/* Ensure parent container is flex for proper layout */
.news-card-enhanced.news-sentiment-card,
.news-sentiment-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 454.77px;
}

/* Earnings Timeline Card - Same flex layout */
.volatility-card-enhanced.earnings-timeline-card,
.earnings-timeline-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 454.77px;
}

/* Earnings Timeline Activity Details - Bottom aligned */
.earnings-timeline-card .activity-details {
    margin-top: auto;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Whale Meter Activity Details - Bottom Justified */
.whale-activity-details,
#readiness-card-free .activity-details,
.readiness-card-free .activity-details {
    margin-top: 0;
    margin-bottom: -3px; /* Fine-tune: slight negative margin for perfect bottom alignment */
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end;
}

.whale-activity-details .activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.whale-activity-details .activity-item:last-child {
    margin-bottom: 0;
}

.whale-activity-details .activity-label {
    color: #94a3b8;
    font-size: 0.75rem;
}

.whale-activity-details .activity-value {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.8rem;
}

.whale-activity-details .activity-value.positive {
    color: #22c55e;
}

.whale-activity-details .activity-value.negative {
    color: #ef4444;
}

/* Whale Meter: Card wrapper - handles padding and fills card */
.whale-meter-card-wrapper,
#readiness-card-free-inner {
    padding: 1.5rem;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
}

/* Whale Meter: Inner card - this handles the space-between layout */
.whale-meter-card {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Whale Meter: Header - Top Justified */
.whale-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0;
    flex: 0 0 auto;
}

.whale-title-section h3 {
    font-size: 0.95rem;
    margin: 0 0 0.2rem;
    color: #e2e8f0;
}

.whale-subtitle {
    font-size: 0.7rem;
    color: #94a3b8;
}

.whale-badge {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Activity-based badge colors (matches ring activity level) */
.whale-badge.high {
    background: #22c55e; /* Green for high activity */
    color: #0f172a;
}

.whale-badge.moderate {
    background: #f59e0b; /* Yellow/amber for moderate activity */
    color: #0f172a;
}

.whale-badge.low {
    background: #64748b; /* Gray for low activity */
    color: #ffffff;
}

.whale-badge.error {
    background: #ef4444; /* Red for errors */
    color: #ffffff;
}

/* Whale Meter: Meter Section - Flexible Middle */
.whale-meter-section {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 0;
    padding: 1rem 0;
}

.earnings-timeline-card .activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.earnings-timeline-card .activity-item:last-child {
    margin-bottom: 0;
}

.earnings-timeline-card .activity-label {
    color: #94a3b8;
    font-size: 0.75rem;
}

.earnings-timeline-card .activity-value {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.8rem;
}

.earnings-timeline-card .activity-value.positive {
    color: #22c55e;
}

.earnings-timeline-card .activity-value.negative {
    color: #ef4444;
}

.news-sentiment-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.news-sentiment-card .card-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    color: #e2e8f0;
    text-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}

.news-sentiment-card .card-subtitle {
    font-size: 0.7rem;
    color: #94a3b8;
}

.news-sentiment-card .status-badge {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #0f172a;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
    animation: pulse-badge 2s infinite;
}

.news-sentiment-card .status-badge.bullish {
    background: #22c55e; /* Green for bullish */
    color: #0f172a;
}

.news-sentiment-card .status-badge.bearish {
    background: #ef4444; /* Red for bearish */
    color: #ffffff;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.news-sentiment-card .status-badge.neutral {
    background: #f59e0b; /* Amber/yellow for neutral */
    color: #0f172a;
}

/* News Meter Styles - Neutral purple ring (badge communicates sentiment) */
.news-meter-container {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0.5rem auto 20px;
    transform: translateZ(0);
    will-change: transform;
    flex-shrink: 0;
}

.news-meter {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
    will-change: transform;
}

.news-meter-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.4));
}

.news-ring-track {
    stroke: #0f172a;
    fill: none;
    stroke-width: 12;
}

.news-ring-progress {
    fill: none;
    stroke: #7c5cff; /* Neutral purple accent color (matches flareedge branding) */
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 440; /* 2 * π * 70 ≈ 440 */
    stroke-dashoffset: 440;
    transition: stroke-dashoffset 0.9s ease;
    transform: translateZ(0);
    will-change: transform;
}

.news-meter-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #0f172a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.news-score {
    font-size: 2rem;
    font-weight: 700;
    color: #7c5cff; /* Neutral purple accent color (matches ring) */
    text-shadow: 0 0 20px rgba(124, 92, 255, 0.5);
    line-height: 1;
}

/* Score text stays neutral - badge communicates sentiment */
.news-score.negative,
.news-score.neutral {
    color: #7c5cff;
    text-shadow: 0 0 20px rgba(124, 92, 255, 0.5);
}

.news-label {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 4px;
}

.news-sentiment-card .activity-details {
    margin-top: auto;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.news-sentiment-card .activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.news-sentiment-card .activity-item:last-child {
    margin-bottom: 0;
}

.news-sentiment-card .activity-label {
    color: #94a3b8;
    font-size: 0.75rem;
}

.news-sentiment-card .activity-value {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.8rem;
}

.news-sentiment-card .activity-value.positive {
    color: #22c55e;
}

.news-sentiment-card .activity-value.negative {
    color: #ef4444;
}

.meter-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}