body { 
            font-family: 'Segoe UI', sans-serif; 
			background-color: #aa33ff;
			padding: 20px; 
			display: flex; 
			flex-direction: column; 
			align-items: center; 
		}
        .app-bar {
		  position: sticky;
		  top: 0;
		  background: #2c3e50;
		  color: white;
		  padding: 10px;
		  display: flex;
		  align-items: center;
		  width: 95%;
		  max-width: 1000px;
		  gap: 10px;
		  z-index: 10;
		}

		.app-bar button {
		  background: none;
		  color: white;
		  border: none;
		  font-size: 16px;
		  cursor: pointer;
		}

		.controls { 
			background: white; 
			padding: 5px; 
			border-radius: 12px; 
			display: grid; 
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
			gap: 5px; margin-bottom: 10px; 
			box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
			width: 95%; max-width: 1000px; 
		}
        
		/* The new flex container for the three main elements */
		.main-layout {
			display: flex;
			flex-direction: row; /* Aligns items horizontally */
			align-items: flex-start; 
			gap: 10px;
			width: 95%;
			max-width: 1000px; /* Increased to fit sidebars */
			margin-top: 10px;
		}

		/* Vertical Left Bar */
		.view-bar {
			background: #2c3e50;
			color: white;
			padding: 10px;
			border-radius: 12px 12px 0 0;
			display: flex;
			flex-direction: column; /* Stack buttons vertically */
			width: 160px; /* Fixed width for the sidebar */
			height: auto;
			border-radius: 12px;
			gap: 20px;
			box-sizing: border-box;
		}

		/* Vertical Right Panel */
		.analysis-panel {
			background: #fff;
			display: flex;
			flex-direction: column; /* Stack data items vertically */
			width: 120px;
			height: auto;
			border-top: 5px solid #2ecc71;
			padding: 10px;
			border-radius: 8px;
			justify-content: space-around;
			gap: 15px;
		}

		/* The Canvas in the middle */
		canvas {
			background: #ffffff;
			border: 2px solid #000; 
			cursor: move;
			touch-action: none;
			flex-grow: 1; /* Takes up all remaining space */
			margin-top: 0; /* Remove top margin since it's aligned by flex */
			border-radius: 8px;
		}

		/* Small adjustment for the text in vertical bars */
		.view-bar .group {
			display: flex;
			flex-direction: column;
			gap: 5px;
		}
		
		.cut-item { 
			font-size: 12px; 
			color: #000;  
		}
		
        .cut-val { 
			display: block; 
			font-size: 14px; 
			font-weight: bold; 
			color: #27ae60; 
		}
		
        .cut-label { 
			font-size: 12px; 
			color: #000; 
			font-weight: bold; 
			text-transform: uppercase; 
		}
       
	     button { 
			background: #2980b9; 
			color: white; 
			border: none; 
			padding: 10px 15px; 
			 cursor: pointer; 
			 border-radius: 4px; 
			 font-size: 11px; 
			 font-weight: bold; 
		 }
		 
         button:hover { 
			background: #666; 
		 }
		 
        .btn-center { 
			background: #2980b9; 
		}
        .btn-pdf { 
			background: #e74c3c;
			margin-top: 10px; 
		}
		
        .btn-reset { 
			background: #95a5a6; 
		}
        
       .group { 
			border: 1px solid #eee; 
			padding: 8px; 
			border-radius: 8px;
		}
	   
        label { 
			font-size: 10px; 
			font-weight: bold; 
			color: #555; 
			display: block; 
			margin-top: 5px; 
		}
		
        input[type="number"], input[type="text"], select { 
			width: 100%; 
			padding: 4px; 
			border: 1px solid #ccc; 
			border-radius: 4px; 
			box-sizing: 
			border-box; 
		}
		
        h4 { 
			margin: 0 0 5px 0; 
			color: #333; 
			font-size: 12px; 
			font-weight: bold; 
			text-transform: uppercase; 
		}
        
        #headerInfo { 
			display: none; 
			text-align: 
			center; width: 100%; 
			margin-bottom: 20px; 
			border-bottom: 2px solid #333; 
			padding-bottom: 10px; 
		}
		
        #headerInfo h1 { 
			margin: 0; 
			font-size: 24px; 
			color: #e74c3c; 
			text-transform: uppercase; 
		}
		
        #headerInfo p { 
			margin: 5px 0; 
			font-size: 14px; 
			color: #444; 
			font-weight: bold; 
		}
		
		@media print {
            .controls, .snap-panel, .view-bar, button { display: none !important; }
            body { background: white; padding: 0; }
            .main-layout { display: block; }
			.view-bar, .analysis-panel { display: none !important; }
            #headerInfo { display: block !important; }
           
        }
    }