body {
    font-family: sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
}

h1, h3 {
    color: #333;
}

.controls, .editor-container, .simulation-results {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.controls label {
    margin-right: 5px;
}
.controls input[type="number"], .controls select, .controls button {
    margin-right: 10px;
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.controls button {
    cursor: pointer;
    background-color: #5cb85c;
    color: white;
    border-color: #4cae4c;
}
.controls button:hover {
    background-color: #4cae4c;
}
#reset-circuit {
    background-color: #f0ad4e;
    border-color: #eea236;
}
#reset-circuit:hover {
    background-color: #eea236;
}


.editor-container {
    display: flex;
    gap: 20px;
    align-items: flex-start; /* Align items at the top */
}

.gate-palette {
    border: 1px solid #ccc;
    padding: 10px;
    min-width: 150px; /* Give palette some minimum width */
    background-color: #f9f9f9;
}
.gate-palette h3, .circuit-editor h3, .simulation-results h3 {
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
.gate-button {
    display: block; /* Make buttons stack vertically */
    width: 100%;
    margin: 5px 0; /* Adjust margin for vertical layout */
    padding: 8px 10px;
    cursor: pointer;
    background-color: #e7e7e7;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-align: center;
}
.gate-button:hover {
    background-color: #ddd;
}
.gate-button.selected {
    background-color: #add8e6; /* Light blue */
    border-color: #9acae0;
    font-weight: bold;
}
.selected-gate-info {
    margin-top: 15px;
    font-size: 0.9em;
    color: #555;
}

.circuit-editor {
    border: 1px solid #ccc;
    padding: 10px;
    overflow-x: auto; /* Enable horizontal scrolling */
    flex-grow: 1; /* Allow editor to take remaining space */
    background-color: #fff;
}
#circuit-svg .qubit-line {
    stroke: #333;
    stroke-width: 1.5; /* Slightly thicker line */
}
#circuit-svg .gate-rect {
    fill: #add8e6; /* Light blue for single qubit gates */
    stroke: #00008b; /* Dark blue border */
    stroke-width: 1;
    cursor: pointer;
    rx: 3; /* Slightly rounded corners */
    ry: 3;
}
#circuit-svg .gate-rect:hover {
    fill: #9acae0; /* Darker on hover */
}

#circuit-svg .gate-text {
    fill: black;
    font-size: 12px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none; /* Click through text to rect */
    user-select: none; /* Prevent text selection */
}
#circuit-svg .control-dot {
    fill: #00008b; /* Dark blue control */
    cursor: pointer;
}
#circuit-svg .control-dot:hover {
    fill: #0000cd; /* Medium blue on hover */
}

#circuit-svg .target-cross { /* Style for the lines making the ⊕ */
    stroke: #00008b; /* Dark blue */
    stroke-width: 2;
    cursor: pointer;
    pointer-events: none; /* Target the circle below */
}
/* Circle part of the CNOT target */
#circuit-svg .target-cross-circle {
    fill: none;
    stroke: #00008b;
    stroke-width: 2;
    cursor: pointer;
}
#circuit-svg .target-cross-circle:hover {
     fill: rgba(0, 0, 139, 0.1); /* Slight fill on hover */
}


#circuit-svg .control-line {
    stroke: #00008b; /* Dark blue */
    stroke-width: 1;
}

#circuit-svg .target-phase-rect {
    fill: #e6e6fa; /* Lavender for phase target */
    stroke: #483d8b; /* Dark Slate Blue border */
    stroke-width: 1;
    cursor: pointer;
    rx: 3;
    ry: 3;
}
#circuit-svg .target-phase-rect:hover {
    fill: #d8d8f0; /* Darker on hover */
}
#circuit-svg .target-phase-text {
    fill: #483d8b; /* Dark Slate Blue text */
    font-size: 10px; /* Smaller text for phase target */
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none; /* Click through text to rect */
    user-select: none;
}


#circuit-svg .circuit-step {
    fill: rgba(0,0,0,0.02); /* Very light grey for drop zones */
    cursor: pointer;
    /* stroke: #eee; stroke-width: 0.5; */ /* Optional: Add faint grid lines */
}
#circuit-svg .circuit-step:hover {
    fill: rgba(0,0,0,0.08); /* Darker on hover */
}

.simulation-results {
    border: 1px solid #ccc;
    padding: 15px;
}
#statevector-output, #probabilities-output {
    white-space: pre-wrap;
    font-family: monospace;
    margin-bottom: 15px;
    max-height: 200px; /* Increase max height */
    overflow-y: auto;
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 3px;
    font-size: 0.9em;
}
#probability-chart {
    margin-top: 10px;
}
#prob-chart-svg .bar {
    fill: steelblue;
}
#prob-chart-svg .bar:hover {
    fill: lightsteelblue;
}
#prob-chart-svg .axis-text {
    font-size: 10px;
    text-anchor: middle;
    fill: #555;
}
#prob-chart-svg .axis-line {
    stroke: #ccc;
    stroke-width: 1;
    shape-rendering: crispEdges; /* Make lines sharp */
}