:root {
            --bs-body-bg: #0d1117;
            --bs-body-color: #c9d1d9;
            --card-bg: #161b22;
            --border-color: #30363d;
        }

        body {
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
        }

        /* Override text-muted untuk dark theme - lebih terang */
        .text-muted {
            color: #8b949e !important;
        }

        /* Small text lebih readable */
        small,
        .small {
            color: #adbac7;
        }

        .card {
            background-color: var(--card-bg);
            border-color: var(--border-color);
        }

        .table {
            color: var(--bs-body-color);
        }

        .table-dark {
            --bs-table-bg: #21262d;
            --bs-table-border-color: var(--border-color);
        }

        .badge-oversold {
            background: linear-gradient(135deg, #238636, #2ea043);
        }

        .badge-overbought {
            background: linear-gradient(135deg, #da3633, #f85149);
        }

        .badge-neutral {
            background-color: #484f58;
        }

        .badge-moment-emas {
            background: linear-gradient(135deg, #f0b132, #ffd700);
            color: #000;
        }

        .rsi-deep {
            color: #3fb950;
            font-weight: bold;
        }

        .rsi-oversold {
            color: #58a6ff;
        }

        .rsi-neutral {
            color: #8b949e;
        }

        .rsi-overbought {
            color: #f85149;
        }

        .stoch-zero {
            color: #ffd700;
            font-weight: bold;
        }

        .header-stats {
            background: linear-gradient(135deg, #161b22, #21262d);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .stat-card {
            text-align: center;
            padding: 15px;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: bold;
        }

        .stat-label {
            font-size: 0.875rem;
            color: #8b949e;
        }

        .moment-emas-alert {
            background: linear-gradient(135deg, #1a1400 0%, #2d2000 50%, #1a1400 100%);
            border: 1px solid rgba(255, 215, 0, 0.3);
            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.1);
        }

        .moment-emas-alert .card-body {
            max-height: 600px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .moment-emas-alert .card-header {
            background: linear-gradient(90deg, rgba(255,215,0,0.15) 0%, transparent 100%);
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        }

        .moment-emas-card {
            background: linear-gradient(145deg, rgba(255,215,0,0.1) 0%, rgba(255,215,0,0.03) 100%);
            border: 2px solid rgba(255, 215, 0, 0.28);
            border-radius: 12px;
            transition: all 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            min-height: 140px;
            padding: 16px;
        }

        .moment-emas-card:hover {
            background: linear-gradient(145deg, rgba(255,215,0,0.18) 0%, rgba(255,215,0,0.06) 100%);
            border-color: rgba(255, 215, 0, 0.55);
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(255, 215, 0, 0.22);
        }

        .moment-emas-symbol {
            font-size: 1.2rem;
            font-weight: 700;
            color: #ffd700;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
            letter-spacing: 0.5px;
            line-height: 1.3;
        }

        .moment-emas-badge {
            background: linear-gradient(135deg, #ffd700, #ffb800);
            color: #000;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 6px;
            display: inline-block;
            line-height: 1;
            box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
        }

        .moment-emas-price {
            font-family: 'SF Mono', 'Monaco', monospace;
            color: #e6e6e6;
            font-size: 0.95rem;
            margin-top: 6px;
            font-weight: 500;
        }

        .moment-emas-depth {
            color: #a0a0a0;
            font-size: 0.76rem;
            margin-top: 6px;
            font-weight: 500;
        }

        .moment-emas-stats {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 6px;
        }

        .btn-gold {
            background: linear-gradient(135deg, #ffd700, #ffb800);
            color: #000;
            border: none;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .btn-gold:hover {
            background: linear-gradient(135deg, #ffe44d, #ffc933);
            color: #000;
            box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
        }

        .btn-outline-gold {
            border: 1px solid rgba(255, 215, 0, 0.5);
            color: #ffd700;
            background: transparent;
            transition: all 0.2s ease;
        }

        .btn-outline-gold:hover {
            background: rgba(255, 215, 0, 0.1);
            border-color: #ffd700;
            color: #ffd700;
        }

        @keyframes glow {
            0%, 100% {
                box-shadow: 0 0 5px #ffd700;
            }
            50% {
                box-shadow: 0 0 20px #ffd700;
            }
        }

        /* PLATINUM badge in table */
        .badge-platinum {
            background: linear-gradient(135deg, #E5E4E2 0%, #C0C0C0 50%, #A8A8A8 100%);
            color: #1a1a2e;
            font-weight: bold;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
            animation: badge-platinum-shine 2s linear infinite;
            position: relative;
            overflow: hidden;
        }

        @keyframes badge-platinum-shine {
            0%, 100% {
                box-shadow: 0 0 3px rgba(229, 228, 226, 0.5);
            }
            50% {
                box-shadow: 0 0 8px rgba(229, 228, 226, 0.8), 0 0 12px rgba(192, 192, 192, 0.5);
            }
        }

        .platinum-alert {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            border: 2px solid #E5E4E2;
            animation: platinum-glow 3s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }

        .platinum-alert::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent 30%,
                    rgba(229, 228, 226, 0.1) 50%,
                    transparent 70%);
            animation: platinum-shine 4s linear infinite;
        }

        @keyframes platinum-glow {
            0%, 100% {
                box-shadow: 0 0 10px rgba(229, 228, 226, 0.3), 0 0 20px rgba(176, 196, 222, 0.2);
            }
            50% {
                box-shadow: 0 0 20px rgba(229, 228, 226, 0.5), 0 0 40px rgba(176, 196, 222, 0.3), 0 0 60px rgba(192, 192, 192, 0.2);
            }
        }

        @keyframes platinum-shine {
            0% {
                transform: translateX(-100%) rotate(45deg);
            }
            100% {
                transform: translateX(100%) rotate(45deg);
            }
        }

        .platinum-header {
            background: linear-gradient(90deg, #E5E4E2 0%, #C0C0C0 25%, #E8E8E8 50%, #C0C0C0 75%, #E5E4E2 100%);
            background-size: 200% 100%;
            animation: platinum-header-shine 3s linear infinite;
            color: #1a1a2e;
            font-weight: bold;
        }

        @keyframes platinum-header-shine {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }

        /* DIAMOND badge (Ultra Premium: 6H extreme oversold + 4H momentum turning) */
        .badge-diamond-premium {
            background: linear-gradient(135deg, #FF1493 0%, #9932CC 25%, #4169E1 50%, #9932CC 75%, #FF1493 100%);
            background-size: 200% 200%;
            color: #ffffff;
            font-weight: bold;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
            animation: badge-diamond-shine 3s ease-in-out infinite;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(255, 20, 147, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.2);
        }

        @keyframes badge-diamond-shine {
            0%, 100% {
                background-position: 0% 50%;
                box-shadow: 0 0 10px rgba(255, 20, 147, 0.6), 0 0 15px rgba(153, 50, 204, 0.4);
            }
            50% {
                background-position: 100% 50%;
                box-shadow: 0 0 15px rgba(255, 20, 147, 0.8), 0 0 25px rgba(65, 105, 225, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.3);
            }
        }

        .diamond-alert {
            background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 50%, #0f1f3a 100%);
            border: 2px solid #FF1493;
            animation: diamond-glow 2.5s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }

        .diamond-alert::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent 30%,
                    rgba(255, 20, 147, 0.15) 50%,
                    transparent 70%);
            animation: diamond-shine 3s linear infinite;
        }

        @keyframes diamond-glow {
            0%, 100% {
                box-shadow: 0 0 10px rgba(255, 20, 147, 0.4), 0 0 20px rgba(153, 50, 204, 0.3);
            }
            50% {
                box-shadow: 0 0 20px rgba(255, 20, 147, 0.7), 0 0 40px rgba(153, 50, 204, 0.5), 0 0 60px rgba(65, 105, 225, 0.3);
            }
        }

        @keyframes diamond-shine {
            0% {
                transform: translateX(-100%) rotate(45deg);
            }
            100% {
                transform: translateX(100%) rotate(45deg);
            }
        }

        /* SURGE badge (Premium Tier: Strong uptrend pullback recovery) */
        .badge-surge-premium {
            background: linear-gradient(135deg, #FF6B35 0%, #F7931E 25%, #FFB700 50%, #F7931E 75%, #FF6B35 100%);
            background-size: 200% 200%;
            color: #ffffff;
            font-weight: bold;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
            animation: badge-surge-burst 2.5s ease-in-out infinite;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 10px rgba(255, 107, 53, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.2);
        }

        @keyframes badge-surge-burst {
            0%, 100% {
                background-position: 0% 50%;
                box-shadow: 0 0 10px rgba(255, 107, 53, 0.6), 0 0 15px rgba(247, 147, 30, 0.4);
                transform: scale(1);
            }
            50% {
                background-position: 100% 50%;
                box-shadow: 0 0 15px rgba(255, 107, 53, 0.8), 0 0 25px rgba(255, 183, 0, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.3);
                transform: scale(1.05);
            }
        }

        .surge-alert {
            background: linear-gradient(135deg, #1a1a2e 0%, #3d2817 50%, #1f1f00 100%);
            border: 2px solid #FF6B35;
            animation: surge-glow 2s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }

        .surge-alert::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent 30%,
                    rgba(255, 107, 53, 0.15) 50%,
                    transparent 70%);
            animation: surge-burst 2s linear infinite;
        }

        @keyframes surge-glow {
            0%, 100% {
                box-shadow: 0 0 10px rgba(255, 107, 53, 0.4), 0 0 20px rgba(247, 147, 30, 0.3);
            }
            50% {
                box-shadow: 0 0 20px rgba(255, 107, 53, 0.7), 0 0 40px rgba(255, 183, 0, 0.5), 0 0 60px rgba(255, 107, 53, 0.3);
            }
        }

        @keyframes surge-burst {
            0% {
                transform: translateX(-100%) rotate(45deg);
            }
            100% {
                transform: translateX(100%) rotate(45deg);
            }
        }

        /* MACRO_GOLD badge (Strategic Tier: Macro-level oversold with structural opportunity) */
        .badge-macro-gold {
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
            background-size: 200% 200%;
            color: #000000;
            font-weight: bold;
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
            animation: badge-macro-shine 2.5s linear infinite;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 8px rgba(255, 215, 0, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.3);
        }

        @keyframes badge-macro-shine {
            0%, 100% {
                background-position: 0% 50%;
                box-shadow: 0 0 8px rgba(255, 215, 0, 0.5), 0 0 12px rgba(255, 165, 0, 0.3);
            }
            50% {
                background-position: 100% 50%;
                box-shadow: 0 0 12px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 165, 0, 0.5), inset 0 0 12px rgba(255, 255, 255, 0.4);
            }
        }

        .platinum-card {
            background: rgba(229, 228, 226, 0.08);
            border: 1px solid rgba(229, 228, 226, 0.2);
            transition: all 0.3s ease;
        }

        .platinum-card:hover {
            background: rgba(229, 228, 226, 0.15);
            border-color: rgba(229, 228, 226, 0.4);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(229, 228, 226, 0.2);
        }

        .tf-cell {
            font-size: 0.75rem;
            padding: 2px 4px !important;
            text-align: center;
        }

        .btn-tradingview {
            background-color: #2962ff;
            border-color: #2962ff;
        }

        .btn-tradingview:hover {
            background-color: #1e4bd8;
            border-color: #1e4bd8;
        }

        .last-update {
            font-size: 0.75rem;
            color: #8b949e;
        }

        /* Historical Winners Section - Clean Dark Theme */
        .winners-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-left: 4px solid #3fb950;
        }

        .winners-header {
            background: rgba(63, 185, 80, 0.1);
            border-bottom: 1px solid var(--border-color);
            color: #3fb950;
            font-weight: bold;
        }

        .winner-stat-card {
            background: #21262d;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .winner-stat-card:hover {
            background: #30363d;
            border-color: #484f58;
            transform: translateY(-2px);
        }

        .winner-stat-card.highlight {
            border-color: #3fb950;
            box-shadow: 0 0 10px rgba(63, 185, 80, 0.2);
        }

        .winner-stat-value {
            font-size: 1.8rem;
            font-weight: bold;
        }

        .winner-stat-label {
            font-size: 0.75rem;
            color: #8b949e;
            text-transform: uppercase;
        }

        .winner-item {
            background: #21262d;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 8px;
            transition: all 0.3s ease;
        }

        .winner-item:hover {
            background: #30363d;
            border-color: #3fb950;
            transform: translateX(3px);
        }

        .winner-pnl {
            font-size: 1.1rem;
            font-weight: bold;
            color: #3fb950;
        }

        .loser-item {
            background: #21262d;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 8px 10px;
            margin-bottom: 6px;
            transition: all 0.2s ease;
        }

        .loser-item:hover {
            background: #30363d;
            border-color: #f85149;
        }

        .loser-pnl {
            font-weight: bold;
            color: #f85149;
        }

        /* Remove pulse animation, use subtle highlight instead */
        .highlight-card {
            border-color: #3fb950 !important;
        }

        /* Mobile responsive - PRIME/READY cards */
        .coin-card-prime, .coin-card-ready, .coin-card-early {
            transition: all 0.3s ease;
        }
        .coin-card-prime:hover, .coin-card-ready:hover, .coin-card-early:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }

        /* Mobile responsive table */
        @media (max-width: 768px) {
            .dashboard-nav-actions {
                width: 100%;
                align-items: flex-start !important;
                justify-content: flex-start;
                flex-wrap: wrap;
                gap: 0.5rem;
            }

            .dashboard-nav-actions .btn,
            .dashboard-nav-actions .dropdown {
                margin-right: 0 !important;
            }

            .dashboard-last-scan {
                width: 100%;
                margin-top: 0.25rem;
            }

            /* Smaller coin cards on mobile */
            .coin-card-prime, .coin-card-ready, .coin-card-early {
                padding: 8px !important;
            }
            .coin-card-prime strong, .coin-card-ready strong, .coin-card-early strong {
                font-size: 0.9rem !important;
            }
            
            /* Smaller buttons on mobile */
            .coin-card-prime .btn, .coin-card-ready .btn, .coin-card-early .btn {
                font-size: 0.65rem !important;
                padding: 2px 4px !important;
            }
            
            /* Smaller badges on mobile */
            .coin-card-prime .badge, .coin-card-ready .badge, .coin-card-early .badge {
                font-size: 0.55rem !important;
                padding: 2px 4px !important;
            }
            
            /* BTC Stats smaller on mobile */
            .header-stats .stat-value {
                font-size: 1rem !important;
            }
            .header-stats .stat-label {
                font-size: 0.65rem !important;
            }
            #btc-price-value {
                font-size: 1.2rem !important;
            }
            #btc-price-value small {
                font-size: 0.7rem !important;
            }
            
            /* Market Overview tables */
            .table th,
            .table td {
                font-size: 0.7rem;
                padding: 4px 2px !important;
                white-space: nowrap;
            }

            .hide-mobile {
                display: none !important;
            }

            .tf-cell {
                font-size: 0.65rem;
                padding: 2px 1px !important;
            }

            .badge {
                font-size: 0.6rem !important;
                padding: 2px 4px !important;
            }

            .btn-group-sm .btn {
                font-size: 0.65rem;
                padding: 2px 6px;
            }

            .stat-value {
                font-size: 1.2rem;
            }

            .stat-card {
                padding: 8px;
            }

            #prime-list .col-md-3,
            #ready-list .col-md-3,
            #early-detection-list .col-md-3,
            #market-overview-container > .col-md-3,
            #pullback-cards-row .col-md-3 {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

        @media (max-width: 576px) {
            .table th,
            .table td {
                font-size: 0.6rem;
                padding: 2px 1px !important;
            }

            .hide-sm {
                display: none !important;
            }

            .tf-cell {
                font-size: 0.55rem;
            }
            
            /* Card headers on small screens */
            .card-header h5 {
                font-size: 0.85rem !important;
            }
            .card-header small {
                display: none !important;
            }
            
            /* Footer smaller on mobile */
            .text-center.mt-4 small {
                font-size: 0.6rem !important;
                line-height: 1.4;
            }
            
            /* Keep signal cards readable on very small screens */
            #prime-list .col-md-3,
            #ready-list .col-md-3,
            #early-detection-list .col-md-3,
            #market-overview-container > .col-md-3,
            #pullback-cards-row .col-md-3 {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

        /* Spin animation for loading indicators */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .spin {
            display: inline-block;
            animation: spin 1s linear infinite;
        }

.coin-card-prime:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}
