.container {
      max-width: 100%;
      margin: auto;
      background: white;
     
    }
   
    .section {
      margin-bottom: 20px;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 6px;
    }
    label { display: block; margin: 10px 0 5px; }
    input, select, button {
      padding: 8px;
      margin: 5px 0;
      width: 100%;
      box-sizing: border-box;
    }
    button {
      background: #007bff;
      color: white;
      border: none;
      cursor: pointer;
    }
    button:hover { background: #0056b3; }
    .remove-btn {
      background: #dc3545;
    }
    .remove-btn:hover { background: #c82333; }
    .item {
      border: 1px solid #eee;
      padding: 10px;
      margin: 10px 0;
      border-radius: 4px;
    }
    .flex {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .flex button {
      width: auto;
    }
    .result {
      margin-top: 20px;
      padding: 15px;
      background: #e9f7ef;
      border: 1px solid #27ae60;
      border-radius: 6px;
      font-size: 1.1em;
    }
    .wall-visualization {
      margin-top: 10px;
      font-size: 0.9em;
      color: #555;
    }
    .viz-canvas {
      border: 1px solid #ccc;
      background: #f9f9f9;
      margin-top: 5px;
    }
    #customBrickInputs {
      display: none;
      margin-top: 10px;
      padding: 10px;
      background: #f0f8ff;
      border-radius: 4px;
    }
    .export-btn {
      background: #28a745;
      margin-top: 10px;
    }
    .export-btn:hover {
      background: #218838;
    }