body {
background-color: #f5f5f5; 
margin: 0; 
padding: 2rem; 
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 
}
    
#canvasContainer {
position: relative;
width: 100%;
touch-action: none;
}

canvas {
background-color: #f1f1f1; 
width: 100%;
height: auto;
cursor: grab;
}

#iconContainer {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(0,0,0,0.6);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
}

#iconContainer label {
color: white;
font-size: 1.2rem;
cursor: pointer;
user-select: none;
}

.controls {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.8rem;
align-items: center;
width: 100%;
max-width: 500%;
margin-inline: auto;
}

.controls button {
width: 100%;
max-width: 320px;
padding: 0.7rem 1.4rem;
font-size: 1rem;
border: none;
border-radius: 8px;
cursor: pointer;
background-color: #007BFF;
color: white;
transition: background 0.3s ease;
}

.controls button:hover {
background-color: #0056b3;
}

.hidden {
display: none;
}

#warning {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 10px 20px;
border-radius: 8px;
font-weight: bold;
backdrop-filter: blur(2px);
box-shadow:0 0 10px rgba(255,255,255,0.2);
display: none;
z-index: 100;
}

#imgurResult {
margin-top: 1rem;
}