body {
      font-family: Arial, sans-serif;
      margin: 0;
    }

    .main-container1 {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 0 15px rgba(0,0,0,0.2);
      max-width: 1000px;
      margin: 0 auto;
    }

    h2 {
      text-align: center;
      margin-bottom: 20px;
    }

    h5 {
      margin-bottom: 10px;
      margin-top: 10px;
    }
.tab-container {
  display: flex;
  justify-content: center; /* centers horizontally */
  gap: 10px;
  margin: 20px auto;       /* centers container itself */
  width: fit-content;      /* shrink to content size */
}

    .controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .controls .btn1 {
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      background: #4444ff;
      color: white;
      border-radius: 6px;
      cursor: pointer;
      margin: 5px;
    }

.btn-add{
      padding: 10px 28px;
      font-size: 1rem;
      background-color: #00f0ff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      color: #1a1a2e;
      font-weight: bold;
      transition: background-color 0.3s ease;
      margin-right: 15px;
      margin-top: 20px;

    }


    .controls .btn:disabled {
      background: #888;
      cursor: not-allowed;
    }

    .qubit-box {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 8px;
      background: #f9f9f9;
      min-width: 180px;
    }

    .qubit-box h4 {
      margin-top: 0;
    }

    #gate-bar {
      margin: 15px 0;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      padding: 10px;
      background: #eef;
      border: 1px solid #ccc;
      border-radius: 6px;
    }

    .gate {
      background: #00bfff;
      color: white;
      padding: 8px 12px;
      border-radius: 5px;
      cursor: grab;
      font-weight: bold;
      user-select: none;
    }

    .gate:active {
      background: #0099cc;
    }

    table {
      border-collapse: collapse;
      margin-top: 10px;
      width: 100%;
    }

    th, td {
      border: 1px solid #aaa;
      text-align: center;
      width: 70px;
      height: 40px;
    }

    td.cell {
      background: #fff;
      cursor: pointer;
    }

    td.cell.drag-over {
      background-color: #cceeff;
    }

    th.layer-header {
      background: #ddd;
    }

    #layers-add {
      background: rgb(189, 148, 255);
      color: black;
      font-weight: bold;
      cursor: pointer;
      width: 40px;
    }

    .execute-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
    }

    #output {
      margin-top: 10px;
      background: #f0f0f0;
      padding: 12px;
      border-radius: 6px;
      border: 1px solid #ccc;
      font-family: monospace;
      min-height: 40px;
    }



       /* Existing styles */
    .container1 {
      max-width: 1200px;
      margin: 30px auto;
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 12px rgba(0,0,0,0.1);
    }

    h2 {
      margin-bottom: 10px;
    }

    .input-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 20px;
    }

    .input-row {
      display: flex;
      gap: 12px;
    }

    .input-row div {
      flex: 1;
    }

    label {
      font-weight: bold;
      font-size: 0.9rem;
      display: block;
      margin-bottom: 6px;
      color: #1a1a2e;
    }

    input[type="text"] {
      padding: 8px;
      width: 100%;
      border-radius: 4px;
      border: 1px solid #ccc;
      font-size: 1rem;
    }

    .buttons {
      margin-bottom: 20px;
    }

    button, .btn1 {
      padding: 10px 28px;
      font-size: 1rem;
      background-color: #00f0ff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      color: #1a1a2e;
      font-weight: bold;
      transition: background-color 0.3s ease;
      margin-right: 15px;
    }

    button:hover {
      background-color: #00c4cc;
    }

    #output {
      white-space: pre-wrap;
      background: #f0f8ff;
      border-radius: 6px;
      padding: 15px;
      min-height: 100px;
      font-family: monospace;
      color: #1a1a2e;
      border: 1px solid #ccc;
    }

   .qubit-list {
  display: grid;                  /* Using grid layout for qubits */
  grid-template-columns: repeat(3, 1fr);  /* Display qubits in 3 equal-width columns */
  gap: 20px;                      /* Add space between the qubits */
  margin-top: 20px;
  background: #fafafa;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.qubit-item {
  padding: 10px;
  background-color: #e6f7ff;
  border-radius: 6px;
  border: 1px solid #cce7ff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.qubit-item:hover {
  background-color: #f0f0f0; /* Change background color on hover */
}


    .qubit-item {
      margin-bottom: 15px;
      padding: 10px;
      background-color: #e6f7ff;
      border-radius: 6px;
      border: 1px solid #cce7ff;
    }

 .glow {
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.7);  /* Green glow effect */
    border: 2px solid green;
  }

  .qubit-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    border: 1px solid #ccc;
  }

  .qubit-item:hover {
    background-color: #f0f0f0;
  }


#output {
  width: 100%;                /* or any fixed width like 400px */
  height: 200px;              /* Set a fixed height */
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
  overflow-y: auto;           /* Enables vertical scroll */
  white-space: pre-line;      /* Preserves line breaks in logs */
  background-color: #f9f9f9;  /* Optional: for readability */
  font-family: monospace;     /* Optional: for log-like appearance */
}



#log-container{
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.added1-container {
  flex: 1;
  height: 100px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
  overflow-y: auto;
  background-color: #f0f0f0;
  font-family: monospace;
  white-space: pre-line;
  border-radius: 8px;  /* Added for slight curve */

}

/* Left log (Execution log with timestamp) */
#execution-log {
  flex: 1;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  overflow-y: auto;
  background-color: #f0f0f0;
  font-family: monospace;
  white-space: pre-line;
  border-radius: 8px;  /* Added for slight curve */
}

/* Right log (Just result/output) */
#result-output {
  flex: 1;
  height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  overflow-y: auto;
  background-color: #fff;
  font-family: monospace;
  font-weight: bold;
  white-space: pre-line;
  border-radius: 8px;  /* Added for slight curve */
}



#log-container h4 {
  margin-bottom: 8px;
  font-size: 1.1rem;
  color: #1a1a2e;
}

/* Log container with two panes (execution log and result output) */
#log-container {
  display: flex;
 
  margin-bottom: 10spx; /* Added margin bottom for the gap */
}

/* Clear Logs button */
#clear-log-btn {
  margin-top: 10px; /* Add a gap between the logs and the button */
  margin-bottom: 10px;
}

#qubit-list1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 16px;
  margin-top: 20px;
}



.qubit-item {
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
  cursor: pointer;
}
.qubit-item:hover {
  background-color: #e0e0e0;
}


@media (max-width: 800px) {
  #qubit-list1 {
    grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
  }
}

@media (max-width: 500px) {
  #qubit-list1 {
    grid-template-columns: 1fr; /* 1 per row on phones */
  }
}