body,
 html {
   margin: 0;
   padding: 0;
   height: 100%;
   background: radial-gradient(circle at center, #111 0%, #000 100%);
   color: white;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   overflow: hidden;
   display: flex;
   flex-direction: row;
   height: 100vh;
 }

 #controlsPanel {
   width: 360px;
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(12px);
   border-right: 1px solid rgba(255, 255, 255, 0.1);
   padding: 1rem;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   box-sizing: border-box;
 }

 #controlsPanel h1 {
   margin-top: 0;
   font-size: 1.5rem;
   margin-bottom: 1rem;
   user-select: none;
 }

 #topControls {
   display: flex;
   gap: 0.5rem;
   margin-bottom: 1rem;
   flex-shrink: 0;
   align-items: center;
 }

 #topControls select,
 #topControls button {
   flex: 1;
   padding: 0.5rem;
   font-weight: bold;
   border-radius: 6px;
   border: none;
   cursor: pointer;
   background: #0ff;
   color: #000;
   transition: background-color 0.3s;
 }

 #topControls select:hover,
 #topControls button:hover {
   background: #0cc;
 }

 #layerControls {
   display: flex;
   gap: 0.5rem;
   margin-bottom: 1rem;
   flex-shrink: 0;
 }

 #layerControls button {
   flex: 1;
   padding: 0.5rem;
   font-weight: bold;
   border-radius: 6px;
   border: none;
   cursor: pointer;
   background: #0ff;
   color: #000;
   transition: background-color 0.3s;
 }

 #layerControls button:hover {
   background: #0cc;
 }

 #layers {
   flex-grow: 1;
   overflow-y: auto;
   padding-right: 0.5rem;
 }

 .layer {
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   padding: 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   margin-bottom: 1rem;
   user-select: none;
 }

 .layer h3 {
   margin: 0 0 0.5rem 0;
   font-size: 1.1rem;
   user-select: none;
 }

 label {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 0.9rem;
   user-select: none;
 }

 input[type=range],
 input[type=color],
 select {
   margin-left: 1rem;
   cursor: pointer;
   flex-shrink: 0;
 }

 input[type=checkbox] {
   cursor: pointer;
 }

 #canvasContainer {
   flex-grow: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 1rem;
   box-sizing: border-box;
   background: #111;
 }

 canvas {
   border-radius: 12px;
   box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
   background: #111;
   max-width: 100%;
   max-height: 100%;
 }

 /* New buttons for move up/down */
 .move-buttons {
   display: flex;
   gap: 0.5rem;
 }

 .move-buttons button {
   flex: 1;
   padding: 0.3rem 0;
   font-weight: bold;
   border-radius: 6px;
   border: none;
   cursor: pointer;
   background: #0ff;
   color: #000;
   transition: background-color 0.3s;
   user-select: none;
 }

 .move-buttons button:hover {
   background: #0cc;
 }

 @media (max-width: 768px) {

   body,
   html {
     flex-direction: column;
   }

   #controlsPanel {
     width: 100%;
     max-height: 40vh;
     border-right: none;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }

   #canvasContainer {
     flex-grow: 1;
     height: 60vh;
   }

   #controlsPanel,
   #canvasContainer,
   .layer {
     padding: 0.5rem;
   }

   html {
     font-size: 14px;
   }
 }