body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
.container {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    width: 400px;
    text-align: center;
}
.upload-area {
    border: 2px dashed #3498db;
    padding: 30px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 20px;
}
.upload-area:hover {
    background: #eaf6ff;
}
.icon { font-size: 40px; margin-bottom: 10px; }

/* Spark Animation Progress Bar */
.progress-container { margin-top: 30px; }
.spark-bar {
    width: 100%;
    height: 10px;
    background: #ddd;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
.spark-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3498db, #8e44ad, #3498db);
    background-size: 200% 100%;
    transition: width 0.5s ease;
    animation: sparkle 1.5s infinite linear;
}
@keyframes sparkle {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
#status-text { color: #555; font-size: 14px; margin-top: 10px; }