body { margin:0; font-family:Arial,sans-serif; background:#f7f7f7; display:flex; justify-content:center; align-items:flex-start; height:100vh; }
.container { display:flex; width:100%; height:100%; }
.sidebar { width:250px; background:#fff; border-right:1px solid #ddd; display:flex; flex-direction:column; align-items:center; padding:10px; overflow-y:auto; }
.file-label { display:inline-block; padding:8px 12px; background:#28a745; color:#fff; border-radius:5px; cursor:pointer; font-weight:bold; margin-bottom:10px; transition:0.3s; }
.file-label:hover { background:#218838; }
.file-label input { display:none; }

#gallery { display:flex; flex-direction:column; gap:10px; width:100%; }
.gallery img { width:100%; border:2px solid #ccc; border-radius:5px; cursor:pointer; transition:border-color 0.3s; }
.gallery img.selected { border-color:#007bff; }

.editor { flex-grow:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:10px; }
.controls-top { display:flex; gap:10px; margin-bottom:10px; }
.controls-bottom { display:flex; gap:10px; margin-top:10px; }
button { padding:6px 12px; border:none; background:#007bff; color:#fff; border-radius:5px; cursor:pointer; transition:0.3s; }
button:hover { background:#0056b3; }

#downloadBtn.clicked { background:#28a745; }
#canvas { background:#eee; max-width:90%; max-height:70vh; border-radius:5px; display:none; cursor:crosshair; }
button.clicked {
    background:#28a745 !important; /* Green to indicate click */
    color:#fff;
}
button.active {
    background: #28a745 !important; /* stay green */
    color: #fff;
}