/* =========================
   PulseChain Dashboard V2
   Main Design
========================= */


*{
    box-sizing:border-box;
}


body{

    margin:0;

    min-height:100vh;

    font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;


    background:
    radial-gradient(
        ellipse at 19% 4%,
        rgba(248, 187, 190, .32),
        transparent 42%
    ),
    radial-gradient(
        ellipse at 82% 13%,
        rgba(250, 211, 177, .28),
        transparent 39%
    ),
    radial-gradient(
        ellipse at 69% 75%,
        rgba(224, 243, 179, .34),
        transparent 48%
    ),
    radial-gradient(
        ellipse at 13% 88%,
        rgba(216, 239, 182, .30),
        transparent 46%
    ),
    linear-gradient(
        180deg,
        #fde7e5 0%,
        #fcebd8 32%,
        #fff8ce 57%,
        #f4f8cf 78%,
        #e8f3d1 100%
    );

    background-attachment: fixed;


    color:#444b57;

}




.app{

    width:100%;

    max-width:780px;

    margin:auto;

    padding:25px 18px 35px;

}




/* Header */

.header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:18px;

}



.brand{

    display:flex;

    align-items:center;

    gap:12px;

}



.brand-logo{

    width:42px;

    height:42px;

    object-fit:contain;

}



.brand-name{

    font-size:21px;

    font-weight:900;

    letter-spacing:.08em;


    background:
    linear-gradient(
        90deg,
        #ff008c,
        #7c35ff,
        #007cff,
        #00c9d8
    );


    -webkit-background-clip:text;

    color:transparent;

}





/* LIVE */

.live-status{

    display:flex;

    align-items:center;

    gap:7px;

    font-size:14px;

    font-weight:700;

    color:#18a65a;

}



.live-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:#18c76f;

}





.refresh-btn{

    width:20px;

    height:20px;

    border-radius:50%;

    border:1px solid #ddd;

    background:white;

    font-size:13px;
    line-height:18px;

    cursor:pointer;

}







/* Time Buttons */


.time-selector{

    display:flex;

    gap:10px;

    margin-bottom:24px;

}



.time-btn{

    border:1px solid #ddd;

    background:white;

    padding:6px 15px;

    font-size:10px;

    border-radius:30px;

    font-weight:700;

    color:#777;

    cursor:pointer;

}



.time-btn.active{

    background:#6f42ff;

    color:white;

    border-color:#6f42ff;

}








/* Token Grid */


.token-grid{

    display:grid;

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

    gap:14px;

}





/* Token Card */


.token-card{

    background:
    linear-gradient(
        135deg,
        rgba(255, 255, 255, .92),
        rgba(255, 249, 237, .88)
    );

    border:1px solid #e6e6ed;

    border-radius:16px;

    padding:16px;

    min-height:140px;

    display:flex;

    flex-direction:column;

    text-align:center;

    align-items:center;

}



.token-card:hover{

    transform:translateY(-4px);

    border-color:#d8d1ff;

    box-shadow:

    0 18px 40px rgba(80,60,180,.12);

}





.token-header{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}



.token-icon{

    width:34px;

    height:34px;

    transition:
    transform .2s ease;

}


.token-card:hover .token-icon{

    transform:
    scale(1.04)
    translateY(-2px);

}



.token-name{

    font-size:16px;

    font-weight:800;

}




.price{

    font-size:18px;

    font-weight:600;

    color:#444b57;

    margin-bottom:12px;

}




.change{

    display:inline-flex;

    align-items:center;

    padding:5px 11px;

    border-radius:14px;

    font-size:14px;

    font-weight:700;

    letter-spacing:.2px;

    transition:
    transform .2s ease;

}


.change:hover{

    transform:scale(1.04);

}



.change.up{

    background:
    rgba(22,163,74,.10);

    color:#129447;

}



.change.down{

    background:
    rgba(220,53,69,.10);

    color:#d12f45;

}




footer{

    text-align:center;

    margin-top:35px;

    color:#888;

    font-size:13px;

}






/* Mobile */

@media(max-width:800px){

    .token-grid{

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

    }

}



@media(max-width:500px){

    .token-grid{

        grid-template-columns:1fr;

    }


    .brand-name{

        font-size:19px;

    }

}

.token-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top right,
        rgba(111,66,255,.10),
        transparent 45%
    );

    opacity:0;

    transition:.3s ease;

    pointer-events:none;

}


.token-card:hover::before{

    opacity:1;

}

.token-card {
    border-radius: 16px !important;
    overflow: hidden;
}

.token-card:nth-child(4n + 1) {
    background: linear-gradient(135deg, #fffafb, #ffeef0);
}

.token-card:nth-child(4n + 2) {
    background: linear-gradient(135deg, #fffdf7, #fff5d7);
}

.token-card:nth-child(4n + 3) {
    background: linear-gradient(135deg, #fbfff8, #edf9de);
}

.token-card:nth-child(4n + 4) {
    background: linear-gradient(135deg, #f9fffc, #e4f5df);
}

.token-card:hover,
.token-card:focus,
.token-card:active {
    border-radius: 16px !important;
}

footer {
    font-size: 10px;
}

.site-credit {
    margin-top: 10px;
    color: #666b72;
    font-size: 11px;
    font-weight: 600;
}

.site-credit a {
    background: linear-gradient(90deg, #ff008c, #7c35ff, #007cff, #00a989);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    text-decoration: none;
}

#updateTime {
    font-size: 10px;
}

/* DexScreener chart popup */

.chart-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: none;
    align-items: center;
    justify-content: center;

    background: rgba(20, 15, 30, 0.35);
    backdrop-filter: blur(3px);
    isolation: isolate;
}

.chart-overlay.active {
    display: flex;
}

.chart-window {
    position: relative;
    z-index: 1;

    width: min(720px, 92vw);
    height: min(520px, 78vh);

    background: #ffffff;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25);
}

.chart-window iframe {
    width: 100%;
    height: 100%;

    border: 0;
}

.chart-close {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 2;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #ffffff;
    color: #333333;

    font-size: 26px;
    line-height: 40px;

    text-align: center;

    cursor: pointer;

    pointer-events: auto;
    touch-action: manipulation;
}

@media (max-width: 600px) {

    .chart-window {
        width: 94vw;
        height: 70vh;
        border-radius: 14px;
    }

}