/*==================================================
OKNUM4D DASHBOARD V2
CARDS.CSS
PART 1
==================================================*/

/*=========================
CARDS GRID
=========================*/

.cards-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:30px;

    align-items:start;

}

/*=========================
CARD
=========================*/

.prediction-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    border-radius:24px;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(18px);

    border:1px solid rgba(57,255,20,.15);

    box-shadow:

        0 15px 45px rgba(0,0,0,.35);

    transition:

        transform .4s ease,

        border-color .4s ease,

        box-shadow .4s ease;

}

/*=========================
HOVER
=========================*/

.prediction-card:hover{

    transform:

        translateY(-8px);

    border-color:#39FF14;

    box-shadow:

        0 0 20px rgba(57,255,20,.18),

        0 0 60px rgba(57,255,20,.08);

}

/*=========================
TOP BORDER
=========================*/

.prediction-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:

        linear-gradient(

            90deg,

            transparent,

            #39FF14,

            transparent

        );

    opacity:0;

    transition:.4s;

}

.prediction-card:hover::before{

    opacity:1;

}

/*=========================
CARD HEADER
=========================*/

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px;

    border-bottom:

        1px solid rgba(255,255,255,.05);

}

.card-header h3{

    color:white;

    font-size:22px;

    font-weight:700;

    margin:0;

}

.card-header small{

    display:block;

    margin-top:6px;

    color:#8d8d8d;

    font-size:13px;

}

/*=========================
BADGE
=========================*/

.badge-open{

    padding:8px 16px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    animation:badgePulse 2s infinite;

}

/*=========================
UPDATE BOX
=========================*/

.market-update{

    padding:22px;

    border-bottom:

        1px solid rgba(255,255,255,.05);

}

.market-update p{

    color:#8c8c8c;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:10px;

}

/*=========================
COUNTDOWN
=========================*/

.countdown{

    font-family:"Space Grotesk",sans-serif;

    font-size:28px;

    font-weight:700;

    color:#39FF14;

    text-align:center;

    letter-spacing:3px;

    text-shadow:

        0 0 10px rgba(57,255,20,.8);

}

/*=========================
PROGRESS
=========================*/

.progress{

    margin-top:18px;

    width:100%;

    height:8px;

    border-radius:50px;

    overflow:hidden;

    background:#111;

}

.progress-fill{

    width:100%;

    height:100%;

    border-radius:50px;

    background:

        linear-gradient(

            90deg,

            #39FF14,

            #00ff88

        );

    transition:width .8s linear;

}

/*=========================
BODY
=========================*/

.card-body{

    padding:22px;

}

/*==================================================
OKNUM4D DASHBOARD V2
CARDS.CSS
PART 2
==================================================*/

/*=========================
MAIN NUMBER
=========================*/

.main-number{

    margin:18px 0 24px;

    padding:20px;

    text-align:center;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        rgba(57,255,20,.08),
        rgba(57,255,20,.03)
    );

    border:1px solid rgba(57,255,20,.18);

    font-family:"Space Grotesk",sans-serif;

    font-size:48px;

    font-weight:800;

    letter-spacing:8px;

    color:#39FF14;

    text-shadow:
        0 0 12px rgba(57,255,20,.7),
        0 0 30px rgba(57,255,20,.35);

    box-shadow:
        inset 0 0 20px rgba(57,255,20,.04);

    transition:.35s;

    animation:numberPulse 2s infinite alternate;

}

.prediction-card:hover .main-number{

    transform:scale(1.03);

    box-shadow:
        0 0 25px rgba(57,255,20,.20),
        inset 0 0 20px rgba(57,255,20,.08);

}

/*=========================
ROW
=========================*/

.row{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:15px;

    padding:16px 0;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.row:last-child{

    border-bottom:none;

}

.row span{

    min-width:95px;

    color:#8d8d8d;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

}

.row strong{

    color:white;

    font-size:15px;

    font-weight:700;

}

/*=========================
ROW COLUMN
=========================*/

.row.column{

    flex-direction:column;

    align-items:flex-start;

}

/*=========================
NUMBER GROUP
=========================*/

.number-group{

    display:flex;

    flex-wrap:wrap;

    justify-content:flex-end;

    gap:8px;

}

/*=========================
NUMBER CHIP
=========================*/

.number-chip{

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:10px;

    background:rgba(57,255,20,.06);

    border:1px solid rgba(57,255,20,.18);

    color:#39FF14;

    font-weight:700;

    font-size:14px;

    transition:.30s;

    cursor:pointer;

}

.number-chip:hover{

    background:#39FF14;

    color:#000;

    transform:
        translateY(-3px)
        scale(1.08);

    box-shadow:
        0 0 18px rgba(57,255,20,.45);

}

/*=========================
DIGIT BOX
=========================*/

.digit-box{

    margin-top:22px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;

}

.digit-box div{

    padding:15px;

    text-align:center;

    border-radius:14px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(57,255,20,.12);

    transition:.35s;

}

.digit-box div:hover{

    transform:translateY(-4px);

    border-color:#39FF14;

    box-shadow:

        0 0 20px rgba(57,255,20,.15);

}

.digit-box span{

    display:block;

    margin-bottom:8px;

    color:#888;

    font-size:11px;

    letter-spacing:1px;

}

.digit-box strong{

    font-family:"Space Grotesk",sans-serif;

    color:#39FF14;

    font-size:24px;

    font-weight:700;

}

/*==================================================
OKNUM4D DASHBOARD V2
CARDS.CSS
PART 3
AI SUMMARY + SEARCH + FILTER
==================================================*/

/*=========================
AI SUMMARY
=========================*/

.ai-summary{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-bottom:35px;

}

.summary-box{

    position:relative;

    overflow:hidden;

    padding:24px;

    border-radius:20px;

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(18px);

    border:1px solid rgba(57,255,20,.15);

    transition:.35s;

}

.summary-box:hover{

    transform:translateY(-6px);

    border-color:#39FF14;

    box-shadow:

        0 0 25px rgba(57,255,20,.18);

}

.summary-box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:

        linear-gradient(

            90deg,

            transparent,

            #39FF14,

            transparent

        );

}

.summary-title{

    color:#888;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.summary-value{

    margin-top:12px;

    color:#39FF14;

    font-size:34px;

    font-weight:800;

    font-family:"Space Grotesk",sans-serif;

}

.summary-sub{

    margin-top:8px;

    color:#aaa;

    font-size:12px;

}

/*=========================
SEARCH
=========================*/

.market-toolbar{

    display:flex;

    gap:18px;

    align-items:center;

    margin:30px 0;

    flex-wrap:wrap;

}

#marketSearch{

    flex:1;

    min-width:260px;

    padding:16px 22px;

    border-radius:16px;

    border:1px solid rgba(57,255,20,.18);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(15px);

    color:#fff;

    font-size:15px;

    transition:.35s;

    outline:none;

}

#marketSearch:focus{

    border-color:#39FF14;

    box-shadow:

        0 0 20px rgba(57,255,20,.15);

}

#marketSearch::placeholder{

    color:#888;

}

#marketCounter{

    padding:16px 24px;

    border-radius:16px;

    background:rgba(57,255,20,.08);

    color:#39FF14;

    font-weight:700;

}

/*=========================
FILTER
=========================*/

.filter-group{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    width:100%;

}

.filter-btn{

    padding:10px 18px;

    border:none;

    border-radius:12px;

    background:rgba(255,255,255,.05);

    color:white;

    cursor:pointer;

    transition:.35s;

}

.filter-btn:hover{

    background:#39FF14;

    color:#000;

    transform:translateY(-2px);

}

.filter-btn.active{

    background:#39FF14;

    color:#000;

    box-shadow:

        0 0 20px rgba(57,255,20,.25);

}

/*==================================================
OKNUM4D DASHBOARD V2
CARDS.CSS
PART 4
Animation + Mouse Glow + Responsive
==================================================*/


/*=========================
MOUSE GLOW
=========================*/

.prediction-card::after{

    content:"";

    position:absolute;

    left:var(--x);

    top:var(--y);

    width:320px;

    height:320px;

    transform:translate(-50%,-50%);

    background:radial-gradient(

        circle,

        rgba(57,255,20,.18),

        transparent 70%

    );

    opacity:0;

    pointer-events:none;

    transition:.25s;

}

.prediction-card:hover::after{

    opacity:1;

}


/*=========================
FLOATING
=========================*/

.prediction-card{

    animation:

        floating 6s ease-in-out infinite;

}

.prediction-card:nth-child(2){

    animation-delay:.5s;

}

.prediction-card:nth-child(3){

    animation-delay:1s;

}

.prediction-card:nth-child(4){

    animation-delay:1.5s;

}

.prediction-card:nth-child(5){

    animation-delay:2s;

}

.prediction-card:nth-child(6){

    animation-delay:2.5s;

}

.prediction-card:nth-child(7){

    animation-delay:3s;

}

.prediction-card:nth-child(8){

    animation-delay:3.5s;

}


/*=========================
FADE
=========================*/

.prediction-card{

    opacity:0;

    animation:

        fadeCard .7s forwards,

        floating 6s ease-in-out infinite;

}


/*=========================
KEYFRAMES
=========================*/

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


@keyframes fadeCard{

    from{

        opacity:0;

        transform:

            translateY(50px)

            scale(.95);

    }

    to{

        opacity:1;

        transform:

            translateY(0)

            scale(1);

    }

}


@keyframes badgePulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}


@keyframes numberPulse{

    from{

        box-shadow:

            inset 0 0 10px rgba(57,255,20,.08);

    }

    to{

        box-shadow:

            inset 0 0 30px rgba(57,255,20,.18),

            0 0 25px rgba(57,255,20,.15);

    }

}


/*=========================
SCROLLBAR
=========================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:#39FF14;

    border-radius:20px;

}


/*=========================
RESPONSIVE
=========================*/

@media(max-width:991px){

.cards-grid{

grid-template-columns:1fr 1fr;

}

.ai-summary{

grid-template-columns:repeat(2,1fr);

}

}


@media(max-width:768px){

.cards-grid{

grid-template-columns:1fr;

}

.market-toolbar{

flex-direction:column;

align-items:stretch;

}

#marketCounter{

width:100%;

}

.filter-group{

justify-content:center;

}

.main-number{

font-size:38px;

letter-spacing:5px;

}

.digit-box{

grid-template-columns:repeat(2,1fr);

}

.ai-summary{

grid-template-columns:1fr;

}

}


@media(max-width:480px){

.card-header{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.main-number{

font-size:34px;

letter-spacing:3px;

}

.countdown{

font-size:22px;

}

.number-chip{

width:34px;

height:34px;

font-size:13px;

}

}