body{
    background:#020617;
}

.pp-gold-wrapper{

    max-width:900px;
    margin:40px auto;

    background:
    linear-gradient(
        135deg,
        rgba(8,15,35,.98),
        rgba(15,23,42,.98)
    );

    border:1px solid rgba(99,102,241,.25);

    border-radius:32px;

    overflow:hidden;

    position:relative;

    backdrop-filter:blur(20px);

    box-shadow:
    0 0 60px rgba(59,130,246,.08);
}

.pp-gold-wrapper::before{

    content:"";

    position:absolute;
    inset:-2px;

    background:
    linear-gradient(
        135deg,
        #8b5cf6,
        #3b82f6,
        #06b6d4
    );

    border-radius:34px;

    filter:blur(40px);

    opacity:.18;

    z-index:-1;
}

.pp-topbar{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px 30px;

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

    background:
    rgba(255,255,255,.02);
}

.pp-live-box{

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px 18px;

    border-radius:999px;

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

    border:
    1px solid rgba(255,255,255,.08);

    color:#fff;

    font-weight:600;
}

.pp-live-dot{

    width:10px;
    height:10px;

    background:#22c55e;

    border-radius:50%;

    animation:pulse 1.5s infinite;
}

@keyframes pulse{

    50%{
        opacity:.3;
    }
}

.pp-live-price{

    color:#60a5fa;
    font-weight:700;
}

.pp-content{

    padding:50px 35px;
}

.pp-badge{

    width:max-content;

    margin:auto;

    padding:12px 22px;

    border-radius:999px;

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

    border:
    1px solid rgba(255,255,255,.08);

    color:#fff;

    margin-bottom:30px;
}

.pp-content h2{

    text-align:center;

    font-size:60px;

    line-height:1.1;

    margin-bottom:20px;

    background:
    linear-gradient(
        90deg,
        #a855f7,
        #3b82f6,
        #06b6d4
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.pp-description{

    text-align:center;

    max-width:700px;

    margin:auto auto 40px;

    color:#94a3b8;

    font-size:18px;

    line-height:1.8;
}

.pp-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:25px;
}

.pp-input-group label{

    display:block;

    margin-bottom:10px;

    color:#cbd5e1;
}

.pp-input-group input,
.pp-input-group select{

    width:100%;

    padding:18px;

    border-radius:18px;

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

    border:
    1px solid rgba(255,255,255,.08);

    color:#fff;

    outline:none;

    box-sizing:border-box;
}

.pp-input-group input:focus,
.pp-input-group select:focus{

    border-color:#3b82f6;

    box-shadow:
    0 0 0 4px rgba(59,130,246,.15);
}

.pp-button{

    width:100%;

    padding:20px;

    border:none;

    border-radius:20px;

    background:
    linear-gradient(
        90deg,
        #8b5cf6,
        #3b82f6
    );

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.pp-button:hover{

    transform:translateY(-3px);

    box-shadow:
    0 15px 40px rgba(59,130,246,.35);
}

.pp-results{

    margin-top:30px;

    display:grid;

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

    gap:20px;
}

.pp-result-card{

    padding:25px;

    border-radius:24px;

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

    border:
    1px solid rgba(255,255,255,.08);

    transition:.3s;
}

.pp-result-card:hover{

    transform:translateY(-5px);

    border-color:
    rgba(59,130,246,.3);
}

.pp-currency{

    color:#94a3b8;

    margin-bottom:10px;
}

.pp-price{

    font-size:32px;

    font-weight:800;

    background:
    linear-gradient(
        90deg,
        #a855f7,
        #3b82f6,
        #06b6d4
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.pp-update{

    margin-top:30px;

    text-align:center;

    color:#94a3b8;
}

@media(max-width:768px){

    .pp-content h2{
        font-size:42px;
    }

    .pp-grid,
    .pp-results{
        grid-template-columns:1fr;
    }

    .pp-topbar{
        flex-direction:column;
        gap:15px;
    }
}

@media(max-width:480px){

    .pp-content{
        padding:25px;
    }

    .pp-content h2{
        font-size:34px;
    }
}