body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
}

.container {
    max-width: 1000px;
    width: 100%;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

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

section {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#problem-section {
    background-color: #e8f4fd;
    border-color: #b6e0fe;
}

.scale-control {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.guide-control {
    background-color: #fff8e1;
    padding: 10px;
    border-radius: 4px;
}

#guide-step {
    font-weight: bold;
    margin-bottom: 10px;
    min-height: 24px;
}

#workspace {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#canvas-container {
    position: relative;
    width: 800px; /* Represents 20cm width if 1cm = 40px */
    height: 600px; /* Represents 15cm height */
    border: 2px solid #333;
    overflow: hidden;
    cursor: crosshair;
    background-color: white;
    margin-bottom: 10px;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

#grid-canvas {
    z-index: 0;
}

#drawing-canvas {
    z-index: 1;
}

#protractor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 220px; /* Extra height for rotator handle */
    z-index: 10;
    cursor: move;
    user-select: none;
    touch-action: none;
}

#ruler {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 80px; /* Extra height for rotator handle */
    z-index: 10;
    cursor: move;
    user-select: none;
    touch-action: none;
}

#protractor svg, #ruler svg {
    pointer-events: none; /* Let clicks pass through to container for dragging */
}

.pivot {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 0, 0, 0.5);
    border: 2px solid white;
    border-radius: 50%;
    cursor: crosshair;
    pointer-events: auto;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    z-index: 20;
}

/* Specific positions will be set in JS or relative CSS, 
   but since they need to rotate with container, we place them absolutely inside the container.
   However, we need them to be at specific spots.
   Ruler: 
   Pivot 1: Left end.
   Pivot 2: Right end.
*/

#ruler .pivot-1 {
    top: 50%;
    left: 20px; /* Offset slightly */
    transform: translate(-50%, -50%);
}

#ruler .pivot-2 {
    top: 50%;
    right: 20px; /* Offset slightly */
    transform: translate(50%, -50%);
}

#protractor .pivot-1 {
    /* Origin: Bottom Center */
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%); /* Center on the line */
}

#protractor .pivot-2 {
    /* Right Edge (0 degrees) */
    bottom: 0;
    right: 20px;
    transform: translate(50%, 50%);
}

.tool-btn.active {
    background-color: #0056b3;
    border: 2px solid #003d80;
}

#drawing-canvas.on-top {
    z-index: 20;
}

.toolbar {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

button {
    padding: 8px 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
}

button:hover {
    background-color: #0056b3;
}

button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

#cursor-info {
    font-family: monospace;
}