@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

        /* RESET AND VIEWPORT CONTROLS */
        * {
            box-sizing: border-box !important;
        }

        html,
        body {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            pointer-events: auto;
            overflow-y: auto;
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #0A0E27 0%, #1A0B2E 50%, #2D1B69 100%);
            color: #E0D5FF;
            position: relative;
        }

        /* Font families */
        .font-mono,
        .jetbrains-mono {
            font-family: 'JetBrains Mono', monospace;
        }

        .cinzel {
            font-family: 'Cinzel', serif;
        }

        /* Mystical canvas */
        #mystical-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw !important;
            height: 100vh !important;
            z-index: -1;
            opacity: 0.15;
        }

        /* CONTAINER */
        .container {
            width: 100vw !important;
            max-width: 100vw !important;
            min-width: 100vw !important;
            padding: 0 15px !important;
            margin: 0 !important;
        }

        @media (min-width: 640px) {
            .container {
                padding: 0 20px !important;
            }
        }

        /* Quick fix - add this to test immediately */
        /* GLOBAL SCROLL FIX - Add this to your existing CSS section */

        /* Allow scrolling over all interactive elements */
        .glass-effect,
        .neon-glow,
        .chart-container,
        .large-chart-container,
        .overflow-x-auto,
        .table-wrapper,
        .tab-content,
        main,
        section,
        .grid>div,
        button:not(:hover),
        input:not(:focus),
        .search-results,
        .ai-analysis-container,
        .crystal-ball-loading,
        .price-cell,
        tbody tr,
        thead tr,
        li,
        .search-result-item,
        .pagination-controls,
        .flex.space-x-1.mb-6,
        .tab-btn:not(.tab-active):not(:hover) {
            pointer-events: auto !important;
        }

        /* Prevent event capture on problematic elements */
        canvas,
        svg,
        video,
        iframe,
        embed,
        object {
            pointer-events: none !important;
            touch-action: none !important;
        }

        /* Chart.js specific fixes */
        .chart-container>*,
        .large-chart-container>*,
        .chart-container canvas,
        .large-chart-container canvas {
            pointer-events: none !important;
        }

        /* Allow tooltips and interactions when needed */
        .chart-container:hover,
        .large-chart-container:hover {
            pointer-events: auto !important;
        }

        /* Mobile touch scroll fixes */
        @media (max-width: 768px) {
            .overflow-x-auto {
                touch-action: pan-x pan-y !important;
            }

            .tab-content {
                touch-action: pan-y !important;
                -webkit-overflow-scrolling: touch !important;
            }

            /* Allow vertical scrolling on body but don't force it with !important */
            body,
            html {
                overflow-x: hidden !important;
                touch-action: pan-y;
            }
        }


        /* Fix for any dynamically added elements */
        [style*="pointer-events: none"] {
            pointer-events: auto !important;
        }

        /* FORCE ELEMENTS TO VIEWPORT WIDTH */
        header,
        main,
        section,
        .tab-content,
        .glass-effect,
        .neon-glow {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-sizing: border-box !important;
        }

        /* GRID SYSTEM */
        .grid {
            display: grid !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            gap: 1.5rem !important;
            box-sizing: border-box !important;
        }

        .grid-cols-1 {
            grid-template-columns: 1fr !important;
        }

        .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
            grid-template-columns: repeat(4, 1fr) !important;
        }

        @media (max-width: 768px) {
            .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 0.75rem !important;
            }
        }

        @media (max-width: 640px) {
            .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
                grid-template-columns: 1fr !important;
            }
        }

        .grid-cols-1.lg\:grid-cols-3 {
            grid-template-columns: repeat(3, 1fr) !important;
        }

        @media (max-width: 1024px) {
            .grid-cols-1.lg\:grid-cols-3 {
                grid-template-columns: 1fr !important;
            }
        }

        .grid-cols-1.lg\:grid-cols-2 {
            grid-template-columns: repeat(2, 1fr) !important;
        }

        @media (max-width: 1024px) {
            .grid-cols-1.lg\:grid-cols-2 {
                grid-template-columns: 1fr !important;
            }
        }

        .lg\:col-span-2 {
            grid-column: span 2 !important;
        }

        @media (max-width: 1024px) {
            .lg\:col-span-2 {
                grid-column: 1 / -1 !important;
            }
        }

        /* Glass effect */
        .glass-effect {
            background: linear-gradient(135deg, rgba(45, 27, 105, 0.4), rgba(26, 11, 46, 0.3));
            backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 215, 0, 0.2);
            box-shadow:
                0 8px 32px rgba(45, 27, 105, 0.3),
                inset 0 1px 0 rgba(255, 215, 0, 0.1);
            position: relative;
        }

        .glass-effect::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg,
                    transparent 0%,
                    rgba(255, 215, 0, 0.05) 50%,
                    transparent 100%);
            pointer-events: none;
        }

        /* Neon glow */
        .neon-glow {
            box-shadow:
                0 0 20px rgba(255, 215, 0, 0.4),
                0 0 40px rgba(0, 212, 255, 0.2),
                inset 0 0 20px rgba(45, 27, 105, 0.2);
            position: relative;
        }

        .neon-glow::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg,
                    transparent,
                    rgba(255, 215, 0, 0.3),
                    transparent);
            border-radius: inherit;
            z-index: -1;
            animation: mysticalPulse 3s ease-in-out infinite;
        }

        @keyframes mysticalPulse {

            0%,
            100% {
                opacity: 0.5;
                transform: scale(1);
            }

            50% {
                opacity: 1;
                transform: scale(1.02);
            }
        }

        /* Tab Navigation - Stacking Redesign for Mobile */
        #mainTabNav {
            display: flex !important;
            flex-wrap: wrap !important;
            /* Allow wrapping */
            justify-content: center !important;
            gap: 0.5rem !important;
            overflow-x: visible !important;
            /* No scrolling needed */
            white-space: normal !important;
            /* Allow buttons to break lines if really needed, but wrap handles it */
            padding: 0.75rem !important;
            margin: 0 0 1rem 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            z-index: 50 !important;
            pointer-events: auto !important;
            touch-action: auto !important;
            /* Standard touch behavior */
            height: auto !important;
            /* Allow growing */
        }

        /* Make buttons fill space on mobile */
        #mainTabNav .tab-btn {
            flex: 1 1 auto !important;
            min-width: 80px !important;
            text-align: center !important;
            justify-content: center !important;
            margin-bottom: 2px !important;
        }

        /* Universal Stacked (Wrapped) Tabs for all screens */
        #mainTabNav {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            gap: 0.5rem !important;
            overflow-x: visible !important;
            white-space: normal !important;
            padding: 0.75rem !important;
            margin: 0 0 1rem 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            z-index: 50 !important;
            pointer-events: auto !important;
            touch-action: auto !important;
            height: auto !important;
        }

        #mainTabNav .tab-btn {
            flex: 1 1 auto !important;
            min-width: 80px !important;
            text-align: center !important;
            justify-content: center !important;
            margin-bottom: 2px !important;
        }

        /* Removed strict desktop nowrap rule to allow stacking everywhere */





        .flex.space-x-1.mb-6::-webkit-scrollbar {
            display: none !important;
        }

        .tab-btn {
            white-space: nowrap !important;
            padding: clamp(8px, 2.5vw, 12px) clamp(12px, 3.5vw, 20px) !important;
            font-size: clamp(11px, 3vw, 14px) !important;
            min-width: clamp(60px, 20vw, 100px) !important;
            max-width: clamp(120px, 30vw, 150px) !important;
            flex-shrink: 0 !important;
            border-radius: 6px !important;
            transition: all 0.3s ease !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            position: relative !important;
        }

        .tab-active {
            background: linear-gradient(180deg,
                    rgba(255, 215, 0, 0.2) 0%,
                    rgba(45, 27, 105, 0.3) 100%) !important;
            border-bottom: 2px solid #FFD700 !important;
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3) !important;
            color: #FFD700 !important;
        }

        .tab-btn:not(.tab-active) {
            color: rgba(224, 213, 255, 0.6) !important;
            background: rgba(0, 0, 0, 0.2) !important;
        }

        .tab-btn:not(.tab-active):hover {
            color: #E0D5FF !important;
            background: rgba(255, 215, 0, 0.1) !important;
        }

        /* Stat cards */
        .stat-card,
        .coin-table-row {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            width: 100% !important;
        }

        .stat-card::before,
        .coin-table-row::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle,
                    rgba(255, 215, 0, 0.1) 0%,
                    transparent 70%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .stat-card:hover::before,
        .coin-table-row:hover::before {
            opacity: 1;
        }

        .stat-card:hover,
        .coin-table-row:hover {
            background: linear-gradient(135deg,
                    rgba(45, 27, 105, 0.5),
                    rgba(255, 215, 0, 0.1));
            transform: translateY(-2px) scale(1.02);
            box-shadow:
                0 10px 30px rgba(45, 27, 105, 0.4),
                0 0 30px rgba(255, 215, 0, 0.2);
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-track {
            background: linear-gradient(180deg,
                    rgba(45, 27, 105, 0.3),
                    rgba(26, 11, 46, 0.5));
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #FFD700, #00D4FF);
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #FFED4E, #00E5FF);
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
        }

        /* Header */
        header {
            background: linear-gradient(135deg,
                    rgba(45, 27, 105, 0.6),
                    rgba(26, 11, 46, 0.4));
            border-bottom: 2px solid rgba(255, 215, 0, 0.3);
            position: relative;
        }

        header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg,
                    transparent,
                    #FFD700,
                    #00D4FF,
                    #FFD700,
                    transparent);
            animation: shimmer 3s ease-in-out infinite;
        }

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

            100% {
                transform: translateX(100%);
            }
        }

        /* Buttons */
        button {
            background: linear-gradient(135deg,
                    rgba(255, 215, 0, 0.2),
                    rgba(45, 27, 105, 0.3));
            border: 1px solid rgba(255, 215, 0, 0.3);
            color: #FFD700;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: radial-gradient(circle,
                    rgba(255, 215, 0, 0.4),
                    transparent);
            transition: width 0.4s ease, height 0.4s ease;
            transform: translate(-50%, -50%);
        }

        button:hover::before {
            width: 100%;
            height: 100%;
        }

        button:hover {
            background: linear-gradient(135deg,
                    rgba(255, 215, 0, 0.3),
                    rgba(45, 27, 105, 0.4));
            box-shadow:
                0 5px 20px rgba(255, 215, 0, 0.4),
                inset 0 0 10px rgba(255, 215, 0, 0.1);
            transform: translateY(-1px);
        }

        /* Input fields */
        input[type="text"] {
            background: linear-gradient(135deg,
                    rgba(45, 27, 105, 0.3),
                    rgba(26, 11, 46, 0.5));
            border: 1px solid rgba(255, 215, 0, 0.3);
            color: #E0D5FF;
            transition: all 0.3s ease;
            max-width: 100% !important;
        }

        input[type="text"]:focus {
            border-color: #FFD700;
            box-shadow:
                0 0 20px rgba(255, 215, 0, 0.3),
                inset 0 0 10px rgba(255, 215, 0, 0.1);
            outline: none;
        }

        input[type="text"]::placeholder {
            color: rgba(224, 213, 255, 0.5);
        }

        /* Table */
        .table-wrapper {
            width: 100% !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
        }

        .overflow-x-auto {
            width: 100% !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .overflow-x-auto table {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 100% !important;
            table-layout: auto !important;
            margin: 0 !important;
            font-size: clamp(10px, 1.5vw, 14px);
        }

        .overflow-x-auto th,
        .overflow-x-auto td {
            padding: clamp(4px, 1vw, 8px) !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Column widths */
        .overflow-x-auto th:nth-child(1),
        .overflow-x-auto td:nth-child(1) {
            width: 8% !important;
            min-width: 40px;
            text-align: center !important;
        }

        .overflow-x-auto th:nth-child(2),
        .overflow-x-auto td:nth-child(2) {
            width: 35% !important;
            min-width: 120px;
        }

        .overflow-x-auto th:nth-child(3),
        .overflow-x-auto td:nth-child(3) {
            width: 20% !important;
            min-width: 80px;
            text-align: right !important;
        }

        .overflow-x-auto th:nth-child(4),
        .overflow-x-auto td:nth-child(4) {
            width: 12% !important;
            min-width: 60px;
            text-align: right !important;
        }

        .overflow-x-auto th:nth-child(5),
        .overflow-x-auto td:nth-child(5) {
            width: 15% !important;
            min-width: 80px;
            text-align: right !important;
        }

        .overflow-x-auto th:nth-child(6),
        .overflow-x-auto td:nth-child(6) {
            width: 10% !important;
            min-width: 50px;
            text-align: center !important;
        }

        /* Table styling */
        table {
            border-collapse: separate;
            border-spacing: 0 2px;
            width: 100% !important;
        }

        thead tr {
            background: linear-gradient(90deg,
                    rgba(45, 27, 105, 0.5),
                    rgba(255, 215, 0, 0.1));
        }

        thead th {
            color: #FFD700;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 2px solid rgba(255, 215, 0, 0.3);
        }

        tbody tr {
            background: linear-gradient(135deg,
                    rgba(45, 27, 105, 0.2),
                    rgba(26, 11, 46, 0.3));
            transition: all 0.3s ease;
        }

        tbody tr:hover {
            background: linear-gradient(135deg,
                    rgba(45, 27, 105, 0.4),
                    rgba(255, 215, 0, 0.15));
            box-shadow: 0 4px 15px rgba(45, 27, 105, 0.3);
        }

        /* Price change colors */
        .text-green-400 {
            color: #00D4FF !important;
        }

        .text-red-400 {
            color: #FF6B9D !important;
        }

        /* Chart containers */
        .chart-container,
        .large-chart-container {
            background: linear-gradient(135deg,
                    rgba(45, 27, 105, 0.2),
                    rgba(26, 11, 46, 0.3));
            border-radius: 12px;
            padding: clamp(10px, 2vw, 20px);
            border: 1px solid rgba(255, 215, 0, 0.2);
            box-shadow: inset 0 0 20px rgba(45, 27, 105, 0.2);
            width: 100% !important;
            max-width: 100% !important;
            height: clamp(300px, 40vh, 500px);
            /* Increased minimum height */
            display: flex;
            flex-direction: column;
        }

        .large-chart-container h3 {
            flex-shrink: 0;
            margin-bottom: 1rem;
        }

        .chart-container canvas,
        .large-chart-container canvas {
            width: 100% !important;
            height: auto !important;
            flex-grow: 1;
            min-height: 0;
        }

        /* Loading spinner */
        .ai-loading-spinner {
            border: 3px solid rgba(255, 215, 0, 0.2);
            border-top: 3px solid #FFD700;
            border-radius: 50%;
            width: clamp(30px, 5vw, 40px);
            height: clamp(30px, 5vw, 40px);
            animation: mysticalSpin 1s linear infinite;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
        }

        @keyframes mysticalSpin {
            0% {
                transform: rotate(0deg);
                box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
            }

            50% {
                box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
            }

            100% {
                transform: rotate(360deg);
                box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
            }
        }

        /* Crystal ball loading */
        .crystal-ball-loading {
            width: clamp(40px, 6vw, 60px);
            height: clamp(40px, 6vw, 60px);
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%,
                    #00D4FF, #2D1B69, #1A0B2E);
            box-shadow:
                0 0 30px rgba(0, 212, 255, 0.6),
                inset -5px -5px 15px rgba(0, 0, 0, 0.3);
            animation: crystalGlow 2s ease-in-out infinite;
            position: relative;
        }

        .crystal-ball-loading::before {
            content: '';
            position: absolute;
            top: 10%;
            left: 15%;
            width: 20px;
            height: 20px;
            background: radial-gradient(circle,
                    rgba(255, 255, 255, 0.8),
                    transparent);
            border-radius: 50%;
        }

        @keyframes crystalGlow {

            0%,
            100% {
                box-shadow:
                    0 0 30px rgba(0, 212, 255, 0.6),
                    inset -5px -5px 15px rgba(0, 0, 0, 0.3);
            }

            50% {
                box-shadow:
                    0 0 50px rgba(255, 215, 0, 0.8),
                    inset -5px -5px 15px rgba(0, 0, 0, 0.3);
            }
        }

        /* AI Analysis Container */
        .ai-analysis-container {
            background: linear-gradient(135deg,
                    rgba(45, 27, 105, 0.3),
                    rgba(26, 11, 46, 0.4));
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 12px;
            padding: clamp(20px, 3vw, 30px) !important;
            width: 100% !important;
            max-width: 100% !important;
            max-height: clamp(400px, 70vh, 800px);
            overflow-y: auto;
            line-height: 1.7 !important;
            font-size: clamp(15px, 2vw, 17px) !important;
        }

        /* AI Typography */
        .ai-analysis-container h1 {
            font-size: clamp(1.5rem, 4vw, 2rem) !important;
            line-height: 1.3 !important;
            margin-bottom: 1.5rem !important;
            padding-bottom: 0.75rem !important;
            border-bottom: 2px solid rgba(255, 215, 0, 0.3) !important;
        }

        .ai-analysis-container h2 {
            font-size: clamp(1.25rem, 3.5vw, 1.5rem) !important;
            line-height: 1.4 !important;
            margin-top: 2rem !important;
            margin-bottom: 1rem !important;
            padding-bottom: 0.5rem !important;
            border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important;
        }

        .ai-analysis-container h3 {
            font-size: clamp(1.1rem, 3vw, 1.25rem) !important;
            line-height: 1.4 !important;
            margin-top: 1.5rem !important;
            margin-bottom: 0.75rem !important;
        }

        .ai-analysis-container p {
            margin-bottom: 1.25rem !important;
            text-align: justify;
            text-justify: inter-word;
        }

        .ai-analysis-container ul,
        .ai-analysis-container ol {
            margin: 1rem 0 !important;
            padding-left: 2rem !important;
        }

        .ai-analysis-container li {
            margin-bottom: 0.75rem !important;
            line-height: 1.6 !important;
        }

        .ai-analysis-container strong {
            color: #FFD700 !important;
            font-weight: 600 !important;
        }

        .ai-analysis-container code {
            background: rgba(0, 0, 0, 0.4) !important;
            padding: 0.2rem 0.5rem !important;
            border-radius: 4px !important;
            font-size: 0.9em !important;
            color: #00D4FF !important;
        }

        .ai-analysis-container blockquote {
            margin: 1.5rem 0 !important;
            padding: 1rem 1.5rem !important;
            background: rgba(255, 215, 0, 0.05) !important;
            border-left: 4px solid #FFD700 !important;
            font-style: italic !important;
            border-radius: 0 8px 8px 0 !important;
        }

        .ai-analysis-container .recommendation-box {
            background: linear-gradient(135deg,
                    rgba(255, 215, 0, 0.1),
                    rgba(45, 27, 105, 0.2)) !important;
            border: 1px solid rgba(255, 215, 0, 0.3) !important;
            border-radius: 8px !important;
            padding: 1.25rem !important;
            margin: 1.5rem 0 !important;
        }

        .ai-analysis-container .risk-warning {
            background: rgba(255, 107, 157, 0.1) !important;
            border: 1px solid rgba(255, 107, 157, 0.3) !important;
            border-radius: 8px !important;
            padding: 1rem !important;
            margin: 1rem 0 !important;
        }

        /* Enhanced paragraph spacing */
        .ai-analysis-container .analysis-content p {
            margin-bottom: 1.5rem !important;
            text-align: justify;
            text-justify: inter-word;
            line-height: 1.8 !important;
        }

        .ai-analysis-container .analysis-content br {
            display: block;
            margin-bottom: 0.75rem;
            content: "";
        }

        .ai-analysis-container ul {
            margin: 1.5rem 0 !important;
            padding-left: 2rem !important;
        }

        .ai-analysis-container li {
            margin-bottom: 1rem !important;
            line-height: 1.7 !important;
            position: relative;
        }

        .ai-analysis-container ul li::marker {
            color: #FFD700;
            font-size: 1.2em;
        }

        .ai-analysis-container h1+p,
        .ai-analysis-container h2+p,
        .ai-analysis-container h3+p {
            margin-top: 1rem !important;
        }

        .ai-analysis-container pre {
            margin: 2rem 0 !important;
        }

        .ai-analysis-container blockquote {
            margin: 2rem 0 !important;
        }

        /* Headings */
        h1,
        h2,
        h3 {
            background: linear-gradient(135deg, #FFD700, #00D4FF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
        }

        /* Links */
        a {
            color: #00D4FF;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
        }

        a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #FFD700, #00D4FF);
            transition: width 0.3s ease;
        }

        a:hover::after {
            width: 100%;
        }

        a:hover {
            color: #FFD700;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }

        /* Code blocks */
        code,
        pre {
            background: linear-gradient(135deg,
                    rgba(45, 27, 105, 0.5),
                    rgba(26, 11, 46, 0.7));
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 6px;
            color: #00D4FF;
            font-family: 'JetBrains Mono', monospace;
            max-width: 100% !important;
            overflow-x: auto;
        }

        /* Blockquotes */
        blockquote {
            border-left: 4px solid #FFD700;
            background: linear-gradient(90deg,
                    rgba(255, 215, 0, 0.1),
                    transparent);
            padding: 10px 20px;
            margin: 15px 0;
            font-style: italic;
            color: #E0D5FF;
            width: 100% !important;
            box-sizing: border-box !important;
        }

        /* Search results */
        .search-results {
            background: linear-gradient(135deg,
                    rgba(45, 27, 105, 0.9),
                    rgba(26, 11, 46, 0.9));
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(45, 27, 105, 0.5);
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        .search-result-item {
            padding: 10px 15px;
            color: #E0D5FF;
            transition: all 0.3s ease;
            border-bottom: 1px solid rgba(255, 215, 0, 0.1);
            width: 100% !important;
            box-sizing: border-box !important;
        }

        .search-result-item:hover {
            background: linear-gradient(135deg,
                    rgba(255, 215, 0, 0.2),
                    rgba(45, 27, 105, 0.3));
            color: #FFD700;
        }

        /* Pagination */
        #paginationControls {
            width: 100% !important;
            max-width: 100% !important;
        }

        #paginationControls button {
            background: linear-gradient(135deg,
                    rgba(255, 215, 0, 0.15),
                    rgba(45, 27, 105, 0.25));
            border: 1px solid rgba(255, 215, 0, 0.3);
            color: #FFD700;
        }

        #paginationControls button:hover:not(:disabled) {
            background: linear-gradient(135deg,
                    rgba(255, 215, 0, 0.25),
                    rgba(45, 27, 105, 0.35));
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
        }

        #paginationControls button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Sparklines */
        .sparkline-positive {
            stroke: #00D4FF;
            filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.6));
        }

        .sparkline-negative {
            stroke: #FF6B9D;
            filter: drop-shadow(0 0 3px rgba(255, 107, 157, 0.6));
        }

        /* MOBILE RESPONSIVE */
        @media (max-width: 768px) {
            body {
                font-size: 14px;
            }

            header {
                padding: 10px 0;
            }

            header h1 {
                font-size: clamp(1rem, 4vw, 1.2rem) !important;
                line-height: 1.2;
            }

            #coinSearch {
                width: 100% !important;
                max-width: clamp(150px, 40vw, 200px);
                font-size: 14px;
                padding: 8px 12px;
            }

            button {
                padding: 8px 12px;
                font-size: clamp(12px, 3vw, 14px);
            }

            .glass-effect {
                padding: clamp(10px, 2vw, 15px) !important;
                margin: 5px 0;
            }

            /* Hide table columns on mobile */
            .overflow-x-auto th:nth-child(5),
            .overflow-x-auto td:nth-child(5),
            .overflow-x-auto th:nth-child(6),
            .overflow-x-auto td:nth-child(6) {
                display: none;
            }

            .overflow-x-auto th:nth-child(2),
            .overflow-x-auto td:nth-child(2) {
                width: 50% !important;
                min-width: 100px;
            }

            .overflow-x-auto th:nth-child(3),
            .overflow-x-auto td:nth-child(3) {
                width: 25% !important;
                min-width: 60px;
            }

            .overflow-x-auto th:nth-child(4),
            .overflow-x-auto td:nth-child(4) {
                width: 25% !important;
                min-width: 60px;
            }

            /* Mobile AI Analysis */
            .ai-analysis-container {
                padding: clamp(12px, 4vw, 18px) !important;
                font-size: clamp(13px, 3vw, 14px) !important;
                line-height: 1.5 !important;
                word-spacing: 0.1em !important;
            }

            .ai-analysis-container .analysis-content {
                line-height: 1.6 !important;
            }

            .ai-analysis-container .analysis-content p {
                margin-bottom: 1.2rem !important;
                text-align: left !important;
                line-height: 1.6 !important;
                font-size: clamp(13px, 3vw, 14px) !important;
            }

            .ai-analysis-container .analysis-content br {
                display: block;
                margin-bottom: 0.5rem !important;
                line-height: 1.4 !important;
            }

            .ai-analysis-container h1 {
                font-size: clamp(1.2rem, 5vw, 1.4rem) !important;
                margin-top: 1rem !important;
                margin-bottom: 1rem !important;
                line-height: 1.3 !important;
            }

            .ai-analysis-container h2 {
                font-size: clamp(1.1rem, 4.5vw, 1.2rem) !important;
                margin-top: 1.5rem !important;
                margin-bottom: 0.8rem !important;
                line-height: 1.3 !important;
            }

            .ai-analysis-container h3 {
                font-size: clamp(1rem, 4vw, 1.1rem) !important;
                margin-top: 1.2rem !important;
                margin-bottom: 0.6rem !important;
                line-height: 1.3 !important;
            }

            .ai-analysis-container ul {
                margin: 1rem 0 !important;
                padding-left: 1.2rem !important;
            }

            .ai-analysis-container li {
                margin-bottom: 0.6rem !important;
                line-height: 1.5 !important;
                font-size: clamp(12px, 3vw, 13px) !important;
                padding-left: 0.5rem !important;
            }

            .ai-analysis-container code {
                font-size: 0.85em !important;
                padding: 0.15rem 0.4rem !important;
            }

            .ai-analysis-container blockquote {
                padding: 0.8rem 1rem !important;
                margin: 1rem 0 !important;
                font-size: clamp(12px, 3vw, 13px) !important;
                line-height: 1.5 !important;
            }

            .ai-analysis-container pre {
                padding: 0.8rem !important;
                margin: 1rem 0 !important;
                font-size: 0.85em !important;
            }

            /* Fix mobile list bullets */
            .ai-analysis-container ul li {
                list-style: none !important;
                position: relative !important;
            }

            .ai-analysis-container ul li::before {
                content: "•" !important;
                position: absolute !important;
                left: -1.2rem !important;
                top: 0 !important;
                color: #FFD700 !important;
                font-size: 1.1em !important;
            }

            /* Search results mobile */
            .search-results {
                position: absolute !important;
                top: 60px !important;
                left: 15px !important;
                right: 15px !important;
                width: calc(100vw - 30px) !important;
                max-height: 300px;
                overflow-y: auto;
                z-index: 1000;
            }

            /* Share buttons mobile */
            .flex.items-center.justify-end.space-x-3.mb-4 {
                flex-wrap: wrap;
                gap: 5px;
            }

            .flex.items-center.justify-end.space-x-3.mb-4 button {
                padding: 6px;
                min-width: 32px;
            }

            .flex.items-center.justify-end.space-x-3.mb-4 span {
                width: 100%;
                margin-bottom: 5px;
            }

            /* Pagination mobile */
            #paginationControls {
                flex-direction: column;
                gap: 10px;
            }

            #paginationControls .flex {
                order: 2;
            }

            #paginationControls button {
                width: 100%;
                margin: 2px 0;
            }

            /* Performance optimizations */
            .neon-glow {
                box-shadow: 0 2px 10px rgba(255, 215, 0, 0.2);
            }

            .stat-card:hover,
            .coin-table-row:hover {
                transform: none;
                box-shadow: 0 4px 15px rgba(45, 27, 105, 0.2);
            }
        }

        @media (max-width: 640px) {
            .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
                grid-template-columns: 1fr !important;
            }

            .grid-cols-1.lg\:grid-cols-3 {
                grid-template-columns: 1fr !important;
            }

            .grid-cols-1.lg\:grid-cols-2 {
                grid-template-columns: 1fr !important;
            }

            header h1 {
                font-size: clamp(0.9rem, 4vw, 1rem) !important;
            }

            .tab-btn {
                padding: 6px 12px;
                font-size: clamp(10px, 3vw, 12px);
                min-width: clamp(50px, 12vw, 70px);
            }

            .glass-effect {
                padding: clamp(8px, 2vw, 10px) !important;
            }

            button {
                padding: 6px 10px;
                font-size: clamp(10px, 3vw, 12px);
            }

            table {
                font-size: clamp(9px, 2.5vw, 11px);
            }

            th,
            td {
                padding: clamp(3px, 1vw, 6px) !important;
            }
        }

        @media (max-width: 480px) {
            .ai-analysis-container {
                padding: clamp(10px, 3vw, 15px) !important;
                font-size: 12px !important;
                line-height: 1.4 !important;
            }

            .ai-analysis-container .analysis-content p {
                margin-bottom: 1rem !important;
                font-size: 12px !important;
                line-height: 1.4 !important;
            }

            .ai-analysis-container .analysis-content br {
                margin-bottom: 0.3rem !important;
            }

            .ai-analysis-container li {
                font-size: 11px !important;
                margin-bottom: 0.5rem !important;
            }

            .ai-analysis-container li::before {
                left: -1rem !important;
                font-size: 1em !important;
            }

            .ai-analysis-container ul {
                padding-left: 1rem !important;
            }
        }

        @media (max-width: 768px) and (orientation: landscape) {
            .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
                grid-template-columns: repeat(4, 1fr) !important;
                gap: 0.5rem !important;
            }

            .glass-effect {
                padding: clamp(6px, 1.5vw, 8px) !important;
            }
        }

        /* High DPI displays */
        @media (-webkit-min-device-pixel-ratio: 2),
        (min-resolution: 192dpi) {
            .neon-glow::after {
                animation: mysticalPulse 2s ease-in-out infinite;
            }

            .crystal-ball-loading {
                animation: crystalGlow 1.5s ease-in-out infinite;
            }
        }

        /* Reduced motion */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }

            .neon-glow::after {
                animation: none;
            }

            .crystal-ball-loading {
                animation: none;
            }
        }

        /* Print styles */
        @media print {
            body {
                background: white !important;
                color: black !important;
                width: 100% !important;
                overflow: visible !important;
            }

            .glass-effect {
                background: white !important;
                border: 1px solid black !important;
                box-shadow: none !important;
            }

            .neon-glow {
                box-shadow: none !important;
            }

            #mystical-canvas {
                display: none !important;
            }

            button {
                display: none !important;
            }
        }

        /* Price grid styling */
        .price-cell {
            padding: 6px 8px;
            border-radius: 6px;
            transition: all 0.3s ease;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            border: 1px solid transparent;
        }

        .price-cell:hover {
            transform: scale(1.02);
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
        }

        .price-cell.bg-green-400\/20 {
            background: rgba(16, 185, 129, 0.2);
            border-color: rgba(16, 185, 129, 0.5);
        }

        .price-cell.bg-red-400\/20 {
            background: rgba(239, 68, 68, 0.2);
            border-color: rgba(239, 68, 68, 0.5);
        }

        .price-cell.border-green-400 {
            border-color: #10b981 !important;
        }

        .price-cell.border-red-400 {
            border-color: #ef4444 !important;
        }

        /* Mobile responsive adjustments */
        @media (max-width: 768px) {
            .price-cell {
                font-size: 10px;
                padding: 4px 6px;
            }

            .overflow-x-auto table {
                font-size: clamp(9px, 2.5vw, 11px);
            }

            th,
            td {
                padding: clamp(3px, 1vw, 6px) !important;
            }
        }

        /* Custom Animations */
        .animate-pulse-slow {
            animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: .5;
            }
        }

        /* Scrollbar styling for new elements */
        .scrollbar-thin::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .scrollbar-thin::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.3);
        }

        .scrollbar-thin::-webkit-scrollbar-thumb {
            background: rgba(74, 222, 128, 0.3);
            border-radius: 3px;
        }

        .scrollbar-thin::-webkit-scrollbar-thumb:hover {
            background: rgba(74, 222, 128, 0.5);
        }

        /* Offline Mode Styling */
        body.offline-mode {
            filter: grayscale(0.8);
            transition: filter 0.5s ease;
        }

        body.offline-mode::after {
            content: 'OFFLINE MODE - CACHED DATA';
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #ef4444;
            color: white;
            text-align: center;
            padding: 8px;
            font-size: 12px;
            font-weight: bold;
            z-index: 9999;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
            animation: slideUp 0.3s ease-out;
        }

        @keyframes slideUp {
            from {
                transform: translateY(100%);
            }

            to {
                transform: translateY(0);
            }
        }