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

body{
    font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
    background:#0b1020;
    color:#fff;

    min-height:100vh;

    display:flex;
    flex-direction:column;

    overflow-x:hidden;
}

.background{
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at top,#214dff33,transparent 40%),
        radial-gradient(circle at bottom,#0d2a8033,transparent 35%),
        #0b1020;
    z-index:-1;
}

.container{
    width:100%;
    max-width:900px;
    margin:0 auto;

    padding:30px;

    display:flex;
    flex-direction:column;

    justify-content:center;

    min-height:100%;
}

.card{
    background:#171e33;
    border:1px solid rgba(255,255,255,.05);
    border-radius:22px;
    padding:35px;
    box-shadow:0 20px 50px rgba(0,0,0,.45);
    backdrop-filter:blur(10px);
}

.logo{
    text-align:center;
    font-size:40px;
    margin-bottom:10px;
}

.subtitle{
    text-align:center;
    color:#aab3c5;
    margin-bottom:30px;
}

.timer{
    width:110px;
    height:110px;
    margin:0 auto 30px;
    border-radius:50%;
    border:4px solid #2e6bff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:42px;
    font-weight:bold;
    box-shadow:0 0 30px rgba(46,107,255,.35);
}

button{
    width:100%;
    border:none;
    border-radius:14px;
    padding:15px;
    margin-top:15px;
    font-size:17px;
    cursor:pointer;
    transition:.25s;
}

button:hover:not(:disabled){
    transform:translateY(-2px);
}

button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.record-btn,
#loginButton{
    background:#2e6bff;
    color:#fff;
}

.record-btn:hover,
#loginButton:hover{
    background:#4d83ff;
}

.stop-btn{
    background:#d34a4a;
    color:#fff;
}

.stop-btn:hover{
    background:#ea6262;
}

.send-btn{
    background:#32d17a;
    color:#fff;
}

.send-btn:hover{
    background:#4ae08d;
}

.status{
    text-align:center;
    color:#aab3c5;
    margin-top:25px;
    min-height:24px;
}

audio{
    width:100%;
    margin-top:20px;
}

input{
    width:100%;
    background:#0f1528;
    border:1px solid #2a355c;
    color:#fff;
    border-radius:14px;
    padding:15px;
    margin-top:20px;
    font-size:16px;
    outline:none;
}

.admin-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    gap:15px;
}

.admin-header button{
    width:auto;
    background:#2e6bff;
    color:#fff;
    margin:0;
    padding:12px 20px;
}

#queueInfo{
    color:#aab3c5;
    margin-bottom:20px;
}

.queue-card{

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

    border-radius:18px;

    padding:20px 22px;

    margin-bottom:16px;

    transition:
        transform .45s ease,
        opacity .45s ease,
        max-height .45s ease,
        margin .45s ease,
        padding .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
    position:relative;
    overflow:hidden;


}

.queue-card.pending{

    background:
        linear-gradient(
            90deg,
            rgba(120,120,120,.45) 0%,
            rgba(120,120,120,.22) 6%,
            rgba(120,120,120,.08) 12%,
            #12192d 18%
        );

}

.queue-card.allowed{

    background:
        linear-gradient(
            90deg,
            rgba(50,209,122,.50) 0%,
            rgba(50,209,122,.22) 6%,
            rgba(50,209,122,.08) 12%,
            #12192d 18%
        );

    animation:allowedGlow 4s ease-in-out infinite;

}

.queue-card.blocked{

    background:
        linear-gradient(
            90deg,
            rgba(211,74,74,.50) 0%,
            rgba(211,74,74,.22) 6%,
            rgba(211,74,74,.08) 12%,
            #12192d 18%
        );

    animation:blockedGlow 4s ease-in-out infinite;

}

.queue-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:56px;

    background:linear-gradient(

        90deg,

        rgba(150,150,150,.22),

        transparent

    );

    filter:blur(8px);

    pointer-events:none;

}

.queue-card.allowed::before{

    background:
        linear-gradient(
            90deg,
            rgba(50,209,122,.28),
            transparent
        );

}

.queue-card.blocked::before{

    background:
        linear-gradient(
            90deg,
            rgba(211,74,74,.28),
            transparent
        );

}

.queue-card:hover{

    border-color:rgba(109,124,255,.35);

    box-shadow:0 0 22px rgba(109,124,255,.12);

}

.queue-card audio{

    display:block;

    width:100%;

    margin:12px 0 18px;

}

.queue-title{

    flex:1;

    font-size:20px;

    font-weight:700;

    letter-spacing:.4px;

}

.empty{
    text-align:center;
    color:#aab3c5;
    padding:35px;
}

@keyframes fade{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:700px){

    .container{
        padding:15px;
    }

    .card{
        padding:20px;
    }

    .logo{
        font-size:30px;
    }

    .queue-buttons{
        flex-direction:column;
    }

    .admin-header{
        flex-direction:column;
        align-items:stretch;
    }

    .admin-header button{
        width:100%;
    }

}

.recorder-card {
    margin-bottom: 20px;
}

.recorder-buttons {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.recorder-buttons button {
    flex: 1;
}

/*=========================
    Top Navigation
=========================*/

.top-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
    padding:0 6px;
}

.nav-link{
    color:#aab3c5;
    text-decoration:none;
    font-size:15px;
    transition:.25s;
}

.nav-link:hover{
    color:#ffffff;
}

.admin-note{
    color:#7f889d;
    transition:.25s;
}

.heart{
    display:inline-block;
    margin-left:4px;
    opacity:0;
    transform:scale(.8);
    color:#ff5ea8;
    transition:
        opacity .25s,
        transform .25s;
}

.nav-link:hover .admin-note{
    color:#ff5ea8;
    text-shadow:0 0 10px rgba(255,94,168,.35);
}

.nav-link:hover .heart{
    opacity:1;
    transform:scale(1);
}

.admin-title{
    color:#ffffff;
}

footer{
    position:fixed;
    left:0;
    right:0;
    bottom:20px;

    width:100%;
    max-width:900px;
    margin:0 auto;

    text-align:center;
}

.footer-line{
    width:100%;
    height:1px;
    background:rgba(255,255,255,.08);
    margin-bottom:16px;
}

footer p{
    color:#7f889d;
    font-size:14px;
}

footer strong{
    color:#ffffff;
}

main{
    flex:1;
}

/*=========================
    Statistics
=========================*/

.stats-bar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:28px;

    margin-bottom:28px;

    color:#aab3c5;

    font-size:15px;

}

.stats-bar span{

    font-weight:600;

}

/*=========================
    Streamer Panel
=========================*/

.recorder-panel{

    background:#171e33;

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

    border-radius:22px;

    padding:30px;

    margin-bottom:24px;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.recorder-panel h2{

    text-align:center;

    margin-bottom:22px;

    font-size:28px;

}

.recording{

    background:#d34a4a !important;

    color:white;

    animation:recordPulse 1s infinite;

}

@keyframes recordPulse{

    0%{

        box-shadow:0 0 0 rgba(211,74,74,.45);

    }

    50%{

        box-shadow:0 0 18px rgba(211,74,74,.65);

    }

    100%{

        box-shadow:0 0 0 rgba(211,74,74,.45);

    }

}

#audioVisualizer{

    display:block;

    width:100%;

    max-width:420px;

    height:70px;

    margin:18px auto 26px;

    opacity:.85;

}

/*=========================
    Refresh Button
=========================*/

.refresh-button{

    width:40px;

    height:40px;

    padding:0;

    margin:0;

    border:none;

    border-radius:50%;

    background:#2e6bff;

    color:#fff;

    font-size:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}

.refresh-button:hover{

    background:#4d83ff;

    box-shadow:0 0 16px rgba(109,124,255,.45);

}

.refresh-button:active{

    transform:scale(.95);

}

.refresh-icon.spin{

    display:inline-block;

    animation:refreshSpin .6s linear;

}

@keyframes refreshSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================
    Queue Cards 2.0
=========================*/

.queue-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

.queue-actions{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:14px;

}

.queue-actions button{

    width:auto;

}

.successButton,
.failButton{

    flex:1;

    height:42px;

    width:auto;

    margin:0;

    font-size:15px;

    font-weight:600;

}

.successButton{

    flex:1;

    background:#32d17a;

    color:#fff;

}

.successButton:hover{

    background:#43df8b;

}

.failButton{

    flex:1;

    background:#d34a4a;

    color:white;

}

.failButton:hover{

    background:#ea6262;

}

.expandButton{

    width:42px;

    height:42px;

    min-width:42px;

    padding:0;

    margin:0;

    flex:none;

}

.expandButton:hover{

    background:#2b3960;

    color:#fff;

}

/*=========================
    Queue Details
=========================*/

.queue-details{

    max-height:0;

    overflow:hidden;

    margin-top:0;

    transition:
        max-height .35s ease,
        margin-top .35s ease;

}

.queue-details.open{

    max-height:300px;

    margin-top:18px;

}

.details-placeholder{

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

    padding-top:18px;

    color:#8d97aa;

    text-align:center;

    font-size:15px;

}

/*=========================
    Moderator Panel
=========================*/

.details-section{

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

    padding-top:18px;

    margin-top:18px;

}

.details-section h3{

    margin-bottom:14px;

    font-size:17px;

    color:#d6def3;

}

.original-placeholder{

    height:54px;

    border-radius:14px;

    border:1px dashed rgba(255,255,255,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#7d889e;

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

}

.moderation-buttons{

    display:flex;

    gap:12px;

    margin-top:10px;

}

.moderation-buttons button{

    flex:1;

    margin:0;

    width:auto;

}

.approveButton{

    background:#32d17a;

    color:#fff;

}

.approveButton:hover{

    background:#42df8a;

}

.blockButton{

    background:#d34a4a;

    color:#fff;

}

.blockButton:hover{

    background:#ea6262;

}

@keyframes allowedGlow{

    0%,100%{

        box-shadow:
            0 0 0 rgba(50,209,122,.18);

    }

    50%{

        box-shadow:
            0 0 18px rgba(50,209,122,.18);

    }

}

@keyframes blockedGlow{

    0%,100%{

        box-shadow:
            0 0 0 rgba(211,74,74,.18);

    }

    50%{

        box-shadow:
            0 0 18px rgba(211,74,74,.18);

    }

}

.reverse-player{

    display:flex;

    align-items:center;

    gap:14px;

    margin:12px 0 18px;

    padding:14px 18px;

    border-radius:18px;

    background:#1b233b;

}

.reversePlayButton{

    width:46px;

    height:46px;

    border-radius:50%;

    margin:0;

    padding:0;

    background:#2e6bff;

    color:#fff;

    font-size:22px;

    flex-shrink:0;

}

.reverse-time{

    width:95px;

    font-size:14px;

    color:#cfd6e8;

    text-align:center;

}

.reverse-progress{

    flex:1;

}

.reverse-volume{

    width:90px;

}

.reversePlayerText{

    color:#d6def3;

    font-size:16px;

    font-weight:600;

}

/*=========================
    Reverse Sliders
=========================*/

.reverse-progress,
.reverse-volume{

    -webkit-appearance:none;
    appearance:none;

    height:6px;

    background:#d9d9d9;

    border:none;

    border-radius:999px;

    padding:0;
    margin:0;

    cursor:pointer;

}

.reverse-progress::-webkit-slider-thumb,
.reverse-volume::-webkit-slider-thumb{

    -webkit-appearance:none;

    width:16px;
    height:16px;

    border-radius:50%;

    background:#2e6bff;

    border:none;

    margin-top:-5px;

}

.reverse-progress::-webkit-slider-runnable-track,
.reverse-volume::-webkit-slider-runnable-track{

    height:6px;

    border-radius:999px;

    background:#d9d9d9;

}

#guessedInfo{

    margin-bottom:18px;

    color:#32d17a;

    font-size:18px;

    font-weight:700;

}

.guessed{

    position:relative;

    overflow:hidden;

    box-shadow:
        0 0 18px rgba(50,209,122,.35);

}

.guessed::after{

    content:"";

    position:absolute;

    top:-20%;

    left:-45%;

    width:70%;

    height:140%;

    pointer-events:none;

        background:linear-gradient(

        90deg,

        transparent 0%,

        rgba(50,209,122,.15) 15%,

        rgba(50,209,122,.85) 40%,

        rgba(220,255,235,1) 50%,

        rgba(50,209,122,.85) 60%,

        rgba(50,209,122,.15) 85%,

        transparent 100%

    );
    transform:skewX(-22deg);

    filter:blur(18px);

    animation:successSweep .9s cubic-bezier(.22,.61,.36,1) forwards;

}

.failed{

    position:relative;

    overflow:hidden;

    box-shadow:
        0 0 18px rgba(211,74,74,.35);

}

.failed::after{

    content:"";

    position:absolute;

    top:-20%;

    left:-45%;

    width:70%;

    height:140%;

    pointer-events:none;

    background:linear-gradient(

        90deg,

        transparent 0%,

        rgba(211,74,74,.15) 15%,

        rgba(211,74,74,.85) 40%,

        rgba(255,220,220,1) 50%,

        rgba(211,74,74,.85) 60%,

        rgba(211,74,74,.15) 85%,

        transparent 100%

    );

    transform:skewX(-22deg);

    filter:blur(18px);

    animation:failSweep .9s cubic-bezier(.22,.61,.36,1) forwards;

}

@keyframes successSweep{

    0%{

        left:-45%;

        opacity:0;

    }

    15%{

        opacity:1;

    }

    100%{

        left:120%;

        opacity:0;

    }

}

@keyframes failSweep{

    0%{

        left:-45%;

        opacity:0;

    }

    15%{

        opacity:1;

    }

    100%{

        left:120%;

        opacity:0;

    }

}

.removing{

    opacity:0;

    transform:scale(.96);

    max-height:0;

    margin-bottom:0;

    padding-top:0;

    padding-bottom:0;

    overflow:hidden;

}