/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', sans-serif; }
body { background:#f4f5f7; color:#333; }
a { text-decoration:none; color:#007bff; }
button { cursor:pointer; }

/* Login */
.login-container {
    max-width: 400px; margin:100px auto; background:#fff; padding:30px; border-radius:10px; box-shadow:0 0 20px rgba(0,0,0,0.1);
    text-align:center;
}
.login-container h2 { margin-bottom:20px; color:#444; }
.login-container input { width:100%; padding:10px; margin:10px 0; border-radius:5px; border:1px solid #ccc; }
.login-container button { width:100%; padding:10px; background:#007bff; border:none; color:#fff; border-radius:5px; transition:0.3s; }
.login-container button:hover { background:#0056b3; }
.error { color:red; margin-top:10px; }

/* Dashboard */
.dashboard { max-width:900px; margin:40px auto; }
.dashboard h1 { margin-bottom:20px; }
.dashboard a { display:inline-block; margin-bottom:20px; }
#uploadForm { background:#fff; padding:20px; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.05); margin-bottom:30px; }
#files { width:100%; padding:20px; border:2px dashed #007bff; border-radius:10px; text-align:center; cursor:pointer; }
#progressContainer { margin-top:15px; height:20px; background:#e0e0e0; border-radius:10px; overflow:hidden; }
#progressContainer div { height:100%; background:#007bff; width:0%; transition:width 0.3s; }

/* Gallery */
.gallery { display:grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap:15px; }
.thumb { background:#fff; padding:10px; border-radius:10px; text-align:center; box-shadow:0 0 10px rgba(0,0,0,0.05); }
.thumb img { max-width:100%; border-radius:5px; margin-bottom:5px; }
.thumb button { background:#28a745; color:#fff; border:none; padding:5px 10px; border-radius:5px; margin-top:5px; transition:0.3s; }
.thumb button:hover { background:#218838; }
.thumb input[type="checkbox"] { margin-top:5px; }