body{

background:#101010;

color:white;

font-family:Arial;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

margin:0;

}

.container{

text-align:center;

}

button{

background:#0078ff;

color:white;

border:none;

padding:18px 45px;

font-size:22px;

border-radius:15px;

cursor:pointer;

transition:.2s;

}

button:hover{

transform:scale(1.05);

background:#0064d4;

}

#dropzone{

margin:25px auto;

width:500px;

height:180px;

border:3px dashed #4da3ff;

border-radius:20px;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

font-size:22px;

color:#bbbbbb;

transition:.2s;

}

#dropzone.drag{

background:#1c3557;

border-color:#00bfff;

color:white;

}

#selectedFiles{

margin-top:20px;

font-size:18px;

color:#dddddd;

}

#progressContainer{

margin-top:25px;

width:500px;

height:18px;

background:#2d2d2d;

border-radius:20px;

overflow:hidden;

display:none;

}

#progressBar{

height:100%;

width:0%;

background:#0078ff;

transition:width .2s;

}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;max-width:900px;margin:20px auto}
.card{position:relative;background:#1d1d1d;border-radius:14px;padding:10px}
.preview{height:120px;background:#2a2a2a;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:56px;overflow:hidden}
.preview img{width:100%;height:100%;object-fit:cover}
.info{margin-top:8px;font-size:14px;word-break:break-all}
.remove{position:absolute;top:8px;right:8px;padding:4px 8px;font-size:14px;background:#c62828}

.toast{position:fixed;bottom:20px;right:20px;background:#1f8f3a;color:#fff;padding:14px 20px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.4);font-weight:bold;}
.card{transition:.2s}.card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.summary{margin:15px 0;color:#ccc;font-size:15px}
.preview{cursor:pointer}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);align-items:center;justify-content:center;z-index:1000}
.modal img{max-width:90vw;max-height:90vh;border-radius:10px}

.grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:1100px}
.card{width:180px;background:#1b1b1b;border-radius:16px;padding:10px;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.35);transition:.2s}
.card:hover{transform:translateY(-4px)}
.preview{height:130px;display:flex;align-items:center;justify-content:center;background:#2a2a2a;border-radius:12px;font-size:56px;overflow:hidden}
.preview img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.info{padding:8px 2px;font-size:14px;word-break:break-word}
.remove{position:absolute;top:8px;right:8px;background:#d33;padding:4px 8px;border-radius:50%}
.summary{margin:15px;font-weight:bold}
.toast{position:fixed;bottom:20px;right:20px;background:#2d9d4d;padding:14px 20px;border-radius:12px}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);align-items:center;justify-content:center}
.modal img{max-width:90%;max-height:90%}
.drag{border-color:#8ec5ff;background:#17304f}

button:disabled{opacity:.6;cursor:not-allowed}
#progressText{margin-top:8px;font-size:14px;color:#666}