/* 00-base.css — tema, utilitas, komponen dasar dashboard */
: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);
        }

        .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;
        }

        /* Nilai stat berupa KATA (mis. OVERBOUGHT / NO DATA), bukan angka.
           Tanpa ini, kata sepanjang OVERBOUGHT pada font 2rem melimpah ~110px ke
           kolom sebelah (terukur 2026-09-21: teks 223px di sel 113px).
           Emoji TIDAK dipakai di sel ini karena warna teks sudah mewakili keadaan;
           sisa ruang dipakai agar kata tetap utuh satu baris.
           Angka 0.85rem dipilih dari pengukuran: kata 10 huruf ≈ 76px, sedangkan
           ruang sel di layar kerja ≈ 83px. Bila kolom menyempit (layar md), kata
           boleh membungkus — tidak akan menembus batas. */
        .stat-value.is-word {
            font-size: 0.85rem;
            line-height: 1.25;
            white-space: normal;
            overflow-wrap: break-word;
        }

        /* Sel berisi kata: padding horizontal dikecilkan supaya kata 10 huruf tetap
           muat SATU baris pada layar sedang (terukur: di 900px sisa ruang hanya 53px
           dengan padding 15px, sehingga kata terpecah; jadi 4px). */
        .stat-card-word {
            padding-left: 4px;
            padding-right: 4px;
        }

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

        .stat-section-label {
            font-size: 0.7rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #8b949e;
            border-bottom: 1px solid #30363d;
            padding-bottom: 4px;
            margin-bottom: 10px;
        }
        .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);
        }

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

        @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);
            }
        }

        @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);
            }
        }

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

        @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);
            }
        }

        @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);
            }
        }

        @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);
            }
        }

        @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);
            }
        }

        @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);
            }
        }/* Mobile responsive - PRIME/READY cards */
        .coin-card-prime {
            transition: all 0.3s ease;
        }.coin-card-prime:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }

        /* Mobile responsive table */

/* 10-responsive-768.css — penyesuaian layar <=768px */
        @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 {
                padding: 8px !important;
            }
            .coin-card-prime strong {
                font-size: 0.9rem !important;
            }

            /* Smaller buttons on mobile */
            .coin-card-prime .btn {
                font-size: 0.65rem !important;
                padding: 2px 4px !important;
            }

            /* Smaller badges on mobile */
            .coin-card-prime .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;
            }

            .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;
            }

            /* Sel berisi KATA (mis. OVERBOUGHT): tetap kecil di ponsel supaya utuh satu baris.
               Perlu !important karena .header-stats .stat-value di atas memakai !important. */
            .header-stats .stat-value.is-word {
                font-size: 0.8rem !important;
            }

            .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%;
            }
        }

/* 20-responsive-576.css — penyesuaian layar <=576px + animasi */
        @media (max-width: 576px) {
            .table th,
            .table td {
                font-size: 0.6rem;
                padding: 2px 1px !important;
            }

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

            /* 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;
}