/* ==========================================================
   StreamToolz Setup Wizard
   ========================================================== */

.st-installer-overlay{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(7,12,22,.72);

    backdrop-filter:blur(12px);

    z-index:999999;

    opacity:0;

    transition:opacity .35s ease;

}

.st-installer-overlay.show{

    display:flex;

    opacity:1;

}

.st-installer-window{

    width:560px;

    max-width:95vw;

    max-height:90vh;

    display:flex;

    flex-direction:column;

    background:#1d2430;

    border-radius:22px;

    overflow:hidden;

    border:1px solid rgba(145,71,255,.30);

    box-shadow:
        0 0 60px rgba(145,71,255,.22),
        0 20px 60px rgba(0,0,0,.45);

    animation:stWindow .4s ease;

}

@keyframes stWindow{

    from{

        transform:translateY(25px) scale(.96);

        opacity:0;

    }

    to{

        transform:none;

        opacity:1;

    }

}

.st-installer-header{

    padding:24px 24px 18px;

    text-align:center;

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

}

.st-logo-wrapper{

    position:relative;

    width:82px;

    height:82px;

    margin:auto;

}

.st-logo-ring{

    position:absolute;

    inset:0;

    border-radius:50%;

    border:4px solid rgba(145,71,255,.18);

}

.st-logo-ring::before{

    content:"";

    position:absolute;

    inset:-4px;

    border-radius:50%;

    border-top:4px solid #9147ff;

    border-right:4px solid transparent;

    animation:stRotate 2.4s linear infinite;

}

@keyframes stRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.st-logo-circle{

    position:absolute;

    inset:10px;

    border-radius:50%;

    background:#2a3241;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#9147ff;

    font-size:26px;

    box-shadow:
        inset 0 0 20px rgba(145,71,255,.20);

}

#stInstallerTitle{

    margin-top:18px;

    margin-bottom:6px;

    font-size:24px;

    font-weight:700;

    color:#fff;

}

.st-logo-image{

    width:85px;

    height:85px;

    object-fit:contain;

    object-position:center;

    display:block;

    user-select:none;

    pointer-events:none;

}

#stInstallerSubtitle{

    color:#bfc9d9;

    font-size:13px;

    line-height:1.4;

}

.st-progress-section{

    padding:0 24px;

    margin:12px 0;

    flex-shrink:0;

}

#stStepContainer{

    padding:22px 28px;

    margin:12px 0;

    overflow:hidden;

    max-height:none;

    flex:1;

}
.st-progress-bar{

    width:100%;

    height:16px;

    border-radius:999px;

    background:#111722;

    overflow:hidden;

}

#stProgressFill{

    width:0%;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #9147ff,
        #a970ff
    );

    transition:width .8s ease;

    position:relative;

}

#stProgressFill::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    animation:stShimmer 1.4s infinite;

}

@keyframes stShimmer{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(300%);

    }

}

.st-progress-row{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding:12px 8px 0;

    font-size:12px;
    color: #bfc7d5;
}

#stTimeRemaining {
    font-size: 12px;
    color: #9aa4b5;
}

#stCountdown {
    display: block;
    margin-top: 2px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.st-status-box{

    margin:0 24px;

    padding:12px;

    font-size:14px;

    background:#131a25;

    border-radius:14px;

    text-align:center;

    color:#fff;

    font-size:15px;

}

#stStepContainer{

    padding:18px 24px;

    margin:10px 0;

    overflow:hidden;

    max-height:none;

    flex:1;

}

.st-step{

    display:flex;

    align-items:center;

    gap:10px;

    padding:5px 0;

    min-height:24px;

    font-size:12px;

    line-height:1.15;

    color:#bfc9d9;

    transition:.25s ease;

}

.st-step.active{

    color:#fff;

}

.st-step.complete{

    color:#48d597;

}

.st-step i{

    width:16px;

    font-size:13px;

    flex-shrink:0;

}

.st-tip-box{

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

    background:#171e2a;

    padding:16px 24px;

}

.st-tip-header{

    color:#9147ff;

    font-weight:700;

    margin-bottom:8px;

}

#stTip{

    color:#bfc9d9;

    line-height:1.6;

}