/* =====================================================
   GENERAL
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#111;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
}


.back-button{

    position:fixed;

    top:30px;

    left:30px;

    width:56px;

    height:56px;

    background:#fff;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 8px 25px rgba(0,0,0,.18);

    cursor:pointer;

    z-index:10001;

    transition:all .3s ease;

}

.back-button:hover{

    transform:scale(1.05);

    box-shadow:0 12px 30px rgba(0,0,0,.25);

}

.back-button svg{

    width:26px;

}

.hidden{
    display:none;
}

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

.header{

    position:sticky;
    top:0;
    z-index:1000;

    background:#111;

    padding:24px 24px 20px;

    border-bottom:1px solid rgba(212,175,55,.18);

}

.header h1{

    text-align:center;

    color:#d4af37;

    font-size:28px;

    letter-spacing:3px;

    font-weight:600;

    margin-bottom:22px;

}

/* =====================================================
   STATUS
===================================================== */

.status-grid{

    max-width:1400px;

    margin:0 auto 22px;

    display:grid;

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

    gap:16px;

}

.status-card{

    background:#181818;

    border:1px solid rgba(212,175,55,.15);

    border-radius:10px;

    padding:18px;

}

.status-title{

    color:#888;

    font-size:12px;

    letter-spacing:2px;

    margin-bottom:12px;

}

.status-value{

    color:#fff;

    font-size:24px;

    font-weight:500;

    margin-bottom:12px;

}

.progress-bar{

    width:100%;

    height:8px;

    background:#2b2b2b;

    border-radius:8px;

    overflow:hidden;

}

.progress-fill{

    width:0;

    height:100%;

    background:#d4af37;

    transition:width .25s ease;

}

/* =====================================================
   BUTTONS
===================================================== */

.button-grid{

    max-width:1300px;

    margin:0 auto;

    display:grid;

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

    gap:14px;

}

.button-grid button{

    height:48px;

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#181818;

    color:#fff;

    border:1px solid #333;

    border-radius:8px;

    cursor:pointer;

    font-size:14px;

    transition:.2s;

}

.button-grid button:hover{

    border-color:#d4af37;

    background:#1d1d1d;

}

.button-grid button.active{

    background:#d4af37;

    color:#111;

    border-color:#d4af37;

    font-weight:600;

}

/* =====================================================
   RELEASE LIST
===================================================== */

#collectionList{

    max-width:980px;

    margin:35px auto 80px;

    padding:0 24px;

}

.release{

    padding:26px 0;

    border-bottom:1px solid rgba(212,175,55,.15);

}

.release:last-child{

    border-bottom:none;

}

.release h2{

    margin:0 0 8px;

    color:#d4af37;

    font-size:24px;

    font-weight:500;

}

.release-subtitle{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:18px;

    color:#888;

    font-size:14px;

}

.release-content{

    display:grid;

    grid-template-columns:620px 140px;

    align-items:center;

    gap:20px;

    justify-content:center;

}

.release-info{

    min-width:0;

}

.release-cover{

    width:140px;

    height:140px;

    object-fit:cover;

    border-radius:8px;

    border:1px solid rgba(212,175,55,.15);

    justify-self:start;

    margin-left:-30px;

    transition:.2s;

}

.release-cover:hover{

    transform:scale(1.03);

}

/* =====================================================
   VARIANTS
===================================================== */

.variant{

    display:grid;

    grid-template-columns:360px 180px;

    align-items:center;

    gap:20px;

    padding:6px 0;

}

.variant:hover{

    opacity:.85;

}

.variant-label{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

}

.variant-checkbox{

    width:18px;

    height:18px;

    accent-color:#d4af37;

    cursor:pointer;

    flex-shrink:0;

}

.variant-label span{

    font-size:15px;

    white-space:nowrap;

}

.variant-numbers{

    width:80px;

    color:#bbb;

    font-size:15px;

    white-space:nowrap;

}

/* =====================================================
   BUTTONS
===================================================== */

button{

    font-family:inherit;

}

button:active{

    transform:scale(.98);

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#333;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#555;

}

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

@media (max-width:900px){

    .status-grid{

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

        gap:14px;

    }

    .button-grid{

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

        gap:12px;

    }

}

@media (max-width:600px){

    .header{

        position:relative;

        padding:18px;

    }

    .header h1{

        font-size:22px;

        letter-spacing:2px;

    }

    .status-card{

        padding:14px;

    }

    .status-value{

        font-size:20px;

    }

    .button-grid{

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

        gap:10px;

    }

    .button-grid button{

        height:44px;

        font-size:12px;

        padding:0 8px;

    }

    .variant{

        grid-template-columns:1fr;

        gap:6px;

    }

 .variant-numbers{

    display:inline-block;

    width:90px;

    text-align:right;

}

    .release-content{

        grid-template-columns:1fr;

    }

    .release-cover{

        justify-self:center;

        width:120px;

        height:120px;

        margin:0 auto 16px;

    }

    .release h2{

        font-size:20px;

    }

    #collectionList{

        padding:0 16px;

    }

    .back-button{

        width:46px;

        height:46px;

        top:15px;

        left:15px;

    }

}

.variant-right{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:180px;

}

.wtb-btn{

    background:#1e63ff;

    color:#fff;

    border:none;

    width:58px;

    height:26px;

    border-radius:4px;

    font-size:11px;

    font-weight:bold;

    cursor:pointer;

    flex-shrink:0;

}

.wtb-btn:hover{

    background:#2f74ff;

}