:root{

    --bg:#f4f6fb;
    --card:#fff;
    --text:#111;
    --border:#ddd;
}

@media (prefers-color-scheme:dark){

    :root{

        --bg:#121212;
        --card:#1e1e1e;
        --text:#fff;
        --border:#444;
    }
}

body{

    margin:0;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--bg);

    font-family:sans-serif;
}

.upload-card{

    width:min(95%,600px);

    background:var(--card);

    color:var(--text);

    border-radius:20px;

    padding:25px;

    box-shadow:
        0 5px 20px
        rgba(0,0,0,.15);
}

#dropArea{

    border:3px dashed #4f7cff;

    border-radius:15px;

    padding:40px;

    text-align:center;

    cursor:pointer;
}

#dropArea.drag{

    background:#4f7cff22;
}

#preview{

    margin-top:20px;

    text-align:center;
}

#preview img,
#preview video{

    max-width:100%;

    border-radius:10px;

    margin-top:10px;
}

#progressContainer{

    width:100%;

    height:20px;

    background:#ddd;

    border-radius:10px;

    overflow:hidden;

    margin-top:15px;
}

#progressBar{

    width:0;

    height:100%;

    background:#4f7cff;

    transition:.2s;
}

#loading{

    display:none;

    margin-top:10px;

    text-align:center;

    font-weight:bold;
}

button{

    width:100%;

    margin-top:15px;

    padding:12px;

    border:none;

    border-radius:10px;

    background:#4f7cff;

    color:white;

    cursor:pointer;
}

input[type=password],
#shareUrl{

    width:100%;

    padding:12px;

    margin-top:15px;

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

    border-radius:10px;

    background:var(--card);

    color:var(--text);
}