body { 
            font-family: 'Segoe UI', sans-serif;
    /*  background: #f0f2f5; */
            background-color: purple;
            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: 8px; 
            border-radius: 12px; 
            display: grid; 
		    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
            gap: 8px; 
            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: 160px;
			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 { 
			display: flex;
			flex-direction: row; /* Aligns items horizontally */
			gap: 20px; 
			
			font-size: 12px; 
			color: #000;  
		}
        .cut-val { 
			display: flex; 
			font-size: 14px; 
			font-weight: bold; 
			color: #27ae60; 
		}
        .cut-label { 
			font-size: 12px; 
			olor: #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; }
         }