:root{
    --bg:#030712;
    --card:rgba(15,23,42,.55);
    --border:rgba(255,255,255,.08);
    --green:#4ade80;
    --green2:#22c55e;
    --text:#ffffff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

body{
    min-height:100vh;
    background:
    radial-gradient(circle at top left,#0f766e 0%,transparent 30%),
    radial-gradient(circle at top right,#1d4ed8 0%,transparent 35%),
    #030712;

    color:#fff;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    sans-serif;
}

.container{
    max-width:520px;
    margin:auto;
    padding:24px 14px;
}

.header{
    text-align:center;
    margin-bottom:20px;
}

.title{
    display:flex;
    flex-direction:column;
    gap:2px;

    font-size:32px;
    font-weight:900;

    letter-spacing:-1px;
}

.title span{
    color:var(--green);
}

.subtitle{
    margin-top:10px;

    color:rgba(255,255,255,.55);

    font-size:13px;
    font-weight:500;
}

.upload-btn{
    width:100%;
    height:64px;

    border-radius:18px;
    border:1px dashed rgba(255,255,255,.15);

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

    color:#fff;

    font-size:16px;
    font-weight:700;

    backdrop-filter:blur(10px);

    transition:.25s ease;
}

.upload-btn:hover{
    border-color:rgba(74,222,128,.4);

    box-shadow:
    0 0 25px
    rgba(74,222,128,.12);
}

.upload-btn:active{
    transform:scale(.98);
}

.stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;

    margin-top:14px;
}

.stat-card{
    background:rgba(255,255,255,.03);

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

    border-radius:16px;

    padding:14px;

    text-align:center;

    backdrop-filter:blur(10px);
}

.stat-label{
    font-size:13px;
    letter-spacing:1px;

    color:rgba(255,255,255,.55);
}

.stat-value{
    margin-top:6px;

    font-size:26px;
    font-weight:900;

    color:var(--green);
}

.entries{
    margin-top:18px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:18px;

    overflow:hidden;

    backdrop-filter:blur(10px);
}

.entry-row{
    display:flex;
    align-items:center;

    gap:12px;

    padding:14px 16px;

    opacity:.55;

    transition:opacity .2s ease;
}

.entry-row:hover{
    background:rgba(255,255,255,.03);
}

.entry-row + .entry-row{
    border-top:1px solid rgba(255,255,255,.05);
}



.entry-price{
    font-size:17px;
    font-weight:700;

    transition:
    color .2s ease,
    text-shadow .2s ease;
}

.result{
    margin-top:22px;

    min-height:100px;

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

    transition:
    border-color .25s ease,
    box-shadow .25s ease;

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

    border:1px dashed
    rgba(74,222,128,.18);

    border-radius:20px;

    backdrop-filter:blur(10px);

    font-size:48px;
    font-weight:900;

    color:#4ade80;

    text-shadow:
    0 0 12px
    rgba(74,222,128,.15);
}

.copy-btn{
    width:100%;

    height:56px;

    margin-top:22px;

    border-radius:18px;

    border:1px solid
    rgba(74,222,128,.15);

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

    color:#fff;

    font-size:16px;
    font-weight:800;

    backdrop-filter:blur(10px);

    box-shadow:
    0 0 20px rgba(74,222,128,.08);

    transition:.25s ease;
}

.copy-btn:active{
    transform:scale(.98);
}
.copy-btn:hover{
    border-color:rgba(74,222,128,.25);

    box-shadow:
    0 0 20px rgba(74,222,128,.12);
}


.copy-success{
    animation:copyPulse .35s ease;
}

@keyframes copyPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}

.hidden{
    display:none;
}

@media(max-width:768px){

    .container{
        padding:16px 12px;
    }

    .title{
        font-size:28px;
    }

    .result{
        font-size:42px;
        min-height:90px;
    }

}
.upload-btn,
.copy-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.upload-btn svg,
.copy-btn svg{
    width:18px;
    height:18px;
}
.copy-btn.hidden{
    display:none !important;
}
html,
body{
    width:100%;
    overflow-x:hidden;
}

.container{
    width:100%;
    max-width:520px;
    margin:0 auto;
    overflow:hidden;
}

.spinner{
    width:28px;
    height:28px;

    border:3px solid
    rgba(74,222,128,.2);

    border-top:3px solid
    #4ade80;

    border-radius:50%;

    animation:
    spin .8s linear infinite;
}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.result-update{
    animation:pop .25s ease;
}

@keyframes pop{

    0%{
        transform:scale(.95);
        opacity:.7;
    }

    100%{
        transform:scale(1);
        opacity:1;
    }

}

.entry-row.selected{
    opacity:1;
    background:rgba(74,222,128,.04);
}


.entry-price.selected{
    color:#4ade80;

    text-shadow:
    0 0 6px rgba(74,222,128,.25);
}