*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI,sans-serif;
}

body{
    background:#0f1117;
    color:white;
    min-height:100vh;
    padding:30px;
}

.login-screen{
    position:fixed;
    inset:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:#0f1117;
}

.login-panel{
    width:100%;
    max-width:380px;
    background:#1b1f2a;
    padding:28px;
    border-radius:12px;
    box-shadow:0 0 18px rgba(111, 0, 255, 0.712);
}

.login-panel h1{
    margin-bottom:10px;
    color:#6f00ff;
    text-align:center;
}

.login-panel p{
    color:#cfcfcf;
    text-align:center;
}

.login-error{
    min-height:20px;
    margin-top:10px;
    color:#aa6aff !important;
    font-weight:bold;
}

.app-hidden,
.login-hidden{
    display:none;
}

.container{
    max-width:1100px;
    margin:auto;
}

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

header h1{
    color:#6f00ff;
    margin-bottom:10px;
}

.subtitle{
    color:#cfcfcf;
}

.logout-button{
    width:auto;
    min-width:190px;
    margin-top:18px;
    padding:10px 14px;
    background:#2f3648;
}

.logout-button:hover{
    background:#3d465d;
}

.admin-hidden{
    display:none;
}

section{
    background:#1b1f2a;
    padding:25px;
    margin-bottom:25px;
    border-radius:15px;
    box-shadow:0 0 15px rgba(111, 0, 255, .2);
}

.admin-card{
    border:1px solid rgba(111, 0, 255,.45);
}

.admin-card label{
    display:block;
    margin-top:15px;
    color:#cfcfcf;
    font-weight:bold;
}

.danger-button{
    background:#420097;
}

.danger-button:hover{
    background:#420097;
}

.admin-message{
    min-height:20px;
    margin-top:12px;
    color:#ff6767;
    font-weight:bold;
}

.progress-container{
    width:100%;
    height:35px;
    background:#2f3648;
    border-radius:50px;
    overflow:hidden;
    margin:20px 0;
}

.progress-bar{
    height:100%;
    width:0%;
    background:linear-gradient(
        90deg,
        #6f00ff,
        #4ba8ff
    );
    transition:.5s;
}

#percentage{
    font-size:28px;
    font-weight:bold;
    color:#4ba8ff;
}

input{
    width:100%;
    padding:12px;
    margin-top:10px;
    border:none;
    border-radius:8px;
    background:#2f3648;
    color:white;
}

button{
    width:100%;
    margin-top:15px;
    padding:12px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    background:#6f00ff;
    color:white;
    font-weight:bold;
    transition:.3s;
}

button:hover{
    background:#6f00ff;
}

table{
    width:100%;
    border-collapse:collapse;
}

th,td{
    padding:12px;
    text-align:center;
}

th{
    background:#2f3648;
}

tr:nth-child(even){
    background:#232938;
}

#history{
    list-style:none;
}

#history li{
    padding:8px;
    border-bottom:1px solid #333;
}

.complete{
    animation:pulse 1s infinite;
}

.hidden{
    display:none;
}

@keyframes pulse{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.02);
    }
    100%{
        transform:scale(1);
    }
}